From 46e36800246dde9556e9cf6a762d441f5c70b7c0 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Mon, 14 Mar 2022 14:23:00 +0800
Subject: [PATCH] fix endpoint and instance list

---
 src/constants/templates.ts                   | 179 +++++++++++++------
 src/hooks/useProcessor.ts                    |   1 -
 src/views/dashboard/configuration/Widget.vue |   1 +
 src/views/dashboard/controls/Tab.vue         |   2 +-
 src/views/dashboard/graphs/Card.vue          |   8 +-
 src/views/dashboard/graphs/EndpointList.vue  |  17 +-
 src/views/dashboard/graphs/InstanceList.vue  |  17 +-
 7 files changed, 149 insertions(+), 76 deletions(-)

diff --git a/src/constants/templates.ts b/src/constants/templates.ts
index 9a5388df..5ff2bec7 100644
--- a/src/constants/templates.ts
+++ b/src/constants/templates.ts
@@ -21,62 +21,83 @@ export const All = {
     isRoot: true,
     children: [
       {
-        w: 8,
-        h: 12,
+        x: 0,
+        y: 0,
+        w: 24,
+        h: 45,
         i: "0",
-        metrics: ["all_heatmap"],
-        metricTypes: ["readHeatMap"],
-        type: "Widget",
-        widget: {
-          title: "all_heatmap",
-          tips: "Tooltip",
-        },
-        graph: {
-          type: "HeatMap",
-        },
-        standard: {
-          unit: "ms",
-        },
-      },
-      {
-        w: 8,
-        h: 12,
-        i: "1",
-        metrics: ["all_percentile"],
-        metricTypes: ["readLabeledMetricsValues"],
-        type: "Widget",
-        widget: {
-          title: "Global Response Latency",
-          tips: "Tooltip",
-        },
-        graph: {
-          type: "Line",
-        },
-        standard: {
-          unit: "percentile in ms",
-          metricLabels: "P50, P75, P90, P95, P99",
-          labelsIndex: "0, 1, 2, 3, 4",
-        },
-      },
-      {
-        w: 8,
-        h: 12,
-        i: "3",
-        metrics: ["service_cpm"],
-        metricTypes: ["readMetricsValues"],
-        type: "Widget",
-        widget: {
-          title: "Service List",
-          tips: "Tooltip",
-        },
-        graph: {
-          type: "ServiceList",
-          dashboardName: "123",
-          fontSize: 12,
-        },
-        standard: {
-          unit: "percentile in ms",
-        },
+        type: "Tab",
+        widget: {},
+        graph: {},
+        standard: {},
+        metrics: [],
+        metricTypes: [],
+        children: [
+          {
+            x: 0,
+            y: 0,
+            w: 8,
+            h: 12,
+            i: "0",
+            metrics: ["all_heatmap"],
+            metricTypes: ["readHeatMap"],
+            type: "Widget",
+            widget: {
+              title: "all_heatmap",
+              tips: "Tooltip",
+            },
+            graph: {
+              type: "HeatMap",
+            },
+            standard: {
+              unit: "ms",
+            },
+          },
+          {
+            x: 0,
+            y: 0,
+            w: 8,
+            h: 12,
+            i: "1",
+            metrics: ["all_percentile"],
+            metricTypes: ["readLabeledMetricsValues"],
+            type: "Widget",
+            widget: {
+              title: "Global Response Latency",
+              tips: "Tooltip",
+            },
+            graph: {
+              type: "Line",
+            },
+            standard: {
+              unit: "percentile in ms",
+              metricLabels: "P50, P75, P90, P95, P99",
+              labelsIndex: "0, 1, 2, 3, 4",
+            },
+          },
+          {
+            x: 0,
+            y: 0,
+            w: 8,
+            h: 12,
+            i: "3",
+            metrics: ["service_cpm"],
+            metricTypes: ["readMetricsValues"],
+            type: "Widget",
+            widget: {
+              title: "Service List",
+              tips: "Tooltip",
+            },
+            graph: {
+              type: "ServiceList",
+              dashboardName: "123",
+              fontSize: 12,
+            },
+            standard: {
+              unit: "percentile in ms",
+            },
+          },
+        ],
       },
     ],
   },
@@ -92,7 +113,7 @@ export const ServiceLayout = {
         x: 0,
         y: 0,
         w: 24,
-        h: 36,
+        h: 45,
         i: "0",
         type: "Tab",
         widget: {},
@@ -332,6 +353,52 @@ export const ServiceLayout = {
               },
             ],
           },
