Merge pull request #7509 from GuoLiBin6/feat/glb-master/src

feat: 宿主机列表优化,支持展示cpu/mem使用率;列表过滤更改不清空当前数据

containers/Compute/views/host/components/List.vue

@@ -24,6 +24,9 @@ import { typeClouds, getDisabledProvidersActionMeta } from '@/utils/common/hyper
 import { getDomainChangeOwnerAction, getSetPublicAction, getEnabledSwitchActions } from '@/utils/common/tableActions'
 import { HYPERVISORS_MAP, EXTRA_HYPERVISORS } from '@/constants'
 import regexp from '@/utils/regexp'
+import { getRequestT } from '@/utils/utils'
+import { getSignature } from '@/utils/crypto'
+import { HOST_INFO_OPTS } from '../constants'
 import SingleActionsMixin from '../mixins/singleActions'
 import ColumnsMixin from '../mixins/columns'
 
@@ -121,6 +124,7 @@ export default {
         fetchDataCb: (res) => {
           const { totals = {} } = res.data
           this.$emit('resStatisticsChange', totals)
+          this.fetchUsedPercent(res.data.data)
         },
       }),
     }
@@ -516,6 +520,40 @@ export default {
     refresh () {
       this.list.fetchData()
     },
+    async fetchUsedPercent (list = []) {
+      try {
+        const reqList = [HOST_INFO_OPTS[0], HOST_INFO_OPTS[1]].map(opt => {
+          return new this.$Manager('unifiedmonitors', 'v1')
+            .performAction({
+              id: 'query',
+              action: '',
+              data: this.genQueryData(opt, list),
+              params: { $t: getRequestT() },
+            })
+        })
+        const res = await Promise.all(reqList)
+        const data = {}
+        res.forEach((r, index) => {
+          const { series = [{}] } = (r.data || {})
+          series.forEach((serie, serIdx) => {
+            const { points = [], tags = {} } = serie
+            const { host_ip = '' } = tags
+            if (host_ip && points.length) {
+              const targets = list.filter(item => item.access_ip === host_ip)
+              if (targets.length) {
+                const id = targets[0].id
+                const percent = points.reduce((acc, cur) => acc + cur[0], 0) / points.length / 100
+                data[id] = data[id] || {}
+                data[id][index === 0 ? 'cpu_used_percent' : 'mem_used_percent'] = percent
+              }
+            }
+          })
+        })
+        this.list.updatesProperty(data)
+      } catch (err) {
+        console.error(err)
+      }
+    },
     extraExportParams ({ currentExportType }) {
       if (currentExportType === 'all') return { baremetal: false }
       return {}
@@ -545,6 +583,44 @@ export default {
         return 'any_mac'
       }
     },
+    genQueryData (val, list) {
+      const select = [
+        {
+          type: 'field',
+          params: [val.seleteItem],
+        },
+        { // 对应 mean(val.seleteItem)
+          type: 'max',
+          params: [],
+        },
+      ]
+      const tags = []
+      list.map((item, index) => {
+        const l = { key: 'host_ip', operator: '=', value: '10.127.100.2' }
+        if (index) {
+          l.condition = 'OR'
+        }
+        tags.push(l)
+      })
+      const data = {
+        metric_query: [
+          {
+            model: {
+              measurement: val.fromItem,
+              select: [select],
+              group_by: [{ type: 'tag', params: ['host_ip'] }],
+              tags,
+            },
+          },
+        ],
+        scope: this.$store.getters.scope,
+        from: '1h',
+        interval: '5m',
+        unit: true,
+      }
+      data.signature = getSignature(data)
+      return data
+    },
   },
 }
 </script>

containers/Compute/views/host/mixins/columns.js

@@ -14,6 +14,7 @@ import {
   getTimeTableColumn,
   getCopyWithContentTableColumn,
 } from '@/utils/common/tableColumn'
+import { numerify } from '@/filters'
 import { sizestr } from '@/utils/utils'
 import i18n from '@/locales'
 import { getHostSpecInfo } from '../utils/index'
