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

update dashboard list

Browse Source
This commit is contained in:
Qiuxia Fan 2022-03-18 15:24:13 +08:00
parent 5c73b067f4
commit 475f235435
1 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,7 +44,7 @@ limitations under the License. -->
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<el-table-column type="selection" width="35" /> <el-table-column type="selection" width="35" />
<el-table-column fixed prop="name" label="Name" /> <el-table-column prop="name" label="Name" />
<el-table-column prop="layer" label="Layer" width="200" /> <el-table-column prop="layer" label="Layer" width="200" />
<el-table-column prop="entity" label="Entity" width="200" /> <el-table-column prop="entity" label="Entity" width="200" />
<el-table-column prop="isRoot" label="Root" width="100"> <el-table-column prop="isRoot" label="Root" width="100">
@ -90,6 +90,7 @@ limitations under the License. -->
</el-button> </el-button>
<el-button class="ml-10 btn" size="default"> <el-button class="ml-10 btn" size="default">
<input <input
ref="dashboardFile"
id="dashboard-file" id="dashboard-file"
class="import-template" class="import-template"
type="file" type="file"
@ -118,6 +119,7 @@ import router from "@/router";
import { DashboardItem } from "@/types/dashboard"; import { DashboardItem } from "@/types/dashboard";
import { saveFile, readFile } from "@/utils/file"; import { saveFile, readFile } from "@/utils/file";
/*global Nullable*/
const { t } = useI18n(); const { t } = useI18n();
const appStore = useAppStoreWithOut(); const appStore = useAppStoreWithOut();
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
@ -126,6 +128,7 @@ const searchText = ref<string>("");
const loading = ref<boolean>(false); const loading = ref<boolean>(false);
const multipleTableRef = ref<InstanceType<typeof ElTable>>(); const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<DashboardItem[]>([]); const multipleSelection = ref<DashboardItem[]>([]);
const dashboardFile = ref<Nullable<HTMLDivElement>>(null);
// # - os-linux // # - os-linux
// # - k8s // # - k8s
// # - general(agent-installed) // # - general(agent-installed)
@ -148,6 +151,16 @@ async function setList() {
} }
async function importTemplates(event: any) { async function importTemplates(event: any) {
const arr: any = await readFile(event); const arr: any = await readFile(event);
for (const item of arr) {
const { layer, name, entity } = item.configuration;
const index = dashboardStore.dashboards.findIndex(
(d: DashboardItem) =>
d.name === name && d.entity === entity && d.layer === layer
);
if (index > -1) {
return ElMessage.error("The dashboard name cannot be duplicate.");
}
}
loading.value = true; loading.value = true;
for (const item of arr) { for (const item of arr) {
const { layer, name, entity, isRoot, children } = item.configuration; const { layer, name, entity, isRoot, children } = item.configuration;
@ -170,8 +183,7 @@ async function importTemplates(event: any) {
} }
dashboards.value = dashboardStore.dashboards; dashboards.value = dashboardStore.dashboards;
loading.value = false; loading.value = false;
const el: any = document.getElementById("dashboard-file"); dashboardFile.value = null;
el!.value = "";
} }
function exportTemplates() { function exportTemplates() {
const arr = multipleSelection.value.sort( const arr = multipleSelection.value.sort(
@ -186,6 +198,9 @@ function exportTemplates() {
}); });
const name = `dashboards.json`; const name = `dashboards.json`;
saveFile(templates, name); saveFile(templates, name);
setTimeout(() => {
multipleTableRef.value!.clearSelection();
}, 2000);
} }
function handleView(row: DashboardItem) { function handleView(row: DashboardItem) {
dashboardStore.setCurrentDashboard(row); dashboardStore.setCurrentDashboard(row);
@ -373,8 +388,9 @@ function searchDashboards() {
} }
.input-label { .input-label {
display: inline; line-height: 30px;
line-height: inherit; height: 30px;
width: 220px;
cursor: pointer; cursor: pointer;
} }
</style> </style>