github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-02 10:34:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: update sidebar, topology, table, title, router (#42)

Browse Source
This commit is contained in:
Fine0830 2022-03-28 14:14:59 +08:00 committed by GitHub
parent 2167b4afd5
commit d78ca0cd4b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 170 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/assets/icons/version.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

4
src/components/Icon.vue
View File

@ -55,8 +55,8 @@ defineProps({
} }
&.lg { &.lg {
width: 24px; width: 22px;
height: 24px; height: 22px;
} }
&.loading { &.loading {

207
src/layout/components/SideBar.vue
View File

@ -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 See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div class="side-bar"> <div class="side-bar flex-v">
<div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'"> <div>
<Icon <div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'">
:size="isCollapse ? 'xl' : 'logo'" <Icon
:iconName="isCollapse ? 'logo' : 'logo-sw'" :size="isCollapse ? 'xl' : 'logo'"
/> :iconName="isCollapse ? 'logo' : 'logo-sw'"
</div> />
<el-menu </div>
active-text-color="#448dfe" <el-menu
background-color="#252a2f" active-text-color="#448dfe"
class="el-menu-vertical" background-color="#252a2f"
:default-active="name" class="el-menu-vertical"
text-color="#efefef" :default-active="name"
:unique-opened="true" text-color="#efefef"
:collapse="isCollapse" :unique-opened="true"
:style="{ border: 'none' }" :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 v-for="(menu, index) in routes" :key="index">
<template #title> <el-sub-menu :index="String(menu.name)" v-if="menu.meta.hasGroup">
<router-link <template #title>
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 <router-link
class="items" class="items"
:to="m.path" :to="menu.path"
:exact="m.meta.exact || false" :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> </router-link>
</el-menu-item> </template>
</el-menu-item-group> <el-menu-item-group>
</el-sub-menu> <el-menu-item
<el-menu-item v-for="(m, idx) in filterMenus(menu.children)"
:index="String(menu.name)" :index="m.name"
@click="changePage(menu)" :key="idx"
v-else >
> <router-link
<el-icon class="menu-icons" :style="{ marginRight: '12px' }"> class="items"
<router-link :to="m.path"
class="items" :exact="m.meta.exact || false"
:to="menu.children[0].path" >
:exact="menu.meta.exact" <span>{{ t(m.meta.title) }}</span>
> </router-link>
<Icon size="lg" :iconName="menu.meta.icon" /> </el-menu-item>
</router-link> </el-menu-item-group>
</el-icon> </el-sub-menu>
<template #title> <el-menu-item
<router-link :index="String(menu.name)"
class="items" @click="changePage(menu)"
:to="menu.children[0].path" v-else
:exact="menu.meta.exact" >
> <el-icon class="menu-icons" :style="{ marginRight: '12px' }">
<span>{{ t(menu.meta.title) }}</span> <router-link
</router-link> class="items"
</template> :to="menu.children[0].path"
</el-menu-item> :exact="menu.meta.exact"
</template> >
</el-menu> <Icon size="lg" :iconName="menu.meta.icon" />
<div </router-link>
class="menu-control" </el-icon>
:class="isCollapse ? 'collapse' : ''" <template #title>
:style="{ <router-link
color: theme === 'light' ? '#eee' : '#252a2f', class="items"
}" :to="menu.children[0].path"
> :exact="menu.meta.exact"
<Icon >
size="middle" <span>{{ t(menu.meta.title) }}</span>
iconName="format_indent_decrease" </router-link>
@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>
<div class="version"> <div class="version">
<el-popover <el-popover
@ -109,7 +111,9 @@ limitations under the License. -->
:content="appStore.version" :content="appStore.version"
> >
<template #reference> <template #reference>
{{ t("version") }} <span>
<Icon iconName="version" size="middle" />
</span>
</template> </template>
</el-popover> </el-popover>
</div> </div>
@ -122,6 +126,7 @@ import { useRouter, RouteRecordRaw } from "vue-router";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useAppStoreWithOut } from "@/store/modules/app"; import { useAppStoreWithOut } from "@/store/modules/app";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import Icon from "@/components/Icon.vue";
const appStore = useAppStoreWithOut(); const appStore = useAppStoreWithOut();
const { t } = useI18n(); const { t } = useI18n();
@ -154,19 +159,22 @@ async function getVersion() {
<style lang="scss" scoped> <style lang="scss" scoped>
.side-bar { .side-bar {
position: relative; position: relative;
height: 100%;
background: #252a2f; 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) { .el-menu-vertical:not(.el-menu--collapse) {
width: 210px; width: 200px;
font-size: 18px; font-size: 16px;
} }
.logo-icon-collapse { .logo-icon-collapse {
width: 65px; width: 65px;
margin: 15px 0 30px 0; margin: 15px 0 10px 0;
text-align: center; text-align: center;
} }
@ -179,24 +187,14 @@ span.collapse {
} }
.logo-icon { .logo-icon {
margin: 15px 0 30px 15px; margin: 15px 0 10px 20px;
width: 110px; width: 110px;
} }
.el-sub-menu .el-icon {
height: 26px;
margin-right: 0;
}
.el-sub-menu__title {
font-size: 16px;
font-weight: bold;
}
.menu-control { .menu-control {
position: absolute; position: fixed;
top: 8px; top: 8px;
left: 215px; left: 200px;
cursor: pointer; cursor: pointer;
transition: all 0.2s linear; transition: all 0.2s linear;
z-index: 99; z-index: 99;
@ -218,10 +216,9 @@ span.collapse {
.version { .version {
color: #eee; color: #eee;
position: fixed;
bottom: 20px;
left: 20px;
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
padding-left: 23px;
margin-bottom: 10px;
} }
</style> </style>

2
src/router/dashboard.ts
View File

@ -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"), component: () => import("@/views/dashboard/Edit.vue"),
name: "ViewServiceRelation", name: "ViewServiceRelation",
meta: { meta: {

18
src/styles/reset.scss
View File

@ -123,3 +123,21 @@ code,
pre { pre {
font-family: Consolas, Menlo, Courier, monospace; 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;
}

4
src/views/dashboard/graphs/EndpointList.vue
View File

@ -117,8 +117,8 @@ const selectorStore = useSelectorStore();
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const chartLoading = ref<boolean>(false); const chartLoading = ref<boolean>(false);
const endpoints = ref<Endpoint[]>([]); const endpoints = ref<Endpoint[]>([]);
const pageSize = 5; const pageSize = 15;
const total = 10; const total = 15;
const searchText = ref<string>(""); const searchText = ref<string>("");
queryEndpoints(total); queryEndpoints(total);

2
src/views/dashboard/graphs/InstanceList.vue
View File

@ -143,7 +143,7 @@ const dashboardStore = useDashboardStore();
const chartLoading = ref<boolean>(false); const chartLoading = ref<boolean>(false);
const instances = ref<Instance[]>([]); // current instances const instances = ref<Instance[]>([]); // current instances
const searchInstances = ref<Instance[]>([]); // all instances const searchInstances = ref<Instance[]>([]); // all instances
const pageSize = 5; const pageSize = 15;
const searchText = ref<string>(""); const searchText = ref<string>("");
queryInstance(); queryInstance();

2
src/views/dashboard/graphs/ServiceList.vue
View File

@ -128,7 +128,7 @@ const props = defineProps({
const selectorStore = useSelectorStore(); const selectorStore = useSelectorStore();
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const chartLoading = ref<boolean>(false); const chartLoading = ref<boolean>(false);
const pageSize = 5; const pageSize = 15;
const services = ref<Service[]>([]); const services = ref<Service[]>([]);
const searchText = ref<string>(""); const searchText = ref<string>("");
const groups = ref<any>({}); const groups = ref<any>({});

82
src/views/dashboard/graphs/Table.vue
View File

@ -15,41 +15,28 @@ limitations under the License. -->
<template> <template>
<div class="chart-table"> <div class="chart-table">
<div ref="chartTable"> <div class="row header flex-h">
<div <div class="name" :style="`width: ${nameWidth}`">
class="row header flex-h" {{ config.tableHeaderCol1 || t("name") }}
: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> </div>
<div <div class="value-col" v-if="config.showTableValues">
class="row flex-h" {{ config.tableHeaderCol2 || t("value") }}
v-for="key in dataKeys" </div>
:key="key" </div>
:style="`width: ${nameWidth + initWidth}px`" <div class="row flex-h" v-for="key in dataKeys" :key="key">
> <div class="name" :style="`width: ${nameWidth}`">{{ key }}</div>
<div :style="`width: ${nameWidth}px`">{{ key }}</div> <div class="value-col" v-if="config.showTableValues">
<div class="value-col" v-if="showTableValues"> {{
{{ config.metricTypes[0] === "readMetricsValue"
config.metricTypes[0] === "readMetricsValue" ? data[key]
? data[key] : data[key][data[key].length - 1 || 0]
: data[key][data[key].length - 1 || 0] }}
}}
</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref, onMounted } from "vue"; import { computed } from "vue";
import type { PropType } from "vue"; import type { PropType } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
/*global defineProps */ /*global defineProps */
@ -69,40 +56,10 @@ const props = defineProps({
}, },
}); });
/*global Nullable*/
const { t } = useI18n(); const { t } = useI18n();
const chartTable = ref<Nullable<HTMLElement>>(null); const nameWidth = computed(() =>
const initWidth = ref<number>(0); props.config.showTableValues ? "80%" : "100%"
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 dataKeys = computed(() => { const dataKeys = computed(() => {
if (props.config.metricTypes[0] === "readMetricsValue") { if (props.config.metricTypes[0] === "readMetricsValue") {
const keys = Object.keys(props.data || {}); const keys = Object.keys(props.data || {});
@ -127,6 +84,7 @@ const dataKeys = computed(() => {
.row { .row {
border-left: 1px solid #ccc; border-left: 1px solid #ccc;
height: 20px; height: 20px;
width: 100%;
div { div {
overflow: hidden; overflow: hidden;

1
src/views/dashboard/panel/Tool.vue
View File

@ -98,7 +98,6 @@ limitations under the License. -->
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { reactive, ref } from "vue"; import { reactive, ref } from "vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";

8
src/views/dashboard/related/topology/components/Graph.vue
View File

@ -153,7 +153,7 @@ async function init() {
graph.value = svg.value graph.value = svg.value
.append("g") .append("g")
.attr("class", "topo-svg-graph") .attr("class", "topo-svg-graph")
.attr("transform", `translate(0, -100)`); .attr("transform", `translate(-100, -100)`);
graph.value.call(tip.value); graph.value.call(tip.value);
simulation.value = simulationInit( simulation.value = simulationInit(
d3, d3,
@ -221,7 +221,7 @@ function dragended(d: any) {
function handleNodeClick(d: Node & { x: number; y: number }) { function handleNodeClick(d: Node & { x: number; y: number }) {
topologyStore.setNode(d); topologyStore.setNode(d);
topologyStore.setLink(null); topologyStore.setLink(null);
operationsPos.x = d.x; operationsPos.x = d.x - 100;
operationsPos.y = d.y - 70; operationsPos.y = d.y - 70;
if (d.layer === String(dashboardStore.layerId)) { if (d.layer === String(dashboardStore.layerId)) {
return; return;
@ -255,7 +255,7 @@ function handleLinkClick(event: any, d: Call) {
entity: `${e}Relation`, entity: `${e}Relation`,
}); });
dashboardStore.setEntity(p.entity); 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 }); const routeUrl = router.resolve({ path });
window.open(routeUrl.href, "_blank"); window.open(routeUrl.href, "_blank");
dashboardStore.setEntity(origin); dashboardStore.setEntity(origin);
@ -532,7 +532,7 @@ watch(
() => appStore.durationTime, () => appStore.durationTime,
() => { () => {
if (dashboardStore.entity === EntityType[1].value) { if (dashboardStore.entity === EntityType[1].value) {
init(); freshNodes();
} }
} }
); );

4
vue.config.js
View File

@ -26,6 +26,10 @@ module.exports = {
}, },
}, },
chainWebpack: (config) => { chainWebpack: (config) => {
config.plugin("html").tap((args) => {
args[0].title = "Apache SkyWalking";
return args;
});
const svgRule = config.module.rule("svg"); const svgRule = config.module.rule("svg");
svgRule.uses.clear(); svgRule.uses.clear();
svgRule svgRule