feat: view from service topology to serviceRelation dashboard

src/components/Selector.vue

@@ -28,6 +28,7 @@ limitations under the License. -->
       :key="item.value"
       :label="item.label"
       :value="item.value"
+      :disabled="!!item.disabled"
     >
     </el-option>
   </el-select>
@@ -47,14 +48,14 @@ interface Option {
 const emit = defineEmits(["change"]);
 const props = defineProps({
   options: {
-    type: Array as PropType<Option[]>,
+    type: Array as PropType<(Option & { disabled: boolean })[]>,
     default: () => [],
   },
   value: {
     type: [Array, String] as PropType<string[] | string>,
     default: () => [],
   },
-  size: { type: String, default: "small" },
+  size: { type: String, default: "default" },
   placeholder: { type: String, default: "Select a option" },
   borderRadius: { type: Number, default: 3 },
   multiple: { type: Boolean, default: false },

src/hooks/useProcessor.ts

@@ -28,6 +28,7 @@ export function useQueryProcessor(config: any) {
   const appStore = useAppStoreWithOut();
   const dashboardStore = useDashboardStore();
   const selectorStore = useSelectorStore();
+
   if (!selectorStore.currentService && dashboardStore.entity !== "All") {
     return;
   }

src/store/data.ts

@@ -122,3 +122,24 @@ export const ConfigData3: any = {
   },
   children: [],
 };
+export const ConfigData4: any = {
+  x: 0,
+  y: 0,
+  w: 8,
+  h: 12,
+  i: "0",
+  metrics: ["service_relation_server_resp_time"],
+  metricTypes: ["readMetricsValues"],
+  type: "Widget",
+  widget: {
+    title: "service_relation_server_resp_time",
+    tips: "Tooltip",
+  },
+  graph: {
+    type: "Line",
+  },
+  standard: {
+    unit: "min",
+  },
+  children: [],
+};

src/store/modules/dashboard.ts

@@ -18,7 +18,13 @@ import { defineStore } from "pinia";
 import { store } from "@/store";
 import { LayoutConfig } from "@/types/dashboard";
 import graphql from "@/graphql";
-import { ConfigData, ConfigData1, ConfigData2, ConfigData3 } from "../data";
+import {
+  ConfigData,
+  ConfigData1,
+  ConfigData2,
+  ConfigData3,
+  ConfigData4,
+} from "../data";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { NewControl } from "../data";
@@ -161,6 +167,9 @@ export const dashboardStore = defineStore({
       if (type == "Service") {
         this.layout = [ConfigData];
       }
+      if (type == "ServiceRelation") {
+        this.layout = [ConfigData4];
+      }
     },
     setTopology(show: boolean) {
       this.showTopology = show;

src/store/modules/selectors.ts

@@ -44,12 +44,18 @@ export const selectorStore = defineStore({
     durationTime: useAppStoreWithOut().durationTime,
   }),
   actions: {
-    setCurrentService(service: Service) {
+    setCurrentService(service: Nullable<Service>) {
       this.currentService = service;
     },
+    setCurrentDestService(service: Nullable<Service>) {
+      this.currentDestService = service;
+    },
     setCurrentPod(pod: Nullable<Instance | Endpoint>) {
       this.currentPod = pod;
     },
+    setCurrentDestPod(pod: Nullable<Instance | Endpoint>) {
+      this.currentPod = pod;
+    },
     async fetchLayers(): Promise<AxiosResponse> {
       const res: AxiosResponse = await graphql.query("queryLayers").params({});
 
@@ -113,7 +119,7 @@ export const selectorStore = defineStore({
         serviceId,
       });
       if (!res.data.errors) {
-        this.currentService = res.data.data.service || {};
+        this.setCurrentService(res.data.data.service);
         this.services = [res.data.data.service];
       }
 

src/views/dashboard/New.vue

@@ -18,7 +18,7 @@ limitations under the License. -->
     <div class="item">
       <div class="label">{{ t("name") }}</div>
       <el-input
-        size="small"
+        size="default"
         v-model="states.name"
         placeholder="Please input name"
       />
@@ -28,7 +28,7 @@ limitations under the License. -->
       <Selector
         v-model="states.selectedLayer"
         :options="states.layers"
-        size="small"
+        size="default"
         placeholder="Select a layer"
         @change="changeLayer"
         class="selectors"
@@ -39,14 +39,14 @@ limitations under the License. -->
       <Selector
         v-model="states.entity"
         :options="EntityType"
-        size="small"
+        size="default"
         placeholder="Select a entity"
         @change="changeEntity"
         class="selectors"
       />
     </div>
     <div class="btn">
-      <el-button class="create" size="small" type="primary" @click="onCreate">
+      <el-button class="create" size="default" type="primary" @click="onCreate">
         {{ t("create") }}
       </el-button>
     </div>

src/views/dashboard/controls/Widget.vue

@@ -93,12 +93,9 @@ export default defineComponent({
     const dashboardStore = useDashboardStore();
     const selectorStore = useSelectorStore();
 
-    if (dashboardStore.entity === EntityType[1].value) {
-      queryMetrics();
-    }
-
     async function queryMetrics() {
       const params = await useQueryProcessor(props.data);
+
       if (!params) {
         state.source = {};
         return;
@@ -137,9 +134,12 @@ export default defineComponent({
       }
     );
     watch(
-      () => selectorStore.currentService,
+      () => [selectorStore.currentService, selectorStore.currentDestService],
       () => {
-        if (dashboardStore.entity === EntityType[0].value) {
+        if (
+          dashboardStore.entity === EntityType[0].value ||
+          dashboardStore.entity === EntityType[4].value
+        ) {
           queryMetrics();
         }
       }

src/views/dashboard/panel/Tool.vue

@@ -46,11 +46,11 @@ limitations under the License. -->
       <div class="selectors-item" v-if="states.key === 2">
         <span class="label">$DestinationService</span>
         <Selector
-          v-model="selectorStore.currentDestService"
+          v-model="states.currentDestService"
           :options="selectorStore.services"
           size="small"
           placeholder="Select a service"
-          @change="changeService"
+          @change="changeDestService"
           class="selectors"
         />
       </div>
@@ -103,12 +103,14 @@ const states = reactive<{
   key: number;
   currentService: string;
   currentPod: string;
+  currentDestService: string;
 }>({
   destService: "",
   destPod: "",
   key: (type && type.key) || 0,
   currentService: "",
   currentPod: "",
+  currentDestService: "",
 });
 
 dashboardStore.setLayer(String(params.layerId));
@@ -142,11 +144,19 @@ async function setSelector() {
     ElMessage.error(json.errors);
     return;
   }
-  const currentService = selectorStore.services.filter(
-    (d: { id: string }) => d.id === String(params.serviceId)
-  )[0];
+  let currentService, currentDestService;
+  for (const d of selectorStore.services) {
+    if (d.id === String(params.serviceId)) {
+      currentService = d;
+    }
+    if (d.id === String(params.destServiceId)) {
+      currentDestService = d;
+    }
+  }
   selectorStore.setCurrentService(currentService);
+  selectorStore.setCurrentDestService(currentDestService);
   states.currentService = selectorStore.currentService.value;
+  states.currentDestService = selectorStore.currentDestService.value;
 }
 
 async function getServices() {
@@ -164,7 +174,11 @@ async function getServices() {
   selectorStore.setCurrentService(
     selectorStore.services.length ? selectorStore.services[0] : null
   );
+  selectorStore.setCurrentDestService(
+    selectorStore.services.length ? selectorStore.services[1] : null
+  );
   states.currentService = selectorStore.currentService.value;
+  states.currentDestService = selectorStore.currentDestService.value;
   fetchPods(dashboardStore.entity, true);
 }
 
@@ -174,7 +188,16 @@ async function changeService(service: Service[]) {
     selectorStore.setCurrentService(service[0]);
     fetchPods(dashboardStore.entity, true);
   } else {
-    selectorStore.setCurrentService("");
+    selectorStore.setCurrentService(null);
+  }
+}
+
+function changeDestService(service: Service[]) {
+  if (service[0]) {
+    states.currentDestService = service[0].value;
+    selectorStore.setCurrentDestService(service[0]);
+  } else {
+    selectorStore.setCurrentDestService(null);
   }
 }
 
@@ -265,7 +288,7 @@ watch(
 
 .icon-btn {
   display: inline-block;
-  padding: 0 5px;
+  padding: 0 5px 2px 5px;
   text-align: center;
   border: 1px solid #ccc;
   border-radius: 3px;

src/views/dashboard/related/topology/Settings.vue

@@ -28,7 +28,7 @@ limitations under the License. -->
       class="inputs"
       :multiple="true"
       :value="states.linkMetrics"
-      :options="states.metricList"
+      :options="states.linkMetricList"
       size="small"
       placeholder="Select a metric"
       @change="changeLinkMetrics"
@@ -49,7 +49,7 @@ limitations under the License. -->
       class="inputs"
       :multiple="true"
       :value="states.nodeMetrics"
-      :options="states.metricList"
+      :options="states.nodeMetricList"
       size="small"
       placeholder="Select a metric"
       @change="changeNodeMetrics"
@@ -73,13 +73,15 @@ const states = reactive<{
   nodeDashboard: string;
   linkMetrics: string[];
   nodeMetrics: string[];
-  metricList: Option[];
+  nodeMetricList: Option[];
+  linkMetricList: Option[];
 }>({
   linkDashboard: "",
   nodeDashboard: "",
   linkMetrics: [],
   nodeMetrics: [],
-  metricList: [],
+  nodeMetricList: [],
+  linkMetricList: [],
 });
 
 getMetricList();
@@ -89,10 +91,14 @@ async function getMetricList() {
     ElMessage.error(json.errors);
     return;
   }
-  states.metricList = (json.data.metrics || []).filter(
+  states.nodeMetricList = (json.data.metrics || []).filter(
     (d: { catalog: string }) =>
       dashboardStore.entity === (MetricCatalog as any)[d.catalog]
   );
+  states.linkMetricList = (json.data.metrics || []).filter(
+    (d: { catalog: string }) =>
+      dashboardStore.entity + "Relation" === (MetricCatalog as any)[d.catalog]
+  );
 }
 function updateSettings() {
   emit("update", {