+          {
+            name: "Endpoints",
+            children: [
+              {
+                x: 0,
+                y: 0,
+                w: 16,
+                h: 12,
+                i: "0",
+                metrics: ["endpoint_sla"],
+                metricTypes: ["readMetricsValues"],
+                type: "Widget",
+                widget: {},
+                graph: {
+                  type: "EndpointList",
+                  dashboardName: "123",
+                  fontSize: 12,
+                },
+                standard: {},
+              },
+            ],
+          },
+          {
+            name: "Service Instances",
+            children: [
+              {
+                x: 0,
+                y: 0,
+                w: 16,
+                h: 12,
+                i: "0",
+                metrics: ["service_instance_sla"],
+                metricTypes: ["readMetricsValues"],
+                type: "Widget",
+                widget: {},
+                graph: {
+                  type: "InstanceList",
+                  dashboardName: "123",
+                  fontSize: 12,
+                },
+                standard: {
+                  unit: "ms",
+                },
+              },
+            ],
+          },
           {
             name: "Topology",
             children: [
diff --git a/src/hooks/useProcessor.ts b/src/hooks/useProcessor.ts
index 7dc9bb07..6d5560da 100644
--- a/src/hooks/useProcessor.ts
+++ b/src/hooks/useProcessor.ts
@@ -226,7 +226,6 @@ export function useQueryPodsMetrics(
   };
   const variables: string[] = [`$duration: Duration!`];
   const { currentService } = selectorStore;
-
   const fragmentList = pods.map(
     (
       d: (Instance | Endpoint | Service) & { normal: boolean },
diff --git a/src/views/dashboard/configuration/Widget.vue b/src/views/dashboard/configuration/Widget.vue
index 44f038c0..d196ca95 100644
--- a/src/views/dashboard/configuration/Widget.vue
+++ b/src/views/dashboard/configuration/Widget.vue
@@ -120,6 +120,7 @@ export default defineComponent({
     }
 
     function applyConfig() {
+      console.log(dashboardStore.selectedGrid);
       dashboardStore.setConfigs(dashboardStore.selectedGrid);
       dashboardStore.setConfigPanel(false);
     }
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index 3ffcd15a..68013d6f 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -257,7 +257,7 @@ export default defineComponent({
   }
 
   .tab-name {
-    max-width: 80px;
+    max-width: 130px;
     height: 20px;
     line-height: 20px;
     outline: none;
diff --git a/src/views/dashboard/graphs/Card.vue b/src/views/dashboard/graphs/Card.vue
index 77460679..1b0422e2 100644
--- a/src/views/dashboard/graphs/Card.vue
+++ b/src/views/dashboard/graphs/Card.vue
@@ -16,6 +16,7 @@ limitations under the License. -->
 <template>
   <div
     class="chart-card"
+    :class="{ center: config.textAlign === 'center' }"
     :style="{ fontSize: `${config.fontSize}px`, textAlign: config.textAlign }"
   >
     {{
@@ -52,12 +53,15 @@ const singleVal = computed(() => props.data[key.value]);
 </script>
 <style lang="scss" scoped>
 .chart-card {
-  box-sizing: border-box;
   color: #333;
+  height: 100%;
+}
+
+.center {
+  box-sizing: border-box;
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: center;
   -webkit-box-align: center;
-  height: 100%;
 }
 </style>
diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue
index 397548e6..fcbdefba 100644
--- a/src/views/dashboard/graphs/EndpointList.vue
+++ b/src/views/dashboard/graphs/EndpointList.vue
@@ -18,13 +18,13 @@ limitations under the License. -->
       <el-input
         v-model="searchText"
         placeholder="Please input endpoint name"
-        class="input-with-search"
         size="small"
         @change="searchList"
+        class="inputs"
       >
         <template #append>
           <el-button size="small" @click="searchList">
-            <Icon size="lg" iconName="search" />
+            <Icon size="sm" iconName="search" />
           </el-button>
         </template>
       </el-input>
@@ -66,6 +66,7 @@ limitations under the License. -->
     <el-pagination
       class="pagination"
       background
+      small
       layout="prev, pager, next"
       :page-size="pageSize"
       :total="selectorStore.pods.length"
@@ -134,7 +135,7 @@ async function queryEndpointMetrics(currentPods: Endpoint[]) {
   if (metrics.length && metrics[0]) {
     const params = await useQueryPodsMetrics(
       currentPods,
-      dashboardStore.selectedGrid,
+      props.config,
       EntityType[2].value
     );
     const json = await dashboardStore.fetchMetricValue(params);
@@ -143,11 +144,7 @@ async function queryEndpointMetrics(currentPods: Endpoint[]) {
       ElMessage.error(json.errors);
       return;
     }
-    endpoints.value = usePodsSource(
-      currentPods,
-      json,
-      dashboardStore.selectedGrid
-    );
+    endpoints.value = usePodsSource(currentPods, json, props.config);
     return;
   }
   endpoints.value = currentPods;
@@ -177,4 +174,8 @@ watch(
 .chart {
   height: 39px;
 }
+
+.inputs {
+  width: 300px;
+}
 </style>
diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue
index 1ec86a4c..c35318a0 100644
--- a/src/views/dashboard/graphs/InstanceList.vue
+++ b/src/views/dashboard/graphs/InstanceList.vue
@@ -18,13 +18,13 @@ limitations under the License. -->
       <el-input
         v-model="searchText"
         placeholder="Please input instance name"
-        class="input-with-search"
         size="small"
         @change="searchList"
+        class="inputs"
       >
         <template #append>
           <el-button size="small" @click="searchList">
-            <Icon size="lg" iconName="search" />
+            <Icon size="sm" iconName="search" />
           </el-button>
         </template>
       </el-input>
@@ -66,6 +66,7 @@ limitations under the License. -->
     <el-pagination
       class="pagination"
       background
+      small
       layout="prev, pager, next"
       :page-size="pageSize"
       :total="searchInstances.length"
@@ -138,7 +139,7 @@ async function queryInstanceMetrics(currentInstances: Instance[]) {
   if (metrics.length && metrics[0]) {
     const params = await useQueryPodsMetrics(
       currentInstances,
-      dashboardStore.selectedGrid,
+      props.config,
       EntityType[3].value
     );
     const json = await dashboardStore.fetchMetricValue(params);
@@ -147,11 +148,7 @@ async function queryInstanceMetrics(currentInstances: Instance[]) {
       ElMessage.error(json.errors);
       return;
     }
-    instances.value = usePodsSource(
-      currentInstances,
-      json,
-      dashboardStore.selectedGrid
-    );
+    instances.value = usePodsSource(currentInstances, json, props.config);
     return;
   }
   instances.value = currentInstances;
@@ -182,4 +179,8 @@ watch(
 .chart {
   height: 40px;
 }
+
+.inputs {
+  width: 300px;
+}
 </style>