feat: enhance processor

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",