mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-07-16 14:45:23 +00:00
update topology
This commit is contained in:
Qiuxia Fan
parent
597e98e291
commit
09dec775d9
@ -92,8 +92,7 @@ export const dashboardStore = defineStore({
|
||||
];
|
||||
}
|
||||
if (type === "Topology") {
|
||||
newItem.w = 4;
|
||||
newItem.h = 6;
|
||||
newItem.h = 36;
|
||||
newItem.graph = {
|
||||
fontColor: "white",
|
||||
backgroundColor: "green",
|
||||
|
||||
@ -27,17 +27,7 @@ limitations under the License. -->
|
||||
:destroy-on-close="true"
|
||||
@closed="dashboardStore.setConfigPanel(false)"
|
||||
>
|
||||
<TopologyConfig v-if="dashboardStore.selectedGrid.type === 'Topology'" />
|
||||
<Widget v-else />
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
v-model="dashboardStore.showTopology"
|
||||
:destroy-on-close="true"
|
||||
fullscreen
|
||||
@closed="dashboardStore.setTopology(false)"
|
||||
custom-class="dark-dialog"
|
||||
>
|
||||
<Topology />
|
||||
<Widget />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@ -48,8 +38,6 @@ import { useRoute } from "vue-router";
|
||||
import GridLayout from "./panel/Layout.vue";
|
||||
import Tool from "./panel/Tool.vue";
|
||||
import Widget from "./configuration/Widget.vue";
|
||||
import TopologyConfig from "./configuration/Topology.vue";
|
||||
import Topology from "./related/topology/Index.vue";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
|
||||
|
||||
@ -122,7 +122,6 @@ import router from "@/router";
|
||||
import { DashboardItem } from "@/types/dashboard";
|
||||
import { saveFile, readFile } from "@/utils/file";
|
||||
import { EntityType } from "./data";
|
||||
import { findLastKey } from "lodash";
|
||||
|
||||
/*global Nullable*/
|
||||
const { t } = useI18n();
|
||||
|
||||
@ -1,52 +0,0 @@
|
||||
<!-- 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. -->
|
||||
<template>
|
||||
<WidgetOptions />
|
||||
<StyleOptions />
|
||||
<div class="footer">
|
||||
<el-button size="small">
|
||||
{{ t("cancel") }}
|
||||
</el-button>
|
||||
<el-button size="small" type="primary" @click="applyConfig">
|
||||
{{ t("apply") }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { useI18n } from "vue-i18n";
|
||||
import WidgetOptions from "./components/WidgetOptions.vue";
|
||||
import StyleOptions from "./topology/StyleOptions.vue";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
|
||||
function applyConfig() {
|
||||
dashboardStore.setConfigs(dashboardStore.selectedGrid);
|
||||
dashboardStore.setConfigPanel(false);
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-top: 1px solid #eee;
|
||||
padding: 10px;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
@ -1,151 +0,0 @@
|
||||
<!-- 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. -->
|
||||
<template>
|
||||
<div class="item">
|
||||
<span class="label">{{ t("backgroundColors") }}</span>
|
||||
<Selector
|
||||
:value="backgroundColor"
|
||||
:options="colors"
|
||||
size="small"
|
||||
placeholder="Select a color"
|
||||
class="input"
|
||||
@change="changeConfig({ backgroundColor: $event[0].value })"
|
||||
/>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">{{ t("fontSize") }}</span>
|
||||
<el-slider
|
||||
class="slider"
|
||||
v-model="fontSize"
|
||||
show-input
|
||||
input-size="small"
|
||||
:min="12"
|
||||
:max="30"
|
||||
:step="1"
|
||||
@change="changeConfig({ fontSize })"
|
||||
/>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">{{ t("fontColors") }}</span>
|
||||
<Selector
|
||||
:value="fontColor"
|
||||
:options="colors"
|
||||
size="small"
|
||||
placeholder="Select a color"
|
||||
class="input"
|
||||
@change="changeConfig({ fontColor: $event[0].value })"
|
||||
/>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">{{ t("iconTheme") }}</span>
|
||||
<el-switch
|
||||
v-model="iconTheme"
|
||||
active-text="Light"
|
||||
inactive-text="Dark"
|
||||
@change="changeConfig({ iconTheme })"
|
||||
/>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">{{ t("content") }}</span>
|
||||
<el-input
|
||||
class="input"
|
||||
v-model="content"
|
||||
size="small"
|
||||
@change="changeConfig({ content })"
|
||||
/>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">{{ t("showDepth") }}</span>
|
||||
<el-switch
|
||||
v-model="showDepth"
|
||||
active-text="Yes"
|
||||
inactive-text="No"
|
||||
@change="changeConfig({ showDepth })"
|
||||
/>
|
||||
</div>
|
||||
<div class="item" v-show="showDepth">
|
||||
<span class="label">{{ t("defaultDepth") }}</span>
|
||||
<Selector
|
||||
class="input"
|
||||
size="small"
|
||||
:value="depth"
|
||||
:options="DepthList"
|
||||
@change="changeDepth($event)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ref } from "vue";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { DepthList } from "../../data";
|
||||
import { Option } from "@/types/app";
|
||||
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const { selectedGrid } = dashboardStore;
|
||||
const iconTheme = ref(selectedGrid.graph.iconTheme || true);
|
||||
const backgroundColor = ref(selectedGrid.graph.backgroundColor || "green");
|
||||
const fontColor = ref(selectedGrid.graph.fontColor || "white");
|
||||
const content = ref<string>(selectedGrid.graph.content);
|
||||
const fontSize = ref<number>(selectedGrid.graph.fontSize);
|
||||
const depth = ref<string>(selectedGrid.graph.depth || "2");
|
||||
const showDepth = ref<boolean>(selectedGrid.graph.showDepth);
|
||||
const colors = [
|
||||
{
|
||||
label: "Green",
|
||||
value: "green",
|
||||
},
|
||||
{ label: "Blue", value: "blue" },
|
||||
{ label: "Red", value: "red" },
|
||||
{ label: "Grey", value: "grey" },
|
||||
{ label: "White", value: "white" },
|
||||
{ label: "Black", value: "black" },
|
||||
{ label: "Orange", value: "orange" },
|
||||
];
|
||||
function changeConfig(param: { [key: string]: unknown }) {
|
||||
const { selectedGrid } = dashboardStore;
|
||||
const graph = {
|
||||
...selectedGrid.graph,
|
||||
...param,
|
||||
};
|
||||
dashboardStore.selectWidget({ ...selectedGrid, graph });
|
||||
}
|
||||
function changeDepth(opt: Option[]) {
|
||||
const val = opt[0].value;
|
||||
changeConfig({ depth: val });
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.slider {
|
||||
width: 500px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -97,6 +97,7 @@ limitations under the License. -->
|
||||
:key="item.i"
|
||||
@click="clickTabGrid($event, item)"
|
||||
:class="{ active: activeTabWidget === item.i }"
|
||||
drag-ignore-from="svg.d3-trace-tree, .dragger, .micro-topo-chart"
|
||||
>
|
||||
<component
|
||||
:is="item.type"
|
||||
|
||||
@ -13,58 +13,23 @@ 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="topology">
|
||||
<div class="header flex-h">
|
||||
<div>{{ data.widget?.title || "" }}</div>
|
||||
<div>
|
||||
<el-tooltip :content="data.widget?.tips">
|
||||
<span>
|
||||
<Icon
|
||||
iconName="info_outline"
|
||||
size="sm"
|
||||
class="operation"
|
||||
v-show="data.widget?.tips"
|
||||
/>
|
||||
</span>
|
||||
</el-tooltip>
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
trigger="click"
|
||||
:width="100"
|
||||
v-if="routeParams.entity"
|
||||
>
|
||||
<template #reference>
|
||||
<span>
|
||||
<Icon iconName="ellipsis_v" size="middle" class="operation" />
|
||||
</span>
|
||||
</template>
|
||||
<div class="tools" @click="editConfig">
|
||||
<span>{{ t("edit") }}</span>
|
||||
</div>
|
||||
<div class="tools" @click="removeTopo">
|
||||
<span>{{ t("delete") }}</span>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="body"
|
||||
@click="ViewTopology"
|
||||
:style="{ backgroundColor: Colors[data.graph.backgroundColor] }"
|
||||
<div class="topology flex-v">
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
trigger="click"
|
||||
:width="100"
|
||||
v-if="routeParams.entity"
|
||||
>
|
||||
<Icon
|
||||
:iconName="data.graph.iconTheme ? 'topology-light' : 'topology-dark'"
|
||||
size="middle"
|
||||
/>
|
||||
<div
|
||||
:style="{
|
||||
color: Colors[data.graph.fontColor],
|
||||
fontSize: data.graph.fontSize + 'px',
|
||||
}"
|
||||
>
|
||||
{{ data.graph.content }}
|
||||
<template #reference>
|
||||
<span class="delete cp">
|
||||
<Icon iconName="ellipsis_v" size="middle" class="operation" />
|
||||
</span>
|
||||
</template>
|
||||
<div class="tools" @click="removeTopo">
|
||||
<span>{{ t("delete") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
<Topology />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
@ -72,7 +37,7 @@ import type { PropType } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { Colors } from "../data";
|
||||
import Topology from "../related/topology/Index.vue";
|
||||
/*global defineProps */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
@ -85,33 +50,29 @@ const { t } = useI18n();
|
||||
const routeParams = useRoute().params;
|
||||
const dashboardStore = useDashboardStore();
|
||||
|
||||
function editConfig() {
|
||||
dashboardStore.setConfigPanel(true);
|
||||
dashboardStore.selectWidget(props.data);
|
||||
}
|
||||
function ViewTopology() {
|
||||
dashboardStore.setTopology(true);
|
||||
}
|
||||
function removeTopo() {
|
||||
dashboardStore.removeControls(props.data);
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.topology {
|
||||
font-size: 12px;
|
||||
height: 100%;
|
||||
background-color: #333840;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.delete {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 3px;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 30px;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #eee;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.operation {
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
.tools {
|
||||
@ -127,19 +88,6 @@ function removeTopo() {
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: calc(100% - 30px);
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
color: #333;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-box-align: center;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
|
||||
@ -31,7 +31,7 @@ limitations under the License. -->
|
||||
:key="item.i"
|
||||
@click="clickGrid(item)"
|
||||
:class="{ active: dashboardStore.activedGridItem === item.i }"
|
||||
drag-ignore-from="svg.d3-trace-tree, .dragger"
|
||||
drag-ignore-from="svg.d3-trace-tree, .dragger, .micro-topo-chart"
|
||||
>
|
||||
<component :is="item.type" :data="item" />
|
||||
</grid-item>
|
||||
|
||||
@ -453,7 +453,7 @@ async function freshNodes() {
|
||||
update();
|
||||
}
|
||||
|
||||
async function changeDepth(opt: Option[]) {
|
||||
async function changeDepth(opt: Option[] | any) {
|
||||
depth.value = opt[0].value;
|
||||
await getTopology();
|
||||
freshNodes();
|
||||
@ -463,8 +463,16 @@ onBeforeUnmount(() => {
|
||||
});
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.topo-svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.micro-topo-chart {
|
||||
position: relative;
|
||||
height: calc(100% - 40px);
|
||||
overflow: auto;
|
||||
|
||||
.setting {
|
||||
position: absolute;
|
||||
@ -510,8 +518,8 @@ onBeforeUnmount(() => {
|
||||
|
||||
.tool {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
right: 0;
|
||||
top: 35px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.switch-icon {
|
||||
@ -524,11 +532,6 @@ onBeforeUnmount(() => {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.topo-svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.topo-line {
|
||||
stroke-linecap: round;
|
||||
stroke-width: 3px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user