From 224b8e804e4a1e1936f201d8933a68fa0832e78b Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Mon, 15 Aug 2022 15:59:39 +0800
Subject: [PATCH] create setting view

---
 .../related/network-profiling/Content.vue     |  1 +
 .../components/ProcessTopology.vue            | 71 ++++++++++++++++++
 .../network-profiling/components/Settings.vue | 73 +++++++++++++++++++
 3 files changed, 145 insertions(+)

diff --git a/src/views/dashboard/related/network-profiling/Content.vue b/src/views/dashboard/related/network-profiling/Content.vue
index 2bcb441d..13a059c9 100644
--- a/src/views/dashboard/related/network-profiling/Content.vue
+++ b/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 {
diff --git a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
index 1b7e23cb..b88d397b 100644
--- a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
+++ b/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>
diff --git a/src/views/dashboard/related/network-profiling/components/Settings.vue b/src/views/dashboard/related/network-profiling/components/Settings.vue
index 679043c9..40ff3712 100644
--- a/src/views/dashboard/related/network-profiling/components/Settings.vue
+++ b/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>