This is an automated email from the ASF dual-hosted git repository. qiuxiafan 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 acea1d4 Feat: Convert from unix timestamp to custom time format (#336) acea1d4 is described below commit acea1d4904c8637dc8cf86be6e6f281812ed35b2 Author: Qiuxia Fan <fine0...@outlook.com> AuthorDate: Tue Aug 4 15:26:51 2020 +0800 Feat: Convert from unix timestamp to custom time format (#336) --- src/store/modules/dashboard/dashboard-option.ts | 10 +++++++++- .../components/dashboard/charts/chart-edit.vue | 17 +++++++++++++++- .../components/dashboard/charts/chart-heatmap.vue | 1 - .../components/dashboard/charts/chart-instance.vue | 1 - .../components/dashboard/charts/chart-num.vue | 4 +++- src/views/components/dashboard/charts/constant.ts | 4 +++- src/views/components/dashboard/dashboard-item.vue | 23 +++++++++++++++++++--- 7 files changed, 51 insertions(+), 9 deletions(-) diff --git a/src/store/modules/dashboard/dashboard-option.ts b/src/store/modules/dashboard/dashboard-option.ts index 960a3b8..d3ae4de 100644 --- a/src/store/modules/dashboard/dashboard-option.ts +++ b/src/store/modules/dashboard/dashboard-option.ts @@ -59,7 +59,7 @@ const mutations: MutationTree<State> = { }, [types.UPDATE_DASHBOARD](state: State) { - state.updateDashboard = { _: +new Date() }; + state.updateDashboard = { key: +new Date() }; }, [types.SET_ENDPOINTS](state: State, data: any) { @@ -119,6 +119,10 @@ const actions: ActionTree<State, any> = { }); }, GET_SERVICE_ENDPOINTS(context: { commit: Commit; state: any }, params: { keyword: string }) { + if (!context.state.currentService.key) { + context.commit(types.SET_ENDPOINTS, []); + return; + } if (!params.keyword) { params.keyword = ''; } @@ -138,6 +142,10 @@ const actions: ActionTree<State, any> = { }); }, GET_SERVICE_INSTANCES(context: { commit: Commit; state: any }, params: any) { + if (!context.state.currentService.key) { + context.commit(types.SET_INSTANCES, []); + return; + } return graph .query('queryInstances') .params({ serviceId: context.state.currentService.key || '', ...params }) diff --git a/src/views/components/dashboard/charts/chart-edit.vue b/src/views/components/dashboard/charts/chart-edit.vue index 351059e..009904e 100755 --- a/src/views/components/dashboard/charts/chart-edit.vue +++ b/src/views/components/dashboard/charts/chart-edit.vue @@ -209,7 +209,7 @@ limitations under the License. --> <option v-for="type in CalculationType" :value="type.value" :key="type.value">{{ type.label }}</option> </select> <input - type="number" + type="text" class="rk-chart-edit-input long" :value="itemConfig.aggregationNum" @change="setItemConfig({ type: 'aggregationNum', value: $event.target.value })" @@ -418,6 +418,21 @@ limitations under the License. --> return; } + if (params.type === 'aggregation' && ['milliseconds', 'seconds'].includes(this.itemConfig.aggregation)) { + const values = { + aggregationNum: 'YYYY-MM-DD HH:mm:ss', + [params.type]: params.value, + }; + this.itemConfig = { + ...this.itemConfig, + ...values, + }; + this.EDIT_COMP_CONFIG({ + index: this.index, + values, + }); + return; + } if (this.type === this.pageTypes[0]) { this.EDIT_TOPO_ENDPOINT_CONFIG({ index: this.index, diff --git a/src/views/components/dashboard/charts/chart-heatmap.vue b/src/views/components/dashboard/charts/chart-heatmap.vue index 867d205..f736695 100644 --- a/src/views/components/dashboard/charts/chart-heatmap.vue +++ b/src/views/components/dashboard/charts/chart-heatmap.vue @@ -21,7 +21,6 @@ limitations under the License. --> import Vue from 'vue'; import { Component, Prop } from 'vue-property-decorator'; import 'echarts/lib/component/visualMap'; - import moment from 'dayjs'; @Component export default class ChartHeatmap extends Vue { @Prop() private title!: string; diff --git a/src/views/components/dashboard/charts/chart-instance.vue b/src/views/components/dashboard/charts/chart-instance.vue index fdc9801..de40e7b 100755 --- a/src/views/components/dashboard/charts/chart-instance.vue +++ b/src/views/components/dashboard/charts/chart-instance.vue @@ -32,7 +32,6 @@ limitations under the License. --> <script lang="ts"> import Vue from 'vue'; import { Component, Prop } from 'vue-property-decorator'; - import moment from 'dayjs'; import { State } from 'vuex-class'; @Component export default class ChartInstance extends Vue { diff --git a/src/views/components/dashboard/charts/chart-num.vue b/src/views/components/dashboard/charts/chart-num.vue index 41d64ed..017203d 100644 --- a/src/views/components/dashboard/charts/chart-num.vue +++ b/src/views/components/dashboard/charts/chart-num.vue @@ -15,7 +15,9 @@ limitations under the License. --> <template> <div class="rk-chart-num b"> - <span>{{ isNaN(data.avgNum) ? null : data.avgNum.toFixed(2) }}</span> + <span>{{ + typeof data.avgNum === 'string' ? data.avgNum : isNaN(data.avgNum) ? null : data.avgNum.toFixed(2) + }}</span> </div> </template> <script lang="ts"> diff --git a/src/views/components/dashboard/charts/constant.ts b/src/views/components/dashboard/charts/constant.ts index 91c79e3..0432e3a 100644 --- a/src/views/components/dashboard/charts/constant.ts +++ b/src/views/components/dashboard/charts/constant.ts @@ -37,7 +37,7 @@ export enum MetricsType { export const QueryMetricTypes: { [key: string]: Array<{ label: string; value: string }> } = { REGULAR_VALUE: [ - { label: 'read avg value in the duration', value: 'readMetricsValue' }, + { label: 'read the single value in the duration', value: 'readMetricsValue' }, { label: 'read all values in the duration', value: 'readMetricsValues' }, { label: 'get sorted top N values', value: 'sortMetrics' }, ], @@ -60,6 +60,8 @@ export const CalculationType = [ { label: 'Minus', value: '-' }, { label: 'Multiplication', value: '*' }, { label: 'Division', value: '/' }, + { label: 'Convert Unix Timestamp(milliseconds)', value: 'milliseconds' }, + { label: 'Convert Unix Timestamp(seconds)', value: 'seconds' }, ]; export const ChartTypeOptions = [ diff --git a/src/views/components/dashboard/dashboard-item.vue b/src/views/components/dashboard/dashboard-item.vue index fa26e41..8607437 100644 --- a/src/views/components/dashboard/dashboard-item.vue +++ b/src/views/components/dashboard/dashboard-item.vue @@ -63,14 +63,15 @@ limitations under the License. --> </template> <script lang="ts"> import { Vue, Component, Prop, Watch } from 'vue-property-decorator'; + import { Mutation, State, Getter, Action } from 'vuex-class'; import charts from './charts'; + import dayjs from 'dayjs'; + import { QueryTypes } from './constant'; import { TopologyType, ObjectsType } from '../../constant'; import { MetricsType, CalculationType } from './charts/constant'; import { uuid } from '@/utils/uuid.ts'; - import { Mutation, State, Getter, Action } from 'vuex-class'; - @Component({ components: { ...charts }, }) @@ -150,7 +151,9 @@ limitations under the License. --> if (queryMetricType === QueryTypes.ReadMetricsValue) { this.chartSource = { - avgNum: this.aggregationValue({ data: resVal, type: aggregation, aggregationNum: Number(aggregationNum) }), + avgNum: [CalculationType[4].value, CalculationType[5].value].includes(aggregation) + ? this.formatDate({ data: resVal, type: aggregation, aggregationNum }) + : this.aggregationValue({ data: resVal, type: aggregation, aggregationNum: Number(aggregationNum) }), }; } if (queryMetricType === QueryTypes.ReadMetricsValues) { @@ -222,6 +225,20 @@ limitations under the License. --> this.dialogConfigVisible = true; } + private formatDate(json: { data: number; type: string; aggregationNum: string }) { + let { aggregationNum } = json; + if (!aggregationNum) { + aggregationNum = 'YYYY-MM-DD HH:mm:ss'; + } + if (json.type === CalculationType[4].value) { + return dayjs(json.data).format(aggregationNum); + } else if (json.type === CalculationType[5].value) { + return dayjs.unix(json.data).format(aggregationNum); + } else { + return json.data; + } + } + private aggregationValue(json: { data: number; type: string; aggregationNum: number }) { if (isNaN(json.aggregationNum)) { return json.data;