feat: support multiple metrics for querys

src/views/dashboard/configuration/MetricOptions.vue

@@ -46,7 +46,7 @@ limitations under the License. -->
     />
     <Icon
       class="cp mr-5"
-      v-show="index === states.metrics.length - 1 && index < 6"
+      v-show="index === states.metrics.length - 1 && states.metrics.length < 5"
       iconName="add_circle_outlinecontrol_point"
       size="middle"
       @click="addMetric"
@@ -61,7 +61,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { reactive } from "vue";
+import { reactive, watch } from "vue";
 import type { PropType } from "vue";
 import { useRoute } from "vue-router";
 import { Option } from "@/types/app";
@@ -203,6 +203,13 @@ function deleteMetric(index: number) {
   states.metrics.splice(index, 1);
   states.metricTypes.splice(index, 1);
 }
+watch(
+  () => props.graph,
+  (data: any) => {
+    states.isTable = TableChartTypes.includes(data.type);
+    console.log(data);
+  }
+);
 </script>
 <style lang="scss" scoped>
 .ds-name {

src/views/dashboard/controls/Widget.vue

@@ -96,16 +96,13 @@ export default defineComponent({
         ElMessage.error(json.error);
         return;
       }
-      const metricVal = json.data.readMetricsValues.values.values.map(
-        (d: any) => d.value
-      );
-      const m = props.data.metrics && props.data.metrics[0];
-      if (!m) {
-        return;
-      }
-      state.source = {
-        [m]: metricVal,
-      };
+      const keys = Object.keys(json.data);
+      keys.map((key: string, index) => {
+        const m = props.data.metrics[index];
+        state.source = {
+          [m]: json.data[key].values.values.map((d: any) => d.value),
+        };
+      });
     }
 
     function removeWidget() {

src/views/dashboard/data.ts

@@ -147,23 +147,23 @@ export enum MetricsName {
   SERVICE_APDEX = "service_apdex",
 }
 export const EntityType = [
-  { value: "service", label: "Service", key: 1 },
-  { value: "all", label: "All", key: 10 },
-  { value: "endpoint", label: "Service Endpoint", key: 3 },
-  { value: "serviceInstance", label: "Service Instance", key: 3 },
-  { value: "serviceRelationClient", label: "Service Relation(client)", key: 2 },
-  { value: "serviceRelationServer", label: "Service Relation(server)", key: 2 },
+  { value: "Service", label: "Service", key: 1 },
+  { value: "All", label: "All", key: 10 },
+  { value: "Endpoint", label: "Service Endpoint", key: 3 },
+  { value: "ServiceInstance", label: "Service Instance", key: 3 },
+  { value: "ServiceRelationClient", label: "Service Relation(client)", key: 2 },
+  { value: "ServiceRelationServer", label: "Service Relation(server)", key: 2 },
   {
-    value: "serviceInstanceRelationClient",
+    value: "ServiceInstanceRelationClient",
     label: "Service Instance Relation(client)",
     key: 4,
   },
   {
-    value: "serviceInstanceRelationServer",
+    value: "ServiceInstanceRelationServer",
     label: "Service Instance Relation(server)",
     key: 4,
   },
-  { value: "endpointRelation", label: "Endpoint Relation", key: 4 },
+  { value: "EndpointRelation", label: "Endpoint Relation", key: 4 },
 ];
 export const SortOrder = [
   { label: "DES", value: "DES" },

src/views/dashboard/graphs/EndpointList.vue

@@ -32,7 +32,7 @@ limitations under the License. -->
     <el-table
       v-loading="chartLoading"
       :data="endpoints"
-      style="width: 100%; height: 100%; overflow: auto"
+      style="width: 100%; height: 320px; overflow: auto"
     >
       <el-table-column label="Endpoints">
         <template #default="scope">
@@ -51,7 +51,7 @@ limitations under the License. -->
       class="pagination"
       background
       layout="prev, pager, next"
-      :page-size="6"
+      :page-size="pageSize"
       :total="selectorStore.endpoints.length"
       @current-change="changePage"
       @prev-click="changePage"

src/views/dashboard/graphs/ServiceList.vue

@@ -32,7 +32,7 @@ limitations under the License. -->
     <el-table
       v-loading="chartLoading"
       :data="services"
-      style="width: 100%; height: 100%; overflow: auto"
+      style="width: 100%; height: 320px; overflow: auto"
     >
       <el-table-column label="Services">
         <template #default="scope">
@@ -51,7 +51,7 @@ limitations under the License. -->
       class="pagination"
       background
       layout="prev, pager, next"
-      :page-size="6"
+      :page-size="pageSize"
       :total="selectorStore.services.length"
       @current-change="changePage"
       @prev-click="changePage"
@@ -78,7 +78,7 @@ defineProps({
 });
 const selectorStore = useSelectorStore();
 const chartLoading = ref<boolean>(false);
-const pageSize = 6;
+const pageSize = 7;
 const services = ref<{ label: string; layer: string }[]>([]);
 const searchServices = ref<{ layer: string; label: string }[]>([]);
 const searchText = ref<string>("");