refactor: optimize data types for widgets and dashboards (#490)

src/views/dashboard/graphs/EndpointList.vue

@@ -192,7 +192,7 @@ limitations under the License. -->
       return;
     }
     router.push(
-      `/dashboard/${dashboard.layer}/${dashboard.entity}/${selectorStore.currentService.id}/${scope.row.id}/${dashboard.name}`,
+      `/dashboard/${dashboard.layer}/${dashboard.entity}/${selectorStore.currentService?.id}/${scope.row.id}/${dashboard.name}`,
     );
   }
   async function searchList() {

src/views/dashboard/graphs/InstanceList.vue

@@ -208,7 +208,7 @@ limitations under the License. -->
       return;
     }
     router.push(
-      `/dashboard/${dashboard.layer}/${dashboard.entity}/${selectorStore.currentService.id}/${
+      `/dashboard/${dashboard.layer}/${dashboard.entity}/${selectorStore.currentService?.id}/${
         scope.row.id
       }/${dashboard.name.split(" ").join("-")}`,
     );

src/views/dashboard/graphs/ServiceList.vue

@@ -85,6 +85,10 @@ limitations under the License. -->
   import type { MetricConfigOpt } from "@/types/dashboard";
   import ColumnGraph from "./components/ColumnGraph.vue";
 
+  interface ServiceWithGroup extends Service {
+    merge: boolean;
+    group: string;
+  }
   /*global defineProps */
   const props = defineProps({
     data: {
@@ -115,12 +119,12 @@ limitations under the License. -->
   const chartLoading = ref<boolean>(false);
   const currentPage = ref<number>(1);
   const pageSize = 10;
-  const services = ref<Service[]>([]);
+  const services = ref<ServiceWithGroup[]>([]);
   const colMetrics = ref<string[]>([]);
   const colSubMetrics = ref<string[]>([]);
   const searchText = ref<string>("");
   const groups = ref<any>({});
-  const sortServices = ref<(Service & { merge: boolean })[]>([]);
+  const sortServices = ref<ServiceWithGroup[]>([]);
   const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
   const typesOfMQE = ref<string[]>(props.config.typesOfMQE || []);
 
@@ -144,12 +148,12 @@ limitations under the License. -->
         return 1;
       }
       return 0;
-    });
-    const s = sortServices.value.filter((d: Service, index: number) => index < pageSize);
+    }) as ServiceWithGroup[];
+    const s = sortServices.value.filter((d: ServiceWithGroup, index: number) => index < pageSize);
     setServices(s);
   }
 
-  function setServices(arr: (Service & { merge: boolean })[]) {
+  function setServices(arr: ServiceWithGroup[]) {
     groups.value = {};
     const map: { [key: string]: any[] } = arr.reduce((result: { [key: string]: any[] }, item: any) => {
       item.group = item.group || "";
@@ -191,11 +195,11 @@ limitations under the License. -->
 
     router.push(path);
   }
-  async function queryServiceMetrics(arr: Service[]) {
+  async function queryServiceMetrics(arr: ServiceWithGroup[]) {
     if (!arr.length) {
       return;
     }
-    const currentServices = arr.map((d: Service) => {
+    const currentServices = arr.map((d: ServiceWithGroup) => {
       return {
         id: d.id,
         value: d.value,
@@ -203,13 +207,13 @@ limitations under the License. -->
         layers: d.layers,
         group: d.group,
         normal: d.normal,
-        merge: d.merge,
+        merge: d.merge || false,
         shortName: d.shortName,
       };
     });
     queryServiceExpressions(currentServices);
   }
-  async function queryServiceExpressions(currentServices: Service[]) {
+  async function queryServiceExpressions(currentServices: ServiceWithGroup[]) {
     const expressions = props.config.expressions || [];
     const subExpressions = props.config.subExpressions || [];
 
@@ -254,7 +258,7 @@ limitations under the License. -->
     if (searchText.value) {
       services = sortServices.value.filter((d: { label: string }) => d.label.includes(searchText.value));
     }
-    const arr = services.filter((d: Service, index: number) => {
+    const arr = services.filter((d: ServiceWithGroup, index: number) => {
       if (index >= (currentPage.value - 1) * pageSize && index < pageSize * currentPage.value) {
         return d;
       }

src/views/dashboard/graphs/TopList.vue

@@ -70,13 +70,12 @@ limitations under the License. -->
   import { TextColors, MetricCatalog } from "@/views/dashboard/data";
   import Trace from "@/views/dashboard/related/trace/Index.vue";
   import { WidgetType, QueryOrders, Status, RefIdTypes, ExpressionResultType } from "@/views/dashboard/data";
+  import type { Filters, RelatedTrace, TopListData, TopListItem } from "@/types/dashboard";
 
-  /*global defineProps, Recordable*/
+  /*global defineProps */
   const props = defineProps({
     data: {
-      type: Object as PropType<{
-        [key: string]: { name: string; value: number; refId: string; owner: object }[];
-      }>,
+      type: Object as PropType<TopListData>,
       default: () => ({}),
     },
     config: {
@@ -84,7 +83,7 @@ limitations under the License. -->
         color: string;
         expressions: string[];
         typesOfMQE: string[];
-        relatedTrace: any;
+        relatedTrace: RelatedTrace;
         valueRelatedDashboard: string;
       }>,
       default: () => ({ color: "purple" }),
@@ -94,28 +93,29 @@ limitations under the License. -->
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
   const showTrace = ref<boolean>(false);
-  const traceOptions = ref<{ type: string; filters?: unknown }>({
+  const traceOptions = ref<{ type: string; filters?: Filters } | any>({
+    ...props.data,
     type: WidgetType.Trace,
   });
   const refIdType = computed(
     () => (props.config.relatedTrace && props.config.relatedTrace.refIdType) || RefIdTypes[0].value,
   );
-  const key = computed(() => Object.keys(props.data)[0] || "");
+  const key = computed<string>(() => Object.keys(props.data)[0] || "");
   const available = computed(
     () => Array.isArray(props.data[key.value]) && props.data[key.value][0] && props.data[key.value][0].value,
   );
   const maxValue = computed(() => {
-    if (!(props.data[key.value] && props.data[key.value].length)) {
+    if (!props.data[key.value].length) {
       return 0;
     }
-    const temp: number[] = props.data[key.value].map((i: any) => i.value);
+    const temp: number[] = props.data?.[key.value].map((i: any) => i.value);
     return Math.max.apply(null, temp);
   });
   function handleClick(i: string) {
     copy(i);
   }
-  function viewTrace(item: { name: string; refId: string; value: unknown; owner: object }) {
-    const filters = {
+  function viewTrace(item: TopListItem) {
+    const filters: Filters = {
       ...item,
       queryOrder: QueryOrders[1].value,
       status: Status[2].value,
@@ -130,7 +130,7 @@ limitations under the License. -->
     };
     showTrace.value = true;
   }
-  function viewDashboard(item: Recordable) {
+  function viewDashboard(item: TopListItem) {
     const { owner } = item;
     let path;
     if (owner.scope === MetricCatalog.SERVICE) {