You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by wu...@apache.org on 2020/06/08 10:55:55 UTC
[skywalking-rocketbot-ui] branch master updated: Bugfix: Dashboard
templates (#307)
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 202e2df Bugfix: Dashboard templates (#307)
202e2df is described below
commit 202e2dfb556029865379410a88acdaf45c881ff8
Author: Qiuxia Fan <fi...@outlook.com>
AuthorDate: Mon Jun 8 18:55:44 2020 +0800
Bugfix: Dashboard templates (#307)
---
src/assets/lang/en.ts | 13 ++++--
src/assets/lang/zh.ts | 11 +++--
.../modules/dashboard/dashboard-data-query.ts | 4 +-
.../components/dashboard/charts/chart-edit.vue | 15 ++++++-
src/views/components/dashboard/tool-bar-btns.vue | 6 ++-
src/views/components/dashboard/tool-group.vue | 10 ++---
src/views/containers/dashboard.vue | 50 +++++++++++++---------
7 files changed, 71 insertions(+), 38 deletions(-)
diff --git a/src/assets/lang/en.ts b/src/assets/lang/en.ts
index 105cd99..3494489 100644
--- a/src/assets/lang/en.ts
+++ b/src/assets/lang/en.ts
@@ -32,9 +32,9 @@ const m = {
copy: 'Copy',
reset: 'Reset',
apply: 'Apply',
- createGroup: 'Create Group',
- groupType: 'Group Type',
- groupName: 'Group Name',
+ createTemplate: 'Create Template',
+ templateType: 'Template Type',
+ templateName: 'Template Name',
template: 'Template',
confirm: 'Confirm',
cancel: 'Cancel',
@@ -128,7 +128,7 @@ const m = {
excludeChildren: 'Exclude Children',
view: 'View',
timeTips: 'Time interval cannot exceed 60 days',
- standardAPM: 'Standard APM',
+ standardAPM: 'Standard',
entityType: 'Entity type',
independentSelector: 'Selectors',
unknownMetrics: 'Unknown Metrics',
@@ -142,6 +142,11 @@ const m = {
serviceFilter: 'Service Filter',
endpointFilter: 'Endpoint Filter',
editConfig: 'Edit Config',
+ databaseView: 'Database',
+ metricsView: 'NOC - Network Operation Center',
+ sortOrder: 'Sort Order',
+ descendOrder: 'Descend Order',
+ increaseOrder: 'Increase Order',
};
export default m;
diff --git a/src/assets/lang/zh.ts b/src/assets/lang/zh.ts
index e8fcfb2..6d539db 100644
--- a/src/assets/lang/zh.ts
+++ b/src/assets/lang/zh.ts
@@ -32,9 +32,9 @@ const m = {
copy: '拷贝',
reset: '重制',
apply: '应用',
- createGroup: '创建分组',
- groupType: '分组类型',
- groupName: '分组名',
+ createTemplate: '创建模板',
+ templateType: '模板类型',
+ templateName: '模板名称',
template: '模版',
confirm: '确定',
cancel: '取消',
@@ -142,6 +142,11 @@ const m = {
serviceFilter: '服务过滤器',
endpointFilter: '端点过滤器',
editConfig: '编辑',
+ databaseView: '数据库视图',
+ metricsView: '大屏视图',
+ sortOrder: '排序方式',
+ descendOrder: '递减顺序',
+ increaseOrder: '递增顺序',
};
export default m;
diff --git a/src/store/modules/dashboard/dashboard-data-query.ts b/src/store/modules/dashboard/dashboard-data-query.ts
index 1e7b013..f8d6aee 100644
--- a/src/store/modules/dashboard/dashboard-data-query.ts
+++ b/src/store/modules/dashboard/dashboard-data-query.ts
@@ -66,7 +66,7 @@ const actions: ActionTree<State, any> = {
normal: true,
scope: config.entityType,
topN: 10,
- order: 'DES',
+ order: config.sortOrder || 'DES',
},
}
: {
@@ -90,7 +90,7 @@ const actions: ActionTree<State, any> = {
normal,
scope: normal ? config.entityType : config.parentService ? 'Service' : config.entityType,
topN: 10,
- order: 'DES',
+ order: config.sortOrder || 'DES',
},
}
: {
diff --git a/src/views/components/dashboard/charts/chart-edit.vue b/src/views/components/dashboard/charts/chart-edit.vue
index b2f7b6c..37bb7ef 100755
--- a/src/views/components/dashboard/charts/chart-edit.vue
+++ b/src/views/components/dashboard/charts/chart-edit.vue
@@ -156,7 +156,7 @@ limitations under the License. -->
<option v-for="type in IndependentType" :value="type.key" :key="type.key">{{ type.label }}</option>
</select>
</div>
- <div class="flex-h mb-5" v-show="isParentService.includes(itemConfig.queryMetricType)">
+ <div class="flex-h mb-5" v-show="nameMetrics.includes(itemConfig.queryMetricType)">
<div class="title grey sm">{{ $t('parentService') }}:</div>
<select
class="long"
@@ -167,6 +167,17 @@ limitations under the License. -->
<option :value="false">{{ $t('noneParentService') }}</option>
</select>
</div>
+ <div class="flex-h mb-5" v-show="nameMetrics.includes(itemConfig.queryMetricType)">
+ <div class="title grey sm">{{ $t('sortOrder') }}:</div>
+ <select
+ class="long"
+ v-model="itemConfig.sortOrder"
+ @change="setItemConfig({ type: 'sortOrder', value: $event.target.value })"
+ >
+ <option :value="'DES'">{{ $t('descendOrder') }}</option>
+ <option :value="'ASC'">{{ $t('increaseOrder') }}</option>
+ </select>
+ </div>
<div class="flex-h mb-5">
<div class="title grey sm">{{ $t('unit') }}:</div>
<input
@@ -255,7 +266,7 @@ limitations under the License. -->
private queryMetricTypesList: any = [];
private isDatabase = false;
private isLabel = false;
- private isParentService = ['sortMetrics', 'readSampledRecords'];
+ private nameMetrics = ['sortMetrics', 'readSampledRecords'];
private created() {
this.itemConfig = this.item;
diff --git a/src/views/components/dashboard/tool-bar-btns.vue b/src/views/components/dashboard/tool-bar-btns.vue
index 4543a40..607dff1 100644
--- a/src/views/components/dashboard/tool-bar-btns.vue
+++ b/src/views/components/dashboard/tool-bar-btns.vue
@@ -83,9 +83,11 @@
}
}
private exportData() {
- const data = this.rocketComps.tree;
+ const group = this.rocketComps.tree[this.rocketComps.group];
+ delete group.query;
const name = 'dashboard.json';
- saveFile(data, name);
+
+ saveFile([group], name);
}
}
</script>
diff --git a/src/views/components/dashboard/tool-group.vue b/src/views/components/dashboard/tool-group.vue
index f5b68ac..fd256ec 100644
--- a/src/views/components/dashboard/tool-group.vue
+++ b/src/views/components/dashboard/tool-group.vue
@@ -37,14 +37,14 @@ limitations under the License. -->
<use xlink:href="#todo-add"></use>
</svg>
<div class="rk-dashboard-group-add-box" v-if="show">
- <div class="mb-10 vm">{{ $t('createGroup') }}</div>
- <div class="sm grey mb-5 mr-10">{{ $t('groupType') }}</div>
+ <div class="mb-10 vm">{{ $t('createTemplate') }}</div>
+ <div class="sm grey mb-5 mr-10">{{ $t('templateType') }}</div>
<select v-model="type" class="rk-dashboard-group-sel">
<option :value="DASHBOARDTYPE.SERVICE">{{ $t('standardAPM') }}</option>
- <option :value="DASHBOARDTYPE.METRIC">{{ $t('metrics') }}</option>
- <option :value="DASHBOARDTYPE.DATABASE">{{ $t('database') }}</option>
+ <option :value="DASHBOARDTYPE.METRIC">{{ $t('metricsView') }}</option>
+ <option :value="DASHBOARDTYPE.DATABASE">{{ $t('databaseView') }}</option>
</select>
- <div class="sm grey mb-5 mr-10">{{ $t('groupName') }}</div>
+ <div class="sm grey mb-5 mr-10">{{ $t('templateName') }}</div>
<input class="mb-5 rk-dashboard-group-input" type="text" v-model="name" />
<div v-show="type === 'database'">
<label class="mb-10 dib"><input type="checkbox" v-model="template" />{{ $t('template') }}</label>
diff --git a/src/views/containers/dashboard.vue b/src/views/containers/dashboard.vue
index beffe15..b62374b 100644
--- a/src/views/containers/dashboard.vue
+++ b/src/views/containers/dashboard.vue
@@ -49,6 +49,13 @@ limitations under the License. -->
import ToolNav from '@/views/components/dashboard/tool-nav.vue';
import DashboardItem from '@/views/components/dashboard/dashboard-item.vue';
+ interface ITemplate {
+ name: string;
+ type: string;
+ configuration: string;
+ activated: boolean;
+ disabled: boolean;
+ }
@Component({
components: {
ToolBar,
@@ -100,28 +107,31 @@ limitations under the License. -->
// }).then((data: any) => {
// console.log(data);
// });
- this.GET_ALL_TEMPLATES().then(
- (
- allTemplate: Array<{
- name: string;
- type: string;
- configuration: string;
- activated: boolean;
- disabled: boolean;
- }>,
- ) => {
- this.SET_ALL_TEMPLATES(allTemplate);
- if (window.localStorage.getItem('dashboard')) {
- const data: string = `${window.localStorage.getItem('dashboard')}`;
- this.SET_COMPS_TREE(JSON.parse(data));
- } else {
- const template = allTemplate.filter((item: any) => item.type === 'DASHBOARD' && item.activated)[0] || {};
- this.SET_COMPS_TREE(JSON.parse(template.configuration) || []);
- }
- },
- );
+ this.GET_ALL_TEMPLATES().then((allTemplate: ITemplate[]) => {
+ this.SET_ALL_TEMPLATES(allTemplate);
+ if (window.localStorage.getItem('version') !== '8.0') {
+ window.localStorage.removeItem('dashboard');
+ this.setDashboardTemplates(allTemplate);
+ this.handleOption();
+ return;
+ }
+ if (window.localStorage.getItem('dashboard')) {
+ const data: string = `${window.localStorage.getItem('dashboard')}`;
+ this.SET_COMPS_TREE(JSON.parse(data));
+ } else {
+ this.setDashboardTemplates(allTemplate);
+ }
+ });
this.handleOption();
}
+ private setDashboardTemplates(allTemplate: ITemplate[]) {
+ 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));
+ }
private beforeDestroy() {
this.SET_EDIT(false);
}