[skywalking-rocketbot-ui] branch master updated: fix: remove the no use maxItemNum for labeled-value metric, etc (#491)

[wusheng]

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 9c65698  fix: remove the no use maxItemNum for labeled-value metric, 
etc (#491)
9c65698 is described below

commit 9c656987c9e3b02b8409c0bc05a18df4683a08bb
Author: Qiuxia Fan <fine0...@outlook.com>
AuthorDate: Wed May 12 11:14:09 2021 +0800

    fix: remove the no use maxItemNum for labeled-value metric, etc (#491)
---
 .../components/dashboard/charts/chart-edit.vue     | 37 ++++++++--------------
 src/views/components/dashboard/charts/constant.ts  |  2 ++
 2 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/src/views/components/dashboard/charts/chart-edit.vue 
b/src/views/components/dashboard/charts/chart-edit.vue
index 3124571..f900c8e 100755
--- a/src/views/components/dashboard/charts/chart-edit.vue
+++ b/src/views/components/dashboard/charts/chart-edit.vue
@@ -174,7 +174,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="nameMetrics.includes(itemConfig.queryMetricType)">
+      <div class="flex-h mb-5" v-show="isChartSlow">
         <div class="title grey sm">{{ $t('parentService') }}:</div>
         <select
           class="long"
@@ -185,7 +185,7 @@ 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="flex-h mb-5" v-show="isChartSlow">
         <div class="title grey sm">{{ $t('sortOrder') }}:</div>
         <select
           class="long"
@@ -226,7 +226,7 @@ limitations under the License. -->
           @change="setItemConfig({ type: 'height', value: $event.target.value 
})"
         />
       </div>
-      <div class="flex-h mb-5" v-show="!isChartType">
+      <div class="flex-h mb-5" v-show="isChartSlow">
         <div class="title grey sm">{{ $t('maxItemNum') }}:</div>
         <input
           type="number"
@@ -308,6 +308,7 @@ limitations under the License. -->
     CalculationType,
     ChartTypeOptions,
     ReadValueChartType,
+    MaxItemNum,
   } from './constant';
   import { DASHBOARDTYPE } from '../constant';
 
@@ -328,9 +329,6 @@ limitations under the License. -->
     @Prop() private intervalTime!: any;
     @Prop() private type!: string;
     private itemConfig: any = {};
-    private itemConfigDefault: any = {
-      maxItemNum: '10',
-    };
     private EntityType = EntityType;
     private IndependentType = IndependentType;
     private CalculationType = CalculationType;
@@ -343,13 +341,13 @@ limitations under the License. -->
     private isBrowser = false;
     private isLabel = false;
     private isIndependentSelector = false;
-    private nameMetrics = ['sortMetrics', 'readSampledRecords'];
+    private isChartSlow = false;
     private pageTypes = [TopologyType.TOPOLOGY_ENDPOINT, 
TopologyType.TOPOLOGY_INSTANCE] as string[];
     private isChartType = false;
     private ChartTable = 'ChartTable';
 
     private created() {
-      this.setDefaultValue((this.itemConfig = this.item));
+      this.itemConfig = this.item;
       this.initConfig();
       if (!this.itemConfig.independentSelector || 
this.pageTypes.includes(this.type)) {
         return;
@@ -357,21 +355,6 @@ limitations under the License. -->
       this.setItemServices();
     }
 
-    private setDefaultValue(itemConfig: any) {
-      const currentKeys: string[] = Object.keys(itemConfig);
-      const defaultKeys: string[] = Object.keys(this.itemConfigDefault);
-
-      if (!currentKeys.length || !defaultKeys.length) {
-        return;
-      }
-
-      defaultKeys.forEach((key: string) => {
-        if (!currentKeys.includes(key)) {
-          itemConfig[key] = this.itemConfigDefault[key];
-        }
-      });
-    }
-
     private initConfig() {
       this.isDatabase = this.pageTypes.includes(this.type)
         ? false
@@ -388,6 +371,10 @@ limitations under the License. -->
         this.rocketComps.tree[this.rocketComps.group].type === 'metric' || 
this.pageTypes.includes(this.type);
       this.chartTypeOptions =
         this.itemConfig.queryMetricType === 'readMetricsValue' ? 
ReadValueChartType : ChartTypeOptions;
+      this.isChartSlow = ['sortMetrics', 
'readSampledRecords'].includes(this.itemConfig.queryMetricType);
+      if (this.isChartSlow && !this.itemConfig.maxItemNum) {
+        this.itemConfig.maxItemNum = MaxItemNum;
+      }
     }
 
     private setItemConfig(params: { type: string; value: string }) {
@@ -415,6 +402,10 @@ limitations under the License. -->
       if (params.type === 'queryMetricType') {
         this.chartTypeOptions =
           this.itemConfig.queryMetricType === 'readMetricsValue' ? 
ReadValueChartType : ChartTypeOptions;
+        this.isChartSlow = ['sortMetrics', 
'readSampledRecords'].includes(this.itemConfig.queryMetricType);
+        if (this.isChartSlow) {
+          this.itemConfig.maxItemNum = MaxItemNum;
+        }
         this.updateQueryMetricType(params);
         return;
       }
diff --git a/src/views/components/dashboard/charts/constant.ts 
b/src/views/components/dashboard/charts/constant.ts
index 6fbd643..7525211 100644
--- a/src/views/components/dashboard/charts/constant.ts
+++ b/src/views/components/dashboard/charts/constant.ts
@@ -81,3 +81,5 @@ export const ReadValueChartType = [
   { value: 'ChartNum', label: 'Digital Card' },
   { value: 'ChartSlow', label: 'Slow Chart' },
 ];
+
+export const MaxItemNum = 10;