#30 监控增加下拉选项

vipshop · Mar 25, 2019 · 197faa8 · 197faa8
1 parent 92205c6
commit 197faa8
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 19 deletions.
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
@@ -33,34 +33,33 @@ export default {
       };
       this.indexingRateInfo = optionInfo;
     },
-    getClusterMonitor() {
+    getClusterMonitor(interval) {
       const params = {
         clusterName: this.clusterId,
-        from: new Date().getTime() - (60 * 60 * 1000),
+        from: new Date().getTime() - (Number(interval) * 60 * 1000),
         to: new Date().getTime(),
       };
-      return this.$http.post('/monitor/cluster.json', params).then((data) => {
+      this.loading = true;
+      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: {
+    timeInterval() {
+      const interval = this.$store.state.monitorTimeInterval;
+      this.getClusterMonitor(interval);
+      return interval;
+    },
     clusterId() {
       return this.$route.query.clusterId;
     },
   },
-  created() {
-    this.init();
-  },
   watch: {
   },
 };

diff --git a/pallas-console-web/src/pages/cluster_manage/monitor/indice_detail.vue b/pallas-console-web/src/pages/cluster_manage/monitor/indice_detail.vue
@@ -31,6 +31,9 @@ export default {
     },
   },
   computed: {
+    timeInterval() {
+      return this.$store.state.monitorTimeInterval;
+    },
     clusterId() {
       return this.$route.query.clusterId;
     },

diff --git a/pallas-console-web/src/pages/cluster_manage/monitor/indices_monitor.vue b/pallas-console-web/src/pages/cluster_manage/monitor/indices_monitor.vue
@@ -46,6 +46,9 @@ export default {
   methods: {
   },
   computed: {
+    timeInterval() {
+      return this.$store.state.monitorTimeInterval;
+    },
     clusterId() {
       return this.$route.query.clusterId;
     },

diff --git a/pallas-console-web/src/pages/cluster_manage/monitor/node_detail.vue b/pallas-console-web/src/pages/cluster_manage/monitor/node_detail.vue
@@ -31,6 +31,9 @@ export default {
     },
   },
   computed: {
+    timeInterval() {
+      return this.$store.state.monitorTimeInterval;
+    },
     clusterId() {
       return this.$route.query.clusterId;
     },

diff --git a/pallas-console-web/src/pages/cluster_manage/monitor/overview.vue b/pallas-console-web/src/pages/cluster_manage/monitor/overview.vue
@@ -1,12 +1,27 @@
 <template>
     <div class="page-content" v-loading="loading" element-loading-text="请稍等···">
-        <div class="my-breadcrumb">
-            <el-breadcrumb separator="/" class="my-breadcrumb-content">
-                <el-breadcrumb-item :to="{ name:'cluster_manage' }"><i class="fa fa-home"></i>ES集群管理</el-breadcrumb-item>
-                <el-breadcrumb-item :to="{ name:'cluster_detail', query: { clusterId } }">{{clusterId}}</el-breadcrumb-item>
-                <el-breadcrumb-item :to="{ name:'cluster_monitor', query: { clusterId } }">监控</el-breadcrumb-item>
-                <el-breadcrumb-item :to="item.route" v-for="(item, index) in breadcrumbs" :key="index">{{item.name}}</el-breadcrumb-item>
-            </el-breadcrumb>
+        <div class="my-breadcrumb" style="width: 100%">
+            <div class="pull-left" style="display: inline;">
+              <el-breadcrumb separator="/" class="my-breadcrumb-content">
+                  <el-breadcrumb-item :to="{ name:'cluster_manage' }"><i class="fa fa-home"></i>ES集群管理</el-breadcrumb-item>
+                  <el-breadcrumb-item :to="{ name:'cluster_detail', query: { clusterId } }">{{clusterId}}</el-breadcrumb-item>
+                  <el-breadcrumb-item :to="{ name:'cluster_monitor', query: { clusterId } }">监控</el-breadcrumb-item>
+                  <el-breadcrumb-item :to="item.route" v-for="(item, index) in breadcrumbs" :key="index">{{item.name}}</el-breadcrumb-item>
+              </el-breadcrumb>
+            </div>
+            <div class="pull-right" style="display: inline;margin-right: 10px;height: 30px;line-height: 30px;">
+                <el-dropdown trigger="click" @command="handleCommand">
+                  <span class="el-dropdown-link">
+                    <i class="fa fa-clock-o"></i>
+                    {{periodTimeMap[timeInterval]}}<i class="el-icon-caret-bottom el-icon--right"></i>
+                  </span>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item command="15">最近15分钟</el-dropdown-item>
+                    <el-dropdown-item command="30">最近30分钟</el-dropdown-item>
+                    <el-dropdown-item command="60">最近1小时</el-dropdown-item>
+                  </el-dropdown-menu>
+              </el-dropdown>
+            </div>
         </div>
         <div class="page-tab">
             <el-tabs v-model="activeTab" @tab-click="onTabClick">
@@ -26,6 +41,9 @@
 </template>
 
 <script>
+import {
+  SET_MONITOR_TIME_INTERVAL,
+} from '../../../store/types';
 
 export default {
   data() {
@@ -36,9 +54,17 @@ export default {
       nodesNum: 0,
       indices: [],
       indicesNum: 0,
+      periodTimeMap: {
+        15: '最近15分钟',
+        30: '最近30分钟',
+        60: '最近1小时',
+      },
     };
   },
   methods: {
+    handleCommand(command) {
+      this.$store.dispatch(SET_MONITOR_TIME_INTERVAL, command);
+    },
     onTabClick() {
       this.$router.push({
         name: this.activeTab,
@@ -86,6 +112,9 @@ export default {
     },
   },
   computed: {
+    timeInterval() {
+      return this.$store.state.monitorTimeInterval;
+    },
     clusterId() {
       return this.$route.query.clusterId;
     },

diff --git a/pallas-console-web/src/store/index.js b/pallas-console-web/src/store/index.js
@@ -3,24 +3,32 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import {
   SET_LOGIN_USER,
+  SET_MONITOR_TIME_INTERVAL,
 } from './types';
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
   state: {
     loginUser: '',
+    monitorTimeInterval: '30',
   },
   getters: {
   },
   mutations: {
     [SET_LOGIN_USER](state, loginUser) {
       state.loginUser = loginUser;
     },
+    [SET_MONITOR_TIME_INTERVAL](state, timeInterval) {
+      state.monitorTimeInterval = timeInterval;
+    },
   },
   actions: {
     [SET_LOGIN_USER]({ commit }, loginUser) {
       commit(SET_LOGIN_USER, loginUser);
     },
+    [SET_MONITOR_TIME_INTERVAL]({ commit }, timeInterval) {
+      commit(SET_MONITOR_TIME_INTERVAL, timeInterval);
+    },
   },
 });
diff --git a/pallas-console-web/src/store/types.js b/pallas-console-web/src/store/types.js
@@ -1,4 +1,6 @@
 export const SET_LOGIN_USER = 'SET_LOGIN_USER';
+export const SET_MONITOR_TIME_INTERVAL = 'SET_MONITOR_TIME_INTERVAL';
 export default {
   SET_LOGIN_USER,
+  SET_MONITOR_TIME_INTERVAL,
 };
diff --git a/pallas-console-web/src/styles/main.css b/pallas-console-web/src/styles/main.css
@@ -47,12 +47,12 @@ pre {
     background: #373a3c;
     border-radius: 0.25rem;
     height: 30px;
-    padding-left: 15px;
 }
 
 .my-breadcrumb-content {
     line-height: 30px;
     font-size: 15px;
+    margin: 0 15px;
 }
 
 .pull-left {