Merge pull request #719 from jumpserver/pr@dev@perf_status

perf: 优化系统监控页面

src/views/sessions/TerminalList.vue

@@ -94,8 +94,8 @@ export default {
         url: '/api/v1/terminal/terminals/',
         columns: [
           'name', 'remote_addr', 'session_online',
-          'state.session_active_count', 'state.system_cpu_load_1',
-          'state.system_disk_used_percent', 'state.system_memory_used_percent',
+          'stat.cpu_load',
+          'stat.disk_used', 'stat.memory_used',
           'status_display',
           'is_active', 'is_alive', 'actions'
         ],
@@ -103,19 +103,15 @@ export default {
           name: {
             sortable: 'custom'
           },
-          'state.session_active_count': {
-            label: this.$t('sessions.sessionActiveCount'),
-            width: '120px'
-          },
-          'state.system_cpu_load_1': {
+          'stat.cpu_load': {
             label: this.$t('sessions.systemCpuLoad'),
             width: '120px'
           },
-          'state.system_disk_used_percent': {
+          'stat.disk_used': {
             label: this.$t('sessions.systemDiskUsedPercent'),
             width: '120px'
           },
-          'state.system_memory_used_percent': {
+          'stat.memory_used': {
             label: this.$t('sessions.systemMemoryUsedPercent'),
             width: '120px'
           },

src/views/xpack/SystemMonitor/component/MonitorCard.vue

@@ -1,9 +1,7 @@
 <template>
   <div>
     <div style="font-size: 24px;font-weight: 300">
-      <span v-if="type === 'omnidb'">{{ `OmniDB ( ${serviceData.total} )` }}</span>
-      <span v-else-if="type === 'guacamole'">{{ `Guacamole ( ${serviceData.total} )` }}</span>
-      <span v-else>{{ `KoKo ( ${serviceData.total} )` }}</span>
+      <span>{{ componentName }} ( {{ componentMetric.total }} )</span>
     </div>
     <el-card class="box-card" shadow="never">
       <el-row :gutter="10">
@@ -14,40 +12,40 @@
               <div
                 class="progress-bar progress-bar-success"
                 role="progressbar"
-                :style="{'width':toPercent(serviceData.normal) }"
+                :style="{'width':toPercent(componentMetric.normal) }"
               />
               <div
                 class="progress-bar progress-bar-warning"
                 role="progressbar"
-                :style="{'width':toPercent(serviceData.high) }"
+                :style="{'width':toPercent(componentMetric.high) }"
               />
               <div
                 class="progress-bar progress-bar-danger"
                 role="progressbar"
-                :style="{'width':toPercent(serviceData.critical) }"
+                :style="{'width':toPercent(componentMetric.critical) }"
               />
               <div
                 class="progress-bar progress-bar-offline"
                 role="progressbar"
-                :style="{'width':toPercent(serviceData.offline) }"
+                :style="{'width':toPercent(componentMetric.offline) }"
               />
             </div>
             <div style="display: flex;justify-content: space-around;font-size: 14px;">
               <span>
                 <i class="el-icon-circle-check" style="color: #13CE66;" />
-                {{ $t('xpack.NormalLoad') }}: {{ serviceData.normal }}
+                {{ $t('xpack.NormalLoad') }}: {{ componentMetric.normal }}
               </span>
               <span>
                 <i class="el-icon-bell" style="color: #E6A23C;" />
-                {{ $t('xpack.HighLoad') }}: {{ serviceData.high }}
+                {{ $t('xpack.HighLoad') }}: {{ componentMetric.high }}
               </span>
               <span>
                 <i class="el-icon-message-solid" style="color: #FF4949;" />
-                {{ $t('xpack.CriticalLoad') }}: {{ serviceData.critical }}
+                {{ $t('xpack.CriticalLoad') }}: {{ componentMetric.critical }}
               </span>
               <span>
                 <i class="el-icon-circle-close" style="color: #bfbaba;" />
-                {{ $t('xpack.Offline') }}: {{ serviceData.offline }}
+                {{ $t('xpack.Offline') }}: {{ componentMetric.offline }}
               </span>
             </div>
           </div>
@@ -56,7 +54,7 @@
           <div style="height: 100%;width: 100%;padding-top: 8px;">
             <h2 style="text-align: center;font-weight: 350">{{ $t('dashboard.OnlineSessions') }}</h2>
             <div style="text-align: center;font-size: 30px;">
-              {{ serviceData.session_active }}
+              {{ componentMetric.session_active }}
             </div>
           </div>
         </el-col>
@@ -70,7 +68,6 @@
 export default {
   name: 'MonitorCard',
   components: {
-
   },
   props: {
     // koko/guacamole/omnidb/core
@@ -78,29 +75,25 @@ export default {
       type: String,
       default: 'koko',
       required: true
-    }
-  },
-  data() {
-    return {
-      baseUrl: `/api/v1/terminal/components/metrics/?type=`,
-      serviceData: {
-
-      }
+    },
+    componentMetric: {
+      type: Object,
+      default: () => ({})
     }
   },
   computed: {
-
-  },
-  mounted() {
-    this.getServiceData()
+    componentName() {
+      const nameMapper = {
+        koko: 'KoKo',
+        guacamole: 'Guacamole',
+        omnidb: 'OmniDB'
+      }
+      return nameMapper[this.componentMetric.type]
+    }
   },
   methods: {
-    async getServiceData() {
-      const url = `${this.baseUrl}${this.type}`
-      this.serviceData = await this.$axios.get(url)
-    },
     toPercent(num) {
-      return (Math.round(num / this.serviceData.total * 10000) / 100.00 + '%')// 小数点后两位百分比
+      return (Math.round(num / this.componentMetric.total * 10000) / 100.00 + '%')// 小数点后两位百分比
     }
   }
 }

src/views/xpack/SystemMonitor/index.vue

@@ -1,18 +1,12 @@
 <template>
   <Page>
-    <el-row :gutter="40">
-      <el-col :lg="12" :md="24">
-        <MonitorCard type="koko" class="monitorCard" />
-      </el-col>
-      <el-col :lg="12" :md="24">
-        <MonitorCard type="guacamole" class="monitorCard" />
-      </el-col>
-      <el-col :lg="12" :md="24">
-        <MonitorCard type="omnidb" class="monitorCard" />
+    <el-row v-if="loaded" :gutter="40">
+      <el-col v-for="metric of metricsData" :key="metric.type" :lg="12" :md="24">
+        <MonitorCard :type="metric.type" :component-metric="metric" class="monitorCard" />
       </el-col>
     </el-row>
   </Page>
-</template>lg
+</template>
 
 <script>
 import Page from '@/layout/components/Page/index'
@@ -26,9 +20,24 @@ export default {
   },
   data() {
     return {
+      metricsData: [],
+      loaded: false
     }
   },
   computed: {
+  },
+  mounted() {
+    this.getMetricsData()
+  },
+  methods: {
+    async getMetricsData() {
+      const url = '/api/v1/terminal/components/metrics/'
+      this.$axios.get(url).then((data) => {
+        this.metricsData = data
+      }).finally(() => {
+        this.loaded = true
+      })
+    }
   }
 }
 </script>