From 08e770e0a4b4b3ba2fde9322bd6638c64d19ddb8 Mon Sep 17 00:00:00 2001 From: Qiuxia Fan Date: Tue, 15 Mar 2022 18:19:09 +0800 Subject: [PATCH] remove, add, update templates --- src/constants/templates.ts | 2 +- src/graphql/fragments/app.ts | 38 ------- src/graphql/fragments/dashboard.ts | 38 +++++++ src/graphql/query/app.ts | 17 +-- src/graphql/query/dashboard.ts | 17 ++- src/store/modules/dashboard.ts | 151 +++++++++++++++++++++++---- src/views/dashboard/Edit.vue | 1 + src/views/dashboard/List.vue | 18 ++-- src/views/dashboard/New.vue | 5 + src/views/dashboard/panel/Layout.vue | 2 +- src/views/dashboard/panel/Tool.vue | 7 +- 11 files changed, 207 insertions(+), 89 deletions(-) diff --git a/src/constants/templates.ts b/src/constants/templates.ts index 58ec7da2..bc10acb3 100644 --- a/src/constants/templates.ts +++ b/src/constants/templates.ts @@ -174,7 +174,7 @@ export const AllLayout = { export const ServiceLayout = { id: "1", configuration: { - name: "Service Layout", + name: "Service Root Layout", layer: "GENERAL", entity: "Service", isRoot: true, diff --git a/src/graphql/fragments/app.ts b/src/graphql/fragments/app.ts index 66838a1b..120b270a 100644 --- a/src/graphql/fragments/app.ts +++ b/src/graphql/fragments/app.ts @@ -26,41 +26,3 @@ export const OAPTimeInfo = { export const OAPVersion = { query: `version { version }`, }; - -export const getAllTemplates = { - query: ` - getAllTemplates { - id, - configuration, - } - `, -}; - -export const addTemplate = { - variable: "$setting: NewDashboardSetting!", - query: ` - addTemplate(setting: $setting) { - id - status - message - }`, -}; -export const changeTemplate = { - variable: "$setting: DashboardSetting!", - query: ` - changeTemplate(setting: $setting) { - id - status - message - }`, -}; - -export const deleteTemplate = { - variable: "$id: String!", - query: ` - disableTemplate(id: $id) { - id - status - message - }`, -}; diff --git a/src/graphql/fragments/dashboard.ts b/src/graphql/fragments/dashboard.ts index 8631039b..f453f3d8 100644 --- a/src/graphql/fragments/dashboard.ts +++ b/src/graphql/fragments/dashboard.ts @@ -30,3 +30,41 @@ export const listMetrics = { } `, }; + +export const getAllTemplates = { + query: ` + getAllTemplates { + id, + configuration, + } + `, +}; + +export const addTemplate = { + variable: "$setting: NewDashboardSetting!", + query: ` + addTemplate(setting: $setting) { + id + status + message + }`, +}; +export const changeTemplate = { + variable: "$setting: DashboardSetting!", + query: ` + changeTemplate(setting: $setting) { + id + status + message + }`, +}; + +export const deleteTemplate = { + variable: "$id: String!", + query: ` + disableTemplate(id: $id) { + id + status + message + }`, +}; diff --git a/src/graphql/query/app.ts b/src/graphql/query/app.ts index d70df7b4..d538c417 100644 --- a/src/graphql/query/app.ts +++ b/src/graphql/query/app.ts @@ -14,23 +14,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { - OAPTimeInfo, - OAPVersion, - getAllTemplates, - addTemplate, - changeTemplate, - deleteTemplate, -} from "../fragments/app"; +import { OAPTimeInfo, OAPVersion } from "../fragments/app"; export const queryOAPTimeInfo = `query queryOAPTimeInfo {${OAPTimeInfo.query}}`; export const queryOAPVersion = `query ${OAPVersion.query}`; - -export const getTemplates = `query queryTemplates {${getAllTemplates.query}}`; - -export const addNewTemplate = `query queryAlarms(${addTemplate.variable}) {${addTemplate.query}}`; - -export const updateTemplate = `query queryAlarms(${changeTemplate.variable}) {${changeTemplate.query}}`; - -export const removeTemplate = `query queryAlarms(${deleteTemplate.variable}) {${deleteTemplate.query}}`; diff --git a/src/graphql/query/dashboard.ts b/src/graphql/query/dashboard.ts index 5ff9e092..738fafa8 100644 --- a/src/graphql/query/dashboard.ts +++ b/src/graphql/query/dashboard.ts @@ -14,8 +14,23 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { TypeOfMetrics, listMetrics } from "../fragments/dashboard"; +import { + TypeOfMetrics, + listMetrics, + getAllTemplates, + addTemplate, + changeTemplate, + deleteTemplate, +} from "../fragments/dashboard"; export const queryTypeOfMetrics = `query typeOfMetrics(${TypeOfMetrics.variable}) {${TypeOfMetrics.query}}`; export const queryMetrics = `query queryData(${listMetrics.variable}) {${listMetrics.query}}`; + +export const addNewTemplate = `mutation template(${addTemplate.variable}) {${addTemplate.query}}`; + +export const updateTemplate = `mutation template(${changeTemplate.variable}) {${changeTemplate.query}}`; + +export const removeTemplate = `mutation template(${deleteTemplate.variable}) {${deleteTemplate.query}}`; + +export const getTemplates = `query templates {${getAllTemplates.query}}`; diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts index 4961279a..7b5b5cce 100644 --- a/src/store/modules/dashboard.ts +++ b/src/store/modules/dashboard.ts @@ -19,15 +19,15 @@ import { store } from "@/store"; import { LayoutConfig } from "@/types/dashboard"; import graphql from "@/graphql"; import query from "@/graphql/fetch"; -import { - ServiceLayout, - AllLayout, - EndpointLayout, - InstanceLayout, - ServiceRelationLayout, - InstanceRelationLayout, - EndpointRelationLayout, -} from "@/constants/templates"; +// import { +// ServiceLayout, +// AllLayout, +// EndpointLayout, +// InstanceLayout, +// ServiceRelationLayout, +// InstanceRelationLayout, +// EndpointRelationLayout, +// } from "@/constants/templates"; import { useAppStoreWithOut } from "@/store/modules/app"; import { useSelectorStore } from "@/store/modules/selectors"; import { NewControl } from "../data"; @@ -45,13 +45,19 @@ interface DashboardState { selectorStore: any; showTopology: boolean; currentTabItems: LayoutConfig[]; - dashboards: { name: string; layer: string; entity: string }[]; + dashboards: { name: string; layer: string; entity: string; id: string }[]; + currentDashboard: Nullable<{ + name: string; + layer: string; + entity: string; + id: string; + }>; } export const dashboardStore = defineStore({ id: "dashboard", state: (): DashboardState => ({ - layout: ServiceLayout.configuration.children, + layout: [], showConfig: false, selectedGrid: null, entity: "", @@ -62,11 +68,21 @@ export const dashboardStore = defineStore({ showTopology: false, currentTabItems: [], dashboards: [], + currentDashboard: null, }), actions: { setLayout(data: LayoutConfig[]) { this.layout = data; }, + setCurrentDashboard(item: { + name: string; + layer: string; + entity: string; + id: string; + }) { + console.log(item); + this.currentDashboard = item; + }, addControl(type: string) { const newItem: LayoutConfig = { ...NewControl, @@ -290,18 +306,19 @@ export const dashboardStore = defineStore({ if (res.data.errors) { return res.data; } - const data = [ - ServiceLayout, - AllLayout, - EndpointLayout, - InstanceLayout, - ServiceRelationLayout, - InstanceRelationLayout, - EndpointRelationLayout, - ].map((t: any) => { - t.configuration = JSON.stringify(t.configuration); - return t; - }); + // const data = [ + // ServiceLayout, + // AllLayout, + // EndpointLayout, + // InstanceLayout, + // ServiceRelationLayout, + // InstanceRelationLayout, + // EndpointRelationLayout, + // ].map((t: any) => { + // t.configuration = JSON.stringify(t.configuration); + // return t; + // }); + const data = res.data.data.getAllTemplates; const list = []; for (const t of data) { const c = JSON.parse(t.configuration); @@ -332,6 +349,94 @@ export const dashboardStore = defineStore({ sessionStorage.getItem("dashboards") || "[]" ); }, + async saveDashboard() { + if (!this.currentDashboard.name) { + ElMessage.error("The dashboard name is needed."); + return; + } + const c = { + ...this.currentDashboard, + isRoot: false, + children: this.layout, + }; + let res: AxiosResponse; + let json; + + if (this.currentDashboard.id) { + res = await graphql.query("updateTemplate").params({ + setting: { + id: this.currentDashboard.id, + configuration: JSON.stringify(c), + }, + }); + json = res.data.data.changeTemplate; + } else { + const index = this.dashboards.findIndex( + (d: { name: string; entity: string; layer: string; id: string }) => + d.name === this.currentDashboard.name && + d.entity === this.currentDashboard.entity && + d.layer === this.currentDashboard.layerId + ); + if (index > -1) { + ElMessage.error("The dashboard name cannot be duplicate."); + return; + } + res = await graphql + .query("addNewTemplate") + .params({ setting: { configuration: JSON.stringify(c) } }); + + json = res.data.data.addTemplate; + } + if (res.data.errors) { + ElMessage.error(res.data.errors); + return res.data; + } + if (!json.status) { + ElMessage.error(json.message); + return; + } + ElMessage.success("Saved successfully"); + + this.dashboards.push({ + id: json.id, + name, + layer: this.layerId, + entity: this.entity, + isRoot: true, + }); + const key = [ + this.layer, + this.entity, + this.currentDashboard.name.split(" ").join("-"), + ].join("_"); + const l = { id: json.id, configuration: c }; + sessionStorage.setItem(key, JSON.stringify(l)); + sessionStorage.setItem("dashboards", JSON.stringify(this.dashboards)); + }, + async deleteDashbaord() { + const res: AxiosResponse = await graphql + .query("removeTemplate") + .params({ id: this.currentDashboard.id }); + + if (res.data.errors) { + ElMessage.error(res.data.errors); + return res.data; + } + const json = res.data.data.disableTemplate; + if (!json.status) { + ElMessage.error(json.message); + return res.data; + } + this.dashboards = this.dashboards.filter( + (d: any) => d.id !== this.currentDashboard.id + ); + const key = [ + this.currentDashboard.layer, + this.currentDashboard.entity, + this.currentDashboard.name.split(" ").join("-"), + ].join("_"); + sessionStorage.removeItem(key); + }, }, }); diff --git a/src/views/dashboard/Edit.vue b/src/views/dashboard/Edit.vue index f9f2afd6..3ada8530 100644 --- a/src/views/dashboard/Edit.vue +++ b/src/views/dashboard/Edit.vue @@ -63,6 +63,7 @@ async function setTemplate() { sessionStorage.getItem(layoutKey) || "{}" ); const layout = JSON.parse(c.configuration || "{}"); + dashboardStore.setLayout(layout.children || []); } function handleClick(e: any) { diff --git a/src/views/dashboard/List.vue b/src/views/dashboard/List.vue index cd9d943b..8d48de8e 100644 --- a/src/views/dashboard/List.vue +++ b/src/views/dashboard/List.vue @@ -51,7 +51,7 @@ limitations under the License. -->