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

@@ -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;

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;

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

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';

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: [
           {

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;
             }
-          });
+          }
         }
       }
     }

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>

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;
   }

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;
   }