@@ -191,14 +192,18 @@ export default {
         sortBy: 'order_by_cpu_commit',
         slots: {
           default: ({ row }) => {
-            const { cpu_count = 0, cpu_count_virtual = 0, cpu_commit = 0 } = getHostSpecInfo(row)
-            const title = `${this.$t('common_233')}: ${Math.round(cpu_commit)}\n${this.$t('compute.actual_total')}: ${Math.round(cpu_count)}\n${this.$t('compute.virtual_total')}: ${Math.round(cpu_count_virtual)}`
-            return [<MultipleProgress title={title} progress1Value={Math.max(1, cpu_commit)} progress2Value={Math.max(1, cpu_count)} progress3Value={Math.max(1, cpu_count_virtual)} text={`${cpu_commit}/${cpu_count}/${cpu_count_virtual}`} />]
+            const { cpu_count = 0, cpu_commit = 0 } = getHostSpecInfo(row)
+            let cpu_used = 0
+            if (row.cpu_used_percent) {
+              cpu_used = cpu_count * row.cpu_used_percent
+            }
+            const title = `${this.$t('compute.actual_used')}: ${Math.round(cpu_used)}, ${numerify(row.cpu_used_percent, '0.00%')}\n${this.$t('common_233')}: ${Math.round(cpu_commit)}\n${this.$t('compute.actual_total')}: ${Math.round(cpu_count)}`
+            return [<MultipleProgress progress1AlertThreshold={0.7} title={title} progress1Value={cpu_used} progress2Value={cpu_commit} progress3Value={cpu_count} text={`${Math.round(cpu_used)}/${Math.round(cpu_commit)}/${Math.round(cpu_count)}`} />]
           },
         },
         formatter: ({ row }) => {
-          const { cpu_count = 0, cpu_count_virtual = 0, cpu_commit = 0 } = getHostSpecInfo(row)
-          const title = `${this.$t('common_233')}: ${Math.round(cpu_commit)}, ${this.$t('compute.actual_total')}: ${Math.round(cpu_count)}, ${this.$t('compute.virtual_total')}: ${Math.round(cpu_count_virtual)}`
+          const { cpu_count = 0, cpu_commit = 0 } = getHostSpecInfo(row)
+          const title = `${this.$t('common_233')}: ${Math.round(cpu_commit)}, ${this.$t('compute.actual_total')}: ${Math.round(cpu_count)}`
           return title
         },
       },
@@ -210,14 +215,18 @@ export default {
         sortBy: 'order_by_mem_commit',
         slots: {
           default: ({ row }) => {
-            const { mem_size, mem_size_virtual, mem_commit } = getHostSpecInfo(row)
-            const title = `${this.$t('common_233')}: ${sizestr(mem_commit, 'M', 1024)}\n${this.$t('compute.actual_total')}: ${sizestr(mem_size, 'M', 1024)}\n${this.$t('compute.virtual_total')}: ${sizestr(mem_size_virtual, 'M', 1024)}`
-            return [<MultipleProgress title={title} progress1Value={Math.max(1, mem_commit)} progress2Value={Math.max(1, mem_size)} progress3Value={Math.max(1, mem_size_virtual)} text={`${sizestr(mem_commit, 'M', 1024)}/${sizestr(mem_size, 'M', 1024)}/${sizestr(mem_size_virtual, 'M', 1024)}`} />]
+            const { mem_size, mem_commit } = getHostSpecInfo(row)
+            let mem_used = 0
+            if (row.mem_used_percent) {
+              mem_used = mem_size * row.mem_used_percent
+            }
+            const title = `${this.$t('compute.actual_used')}: ${sizestr(mem_used, 'M', 1024)}, ${numerify(row.mem_used_percent, '0.00%')}\n${this.$t('common_233')}: ${sizestr(mem_commit, 'M', 1024)}\n${this.$t('compute.actual_total')}: ${sizestr(mem_size, 'M', 1024)}`
+            return [<MultipleProgress progress1AlertThreshold={0.7} title={title} progress1Value={mem_used} progress2Value={mem_commit} progress3Value={mem_size} text={`${sizestr(Math.round(mem_used), 'M', 1024)}/${sizestr(mem_commit, 'M', 1024)}/${sizestr(mem_size, 'M', 1024)}`} />]
           },
         },
         formatter: ({ row }) => {
-          const { mem_size, mem_size_virtual, mem_commit } = getHostSpecInfo(row)
-          const title = `${this.$t('common_233')}: ${sizestr(mem_commit, 'M', 1024)}, ${this.$t('compute.actual_total')}: ${sizestr(mem_size, 'M', 1024)}, ${this.$t('compute.virtual_total')}: ${sizestr(mem_size_virtual, 'M', 1024)}`
+          const { mem_size, mem_commit } = getHostSpecInfo(row)
+          const title = `${this.$t('common_233')}: ${sizestr(mem_commit, 'M', 1024)}, ${this.$t('compute.actual_total')}: ${sizestr(mem_size, 'M', 1024)}`
           return title
         },
       },
