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/04/28 10:11:33 UTC
[skywalking-rocketbot-ui] branch master updated: fix: update
configuration on dashboard (#484)
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 b29a89f fix: update configuration on dashboard (#484)
b29a89f is described below
commit b29a89f348fea339d887183f5512052122866e33
Author: Qiuxia Fan <fi...@outlook.com>
AuthorDate: Wed Apr 28 18:11:25 2021 +0800
fix: update configuration on dashboard (#484)
---
src/views/components/alarm/alarm-tool.vue | 14 +++++++-
.../components/dashboard/charts/chart-edit.vue | 42 +++++++++-------------
src/views/components/dashboard/charts/constant.ts | 5 +++
3 files changed, 35 insertions(+), 26 deletions(-)
diff --git a/src/views/components/alarm/alarm-tool.vue b/src/views/components/alarm/alarm-tool.vue
index 306bc37..0c1ce7f 100644
--- a/src/views/components/alarm/alarm-tool.vue
+++ b/src/views/components/alarm/alarm-tool.vue
@@ -28,7 +28,13 @@ limitations under the License. -->
/>
<div class="mr-10 ml-10">
<span class="sm grey">{{ $t('searchKeyword') }}: </span>
- <input type="text" v-model="keyword" class="rk-alarm-tool-input" @input="handleRefresh({ pageNum: 1 })" />
+ <input
+ type="text"
+ v-model="keyword"
+ class="rk-alarm-tool-input"
+ @input="enterUpdateAlarm"
+ @change="handleRefresh({ pageNum: 1 })"
+ />
</div>
<ConditionTags :type="'ALARM'" @updateTags="(data) => handleRefresh({ pageNum: 1, tagsMap: data.tagsMap })" />
</div>
@@ -95,6 +101,12 @@ limitations under the License. -->
}
this.GET_ALARM(params);
}
+ private enterUpdateAlarm(event: KeyboardEvent) {
+ if (event.keyCode !== 13) {
+ return;
+ }
+ this.handleRefresh({ pageNum: 1 });
+ }
private beforeDestroy() {
this.SET_EVENTS([]);
}
diff --git a/src/views/components/dashboard/charts/chart-edit.vue b/src/views/components/dashboard/charts/chart-edit.vue
index 59c9177..b4ce9a4 100755
--- a/src/views/components/dashboard/charts/chart-edit.vue
+++ b/src/views/components/dashboard/charts/chart-edit.vue
@@ -50,22 +50,11 @@ limitations under the License. -->
v-model="itemConfig.chartType"
@change="setItemConfig({ type: 'chartType', value: $event.target.value })"
>
- <option v-for="chart in ChartTypeOptions" :value="chart.value" :key="chart.value">
+ <option v-for="chart in chartTypeOptions" :value="chart.value" :key="chart.value">
{{ chart.label }}
</option>
</select>
</div>
- <div class="flex-h mb-5" v-if="isReadSingleValue">
- <div class="title grey sm">{{ $t('chartType') }}:</div>
- <select
- class="long"
- v-model="itemConfig.chartType"
- @change="setItemConfig({ type: 'chartType', value: $event.target.value })"
- >
- <option value="ChartNum" :key="`ChartNum`">no chart</option>
- <option value="ChartSlow" :key="`ChartSlow`">Bar Chart</option>
- </select>
- </div>
<div class="flex-h mb-5" v-show="isLabel">
<div class="title grey sm">{{ $t('labels') }}:</div>
<input
@@ -253,7 +242,7 @@ limitations under the License. -->
@change="setItemConfig({ type: 'aggregationNum', value: $event.target.value })"
/>
</div>
- <div class="flex-h mb-5" v-show="itemConfig.chartType === ChartTypeOptions[3].value">
+ <div class="flex-h mb-5" v-show="itemConfig.chartType === ChartTable">
<div class="title grey sm">{{ $t('tableHeader') }}:</div>
<input
type="text"
@@ -270,7 +259,7 @@ limitations under the License. -->
@change="setItemConfig({ type: 'tableHeaderCol2', value: $event.target.value })"
/>
</div>
- <div class="flex-h mb-5" v-show="itemConfig.chartType === ChartTypeOptions[3].value">
+ <div class="flex-h mb-5" v-show="itemConfig.chartType === ChartTable">
<div class="title grey sm">{{ $t('tableValues') }}:</div>
<select
class="long"
@@ -297,7 +286,7 @@ limitations under the License. -->
<script lang="ts">
import Vue from 'vue';
import { State, Getter, Mutation, Action } from 'vuex-class';
- import { Component, Prop, Watch } from 'vue-property-decorator';
+ import { Component, Prop } from 'vue-property-decorator';
import { TopologyType } from '@/constants/constant';
import {
EntityType,
@@ -308,6 +297,7 @@ limitations under the License. -->
MetricChartType,
CalculationType,
ChartTypeOptions,
+ ReadValueChartType,
} from './constant';
import { DASHBOARDTYPE } from '../constant';
@@ -331,7 +321,7 @@ limitations under the License. -->
private EntityType = EntityType;
private IndependentType = IndependentType;
private CalculationType = CalculationType;
- private ChartTypeOptions = ChartTypeOptions;
+ private chartTypeOptions = ChartTypeOptions;
private services: any = [];
private endpoints: any = [];
private instances: any = [];
@@ -343,7 +333,7 @@ limitations under the License. -->
private nameMetrics = ['sortMetrics', 'readSampledRecords'];
private pageTypes = [TopologyType.TOPOLOGY_ENDPOINT, TopologyType.TOPOLOGY_INSTANCE] as string[];
private isChartType = false;
- private isReadSingleValue = false;
+ private ChartTable = 'ChartTable';
private created() {
this.itemConfig = this.item;
@@ -362,15 +352,14 @@ limitations under the License. -->
: false;
this.isBrowser = this.rocketComps.tree[this.rocketComps.group].type === DASHBOARDTYPE.BROWSER;
if (this.isBrowser) {
- this.setItemConfig({ type: 'independentSelector', value: 'false' });
- this.setItemConfig({ type: 'sortOrder', value: 'DES' });
this.EntityType = BrowserEntityType;
}
this.queryMetricTypesList = QueryMetricTypes[this.item.metricType] || [];
this.isLabel = this.itemConfig.metricType === MetricsType.LABELED_VALUE ? true : false;
this.isIndependentSelector =
this.rocketComps.tree[this.rocketComps.group].type === 'metric' || this.pageTypes.includes(this.type);
- this.isChartType = ['readMetricsValues', 'readLabeledMetricsValues'].includes(this.itemConfig.queryMetricType);
+ this.chartTypeOptions =
+ this.itemConfig.queryMetricType === 'readMetricsValue' ? ReadValueChartType : ChartTypeOptions;
}
private setItemConfig(params: { type: string; value: string }) {
@@ -396,6 +385,8 @@ limitations under the License. -->
return;
}
if (params.type === 'queryMetricType') {
+ this.chartTypeOptions =
+ this.itemConfig.queryMetricType === 'readMetricsValue' ? ReadValueChartType : ChartTypeOptions;
this.updateQueryMetricType(params);
return;
}
@@ -451,7 +442,7 @@ limitations under the License. -->
this.$emit('updateStatus', 'metricType', typeOfMetrics);
this.queryMetricTypesList = QueryMetricTypes[typeOfMetrics] || [];
this.itemConfig.queryMetricType = this.queryMetricTypesList[0] && this.queryMetricTypesList[0].value;
- this.isChartType = ['readMetricsValues', 'readLabeledMetricsValues'].includes(this.itemConfig.queryMetricType);
+ this.hasChartType();
this.isLabel = typeOfMetrics === MetricsType.LABELED_VALUE ? true : false;
const values = {
metricType: typeOfMetrics,
@@ -522,7 +513,7 @@ limitations under the License. -->
...this.itemConfig,
...values,
};
- this.isChartType = ['readMetricsValues', 'readLabeledMetricsValues'].includes(this.itemConfig.queryMetricType);
+ this.hasChartType();
}
private setItemServices(update: boolean = false) {
@@ -587,9 +578,10 @@ limitations under the License. -->
}
}
- @Watch('itemConfig.queryMetricType')
- private watchQueryMetricType(val: string) {
- this.isReadSingleValue = ['readMetricsValue'].includes(val);
+ private hasChartType() {
+ this.isChartType = ['readMetricsValue', 'readMetricsValues', 'readLabeledMetricsValues'].includes(
+ this.itemConfig.queryMetricType,
+ );
}
}
</script>
diff --git a/src/views/components/dashboard/charts/constant.ts b/src/views/components/dashboard/charts/constant.ts
index a1cd63b..619e74a 100644
--- a/src/views/components/dashboard/charts/constant.ts
+++ b/src/views/components/dashboard/charts/constant.ts
@@ -76,3 +76,8 @@ export const ChartTypeOptions = [
{ value: 'ChartBar', label: 'Bar Chart' },
{ value: 'ChartTable', label: 'Table Of Latest Values' },
];
+
+export const ReadValueChartType = [
+ { value: 'ChartNum', label: 'Digital Card' },
+ { value: 'ChartSlow', label: 'Slow Chart' },
+];