diff --git a/src/assets/lang/en.ts b/src/assets/lang/en.ts index 05ce744311fcd7871097e8e6b323257eeac2453c..a77d41376fdc704c02fdca9349aa729da2aba25b 100644 --- a/src/assets/lang/en.ts +++ b/src/assets/lang/en.ts @@ -28,7 +28,7 @@ const m = { currentEndpoint: 'Current Endpoint', currentInstance: 'Current Instance', currentDatabase: 'Current Database', - templateConfig: 'Template Config', + templateConfig: 'Template Configuration', copy: 'Copy', reset: 'Reset', apply: 'Apply', diff --git a/src/components/rk-header.vue b/src/components/rk-header.vue index 712769406283578ca8b1ca59acd5e4486e3e6aac..3e5d6bd9f4bd097247f20422be4e46f504f441b4 100644 --- a/src/components/rk-header.vue +++ b/src/components/rk-header.vue @@ -39,7 +39,7 @@ limitations under the License. --> - + {{ this.$t('profile') }} diff --git a/src/store/modules/dashboard/dashboard-data-layout.ts b/src/store/modules/dashboard/dashboard-data-layout.ts index 51ac6d6ab98d8663791dd4b7c9dec108543bd3aa..27d2879fba26e1a46670ad219d00d808aebf232f 100644 --- a/src/store/modules/dashboard/dashboard-data-layout.ts +++ b/src/store/modules/dashboard/dashboard-data-layout.ts @@ -23,6 +23,7 @@ export interface State { group: number; index: number; tree: CompsTree[]; + templates: CompsTree[]; } export const initState: State = { @@ -42,6 +43,7 @@ export const initState: State = { children: [], }, ], + templates: [], }; // mutations @@ -70,17 +72,17 @@ const mutations: MutationTree = { state.group = index; state.current = current; }, - [types.ADD_COMPS_GROUP](state: State, params: { type: string; name: string }) { + [types.ADD_COMPS_GROUP](state: State, params: { type: string; name: string; templateName: string }) { if (!params.name) { return; } + const template = state.templates.filter((item) => item.name === params.templateName && params.type === item.type); + let group = { name: params.name, type: params.type, query: {}, children: [{ name: 'demo', children: [] }] }; - const newTree = []; - Object.keys(state.tree).forEach((i: any) => { - newTree.push(state.tree[i]); - }); - newTree.push({ name: params.name, type: params.type, query: {}, children: [{ name: 'demo', children: [] }] }); - state.tree = newTree; + if (template.length) { + group = { ...group, children: template[0].children }; + } + state.tree.push(group); window.localStorage.setItem('dashboard', JSON.stringify(state.tree)); }, @@ -131,6 +133,9 @@ const mutations: MutationTree = { state.tree[state.group].children[state.current].children[params.index] = { ...temp, ...params.values }; window.localStorage.setItem('dashboard', JSON.stringify(state.tree)); }, + [types.SET_TEMPLATES](state: State, templates) { + state.templates = templates; + }, }; export default { diff --git a/src/store/modules/dashboard/mutation-types.ts b/src/store/modules/dashboard/mutation-types.ts index 8da2958b5c69d863f89ead94a40f4192b0fb48ed..d43fb6febdf9aed2d88f96fd306f39d42db66748 100644 --- a/src/store/modules/dashboard/mutation-types.ts +++ b/src/store/modules/dashboard/mutation-types.ts @@ -34,6 +34,7 @@ export const SET_INSTANCES = 'SET_INSTANCES'; export const SET_CURRENT_INSTANCE = 'SET_CURRENT_INSTANCE'; export const SET_INSTANCE_INFO = 'SET_INSTANCE_INFO'; export const SET_KEYWORDSERVICE = 'SET_KEYWORDSERVICE'; +export const SET_TEMPLATES = 'SET_TEMPLATES'; // comp export const SET_CURRENT_GROUP = 'SET_CURRENT_GROUP'; diff --git a/src/views/components/dashboard/tool-group.vue b/src/views/components/dashboard/tool-group.vue index 22259784ecf10dfe0ad325e3c884930ae0b8cc2f..00e9d9466aecbe35d76139b44973baff523c6724 100644 --- a/src/views/components/dashboard/tool-group.vue +++ b/src/views/components/dashboard/tool-group.vue @@ -44,6 +44,11 @@ limitations under the License. --> +
{{ $t('templateConfig') }}
+
{{ $t('templateName') }}
{{ $t('confirm') }} @@ -74,6 +79,7 @@ limitations under the License. --> private type: string = DASHBOARDTYPE.SERVICE; private show: boolean = false; private DASHBOARDTYPE = DASHBOARDTYPE; + private templateName: string = ''; private get compType() { return ( @@ -81,7 +87,31 @@ limitations under the License. --> 'service' ); } - private handleOption(index: any) { + private get servicesTemplates() { + const templates = this.rocketComps.templates.filter( + (item: { type: string; name: string; children: any[] }) => item.type === DASHBOARDTYPE.SERVICE, + ); + + return templates; + } + private get databaseTemplates() { + const templates = this.rocketComps.templates.filter( + (item: { type: string; name: string; children: any[] }) => item.type === DASHBOARDTYPE.DATABASE, + ); + + return templates; + } + private get templates() { + let templates = []; + if (this.type === DASHBOARDTYPE.SERVICE) { + templates = this.servicesTemplates; + } else if (this.type === DASHBOARDTYPE.DATABASE) { + templates = this.databaseTemplates; + } + + return templates; + } + private handleOption(index: number) { this.MIXHANDLE_CHANGE_GROUP(index); return this.MIXHANDLE_GET_OPTION({ compType: this.compType, @@ -92,9 +122,10 @@ limitations under the License. --> this.name = ''; this.type = DASHBOARDTYPE.SERVICE; this.show = false; + this.templateName = ''; } private handleCreate() { - this.ADD_COMPS_GROUP({ name: this.name, type: this.type }); + this.ADD_COMPS_GROUP({ name: this.name, type: this.type, templateName: this.templateName }); this.handleHide(); } } diff --git a/src/views/components/topology/topo-group/index.vue b/src/views/components/topology/topo-group/index.vue index 6ace529e002cc020eb60ec42439ec7c53e449bfa..6508a6757f43ff3dc0bda5c0dfbd89599e842dff 100644 --- a/src/views/components/topology/topo-group/index.vue +++ b/src/views/components/topology/topo-group/index.vue @@ -1,10 +1,17 @@ -/** * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreements. See the -NOTICE file distributed with * this work for additional information regarding copyright ownership. * The ASF licenses -this file to You under the Apache License, Version 2.0 * (the "License"); you may not use this file except in compliance -with * the License. You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless -required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS -IS" BASIS, * 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. */ +