build: migrate the build tool from vue-cli to vite4 (#208)

src/store/modules/profile.ts

@@ -15,18 +15,18 @@
  * limitations under the License.
  */
 import { defineStore } from "pinia";
-import { Endpoint } from "@/types/selector";
-import {
+import type { Endpoint } from "@/types/selector";
+import type {
   TaskListItem,
   SegmentSpan,
   ProfileAnalyzationTrees,
   TaskLog,
   ProfileTaskCreationRequest,
 } from "@/types/profile";
-import { Trace, Span } from "@/types/trace";
+import type { Trace } from "@/types/trace";
 import { store } from "@/store";
 import graphql from "@/graphql";
-import { AxiosResponse } from "axios";
+import type { AxiosResponse } from "axios";
 import { useAppStoreWithOut } from "@/store/modules/app";
 
 interface ProfileState {
@@ -35,9 +35,9 @@ interface ProfileState {
   condition: { serviceId: string; endpointName: string };
   taskList: TaskListItem[];
   segmentList: Trace[];
-  currentSegment: Trace | Record<string, never>;
-  segmentSpans: SegmentSpan[];
-  currentSpan: SegmentSpan | Record<string, never>;
+  currentSegment: Recordable<Trace>;
+  segmentSpans: Array<Recordable<SegmentSpan>>;
+  currentSpan: Recordable<SegmentSpan>;
   analyzeTrees: ProfileAnalyzationTrees;
   taskLogs: TaskLog[];
   highlightTop: boolean;
@@ -65,10 +65,10 @@ export const profileStore = defineStore({
         ...data,
       };
     },
-    setCurrentSpan(span: Span) {
+    setCurrentSpan(span: Recordable<SegmentSpan>) {
       this.currentSpan = span;
     },
-    setCurrentSegment(s: Trace) {
+    setCurrentSegment(s: Recordable<Trace>) {
       this.currentSegment = s;
     },
     setHighlightTop() {
@@ -99,9 +99,7 @@ export const profileStore = defineStore({
       return res.data;
     },
     async getTaskList() {
-      const res: AxiosResponse = await graphql
-        .query("getProfileTaskList")
-        .params(this.condition);
+      const res: AxiosResponse = await graphql.query("getProfileTaskList").params(this.condition);
 
       if (res.data.errors) {
         return res.data;
@@ -122,9 +120,7 @@ export const profileStore = defineStore({
       if (!params.taskID) {
         return new Promise((resolve) => resolve({}));
       }
-      const res: AxiosResponse = await graphql
-        .query("getProfileTaskSegmentList")
-        .params(params);
+      const res: AxiosResponse = await graphql.query("getProfileTaskSegmentList").params(params);
 
       if (res.data.errors) {
         this.segmentList = [];
@@ -143,7 +139,7 @@ export const profileStore = defineStore({
         this.currentSegment = segmentList[0];
         this.getSegmentSpans({ segmentId: segmentList[0].segmentId });
       } else {
-        this.currentSegment = null;
+        this.currentSegment = {};
       }
       return res.data;
     },
@@ -151,9 +147,7 @@ export const profileStore = defineStore({
       if (!params.segmentId) {
         return new Promise((resolve) => resolve({}));
       }
-      const res: AxiosResponse = await graphql
-        .query("queryProfileSegment")
-        .params(params);
+      const res: AxiosResponse = await graphql.query("queryProfileSegment").params(params);
       if (res.data.errors) {
         this.segmentSpans = [];
         return res.data;
@@ -167,8 +161,8 @@ export const profileStore = defineStore({
       this.segmentSpans = segment.spans.map((d: SegmentSpan) => {
         return {
           ...d,
-          segmentId: this.currentSegment.segmentId,
-          traceId: this.currentSegment.traceIds[0],
+          segmentId: this.currentSegment?.segmentId,
+          traceId: (this.currentSegment.traceIds as any)[0],
         };
       });
       if (!(segment.spans && segment.spans.length)) {
@@ -179,19 +173,14 @@ export const profileStore = defineStore({
       this.currentSpan = segment.spans[index];
       return res.data;
     },
-    async getProfileAnalyze(params: {
-      segmentId: string;
-      timeRanges: Array<{ start: number; end: number }>;
-    }) {
+    async getProfileAnalyze(params: { segmentId: string; timeRanges: Array<{ start: number; end: number }> }) {
       if (!params.segmentId) {
         return new Promise((resolve) => resolve({}));
       }
       if (!params.timeRanges.length) {
         return new Promise((resolve) => resolve({}));
       }
-      const res: AxiosResponse = await graphql
-        .query("getProfileAnalyze")
-        .params(params);
+      const res: AxiosResponse = await graphql.query("getProfileAnalyze").params(params);
 
       if (res.data.errors) {
         this.analyzeTrees = [];
@@ -211,9 +200,7 @@ export const profileStore = defineStore({
       return res.data;
     },
     async createTask(param: ProfileTaskCreationRequest) {
-      const res: AxiosResponse = await graphql
-        .query("saveProfileTask")
-        .params({ creationRequest: param });
+      const res: AxiosResponse = await graphql.query("saveProfileTask").params({ creationRequest: param });
 
       if (res.data.errors) {
         return res.data;
@@ -222,9 +209,7 @@ export const profileStore = defineStore({
       return res.data;
     },
     async getTaskLogs(param: { taskID: string }) {
-      const res: AxiosResponse = await graphql
-        .query("getProfileTaskLogs")
-        .params(param);
+      const res: AxiosResponse = await graphql.query("getProfileTaskLogs").params(param);
 
       if (res.data.errors) {
         return res.data;