feat: set custom configs for topology

src/router/dashboard.ts

@@ -67,6 +67,16 @@ export const routesDashboard: Array<RouteRecordRaw> = [
           notShow: true,
         },
       },
+      {
+        path: "/dashboard/:layerId/:entity/:serviceId/:destServiceId/:name",
+        component: () => import("@/views/dashboard/Edit.vue"),
+        name: "CreateServiceRelation",
+        meta: {
+          title: "dashboardEdit",
+          exact: false,
+          notShow: true,
+        },
+      },
       {
         path: "/dashboard/:layerId/:entity/:serviceId/:podId/:name",
         component: () => import("@/views/dashboard/Edit.vue"),

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

@@ -20,7 +20,7 @@ limitations under the License. -->
     :style="`height: ${height}`"
   >
     <div class="setting" v-show="showSetting">
-      <Settings />
+      <Settings @update="updateSettings" />
     </div>
     <Icon
       @click="setConfig"
@@ -48,6 +48,7 @@ import { EntityType } from "../../data";
 import router from "@/router";
 import { ElMessage } from "element-plus";
 import Settings from "./Settings.vue";
+// import { Option } from "@/types/app";
 
 /*global Nullable */
 const { t } = useI18n();
@@ -68,6 +69,7 @@ const arrow = ref<any>(null);
 const tools = ref<any>(null);
 const legend = ref<any>(null);
 const showSetting = ref<boolean>(false);
+const settings = ref<any>({});
 
 onMounted(async () => {
   loading.value = true;
@@ -188,8 +190,9 @@ function handleLinkClick(event: any, d: Call) {
   event.stopPropagation();
   topologyStore.setNode({});
   topologyStore.setLink(d);
-  // const path = `/dashboard/${states.selectedLayer}/${states.entity}/${name}`;
-  // router.push(path);
+  const path = `/dashboard/${dashboardStore.layerId}/${dashboardStore.entity}Relation/${d.source.id}/${d.target.id}/${settings.value.linkDashboard}`;
+  const routeUrl = router.resolve({ path });
+  window.open(routeUrl.href, "_blank");
 }
 function update() {
   // node element
@@ -265,6 +268,9 @@ function update() {
     }
   }
 }
+function updateSettings(config: any) {
+  settings.value = config;
+}
 onBeforeUnmount(() => {
   window.removeEventListener("resize", resize);
 });
@@ -287,9 +293,9 @@ watch(
     height: 700px;
     background-color: #2b3037;
     overflow: auto;
-    padding: 10px;
+    padding: 0 10px;
     border-radius: 4px;
-    color: #ddd;
+    color: #ccc;
     transition: all 0.5ms linear;
   }
 
@@ -297,7 +303,7 @@ watch(
     position: absolute;
     top: 22px;
     right: 0;
-    color: #aaa;
+    color: #ccc;
     cursor: pointer;
     transition: all 0.5ms linear;
   }

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

@@ -14,30 +14,119 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="link-settings">
-    <div>{{ t("dashboards") }}</div>
+    <h5 class="title">Call settings</h5>
+    <div class="label">{{ t("dashboards") }}</div>
     <el-input
       v-model="states.linkDashboard"
       placeholder="Please input a dashboard name for calls"
-      @change="changeLinkDashboard"
+      @change="updateSettings"
       size="small"
       class="inputs"
     />
+    <div class="label">{{ t("metrics") }}</div>
+    <Selector
+      class="inputs"
+      :multiple="true"
+      :value="states.linkMetrics"
+      :options="states.metricList"
+      size="small"
+      placeholder="Select a metric"
+      @change="changeLinkMetrics"
+    />
+  </div>
+  <div class="node-settings">
+    <h5 class="title">Node settings</h5>
+    <div class="label">{{ t("dashboards") }}</div>
+    <el-input
+      v-model="states.nodeDashboard"
+      placeholder="Please input a dashboard name for nodes"
+      @change="updateSettings"
+      size="small"
+      class="inputs"
+    />
+    <div class="label">{{ t("metrics") }}</div>
+    <Selector
+      class="inputs"
+      :multiple="true"
+      :value="states.nodeMetrics"
+      :options="states.metricList"
+      size="small"
+      placeholder="Select a metric"
+      @change="changeNodeMetrics"
+    />
   </div>
 </template>
 <script lang="ts" setup>
 import { reactive } from "vue";
 import { useI18n } from "vue-i18n";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import { ElMessage } from "element-plus";
+import { MetricCatalog } from "../../data";
+import { Option } from "@/types/app";
 
+/*global defineEmits */
+const emit = defineEmits(["update"]);
 const { t } = useI18n();
-const states = reactive<{ linkDashboard: string }>({
+const dashboardStore = useDashboardStore();
+const states = reactive<{
+  linkDashboard: string;
+  nodeDashboard: string;
+  linkMetrics: string[];
+  nodeMetrics: string[];
+  metricList: Option[];
+}>({
   linkDashboard: "",
+  nodeDashboard: "",
+  linkMetrics: [],
+  nodeMetrics: [],
+  metricList: [],
 });
-function changeLinkDashboard() {
-  console.log(states.linkDashboard);
+
+getMetricList();
+async function getMetricList() {
+  const json = await dashboardStore.fetchMetricList();
+  if (json.errors) {
+    ElMessage.error(json.errors);
+    return;
+  }
+  states.metricList = (json.data.metrics || []).filter(
+    (d: { catalog: string }) =>
+      dashboardStore.entity === (MetricCatalog as any)[d.catalog]
+  );
+}
+function updateSettings() {
+  emit("update", {
+    linkDashboard: states.linkDashboard,
+    nodeDashboard: states.nodeDashboard,
+    linkMetrics: states.linkMetrics,
+    nodeMetrics: states.nodeMetrics,
+  });
+}
+function changeLinkMetrics(options: Option[]) {
+  states.linkMetrics = options.map((d: Option) => d.value);
+  updateSettings();
+}
+function changeNodeMetrics(options: Option[]) {
+  states.nodeMetrics = options.map((d: Option) => d.value);
+  updateSettings();
 }
 </script>
 <style lang="scss" scoped>
+.link-settings {
+  margin-bottom: 20px;
+}
+
 .inputs {
+  margin-top: 8px;
+  width: 330px;
+}
+
+.title {
+  margin-bottom: 0;
+}
+
+.label {
+  font-size: 12px;
   margin-top: 10px;
 }
 </style>