@@ -229,14 +238,14 @@ export default {
         sortBy: 'order_by_storage_used',
         slots: {
           default: ({ row }) => {
-            const { storage_size, storage_size_virtual, storage_commit, actual_storage_used } = getHostSpecInfo(row)
-            const title = `${this.$t('compute.actual_used')}: ${sizestr(actual_storage_used, 'M', 1024)}\n${this.$t('common_233')}: ${sizestr(storage_commit, 'M', 1024)}\n${this.$t('compute.actual_total')}: ${sizestr(storage_size, 'M', 1024)}\n${this.$t('compute.virtual_total')}: ${sizestr(storage_size_virtual, 'M', 1024)}`
-            return [<MultipleProgress title={title} progress0Value={Math.max(1, actual_storage_used)} progress1Value={Math.max(1, storage_commit)} progress2Value={Math.max(1, storage_size)} progress3Value={Math.max(1, storage_size_virtual)} text={`${sizestr(actual_storage_used, 'M', 1024)}/${sizestr(storage_commit, 'M', 1024)}/${sizestr(storage_size, 'M', 1024)}/${sizestr(storage_size_virtual, 'M', 1024)}`} />]
+            const { storage_size, storage_commit, actual_storage_used } = getHostSpecInfo(row)
+            const title = `${this.$t('compute.actual_used')}: ${sizestr(actual_storage_used, 'M', 1024)}, ${numerify(actual_storage_used / storage_size, '0.00%')}\n${this.$t('common_233')}: ${sizestr(storage_commit, 'M', 1024)}\n${this.$t('compute.actual_total')}: ${sizestr(storage_size, 'M', 1024)}`
+            return [<MultipleProgress progress1AlertThreshold={0.7} title={title} progress1Value={actual_storage_used} progress2Value={storage_commit} progress3Value={storage_size} text={`${sizestr(actual_storage_used, 'M', 1024)}/${sizestr(storage_commit, 'M', 1024)}/${sizestr(storage_size, 'M', 1024)}`} />]
           },
         },
         formatter: ({ row }) => {
-          const { storage_size, storage_size_virtual, storage_commit, actual_storage_used } = getHostSpecInfo(row)
-          const title = `${this.$t('compute.actual_used')}: ${sizestr(actual_storage_used, 'M', 1024)}, ${this.$t('common_233')}: ${sizestr(storage_commit, 'M', 1024)}, ${this.$t('compute.actual_total')}: ${sizestr(storage_size, 'M', 1024)}, ${this.$t('compute.virtual_total')}: ${sizestr(storage_size_virtual, 'M', 1024)}`
+          const { storage_size, storage_commit, actual_storage_used } = getHostSpecInfo(row)
+          const title = `${this.$t('compute.actual_used')}: ${sizestr(actual_storage_used, 'M', 1024)}, ${this.$t('common_233')}: ${sizestr(storage_commit, 'M', 1024)}, ${this.$t('compute.actual_total')}: ${sizestr(storage_size, 'M', 1024)}`
           return title
         },
       },

containers/Compute/views/host/sidepage/Dashboard.vue

@@ -39,7 +39,7 @@ import RingCard from '@/sections/RingCard'
 import { sizestrWithUnit, getRequestT } from '@/utils/utils'
 import Top5 from '@/sections/Top5'
 import { getSignature } from '@/utils/crypto'
