From d78ca0cd4be27931340f2d9a526a87a0e1efff0e Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Mon, 28 Mar 2022 14:14:59 +0800
Subject: [PATCH] fix: update sidebar, topology, table, title, router (#42)

---
 src/assets/icons/version.svg                  |  15 ++
 src/components/Icon.vue                       |   4 +-
 src/layout/components/SideBar.vue             | 207 +++++++++---------
 src/router/dashboard.ts                       |   2 +-
 src/styles/reset.scss                         |  18 ++
 src/views/dashboard/graphs/EndpointList.vue   |   4 +-
 src/views/dashboard/graphs/InstanceList.vue   |   2 +-
 src/views/dashboard/graphs/ServiceList.vue    |   2 +-
 src/views/dashboard/graphs/Table.vue          |  82 ++-----
 src/views/dashboard/panel/Tool.vue            |   1 -
 .../related/topology/components/Graph.vue     |   8 +-
 vue.config.js                                 |   4 +
 12 files changed, 170 insertions(+), 179 deletions(-)
 create mode 100644 src/assets/icons/version.svg

diff --git a/src/assets/icons/version.svg b/src/assets/icons/version.svg
new file mode 100644
index 00000000..fba69678
--- /dev/null
+++ b/src/assets/icons/version.svg
@@ -0,0 +1,15 @@
+<!-- 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. -->
+<svg t="1648440420715" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3665" width="32" height="32"><path d="M914.894958 0 109.105042 0c-21.501383 0-38.907264 14.078286-38.907264 31.740136L70.197778 990.855388c0 25.340915 34.811763 40.443077 60.664616 26.108822l350.677314-194.280351c13.054411-7.167128 29.948355-7.423096 43.002765-0.255969l368.851102 196.328102c25.852853 13.822317 60.152678-1.279844 60.152678-26.62076L953.546253 31.740136C953.802222 14.334255 936.39634 0 914.894958 0zM562.681831 746.661113l-101.363662 0-196.328102-547.773322 90.61297 0 155.885025 454.344695 2.30372 0 155.117118-454.344695 90.61297 0L562.681831 746.661113z" p-id="3666" fill="#e6e6e6"></path></svg>
\ No newline at end of file
diff --git a/src/components/Icon.vue b/src/components/Icon.vue
index e7805416..7848aacc 100644
--- a/src/components/Icon.vue
+++ b/src/components/Icon.vue
@@ -55,8 +55,8 @@ defineProps({
   }
 
   &.lg {
-    width: 24px;
-    height: 24px;
+    width: 22px;
+    height: 22px;
   }
 
   &.loading {
diff --git a/src/layout/components/SideBar.vue b/src/layout/components/SideBar.vue
index 1316cdef..6649c744 100644
--- a/src/layout/components/SideBar.vue
+++ b/src/layout/components/SideBar.vue
@@ -13,93 +13,95 @@ 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="side-bar">
-    <div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'">
-      <Icon
-        :size="isCollapse ? 'xl' : 'logo'"
-        :iconName="isCollapse ? 'logo' : 'logo-sw'"
-      />
-    </div>
-    <el-menu
-      active-text-color="#448dfe"
-      background-color="#252a2f"
-      class="el-menu-vertical"
-      :default-active="name"
-      text-color="#efefef"
-      :unique-opened="true"
-      :collapse="isCollapse"
-      :style="{ border: 'none' }"
-    >
-      <template v-for="(menu, index) in routes" :key="index">
-        <el-sub-menu :index="String(menu.name)" v-if="menu.meta.hasGroup">
-          <template #title>
-            <router-link
-              class="items"
-              :to="menu.path"
-              :exact="menu.meta.exact || false"
-            >
-              <el-icon class="menu-icons" :style="{ marginRight: '12px' }">
-                <Icon size="lg" :iconName="menu.meta.icon" />
-              </el-icon>
-              <span :class="isCollapse ? 'collapse' : ''">
-                {{ t(menu.meta.title) }}
-              </span>
-            </router-link>
-          </template>
-          <el-menu-item-group>
-            <el-menu-item
-              v-for="(m, idx) in filterMenus(menu.children)"
-              :index="m.name"
-              :key="idx"
-            >
+  <div class="side-bar flex-v">
+    <div>
+      <div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'">
+        <Icon
+          :size="isCollapse ? 'xl' : 'logo'"
+          :iconName="isCollapse ? 'logo' : 'logo-sw'"
+        />
+      </div>
+      <el-menu
+        active-text-color="#448dfe"
+        background-color="#252a2f"
+        class="el-menu-vertical"
+        :default-active="name"
+        text-color="#efefef"
+        :unique-opened="true"
+        :collapse="isCollapse"
+        :style="{ border: 'none' }"
+      >
+        <template v-for="(menu, index) in routes" :key="index">
+          <el-sub-menu :index="String(menu.name)" v-if="menu.meta.hasGroup">
+            <template #title>
               <router-link
                 class="items"
-                :to="m.path"
-                :exact="m.meta.exact || false"
+                :to="menu.path"
+                :exact="menu.meta.exact || false"
               >
-                <span>{{ t(m.meta.title) }}</span>
+                <el-icon class="menu-icons" :style="{ marginRight: '12px' }">
+                  <Icon size="lg" :iconName="menu.meta.icon" />
+                </el-icon>
+                <span :class="isCollapse ? 'collapse' : ''">
+                  {{ t(menu.meta.title) }}
+                </span>
               </router-link>
-            </el-menu-item>
-          </el-menu-item-group>
-        </el-sub-menu>
-        <el-menu-item
-          :index="String(menu.name)"
-          @click="changePage(menu)"
-          v-else
-        >
-          <el-icon class="menu-icons" :style="{ marginRight: '12px' }">
-            <router-link
-              class="items"
-              :to="menu.children[0].path"
-              :exact="menu.meta.exact"
-            >
-              <Icon size="lg" :iconName="menu.meta.icon" />
-            </router-link>
-          </el-icon>
-          <template #title>
-            <router-link
-              class="items"
-              :to="menu.children[0].path"
-              :exact="menu.meta.exact"
-            >
-              <span>{{ t(menu.meta.title) }}</span>
-            </router-link>
-          </template>
-        </el-menu-item>
-      </template>
-    </el-menu>
-    <div
-      class="menu-control"
-      :class="isCollapse ? 'collapse' : ''"
-      :style="{
-        color: theme === 'light' ? '#eee' : '#252a2f',
-      }"
-    >
-      <Icon
-        size="middle"
-        iconName="format_indent_decrease"
-        @click="controlMenu"
-      />
+            </template>
+            <el-menu-item-group>
+              <el-menu-item
+                v-for="(m, idx) in filterMenus(menu.children)"
+                :index="m.name"
+                :key="idx"
+              >
+                <router-link
+                  class="items"
+                  :to="m.path"
+                  :exact="m.meta.exact || false"
+                >
+                  <span>{{ t(m.meta.title) }}</span>
+                </router-link>
+              </el-menu-item>
+            </el-menu-item-group>
+          </el-sub-menu>
+          <el-menu-item
+            :index="String(menu.name)"
+            @click="changePage(menu)"
+            v-else
+          >
+            <el-icon class="menu-icons" :style="{ marginRight: '12px' }">
+              <router-link
+                class="items"
+                :to="menu.children[0].path"
+                :exact="menu.meta.exact"
+              >
+                <Icon size="lg" :iconName="menu.meta.icon" />
+              </router-link>
+            </el-icon>
+            <template #title>
+              <router-link
+                class="items"
+                :to="menu.children[0].path"
+                :exact="menu.meta.exact"
+              >
+                <span>{{ t(menu.meta.title) }}</span>
+              </router-link>
+            </template>
+          </el-menu-item>
+        </template>
+      </el-menu>
+      <div
+        class="menu-control"
+        :class="isCollapse ? 'collapse' : ''"
+        :style="{
+          color: theme === 'light' ? '#eee' : '#252a2f',
+        }"
+      >
+        <Icon
+          size="middle"
+          iconName="format_indent_decrease"
+          @click="controlMenu"
+        />
+      </div>
     </div>
     <div class="version">
       <el-popover
@@ -109,7 +111,9 @@ limitations under the License. -->
         :content="appStore.version"
       >
         <template #reference>
-          {{ t("version") }}
+          <span>
+            <Icon iconName="version" size="middle" />
+          </span>
         </template>
       </el-popover>
     </div>
@@ -122,6 +126,7 @@ import { useRouter, RouteRecordRaw } from "vue-router";
 import { useI18n } from "vue-i18n";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { ElMessage } from "element-plus";
+import Icon from "@/components/Icon.vue";
 
 const appStore = useAppStoreWithOut();
 const { t } = useI18n();
@@ -154,19 +159,22 @@ async function getVersion() {
 <style lang="scss" scoped>
 .side-bar {
   position: relative;
-  height: 100%;
   background: #252a2f;
-  font-weight: bold;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  min-height: 700px;
+  justify-content: space-between;
 }
 
 .el-menu-vertical:not(.el-menu--collapse) {
-  width: 210px;
-  font-size: 18px;
+  width: 200px;
+  font-size: 16px;
 }
 
 .logo-icon-collapse {
   width: 65px;
-  margin: 15px 0 30px 0;
+  margin: 15px 0 10px 0;
   text-align: center;
 }
 
@@ -179,24 +187,14 @@ span.collapse {
 }
 
 .logo-icon {
-  margin: 15px 0 30px 15px;
+  margin: 15px 0 10px 20px;
   width: 110px;
 }
 
-.el-sub-menu .el-icon {
-  height: 26px;
-  margin-right: 0;
-}
-
-.el-sub-menu__title {
-  font-size: 16px;
-  font-weight: bold;
-}
-
 .menu-control {
-  position: absolute;
+  position: fixed;
   top: 8px;
-  left: 215px;
+  left: 200px;
   cursor: pointer;
   transition: all 0.2s linear;
   z-index: 99;
@@ -218,10 +216,9 @@ span.collapse {
 
 .version {
   color: #eee;
-  position: fixed;
-  bottom: 20px;
-  left: 20px;
   font-size: 12px;
   cursor: pointer;
+  padding-left: 23px;
+  margin-bottom: 10px;
 }
 </style>
diff --git a/src/router/dashboard.ts b/src/router/dashboard.ts
index 01105f94..bfb91d25 100644
--- a/src/router/dashboard.ts
+++ b/src/router/dashboard.ts
@@ -68,7 +68,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         },
       },
       {
-        path: "/dashboard/:layerId/:entity/:serviceId/:destServiceId/:name",
+        path: "/dashboard/related/:layerId/:entity/:serviceId/:destServiceId/:name",
         component: () => import("@/views/dashboard/Edit.vue"),
         name: "ViewServiceRelation",
         meta: {
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
index b65abdb9..9869e765 100644
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@@ -123,3 +123,21 @@ code,
 pre {
   font-family: Consolas, Menlo, Courier, monospace;
 }
+
+.el-menu {
+  --el-menu-item-height: 50px;
+}
+
+.el-menu-item-group__title {
+  display: none;
+}
+
+.el-sub-menu .el-menu-item {
+  height: 40px;
+  line-height: 40px;
+  padding-left: 52px !important;
+}
+
+.el-icon.menu-icons {
+  margin-right: 8px !important;
+}
diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue
index 1191915d..f96484fd 100644
--- a/src/views/dashboard/graphs/EndpointList.vue
+++ b/src/views/dashboard/graphs/EndpointList.vue
@@ -117,8 +117,8 @@ const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
 const chartLoading = ref<boolean>(false);
 const endpoints = ref<Endpoint[]>([]);
-const pageSize = 5;
-const total = 10;
+const pageSize = 15;
+const total = 15;
 const searchText = ref<string>("");
 
 queryEndpoints(total);
diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue
index f918ae2e..71511287 100644
--- a/src/views/dashboard/graphs/InstanceList.vue
+++ b/src/views/dashboard/graphs/InstanceList.vue
@@ -143,7 +143,7 @@ const dashboardStore = useDashboardStore();
 const chartLoading = ref<boolean>(false);
 const instances = ref<Instance[]>([]); // current instances
 const searchInstances = ref<Instance[]>([]); // all instances
-const pageSize = 5;
+const pageSize = 15;
 const searchText = ref<string>("");
 
 queryInstance();
diff --git a/src/views/dashboard/graphs/ServiceList.vue b/src/views/dashboard/graphs/ServiceList.vue
index 4423601b..5b561dfd 100644
--- a/src/views/dashboard/graphs/ServiceList.vue
+++ b/src/views/dashboard/graphs/ServiceList.vue
@@ -128,7 +128,7 @@ const props = defineProps({
 const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
 const chartLoading = ref<boolean>(false);
-const pageSize = 5;
+const pageSize = 15;
 const services = ref<Service[]>([]);
 const searchText = ref<string>("");
 const groups = ref<any>({});
diff --git a/src/views/dashboard/graphs/Table.vue b/src/views/dashboard/graphs/Table.vue
index 36d8f50a..66a0ea2e 100644
--- a/src/views/dashboard/graphs/Table.vue
+++ b/src/views/dashboard/graphs/Table.vue
@@ -15,41 +15,28 @@ limitations under the License. -->
 
 <template>
   <div class="chart-table">
-    <div ref="chartTable">
-      <div
-        class="row header flex-h"
-        :style="`width: ${nameWidth + initWidth}px`"
-      >
-        <div class="name" :style="`width: ${nameWidth}px`">
-          {{ config.tableHeaderCol1 || t("name") }}
-          <i class="r cp" ref="draggerName">
-            <Icon iconName="settings_ethernet" size="middle" />
-          </i>
-        </div>
-        <div class="value-col" v-if="showTableValues">
-          {{ config.tableHeaderCol2 || t("value") }}
-        </div>
+    <div class="row header flex-h">
+      <div class="name" :style="`width: ${nameWidth}`">
+        {{ config.tableHeaderCol1 || t("name") }}
       </div>
-      <div
-        class="row flex-h"
-        v-for="key in dataKeys"
-        :key="key"
-        :style="`width: ${nameWidth + initWidth}px`"
-      >
-        <div :style="`width: ${nameWidth}px`">{{ key }}</div>
-        <div class="value-col" v-if="showTableValues">
-          {{
-            config.metricTypes[0] === "readMetricsValue"
-              ? data[key]
-              : data[key][data[key].length - 1 || 0]
-          }}
-        </div>
+      <div class="value-col" v-if="config.showTableValues">
+        {{ config.tableHeaderCol2 || t("value") }}
+      </div>
+    </div>
+    <div class="row flex-h" v-for="key in dataKeys" :key="key">
+      <div class="name" :style="`width: ${nameWidth}`">{{ key }}</div>
+      <div class="value-col" v-if="config.showTableValues">
+        {{
+          config.metricTypes[0] === "readMetricsValue"
+            ? data[key]
+            : data[key][data[key].length - 1 || 0]
+        }}
       </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, ref, onMounted } from "vue";
+import { computed } from "vue";
 import type { PropType } from "vue";
 import { useI18n } from "vue-i18n";
 /*global defineProps */
@@ -69,40 +56,10 @@ const props = defineProps({
   },
 });
 
-/*global Nullable*/
 const { t } = useI18n();
-const chartTable = ref<Nullable<HTMLElement>>(null);
-const initWidth = ref<number>(0);
-const nameWidth = ref<number>(0);
-const draggerName = ref<Nullable<HTMLElement>>(null);
-const showTableValues = ref<boolean>(props.config.showTableValues || false);
-onMounted(() => {
-  if (!chartTable.value) {
-    return;
-  }
-  const width = props.config.showTableValues
-    ? chartTable.value.offsetWidth / 2
-    : chartTable.value.offsetWidth;
-  initWidth.value = props.config.showTableValues
-    ? chartTable.value.offsetWidth / 2
-    : 0;
-  nameWidth.value = width - 5;
-  if (!draggerName.value) {
-    return;
-  }
-  draggerName.value.onmousedown = (event: MouseEvent) => {
-    const diffX = event.clientX;
-    const copy = nameWidth;
-    document.onmousemove = (documentEvent) => {
-      const moveX = documentEvent.clientX - diffX;
-      nameWidth.value = Number(copy) + Number(moveX);
-    };
-    document.onmouseup = () => {
-      document.onmousemove = null;
-      document.onmouseup = null;
-    };
-  };
-});
+const nameWidth = computed(() =>
+  props.config.showTableValues ? "80%" : "100%"
+);
 const dataKeys = computed(() => {
   if (props.config.metricTypes[0] === "readMetricsValue") {
     const keys = Object.keys(props.data || {});
@@ -127,6 +84,7 @@ const dataKeys = computed(() => {
   .row {
     border-left: 1px solid #ccc;
     height: 20px;
+    width: 100%;
 
     div {
       overflow: hidden;
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index d5476d0a..b3823d1d 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -98,7 +98,6 @@ limitations under the License. -->
     </div>
   </div>
 </template>
-
 <script lang="ts" setup>
 import { reactive, ref } from "vue";
 import { useRoute } from "vue-router";
diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue
index f1f84b38..2186e5b0 100644
--- a/src/views/dashboard/related/topology/components/Graph.vue
+++ b/src/views/dashboard/related/topology/components/Graph.vue
@@ -153,7 +153,7 @@ async function init() {
   graph.value = svg.value
     .append("g")
     .attr("class", "topo-svg-graph")
-    .attr("transform", `translate(0, -100)`);
+    .attr("transform", `translate(-100, -100)`);
   graph.value.call(tip.value);
   simulation.value = simulationInit(
     d3,
@@ -221,7 +221,7 @@ function dragended(d: any) {
 function handleNodeClick(d: Node & { x: number; y: number }) {
   topologyStore.setNode(d);
   topologyStore.setLink(null);
-  operationsPos.x = d.x;
+  operationsPos.x = d.x - 100;
   operationsPos.y = d.y - 70;
   if (d.layer === String(dashboardStore.layerId)) {
     return;
@@ -255,7 +255,7 @@ function handleLinkClick(event: any, d: Call) {
     entity: `${e}Relation`,
   });
   dashboardStore.setEntity(p.entity);
-  const path = `/dashboard/${p.layer}/${e}Relation/${d.source.id}/${d.target.id}/${p.name}`;
+  const path = `/dashboard/related/${p.layer}/${e}Relation/${d.source.id}/${d.target.id}/${p.name}`;
   const routeUrl = router.resolve({ path });
   window.open(routeUrl.href, "_blank");
   dashboardStore.setEntity(origin);
@@ -532,7 +532,7 @@ watch(
   () => appStore.durationTime,
   () => {
     if (dashboardStore.entity === EntityType[1].value) {
-      init();
+      freshNodes();
     }
   }
 );
diff --git a/vue.config.js b/vue.config.js
index 34c78642..4d3e7fa4 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -26,6 +26,10 @@ module.exports = {
     },
   },
   chainWebpack: (config) => {
+    config.plugin("html").tap((args) => {
+      args[0].title = "Apache SkyWalking";
+      return args;
+    });
     const svgRule = config.module.rule("svg");
     svgRule.uses.clear();
     svgRule