资源监控

src/api/resources.js

@@ -6,6 +6,15 @@ export function getCpu(query) {
     params: query
   })
 }
+
+export function getCpuInfo(query) {
+  return request({
+    url: '/resource/cpuInfo',
+    method: 'get',
+    params: query
+  })
+}
+
 export function getMemory(query) {
   return request({
     url: '/resource/memory',
@@ -13,3 +22,11 @@ export function getMemory(query) {
     params: query
   })
 }
+
+export function getMemoryInfo(query) {
+  return request({
+    url: '/resource/memoryInfo',
+    method: 'get',
+    params: query
+  })
+}

src/router/index.js

@@ -314,11 +314,25 @@ export const asyncRouterMap = [
         name: 'cpu',
         meta: { title: 'cpu', icon: '' }
       },
+      {
+        path: 'cpuInfo',
+        component: () => import('@/views/resources/cpuInfo'),
+        name: 'cpuInfo',
+        meta: { title: 'cpuInfo', icon: '' },
+        hidden: true
+      },
       {
         path: 'memory',
         component: () => import('@/views/resources/memoryDetails'),
         name: 'memory',
         meta: { title: 'memory', icon: '' }
+      },
+      {
+        path: 'memoryInfo',
+        component: () => import('@/views/resources/memoryInfo'),
+        name: 'memoryInfo',
+        meta: { title: 'memoryInfo', icon: '' },
+        hidden: true
       }
     ]
   },

src/views/docker/envDetail.vue

@@ -819,7 +819,7 @@ export default {
       const sn = scopeData.serviceName
       const ns = this.namespace
       // const url = `http://kibana-new.quantgroups.com/app/kibana#/discover?_g=(filters:!(),refreshInterval:(pause:!f,value:5000),time:(from:now-2m,to:now))&_a=(columns:!(message),filters:!(('$state':(store:appState),meta:(alias:!n,disabled:!f,index:c7d3a2f0-b760-11e9-a937-01944fbd6d1d,key:k8s.namespace,negate:!f,params:(query:${ns}),type:phrase,value:${ns}),query:(match:(k8s.namespace:(query:${ns},type:phrase)))),('$state':(store:appState),meta:(alias:!n,disabled:!f,index:c7d3a2f0-b760-11e9-a937-01944fbd6d1d,key:k8s.svcname,negate:!f,params:(query:${sn}),type:phrase,value:${sn}),query:(match:(k8s.svcname:(query:${sn},type:phrase))))),index:c7d3a2f0-b760-11e9-a937-01944fbd6d1d,interval:auto,query:(language:kuery,query:''),sort:!(logtime,desc))`
-      const url = `http://kibana.liangkebang.com/app/kibana#/discover?_g=(filters:!(),refreshInterval:(pause:!f,value:5000),time:(from:now-2m,to:now))&_a=(columns:!(message),filters:!(('$state':(store:appState),meta:(alias:!n,disabled:!f,index:'32928e30-2dfe-11ea-9e0b-e9f0925e7ace',key:k8s.namespace,negate:!f,params:(query:${ns}),type:phrase,value:${ns}),query:(match:(k8s.namespace:(query:${ns},type:phrase)))),('$state':(store:appState),meta:(alias:!n,disabled:!f,index:'32928e30-2dfe-11ea-9e0b-e9f0925e7ace',key:k8s.svcname,negate:!f,params:(query:${sn}),type:phrase,value:${sn}),query:(match:(k8s.svcname:(query:${sn},type:phrase))))),index:'32928e30-2dfe-11ea-9e0b-e9f0925e7ace',interval:auto,query:(language:kuery,query:''),sort:!(logtime,desc))`
+      const url = `http://kibana.liangkebang.com/app/kibana#/discover?_g=(filters:!(),refreshInterval:(pause:!t,value:5000),time:(from:now-15m,to:now))&_a=(columns:!(message),filters:!(('$state':(store:appState),meta:(alias:!n,disabled:!f,index:'32928e30-2dfe-11ea-9e0b-e9f0925e7ace',key:k8s.namespace,negate:!f,params:(query:${ns}),type:phrase,value:${ns}),query:(match:(k8s.namespace:(query:${ns},type:phrase)))),('$state':(store:appState),meta:(alias:!n,disabled:!f,index:'32928e30-2dfe-11ea-9e0b-e9f0925e7ace',key:k8s.svcname,negate:!f,params:(query:${sn}),type:phrase,value:${sn}),query:(match:(k8s.svcname:(query:${sn},type:phrase))))),index:'32928e30-2dfe-11ea-9e0b-e9f0925e7ace',interval:auto,query:(language:kuery,query:''),sort:!(logtime,desc))`
       window.open(`${url}`, '_blank')
     },
 