-import { GAUGEMSG, HOST_TOP5, HOST_INFO_OPTS } from '../constants'
+import { GAUGEMSG, HOST_TOP5 } from '../constants'
 import { getHostSpecInfo } from '../utils/index'
 
 export default {
@@ -58,6 +58,10 @@ export default {
       type: Object,
       required: true,
     },
+    hostListMap: {
+      type: Array,
+      default: () => ({}),
+    },
   },
   data () {
     return {
@@ -146,7 +150,7 @@ export default {
           msg: {
             current: parseInt(obj.cpu_count * this.progressListPercent[0]) < obj.cpu_count * this.progressListPercent[0] ? Math.floor(parseInt(obj.cpu_count * this.progressListPercent[0]) + 1, obj.cpu_count) : obj.cpu_count * this.progressListPercent[0], // 向上取整
             totalLabel: this.$t('compute.actual_total'),
-            currentLabel: this.$t('compute.text_1330'),
+            currentLabel: this.$t('compute.actual_used'),
             total: `${obj.cpu_count} (${this.$t('compute.text_563')}: ${obj.cpu_count - obj.cpu_reserved}, ${this.$t('compute.reserved')}: ${obj.cpu_reserved})`,
           },
         }
@@ -158,7 +162,7 @@ export default {
           msg: {
             current: sizestrWithUnit(obj.mem_size * this.progressListPercent[1], 'M', 1024),
             totalLabel: this.$t('compute.actual_total'),
-            currentLabel: this.$t('compute.text_1330'),
+            currentLabel: this.$t('compute.actual_used'),
             total: `${sizestrWithUnit(obj.mem_size, 'M', 1024)} (${this.$t('compute.text_564')}: ${sizestrWithUnit(obj.mem_size - obj.mem_reserved, 'M', 1024)}, ${this.$t('compute.reserved')}: ${sizestrWithUnit(obj.mem_reserved, 'M', '1024')})`,
           },
         }
@@ -170,7 +174,7 @@ export default {
           msg: {
             current: sizestrWithUnit(obj.storage_size * this.progressListPercent[2], 'M', 1024),
             totalLabel: this.$t('compute.actual_total'),
-            currentLabel: this.$t('compute.text_1330'),
+            currentLabel: this.$t('compute.actual_used'),
             total: `${sizestrWithUnit(obj.storage_size, 'M', 1024)} (${this.$t('compute.text_565')}: ${sizestrWithUnit(obj.storage_size, 'M', '1024')})`,
           },
         }
@@ -186,28 +190,12 @@ export default {
   methods: {
     async fetchUsedPercent () {
       try {
-        const reqList = HOST_INFO_OPTS.map(opt => {
-          return new this.$Manager('unifiedmonitors', 'v1')
-            .performAction({
-              id: 'query',
-              action: '',
-              data: this.genQueryData(opt),
-              params: { $t: getRequestT() },
-            })
-        })
-        const res = await Promise.all(reqList)
-        const list = []
-        res.forEach((r, index) => {
-          const { series = [{}] } = (r.data || {})
-          const { points = [] } = (series[0] || {})
-          if (points.length) {
-            const percent = points.reduce((acc, cur) => acc + cur[0], 0) / points.length
-            list.push(percent / 100)
-          } else {
-            list.push(0)
-          }
-        })
-        this.progressListPercent = list
+        if (this.data.id && this.hostListMap[this.data.id]) {
+          const data = this.hostListMap[this.data.id]?.data
+          const { cpu_used_percent = 0, mem_used_percent = 0 } = data
+          const { storage_size, actual_storage_used = 0 } = getHostSpecInfo(data)
+          this.progressListPercent = [cpu_used_percent, mem_used_percent, actual_storage_used / storage_size]
+        }
       } catch (err) {
         console.error(err)
       }

containers/Compute/views/host/sidepage/index.vue

@@ -22,6 +22,7 @@
       :refresh="refresh"
       :getParams="getParams"
       :probeHostDevices="probeHostDevices"
+      :hostListMap="params.list.data"
       taskResource="compute-tasks"
       @tab-change="handleTabChange" />
   </base-side-page>

src/components/MultipleProgress/index.vue

@@ -1,24 +1,26 @@
 <template>
   <div class="progress-wrapper" :title="title">
     <div class="title">{{ text }}</div>
-    <div class="progress0" v-if="progressConfig.progress0.show" :style="progressConfig.progress0.style" />
+    <!-- <div class="progress0" v-if="progressConfig.progress0.show" :style="progressConfig.progress0.style" /> -->
     <div class="progress1" v-if="progressConfig.progress1.show" :style="progressConfig.progress1.style" />
     <div class="progress2" v-if="progressConfig.progress2.show" :style="progressConfig.progress2.style" />
     <div class="progress3" v-if="progressConfig.progress3.show" :style="progressConfig.progress3.style" />
   </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+
 export default {
   name: 'MultipleProgress',
   props: {
     text: String,
     title: String,
-    progress0Value: {
-      type: Number,
-      default: 0.0,
-      required: false,
-    },
+    // progress0Value: {
+    //   type: Number,
+    //   default: 0.0,
+    //   required: false,
+    // },
     progress1Value: {
       type: Number,
       default: 0.0,
@@ -34,37 +36,49 @@ export default {
       default: 0.0,
       required: false,
     },
+    progress1AlertThreshold: {
+      type: Number,
+      default: 0,
+    },
   },
   computed: {
+    ...mapGetters(['theme', 'themeColor']),
+    alertColor () {
+      return ['#F5222D', '#FA541C'].includes(this.themeColor) ? '#0099F0' : '#F5222D'
+    },
     progressConfig () {
-      const max = Math.max(this.progress0Value, this.progress1Value, this.progress2Value, this.progress3Value)
+      const max = Math.max(this.progress1Value, this.progress2Value, this.progress3Value)
       return {
-        progress0: {
-          show: this.progress0Value > 0,
-          style: {
-            width: Math.max(0.01, this.progress0Value / max) * 100 + '%',
-            background: this.color || 'var(--antd-wave-shadow-color)',
-          },
-        },
+        // progress0: {
+        //   show: true,
+        //   style: {
+        //     width: (this.progress0Value / max) * 100 + '%',
+        //     borderLeft: !this.this.progress0Value ? `1px solid ${this.color || 'var(--antd-wave-shadow-color)'}` : 'none',
+        //     background: this.color || 'var(--antd-wave-shadow-color)',
+        //   },
+        // },
         progress1: {
-          show: this.progress1Value > 0,
+          show: true,
           style: {
-            width: Math.max(0.01, this.progress1Value / max) * 100 + '%',
-            background: this.color || 'var(--antd-wave-shadow-color)',
+            width: (this.progress1Value / max) * 100 + '%',
+            background: this.progress1AlertThreshold && (this.progress1Value / max) > this.progress1AlertThreshold ? this.alertColor : this.color || 'var(--antd-wave-shadow-color)',
+            borderLeft: !this.progress1Value ? `1px solid ${this.color || 'var(--antd-wave-shadow-color)'}` : 'none',
           },
         },
         progress2: {
-          show: this.progress2Value > 0,
+          show: true,
           style: {
-            width: Math.max(0.01, this.progress2Value / max) * 100 + '%',
+            width: (this.progress2Value / max) * 100 + '%',
             border: `solid 1px ${this.color || 'var(--antd-wave-shadow-color)'}`,
+            borderRight: this.progress2Value ? `1px solid ${this.color || 'var(--antd-wave-shadow-color)'}` : 'none',
           },
         },
         progress3: {
-          show: this.progress3Value > 0,
+          show: true,
           style: {
-            width: Math.max(0.01, this.progress3Value / max) * 100 + '%',
+            width: (this.progress3Value / max) * 100 + '%',
             border: `dashed 1px ${this.color || 'var(--antd-wave-shadow-color)'}`,
+            borderRight: this.progress3Value ? `1px solid ${this.color || 'var(--antd-wave-shadow-color)'}` : 'none',
           },
         },
       }
@@ -76,7 +90,7 @@ export default {
 <style lang="less" scoped>
 .progress-wrapper {
   width: 100%;
-  max-width: 150px;
+  max-width: 100px;
   .title {
     width: 100%;
     overflow: hidden;
@@ -85,7 +99,7 @@ export default {
   }
   .progress0, .progress1, .progress2, .progress3 {
     height: 5px;
-    max-width: 100px;
+    box-sizing: border-box;
   }
   .progress3 {
     margin-top: -1px;