From 09dec775d97a784779bf20014cfd4525dcbc8cd5 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Sun, 20 Mar 2022 10:59:23 +0800
Subject: [PATCH] update topology

---
 src/store/modules/dashboard.ts                |   3 +-
 src/views/dashboard/Edit.vue                  |  14 +-
 src/views/dashboard/List.vue                  |   1 -
 .../dashboard/configuration/Topology.vue      |  52 ------
 .../configuration/topology/StyleOptions.vue   | 151 ------------------
 src/views/dashboard/controls/Tab.vue          |   1 +
 src/views/dashboard/controls/Topology.vue     | 110 ++++---------
 src/views/dashboard/panel/Layout.vue          |   2 +-
 .../related/topology/components/Graph.vue     |  19 ++-
 9 files changed, 44 insertions(+), 309 deletions(-)
 delete mode 100644 src/views/dashboard/configuration/Topology.vue
 delete mode 100644 src/views/dashboard/configuration/topology/StyleOptions.vue

diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts
index 30a465c4..64727a09 100644
--- a/src/store/modules/dashboard.ts
+++ b/src/store/modules/dashboard.ts
@@ -92,8 +92,7 @@ export const dashboardStore = defineStore({
         ];
       }
       if (type === "Topology") {
-        newItem.w = 4;
-        newItem.h = 6;
+        newItem.h = 36;
         newItem.graph = {
           fontColor: "white",
           backgroundColor: "green",
diff --git a/src/views/dashboard/Edit.vue b/src/views/dashboard/Edit.vue
index 3da6c974..002e8119 100644
--- a/src/views/dashboard/Edit.vue
+++ b/src/views/dashboard/Edit.vue
@@ -27,17 +27,7 @@ limitations under the License. -->
       :destroy-on-close="true"
       @closed="dashboardStore.setConfigPanel(false)"
     >
-      <TopologyConfig v-if="dashboardStore.selectedGrid.type === 'Topology'" />
-      <Widget v-else />
-    </el-dialog>
-    <el-dialog
-      v-model="dashboardStore.showTopology"
-      :destroy-on-close="true"
-      fullscreen
-      @closed="dashboardStore.setTopology(false)"
-      custom-class="dark-dialog"
-    >
-      <Topology />
+      <Widget />
     </el-dialog>
   </div>
 </template>
@@ -48,8 +38,6 @@ import { useRoute } from "vue-router";
 import GridLayout from "./panel/Layout.vue";
 import Tool from "./panel/Tool.vue";
 import Widget from "./configuration/Widget.vue";
-import TopologyConfig from "./configuration/Topology.vue";
-import Topology from "./related/topology/Index.vue";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
 
diff --git a/src/views/dashboard/List.vue b/src/views/dashboard/List.vue
index 08f03777..02d4edcb 100644
--- a/src/views/dashboard/List.vue
+++ b/src/views/dashboard/List.vue
@@ -122,7 +122,6 @@ import router from "@/router";
 import { DashboardItem } from "@/types/dashboard";
 import { saveFile, readFile } from "@/utils/file";
 import { EntityType } from "./data";
-import { findLastKey } from "lodash";
 
 /*global Nullable*/
 const { t } = useI18n();
diff --git a/src/views/dashboard/configuration/Topology.vue b/src/views/dashboard/configuration/Topology.vue
deleted file mode 100644
index cfd87a7a..00000000
--- a/src/views/dashboard/configuration/Topology.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<!-- Licensed to the Apache Software Foundation (ASF) under one or more
-contributor license agreements.  See the NOTICE file distributed with
-this work for additional information regarding copyright ownership.
-The ASF licenses this file to You under the Apache License, Version 2.0
-(the "License"); you may not use this file except in compliance with
-the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-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>
-  <WidgetOptions />
-  <StyleOptions />
-  <div class="footer">
-    <el-button size="small">
-      {{ t("cancel") }}
-    </el-button>
-    <el-button size="small" type="primary" @click="applyConfig">
-      {{ t("apply") }}
-    </el-button>
-  </div>
-</template>
-<script lang="ts" setup>
-import { useI18n } from "vue-i18n";
-import WidgetOptions from "./components/WidgetOptions.vue";
-import StyleOptions from "./topology/StyleOptions.vue";
-import { useDashboardStore } from "@/store/modules/dashboard";
-
-const { t } = useI18n();
-const dashboardStore = useDashboardStore();
-
-function applyConfig() {
-  dashboardStore.setConfigs(dashboardStore.selectedGrid);
-  dashboardStore.setConfigPanel(false);
-}
-</script>
-<style lang="scss" scoped>
-.footer {
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  border-top: 1px solid #eee;
-  padding: 10px;
-  text-align: right;
-  width: 100%;
-  background-color: #fff;
-}
-</style>
diff --git a/src/views/dashboard/configuration/topology/StyleOptions.vue b/src/views/dashboard/configuration/topology/StyleOptions.vue
deleted file mode 100644
index 52f73ea9..00000000
--- a/src/views/dashboard/configuration/topology/StyleOptions.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<!-- Licensed to the Apache Software Foundation (ASF) under one or more
-contributor license agreements.  See the NOTICE file distributed with
-this work for additional information regarding copyright ownership.
-The ASF licenses this file to You under the Apache License, Version 2.0
-(the "License"); you may not use this file except in compliance with
-the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-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="item">
-    <span class="label">{{ t("backgroundColors") }}</span>
-    <Selector
-      :value="backgroundColor"
-      :options="colors"
-      size="small"
-      placeholder="Select a color"
-      class="input"
-      @change="changeConfig({ backgroundColor: $event[0].value })"
-    />
-  </div>
-  <div class="item">
-    <span class="label">{{ t("fontSize") }}</span>
-    <el-slider
-      class="slider"
-      v-model="fontSize"
-      show-input
-      input-size="small"
-      :min="12"
-      :max="30"
-      :step="1"
-      @change="changeConfig({ fontSize })"
-    />
-  </div>
-  <div class="item">
-    <span class="label">{{ t("fontColors") }}</span>
-    <Selector
-      :value="fontColor"
-      :options="colors"
-      size="small"
-      placeholder="Select a color"
-      class="input"
-      @change="changeConfig({ fontColor: $event[0].value })"
-    />
-  </div>
-  <div class="item">
-    <span class="label">{{ t("iconTheme") }}</span>
-    <el-switch
-      v-model="iconTheme"
-      active-text="Light"
-      inactive-text="Dark"
-      @change="changeConfig({ iconTheme })"
-    />
-  </div>
-  <div class="item">
-    <span class="label">{{ t("content") }}</span>
-    <el-input
-      class="input"
-      v-model="content"
-      size="small"
-      @change="changeConfig({ content })"
-    />
-  </div>
-  <div class="item">
-    <span class="label">{{ t("showDepth") }}</span>
-    <el-switch
-      v-model="showDepth"
-      active-text="Yes"
-      inactive-text="No"
-      @change="changeConfig({ showDepth })"
-    />
-  </div>
-  <div class="item" v-show="showDepth">
-    <span class="label">{{ t("defaultDepth") }}</span>
-    <Selector
-      class="input"
-      size="small"
-      :value="depth"
-      :options="DepthList"
-      @change="changeDepth($event)"
-    />
-  </div>
-</template>
-<script lang="ts" setup>
-import { useI18n } from "vue-i18n";
-import { ref } from "vue";
-import { useDashboardStore } from "@/store/modules/dashboard";
-import { DepthList } from "../../data";
-import { Option } from "@/types/app";
-
-const { t } = useI18n();
-const dashboardStore = useDashboardStore();
-const { selectedGrid } = dashboardStore;
-const iconTheme = ref(selectedGrid.graph.iconTheme || true);
-const backgroundColor = ref(selectedGrid.graph.backgroundColor || "green");
-const fontColor = ref(selectedGrid.graph.fontColor || "white");
-const content = ref<string>(selectedGrid.graph.content);
-const fontSize = ref<number>(selectedGrid.graph.fontSize);
-const depth = ref<string>(selectedGrid.graph.depth || "2");
-const showDepth = ref<boolean>(selectedGrid.graph.showDepth);
-const colors = [
-  {
-    label: "Green",
-    value: "green",
-  },
-  { label: "Blue", value: "blue" },
-  { label: "Red", value: "red" },
-  { label: "Grey", value: "grey" },
-  { label: "White", value: "white" },
-  { label: "Black", value: "black" },
-  { label: "Orange", value: "orange" },
-];
-function changeConfig(param: { [key: string]: unknown }) {
-  const { selectedGrid } = dashboardStore;
-  const graph = {
-    ...selectedGrid.graph,
-    ...param,
-  };
-  dashboardStore.selectWidget({ ...selectedGrid, graph });
-}
-function changeDepth(opt: Option[]) {
-  const val = opt[0].value;
-  changeConfig({ depth: val });
-}
-</script>
-<style lang="scss" scoped>
-.slider {
-  width: 500px;
-  margin-top: -3px;
-}
-
-.label {
-  font-size: 13px;
-  font-weight: 500;
-  display: block;
-  margin-bottom: 5px;
-}
-
-.input {
-  width: 500px;
-}
-
-.item {
-  margin-bottom: 10px;
-}
-</style>
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index 90f35349..bb77acd2 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -97,6 +97,7 @@ limitations under the License. -->
         :key="item.i"
         @click="clickTabGrid($event, item)"
         :class="{ active: activeTabWidget === item.i }"
+        drag-ignore-from="svg.d3-trace-tree, .dragger, .micro-topo-chart"
       >
         <component
           :is="item.type"
diff --git a/src/views/dashboard/controls/Topology.vue b/src/views/dashboard/controls/Topology.vue
index 56bd7968..12d0c5fb 100644
--- a/src/views/dashboard/controls/Topology.vue
+++ b/src/views/dashboard/controls/Topology.vue
@@ -13,58 +13,23 @@ 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="topology">
-    <div class="header flex-h">
-      <div>{{ data.widget?.title || "" }}</div>
-      <div>
-        <el-tooltip :content="data.widget?.tips">
-          <span>
-            <Icon
-              iconName="info_outline"
-              size="sm"
-              class="operation"
-              v-show="data.widget?.tips"
-            />
-          </span>
-        </el-tooltip>
-        <el-popover
-          placement="bottom"
-          trigger="click"
-          :width="100"
-          v-if="routeParams.entity"
-        >
-          <template #reference>
-            <span>
-              <Icon iconName="ellipsis_v" size="middle" class="operation" />
-            </span>
-          </template>
-          <div class="tools" @click="editConfig">
-            <span>{{ t("edit") }}</span>
-          </div>
-          <div class="tools" @click="removeTopo">
-            <span>{{ t("delete") }}</span>
-          </div>
-        </el-popover>
-      </div>
-    </div>
-    <div
-      class="body"
-      @click="ViewTopology"
-      :style="{ backgroundColor: Colors[data.graph.backgroundColor] }"
+  <div class="topology flex-v">
+    <el-popover
+      placement="bottom"
+      trigger="click"
+      :width="100"
+      v-if="routeParams.entity"
     >
-      <Icon
-        :iconName="data.graph.iconTheme ? 'topology-light' : 'topology-dark'"
-        size="middle"
-      />
-      <div
-        :style="{
-          color: Colors[data.graph.fontColor],
-          fontSize: data.graph.fontSize + 'px',
-        }"
-      >
-        {{ data.graph.content }}
+      <template #reference>
+        <span class="delete cp">
+          <Icon iconName="ellipsis_v" size="middle" class="operation" />
+        </span>
+      </template>
+      <div class="tools" @click="removeTopo">
+        <span>{{ t("delete") }}</span>
       </div>
-    </div>
+    </el-popover>
+    <Topology />
   </div>
 </template>
 <script lang="ts" setup>
@@ -72,7 +37,7 @@ import type { PropType } from "vue";
 import { useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
-import { Colors } from "../data";
+import Topology from "../related/topology/Index.vue";
 /*global defineProps */
 const props = defineProps({
   data: {
@@ -85,33 +50,29 @@ const { t } = useI18n();
 const routeParams = useRoute().params;
 const dashboardStore = useDashboardStore();
 
-function editConfig() {
-  dashboardStore.setConfigPanel(true);
-  dashboardStore.selectWidget(props.data);
-}
-function ViewTopology() {
-  dashboardStore.setTopology(true);
-}
 function removeTopo() {
   dashboardStore.removeControls(props.data);
 }
 </script>
 <style lang="scss" scoped>
 .topology {
-  font-size: 12px;
   height: 100%;
+  background-color: #333840;
+  width: 100%;
+  font-size: 12px;
+  position: relative;
+}
+
+.delete {
+  position: absolute;
+  top: 5px;
+  right: 3px;
 }
 
 .header {
-  height: 30px;
-  padding: 5px;
-  width: 100%;
-  border-bottom: 1px solid #eee;
-  justify-content: space-between;
-}
-
-.operation {
-  cursor: pointer;
+  padding: 10px;
+  font-size: 12px;
+  border-bottom: 1px solid #dcdfe6;
 }
 
 .tools {
@@ -127,19 +88,6 @@ function removeTopo() {
   }
 }
 
-.body {
-  text-align: center;
-  width: 100%;
-  height: calc(100% - 30px);
-  cursor: pointer;
-  box-sizing: border-box;
-  color: #333;
-  display: -webkit-box;
-  -webkit-box-orient: horizontal;
-  -webkit-box-pack: center;
-  -webkit-box-align: center;
-}
-
 .no-data {
   font-size: 14px;
   color: #888;
diff --git a/src/views/dashboard/panel/Layout.vue b/src/views/dashboard/panel/Layout.vue
index 4188e497..f740d66f 100644
--- a/src/views/dashboard/panel/Layout.vue
+++ b/src/views/dashboard/panel/Layout.vue
@@ -31,7 +31,7 @@ limitations under the License. -->
       :key="item.i"
       @click="clickGrid(item)"
       :class="{ active: dashboardStore.activedGridItem === item.i }"
-      drag-ignore-from="svg.d3-trace-tree, .dragger"
+      drag-ignore-from="svg.d3-trace-tree, .dragger, .micro-topo-chart"
     >
       <component :is="item.type" :data="item" />
     </grid-item>
diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue
index d62607d0..bbce8494 100644
--- a/src/views/dashboard/related/topology/components/Graph.vue
+++ b/src/views/dashboard/related/topology/components/Graph.vue
@@ -453,7 +453,7 @@ async function freshNodes() {
   update();
 }
 
-async function changeDepth(opt: Option[]) {
+async function changeDepth(opt: Option[] | any) {
   depth.value = opt[0].value;
   await getTopology();
   freshNodes();
@@ -463,8 +463,16 @@ onBeforeUnmount(() => {
 });
 </script>
 <style lang="scss">
+.topo-svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
 .micro-topo-chart {
   position: relative;
+  height: calc(100% - 40px);
+  overflow: auto;
 
   .setting {
     position: absolute;
@@ -510,8 +518,8 @@ onBeforeUnmount(() => {
 
   .tool {
     position: absolute;
-    top: 22px;
-    right: 0;
+    top: 35px;
+    right: 10px;
   }
 
   .switch-icon {
@@ -524,11 +532,6 @@ onBeforeUnmount(() => {
     border-radius: 3px;
   }
 
-  .topo-svg {
-    display: block;
-    width: 100%;
-  }
-
   .topo-line {
     stroke-linecap: round;
     stroke-width: 3px;