update sankey

src/views/dashboard/controls/Topology.vue

@@ -14,21 +14,26 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="topology flex-v">
-    <el-popover
-      placement="bottom"
-      trigger="click"
-      :width="100"
-      v-if="routeParams.entity"
-    >
-      <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>
-    </el-popover>
+    <div class="operation">
+      <el-popover
+        placement="bottom"
+        trigger="click"
+        :width="100"
+        v-if="routeParams.entity"
+      >
+        <template #reference>
+          <span>
+            <Icon iconName="ellipsis_v" size="middle" />
+          </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>
     <Topology />
   </div>
 </template>
@@ -54,6 +59,10 @@ const dashboardStore = useDashboardStore();
 function removeTopo() {
   dashboardStore.removeControls(props.data);
 }
+function editConfig() {
+  dashboardStore.setConfigPanel(true);
+  dashboardStore.selectWidget(props.data);
+}
 </script>
 <style lang="scss" scoped>
 .topology {
@@ -64,16 +73,11 @@ function removeTopo() {
   position: relative;
 }
 
-.delete {
+.operation {
   position: absolute;
   top: 5px;
   right: 3px;
-}
-
-.header {
-  padding: 10px;
-  font-size: 12px;
-  border-bottom: 1px solid #dcdfe6;
+  cursor: pointer;
 }
 
 .tools {

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

@@ -123,7 +123,7 @@ onMounted(async () => {
     height: 0,
     width: 0,
   };
-  height.value = dom.height;
+  height.value = dom.height - 40;
   width.value = dom.width;
   window.addEventListener("resize", resize);
   svg.value = d3.select(chart.value).append("svg").attr("class", "topo-svg");
@@ -475,8 +475,9 @@ onBeforeUnmount(() => {
 
 .micro-topo-chart {
   position: relative;
-  height: 100%;
+  height: calc(100% - 30px);
   overflow: auto;
+  margin-top: 30px;
 
   .setting {
     position: absolute;

src/views/dashboard/related/topology/components/PodTopology.vue

@@ -89,8 +89,8 @@ const dashboardStore = useDashboardStore();
 const selectorStore = useSelectorStore();
 const topologyStore = useTopologyStore();
 const loading = ref<boolean>(false);
-const height = ref<number>(document.body.clientHeight - 150);
-const width = ref<number>(document.body.clientWidth - 40);
+const height = ref<number>(document.body.clientHeight);
+const width = ref<number>(document.body.clientWidth);
 const showSettings = ref<boolean>(false);
 const settings = ref<any>({});
 const operationsPos = reactive<{ x: number; y: number }>({ x: NaN, y: NaN });
@@ -112,6 +112,12 @@ async function loadTopology(id: string) {
   if (resp && resp.errors) {
     ElMessage.error(resp.errors);
   }
+  const dom = document.querySelector(".topology")?.getBoundingClientRect() || {
+    height: 0,
+    width: 0,
+  };
+  height.value = dom.height - 40;
+  width.value = dom.width;
 }
 
 function inspect() {
@@ -176,7 +182,7 @@ function selectNodeLink(d: any) {
   operationsPos.y = d.event.event.clientY;
 }
 
-async function changeDepth(opt: Option[]) {
+async function changeDepth(opt: Option[] | any) {
   depth.value = opt[0].value;
   loadTopology(selectorStore.currentPod.id);
 }
@@ -212,8 +218,8 @@ function handleClick(event: any) {
 
 .settings {
   position: absolute;
-  top: 40px;
-  right: 0;
+  top: 60px;
+  right: 10px;
   width: 400px;
   height: 700px;
   background-color: #2b3037;
@@ -228,7 +234,8 @@ function handleClick(event: any) {
 
 .tool {
   text-align: right;
-  margin-top: 10px;
+  margin-top: 40px;
+  margin-right: 10px;
   position: relative;
 }