create setting view

src/views/dashboard/related/network-profiling/Content.vue

@@ -50,6 +50,7 @@ const networkProfilingStore = useNetworkProfilingStore();
   width: 100%;
   height: calc(100% - 210px);
   background-color: #333840;
+  position: relative;
 }
 
 .schedules {

src/views/dashboard/related/network-profiling/components/ProcessTopology.vue

@@ -14,12 +14,25 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div ref="chart" class="micro-topo-chart"></div>
+  <div
+    class="switch-icon ml-5"
+    title="Settings"
+    @click="setConfig"
+    v-if="dashboardStore.editMode"
+  >
+    <Icon size="middle" iconName="settings" />
+  </div>
+  <div class="setting" v-if="showSettings && dashboardStore.editMode">
+    <Settings @update="updateSettings" @updateNodes="freshNodes" />
+  </div>
 </template>
 <script lang="ts" setup>
 import type { PropType } from "vue";
 import { ref, onMounted, watch } from "vue";
 import * as d3 from "d3";
 import { useI18n } from "vue-i18n";
+import { ElMessage } from "element-plus";
+import router from "@/router";
 import { useNetworkProfilingStore } from "@/store/modules/network-profiling";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import d3tip from "d3-tip";
@@ -37,6 +50,9 @@ import { Call } from "@/types/topology";
 // import zoom from "../../components/D3Graph/zoom";
 import { ProcessNode } from "@/types/ebpf";
 import { useThrottleFn } from "@vueuse/core";
+import Settings from "./Settings.vue";
+import { EntityType } from "@/views/dashboard/data";
+import getDashboard from "@/hooks/useDashboardsSession";
 
 /*global Nullable, defineProps */
 const props = defineProps({
@@ -60,6 +76,8 @@ const link = ref<any>(null);
 const anchor = ref<any>(null);
 const arrow = ref<any>(null);
 const oldVal = ref<{ width: number; height: number }>({ width: 0, height: 0 });
+const showSettings = ref<boolean>(false);
+const config = ref<any>({});
 
 onMounted(() => {
   init();
@@ -200,6 +218,23 @@ function handleLinkClick(event: any, d: Call) {
   event.stopPropagation();
   networkProfilingStore.setNode(null);
   networkProfilingStore.setLink(d);
+  if (!config.value.linkDashboard) {
+    return;
+  }
+  const { dashboard } = getDashboard({
+    name: config.value.linkDashboard,
+    layer: dashboardStore.layerId,
+    entity: EntityType[7].value,
+  });
+  if (!dashboard) {
+    ElMessage.error(
+      `The dashboard named ${config.value.linkDashboard} doesn't exist`
+    );
+    return;
+  }
+  const path = `/dashboard/related/${dashboard.layer}/${EntityType[7].value}Relation/${d.source.id}/${d.target.id}/${dashboard.name}`;
+  const routeUrl = router.resolve({ path });
+  window.open(routeUrl.href, "_blank");
 }
 
 function ticked() {
@@ -223,6 +258,15 @@ function ticked() {
   );
 }
 
+function updateSettings(config: any) {
+  config.value = config;
+}
+
+function setConfig() {
+  showSettings.value = !showSettings.value;
+  dashboardStore.selectWidget(props.config);
+}
+
 function resize() {
   const observer = new ResizeObserver((entries) => {
     const entry = entries[0];
@@ -269,4 +313,31 @@ watch(
   height: calc(100% - 10px);
   cursor: move;
 }
+
+.switch-icon {
+  cursor: pointer;
+  transition: all 0.5ms linear;
+  background-color: #252a2f99;
+  color: #ddd;
+  display: inline-block;
+  padding: 5px 8px 8px;
+  border-radius: 3px;
+  position: absolute;
+  top: 20px;
+  right: 10px;
+}
+
+.setting {
+  position: absolute;
+  top: 65px;
+  right: 10px;
+  width: 300px;
+  height: 160px;
+  background-color: #2b3037;
+  overflow: auto;
+  padding: 15px;
+  border-radius: 3px;
+  color: #ccc;
+  transition: all 0.5ms linear;
+}
 </style>

src/views/dashboard/related/network-profiling/components/Settings.vue

@@ -12,3 +12,76 @@ distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
+<template>
+  <div class="label">{{ t("linkDashboard") }}</div>
+  <Selector
+    :value="linkDashboard"
+    :options="linkDashboards"
+    size="small"
+    placeholder="Please input a dashboard name for calls"
+    @change="changeLinkDashboard"
+    class="inputs"
+    :clearable="true"
+  />
+</template>
+<script lang="ts" setup>
+import { ref, onMounted } from "vue";
+import { useI18n } from "vue-i18n";
+import { DashboardItem } from "@/types/dashboard";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import { EntityType } from "@/views/dashboard/data";
+/*global defineEmits */
+const emits = defineEmits(["update"]);
+const { t } = useI18n();
+const dashboardStore = useDashboardStore();
+const linkDashboards = ref<
+  (DashboardItem & { label: string; value: string })[]
+>([]);
+const { selectedGrid } = dashboardStore;
+const linkDashboard = ref<string>(selectedGrid.linkDashboard || "");
+
+onMounted(() => {
+  getDashboards();
+});
+
+function getDashboards() {
+  const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
+  linkDashboards.value = list.reduce(
+    (
+      prev: (DashboardItem & { label: string; value: string })[],
+      d: DashboardItem
+    ) => {
+      if (
+        d.layer === dashboardStore.layerId &&
+        d.entity === EntityType[7].value
+      ) {
+        prev.push({ ...d, label: d.name, value: d.name });
+      }
+      return prev;
+    },
+    []
+  );
+}
+
+function changeLinkDashboard(opt: { value: string }[]) {
+  linkDashboard.value = opt[0].value;
+  const param = {
+    ...dashboardStore.selectedGrid,
+    linkDashboard: linkDashboard.value,
+  };
+  dashboardStore.selectWidget(param);
+  dashboardStore.setConfigs(param);
+  emits("update", param);
+}
+</script>
+<style lang="scss" scoped>
+.label {
+  font-size: 12px;
+  margin-top: 10px;
+}
+
+.inputs {
+  margin-top: 8px;
+  width: 270px;
+}
+</style>