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

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

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>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

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

View File

@ -13,7 +13,8 @@ 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="side-bar flex-v">
<div>
<div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'">
<Icon
:size="isCollapse ? 'xl' : 'logo'"
@ -101,6 +102,7 @@ limitations under the License. -->
@click="controlMenu"
/>
</div>
</div>
<div class="version">
<el-popover
trigger="hover"
@ -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>

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"),
name: "ViewServiceRelation",
meta: {

View File

@ -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;
}

View File

@ -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);

View File

@ -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();

View File

@ -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>({});

View File

@ -15,29 +15,17 @@ 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`">
<div class="row header flex-h">
<div class="name" :style="`width: ${nameWidth}`">
{{ 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">
<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"
:style="`width: ${nameWidth + initWidth}px`"
>
<div :style="`width: ${nameWidth}px`">{{ key }}</div>
<div class="value-col" v-if="showTableValues">
<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]
@ -46,10 +34,9 @@ limitations under the License. -->
</div>
</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;

View File

@ -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";

View File

@ -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();
}
}
);

View File

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