#527 全域数据历史统计前端功能

saturn-console-web/src/components/common/charts/line.vue

@@ -0,0 +1,82 @@
+<template>
+    <div>
+        <div :id="id" :options="options" style="width: 100%;height:300px;"></div>
+    </div>
+</template>
+
+<script>
+
+    import Highcharts from 'highcharts';
+    import Highcharts3D from 'highcharts/highcharts-3d';
+    import Exporting from 'highcharts/modules/exporting';
+
+    Exporting(Highcharts);
+    Highcharts3D(Highcharts);
+
+    export default {
+      props: ['id', 'dataOption'],
+      data() {
+        return {
+          options: {
+            lang: {
+              downloadJPEG: '下载JPEG图片',
+              downloadPDF: '下载PDF文件',
+              downloadPNG: '下载PNG文件',
+              downloadSVG: '下载SVG文件',
+              printChart: '打印图表',
+              noData: '暂无数据',
+            },
+            title: {
+              text: null,
+            },
+            xAxis: { // X坐标轴   categories类别
+              categories: [],
+              plotLines: [{  // plotLines：标示线
+                value: 30,  // 定义在哪个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线
+                width: 2,  // 标示线的宽度，2px
+                dashStyle: 'solid',  // 默认值是solid实线，这里定义为虚线
+                color: 'red', // 线的颜色，定义为红色
+              }],
+            },
+            yAxis: { // Y坐标轴
+              title: {
+                text: '执行次数',
+              },
+              plotLines: [{  // plotLines：标示线
+                value: 2,  // 定义在哪个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线
+                width: 1,  // 标示线的宽度，2px
+                dashStyle: 'solid',  // 默认值，这里定义为实线
+                color: '#808080', // 线的颜色，定义为灰色
+              }],
+            },
+            legend: { // 图例
+              layout: 'vertical',  // 图例内容布局方式，有水平布局及垂直布局可选，对应的配置值是： “horizontal(水平)”， “vertical(垂直)”
+              align: 'left',  // 图例在图表中的对齐方式，有 “left”, "center", "right" 可选
+              verticalAlign: 'middle',  // 垂直对齐方式，有 'top'， 'middle' 及 'bottom' 可选
+              borderWidth: 2, // 边框宽度
+            },
+            series: [ // 数据列
+              {  // 数据列中的 name 代表数据列的名字，并且会显示在数据提示框（Tooltip）及图例（Legend）中
+                name: '历史记录',
+                data: [],
+              }],
+          },
+        };
+      },
+      watch: {
+        dataOption: 'buildPage',
+      },
+      methods: {
+        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);
+        },
+      },
+    };
+</script>
+
+<style scoped>
+
+</style>

saturn-console-web/src/components/index.js

@@ -23,6 +23,7 @@ import InputTags from './common/inputTags';
 import BatchMigrateDialog from './common/dialog/batch_migrate_dialog';
 import MigrateStatusDialog from './common/dialog/migrate_status_dialog';
 import AddConfigDialog from './common/dialog/add_config_dialog';
+import MyLine from './common/charts/line';
 
 Vue.component('Container', Container);
 Vue.component('VHeader', VHeader);
@@ -48,3 +49,4 @@ Vue.component('InputTags', InputTags);
 Vue.component('batch-migrate-dialog', BatchMigrateDialog);
 Vue.component('migrate-status-dialog', MigrateStatusDialog);
 Vue.component('add-config-dialog', AddConfigDialog);
+Vue.component('MyLine', MyLine);

saturn-console-web/src/pages/dashboard_manage/domain_statistic.vue

@@ -19,6 +19,13 @@
                             </div>
                         </Chart-container>
                     </el-col>
+                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
+                        <Chart-container title="全域历史执行数据">
+                            <div slot="chart">
+                                <MyLine id="domainProcessHistory" :data-option="allDomainHistoryOption.optionInfo"></MyLine>
+                            </div>
+                        </Chart-container>
+                    </el-col>
                     <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
                         <Chart-container title="失败率最高的Top10域">
                             <div slot="chart">
@@ -59,6 +66,12 @@ export default {
       top10UnstableDomainOption: {
         optionInfo: {},
       },
+      allDomainHistoryOption: {
+        optionInfo: {
+          xAxis: [],
+          yAxis: [],
+        },
+      },
     };
   },
   methods: {
@@ -157,11 +170,21 @@ export default {
       })
       .catch(() => { this.$http.buildErrorHandler('获取域版本分布请求失败！'); });
     },
+    getAllDomainHistory() {
+      return this.$http.get('/console/dashboard/domainHistoryCount', { zkClusterKey: this.zkClusterKey }).then((data) => {
+        const optionInfo = {
+          xAxis: data.xAxis,
+          yAxis: [{ name: '历史记录', data: data.yAxis }],
+        };
+        this.$set(this.allDomainHistoryOption, 'optionInfo', optionInfo);
+      }).catch(() => { this.$http.buildErrorHandler('获取历史全域数据请求失败！'); });
+    },
     init() {
       this.loading = true;
       Promise.all(
         [this.getDomainProcessCount(), this.getTop10FailDomain(),
-          this.getTop10UnstableDomain(), this.getDomainExecutorVersionNumber()]).then(() => {
+          this.getTop10UnstableDomain(), this.getDomainExecutorVersionNumber(),
+          this.getAllDomainHistory()]).then(() => {
             this.loading = false;
           });
     },