feat: Implement custom configurations for metrics on dashboards and topology (#39)

src/views/dashboard/graphs/Card.vue

@@ -26,12 +26,14 @@ limitations under the License. -->
         ? null
         : singleVal.toFixed(2)
     }}
-    <span v-show="config.showUint">{{ standard.unit }}</span>
+    <span v-show="config.showUnit">
+      {{ metricConfig[0]?.unit }}
+    </span>
   </div>
 </template>
 <script lang="ts" setup>
 import { computed, PropType } from "vue";
-import { CardConfig, StandardConfig } from "@/types/dashboard";
+import { CardConfig, MetricConfigOpt } from "@/types/dashboard";
 
 /*global defineProps */
 const props = defineProps({
@@ -40,14 +42,16 @@ const props = defineProps({
     default: () => ({}),
   },
   config: {
-    type: Object as PropType<CardConfig>,
-    default: () => ({ fontSize: 12, showUint: true, textAlign: "center" }),
-  },
-  standard: {
-    type: Object as PropType<StandardConfig>,
-    default: () => ({ unit: "" }),
+    type: Object as PropType<CardConfig & { metricConfig?: MetricConfigOpt[] }>,
+    default: () => ({
+      fontSize: 12,
+      showUnit: true,
+      textAlign: "center",
+      metricConfig: [],
+    }),
   },
 });
+const metricConfig = computed(() => props.config.metricConfig || []);
 const key = computed(() => Object.keys(props.data)[0]);
 const singleVal = computed(() => props.data[key.value]);
 </script>

src/views/dashboard/graphs/EndpointList.vue

@@ -44,7 +44,7 @@ limitations under the License. -->
         </el-table-column>
         <el-table-column
           v-for="(metric, index) in config.metrics"
-          :label="metric"
+          :label="`${metric} ${getUnit(index)}`"
           :key="metric + index"
         >
           <template #default="scope">
@@ -92,6 +92,7 @@ import Card from "./Card.vue";
 import { EntityType } from "../data";
 import router from "@/router";
 import getDashboard from "@/hooks/useDashboardsSession";
+import { MetricConfigOpt } from "@/types/dashboard";
 
 /*global defineProps */
 const props = defineProps({
@@ -104,7 +105,7 @@ const props = defineProps({
         i: string;
         metrics: string[];
         metricTypes: string[];
-      }
+      } & { metricConfig: MetricConfigOpt[] }
     >,
     default: () => ({ dashboardName: "", fontSize: 12, i: "" }),
   },
@@ -155,7 +156,12 @@ async function queryEndpointMetrics(currentPods: Endpoint[]) {
       ElMessage.error(json.errors);
       return;
     }
-    endpoints.value = usePodsSource(currentPods, json, props.config);
+    const metricConfig = props.config.metricConfig || [];
+
+    endpoints.value = usePodsSource(currentPods, json, {
+      ...props.config,
+      metricConfig: metricConfig,
+    });
     return;
   }
   endpoints.value = currentPods;
@@ -184,12 +190,21 @@ async function searchList() {
   const limit = searchText.value ? undefined : total;
   await queryEndpoints(limit);
 }
+function getUnit(index: number) {
+  const u =
+    (props.config.metricConfig &&
+      props.config.metricConfig[index] &&
+      props.config.metricConfig[index].unit) ||
+    "";
+  if (u) {
+    return `(${u})`;
+  }
+  return u;
+}
 watch(
   () => [props.config.metricTypes, props.config.metrics],
   async () => {
-    if (props.isEdit) {
-      queryEndpointMetrics(endpoints.value);
-    }
+    queryEndpointMetrics(endpoints.value);
     // emit("changeOpt", false);
   }
 );

src/views/dashboard/graphs/InstanceList.vue

@@ -44,7 +44,7 @@ limitations under the License. -->
         </el-table-column>
         <el-table-column
           v-for="(metric, index) in config.metrics"
-          :label="metric"
+          :label="`${metric} ${getUnit(index)}`"
           :key="metric + index"
         >
           <template #default="scope">
@@ -112,6 +112,7 @@ import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor";
 import { EntityType } from "../data";
 import router from "@/router";
 import getDashboard from "@/hooks/useDashboardsSession";
+import { MetricConfigOpt } from "@/types/dashboard";
 
 /*global defineProps */
 const props = defineProps({
@@ -122,7 +123,7 @@ const props = defineProps({
         metrics: string[];
         metricTypes: string[];
         isEdit: boolean;
-      }
+      } & { metricConfig: MetricConfigOpt[] }
     >,
     default: () => ({
       dashboardName: "",
@@ -180,7 +181,11 @@ async function queryInstanceMetrics(currentInstances: Instance[]) {
       ElMessage.error(json.errors);
       return;
     }
-    instances.value = usePodsSource(currentInstances, json, props.config);
+    const metricConfig = props.config.metricConfig || [];
+    instances.value = usePodsSource(currentInstances, json, {
+      ...props.config,
+      metricConfig,
+    });
     return;
   }
   instances.value = currentInstances;
@@ -214,6 +219,18 @@ function searchList() {
   instances.value = searchInstances.value.splice(0, pageSize);
 }
 
+function getUnit(index: number) {
+  const u =
+    (props.config.metricConfig &&
+      props.config.metricConfig[index] &&
+      props.config.metricConfig[index].unit) ||
+    "";
+  if (u) {
+    return `(${u})`;
+  }
+  return u;
+}
+
 watch(
   () => [props.config.metricTypes, props.config.metrics],
   () => {

src/views/dashboard/graphs/ServiceList.vue

@@ -56,7 +56,7 @@ limitations under the License. -->
         </el-table-column>
         <el-table-column
           v-for="(metric, index) in config.metrics"
-          :label="metric"
+          :label="`${metric} ${getUnit(index)}`"
           :key="metric + index"
         >
           <template #default="scope">
@@ -104,6 +104,7 @@ import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor";
 import { EntityType } from "../data";
 import router from "@/router";
 import getDashboard from "@/hooks/useDashboardsSession";
+import { MetricConfigOpt } from "@/types/dashboard";
 
 /*global defineProps */
 const props = defineProps({
@@ -117,7 +118,7 @@ const props = defineProps({
         metrics: string[];
         metricTypes: string[];
         isEdit: boolean;
-      }
+      } & { metricConfig: MetricConfigOpt[] }
     >,
     default: () => ({ dashboardName: "", fontSize: 12 }),
   },
@@ -214,7 +215,11 @@ async function queryServiceMetrics(currentServices: Service[]) {
       ElMessage.error(json.errors);
       return;
     }
-    services.value = usePodsSource(currentServices, json, props.config);
+    const metricConfig = props.config.metricConfig || [];
+    services.value = usePodsSource(currentServices, json, {
+      ...props.config,
+      metricConfig: metricConfig || [],
+    });
     return;
   }
   services.value = currentServices;
@@ -250,6 +255,17 @@ function searchList() {
   );
   services.value = searchServices.splice(0, pageSize);
 }
+function getUnit(index: number) {
+  const u =
+    (props.config.metricConfig &&
+      props.config.metricConfig[index] &&
+      props.config.metricConfig[index].unit) ||
+    "";
+  if (u) {
+    return `(${u})`;
+  }
+  return u;
+}
 watch(
   () => [props.config.metricTypes, props.config.metrics],
   () => {