This is an automated email from the ASF dual-hosted git repository. wusheng pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/skywalking-rocketbot-ui.git
The following commit(s) were added to refs/heads/master by this push: new b35fb06 Feat: Create a dashboard template using the default template (#326) b35fb06 is described below commit b35fb06354ce97ea3be2ec4f1896afe1371b5152 Author: Qiuxia Fan <fine0...@outlook.com> AuthorDate: Fri Jul 10 15:04:40 2020 +0800 Feat: Create a dashboard template using the default template (#326) --- src/assets/lang/en.ts | 2 +- src/components/rk-header.vue | 2 +- .../modules/dashboard/dashboard-data-layout.ts | 19 +++++++----- src/store/modules/dashboard/mutation-types.ts | 1 + src/views/components/dashboard/tool-group.vue | 35 ++++++++++++++++++++-- src/views/components/topology/topo-group/index.vue | 21 ++++++++----- src/views/containers/dashboard.vue | 26 ++++++++++------ 7 files changed, 79 insertions(+), 27 deletions(-) diff --git a/src/assets/lang/en.ts b/src/assets/lang/en.ts index 05ce744..a77d413 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 7127694..3e5d6bd 100644 --- a/src/components/rk-header.vue +++ b/src/components/rk-header.vue @@ -39,7 +39,7 @@ limitations under the License. --> </router-link> <router-link class="nav-link mr-20" to="/profile"> <svg class="icon sm vm"> - <use xlink:href="#merge"></use> + <use xlink:href="#timeline"></use> </svg> <span class="vm hide-xs ml-5">{{ this.$t('profile') }}</span> </router-link> diff --git a/src/store/modules/dashboard/dashboard-data-layout.ts b/src/store/modules/dashboard/dashboard-data-layout.ts index 51ac6d6..27d2879 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> = { 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> = { 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 8da2958..d43fb6f 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 2225978..00e9d94 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. --> <option :value="DASHBOARDTYPE.METRIC">{{ $t('metricsView') }}</option> <option :value="DASHBOARDTYPE.DATABASE">{{ $t('databaseView') }}</option> </select> + <div class="sm grey mb-5 mr-10" v-show="type !== DASHBOARDTYPE.METRIC">{{ $t('templateConfig') }}</div> + <select v-model="templateName" class="rk-dashboard-group-sel" v-show="type !== DASHBOARDTYPE.METRIC"> + <option :value="''">None</option> + <option v-for="template in templates" :key="template.name" :value="template.name">{{ template.name }}</option> + </select> <div class="sm grey mb-5 mr-10">{{ $t('templateName') }}</div> <input class="mb-5 rk-dashboard-group-input" type="text" v-model="name" /> <a class="rk-btn r vm long tc confirm" @click="handleCreate">{{ $t('confirm') }}</a> @@ -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 6ace529..6508a67 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. */ +<!-- 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. --> <template> <div class="topo-group"> diff --git a/src/views/containers/dashboard.vue b/src/views/containers/dashboard.vue index f996dd4..b48b530 100644 --- a/src/views/containers/dashboard.vue +++ b/src/views/containers/dashboard.vue @@ -78,6 +78,7 @@ limitations under the License. --> @Mutation('SET_COMPS_TREE') private SET_COMPS_TREE: any; @Mutation('ADD_COMP') private ADD_COMP: any; @Mutation('SET_EDIT') private SET_EDIT: any; + @Mutation('SET_TEMPLATES') private SET_TEMPLATES: any; private ObjectsType = ObjectsType; @@ -110,17 +111,24 @@ limitations under the License. --> // }).then((data: any) => { // console.log(data); // }); - if (window.localStorage.getItem('version') !== '8.0') { - this.GET_ALL_TEMPLATES().then((allTemplate: ITemplate[]) => { + this.GET_ALL_TEMPLATES().then((allTemplate: ITemplate[]) => { + const dashboardTemplate = allTemplate.filter((item: ITemplate) => item.type === 'DASHBOARD'); + const templatesConfig = dashboardTemplate.map((item: ITemplate) => JSON.parse(item.configuration)).flat(1); + this.SET_TEMPLATES(templatesConfig); + if (window.localStorage.getItem('version') !== '8.0') { window.localStorage.removeItem('dashboard'); - this.setDashboardTemplates(allTemplate); + const template = allTemplate.filter((item: ITemplate) => item.type === 'DASHBOARD' && item.activated); + const templatesConfiguration = template.map((item: ITemplate) => JSON.parse(item.configuration)).flat(1); + this.SET_COMPS_TREE(templatesConfiguration || []); + window.localStorage.setItem('version', '8.0'); + window.localStorage.setItem('dashboard', JSON.stringify(templatesConfiguration)); this.handleOption(); - }); - } else { - const data: string = `${window.localStorage.getItem('dashboard')}`; - this.SET_COMPS_TREE(JSON.parse(data)); - } - this.handleOption(); + } else { + const data: string = `${window.localStorage.getItem('dashboard')}`; + this.SET_COMPS_TREE(JSON.parse(data)); + this.handleOption(); + } + }); } private setDashboardTemplates(allTemplate: ITemplate[]) { const template = allTemplate.filter((item: ITemplate) => item.type === 'DASHBOARD' && item.activated);