mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-01 22:24:25 +00:00
fix: polish the hierarchy topology and dashboard configs (#362)
This commit is contained in:
Fine0830
GitHub
parent
f809123b4f
commit
5061b19cf7
@ -385,7 +385,7 @@ const msg = {
|
||||
traceDesc:
|
||||
"The trace segment serves as a representation of a trace portion executed within one single OS process, such as a JVM. It comprises a collection of spans, typically associated with and collected from a single request or execution context.",
|
||||
tabExpressions: "Tab Expressions",
|
||||
hierarchyServicesSettings: "Service Hierarchy Topology Settings",
|
||||
hierarchyNodeMetrics: "Metrics related with hierarchy topology nodes",
|
||||
hierarchyNodeMetrics: "Metrics for Hierarchy Graph Node",
|
||||
hierarchyNodeDashboard: "As dashboard for Hierarchy Graph Node",
|
||||
};
|
||||
export default msg;
|
||||
|
||||
@ -385,7 +385,7 @@ const msg = {
|
||||
traceDesc:
|
||||
"The trace segment serves as a representation of a trace portion executed within one single OS process, such as a JVM. It comprises a collection of spans, typically associated with and collected from a single request or execution context.",
|
||||
tabExpressions: "Tab Expressions",
|
||||
hierarchyServicesSettings: "Service Hierarchy Topology Settings",
|
||||
hierarchyNodeMetrics: "Metrics related with hierarchy topology nodes",
|
||||
hierarchyNodeMetrics: "Metrics for Hierarchy Graph Node",
|
||||
hierarchyNodeDashboard: "As dashboard for Hierarchy Graph Node",
|
||||
};
|
||||
export default msg;
|
||||
|
||||
@ -383,7 +383,7 @@ const msg = {
|
||||
traceDesc:
|
||||
"Trace Segment代表在单一操作系统进程（例如JVM）中执行的追踪部分。它包含了一组跨度（spans），这些跨度通常与单一请求或执行上下文关联。",
|
||||
tabExpressions: "Tab表达式",
|
||||
hierarchyServicesSettings: "层次结构服务拓扑设置",
|
||||
hierarchyNodeMetrics: "层级拓扑节点关联的指标",
|
||||
hierarchyNodeMetrics: "层次图节点的指标",
|
||||
hierarchyNodeDashboard: "作为层次图节点的dashboard",
|
||||
};
|
||||
export default msg;
|
||||
|
||||
@ -73,23 +73,7 @@ limitations under the License. -->
|
||||
<span v-else> -- </span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="isDefault" label="Default Dashboard" width="140">
|
||||
<template #default="scope">
|
||||
<el-popconfirm
|
||||
:title="t('rootTitle')"
|
||||
@confirm="handleTopLevel(scope.row)"
|
||||
v-if="[EntityType[0].value, EntityType[3].value].includes(scope.row.entity)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button size="small" style="width: 80px">
|
||||
{{ scope.row.isDefault ? "Disable" : "Enable" }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<span v-else> -- </span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Operations" width="300">
|
||||
<el-table-column label="Operations" width="400">
|
||||
<template #default="scope">
|
||||
<el-button size="small" @click="handleEdit(scope.row)">
|
||||
{{ t("edit") }}
|
||||
@ -102,7 +86,7 @@ limitations under the License. -->
|
||||
size="small"
|
||||
@click="handleEditMQE(scope.row)"
|
||||
>
|
||||
MQE
|
||||
Hierarchy Graph
|
||||
</el-button>
|
||||
<span v-else class="placeholder"></span>
|
||||
<el-popconfirm :title="t('deleteTitle')" @confirm="handleDelete(scope.row)">
|
||||
@ -147,9 +131,13 @@ limitations under the License. -->
|
||||
@next-click="changePage"
|
||||
/>
|
||||
</div>
|
||||
<el-dialog v-model="MQEVisible" title="Edit MQE" width="400px">
|
||||
<el-dialog v-model="MQEVisible" title="Hierarchy Graph" width="400px">
|
||||
<div class="mb-10">
|
||||
<span class="label mr-10">{{ t("hierarchyNodeDashboard") }}</span>
|
||||
<el-switch v-model="currentRow.isDefault" style="height: 25px" />
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ t("hierarchyNodeMetrics") }}</span>
|
||||
<span class="label">{{ t("hierarchyNodeMetrics") }}</span>
|
||||
<el-popover placement="left" :width="400" trigger="click">
|
||||
<template #reference>
|
||||
<span>
|
||||
@ -238,10 +226,14 @@ limitations under the License. -->
|
||||
}
|
||||
|
||||
async function saveMQE() {
|
||||
if (!currentRow.value.expressionsConfig) {
|
||||
return;
|
||||
}
|
||||
const items: DashboardItem[] = [];
|
||||
loading.value = true;
|
||||
for (const d of dashboardStore.dashboards) {
|
||||
if (d.id === currentRow.value.id) {
|
||||
d.isDefault = currentRow.value.isDefault || false;
|
||||
d.expressions = currentRow.value.expressions;
|
||||
d.expressionsConfig = currentRow.value.expressionsConfig;
|
||||
const key = [d.layer, d.entity, d.name].join("_");
|
||||
@ -269,6 +261,38 @@ limitations under the License. -->
|
||||
loading.value = false;
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
if (
|
||||
d.layer === currentRow.value.layer &&
|
||||
[EntityType[0].value].includes(d.entity) &&
|
||||
!currentRow.value.isDefault &&
|
||||
d.isDefault
|
||||
) {
|
||||
d.isDefault = false;
|
||||
const key = [d.layer, d.entity, d.name].join("_");
|
||||
const layout = sessionStorage.getItem(key) || "{}";
|
||||
const c = {
|
||||
...JSON.parse(layout).configuration,
|
||||
...d,
|
||||
};
|
||||
const setting = {
|
||||
id: d.id,
|
||||
configuration: JSON.stringify(c),
|
||||
};
|
||||
const res = await dashboardStore.updateDashboard(setting);
|
||||
if (res.data.changeTemplate.status) {
|
||||
sessionStorage.setItem(
|
||||
key,
|
||||
JSON.stringify({
|
||||
id: d.id,
|
||||
configuration: c,
|
||||
}),
|
||||
);
|
||||
} else {
|
||||
loading.value = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
items.push(d);
|
||||
}
|
||||
@ -497,71 +521,7 @@ limitations under the License. -->
|
||||
searchDashboards(currentPage.value);
|
||||
loading.value = false;
|
||||
}
|
||||
async function handleTopLevel(row: DashboardItem) {
|
||||
const items: DashboardItem[] = [];
|
||||
loading.value = true;
|
||||
for (const d of dashboardStore.dashboards) {
|
||||
if (d.id === row.id) {
|
||||
d.isDefault = !row.isDefault;
|
||||
const key = [d.layer, d.entity, d.name].join("_");
|
||||
const layout = sessionStorage.getItem(key) || "{}";
|
||||
const c = {
|
||||
...JSON.parse(layout).configuration,
|
||||
...d,
|
||||
};
|
||||
delete c.id;
|
||||
const setting = {
|
||||
id: d.id,
|
||||
configuration: JSON.stringify(c),
|
||||
};
|
||||
|
||||
const res = await dashboardStore.updateDashboard(setting);
|
||||
if (res.data.changeTemplate.status) {
|
||||
sessionStorage.setItem(
|
||||
key,
|
||||
JSON.stringify({
|
||||
id: d.id,
|
||||
configuration: c,
|
||||
}),
|
||||
);
|
||||
} else {
|
||||
loading.value = false;
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
if (d.layer === row.layer && [EntityType[0].value].includes(d.entity) && !row.isDefault && d.isDefault) {
|
||||
d.isDefault = false;
|
||||
const key = [d.layer, d.entity, d.name].join("_");
|
||||
const layout = sessionStorage.getItem(key) || "{}";
|
||||
const c = {
|
||||
...JSON.parse(layout).configuration,
|
||||
...d,
|
||||
};
|
||||
const setting = {
|
||||
id: d.id,
|
||||
configuration: JSON.stringify(c),
|
||||
};
|
||||
const res = await dashboardStore.updateDashboard(setting);
|
||||
if (res.data.changeTemplate.status) {
|
||||
sessionStorage.setItem(
|
||||
key,
|
||||
JSON.stringify({
|
||||
id: d.id,
|
||||
configuration: c,
|
||||
}),
|
||||
);
|
||||
} else {
|
||||
loading.value = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
items.push(d);
|
||||
}
|
||||
dashboardStore.resetDashboards(items);
|
||||
searchDashboards(currentPage.value);
|
||||
loading.value = false;
|
||||
}
|
||||
function handleRename(row: DashboardItem) {
|
||||
ElMessageBox.prompt("Please input dashboard name", "Edit", {
|
||||
confirmButtonText: "OK",
|
||||
@ -724,10 +684,14 @@ limitations under the License. -->
|
||||
|
||||
.placeholder {
|
||||
display: inline-block;
|
||||
width: 75px;
|
||||
width: 136px;
|
||||
}
|
||||
|
||||
.expressions {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -152,16 +152,18 @@ limitations under the License. -->
|
||||
const origin = dashboardStore.entity;
|
||||
event.stopPropagation();
|
||||
hideTip();
|
||||
const dashboard =
|
||||
getDashboard(
|
||||
const { dashboard } = getDashboard(
|
||||
{
|
||||
layer: d.layer || "",
|
||||
entity: EntityType[3].value,
|
||||
},
|
||||
ConfigFieldTypes.ISDEFAULT,
|
||||
).dashboard || {};
|
||||
);
|
||||
if (!dashboard) {
|
||||
return;
|
||||
}
|
||||
const name = dashboard.name;
|
||||
const path = `/dashboard/${dashboardStore.layerId}/${EntityType[3].value}/${d.serviceId}/${d.key}/${name}`;
|
||||
const path = `/dashboard/${dashboard.layer}/${EntityType[3].value}/${d.serviceId}/${d.key}/${name}`;
|
||||
const routeUrl = router.resolve({ path });
|
||||
|
||||
window.open(routeUrl.href, "_blank");
|
||||
|
||||
@ -160,16 +160,19 @@ limitations under the License. -->
|
||||
const origin = dashboardStore.entity;
|
||||
event.stopPropagation();
|
||||
hideTip();
|
||||
const dashboard =
|
||||
getDashboard(
|
||||
const { dashboard } = getDashboard(
|
||||
{
|
||||
layer: d.layer || "",
|
||||
entity: EntityType[0].value,
|
||||
},
|
||||
ConfigFieldTypes.ISDEFAULT,
|
||||
).dashboard || {};
|
||||
);
|
||||
if (!dashboard) {
|
||||
return;
|
||||
}
|
||||
|
||||
const name = dashboard.name;
|
||||
const path = `/dashboard/${dashboardStore.layerId}/${EntityType[0].value}/${d.key}/${name}`;
|
||||
const path = `/dashboard/${dashboard.layer}/${EntityType[0].value}/${d.key}/${name}`;
|
||||
const routeUrl = router.resolve({ path });
|
||||
|
||||
window.open(routeUrl.href, "_blank");
|
||||
|
||||
Loading…
Reference in New Issue
Block a user