You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by wu...@apache.org on 2022/03/28 06:15:04 UTC
[skywalking-booster-ui] branch main updated: fix: update sidebar, topology, table, title, router (#42)
This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git
The following commit(s) were added to refs/heads/main by this push:
new d78ca0c fix: update sidebar, topology, table, title, router (#42)
d78ca0c is described below
commit d78ca0cd4be27931340f2d9a526a87a0e1efff0e
Author: Fine0830 <fi...@outlook.com>
AuthorDate: Mon Mar 28 14:14:59 2022 +0800
fix: update sidebar, topology, table, title, router (#42)
---
src/assets/icons/version.svg | 15 ++
src/components/Icon.vue | 4 +-
src/layout/components/SideBar.vue | 205 ++++++++++-----------
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, 169 insertions(+), 178 deletions(-)
diff --git a/src/assets/icons/version.svg b/src/assets/icons/version.svg
new file mode 100644
index 0000000..fba6967
--- /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.80 [...]
\ No newline at end of file
diff --git a/src/components/Icon.vue b/src/components/Icon.vue
index e780541..7848aac 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 1316cde..6649c74 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' }">
+ <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="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"
+ >
+ <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" />
- </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"
- >
+ </router-link>
+ </el-icon>
+ <template #title>
<router-link
class="items"
- :to="m.path"
- :exact="m.meta.exact || false"
+ :to="menu.children[0].path"
+ :exact="menu.meta.exact"
>
- <span>{{ t(m.meta.title) }}</span>
+ <span>{{ 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>
+ </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 01105f9..bfb91d2 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 b65abdb..9869e76 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 1191915..f96484f 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 f918ae2..7151128 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 4423601..5b561df 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 36d8f50..66a0ea2 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 d5476d0..b3823d1 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 f1f84b3..2186e5b 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 34c7864..4d3e7fa 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