src/views/resources/cpuDetails.vue

 <template>
   <div class="app-container">
-    <div class="filter-container">
+    <div style="margin-bottom:20px">
+      <el-input v-model="name" placeholder="服务名称" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
       <el-date-picker
         v-model="startTime"
-        type="datetime"
+        type="date"
         dataformatas=""
         placeholder="选择日期时间"
         default-time="00:00:00"/>
       <el-date-picker
         v-model="endTime"
-        type="datetime"
+        type="date"
         placeholder="选择日期时间"
         default-time="23:59:59"/>
       <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
@@ -28,22 +29,29 @@
       </el-table-column>
       <el-table-column label="服务名" prop="Action" align="center">
         <template slot-scope="scope">
-          <span >{{ scope.row._id }}</span>
+          <span >{{ scope.row.name }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="Cpu Used Limit" prop="Microservice Name" align="center">
+
+      <el-table-column sortable label="Cpu Used Limit" prop="cpuLimit" align="center"/>
+
+      <el-table-column sortable label="Cpu Used Max" prop="cpuMaxUsage" align="center">
         <template slot-scope="scope">
-          <span >{{ scope.row.cpuLimit }}</span>
+          <span >{{ scope.row.cpuMaxUsage.toFixed(5) }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="Cpu Used Max" prop="Namespace" align="center">
+
+      <el-table-column sortable label="Cpu最大利用率" prop="Percentage" align="center">
         <template slot-scope="scope">
-          <span >{{ scope.row.cpuMaxUsage }}</span>
+          <span >{{ (scope.row.Percentage*100).toFixed(2)+'%' }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="Cpu最大利用率" prop="Namespace" align="center">
+
+      <el-table-column :formatter="formatDate" label="日期" prop="createdAt" align="center"/>
+
+      <el-table-column label="详情" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <span >{{ (scope.row.Percentage*100).toFixed(2)+'%' }}</span>
+          <el-button size="mini" @click="handleInfo(scope.row)">详情</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -61,15 +69,11 @@ export default {
   name: 'CpuDetails',
   components: { Pagination, JsonEditor },
   directives: { waves },
-  filters: {
-    formatDate(date, pattern = 'YYYY-MM-DD HH:mm:ss') {
-      return moment(date).format(pattern)
-    }
-  },
   data() {
     return {
-      startTime: moment().startOf('d').format(),
-      endTime: moment().endOf('d').format(),
+      startTime: moment(new Date()).add(-1, 'days').format(),
+      endTime: moment(new Date()).format(),
+      name: undefined,
       cpuResources: null
     }
   },
@@ -79,9 +83,15 @@ export default {
   },
 
   methods: {
+    formatDate(row) {
+      const pattern = 'YYYY-MM-DD'
+      return moment(row.createdAt).format(pattern)
+    },
+
     handleFilter() {
       this.fetchDate()
     },
+
     fetchDate() {
       if (this.startTime === null || this.endTime === null) {
         this.$notify({
@@ -91,7 +101,7 @@ export default {
         })
         return false
       }
-      getCpu({ startTime: this.startTime, endTime: this.endTime }).then((res) => {
+      getCpu({ name: this.name, startTime: this.startTime, endTime: this.endTime }).then((res) => {
         if (res.data.length > 0) {
           this.cpuResources = res.data
         } else {
@@ -102,8 +112,20 @@ export default {
           })
         }
       })
+    },
+
+    handleInfo(row) {
+      this.$router.push({
+        name: 'cpuInfo',
+        query: {
+          name: row.name,
+          startTime: moment(this.startTime).format(),
+          endTime: moment(this.endTime).format()
+        }
+      })
     }
   }
+
 }
 </script>
 

src/views/resources/cpuInfo.vue

+<template>
+  <div class="app-container">
+    <el-table
+      :data="cpuResources"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%;">
+      <el-table-column :label="$t('table.id')" prop="id" align="center" width="65">
+        <template slot-scope="scope">
+          <span>{{ scope.$index + 1 }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="Pod名称" prop="Action" align="center">
+        <template slot-scope="scope">
+          <span >{{ scope.row.name }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column sortable label="Cpu Used Limit" prop="cpuLimit" align="center"/>
+      <el-table-column sortable label="Cpu Used Max" prop="cpuMaxUsage" align="center"/>
+
+      <el-table-column sortable label="Cpu最大利用率" prop="Percentage" align="center">
+        <template slot-scope="scope">
+          <span >{{ (scope.row.Percentage*100).toFixed(2)+'%' }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :formatter="formatDate" label="日期" prop="createdAt" align="center"/>
+
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { getCpuInfo } from '@/api/resources'
+import waves from '@/directive/waves' // Waves directive
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import JsonEditor from '@/components/JsonEditor'
+import moment from 'moment'
+
+export default {
+  name: 'CpuInfo',
+  components: { Pagination, JsonEditor },
+  directives: { waves },
+  data() {
+    return {
+      startTime: undefined,
+      endTime: undefined,
+      name: undefined,
+      cpuResources: null
+    }
+  },
+
+  created() {
+    this.name = this.$route.query.name
+    this.startTime = this.$route.query.startTime
+    this.endTime = this.$route.query.endTime
+    this.fetchDate()
+  },
+
+  methods: {
+    formatDate(row) {
+      const pattern = 'YYYY-MM-DD'
+      return moment(row.createdAt).format(pattern)
+    },
+
+    handleFilter() {
+      this.fetchDate()
+    },
+    fetchDate() {
+      getCpuInfo({ name: this.name, startTime: this.startTime, endTime: this.endTime }).then((res) => {
+        if (res.data.length > 0) {
+          this.cpuResources = res.data
+        } else {
+          this.$notify({
+            title: '警告',
+            message: '当前日期暂无数据',
+            type: 'warning'
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-form-item {
+    width: 600px;
+  }
+</style>

src/views/resources/memoryDetails.vue

 <template>
   <div class="app-container">
-    <div class="filter-container">
+    <div style="margin-bottom:20px">
+      <el-input v-model="name" placeholder="服务名称" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
       <el-date-picker
         v-model="startTime"
-        type="datetime"
+        type="date"
         dataformatas=""
         placeholder="选择日期时间"
         default-time="00:00:00"/>
       <el-date-picker
         v-model="endTime"
-        type="datetime"
+        type="date"
         placeholder="选择日期时间"
         default-time="23:59:59"/>
       <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
@@ -28,24 +29,32 @@
       </el-table-column>
       <el-table-column label="服务名" prop="Action" align="center">
         <template slot-scope="scope">
-          <span >{{ scope.row._id }}</span>
+          <span >{{ scope.row.name }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="Memory Limit(Mib)" prop="Microservice Name" align="center">
+      <el-table-column sortable label="Memory Limit(Mib)" prop="memoryLimit" align="center">
         <template slot-scope="scope">
           <span >{{ scope.row.memoryLimit }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="Memory Used Max(Mib)" prop="Namespace" align="center">
+      <el-table-column sortable label="Memory Used Max(Mib)" prop="memoryMaxUsage" align="center">
         <template slot-scope="scope">
           <span >{{ scope.row.memoryMaxUsage }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="Memory最大利用率" prop="Namespace" align="center">
+      <el-table-column sortable label="Memory最大利用率" prop="Percentage" align="center">
         <template slot-scope="scope">
           <span >{{ (scope.row.Percentage*100).toFixed(2)+'%' }}</span>
         </template>
       </el-table-column>
+
+      <el-table-column :formatter="formatDate" label="日期" prop="createdAt" align="center"/>
+
+      <el-table-column label="详情" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button size="mini" @click="handleInfo(scope.row)">详情</el-button>
+        </template>
+      </el-table-column>
     </el-table>
   </div>
 </template>
@@ -61,15 +70,11 @@ export default {
   name: 'MemoryDetails',
   components: { Pagination, JsonEditor },
   directives: { waves },
-  filters: {
-    formatDate(date, pattern = 'YYYY-MM-DD HH:mm:ss') {
-      return moment(date).format(pattern)
-    }
-  },
   data() {
     return {
-      startTime: moment().startOf('d').format(),
-      endTime: moment().endOf('d').format(),
+      startTime: moment(new Date()).add(-1, 'days').format(),
+      endTime: moment(new Date()).format(),
+      name: undefined,
       memoryResources: null
     }
   },
@@ -78,6 +83,11 @@ export default {
   },
 
   methods: {
+    formatDate(row) {
+      const pattern = 'YYYY-MM-DD'
+      return moment(row.createdAt).format(pattern)
+    },
+
     handleFilter() {
       console.log(this.startTime)
       this.fetchDate()
@@ -91,7 +101,7 @@ export default {
         })
         return false
       }
-      getMemory({ startTime: this.startTime, endTime: this.endTime }).then((res) => {
+      getMemory({ name: this.name, startTime: this.startTime, endTime: this.endTime }).then((res) => {
         if (res.data.length > 0) {
           this.memoryResources = res.data
         } else {
@@ -102,6 +112,17 @@ export default {
           })
         }
       })
+    },
+
+    handleInfo(row) {
+      this.$router.push({
+        name: 'memoryInfo',
+        query: {
+          name: row.name,
+          startTime: moment(this.startTime).format(),
+          endTime: moment(this.endTime).format()
+        }
+      })
     }
   }
 }

src/views/resources/memoryInfo.vue

+<template>
+  <div class="app-container">
+    <el-table
+      :data="cpuResources"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%;">
+      <el-table-column :label="$t('table.id')" prop="id" align="center" width="65">
+        <template slot-scope="scope">
+          <span>{{ scope.$index + 1 }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="Pod名称" prop="Action" align="center">
+        <template slot-scope="scope">
+          <span >{{ scope.row.name }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column sortable label="Memory Used Limit" prop="memoryLimit" align="center"/>
+      <el-table-column sortable label="Memory Used Max" prop="memoryMaxUsage" align="center"/>
+
+      <el-table-column sortable label="Memory最大利用率" prop="Percentage" align="center">
+        <template slot-scope="scope">
+          <span >{{ (scope.row.Percentage*100).toFixed(2)+'%' }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :formatter="formatDate" label="日期" prop="createdAt" align="center"/>
+
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { getMemoryInfo } from '@/api/resources'
+import waves from '@/directive/waves' // Waves directive
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import JsonEditor from '@/components/JsonEditor'
+import moment from 'moment'
+
+export default {
+  name: 'MemoryInfo',
+  components: { Pagination, JsonEditor },
+  directives: { waves },
+  data() {
+    return {
+      startTime: undefined,
+      endTime: undefined,
+      name: undefined,
+      cpuResources: null
+    }
+  },
+
+  created() {
+    this.name = this.$route.query.name
+    this.startTime = this.$route.query.startTime
+    this.endTime = this.$route.query.endTime
+    this.fetchDate()
+  },
+
+  methods: {
+    formatDate(row) {
+      const pattern = 'YYYY-MM-DD'
+      return moment(row.createdAt).format(pattern)
+    },
+
+    handleFilter() {
+      this.fetchDate()
+    },
+    fetchDate() {
+      getMemoryInfo({ name: this.name, startTime: this.startTime, endTime: this.endTime }).then((res) => {
+        if (res.data.length > 0) {
+          this.cpuResources = res.data
+        } else {
+          this.$notify({
+            title: '警告',
+            message: '当前日期暂无数据',
+            type: 'warning'
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-form-item {
+    width: 600px;
+  }
+</style>