feat: set configs

src/views/dashboard/graphs/Card.vue

@@ -14,7 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 
 <template>
-  <div class="chart-card" :style="{ fontSize: `${config.fontSize}px` }">
+  <div
+    class="chart-card"
+    :style="{ fontSize: `${config.fontSize}px`, textAlign: config.textAlign }"
+  >
     {{
       typeof singleVal === "string"
         ? singleVal
@@ -37,7 +40,7 @@ const props = defineProps({
   },
   config: {
     type: Object as PropType<CardConfig>,
-    default: () => ({ fontSize: 12, showUint: true }),
+    default: () => ({ fontSize: 12, showUint: true, textAlign: "center" }),
   },
   standard: {
     type: Object as PropType<StandardConfig>,
@@ -51,5 +54,7 @@ const singleVal = computed(() => props.data[key.value]);
 .chart-card {
   box-sizing: border-box;
   color: #333;
+  height: 100%;
+  line-height: 100%;
 }
 </style>

src/views/dashboard/graphs/EndpointList.vue

@@ -82,13 +82,13 @@ import Line from "./Line.vue";
 import { EntityType } from "../data";
 
 /*global defineProps */
-defineProps({
+const props = defineProps({
   data: {
     type: Object,
   },
   config: {
-    type: Object as PropType<EndpointListConfig>,
-    default: () => ({ dashboardName: "", fontSize: 12 }),
+    type: Object as PropType<EndpointListConfig & { i: string }>,
+    default: () => ({ dashboardName: "", fontSize: 12, i: "" }),
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
 });
@@ -155,7 +155,9 @@ watch(
     dashboardStore.selectedGrid.metrics,
   ],
   () => {
-    queryEndpointMetrics(endpoints.value);
+    if (dashboardStore.selectedGrid.i === props.config.i) {
+      queryEndpointMetrics(endpoints.value);
+    }
   }
 );
 </script>

src/views/dashboard/graphs/InstanceList.vue

@@ -34,7 +34,7 @@ limitations under the License. -->
         <template #default="scope">
           <router-link
             class="link"
-            :to="`/dashboard/${dashboardStore.layerId}/${EntityType[2].value}/${selectorStore.currentService.id}/${scope.row.id}/${config.dashboardName}`"
+            :to="`/dashboard/${dashboardStore.layerId}/${EntityType[3].value}/${selectorStore.currentService.id}/${scope.row.id}/${config.dashboardName}`"
             :style="{ fontSize: `${config.fontSize}px` }"
           >
             {{ scope.row.label }}
@@ -42,17 +42,23 @@ limitations under the License. -->
         </template>
       </el-table-column>
       <el-table-column
-        v-for="(metric, index) in dashboardStore.selectedGrid.metrics"
+        v-for="(metric, index) in config.metrics"
         :label="metric"
         :key="metric + index"
       >
         <template #default="scope">
           <div class="chart">
             <Line
+              v-if="config.metricTypes[index] === 'readMetricsValues'"
               :data="{ metric: scope.row[metric] }"
               :intervalTime="intervalTime"
               :config="{ showXAxis: false, showYAxis: false }"
             />
+            <Card
+              v-else
+              :data="{ metric: scope.row[metric] }"
+              :config="{ textAlign: 'left' }"
+            />
           </div>
         </template>
       </el-table-column>
@@ -74,6 +80,7 @@ import { ref, watch } from "vue";
 import { ElMessage } from "element-plus";
 import type { PropType } from "vue";
 import Line from "./Line.vue";
+import Card from "./Card.vue";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { InstanceListConfig } from "@/types/dashboard";
@@ -82,10 +89,22 @@ import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor";
 import { EntityType } from "../data";
 
 /*global defineProps */
-defineProps({
+const props = defineProps({
   config: {
-    type: Object as PropType<InstanceListConfig>,
-    default: () => ({ dashboardName: "", fontSize: 12 }),
+    type: Object as PropType<
+      InstanceListConfig & {
+        i: string;
+        metrics: string[];
+        metricTypes: string[];
+      }
+    >,
+    default: () => ({
+      dashboardName: "",
+      fontSize: 12,
+      i: "",
+      metrics: [],
+      metricTypes: [],
+    }),
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
 });
@@ -109,13 +128,10 @@ async function queryInstance() {
     return;
   }
   searchInstances.value = selectorStore.pods;
-
-  const currentInstances = searchInstances.value.splice(0, pageSize);
-  queryInstanceMetrics(currentInstances);
 }
 
 async function queryInstanceMetrics(currentInstances: Instance[]) {
-  const { metrics } = dashboardStore.selectedGrid;
+  const { metrics } = props.config;
 
   if (metrics.length && metrics[0]) {
     const params = await useQueryPodsMetrics(
@@ -150,12 +166,12 @@ function searchList() {
 }
 
 watch(
-  () => [
-    dashboardStore.selectedGrid.metricTypes,
-    dashboardStore.selectedGrid.metrics,
-  ],
+  () => [props.config.metricTypes, props.config.metrics],
   () => {
-    queryInstanceMetrics(instances.value);
+    if (dashboardStore.selectedGrid.i === props.config.i) {
+      const currentInstances = searchInstances.value.splice(0, pageSize);
+      queryInstanceMetrics(currentInstances);
+    }
   }
 );
 </script>
@@ -163,6 +179,6 @@ watch(
 @import "./style.scss";
 
 .chart {
-  height: 39px;
+  height: 40px;
 }
 </style>

src/views/dashboard/graphs/ServiceList.vue

@@ -83,7 +83,7 @@ import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor";
 import { EntityType } from "../data";
 
 /*global defineProps */
-defineProps({
+const props = defineProps({
   data: {
     type: Object,
   },
@@ -152,7 +152,9 @@ watch(
     dashboardStore.selectedGrid.metrics,
   ],
   () => {
-    queryServiceMetrics(services.value);
+    if (dashboardStore.selectedGrid.i === props.config.i) {
+      queryServiceMetrics(services.value);
+    }
   }
 );
 </script>

src/views/dashboard/graphs/Table.vue

@@ -22,9 +22,9 @@ limitations under the License. -->
       >
         <div class="name" :style="`width: ${nameWidth}px`">
           {{ config.tableHeaderCol1 || $t("name") }}
-          <i class="r cp" ref="draggerName"
-            ><rk-icon icon="settings_ethernet"
-          /></i>
+          <i class="r cp" ref="draggerName">
+            <Icon iconName="settings_ethernet" size="middle" />
+          </i>
         </div>
         <div class="value-col" v-if="config.showTableValues">
           {{ config.tableHeaderCol2 || $t("value") }}
@@ -50,7 +50,7 @@ import type { PropType } from "vue";
 /*global defineProps */
 const props = defineProps({
   data: {
-    type: Object as PropType<{ [key: string]: number[][] }>,
+    type: Object as PropType<{ [key: string]: number[] }>,
     default: () => ({}),
   },
   config: {