mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-01 17:03:42 +00:00
feat: save and init topology templates (#32)
This commit is contained in:
Fine0830
GitHub
parent
f1e405fbb4
commit
f9aacb72e1
@ -115,7 +115,7 @@ const msg = {
|
||||
rename: "重命名",
|
||||
selfObservability: "自观性",
|
||||
satellite: "Satellite",
|
||||
skyWalkingServer: "Sky Walking服务",
|
||||
skyWalkingServer: "SkyWalking服务",
|
||||
functions: "Functions",
|
||||
linux: "Linux",
|
||||
browser: "浏览器",
|
||||
|
||||
@ -23,6 +23,8 @@ import { useSelectorStore } from "@/store/modules/selectors";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { AxiosResponse } from "axios";
|
||||
import query from "@/graphql/fetch";
|
||||
import { useQueryTopologyMetrics } from "@/hooks/useProcessor";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
interface MetricVal {
|
||||
[key: string]: { values: { id: string; value: unknown }[] };
|
||||
@ -32,7 +34,7 @@ interface TopologyState {
|
||||
call: Nullable<Call>;
|
||||
calls: Call[];
|
||||
nodes: Node[];
|
||||
nodeMetrics: MetricVal;
|
||||
nodeMetricValue: MetricVal;
|
||||
linkServerMetrics: MetricVal;
|
||||
linkClientMetrics: MetricVal;
|
||||
}
|
||||
@ -44,7 +46,7 @@ export const topologyStore = defineStore({
|
||||
nodes: [],
|
||||
node: null,
|
||||
call: null,
|
||||
nodeMetrics: {},
|
||||
nodeMetricValue: {},
|
||||
linkServerMetrics: {},
|
||||
linkClientMetrics: {},
|
||||
}),
|
||||
@ -103,8 +105,8 @@ export const topologyStore = defineStore({
|
||||
this.calls = calls;
|
||||
this.nodes = nodes;
|
||||
},
|
||||
setNodeMetrics(m: { id: string; value: unknown }[]) {
|
||||
this.nodeMetrics = m;
|
||||
setNodeMetricValue(m: { id: string; value: unknown }[]) {
|
||||
this.nodeMetricValue = m;
|
||||
},
|
||||
setLinkServerMetrics(m: { id: string; value: unknown }[]) {
|
||||
this.linkServerMetrics = m;
|
||||
@ -388,7 +390,7 @@ export const topologyStore = defineStore({
|
||||
|
||||
return { calls, nodes };
|
||||
},
|
||||
async getNodeMetrics(param: {
|
||||
async getNodeMetricValue(param: {
|
||||
queryStr: string;
|
||||
conditions: { [key: string]: unknown };
|
||||
}) {
|
||||
@ -397,9 +399,52 @@ export const topologyStore = defineStore({
|
||||
if (res.data.errors) {
|
||||
return res.data;
|
||||
}
|
||||
this.setNodeMetrics(res.data.data);
|
||||
this.setNodeMetricValue(res.data.data);
|
||||
return res.data;
|
||||
},
|
||||
async getLinkClientMetrics(linkClientMetrics: string[]) {
|
||||
if (!linkClientMetrics.length) {
|
||||
this.setLinkClientMetrics({});
|
||||
return;
|
||||
}
|
||||
const idsC = this.calls
|
||||
.filter((i: Call) => i.detectPoints.includes("CLIENT"))
|
||||
.map((b: Call) => b.id);
|
||||
const param = await useQueryTopologyMetrics(linkClientMetrics, idsC);
|
||||
const res = await this.getCallClientMetrics(param);
|
||||
|
||||
if (res.errors) {
|
||||
ElMessage.error(res.errors);
|
||||
}
|
||||
},
|
||||
async getLinkServerMetrics(linkServerMetrics: string[]) {
|
||||
if (!linkServerMetrics.length) {
|
||||
this.setLinkServerMetrics({});
|
||||
return;
|
||||
}
|
||||
const idsS = this.calls
|
||||
.filter((i: Call) => i.detectPoints.includes("SERVER"))
|
||||
.map((b: Call) => b.id);
|
||||
const param = await useQueryTopologyMetrics(linkServerMetrics, idsS);
|
||||
const res = await this.getCallServerMetrics(param);
|
||||
|
||||
if (res.errors) {
|
||||
ElMessage.error(res.errors);
|
||||
}
|
||||
},
|
||||
async queryNodeMetrics(nodeMetrics: string[]) {
|
||||
if (!nodeMetrics.length) {
|
||||
this.setNodeMetricValue({});
|
||||
return;
|
||||
}
|
||||
const ids = this.nodes.map((d: Node) => d.id);
|
||||
const param = await useQueryTopologyMetrics(nodeMetrics, ids);
|
||||
const res = await this.getNodeMetricValue(param);
|
||||
|
||||
if (res.errors) {
|
||||
ElMessage.error(res.errors);
|
||||
}
|
||||
},
|
||||
async getLegendMetrics(param: {
|
||||
queryStr: string;
|
||||
conditions: { [key: string]: unknown };
|
||||
|
||||
@ -46,7 +46,9 @@ limitations under the License. -->
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="name" label="Name">
|
||||
<template #default="scope">
|
||||
<span @click="handleView(scope.row)">{{ scope.row.name }}</span>
|
||||
<span class="cp" @click="handleView(scope.row)">{{
|
||||
scope.row.name
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="layer" label="Layer" width="200" />
|
||||
|
||||
@ -53,8 +53,9 @@ limitations under the License. -->
|
||||
>
|
||||
<Icon
|
||||
class="cp mr-5"
|
||||
v-show="
|
||||
index === states.metrics.length - 1 && states.metrics.length < 5
|
||||
v-if="
|
||||
index === states.metrics.length - 1 &&
|
||||
states.metrics.length < defaultLen
|
||||
"
|
||||
iconName="add_circle_outlinecontrol_point"
|
||||
size="middle"
|
||||
@ -84,7 +85,7 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive } from "vue";
|
||||
import { reactive, ref } from "vue";
|
||||
import { Option } from "@/types/app";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import {
|
||||
@ -128,6 +129,7 @@ const states = reactive<{
|
||||
});
|
||||
|
||||
states.isList = ListChartTypes.includes(graph.type);
|
||||
const defaultLen = ref<number>(states.isList ? 5 : 10);
|
||||
states.visTypes = setVisTypes();
|
||||
|
||||
setDashboards();
|
||||
@ -241,10 +243,12 @@ function changeChartType(item: Option) {
|
||||
});
|
||||
states.metrics = [""];
|
||||
states.metricTypes = [""];
|
||||
defaultLen.value = 5;
|
||||
}
|
||||
setMetricType();
|
||||
setDashboards();
|
||||
states.dashboardName = "";
|
||||
defaultLen.value = 10;
|
||||
}
|
||||
|
||||
function changeMetrics(
|
||||
|
||||
@ -35,7 +35,7 @@ limitations under the License. -->
|
||||
<template #default="scope">
|
||||
<span
|
||||
class="link"
|
||||
@click="clickEndpoint"
|
||||
@click="clickEndpoint(scope)"
|
||||
:style="{ fontSize: `${config.fontSize}px` }"
|
||||
>
|
||||
{{ scope.row.label }}
|
||||
|
||||
@ -35,7 +35,7 @@ limitations under the License. -->
|
||||
<template #default="scope">
|
||||
<span
|
||||
class="link"
|
||||
@click="clickInstance"
|
||||
@click="clickInstance(scope)"
|
||||
:style="{ fontSize: `${config.fontSize}px` }"
|
||||
>
|
||||
{{ scope.row.label }}
|
||||
|
||||
@ -13,12 +13,11 @@ 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>
|
||||
<PodTopology :config="config" v-if="isSankey" />
|
||||
<Graph :config="config" v-else />
|
||||
<Graph :config="config" v-if="isService" />
|
||||
<PodTopology :config="config" v-else />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { PropType } from "vue";
|
||||
import { ref } from "vue";
|
||||
import Graph from "./components/Graph.vue";
|
||||
import PodTopology from "./components/PodTopology.vue";
|
||||
import { EntityType } from "../../data";
|
||||
@ -32,7 +31,7 @@ defineProps({
|
||||
},
|
||||
});
|
||||
const dashboardStore = useDashboardStore();
|
||||
const isSankey = ref<boolean>(
|
||||
[EntityType[2].value, EntityType[3].value].includes(dashboardStore.entity)
|
||||
const isService = [EntityType[0].value, EntityType[1].value].includes(
|
||||
dashboardStore.entity
|
||||
);
|
||||
</script>
|
||||
|
||||
@ -20,7 +20,7 @@ limitations under the License. -->
|
||||
element-loading-background="rgba(0, 0, 0, 0)"
|
||||
:style="`height: ${height}px`"
|
||||
>
|
||||
<div class="setting" v-show="showSetting">
|
||||
<div class="setting" v-if="showSetting">
|
||||
<Settings @update="updateSettings" @updateNodes="freshNodes" />
|
||||
</div>
|
||||
<div class="tool">
|
||||
@ -34,7 +34,12 @@ limitations under the License. -->
|
||||
@change="changeDepth"
|
||||
/>
|
||||
</span>
|
||||
<span class="switch-icon ml-5" title="Settings" @click="setConfig">
|
||||
<span
|
||||
class="switch-icon ml-5"
|
||||
title="Settings"
|
||||
@click="setConfig"
|
||||
v-if="dashboardStore.editMode"
|
||||
>
|
||||
<Icon size="middle" iconName="settings" />
|
||||
</span>
|
||||
<span
|
||||
@ -113,14 +118,11 @@ const anchor = ref<any>(null);
|
||||
const arrow = ref<any>(null);
|
||||
const legend = ref<any>(null);
|
||||
const showSetting = ref<boolean>(false);
|
||||
const settings = ref<any>({});
|
||||
const settings = ref<any>(props.config);
|
||||
const operationsPos = reactive<{ x: number; y: number }>({ x: NaN, y: NaN });
|
||||
const items = ref<
|
||||
{ id: string; title: string; func: any; dashboard?: string }[]
|
||||
>([
|
||||
{ id: "inspect", title: "Inspect", func: handleInspect },
|
||||
{ id: "alarm", title: "Alarm", func: handleGoAlarm },
|
||||
]);
|
||||
>([]);
|
||||
const depth = ref<number>(props.config.graph.depth || 2);
|
||||
|
||||
onMounted(async () => {
|
||||
@ -130,6 +132,9 @@ onMounted(async () => {
|
||||
if (resp && resp.errors) {
|
||||
ElMessage.error(resp.errors);
|
||||
}
|
||||
topologyStore.getLinkClientMetrics(settings.value.linkClientMetrics || []);
|
||||
topologyStore.getLinkServerMetrics(settings.value.linkServerMetrics || []);
|
||||
topologyStore.queryNodeMetrics(settings.value.nodeMetrics || []);
|
||||
const dom = document.querySelector(".topology")?.getBoundingClientRect() || {
|
||||
height: 40,
|
||||
width: 0,
|
||||
@ -140,6 +145,7 @@ onMounted(async () => {
|
||||
svg.value = d3.select(chart.value).append("svg").attr("class", "topo-svg");
|
||||
await init();
|
||||
update();
|
||||
setNodeTools(settings.value.nodeDashboard);
|
||||
});
|
||||
async function init() {
|
||||
tip.value = (d3tip as any)().attr("class", "d3-tip").offset([-8, 0]);
|
||||
@ -167,6 +173,7 @@ async function init() {
|
||||
event.preventDefault();
|
||||
topologyStore.setNode(null);
|
||||
topologyStore.setLink(null);
|
||||
dashboardStore.selectWidget(props.config);
|
||||
});
|
||||
}
|
||||
function ticked() {
|
||||
@ -236,6 +243,7 @@ function handleLinkClick(event: any, d: Call) {
|
||||
if (!settings.value.linkDashboard) {
|
||||
return;
|
||||
}
|
||||
const origin = dashboardStore.entity;
|
||||
const e =
|
||||
dashboardStore.entity === EntityType[1].value
|
||||
? EntityType[0].value
|
||||
@ -251,6 +259,7 @@ function handleLinkClick(event: any, d: Call) {
|
||||
}/${p.name.split(" ").join("-")}`;
|
||||
const routeUrl = router.resolve({ path });
|
||||
window.open(routeUrl.href, "_blank");
|
||||
dashboardStore.setEntity(origin);
|
||||
}
|
||||
function update() {
|
||||
// node element
|
||||
@ -271,7 +280,7 @@ function update() {
|
||||
const nodeMetrics: string[] = settings.value.nodeMetrics || [];
|
||||
const html = nodeMetrics.map((m) => {
|
||||
const metric =
|
||||
topologyStore.nodeMetrics[m].values.filter(
|
||||
topologyStore.nodeMetricValue[m].values.filter(
|
||||
(val: { id: string; value: unknown }) => val.id === data.id
|
||||
)[0] || {};
|
||||
const val = m.includes("_sla") ? metric.value / 100 : metric.value;
|
||||
@ -380,6 +389,7 @@ async function handleInspect() {
|
||||
update();
|
||||
}
|
||||
function handleGoEndpoint(name: string) {
|
||||
const origin = dashboardStore.entity;
|
||||
const p = getDashboard({
|
||||
name,
|
||||
layer: dashboardStore.layerId,
|
||||
@ -392,8 +402,10 @@ function handleGoEndpoint(name: string) {
|
||||
const routeUrl = router.resolve({ path });
|
||||
|
||||
window.open(routeUrl.href, "_blank");
|
||||
dashboardStore.setEntity(origin);
|
||||
}
|
||||
function handleGoInstance(name: string) {
|
||||
const origin = dashboardStore.entity;
|
||||
const p = getDashboard({
|
||||
name,
|
||||
layer: dashboardStore.layerId,
|
||||
@ -406,8 +418,10 @@ function handleGoInstance(name: string) {
|
||||
const routeUrl = router.resolve({ path });
|
||||
|
||||
window.open(routeUrl.href, "_blank");
|
||||
dashboardStore.setEntity(origin);
|
||||
}
|
||||
function handleGoDashboard(name: string) {
|
||||
const origin = dashboardStore.entity;
|
||||
const p = getDashboard({
|
||||
name,
|
||||
layer: dashboardStore.layerId,
|
||||
@ -420,6 +434,7 @@ function handleGoDashboard(name: string) {
|
||||
const routeUrl = router.resolve({ path });
|
||||
|
||||
window.open(routeUrl.href, "_blank");
|
||||
dashboardStore.setEntity(origin);
|
||||
}
|
||||
function handleGoAlarm() {
|
||||
const path = `/alarm`;
|
||||
@ -455,6 +470,7 @@ async function getTopology() {
|
||||
}
|
||||
function setConfig() {
|
||||
showSetting.value = !showSetting.value;
|
||||
dashboardStore.selectWidget(props.config);
|
||||
}
|
||||
function resize() {
|
||||
height.value = document.body.clientHeight;
|
||||
@ -462,16 +478,19 @@ function resize() {
|
||||
svg.value.attr("height", height.value).attr("width", width.value);
|
||||
}
|
||||
function updateSettings(config: any) {
|
||||
settings.value = config;
|
||||
setNodeTools(config.nodeDashboard);
|
||||
}
|
||||
function setNodeTools(nodeDashboard: any) {
|
||||
items.value = [
|
||||
{ id: "inspect", title: "Inspect", func: handleInspect },
|
||||
{ id: "alarm", title: "Alarm", func: handleGoAlarm },
|
||||
];
|
||||
settings.value = config;
|
||||
for (const item of config.nodeDashboard) {
|
||||
for (const item of nodeDashboard) {
|
||||
if (item.scope === EntityType[0].value) {
|
||||
items.value.push({
|
||||
id: "dashboard",
|
||||
title: "Dashboard",
|
||||
title: "Service Dashboard",
|
||||
func: handleGoDashboard,
|
||||
...item,
|
||||
});
|
||||
@ -479,7 +498,7 @@ function updateSettings(config: any) {
|
||||
if (item.scope === EntityType[2].value) {
|
||||
items.value.push({
|
||||
id: "endpoint",
|
||||
title: "Endpoint",
|
||||
title: "Endpoint Dashboard",
|
||||
func: handleGoEndpoint,
|
||||
...item,
|
||||
});
|
||||
@ -487,7 +506,7 @@ function updateSettings(config: any) {
|
||||
if (item.scope === EntityType[3].value) {
|
||||
items.value.push({
|
||||
id: "instance",
|
||||
title: "Service Instance",
|
||||
title: "Service Instance Dashboard",
|
||||
func: handleGoInstance,
|
||||
...item,
|
||||
});
|
||||
@ -567,7 +586,6 @@ watch(
|
||||
span {
|
||||
display: block;
|
||||
height: 30px;
|
||||
width: 140px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -28,7 +28,12 @@ limitations under the License. -->
|
||||
@change="changeDepth"
|
||||
/>
|
||||
</span>
|
||||
<span class="switch-icon ml-5" title="Settings" @click="setConfig">
|
||||
<span
|
||||
class="switch-icon ml-5"
|
||||
title="Settings"
|
||||
@click="setConfig"
|
||||
v-if="dashboardStore.editMode"
|
||||
>
|
||||
<Icon size="middle" iconName="settings" />
|
||||
</span>
|
||||
<span
|
||||
@ -38,7 +43,7 @@ limitations under the License. -->
|
||||
>
|
||||
<Icon size="middle" iconName="keyboard_backspace" />
|
||||
</span>
|
||||
<div class="settings" v-show="showSettings">
|
||||
<div class="settings" v-if="showSettings">
|
||||
<Settings @update="updateConfig" />
|
||||
</div>
|
||||
</div>
|
||||
@ -104,7 +109,7 @@ const loading = ref<boolean>(false);
|
||||
const height = ref<number>(100);
|
||||
const width = ref<number>(100);
|
||||
const showSettings = ref<boolean>(false);
|
||||
const settings = ref<any>({});
|
||||
const settings = ref<any>(props.config);
|
||||
const operationsPos = reactive<{ x: number; y: number }>({ x: NaN, y: NaN });
|
||||
const depth = ref<number>(props.config.graph.depth || 3);
|
||||
const items = [
|
||||
@ -130,6 +135,9 @@ async function loadTopology(id: string) {
|
||||
};
|
||||
height.value = dom.height - 70;
|
||||
width.value = dom.width - 5;
|
||||
topologyStore.getLinkClientMetrics(settings.value.linkClientMetrics || []);
|
||||
topologyStore.getLinkServerMetrics(settings.value.linkServerMetrics || []);
|
||||
topologyStore.queryNodeMetrics(settings.value.nodeMetrics || []);
|
||||
}
|
||||
|
||||
function inspect() {
|
||||
@ -158,7 +166,9 @@ function goDashboard() {
|
||||
});
|
||||
dashboardStore.setEntity(entity);
|
||||
dashboardStore.setCurrentDashboard(d);
|
||||
const path = `/dashboard/${d.layer}/${entity}/${topologyStore.node.serviceId}/${topologyStore.node.id}/${d.name}`;
|
||||
const path = `/dashboard/${d.layer}/${entity}/${
|
||||
topologyStore.node.serviceId
|
||||
}/${topologyStore.node.id}/${d.name.split(" ").join("-")}`;
|
||||
const routeUrl = router.resolve({ path });
|
||||
window.open(routeUrl.href, "_blank");
|
||||
topologyStore.setNode(null);
|
||||
@ -167,6 +177,7 @@ function goDashboard() {
|
||||
function setConfig() {
|
||||
topologyStore.setNode(null);
|
||||
showSettings.value = !showSettings.value;
|
||||
dashboardStore.selectWidget(props.config);
|
||||
}
|
||||
|
||||
function updateConfig(config: any) {
|
||||
@ -196,7 +207,9 @@ function selectNodeLink(d: any) {
|
||||
entity,
|
||||
});
|
||||
dashboardStore.setEntity(entity);
|
||||
const path = `/dashboard/${p.layer}/${entity}/${sourceObj.serviceId}/${sourceObj.id}/${targetObj.serviceId}/${targetObj.id}/${p.name}`;
|
||||
const path = `/dashboard/${p.layer}/${entity}/${sourceObj.serviceId}/${
|
||||
sourceObj.id
|
||||
}/${targetObj.serviceId}/${targetObj.id}/${p.name.split(" ").join("-")}`;
|
||||
const routeUrl = router.resolve({ path });
|
||||
window.open(routeUrl.href, "_blank");
|
||||
return;
|
||||
@ -221,7 +234,7 @@ async function getTopology(id: string) {
|
||||
Number(depth.value)
|
||||
);
|
||||
break;
|
||||
case EntityType[3].value:
|
||||
case EntityType[4].value:
|
||||
resp = await topologyStore.getInstanceTopology();
|
||||
break;
|
||||
}
|
||||
@ -231,6 +244,7 @@ function handleClick(event: any) {
|
||||
if (event.target.nodeName === "svg") {
|
||||
topologyStore.setNode(null);
|
||||
topologyStore.setLink(null);
|
||||
dashboardStore.selectWidget(props.config);
|
||||
}
|
||||
}
|
||||
watch(
|
||||
@ -262,10 +276,10 @@ watch(
|
||||
top: 60px;
|
||||
right: 10px;
|
||||
width: 400px;
|
||||
height: 500px;
|
||||
height: 600px;
|
||||
background-color: #2b3037;
|
||||
overflow: auto;
|
||||
padding: 0 15px;
|
||||
padding: 10px 15px;
|
||||
border-radius: 3px;
|
||||
color: #ccc;
|
||||
transition: all 0.5ms linear;
|
||||
|
||||
@ -105,10 +105,10 @@ function linkTooltip(data: Call) {
|
||||
}
|
||||
|
||||
function nodeTooltip(data: Node) {
|
||||
const nodeMetrics: string[] = Object.keys(topologyStore.nodeMetrics);
|
||||
const nodeMetrics: string[] = Object.keys(topologyStore.nodeMetricValue);
|
||||
const html = nodeMetrics.map((m) => {
|
||||
const metric =
|
||||
topologyStore.nodeMetrics[m].values.filter(
|
||||
topologyStore.nodeMetricValue[m].values.filter(
|
||||
(val: { id: string; value: unknown }) => val.id === data.id
|
||||
)[0] || {};
|
||||
const val = m.includes("_sla") ? metric.value / 100 : metric.value;
|
||||
|
||||
@ -186,7 +186,7 @@ import { ElMessage } from "element-plus";
|
||||
import { MetricCatalog, ScopeType, MetricConditions } from "../../../data";
|
||||
import { Option } from "@/types/app";
|
||||
import { useQueryTopologyMetrics } from "@/hooks/useProcessor";
|
||||
import { Node, Call } from "@/types/topology";
|
||||
import { Node } from "@/types/topology";
|
||||
import { DashboardItem } from "@/types/dashboard";
|
||||
import { EntityType, LegendOpt, MetricsType } from "../../../data";
|
||||
|
||||
@ -195,12 +195,16 @@ const emit = defineEmits(["update", "updateNodes"]);
|
||||
const { t } = useI18n();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const topologyStore = useTopologyStore();
|
||||
const { selectedGrid } = dashboardStore;
|
||||
const isService = [EntityType[0].value, EntityType[1].value].includes(
|
||||
dashboardStore.entity
|
||||
);
|
||||
const items = reactive<
|
||||
{
|
||||
scope: string;
|
||||
dashboard: string;
|
||||
}[]
|
||||
>([{ scope: "", dashboard: "" }]);
|
||||
>((isService && selectedGrid.nodeDashboard) || [{ scope: "", dashboard: "" }]);
|
||||
const states = reactive<{
|
||||
linkDashboard: string;
|
||||
nodeDashboard: {
|
||||
@ -215,23 +219,19 @@ const states = reactive<{
|
||||
linkDashboards: (DashboardItem & { label: string; value: string })[];
|
||||
nodeDashboards: (DashboardItem & { label: string; value: string })[];
|
||||
}>({
|
||||
linkDashboard: "",
|
||||
nodeDashboard: [],
|
||||
linkServerMetrics: [],
|
||||
linkClientMetrics: [],
|
||||
nodeMetrics: [],
|
||||
linkDashboard: selectedGrid.linkDashboard || "",
|
||||
nodeDashboard: selectedGrid.nodeDashboard || [],
|
||||
linkServerMetrics: selectedGrid.linkServerMetrics || [],
|
||||
linkClientMetrics: selectedGrid.linkClientMetrics || [],
|
||||
nodeMetrics: selectedGrid.nodeMetrics || [],
|
||||
nodeMetricList: [],
|
||||
linkMetricList: [],
|
||||
linkDashboards: [],
|
||||
nodeDashboards: [],
|
||||
});
|
||||
console.log(dashboardStore.selectedGrid);
|
||||
const isService = [EntityType[0].value, EntityType[1].value].includes(
|
||||
dashboardStore.entity
|
||||
);
|
||||
const legend = reactive<{
|
||||
metric: { name: string; condition: string; value: string }[];
|
||||
}>({ metric: [{ name: "", condition: "", value: "" }] });
|
||||
}>({ metric: selectedGrid.legend || [{ name: "", condition: "", value: "" }] });
|
||||
|
||||
getMetricList();
|
||||
async function getMetricList() {
|
||||
@ -270,24 +270,26 @@ async function getMetricList() {
|
||||
entity + "Relation" === (MetricCatalog as any)[d.catalog] &&
|
||||
d.type === MetricsType.REGULAR_VALUE
|
||||
);
|
||||
if (isService) {
|
||||
return;
|
||||
}
|
||||
states.nodeDashboards = list.reduce(
|
||||
(
|
||||
prev: (DashboardItem & { label: string; value: string })[],
|
||||
d: DashboardItem
|
||||
) => {
|
||||
if (d.layer === dashboardStore.layerId && d.entity === entity) {
|
||||
prev.push({ ...d, label: d.name, value: d.name });
|
||||
}
|
||||
return prev;
|
||||
},
|
||||
[]
|
||||
);
|
||||
}
|
||||
async function setLegend() {
|
||||
const metrics = legend.metric.filter(
|
||||
(d: any) => d.name && d.value && d.condition
|
||||
);
|
||||
const names = metrics.map((d: any) => d.name);
|
||||
|
||||
emit("update", {
|
||||
linkDashboard: states.linkDashboard,
|
||||
nodeDashboard: isService
|
||||
? items.filter((d: { scope: string; dashboard: string }) => d.dashboard)
|
||||
: states.nodeDashboard,
|
||||
linkServerMetrics: states.linkServerMetrics,
|
||||
linkClientMetrics: states.linkClientMetrics,
|
||||
nodeMetrics: states.nodeMetrics,
|
||||
legend: metrics,
|
||||
});
|
||||
updateSettings();
|
||||
const ids = topologyStore.nodes.map((d: Node) => d.id);
|
||||
const names = dashboardStore.selectedGrid.legend.map((d: any) => d.name);
|
||||
const param = await useQueryTopologyMetrics(names, ids);
|
||||
const res = await topologyStore.getLegendMetrics(param);
|
||||
|
||||
@ -298,9 +300,11 @@ async function setLegend() {
|
||||
}
|
||||
function changeNodeDashboard(opt: any) {
|
||||
states.nodeDashboard = opt[0].value;
|
||||
updateSettings();
|
||||
}
|
||||
function changeLinkDashboard(opt: any) {
|
||||
states.linkDashboard = opt[0].value;
|
||||
updateSettings();
|
||||
}
|
||||
function changeLegend(type: string, opt: any, index: number) {
|
||||
(legend.metric[index] as any)[type] = opt[0].value || opt;
|
||||
@ -321,6 +325,7 @@ function changeScope(index: number, opt: Option[] | any) {
|
||||
[]
|
||||
);
|
||||
items[index].dashboard = states.nodeDashboards[0].value;
|
||||
updateSettings();
|
||||
}
|
||||
function updateNodeDashboards(index: number, content: Option[] | any) {
|
||||
items[index].dashboard = content[0].value;
|
||||
@ -334,7 +339,10 @@ function deleteItem(index: number) {
|
||||
updateSettings();
|
||||
}
|
||||
function updateSettings() {
|
||||
emit("update", {
|
||||
const metrics = legend.metric.filter(
|
||||
(d: any) => d.name && d.value && d.condition
|
||||
);
|
||||
const param = {
|
||||
linkDashboard: states.linkDashboard,
|
||||
nodeDashboard: isService
|
||||
? items.filter((d: { scope: string; dashboard: string }) => d.dashboard)
|
||||
@ -342,8 +350,11 @@ function updateSettings() {
|
||||
linkServerMetrics: states.linkServerMetrics,
|
||||
linkClientMetrics: states.linkClientMetrics,
|
||||
nodeMetrics: states.nodeMetrics,
|
||||
legend: legend.metric,
|
||||
});
|
||||
legend: metrics,
|
||||
};
|
||||
dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, ...param });
|
||||
dashboardStore.setConfigs({ ...dashboardStore.selectedGrid, ...param });
|
||||
emit("update", param);
|
||||
}
|
||||
async function changeLinkServerMetrics(options: Option[] | any) {
|
||||
states.linkServerMetrics = options.map((d: Option) => d.value);
|
||||
@ -352,15 +363,7 @@ async function changeLinkServerMetrics(options: Option[] | any) {
|
||||
topologyStore.setLinkServerMetrics({});
|
||||
return;
|
||||
}
|
||||
const idsS = topologyStore.calls
|
||||
.filter((i: Call) => i.detectPoints.includes("SERVER"))
|
||||
.map((b: Call) => b.id);
|
||||
const param = await useQueryTopologyMetrics(states.linkServerMetrics, idsS);
|
||||
const res = await topologyStore.getCallServerMetrics(param);
|
||||
|
||||
if (res.errors) {
|
||||
ElMessage.error(res.errors);
|
||||
}
|
||||
topologyStore.getLinkServerMetrics(states.linkServerMetrics);
|
||||
}
|
||||
async function changeLinkClientMetrics(options: Option[] | any) {
|
||||
states.linkClientMetrics = options.map((d: Option) => d.value);
|
||||
@ -369,30 +372,16 @@ async function changeLinkClientMetrics(options: Option[] | any) {
|
||||
topologyStore.setLinkClientMetrics({});
|
||||
return;
|
||||
}
|
||||
const idsC = topologyStore.calls
|
||||
.filter((i: Call) => i.detectPoints.includes("CLIENT"))
|
||||
.map((b: Call) => b.id);
|
||||
const param = await useQueryTopologyMetrics(states.linkClientMetrics, idsC);
|
||||
const res = await topologyStore.getCallClientMetrics(param);
|
||||
|
||||
if (res.errors) {
|
||||
ElMessage.error(res.errors);
|
||||
}
|
||||
topologyStore.getLinkClientMetrics(states.linkClientMetrics);
|
||||
}
|
||||
async function changeNodeMetrics(options: Option[] | any) {
|
||||
states.nodeMetrics = options.map((d: Option) => d.value);
|
||||
updateSettings();
|
||||
if (!states.nodeMetrics.length) {
|
||||
topologyStore.setNodeMetrics({});
|
||||
topologyStore.setNodeMetricValue({});
|
||||
return;
|
||||
}
|
||||
const ids = topologyStore.nodes.map((d: Node) => d.id);
|
||||
const param = await useQueryTopologyMetrics(states.nodeMetrics, ids);
|
||||
const res = await topologyStore.getNodeMetrics(param);
|
||||
|
||||
if (res.errors) {
|
||||
ElMessage.error(res.errors);
|
||||
}
|
||||
topologyStore.queryNodeMetrics(states.nodeMetrics);
|
||||
}
|
||||
function deleteMetric(index: number) {
|
||||
legend.metric.splice(index, 1);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user