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/10 04:43:52 UTC
[skywalking-rocketbot-ui] branch master updated: Bugfix:
version8.0.0 (#311)
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 6a1631d Bugfix: version8.0.0 (#311)
6a1631d is described below
commit 6a1631d2fc24aa433c12bb57bdd71ecb220a0501
Author: Qiuxia Fan <fi...@outlook.com>
AuthorDate: Wed Jun 10 12:43:43 2020 +0800
Bugfix: version8.0.0 (#311)
* feat: remove default config
* feat: add item in endpoint and instance topology
* fix: ReadLabeledMetricsValues labels
* fix: add yAxis data in heatmap
---
src/components/rk-sidebox.vue | 2 +-
.../modules/dashboard/dashboard-data-layout.ts | 13 ++++--------
src/store/modules/topology/index.ts | 24 ++++++++++++++++++++++
src/store/mutation-types.ts | 2 ++
.../components/dashboard/charts/chart-heatmap.vue | 8 +++++---
src/views/components/dashboard/dashboard-item.vue | 21 ++++++++++++-------
src/views/components/dashboard/tool-group.vue | 20 +-----------------
.../topology/endpoint/endpoints-survey.vue | 6 +++++-
.../topology/instance/instances-survey.vue | 6 +++++-
9 files changed, 61 insertions(+), 41 deletions(-)
diff --git a/src/components/rk-sidebox.vue b/src/components/rk-sidebox.vue
index fff58aa..c2ce741 100644
--- a/src/components/rk-sidebox.vue
+++ b/src/components/rk-sidebox.vue
@@ -89,7 +89,7 @@ limitations under the License. -->
.rk-sidebox-inner-fixed {
height: 100%;
padding: 0;
- overflow: hidden;
+ overflow: auto;
}
.rk-sidebox-title {
font-size: 16px;
diff --git a/src/store/modules/dashboard/dashboard-data-layout.ts b/src/store/modules/dashboard/dashboard-data-layout.ts
index 0b44edb..57906aa 100644
--- a/src/store/modules/dashboard/dashboard-data-layout.ts
+++ b/src/store/modules/dashboard/dashboard-data-layout.ts
@@ -86,17 +86,12 @@ const mutations: MutationTree<State> = {
state.group = index;
state.current = current;
},
- [types.ADD_COMPS_GROUP](state: State, params: any) {
+ [types.ADD_COMPS_GROUP](state: State, params: { type: string; name: string }) {
if (!params.name) {
return;
}
- const templates = state.allTemplates.filter((item: any) => item.type === 'DASHBOARD' && item.activated)[0] || {};
- const tree = JSON.parse(templates.configuration) || [];
- const groupServiceTemp = tree.filter((item: any) => item.type === 'service')[0] || {};
- const groupDatabaseTemp = tree.filter((item: any) => item.type === 'database')[0] || {};
-
- switch (params.template) {
+ switch (params.type) {
case 'metric':
const newTree = [];
Object.keys(state.tree).forEach((i: any) => {
@@ -114,7 +109,7 @@ const mutations: MutationTree<State> = {
name: params.name,
type: params.type,
query: {},
- children: groupServiceTemp.children || [],
+ children: [{ name: 'demo', children: [] }],
});
state.tree = newServerTree;
break;
@@ -127,7 +122,7 @@ const mutations: MutationTree<State> = {
name: params.name,
type: params.type,
query: {},
- children: groupDatabaseTemp.children || [],
+ children: [{ name: 'demo', children: [] }],
});
state.tree = newDatabaseTree;
break;
diff --git a/src/store/modules/topology/index.ts b/src/store/modules/topology/index.ts
index a0c02d4..bdf4b22 100644
--- a/src/store/modules/topology/index.ts
+++ b/src/store/modules/topology/index.ts
@@ -239,6 +239,30 @@ const mutations = {
state.topoInstances.splice(index, 1);
window.localStorage.setItem('topologyInstances', JSON.stringify(state.topoInstances));
},
+ [types.ADD_TOPO_INSTANCE_COMP](state: State) {
+ const comp = {
+ width: 3,
+ title: 'Title',
+ height: 350,
+ entityType: 'ServiceInstance',
+ independentSelector: false,
+ metricType: 'UNKNOWN',
+ };
+ state.topoInstances.push(comp);
+ window.localStorage.setItem('topologyInstances', JSON.stringify(state.topoInstances));
+ },
+ [types.ADD_TOPO_ENDPOINT_COMP](state: State) {
+ const comp = {
+ width: 3,
+ title: 'Title',
+ height: 350,
+ entityType: 'Endpoint',
+ independentSelector: false,
+ metricType: 'UNKNOWN',
+ };
+ state.topoEndpoints.push(comp);
+ window.localStorage.setItem('topologyEndpoints', JSON.stringify(state.topoEndpoints));
+ },
};
// actions
diff --git a/src/store/mutation-types.ts b/src/store/mutation-types.ts
index 1470311..0605563 100644
--- a/src/store/mutation-types.ts
+++ b/src/store/mutation-types.ts
@@ -94,6 +94,8 @@ export const EDIT_TOPO_INSTANCE_CONFIG = 'EDIT_TOPO_INSTANCE_CONFIG';
export const EDIT_TOPO_ENDPOINT_CONFIG = 'EDIT_TOPO_ENDPOINT_CONFIG';
export const DELETE_TOPO_INSTANCE = 'DELETE_TOPO_INSTANCE';
export const DELETE_TOPO_ENDPOINT = 'DELETE_TOPO_ENDPOINT';
+export const ADD_TOPO_INSTANCE_COMP = 'ADD_TOPO_INSTANCE_COMP';
+export const ADD_TOPO_ENDPOINT_COMP = 'ADD_TOPO_ENDPOINT_COMP';
// profile
export const SET_TASK_OPTIONS = 'SET_TASK_OPTIONS';
diff --git a/src/views/components/dashboard/charts/chart-heatmap.vue b/src/views/components/dashboard/charts/chart-heatmap.vue
index 35a4890..867d205 100644
--- a/src/views/components/dashboard/charts/chart-heatmap.vue
+++ b/src/views/components/dashboard/charts/chart-heatmap.vue
@@ -28,6 +28,7 @@ limitations under the License. -->
@Prop() private type!: string;
@Prop() private data!: any;
@Prop() private intervalTime!: any;
+ @Prop() private item!: any;
public resize() {
const chart: any = this.$refs.chart;
chart.myChart.resize();
@@ -61,7 +62,7 @@ limitations under the License. -->
return {
tooltip: {
position: 'top',
- formatter: (a: any) => `${a.data[1] * 100}ms [ ${a.data[2]} ]`,
+ formatter: (a: any) => `${a.data[1] * 100}${this.item.unit} [ ${a.data[2]} ]`,
textStyle: {
fontSize: 13,
},
@@ -95,11 +96,12 @@ limitations under the License. -->
},
],
yAxis: {
- type: 'value',
+ type: 'category',
axisLine: { show: false },
axisTick: { show: false },
splitLine: { lineStyle: { color: '#c1c5ca', type: 'dashed' } },
- axisLabel: { color: '#9da5b2', fontSize: '11', formatter: (a: number) => `${a * 100}ms` },
+ axisLabel: { color: '#9da5b2', fontSize: '11' },
+ data: this.data.buckets,
},
series: [
{
diff --git a/src/views/components/dashboard/dashboard-item.vue b/src/views/components/dashboard/dashboard-item.vue
index b4e7f59..b6006e4 100644
--- a/src/views/components/dashboard/dashboard-item.vue
+++ b/src/views/components/dashboard/dashboard-item.vue
@@ -144,9 +144,8 @@ limitations under the License. -->
private chartValue(data: Array<{ metricName: string; [key: string]: any; config: any }>) {
this.chartSource = {};
for (const params of data) {
- const { queryMetricType, aggregation, aggregationNum, metricLabels } = params.config;
+ const { queryMetricType, aggregation, aggregationNum, metricLabels, labelsIndex } = params.config;
const resVal = params[queryMetricType];
- const labels = (metricLabels || '').split(',').map((item: string) => item.replace(/^\s*|\s*$/g, ''));
if (queryMetricType === QueryTypes.ReadMetricsValue) {
this.chartSource = {
@@ -190,22 +189,30 @@ limitations under the License. -->
nodes.push(...grids);
});
+ let buckets = [] as any;
+ if (resVal.buckets.length) {
+ buckets = [resVal.buckets[0].min, ...resVal.buckets.map((item: { min: string; max: string }) => item.max)];
+ }
- this.chartSource = { nodes }; // nodes: number[][]
+ this.chartSource = { nodes, buckets }; // nodes: number[][]
}
if (queryMetricType === QueryTypes.ReadLabeledMetricsValues) {
+ const labels = (metricLabels || '').split(',').map((item: string) => item.replace(/^\s*|\s*$/g, ''));
+ const indexList = (labelsIndex || '').split(',').map((item: string) => item.replace(/^\s*|\s*$/g, ''));
+
this.chartSource = {};
- (resVal || []).forEach((item: any, index: number) => {
+ for (const item of resVal || []) {
const list = item.values.values.map((d: { value: number }) =>
this.aggregationValue({ data: d.value, type: aggregation, aggregationNum: Number(aggregationNum) }),
);
- if (labels[index]) {
- this.chartSource[labels[index]] = list; // {[label: string]: number[]}
+ const indexNum = indexList.findIndex((d: string) => d === item.label);
+ if (labels[indexNum] && indexNum > -1) {
+ this.chartSource[labels[indexNum]] = list; // {[label: string]: number[]}
} else {
this.chartSource[item.label] = list;
}
- });
+ }
}
}
}
diff --git a/src/views/components/dashboard/tool-group.vue b/src/views/components/dashboard/tool-group.vue
index 85d6cbf..2225978 100644
--- a/src/views/components/dashboard/tool-group.vue
+++ b/src/views/components/dashboard/tool-group.vue
@@ -46,9 +46,6 @@ limitations under the License. -->
</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" />
- <div v-show="type === 'database'">
- <label class="mb-10 dib"><input type="checkbox" v-model="template" />{{ $t('template') }}</label>
- </div>
<a class="rk-btn r vm long tc confirm" @click="handleCreate">{{ $t('confirm') }}</a>
</div>
</a>
@@ -76,7 +73,6 @@ limitations under the License. -->
private name: string = '';
private type: string = DASHBOARDTYPE.SERVICE;
private show: boolean = false;
- private template: boolean = false;
private DASHBOARDTYPE = DASHBOARDTYPE;
private get compType() {
@@ -98,22 +94,8 @@ limitations under the License. -->
this.show = false;
}
private handleCreate() {
- let template = DASHBOARDTYPE.METRIC;
- if (this.type === DASHBOARDTYPE.SERVICE) {
- template = DASHBOARDTYPE.SERVICE;
- }
- if (this.type === DASHBOARDTYPE.METRIC) {
- template = DASHBOARDTYPE.METRIC;
- }
- if (this.type === DASHBOARDTYPE.DATABASE) {
- template = DASHBOARDTYPE.DATABASE;
- if (!this.template) {
- template = DASHBOARDTYPE.METRIC;
- }
- }
- this.ADD_COMPS_GROUP({ name: this.name, type: this.type, template });
+ this.ADD_COMPS_GROUP({ name: this.name, type: this.type });
this.handleHide();
- this.template = false;
}
}
</script>
diff --git a/src/views/containers/topology/endpoint/endpoints-survey.vue b/src/views/containers/topology/endpoint/endpoints-survey.vue
index 47772f4..37a9636 100644
--- a/src/views/containers/topology/endpoint/endpoints-survey.vue
+++ b/src/views/containers/topology/endpoint/endpoints-survey.vue
@@ -24,13 +24,16 @@ limitations under the License. -->
:type="'TOPOLOGY_ENDPOINT'"
:updateObjects="updateObjects"
/>
+ <div v-show="rocketGlobal.edit" class="rk-add-dashboard-item g-sm-3" @click="ADD_TOPO_ENDPOINT_COMP">
+ + Add An Item
+ </div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
- import { State } from 'vuex-class';
+ import { State, Mutation } from 'vuex-class';
import DashboardItem from '@/views/components/dashboard/dashboard-item.vue';
@Component({
@@ -40,6 +43,7 @@ limitations under the License. -->
})
export default class InstancesSurvey extends Vue {
@State('rocketbot') private rocketGlobal: any;
+ @Mutation('rocketTopo/ADD_TOPO_ENDPOINT_COMP') private ADD_TOPO_ENDPOINT_COMP: any;
@Prop() private endpointComps: any;
@Prop() private updateObjects!: string;
}
diff --git a/src/views/containers/topology/instance/instances-survey.vue b/src/views/containers/topology/instance/instances-survey.vue
index 929bc84..4e589f6 100644
--- a/src/views/containers/topology/instance/instances-survey.vue
+++ b/src/views/containers/topology/instance/instances-survey.vue
@@ -24,13 +24,16 @@ limitations under the License. -->
:type="'TOPOLOGY_INSTANCE'"
:updateObjects="updateObjects"
/>
+ <div v-show="rocketGlobal.edit" class="rk-add-dashboard-item g-sm-3" @click="ADD_TOPO_INSTANCE_COMP">
+ + Add An Item
+ </div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
- import { State } from 'vuex-class';
+ import { State, Mutation } from 'vuex-class';
import DashboardItem from '@/views/components/dashboard/dashboard-item.vue';
@Component({
@@ -40,6 +43,7 @@ limitations under the License. -->
})
export default class InstancesSurvey extends Vue {
@State('rocketbot') private rocketGlobal: any;
+ @Mutation('rocketTopo/ADD_TOPO_INSTANCE_COMP') private ADD_TOPO_INSTANCE_COMP: any;
@Prop() private instanceComps: any;
@Prop() private updateObjects!: string;
}