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

fix: polish the network profiling widget, bugfix (#151)

Browse Source
This commit is contained in:
Fine0830 2022-08-30 13:20:45 +08:00 committed by GitHub
parent d8889f1787
commit b88356ba46
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 25 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/views/dashboard/related/network-profiling/Content.vue
View File

@ -15,15 +15,14 @@ limitations under the License. -->
<template> <template>
<div class="flex-h content"> <div class="flex-h content">
<Tasks /> <Tasks />
<div <div class="vis-graph ml-5" v-loading="networkProfilingStore.loadNodes">
class="vis-graph ml-5" <process-topology
v-if="networkProfilingStore.nodes.length" v-if="networkProfilingStore.nodes.length"
v-loading="networkProfilingStore.loadNodes" :config="config"
> />
<process-topology :config="config" /> <div class="text" v-else>
</div> {{ t("noData") }}
<div class="text" v-else v-loading="networkProfilingStore.loadNodes"> </div>
{{ t("noData") }}
</div> </div>
</div> </div>
</template> </template>
@ -60,7 +59,7 @@ const { t } = useI18n();
} }
.text { .text {
width: calc(100% - 330px); width: 100%;
text-align: center; text-align: center;
margin-top: 30px; margin-top: 30px;
} }

8
src/views/dashboard/related/network-profiling/components/Graph/linkProcess.ts
View File

@ -30,7 +30,10 @@ export const linkElement = (graph: any) => {
0.5 0.5
); );
if (d.lowerArc) { if (d.lowerArc) {
controlPos[1] = -controlPos[1] - 10; controlPos[1] =
Math.abs(controlPos[1]) < 50
? -controlPos[1] + 90
: -controlPos[1] - 10;
} }
return ( return (
"M" + "M" +
@ -141,7 +144,8 @@ function getMidpoint(d: Call) {
0.5 0.5
); );
if (d.lowerArc) { if (d.lowerArc) {
controlPos[1] = -controlPos[1]; controlPos[1] =
Math.abs(controlPos[1]) < 50 ? -controlPos[1] + 100 : -controlPos[1] - 10;
} }
const p = quadraticBezier( const p = quadraticBezier(
0.5, 0.5,

16
src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
View File

@ -14,14 +14,14 @@ See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div ref="chart" class="process-topo"></div> <div ref="chart" class="process-topo"></div>
<el-popover placement="bottom" :width="295" trigger="click"> <el-popover
placement="bottom"
:width="295"
trigger="click"
v-if="dashboardStore.editMode"
>
<template #reference> <template #reference>
<div <div class="switch-icon-edit ml-5" title="Settings" @click="setConfig">
class="switch-icon-edit ml-5"
title="Settings"
@click="setConfig"
v-if="dashboardStore.editMode"
>
<Icon size="middle" iconName="setting_empty" /> <Icon size="middle" iconName="setting_empty" />
</div> </div>
</template> </template>
@ -76,7 +76,7 @@ const link = ref<any>(null);
const anchor = ref<any>(null); const anchor = ref<any>(null);
const arrow = ref<any>(null); const arrow = ref<any>(null);
const oldVal = ref<{ width: number; height: number }>({ width: 0, height: 0 }); const oldVal = ref<{ width: number; height: number }>({ width: 0, height: 0 });
const config = ref<any>({}); const config = ref<any>(props.config || {});
const diff = ref<number[]>([220, 200]); const diff = ref<number[]>([220, 200]);
const radius = 210; const radius = 210;
const dates = ref<Nullable<{ start: number; end: number }>>(null); const dates = ref<Nullable<{ start: number; end: number }>>(null);

3
src/views/dashboard/related/network-profiling/components/Settings.vue
View File

@ -62,9 +62,10 @@ function getDashboards() {
} }
function changeLinkDashboard(opt: { value: string }[]) { function changeLinkDashboard(opt: { value: string }[]) {
const linkDashboard = opt.length ? opt[0].value : "";
const p = { const p = {
...dashboardStore.selectedGrid, ...dashboardStore.selectedGrid,
linkDashboard: opt[0].value, linkDashboard,
}; };
dashboardStore.selectWidget(p); dashboardStore.selectWidget(p);
dashboardStore.setConfigs(p); dashboardStore.setConfigs(p);