fix endpoint and instance list

src/constants/templates.ts

@@ -21,62 +21,83 @@ export const All = {
     isRoot: true,
     children: [
       {
-        w: 8,
+        x: 0,
-        h: 12,
+        y: 0,
+        w: 24,
+        h: 45,
         i: "0",
-        metrics: ["all_heatmap"],
+        type: "Tab",
-        metricTypes: ["readHeatMap"],
+        widget: {},
-        type: "Widget",
+        graph: {},
-        widget: {
+        standard: {},
-          title: "all_heatmap",
+        metrics: [],
-          tips: "Tooltip",
+        metricTypes: [],
-        },
+        children: [
-        graph: {
+          {
-          type: "HeatMap",
+            x: 0,
-        },
+            y: 0,
-        standard: {
+            w: 8,
-          unit: "ms",
+            h: 12,
-        },
+            i: "0",
-      },
+            metrics: ["all_heatmap"],
-      {
+            metricTypes: ["readHeatMap"],
-        w: 8,
+            type: "Widget",
-        h: 12,
+            widget: {
-        i: "1",
+              title: "all_heatmap",
-        metrics: ["all_percentile"],
+              tips: "Tooltip",
-        metricTypes: ["readLabeledMetricsValues"],
+            },
-        type: "Widget",
+            graph: {
-        widget: {
+              type: "HeatMap",
-          title: "Global Response Latency",
+            },
-          tips: "Tooltip",
+            standard: {
-        },
+              unit: "ms",
-        graph: {
+            },
-          type: "Line",
+          },
-        },
+          {
-        standard: {
+            x: 0,
-          unit: "percentile in ms",
+            y: 0,
-          metricLabels: "P50, P75, P90, P95, P99",
+            w: 8,
-          labelsIndex: "0, 1, 2, 3, 4",
+            h: 12,
-        },
+            i: "1",
-      },
+            metrics: ["all_percentile"],
-      {
+            metricTypes: ["readLabeledMetricsValues"],
-        w: 8,
+            type: "Widget",
-        h: 12,
+            widget: {
-        i: "3",
+              title: "Global Response Latency",
-        metrics: ["service_cpm"],
+              tips: "Tooltip",
-        metricTypes: ["readMetricsValues"],
+            },
-        type: "Widget",
+            graph: {
-        widget: {
+              type: "Line",
-          title: "Service List",
+            },
-          tips: "Tooltip",
+            standard: {
-        },
+              unit: "percentile in ms",
-        graph: {
+              metricLabels: "P50, P75, P90, P95, P99",
-          type: "ServiceList",
+              labelsIndex: "0, 1, 2, 3, 4",
-          dashboardName: "123",
+            },
-          fontSize: 12,
+          },
-        },
+          {
-        standard: {
+            x: 0,
-          unit: "percentile in ms",
+            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: [

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

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);
     }

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;

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>

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(
+    endpoints.value = usePodsSource(currentPods, json, props.config);
-      currentPods,
-      json,
-      dashboardStore.selectedGrid
-    );
     return;
   }
   endpoints.value = currentPods;
@@ -177,4 +174,8 @@ watch(
 .chart {
   height: 39px;
 }
+
+.inputs {
+  width: 300px;
+}
 </style>

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(
+    instances.value = usePodsSource(currentInstances, json, props.config);
-      currentInstances,
-      json,
-      dashboardStore.selectedGrid
-    );
     return;
   }
   instances.value = currentInstances;
@@ -182,4 +179,8 @@ watch(
 .chart {
   height: 40px;
 }
+
+.inputs {
+  width: 300px;
+}
 </style>