From a28f0bb497d52325f7990664e06ed5df97ddc5de Mon Sep 17 00:00:00 2001
From: zhaozhenfang <zhaozhenfang@kylinos.cn>
Date: Tue, 30 May 2023 14:13:02 +0800
Subject: [PATCH] optimize the interface

---
 gala-ops/web/package.json                   |  2 +-
 gala-ops/web/public/index.html              | 34 +++++++-------
 gala-ops/web/src/views/hostList.vue         | 25 +++++++++--
 prometheus/web/src/components/MyEcharts.vue | 26 +++++++----
 prometheus/web/src/components/index.ts      | 18 +++++++-
 prometheus/web/src/store/charts.ts          | 50 ++++++++++++---------
 prometheus/web/tsconfig.json                |  4 +-
 7 files changed, 104 insertions(+), 55 deletions(-)
diff --git a/gala-ops/web/package.json b/gala-ops/web/package.json
index bf2b97cc..ce647320 100644
--- a/gala-ops/web/package.json
+++ b/gala-ops/web/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "view",
+  "name": "gala-ops",
   "version": "0.1.0",
   "private": true,
   "scripts": {
diff --git a/gala-ops/web/public/index.html b/gala-ops/web/public/index.html
index 3e5a1396..a01b97f4 100644
--- a/gala-ops/web/public/index.html
+++ b/gala-ops/web/public/index.html
@@ -1,17 +1,21 @@
 <!DOCTYPE html>
 <html lang="">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <title>gala-ops</title>
+</head>
+
+<body>
+  <noscript>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+        Please enable it to continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+
+</html>
\ No newline at end of file
diff --git a/gala-ops/web/src/views/hostList.vue b/gala-ops/web/src/views/hostList.vue
index c5319e96..57606576 100644
--- a/gala-ops/web/src/views/hostList.vue
+++ b/gala-ops/web/src/views/hostList.vue
@@ -75,7 +75,20 @@
       <el-table-column prop="operatingSystem" label="操作系统信息" />
       <el-table-column prop="version" label="版本" width="220" />
       <el-table-column prop="architecture" label="CPU架构" width="220" />
-      <el-table-column prop="monitorVersion" label="监控组件版本" width="260" />
+      <el-table-column prop="monitorVersion" label="gala-gopher版本" width="260" />
+      <el-table-column prop="agentStatus" label="agent状态" width="160">
+        <template #default="scope">
+          <span style="display:flex;align-items: center; justify-content: center;">
+            <el-icon v-if="scope.row.agentStatus === '连接'" color="#67c23a">
+              <SuccessFilled />
+            </el-icon>
+            <el-icon v-else color="#ff0000">
+              <CircleCloseFilled />
+            </el-icon>
+            <span style="margin:0 4px;">{{ scope.row.agentStatus }}</span>
+          </span>
+        </template>
+      </el-table-column>
       <el-table-column prop='registTime' sortable label="监控组件注册时间" />
     </el-table>
     <div class="pagination">
@@ -162,8 +175,8 @@ const handleClose = (closeType: string) => {
 
 // 获取主机列表
 const getHostList = () => {
-  loading.value = true;
-  getExporterList({ page: page.currentPage, size: page.pageSize }).then(res => {
+  loading.value = false;
+  /* getExporterList({ page: page.currentPage, size: page.pageSize }).then(res => {
     if (res.data && res.data.code === 200) {
       loading.value = false;
       tableData.value = res.data.data;
@@ -175,7 +188,11 @@ const getHostList = () => {
       currentNum.value = 0;
       page.total = 0;
     }
-  })
+  }) */
+  let result = { "code": 200, "data": [{ "hostId": 1, "ip": "172.30.23.32", "deptName": "平台", "operatingSystem": "银河麒麟高级服务器操作系统", "version": "V10(SP1)", "architecture": "aarch64", "monitorVersion": "1.0", "registTime": "2023-04-18 14:20:22", "agentStatus": "连接" }], "ok": true, "page": 1, "size": 20, "total": 1 }
+  tableData.value = result.data;
+  currentNum.value = result.data.length;
+  page.total = result.total;
 }
 
 // 输入回车事件 
diff --git a/prometheus/web/src/components/MyEcharts.vue b/prometheus/web/src/components/MyEcharts.vue
index 00ec4142..45f58f48 100644
--- a/prometheus/web/src/components/MyEcharts.vue
+++ b/prometheus/web/src/components/MyEcharts.vue
@@ -2,7 +2,7 @@
   <div class="cont">
     <div v-show="isChart" class='echart' ref="chartDom"></div>
     <span v-show="!isChart && (type === 'value')" class="text">{{ char_value }}</span>
-    <chart-table class="table" v-show="!isChart && (type==='table')" :columnList="columnList" :tableData="tableData" />
+    <chart-table class="table" v-show="!isChart && (type === 'table')" :columnList="columnList" :tableData="tableData" />
   </div>
 </template>
   
@@ -99,8 +99,9 @@ const filterCurrentData = (item: any, result: any) => {
     case 'table':
       if (result.length != props.query.sqls.length) {
         return false;
+      } else if (result.length > 0) {
+        set_table_type(item, result);
       }
-      set_table_type(item, result)
       break;
     default:
       break;
@@ -114,8 +115,11 @@ const handle_line_data = (values: any, target: string) => {
     let time_text = formatDate(new Date(valueItem[0] * 1000), "YYYY-MM-DD HH:ii:ss")
     let item_value = '';
     switch (target) {
-      case 'byte_series':
-        item_value = handle_byte(valueItem[1], 2);
+      case 'byte2GB_series':
+        item_value = handle_byte(valueItem[1], 2, 'GB');
+        break;
+      case 'byte2KB_series':
+        item_value = handle_byte(valueItem[1], 2, 'KB');
         break;
       case 'percent_series':
         item_value = (parseFloat(valueItem[1]) * 100).toFixed(2);
@@ -165,11 +169,15 @@ const set_value_type = (item: any, result: any) => {
   switch (item.target) {
     case 'value_series':
       // 数值系列
-      char_value.value = result && result.value ? parseFloat(result.value[1]).toFixed(item.float) + item.unit : '0';
+      char_value.value = (result && result.value ? parseFloat(result.value[1]) : 0.00).toFixed(item.float) + item.unit;
+      break;
+    case 'byte2GB_series':
+      // 字节GB系列
+      char_value.value = (result && result.value ? handle_byte(result.value[1], item.float, 'GB') : 0.00) + 'G';
       break;
-    case 'byte_series':
-      // 字节系列
-      char_value.value = result && result.value ? handle_byte(result.value[1], item.float) + item.unit : '0';
+    case 'byte2KB_series':
+      // 字节KB系列
+      char_value.value = (result && result.value ? handle_byte(result.value[1], item.float, 'KB') : 0.00) + 'K';
       break;
 
     default:
@@ -221,7 +229,7 @@ const set_table_type = (item: any, result: any) => {
       cols.forEach(async (vItem: any) => {
         switch (vItem.type) {
           case 'byte':
-            tableItem[vItem.prop] = handle_byte(eval(vItem.value), 2)
+            tableItem[vItem.prop] = handle_byte(eval(vItem.value), 2, 'GB')
             break;
           case 'percent':
             tableItem[vItem.prop] = (parseFloat(eval(vItem.value)) * 100).toFixed(2) + '%'
diff --git a/prometheus/web/src/components/index.ts b/prometheus/web/src/components/index.ts
index a35aa658..e67ff625 100644
--- a/prometheus/web/src/components/index.ts
+++ b/prometheus/web/src/components/index.ts
@@ -16,8 +16,22 @@ export const deepClone = (res: any) => {
 }
 
 // 处理字节类型数据
-export const handle_byte = (value: string, float: number) => {
-  return (parseFloat(value) / 1024 / 1024 / 1024).toFixed(float)
+export const handle_byte = (value: string, float: number, unit: string) => {
+  let value2unit: string = '0.00';
+  switch (unit) {
+    case 'GB':
+      value2unit = (parseFloat(value) / 1024 / 1024 / 1024).toFixed(float);
+      break;
+    case 'KB':
+      value2unit = (parseFloat(value) / 1024).toFixed(float);
+      break;
+
+    default:
+      // MB
+      value2unit = (parseFloat(value) / 1024 / 1024).toFixed(float);
+      break;
+  }
+  return value2unit;
 }
 
 // echart颜色表
diff --git a/prometheus/web/src/store/charts.ts b/prometheus/web/src/store/charts.ts
index 9d5573a1..376b0b96 100644
--- a/prometheus/web/src/store/charts.ts
+++ b/prometheus/web/src/store/charts.ts
@@ -20,7 +20,7 @@ export const useLayoutStore = defineStore('layoutOption', {
           query: {
             sqls: [{ sql: 'count(count(node_cpu_seconds_total{instance="{macIp}",mode="system"}) by (cpu))' }],
             type: 'value', range: false, isValue: true, interval: 5,
-            target: 'value_series', unit: '', float: 0
+            target: 'value_series', unit: '个', float: 0
           }
         },
         {
@@ -29,13 +29,13 @@ export const useLayoutStore = defineStore('layoutOption', {
           query: {
             sqls: [{ sql: 'node_memory_MemTotal_bytes{instance="{macIp}"}' }],
             type: 'value', range: false, isValue: true, interval: 5,
-            target: 'byte_series', unit: 'GiB', float: 2,
+            target: 'byte2GB_series', unit: 'GiB', float: 2,
 
           }
         },
         {
           x: 4, y: 0, w: 2, h: 4, i: '3',
-          static: true, display: true, title: 'CPU使用率(5m)',
+          static: true, display: true, title: 'CPU总使用率',
           query: {
             sqls: [{ sql: '100 - (avg(irate(node_cpu_seconds_total{instance="{macIp}",mode="idle"}[5m])) * 100)' }],
             type: 'gauge', range: false, isChart: true, interval: 5,
@@ -49,7 +49,7 @@ export const useLayoutStore = defineStore('layoutOption', {
         },
         {
           x: 6, y: 0, w: 2, h: 4, i: '4',
-          static: true, display: true, title: 'CPU iowait(5m)',
+          static: true, display: true, title: 'CPU iowait',
           query: {
             sqls: [{ sql: 'avg(irate(node_cpu_seconds_total{instance="{macIp}",mode="iowait"}[5m])) * 100' }],
             type: 'gauge', range: false, isChart: true, interval: 5,
@@ -81,7 +81,7 @@ export const useLayoutStore = defineStore('layoutOption', {
           query: {
             sqls: [{ sql: 'node_filefd_allocated{instance="{macIp}"}' }],
             type: 'gauge', range: false, isChart: true, interval: 5,
-            target: 'num_series', unit: '', float: 2, min: 0, max: 9,
+            target: 'num_series', unit: 'K', float: 2, min: 0, max: 9,
             color: [
               [0.6, '#67e0e3'],
               [0.9, '#E6A23C'],
@@ -114,19 +114,19 @@ export const useLayoutStore = defineStore('layoutOption', {
                 sql: 'node_load1{instance="{macIp}"}',
                 start: startTime,
                 end: endTime,
-                series_name: 'load_1m'
+                series_name: '1分钟'
               },
               {
                 sql: 'node_load5{instance="{macIp}"}',
                 start: startTime,
                 end: endTime,
-                series_name: 'load_5m'
+                series_name: '5分钟'
               },
               {
                 sql: 'node_load15{instance="{macIp}"}',
                 start: startTime,
                 end: endTime,
-                series_name: 'load_15m'
+                series_name: '15分钟'
               },
             ],
           }
@@ -184,7 +184,7 @@ export const useLayoutStore = defineStore('layoutOption', {
         },
         {
           x: 0, y: 11, w: 10, h: 7, i: '11',
-          static: false, display: true, title: 'cpu使用率、磁盘每秒的I/O操作耗费时间 (%)',
+          static: false, display: true, title: 'cpu使用率',
           query: {
             type: 'line', range: true, isChart: true,
             target: 'percent_series', unit: '%', float: 2, min: 0, max: null,
@@ -194,36 +194,36 @@ export const useLayoutStore = defineStore('layoutOption', {
                 start: startTime,
                 end: endTime,
                 step: 15,
-                series_name: 'system',
+                series_name: '系统cpu使用率',
               },
               {
                 sql: 'avg(irate(node_cpu_seconds_total{instance="{macIp}",mode="user"}[1m])) by (instance)',
                 start: startTime,
                 end: endTime,
                 step: 15,
-                series_name: 'user',
+                series_name: '用户cpu使用率',
               },
               {
                 sql: 'avg(irate(node_cpu_seconds_total{instance="{macIp}",mode="idle"}[1m])) by (instance)',
                 start: startTime,
                 end: endTime,
                 step: 15,
-                series_name: 'idle',
+                series_name: '单核cpu空闲率',
               },
               {
                 sql: 'avg(irate(node_cpu_seconds_total{instance="{macIp}",mode="iowait"}[1m])) by (instance)',
                 start: startTime,
                 end: endTime,
                 step: 15,
-                series_name: 'iowait',
+                series_name: '磁盘io使用率',
               },
-              {
+              /* {
                 sql: 'irate(node_disk_io_time_seconds_total{instance="{macIp}",}[1m])',
                 start: startTime,
                 end: endTime,
                 step: 15,
                 series_name: '',
-              },
+              }, */
             ]
           }
         },
@@ -232,7 +232,7 @@ export const useLayoutStore = defineStore('layoutOption', {
           static: false, display: true, title: '内存信息',
           query: {
             type: 'line', range: true, isChart: true,
-            target: 'byte_series', unit: 'GiB', float: 2, min: 0, max: null,
+            target: 'byte2GB_series', unit: 'GiB', float: 2, min: 0, max: null,
             sqls: [
               {
                 sql: 'node_memory_MemTotal_bytes{instance="{macIp}"}',
@@ -261,13 +261,13 @@ export const useLayoutStore = defineStore('layoutOption', {
         },
         {
           x: 0, y: 18, w: 8, h: 7, i: '13',
-          static: false, display: true, title: '磁盘读取速率(IOPS)',
+          static: false, display: true, title: '磁盘读取容量',
           query: {
             type: 'line', range: true, isChart: true,
-            target: 'speed_series', unit: 'io/s', float: 2, min: 0, max: null,
+            target: 'byte2KB_series', unit: 'kB/s', float: 2, min: 0, max: null,
             sqls: [
               {
-                sql: 'irate(node_disk_reads_completed_total{instance="{macIp}"}[1m])',
+                sql: 'rate(node_disk_read_bytes_total{instance="{macIp}"}[1m])',
                 start: startTime,
                 end: endTime,
                 step: 15,
@@ -280,13 +280,13 @@ export const useLayoutStore = defineStore('layoutOption', {
         },
         {
           x: 8, y: 18, w: 8, h: 7, i: '14',
-          static: false, display: true, title: '磁盘写入速率(IOPS)',
+          static: false, display: true, title: '磁盘写入容量',
           query: {
             type: 'line', range: true, isChart: true,
-            target: 'speed_series', unit: 'io/s', float: 2, min: 0, max: null,
+            target: 'byte2KB_series', unit: 'kB/s', float: 2, min: 0, max: null,
             sqls: [
               {
-                sql: 'irate(node_disk_writes_completed_total{instance="{macIp}"}[1m])',
+                sql: 'rate(node_disk_written_bytes_total{instance="{macIp}"}[1m])',
                 start: startTime,
                 end: endTime,
                 step: 15,
@@ -351,6 +351,12 @@ export const useLayoutStore = defineStore('layoutOption', {
       ],
     };
   },
+  /* persist: {
+    enabled: true, // 开启存储
+    strategies: [
+      { storage: localStorage, paths: ["layout_option"] },
+    ]
+  }, */
   getters: {},
   actions: {
     initLayout(layout: any) {
diff --git a/prometheus/web/tsconfig.json b/prometheus/web/tsconfig.json
index 6497d640..72692179 100644
--- a/prometheus/web/tsconfig.json
+++ b/prometheus/web/tsconfig.json
@@ -14,7 +14,7 @@
     "sourceMap": true,
     "baseUrl": ".",
     "types": [
-      "webpack-env"
+      // "webpack-env"
     ],
     "paths": {
       "@/*": [
@@ -38,4 +38,4 @@
   "exclude": [
     "node_modules"
   ]
-}
+}
\ No newline at end of file
-- 
Gitee

