#527 Dashboard页面统计前端接口

vipshop · Nov 5, 2018 · 9e0f4a5 · 9e0f4a5
1 parent ca48782
commit 9e0f4a5
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 5 deletions.
diff --git a/saturn-console-web/src/components/common/charts/line.vue b/saturn-console-web/src/components/common/charts/line.vue
@@ -14,7 +14,7 @@
     Highcharts3D(Highcharts);
 
     export default {
-      props: ['id', 'dataOption'],
+      props: ['id', 'dataOption', 'yAxisTitle'],
       data() {
         return {
           options: {
@@ -40,7 +40,7 @@
             },
             yAxis: { // Y坐标轴
               title: {
-                text: '执行次数',
+                text: this.yAxisTitle,
               },
               plotLines: [{  // plotLines：标示线
                 value: 2,  // 定义在哪个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线
@@ -51,7 +51,7 @@
             },
             legend: { // 图例
               layout: 'vertical',  // 图例内容布局方式，有水平布局及垂直布局可选，对应的配置值是： “horizontal(水平)”， “vertical(垂直)”
-              align: 'left',  // 图例在图表中的对齐方式，有 “left”, "center", "right" 可选
+              align: 'right',  // 图例在图表中的对齐方式，有 “left”, "center", "right" 可选
               verticalAlign: 'middle',  // 垂直对齐方式，有 'top'， 'middle' 及 'bottom' 可选
               borderWidth: 2, // 边框宽度
             },
@@ -70,7 +70,6 @@
         buildPage() {
           this.options.xAxis.categories = this.dataOption.xAxis;
           this.options.series = this.dataOption.yAxis;
-          // this.options.xAxis.plotLines.value = this.dataOption.xAxis.length;
           Highcharts.chart(this.id, this.options);
         },
       },

diff --git a/saturn-console-web/src/pages/dashboard_manage/dashboard_manage.vue b/saturn-console-web/src/pages/dashboard_manage/dashboard_manage.vue
@@ -21,6 +21,33 @@
                     </el-col>
                 </el-row>
             </div>
+            <div>
+                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
+                    <Chart-container title="历史总域数">
+                        <div slot="chart">
+                            <MyLine id="domainCountHistory" :data-option="domainCountOption.optionInfo" :yAxisTitle="domainCountOption.title"></MyLine>
+                        </div>
+                    </Chart-container>
+                </el-col>
+            </div>
+            <div>
+                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
+                    <Chart-container title="历史Executor数">
+                        <div slot="chart">
+                            <MyLine id="executorCountHistory" :data-option="executorCountOption.optionInfo" :yAxisTitle="executorCountOption.title"></MyLine>
+                        </div>
+                    </Chart-container>
+                </el-col>
+            </div>
+            <div>
+                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
+                    <Chart-container title="历史作业数">
+                        <div slot="chart">
+                            <MyLine id="jobCountHistory" :data-option="jobCountOption.optionInfo" :yAxisTitle="jobCountOption.title"></MyLine>
+                        </div>
+                    </Chart-container>
+                </el-col>
+            </div>
         </el-card>
     </div>
 </template>
@@ -35,6 +62,27 @@ export default {
       executorInDockerCount: '',
       executorNotInDockerCount: '',
       jobCount: '',
+      domainCountOption: {
+        title: '总域数',
+        optionInfo: {
+          xAxis: [],
+          yAxis: [],
+        },
+      },
+      executorCountOption: {
+        title: 'executor数',
+        optionInfo: {
+          xAxis: [],
+          yAxis: [],
+        },
+      },
+      jobCountOption: {
+        title: '作业数',
+        optionInfo: {
+          xAxis: [],
+          yAxis: [],
+        },
+      },
     };
   },
   methods: {
@@ -56,6 +104,40 @@ export default {
       })
       .catch(() => { this.$http.buildErrorHandler('获取所有zk集群请求失败！'); });
     },
+    getDomainCountHistory() {
+      return this.$http.get('/console/dashboard/domainCount', { zkClusterKey: this.clusterKey }).then((data) => {
+        const optionInfo = {
+          xAxis: data.xAxis,
+          yAxis: [{ name: '总域数', data: data.yAxis }],
+        };
+        this.$set(this.domainCountOption, 'optionInfo', optionInfo);
+      }).catch(() => { this.$http.buildErrorHandler('获取历史全域数据请求失败！'); });
+    },
+    getExecutorCountHistory() {
+      return this.$http.get('/console/dashboard/executorCount', { zkClusterKey: this.clusterKey }).then((data) => {
+        const optionInfo = {
+          xAxis: data.date,
+          yAxis: [{ name: '物理机', data: data.otherCount },
+              { name: '容器', data: data.dockerCount },
+              { name: '总数', data: data.totalCount }],
+        };
+        this.$set(this.executorCountOption, 'optionInfo', optionInfo);
+      }).catch(() => { this.$http.buildErrorHandler('获取Executor历史数据请求失败！'); });
+    },
+    getJobCountHistory() {
+      return this.$http.get('/console/dashboard/jobCount', { zkClusterKey: this.clusterKey }).then((data) => {
+        const optionInfo = {
+          xAxis: data.xAxis,
+          yAxis: [{ name: '作业数', data: data.yAxis }],
+        };
+        this.$set(this.jobCountOption, 'optionInfo', optionInfo);
+      }).catch(() => { this.$http.buildErrorHandler('获取历史全域数据请求失败！'); });
+    },
+    updateHistories() {
+      this.getDomainCountHistory();
+      this.getExecutorCountHistory();
+      this.getJobCountHistory();
+    },
   },
   computed: {
     executorCount() {
@@ -74,6 +156,12 @@ export default {
   created() {
     this.getZkClusters();
     this.getDashboardCount();
+    this.getDomainCountHistory();
+    this.getExecutorCountHistory();
+    this.getJobCountHistory();
+  },
+  watch: {
+    clusterKey: 'updateHistories',
   },
 };
 </script>

diff --git a/saturn-console-web/src/pages/dashboard_manage/domain_statistic.vue b/saturn-console-web/src/pages/dashboard_manage/domain_statistic.vue
@@ -171,7 +171,7 @@ export default {
       .catch(() => { this.$http.buildErrorHandler('获取域版本分布请求失败！'); });
     },
     getAllDomainHistory() {
-      return this.$http.get('/console/dashboard/domainHistoryCount', { zkClusterKey: this.zkClusterKey }).then((data) => {
+      return this.$http.get('/console/dashboard/domainOperationCount', { zkClusterKey: this.zkClusterKey }).then((data) => {
         const optionInfo = {
           xAxis: data.xAxis,
           yAxis: [{ name: '历史记录', data: data.yAxis }],