#30 集群监控联调

vipshop · Mar 22, 2019 · 41fcb37 · 41fcb37
1 parent b0ef32b
commit 41fcb37
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 38 deletions.
diff --git a/pallas-console-web/src/components/common/charts/line.vue b/pallas-console-web/src/components/common/charts/line.vue
@@ -6,6 +6,7 @@
 
 <script>
 import echarts from 'echarts';
+import moment from 'moment';
 
 require('echarts/lib/chart/line');
 
@@ -34,6 +35,11 @@ export default {
           type: 'category',
           boundaryGap: false,
           data: [],
+          axisLabel: {
+            formatter(value) {
+              return `${moment(Number(value)).format('HH:mm:ss')}`;
+            },
+          },
         },
         yAxis: {
           type: 'value',
@@ -60,21 +66,21 @@ export default {
     drawLine() {
       const seriesArray = this.optionInfo.seriesData.map((obj) => {
         const rObj = { ...obj };
-        const itemStyle = {
-          normal: {
-            label: {
-              show: true,
-              position: 'top',
-              textStyle: {
-                fontWeight: 'bold',
-                color: '#eee',
-                fontSize: 11,
-              },
-            },
-          },
-        };
+        // const itemStyle = {
+        //   normal: {
+        //     label: {
+        //       show: true,
+        //       position: 'top',
+        //       textStyle: {
+        //         fontWeight: 'bold',
+        //         color: '#eee',
+        //         fontSize: 11,
+        //       },
+        //     },
+        //   },
+        // };
         this.$set(rObj, 'type', 'line');
-        this.$set(rObj, 'itemStyle', itemStyle);
+        // this.$set(rObj, 'itemStyle', itemStyle);
         return rObj;
       });
       this.option.xAxis.data = this.optionInfo.xAxis;
@@ -86,7 +92,7 @@ export default {
     },
   },
   mounted() {
-    this.drawLine();
+    // this.drawLine();
   },
 };
 </script>

diff --git a/pallas-console-web/src/pages/cluster_manage/monitor/cluster_monitor.vue b/pallas-console-web/src/pages/cluster_manage/monitor/cluster_monitor.vue
@@ -1,14 +1,7 @@
 <template>
-    <div class="my-tab-content">
+    <div class="my-tab-content" v-loading="loading" element-loading-text="请稍等···">
         <div>
             <el-row :gutter="10">
-                <el-col :xs="24" :sm="24" :md="24" :lg="24" class="chart-auto-size">
-                    <chart-container title="Search Rate(/s)" type="line">
-                        <div slot="chart">
-                            <MyLine id="searchRate" :option-info="searchRateInfo"></MyLine>
-                        </div>
-                    </chart-container>
-                </el-col>
                 <el-col :xs="24" :sm="24" :md="24" :lg="24" class="chart-auto-size">
                     <chart-container title="Indexing Rate(/s)" type="line">
                         <div slot="chart">
@@ -24,38 +17,49 @@
 export default {
   data() {
     return {
+      loading: false,
       searchRateInfo: {},
       indexingRateInfo: {},
     };
   },
   methods: {
-    getSearchRate() {
-      const optionInfo = {
-        xAxis: ['09:00', '09:10', '09:20', '09:30', '09:40', '09:50', '10:00', '10:10', '10:20'],
-        seriesData: [{ name: 'Search Rate', data: [2, 3, 5, 1, 3, 4, 7, 6, 4] }],
-        yAxisName: 's',
-      };
-      this.searchRateInfo = optionInfo;
-    },
-    getIndexingRate() {
+    getIndexingRate(indexingRateResp) {
       const optionInfo = {
-        xAxis: ['09:00', '09:10', '09:20', '09:30', '09:40', '09:50', '10:00', '10:10', '10:20'],
+        xAxis: indexingRateResp.map(e => e.x),
         seriesData: [
-          { name: 'Total Shards', data: [2, 3, 5, 1, 3, 4, 7, 6, 4] },
-          { name: 'Primary Shards', data: [1, 4, 2, 4, 2, 3, 5, 2, 7] }],
+          { name: 'Indexing Rate', data: indexingRateResp.map(e => e.y) },
+        ],
         yAxisName: 's',
       };
       this.indexingRateInfo = optionInfo;
     },
+    getClusterMonitor() {
+      const params = {
+        clusterName: this.clusterId,
+        from: new Date().getTime() - (60 * 60 * 1000),
+        to: new Date().getTime(),
+      };
+      return this.$http.post('/monitor/cluster.json', params).then((data) => {
+        if (data) {
+          this.getIndexingRate(data.indexingRate);
+        }
+      });
+    },
+    init() {
+      this.loading = true;
+      Promise.all([this.getClusterMonitor()]).then()
+      .finally(() => {
+        this.loading = false;
+      });
+    },
   },
   computed: {
     clusterId() {
       return this.$route.query.clusterId;
     },
   },
   created() {
-    this.getSearchRate();
-    this.getIndexingRate();
+    this.init();
   },
   watch: {
   },

diff --git a/pallas-console-web/src/pages/cluster_manage/monitor/overview.vue b/pallas-console-web/src/pages/cluster_manage/monitor/overview.vue
@@ -20,7 +20,6 @@
                     <span slot="label"><i class="fa fa-cubes"></i>节点 ({{nodesNum}})</span>
                 </el-tab-pane>
             </el-tabs>
-
             <router-view :nodes="nodes" :indices="indices"></router-view>
         </div>
     </div>