feat: add metrics on endpointlist

src/hooks/useProcessor.ts

@@ -19,7 +19,7 @@ import { ElMessage } from "element-plus";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { useAppStoreWithOut } from "@/store/modules/app";
-import { Instance } from "@/types/selector";
+import { Instance, Endpoint } from "@/types/selector";
 
 export function useQueryProcessor(config: any) {
   if (!(config.metrics && config.metrics.length)) {
@@ -194,7 +194,7 @@ function aggregation(json: {
 }
 
 export function useQueryPodsMetrics(
-  pods: Instance[],
+  pods: Array<Instance | Endpoint>,
   config: { metrics: string[]; metricTypes: string[] }
 ) {
   const appStore = useAppStoreWithOut();
@@ -205,7 +205,7 @@ export function useQueryPodsMetrics(
   const variables: string[] = [`$duration: Duration!`];
   const { currentService } = selectorStore;
 
-  const fragmentList = pods.map((d: Instance, index: number) => {
+  const fragmentList = pods.map((d: Instance | Endpoint, index: number) => {
     const param = {
       scope: "ServiceInstance",
       serviceName: currentService.label,
@@ -229,7 +229,7 @@ export function useQueryPodsMetrics(
   return { queryStr, conditions };
 }
 export function usePodsSource(
-  instances: Instance[],
+  pods: Array<Instance | Endpoint>,
   resp: { errors: string; data: { [key: string]: any } },
   config: { metrics: string[]; metricTypes: string[] }
 ): any {
@@ -237,7 +237,7 @@ export function usePodsSource(
     ElMessage.error(resp.errors);
     return {};
   }
-  const data = instances.map((d: Instance | any, idx: number) => {
+  const data = pods.map((d: Instance | any, idx: number) => {
     config.metrics.map((name: string, index: number) => {
       const key = name + idx + index;
 

src/types/selector.d.ts

@@ -31,3 +31,9 @@ export type Instance = {
   instanceUUID: string;
   attributes: { name: string; value: string }[];
 };
+
+export type Endpoint = {
+  id: string;
+  label: string;
+  value: string;
+};

src/views/dashboard/graphs/EndpointList.vue

@@ -46,6 +46,21 @@ limitations under the License. -->
           </router-link>
         </template>
       </el-table-column>
+      <el-table-column
+        v-for="(metric, index) in dashboardStore.selectedGrid.metrics"
+        :label="metric"
+        :key="metric + index"
+      >
+        <template #default="scope">
+          <div class="chart">
+            <Line
+              :data="{ metric: scope.row[metric] }"
+              :intervalTime="intervalTime"
+              :config="{ showXAxis: false, showYAxis: false }"
+            />
+          </div>
+        </template>
+      </el-table-column>
     </el-table>
     <el-pagination
       class="pagination"
@@ -60,11 +75,15 @@ limitations under the License. -->
   </div>
 </template>
 <script setup lang="ts">
-import { onBeforeMount, ref } from "vue";
+import { ref, watch } from "vue";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { ElMessage } from "element-plus";
 import type { PropType } from "vue";
 import { EndpointListConfig } from "@/types/dashboard";
+import { Endpoint } from "@/types/selector";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor";
+import Line from "./Line.vue";
 
 /*global defineProps */
 defineProps({
@@ -75,15 +94,19 @@ defineProps({
     type: Object as PropType<EndpointListConfig>,
     default: () => ({ dashboardName: "", fontSize: 12 }),
   },
+  intervalTime: { type: Array as PropType<string[]>, default: () => [] },
 });
 const selectorStore = useSelectorStore();
+const dashboardStore = useDashboardStore();
 const chartLoading = ref<boolean>(false);
-const endpoints = ref<{ layer: string; label: string }[]>([]);
-const searchEndpoints = ref<{ layer: string; label: string }[]>([]);
+const endpoints = ref<Endpoint[]>([]);
+const currentEndpoints = ref<Endpoint[]>([]);
 const pageSize = 7;
 const searchText = ref<string>("");
 
-onBeforeMount(async () => {
+queryEndpoints();
+
+async function queryEndpoints() {
   chartLoading.value = true;
   const resp = await selectorStore.getEndpoints();
 
@@ -93,16 +116,50 @@ onBeforeMount(async () => {
     return;
   }
   endpoints.value = selectorStore.endpoints.splice(0, pageSize);
-});
+  queryMetrics(endpoints.value);
+}
+async function queryMetrics(currentPods: Endpoint[]) {
+  const { metrics } = dashboardStore.selectedGrid;
+
+  if (metrics.length && metrics[0]) {
+    const params = await useQueryPodsMetrics(
+      currentPods,
+      dashboardStore.selectedGrid
+    );
+    const json = await dashboardStore.fetchMetricValue(params);
+
+    if (json.errors) {
+      ElMessage.error(json.errors);
+      return;
+    }
+    endpoints.value = usePodsSource(
+      currentPods,
+      json,
+      dashboardStore.selectedGrid
+    );
+    return;
+  }
+  endpoints.value = currentPods;
+}
 function changePage(pageIndex: number) {
   endpoints.value = selectorStore.endpoints.splice(pageIndex - 1, pageSize);
 }
 function searchList() {
-  searchEndpoints.value = selectorStore.instances.filter(
+  currentEndpoints.value = selectorStore.instances.filter(
     (d: { label: string }) => d.label.includes(searchText.value)
   );
-  endpoints.value = searchEndpoints.value.splice(0, pageSize);
+  endpoints.value = currentEndpoints.value.splice(0, pageSize);
 }
+watch(
+  () => [
+    dashboardStore.selectedGrid.metricTypes,
+    dashboardStore.selectedGrid.metrics,
+  ],
+  () => {
+    const currentPods = currentEndpoints.value.splice(0, pageSize);
+    queryMetrics(currentPods);
+  }
+);
 </script>
 <style lang="scss" scoped>
 @import "./style.scss";

src/views/dashboard/graphs/InstanceList.vue

@@ -167,6 +167,6 @@ watch(
 @import "./style.scss";
 
 .chart {
-  height: 50px;
+  height: 39px;
 }
 </style>