feat: enhance processor

src/hooks/useProcessor.ts

@@ -16,6 +16,7 @@
  */
 import { Duration } from "@/types/app";
 import { RespFields } from "./data";
+import { ElMessage } from "element-plus";
 
 export function useQueryProcessor(
   config: any,
@@ -26,26 +27,28 @@ export function useQueryProcessor(
   if (!(config.metrics && config.metrics.length)) {
     return;
   }
-  const conditions: any = {
+  const conditions: { [key: string]: unknown } = {
     duration: durationTime,
   };
   const variables: string[] = [`$duration: Duration!`];
   const { currentPod, currentService, currentDestPod, currentDestService } =
     selectorStore;
+  const { normal, destNormal, entity } = dashboardStore;
   const isRelation = [
     "ServiceRelation",
     "ServiceInstanceRelation",
     "EndpointRelation",
-  ].includes(dashboardStore.entity);
+  ].includes(entity);
   const fragment = config.metrics.map((name: string, index: number) => {
     const metricTypes = config.metricTypes[index] || "";
+    // const labels = config.metricType === 'LABELED_VALUE' ? labelsIndex : undefined;
     if (["readSampledRecords", "sortMetrics"].includes(metricTypes)) {
       variables.push(`$condition${index}: TopNCondition!`);
       conditions[`condition${index}`] = {
         name,
-        parentService: currentService,
-        normal: true,
-        scope: dashboardStore.entity,
+        parentService: entity === "All" ? null : currentService,
+        normal: normal,
+        scope: entity,
         topN: Number(config.standard.maxItemNum || 10),
         order: config.standard.sortOrder || "DES",
       };
@@ -54,25 +57,19 @@ export function useQueryProcessor(
       conditions[`condition${index}`] = {
         name,
         entity: {
-          scope: dashboardStore.entity,
-          serviceName: currentService,
+          scope: entity,
+          serviceName: entity === "All" ? undefined : currentService,
           normal: true,
-          serviceInstanceName: dashboardStore.entity.includes("ServiceInstance")
+          serviceInstanceName: entity.includes("ServiceInstance")
             ? currentPod
             : undefined,
-          endpointName: dashboardStore.entity.includes("Endpoint")
-            ? currentPod
-            : undefined,
-          destNormal: true,
+          endpointName: entity.includes("Endpoint") ? currentPod : undefined,
+          destNormal: entity === "All" ? undefined : destNormal,
           destServiceName: isRelation ? currentDestService : undefined,
           destServiceInstanceName:
-            dashboardStore.entity === "ServiceInstanceRelation"
-              ? currentDestPod
-              : undefined,
+            entity === "ServiceInstanceRelation" ? currentDestPod : undefined,
           destEndpointName:
-            dashboardStore.entity === "EndpointRelation"
-              ? currentDestPod
-              : undefined,
+            entity === "EndpointRelation" ? currentDestPod : undefined,
         },
       };
     }
@@ -85,5 +82,22 @@ export function useQueryProcessor(
     conditions,
   };
 }
-// export function useSourceProcessor() {
-// }
+export function useSourceProcessor(
+  resp: { errors: string; data: { [key: string]: any } },
+  config: { metrics: string[] }
+) {
+  const source: { [key: string]: unknown } = {};
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+    return {};
+  }
+  const keys = Object.keys(resp.data);
+  keys.forEach((key: string, index) => {
+    const m = config.metrics[index];
+    source[m] = resp.data[key].values.values.map(
+      (d: { value: number }) => d.value
+    );
+  });
+
+  return source;
+}

src/store/data.ts

@@ -26,8 +26,8 @@ export const NewControl = {
   },
   graph: {},
   standard: {},
-  metrics: [],
-  metricTypes: [],
+  metrics: [""],
+  metricTypes: [""],
 };
 export const ConfigData: any = {
   x: 0,

src/store/modules/dashboard.ts

@@ -34,6 +34,8 @@ interface DashboardState {
   activedGridItem: string;
   durationTime: Duration;
   selectorStore: any;
+  normal: boolean;
+  destNormal: boolean;
 }
 
 export const dashboardStore = defineStore({
@@ -47,6 +49,8 @@ export const dashboardStore = defineStore({
     activedGridItem: "",
     durationTime: useAppStoreWithOut().durationTime,
     selectorStore: useSelectorStore(),
+    normal: true,
+    destNormal: true,
   }),
   actions: {
     setLayout(data: LayoutConfig[]) {

src/views/dashboard/configuration/ConfigEdit.vue

@@ -91,7 +91,6 @@ limitations under the License. -->
 <script lang="ts">
 import { reactive, defineComponent } from "vue";
 import { useI18n } from "vue-i18n";
-import { useRoute } from "vue-router";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import {
@@ -99,6 +98,7 @@ import {
   DefaultGraphConfig,
   PodsChartTypes,
   TableChartTypes,
+  EntityType,
 } from "../data";
 import { Option } from "@/types/app";
 import { WidgetConfig, GraphConfig, StandardConfig } from "@/types/dashboard";
@@ -122,8 +122,7 @@ export default defineComponent({
     const { t } = useI18n();
     const dashboardStore = useDashboardStore();
     const appStoreWithOut = useAppStoreWithOut();
-    const { selectedGrid } = dashboardStore;
-    const params = useRoute().params;
+    const { selectedGrid, entity } = dashboardStore;
     const states = reactive<{
       activeNames: string;
       source: any;
@@ -149,11 +148,11 @@ export default defineComponent({
     });
     states.isTable = TableChartTypes.includes(states.graph.type || "");
 
-    if (params.entity === "service") {
+    if (entity === EntityType[0].value) {
       states.visType = ChartTypes.filter(
         (d: Option) => d.value !== "serviceList"
       );
-    } else if (params.entity === "all") {
+    } else if (entity === EntityType[1].value) {
       states.visType = ChartTypes.filter(
         (d: Option) => !PodsChartTypes.includes(d.value)
       );

src/views/dashboard/configuration/MetricOptions.vue

@@ -63,11 +63,10 @@ limitations under the License. -->
 <script lang="ts" setup>
 import { reactive, watch } from "vue";
 import type { PropType } from "vue";
-import { useRoute } from "vue-router";
 import { Option } from "@/types/app";
 import { GraphConfig } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
-import { MetricTypes, TableChartTypes } from "../data";
+import { MetricTypes, TableChartTypes, MetricCatalog } from "../data";
 import { ElMessage } from "element-plus";
 import Icon from "@/components/Icon.vue";
 
@@ -80,7 +79,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["update", "apply"]);
 const dashboardStore = useDashboardStore();
-const { selectedGrid } = dashboardStore;
+const { selectedGrid, entity, metrics, metricTypes } = dashboardStore;
 const states = reactive<{
   metrics: string[];
   metricTypes: string[];
@@ -90,8 +89,8 @@ const states = reactive<{
   metricList: (Option & { type: string })[];
   graph: GraphConfig | any;
 }>({
-  metrics: selectedGrid.metrics || [""],
-  metricTypes: selectedGrid.metricTypes || [""],
+  metrics: metrics && metrics.length ? selectedGrid.metrics : [""],
+  metricTypes: metricTypes && metricTypes.length ? metricTypes : [""],
   metricTypeList: [],
   visType: [],
   isTable: false,
@@ -100,8 +99,6 @@ const states = reactive<{
 });
 states.isTable = TableChartTypes.includes(states.graph.type);
 
-const params = useRoute().params;
-
 setMetricType();
 
 async function setMetricType() {
@@ -111,9 +108,9 @@ async function setMetricType() {
     return;
   }
   states.metricList = (json.data.metrics || []).filter(
-    (d: { catalog: string }) =>
-      String(params.entity).toUpperCase() === d.catalog
+    (d: { catalog: string }) => entity === (MetricCatalog as any)[d.catalog]
   );
+
   const metrics: any = states.metricList.filter(
     (d: { value: string; type: string }) => {
       const metric = states.metrics.filter((m: string) => m === d.value)[0];

src/views/dashboard/controls/Widget.vue

@@ -62,9 +62,8 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import graphs from "../graphs";
-import { ElMessage } from "element-plus";
 import { useI18n } from "vue-i18n";
-import { useQueryProcessor } from "@/hooks/useProcessor";
+import { useQueryProcessor, useSourceProcessor } from "@/hooks/useProcessor";
 
 const props = {
   data: {
@@ -80,36 +79,30 @@ export default defineComponent({
   setup(props) {
     const { t } = useI18n();
     const loading = ref<boolean>(false);
-    const state = reactive<{ source: any }>({
+    const state = reactive<{ source: { [key: string]: unknown } }>({
       source: {},
     });
     const { data } = toRefs(props);
     const appStore = useAppStoreWithOut();
     const dashboardStore = useDashboardStore();
     const selectorStore = useSelectorStore();
+
     queryMetrics();
     async function queryMetrics() {
-      loading.value = true;
       const params = useQueryProcessor(
         props.data,
         selectorStore,
         dashboardStore,
         appStore.durationTime
       );
+      if (!params) {
+        state.source = {};
+        return;
+      }
+      loading.value = true;
       const json = await dashboardStore.fetchMetricValue(params);
       loading.value = false;
-      if (!json) {
-        return;
-      }
-      if (json.error) {
-        ElMessage.error(json.error);
-        return;
-      }
-      const keys = Object.keys(json.data);
-      keys.forEach((key: string, index) => {
-        const m = props.data.metrics[index];
-        state.source[m] = json.data[key].values.values.map((d: any) => d.value);
-      });
+      state.source = useSourceProcessor(json, props.data);
     }
 
     function removeWidget() {

src/views/dashboard/data.ts

@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 export const PodsChartTypes = ["EndpointList", "InstanceList"];
 
 export const TableChartTypes = ["EndpointList", "InstanceList", "ServiceList"];
@@ -137,7 +138,15 @@ export const ReadValueChartType = [
   { value: "ChartSlow", label: "Slow Chart" },
 ];
 
-export const MaxItemNum = 10;
+export enum MetricCatalog {
+  SERVICE = "Service",
+  SERVICE_INSTANCE = "ServiceInstance",
+  ENDPOINT = "Endpoint",
+  ALL = "All",
+  SERVICE_RELATION = "ServiceRelation",
+  SERVICE_INSTANCE_RELATION = "ServiceInstanceRelation",
+  ENDPOINT_RELATION = "EndpointRelation",
+}
 
 export enum MetricsName {
   SERVICE_RESP_TIME = "service_resp_time",