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 2021/03/31 09:09:23 UTC
[skywalking-rocketbot-ui] branch master updated: feat: implement a
type of table chart in dashboard (#457)
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 486cd50 feat: implement a type of table chart in dashboard (#457)
486cd50 is described below
commit 486cd50c86bbe9f9412f78d72a81de23543d2764
Author: Qiuxia Fan <fi...@outlook.com>
AuthorDate: Wed Mar 31 17:09:16 2021 +0800
feat: implement a type of table chart in dashboard (#457)
---
src/assets/lang/en.ts | 1 +
src/assets/lang/zh.ts | 1 +
.../components/dashboard/charts/chart-brief.vue | 75 ---------------
.../components/dashboard/charts/chart-edit.vue | 2 +-
.../components/dashboard/charts/chart-heap.vue | 102 ---------------------
.../components/dashboard/charts/chart-instance.vue | 47 ----------
.../components/dashboard/charts/chart-num.vue | 2 +-
.../components/dashboard/charts/chart-sankey.vue | 66 -------------
.../components/dashboard/charts/chart-slow.vue | 2 +-
.../charts/{chart-count.vue => chart-table.vue} | 69 +++++++-------
.../components/dashboard/charts/chart-trace.vue | 69 --------------
src/views/components/dashboard/charts/constant.ts | 1 +
src/views/components/dashboard/charts/index.ts | 12 +--
src/views/components/dashboard/dashboard-item.vue | 6 +-
14 files changed, 50 insertions(+), 405 deletions(-)
diff --git a/src/assets/lang/en.ts b/src/assets/lang/en.ts
index 2db0f77..cafc189 100644
--- a/src/assets/lang/en.ts
+++ b/src/assets/lang/en.ts
@@ -200,6 +200,7 @@ const m = {
Check more details on the Configuration Vocabulary page`,
keywordsOfContentLogTips: 'Current storage of SkyWalking OAP server does not support this.',
instanceAttributes: 'Instance Attributes',
+ value: 'Value',
};
export default m;
diff --git a/src/assets/lang/zh.ts b/src/assets/lang/zh.ts
index eaf6922..bc9c321 100644
--- a/src/assets/lang/zh.ts
+++ b/src/assets/lang/zh.ts
@@ -198,6 +198,7 @@ const m = {
logsTagsTip: '只有core/default/searchableLogsTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。',
keywordsOfContentLogTips: 'SkyWalking OAP服务器的当前存储不支持此操作',
instanceAttributes: '查看实例属性',
+ value: '数值',
};
export default m;
diff --git a/src/views/components/dashboard/charts/chart-brief.vue b/src/views/components/dashboard/charts/chart-brief.vue
deleted file mode 100755
index 9082312..0000000
--- a/src/views/components/dashboard/charts/chart-brief.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<!-- 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 style="overflow: auto;height: 100%;" class="scroll_hide">
- <div class="rk-chart-brief">
- <div class="rk-chart-brief-i">
- <svg class="icon lg mr-15 vm">
- <use :xlink:href="`#package`"></use>
- </svg>
- <span class="vm">{{ $t('service') }}</span>
- <span class="r b">{{ data.numOfService }}</span>
- </div>
- <div class="rk-chart-brief-i">
- <svg class="icon lg mr-15 vm">
- <use :xlink:href="`#code`"></use>
- </svg>
- <span class="vm">{{ $t('endpoint') }}</span>
- <span class="r b">{{ data.numOfEndpoint }}</span>
- </div>
- <div class="rk-chart-brief-i">
- <svg class="icon lg mr-15 vm">
- <use :xlink:href="`#epic`"></use>
- </svg>
- <span class="vm">{{ $t('database') }}</span>
- <span class="r b">{{ data.numOfDatabase }}</span>
- </div>
- <div class="rk-chart-brief-i">
- <svg class="icon lg mr-15 vm">
- <use :xlink:href="`#token`"></use>
- </svg>
- <span class="vm">{{ $t('cache') }}</span>
- <span class="r b">{{ data.numOfCache }}</span>
- </div>
- <div class="rk-chart-brief-i">
- <svg class="icon lg mr-15 vm">
- <use :xlink:href="`#soft-unwrap`"></use>
- </svg>
- <span class="vm">MQ</span>
- <span class="r b">{{ data.numOfMQ }}</span>
- </div>
- </div>
- </div>
-</template>
-
-<script lang="ts">
- import Vue from 'vue';
- import { Component, Prop } from 'vue-property-decorator';
- import moment from 'dayjs';
- @Component
- export default class ChartBrief extends Vue {
- @Prop() private data!: any;
- @Prop() private intervalTime!: any;
- }
-</script>
-<style lang="scss">
- .rk-chart-brief {
- // height: 215px;
- }
- .rk-chart-brief-i {
- padding: 5px 0px;
- }
-</style>
diff --git a/src/views/components/dashboard/charts/chart-edit.vue b/src/views/components/dashboard/charts/chart-edit.vue
index 2fd719a..e161df1 100755
--- a/src/views/components/dashboard/charts/chart-edit.vue
+++ b/src/views/components/dashboard/charts/chart-edit.vue
@@ -546,7 +546,7 @@ limitations under the License. -->
}
}
</script>
-<style lang="scss">
+<style lang="scss" scoped>
.rk-chart-edit {
margin: 0 -10px;
height: 100%;
diff --git a/src/views/components/dashboard/charts/chart-heap.vue b/src/views/components/dashboard/charts/chart-heap.vue
deleted file mode 100644
index 23ce030..0000000
--- a/src/views/components/dashboard/charts/chart-heap.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<!-- 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>
- <rk-panel :title="title">
- <RkEcharts height="215px" :option="responseConfig" />
- </rk-panel>
-</template>
-
-<script lang="ts">
- import Vue from 'vue';
- import { Component, Prop } from 'vue-property-decorator';
-
- @Component
- export default class ChartHeap extends Vue {
- @Prop() private title!: string;
- @Prop() private stateDashboard!: any;
- @Prop() private intervalTime!: any;
- get responseConfig() {
- return {
- color: ['#3f96e3', '#3fbde3'],
- tooltip: {
- trigger: 'axis',
- backgroundColor: 'rgb(50,50,50)',
- textStyle: {
- fontSize: 13,
- },
- },
- legend: {
- icon: 'circle',
- top: 0,
- left: 0,
- itemWidth: 12,
- },
- grid: {
- top: 10,
- left: 0,
- right: 10,
- bottom: 5,
- containLabel: true,
- },
- xAxis: {
- type: 'category',
- axisTick: {
- lineStyle: { color: '#c1c5ca41' },
- alignWithLabel: true,
- },
- splitLine: { show: false },
- axisLine: { lineStyle: { color: 'rgba(0,0,0,0)' } },
- axisLabel: { color: '#9da5b2', fontSize: '11' },
- },
- yAxis: {
- type: 'value',
- axisLine: { show: false },
- axisTick: { show: false },
- splitLine: { lineStyle: { color: '#c1c5ca41', type: 'dashed' } },
- axisLabel: { color: '#9da5b2', fontSize: '11' },
- },
- series: [
- {
- data: this.stateDashboard.instanceInfo.heap.map((i: any, index: number) => [
- this.intervalTime[index],
- (i.value / 1048576).toFixed(2),
- ]),
- name: this.stateDashboard.instanceInfo.heap.length ? 'Value' : null,
- type: 'line',
- symbol: 'none',
- areaStyle: {},
- lineStyle: {
- width: 1.5,
- },
- },
- {
- data: this.stateDashboard.instanceInfo.heap.map((i: any, index: number) => [
- this.intervalTime[index],
- ((this.stateDashboard.instanceInfo.maxHeap[index].value - i.value) / 1048576).toFixed(2),
- ]),
- name: this.stateDashboard.instanceInfo.heap.length ? 'Free' : null,
- type: 'line',
- symbol: 'none',
- areaStyle: {},
- lineStyle: {
- width: 1.5,
- },
- },
- ],
- };
- }
- }
-</script>
diff --git a/src/views/components/dashboard/charts/chart-instance.vue b/src/views/components/dashboard/charts/chart-instance.vue
deleted file mode 100755
index de40e7b..0000000
--- a/src/views/components/dashboard/charts/chart-instance.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<!-- 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="chart-instance-info">
- <div class="ell mb-10 pt-10 b" v-tooltip="rocketOption.currentInstance.label || ''">
- {{ this.rocketOption.currentInstance.label }}
- </div>
- <div>
- <span class="mr-5 mb-5 grey">Language</span>
- <span>{{ this.rocketOption.currentInstance.language }}</span>
- </div>
- <div v-for="(i, index) in rocketOption.currentInstance.attributes" :key="index">
- <span class="mr-5 mb-5 grey">{{ i.name }}</span>
- <span>{{ i.value }}</span>
- </div>
- </div>
-</template>
-
-<script lang="ts">
- import Vue from 'vue';
- import { Component, Prop } from 'vue-property-decorator';
- import { State } from 'vuex-class';
- @Component
- export default class ChartInstance extends Vue {
- @State('rocketOption') private rocketOption!: any;
- @Prop() private intervalTime!: any;
- }
-</script>
-<style lang="scss">
- .chart-instance-info {
- height: 215px;
- overflow: auto;
- }
-</style>
diff --git a/src/views/components/dashboard/charts/chart-num.vue b/src/views/components/dashboard/charts/chart-num.vue
index 0970672..135a623 100644
--- a/src/views/components/dashboard/charts/chart-num.vue
+++ b/src/views/components/dashboard/charts/chart-num.vue
@@ -31,7 +31,7 @@ limitations under the License. -->
@Prop() private item!: any;
}
</script>
-<style lang="scss">
+<style lang="scss" scoped>
.rk-chart-num {
font-size: 14px;
color: #333;
diff --git a/src/views/components/dashboard/charts/chart-sankey.vue b/src/views/components/dashboard/charts/chart-sankey.vue
deleted file mode 100644
index 2cd88cc..0000000
--- a/src/views/components/dashboard/charts/chart-sankey.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<!-- 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>
- <RkEcharts ref="chart" :option="option" :autoResize="true" />
-</template>
-
-<script lang="ts">
- import Vue from 'vue';
- import { Component, Prop } from 'vue-property-decorator';
-
- @Component
- export default class ChartSankey extends Vue {
- @Prop() private title!: string;
- @Prop() private data!: any;
- @Prop() private intervalTime!: any;
- get option() {
- return {
- tooltip: {
- trigger: 'item',
- triggerOn: 'mousemove',
- backgroundColor: 'rgb(50,50,50)',
- textStyle: {
- fontSize: 13,
- },
- formatter: (a: any) => a.data.tip,
- },
- series: [
- {
- type: 'sankey',
- left: '30px',
- top: '20px',
- bottom: '20px',
- label: {
- formatter: (a: any) => a.data.content,
- },
- animation: false,
- color: ['#bf99f8', '#3fe1da', '#6be6c1', '#3fcfdc', '#626c91', '#3fbcde', '#a0a7e6', '#3fa9e1', '#96dee8'],
- data: this.data.nodes,
- links: this.data.calls,
- itemStyle: {
- borderWidth: 0,
- },
- lineStyle: {
- color: 'source',
- opacity: 0.12,
- },
- },
- ],
- visualMap: this.data.visualMap,
- };
- }
- }
-</script>
diff --git a/src/views/components/dashboard/charts/chart-slow.vue b/src/views/components/dashboard/charts/chart-slow.vue
index 33fe56c..9f905e5 100644
--- a/src/views/components/dashboard/charts/chart-slow.vue
+++ b/src/views/components/dashboard/charts/chart-slow.vue
@@ -74,7 +74,7 @@ limitations under the License. -->
}
}
</script>
-<style lang="scss">
+<style lang="scss" scoped>
.rk-chart-slow {
height: 100%;
.calls {
diff --git a/src/views/components/dashboard/charts/chart-count.vue b/src/views/components/dashboard/charts/chart-table.vue
similarity index 50%
rename from src/views/components/dashboard/charts/chart-count.vue
rename to src/views/components/dashboard/charts/chart-table.vue
index 3e951b3..f7bc4de 100644
--- a/src/views/components/dashboard/charts/chart-count.vue
+++ b/src/views/components/dashboard/charts/chart-table.vue
@@ -14,27 +14,17 @@ See the License for the specific language governing permissions and
limitations under the License. -->
<template>
- <div class="rk-chart-count">
- <div class="mb-10 pt-10 b">
- <span class="mr-10">YoungGC Count</span>
- <span class="count r">
- {{
- (data.instance_jvm_young_gc_count || []).reduce(function(preValue, curValue, index, array) {
- return preValue + curValue;
- }, 0)
- }}
- </span>
- </div>
- <div class="mb-10 pt-10 b">
- <span class="mr-10">OldGC Count</span>
- <span class="count r">
- {{
- (data.instance_jvm_old_gc_count || []).reduce(function(preValue, curValue, index, array) {
- return preValue + curValue;
- }, 0)
- }}
- </span>
- </div>
+ <div class="rk-chart-table">
+ <table>
+ <tr>
+ <th>{{ $t('name') }}</th>
+ <th>{{ $t('value') }}</th>
+ </tr>
+ <tr v-for="key in dataKeys" :key="key">
+ <td>{{ key }}</td>
+ <td>{{ data[key][dataLength(data[key])] }}</td>
+ </tr>
+ </table>
</div>
</template>
@@ -43,19 +33,36 @@ limitations under the License. -->
import { Component, Prop } from 'vue-property-decorator';
@Component
- export default class ChartCount extends Vue {
+ export default class ChartTable extends Vue {
@Prop() private data!: any;
+
+ private get dataKeys() {
+ const keys = Object.keys(this.data || {}).filter((i: any) => Array.isArray(this.data[i]) && this.data[i].length);
+ return keys;
+ }
+
+ private dataLength(param: any[]) {
+ return param.length - 1 || 0;
+ }
}
</script>
-<style lang="scss">
- .rk-chart-count {
- padding-top: 15px;
- .count {
- padding: 0 5px;
- display: inline-block;
- background-color: #40454e;
- color: #eee;
- border-radius: 4px;
+<style lang="scss" scoped>
+ .rk-chart-table {
+ table {
+ width: 100%;
+ border-top: 1px solid #ccc;
+ border-right: 1px solid #ccc;
+ }
+ tr {
+ width: 100%;
+ border: 1px solid #ccc;
+ }
+ th,
+ td {
+ border-left: 1px solid #ccc;
+ border-bottom: 1px solid #ccc;
+ width: 50%;
+ text-align: center;
}
}
</style>
diff --git a/src/views/components/dashboard/charts/chart-trace.vue b/src/views/components/dashboard/charts/chart-trace.vue
deleted file mode 100644
index f3d439c..0000000
--- a/src/views/components/dashboard/charts/chart-trace.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<!-- 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 style="overflow: auto;height: 100%;" class="scroll_hide">
- <div class="rk-chart-slow clear">
- <div class="rk-chart-slow-i" v-for="(i, index) in data" :key="index">
- <svg class="icon vm r grey link-hover cp" @click="handleClick((i.traceIds && i.traceIds[0]) || i.name)">
- <use xlink:href="#review-list"></use>
- </svg>
- <div class="mb-5 ell" v-tooltip:top.ellipsis="i.name || ''">
- <span class="calls sm mr-10">{{ i.value }}</span>
- <span class="cp link-hover">{{ i.refId ? `${i.name}-${i.refId}` : i.name }}</span>
- </div>
- <RkProgress :precent="(i.value / maxValue) * 100" />
- </div>
- </div>
- </div>
-</template>
-
-<script lang="ts">
- import Vue from 'vue';
- import { Component, Prop } from 'vue-property-decorator';
- import copy from '@/utils/copy';
-
- @Component({})
- export default class ChartTrace extends Vue {
- @Prop() private intervalTime!: any;
- @Prop() private data!: any;
- @Prop() private item!: any;
- get maxValue() {
- if (!this.data.length) {
- return null;
- }
- const temp: number[] = this.data.map((i: any) => i.value);
- return Math.max.apply(null, temp);
- }
- private handleClick(i: any) {
- copy(i);
- }
- }
-</script>
-<style lang="scss">
- .rk-chart-slow {
- height: 100%;
- .calls {
- padding: 0 5px;
- display: inline-block;
- background-color: #40454e;
- color: #eee;
- border-radius: 4px;
- }
- }
- .rk-chart-slow-i {
- padding: 6px 0;
- }
-</style>
diff --git a/src/views/components/dashboard/charts/constant.ts b/src/views/components/dashboard/charts/constant.ts
index 3e760ce..a1cd63b 100644
--- a/src/views/components/dashboard/charts/constant.ts
+++ b/src/views/components/dashboard/charts/constant.ts
@@ -74,4 +74,5 @@ export const ChartTypeOptions = [
{ value: 'ChartLine', label: 'Line Chart' },
{ value: 'ChartArea', label: 'Area Chart' },
{ value: 'ChartBar', label: 'Bar Chart' },
+ { value: 'ChartTable', label: 'Table Of Latest Values' },
];
diff --git a/src/views/components/dashboard/charts/index.ts b/src/views/components/dashboard/charts/index.ts
index 28cedc1..d4dbb5e 100644
--- a/src/views/components/dashboard/charts/index.ts
+++ b/src/views/components/dashboard/charts/index.ts
@@ -15,30 +15,22 @@
* limitations under the License.
*/
-import ChartBrief from './chart-brief.vue';
import ChartNum from './chart-num.vue';
import ChartLine from './chart-line.vue';
import ChartArea from './chart-area.vue';
import ChartBar from './chart-bar.vue';
import ChartHeatmap from './chart-heatmap.vue';
import ChartSlow from './chart-slow.vue';
-import ChartTrace from './chart-trace.vue';
-import ChartSankey from './chart-sankey.vue';
-import ChartInstance from './chart-instance.vue';
-import ChartCount from './chart-count.vue';
+import ChartTable from './chart-table.vue';
import ChartEdit from './chart-edit.vue';
export default {
- ChartCount,
ChartNum,
- ChartBrief,
ChartLine,
ChartBar,
- ChartInstance,
ChartHeatmap,
ChartSlow,
- ChartTrace,
- ChartSankey,
ChartArea,
+ ChartTable,
ChartEdit,
};
diff --git a/src/views/components/dashboard/dashboard-item.vue b/src/views/components/dashboard/dashboard-item.vue
index 1638dc0..b9730ef 100644
--- a/src/views/components/dashboard/dashboard-item.vue
+++ b/src/views/components/dashboard/dashboard-item.vue
@@ -69,8 +69,7 @@ limitations under the License. -->
import { QueryTypes } from './constant';
import { TopologyType, ObjectsType } from '../../../constants/constant';
- import { MetricsType, CalculationType } from './charts/constant';
- import { uuid } from '@/utils/uuid.ts';
+ import { CalculationType } from './charts/constant';
import { State as globalState } from '@/store/modules/global';
import { State as optionState } from '@/store/modules/global/selectors';
@@ -209,9 +208,12 @@ limitations under the License. -->
this.chartSource[params.metricName] = values.map((item: { value: number }) =>
this.aggregationValue({ data: item.value, type: aggregation, aggregationNum: Number(aggregationNum) }),
);
+ return;
}
if (queryMetricType === QueryTypes.SortMetrics || queryMetricType === QueryTypes.ReadSampledRecords) {
this.handleChartSlowData(resVal, aggregation, aggregationNum);
+
+ return;
}
if (queryMetricType === QueryTypes.READHEATMAP) {
const nodes = [] as any;