github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-01 19:24:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add isDefault to the dashboard configuration (#355)

Browse Source
This commit is contained in:
Fine0830 2024-01-03 19:11:37 +08:00 committed by GitHub
parent c5d80d96fb
commit 300ec27ec4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 97 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/locales/lang/en.ts
View File

@ -94,8 +94,8 @@ const msg = {
editTab: "Enable editing tab names",
label: "Service Name",
id: "Service ID",
setRoot: "Set this to root",
setNormal: "Set this to normal",
setRoot: "Set Normal to Root",
setNormal: "Set Root to Normal",
export: "Export Dashboard Templates",
import: "Import Dashboard Templates",
yes: "Yes",

1
src/types/dashboard.d.ts vendored
View File

@ -21,6 +21,7 @@ export type DashboardItem = {
layer: string;
isRoot: boolean;
name: string;
isDefault: boolean;
};
export interface LayoutConfig {
x: number;

113
src/views/dashboard/List.vue
View File

@ -57,14 +57,39 @@ limitations under the License. -->
</el-table-column>
<el-table-column prop="layer" label="Layer" width="160" />
<el-table-column prop="entity" label="Entity" width="200" />
<el-table-column prop="isRoot" label="Root" width="60">
<el-table-column prop="isRoot" label="Root" width="150">
<template #default="scope">
<span>
{{ scope.row.isRoot ? t("yes") : t("no") }}
</span>
<el-popconfirm
:title="t('rootTitle')"
@confirm="setRoot(scope.row)"
v-if="[EntityType[0].value, EntityType[1].value].includes(scope.row.entity)"
>
<template #reference>
<el-button size="small" style="width: 110px">
{{ scope.row.isRoot ? t("setNormal") : t("setRoot") }}
</el-button>
</template>
</el-popconfirm>
<span v-else> -- </span>
</template>
</el-table-column>
<el-table-column label="Operations" width="350">
<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].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">
<template #default="scope">
<el-button size="small" @click="handleEdit(scope.row)">
{{ t("edit") }}
@ -79,17 +104,6 @@ limitations under the License. -->
</el-button>
</template>
</el-popconfirm>
<el-popconfirm
:title="t('rootTitle')"
@confirm="setRoot(scope.row)"
v-if="[EntityType[0].value, EntityType[1].value].includes(scope.row.entity)"
>
<template #reference>
<el-button size="small" style="width: 110px" type="danger">
{{ scope.row.isRoot ? t("setNormal") : t("setRoot") }}
</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
@ -175,17 +189,19 @@ limitations under the License. -->
}
loading.value = true;
for (const item of arr) {
const { layer, name, entity, isRoot, children } = item.configuration;
const { layer, name, entity, isRoot, children, isDefault } = item.configuration;
const index = dashboardStore.dashboards.findIndex((d: DashboardItem) => d.id === item.id);
const p: DashboardItem = {
name: name.split(" ").join("-"),
layer: layer,
entity: entity,
isRoot: false,
isDefault: false,
};
if (index > -1) {
p.id = item.id;
p.isRoot = isRoot;
p.isDefault = isDefault;
}
dashboardStore.setCurrentDashboard(p);
dashboardStore.setLayout(children);
@ -328,7 +344,7 @@ limitations under the License. -->
configuration: JSON.stringify(c),
};
const res = await dashboardStore.updateDashboard(setting);
if (res.data.changeTemplate.id) {
if (res.data.changeTemplate.status) {
sessionStorage.setItem(
key,
JSON.stringify({
@ -356,7 +372,66 @@ limitations under the License. -->
configuration: JSON.stringify(c),
};
const res = await dashboardStore.updateDashboard(setting);
if (res.data.changeTemplate.id) {
if (res.data.changeTemplate.status) {
sessionStorage.setItem(
key,
JSON.stringify({
id: d.id,
configuration: c,
}),
);
}
}
}
items.push(d);
}
dashboardStore.resetDashboards(items);
searchDashboards(1);
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 {
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({