主页修改为集群监控

src/views/common/home.vue

@@ -1,44 +1,474 @@
 <template>
   <div class="mod-home">
-    <h1>智能应用云服务平台</h1>
-    <ul>
-      <!-- <li>开发人员：陈瑞杰、杜俊逸、胡志明、孙浩博</li>
-      <li>前端git地址：<a href="https://gitee.com/djy8023/mkcloud-vue" target="_blank">mkcloud-vue</a></li>
-      <li>后端git地址：<a href="https://gitee.com/djy8023/mkcloud-fast" target="_blank">mkcloud-fast</a></li>
-      <li>目前实现的功能有:用户管理、角色管理</li>
-      <li>目前正在实现的功能有:镜像管理</li>
-      <li>目前遇到的问题：k8s集群断电，备份重启</li> -->
-
-      <h2>8.1日更新</h2>
-      <li>1.安装与调试，使用集群备份软件velero</li>
-      <li>2.解决集群断电恢复重启问题</li>
-      <li>3.新增数据库应用管理与存储卷管理数据表</li>
-      <li>4.后台编写应用管理与存储卷管理的CRUD</li>
-      <li>5.前端添加应用管理页面与存储卷管理页面列表、CRUD功能</li>
-      <li>6.成功实现前端，后端连接kubepshere API</li>
-      <li>7.修改,调试harbor仓库为https协议类型的网址</li>
-      <li>8.修改前端页面图标</li>
-      <li>
-        9.修改新增存储卷的弹窗，仿照kubepshere的新增过程，能够对数据库进行存储，但是还不能直接对kubesphere操作
-      </li>
-      <li>10.后端访问kubesphere API,实现后台调用s2ibuilder成功</li>
-      <li>11.添加kubesphere</li>
-
-      <h2>11月更新</h2>
-      <li>1.优化监控界面</li>
-      <li>2.优化算法打包速度</li>
-      <li>3.优化算法发布速度</li>
-      <li>4.修改算法表</li>
-      <li>5.应用界面增加暂停和启动功能</li>
-      <li>6.Harbor仓库的优化配置</li>
-      <li>7.解决若干BUG</li>
-      <li>8.修改前端界面</li>
-    </ul>
+    <el-row>
+      <el-col :span="22">
+        <h3>集群资源使用状况</h3>
+      </el-col>
+      <el-col :span="2"> </el-col>
+    </el-row>
+
+    <el-row type="flex">
+      <el-col :span="8">
+        <el-card shadow="hover" body-style="padding:5px">
+          <columnCharts
+            :charData="radarDataList"
+            :id="'Radarcontainer'"
+          ></columnCharts>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card shadow="hover">
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <pieChart
+                :charData="cpuPieData"
+                :id="'CPUcontainer'"
+                :content="'CPU'"
+              ></pieChart>
+            </el-col>
+            <el-col :span="4">
+              <br />
+              <strong
+                >{{
+                  formatNumber(metrics.cluster_cpu_utilisation * 100)
+                }}%</strong
+              >
+              <br />
+              <br />
+              <div>CPU</div>
+            </el-col>
+            <el-col :span="4">
+              <br />
+              <strong>{{ this.metrics.cluster_cpu_usage }}core</strong>
+              <br />
+              <br />
+              <div>已使用</div>
+            </el-col>
+            <el-col :span="4">
+              <br />
+              <strong>{{ this.metrics.cluster_cpu_total }}core</strong>
+              <br />
+              <br />
+              <div>总计</div>
+            </el-col>
+          </el-row>
+        </el-card>
+        <el-card shadow="hover">
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <pieChart
+                :charData="memoryPieData"
+                :id="'Memorycontainer'"
+                :content="'内存'"
+              ></pieChart>
+            </el-col>
+            <el-col :span="4">
+              <br />
+              <strong
+                >{{
+                  formatNumber(metrics.cluster_memory_utilisation * 100)
+                }}%</strong
+              >
+              <br />
+              <br />
+              <div>内存</div>
+            </el-col>
+            <el-col :span="4">
+              <br />
+              <strong
+                >{{
+                  formatNumber(
+                    this.metrics.cluster_memory_usage_wo_cache /
+                      (1024 * 1024 * 1024)
+                  )
+                }}Gi</strong
+              >
+              <br />
+              <br />
+              <div>已使用</div>
+            </el-col>
+            <el-col :span="4">
+              <br />
+              <strong
+                >{{
+                  formatNumber(
+                    this.metrics.cluster_memory_total / (1024 * 1024 * 1024)
+                  )
+                }}Gi</strong
+              >
+              <br />
+              <br />
+              <div>总计</div>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card shadow="hover">
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <pieChart
+                :charData="localDiskSizePieData"
+                :id="'Localdiskchart'"
+                :content="'存储'"
+              ></pieChart>
+              <!-- <div :id="'container3'"></div> -->
+            </el-col>
+            <el-col :span="4">
+              <br />
+              <strong
+                >{{
+                  formatNumber(
+                    this.metrics.cluster_disk_size_utilisation * 100
+                  )
+                }}%</strong
+              >
+              <br />
+              <br />
+              <div>存储</div>
+            </el-col>
+            <el-col :span="4">
+              <br />
+              <strong
+                >{{
+                  formatNumber(
+                    this.metrics.cluster_disk_size_usage / (1024 * 1024 * 1024)
+                  )
+                }}GB</strong
+              >
+              <br />
+              <br />
+              <div>已使用</div>
+            </el-col>
+            <el-col :span="4">
+              <br />
+              <strong
+                >{{
+                  formatNumber(
+                    metrics.cluster_disk_size_capacity / (1024 * 1024 * 1024)
+                  )
+                }}GB</strong
+              >
+              <br />
+              <br />
+              <div>总计</div>
+            </el-col>
+          </el-row>
+        </el-card>
+        <el-card shadow="hover">
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <!-- <g2-pie
+                style="height: 125px; width: 125px"
+                :type="'ring'"
+                :axis-name="{ name: '容器组', value: ' ' }"
+                :data="containerGroupPieData"
+                :guide="{ name: '容器组' }"
+              >
+              </g2-pie> -->
+
+              <pieChart
+                :charData="containerGroupPieData"
+                :id="'Containerscontainer'"
+                :content="'容器组'"
+              ></pieChart>
+            </el-col>
+            <el-col :span="4">
+              <br />
+              <strong
+                >{{
+                  formatNumber(metrics.cluster_pod_utilisation * 100)
+                }}%</strong
+              >
+              <br />
+              <br />
+              <div>容器组</div>
+            </el-col>
+            <el-col :span="4">
+              <br />
+              <strong>{{ metrics.cluster_pod_running_count }}</strong>
+              <br />
+              <br />
+              <div>已使用</div>
+            </el-col>
+            <el-col :span="4">
+              <br />
+              <strong>{{ metrics.cluster_pod_quota }}</strong>
+              <br />
+              <br />
+              <div>总计</div>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-row>
+      <el-col :span="8">
+        <el-card shadow="hover">
+          <h3>集群组件状态</h3>
+          <el-row :gutter="8">
+            <el-col :span="8">
+              <br />
+              <strong
+                >{{
+                  formatNumber(this.apiServer.apiserver_request_rate)
+                }}times/s</strong
+              >
+              <br />
+              <br />
+              <div>API 每秒请求数</div>
+            </el-col>
+            <el-col :span="4">
+              <br />
+              <strong
+                >{{
+                  formatNumber(
+                    this.apiServer.apiserver_request_latencies * 1000
+                  )
+                }}ms</strong
+              >
+              <br />
+              <br />
+              <div>API 请求延迟</div>
+            </el-col>
+            <el-col :span="4">
+              <br />
+              <strong>{{ this.scheduler.scheduler_schedule_attempts }}</strong>
+              <br />
+              <br />
+              <div>调度器调度次数</div>
+            </el-col>
+            <el-col :span="4">
+              <br />
+              <strong>-</strong>
+              <br />
+              <br />
+              <div>调度失败的容器组</div>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card>
+          <el-row>
+            <h3>节点用量</h3>
+          </el-row>
+          <el-row>
+            <el-col>
+              <el-table
+                stripe
+                style="width: 100%"
+                :data="nodesList"
+                height="250"
+              >
+                <el-table-column prop="host" label="host"></el-table-column>
+                <el-table-column prop="role" label="role"></el-table-column>
+                <el-table-column prop="node" label="node"></el-table-column>
+                <el-table-column
+                  prop="node_cpu_utilisation"
+                  label="CPU%"
+                ></el-table-column>
+                <el-table-column
+                  prop="node_disk_inode_utilisation"
+                  label="inode 使用率"
+                ></el-table-column>
+                <el-table-column
+                  prop="node_pod_utilisation"
+                  label="容器组"
+                ></el-table-column>
+                <el-table-column
+                  prop="node_memory_utilisation"
+                  label="内存%"
+                ></el-table-column>
+                <el-table-column
+                  prop="node_disk_size_utilisation"
+                  label="存储%"
+                ></el-table-column>
+              </el-table>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="8"> </el-col>
+    </el-row>
+
+    <el-col> </el-col>
   </div>
 </template>
 
 <script>
-export default {};
+import pieChart from "../modules/monitor/charts/pieChart.vue";
+import columnCharts from "../modules/monitor/charts/cloumnCharts.vue";
+import {
+  getMetrics,
+  getApiServer,
+  getScheduler,
+  getNodes,
+  getPhysicalMonitor,
+} from "@/utils/token";
+export default {
+  components: {
+    pieChart,
+    columnCharts,
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    //节点列表
+    nodesList() {
+      const nodes = this.$store.state.monitor.nodesList;
+      var nodesList = [];
+      for (var i = 0; i < nodes.length; i++) {
+        const host = nodes[i].host;
+        const node = nodes[i].node;
+        const role = nodes[i].role;
+        const node_cpu_utilisation = this.formatNumber(
+          nodes[i].node_cpu_utilisation * 100
+        );
+        const node_disk_inode_utilisation = this.formatNumber(
+          nodes[i].node_disk_inode_utilisation * 100
+        );
+        const node_pod_utilisation = this.formatNumber(
+          nodes[i].node_pod_utilisation * 100
+        );
+        const node_memory_utilisation = this.formatNumber(
+          nodes[i].node_memory_utilisation * 100
+        );
+        const node_disk_size_utilisation = this.formatNumber(
+          nodes[i].node_disk_size_utilisation * 100
+        );
+        nodesList.push({
+          host: host,
+          node: node,
+          role: role,
+          node_cpu_utilisation: node_cpu_utilisation,
+          node_disk_inode_utilisation: node_disk_inode_utilisation,
+          node_cpu_utilisation: node_pod_utilisation,
+          node_memory_utilisation: node_memory_utilisation,
+          node_disk_size_utilisation: node_disk_size_utilisation,
+        });
+      }
+
+      console.log("nodelist", nodesList);
+      return nodesList;
+    },
+
+    //完整的cluster_metrics
+    metrics() {
+      var metrics = this.$store.state.monitor.metrics;
+
+      return metrics;
+    },
+
+    //集群资源使用比例
+    radarDataList() {
+      var radarDataList = [];
+      var cpu_utilisation = this.metrics.cluster_cpu_utilisation * 100;
+      var memory_utilisation = this.metrics.cluster_memory_utilisation * 100;
+      var disk_size_utilisation =
+        this.metrics.cluster_disk_size_utilisation * 100;
+      var pod_utilisation = this.metrics.cluster_pod_utilisation * 100;
+
+      var cpu=this.formatNumber(cpu_utilisation);
+      var disk=this.formatNumber(disk_size_utilisation);
+      var pod=this.formatNumber(pod_utilisation);
+      var memory=this.formatNumber(memory_utilisation);
+
+      radarDataList.push({ name: "CPU", value: cpu });
+      radarDataList.push({ name: "本地存储", value: disk });
+      radarDataList.push({ name: "容器组", value: pod });
+      radarDataList.push({ name: "内存", value: memory });
+
+      return radarDataList;
+    },
+
+    //CPU 饼图
+    cpuPieData() {
+      var cpuPieData = [];
+      var cpu_usage = this.metrics.cluster_cpu_usage * 1;
+      var cpu_rest =
+        (this.metrics.cluster_cpu_total - this.metrics.cluster_cpu_usage) * 1;
+      cpuPieData.push({ name: "已使用", value: cpu_usage });
+      cpuPieData.push({ name: "未使用", value: cpu_rest });
+      return cpuPieData;
+    },
+
+    //内存饼图
+    memoryPieData() {
+      var memoryPieData = [];
+      var memory_rest =
+        this.metrics.cluster_memory_total *
+        (1 - this.metrics.cluster_memory_utilisation) *
+        1;
+      var memory_usage =
+        (this.metrics.cluster_memory_total -
+          this.metrics.cluster_memory_available) *
+        1;
+
+      memoryPieData.push({ name: "已使用", value: memory_usage });
+      memoryPieData.push({ name: "未使用", value: memory_rest });
+      return memoryPieData;
+    },
+
+    //存储饼图
+    localDiskSizePieData() {
+      var localDiskSizePieData = [];
+
+      var disk_size_rest = this.metrics.cluster_disk_size_capacity * 1;
+      var disk_size_usage = this.metrics.cluster_disk_size_usage * 1;
+
+      localDiskSizePieData.push({ name: "已使用", value: disk_size_usage });
+      localDiskSizePieData.push({ name: "未使用", value: disk_size_rest });
+
+      return localDiskSizePieData;
+    },
+    apiServer() {
+      var apiServer = this.$store.state.monitor.apiServer;
+      return apiServer;
+    },
+    scheduler() {
+      var scheduler = this.$store.state.monitor.scheduler;
+      return scheduler;
+    },
+
+    //容器组饼图
+    containerGroupPieData() {
+      var containerGroupPieData = [];
+      var pod_rest =
+        (this.metrics.cluster_pod_quota -
+          this.metrics.cluster_pod_running_count) *
+        1;
+      var pod_usage = this.metrics.cluster_pod_running_count * 1;
+      containerGroupPieData.push({ name: "已使用", value: pod_usage });
+      containerGroupPieData.push({ name: "未使用", value: pod_rest });
+      return containerGroupPieData;
+    },
+  },
+
+  created() {
+    getNodes();
+    getMetrics();
+    getApiServer();
+    getScheduler();
+    getPhysicalMonitor();
+  },
+
+  activated() {},
+  mounted() {},
+
+  methods: {
+    //数字处理
+    formatNumber(num) {
+      return Math.round(num * 100) / 100;
+    },
+    reset() {},
+  },
+  updated() {},
+};
 </script>
 
 <style>

src/views/common/login.vue

@@ -101,7 +101,7 @@ export default {
               console.log("data.token", data);
               this.$cookie.set("cloudToken", data.token);
               // console.log("cookie.token", this.$cookie.get("cloudToken"));
-              this.$router.replace({ name: "generator-algorithm" });
+              this.$router.replace({ name: "home" });
               this.$cookie.set("Authorization", 'Bearer '+ data.kubeSphereToken);
               // this.getToken();
             } else {

src/views/modules/monitor/components/overview.vue

@@ -267,7 +267,7 @@
                 <el-table-column prop="node" label="node"></el-table-column>
                 <el-table-column
                   prop="node_cpu_utilisation"
-                  label="CPU"
+                  label="CPU%"
                 ></el-table-column>
                 <el-table-column
                   prop="node_disk_inode_utilisation"
@@ -279,11 +279,11 @@
                 ></el-table-column>
                 <el-table-column
                   prop="node_memory_utilisation"
-                  label="内存"
+                  label="内存%"
                 ></el-table-column>
                 <el-table-column
                   prop="node_disk_size_utilisation"
-                  label="存储"
+                  label="存储%"
                 ></el-table-column>
               </el-table>
             </el-col>
@@ -360,16 +360,21 @@ export default {
     //集群资源使用比例
     radarDataList() {
       var radarDataList = [];
-      const cpu_utilisation = this.metrics.cluster_cpu_utilisation * 100;
-      const memory_utilisation = this.metrics.cluster_memory_utilisation * 100;
-      const disk_size_utilisation =
+      var cpu_utilisation = this.metrics.cluster_cpu_utilisation * 100;
+      var memory_utilisation = this.metrics.cluster_memory_utilisation * 100;
+      var disk_size_utilisation =
         this.metrics.cluster_disk_size_utilisation * 100;
-      const pod_utilisation = this.metrics.cluster_pod_utilisation * 100;
+      var pod_utilisation = this.metrics.cluster_pod_utilisation * 100;
 
-      radarDataList.push({ name: "CPU", value: cpu_utilisation });
-      radarDataList.push({ name: "本地存储", value: disk_size_utilisation });
-      radarDataList.push({ name: "容器组", value: pod_utilisation });
-      radarDataList.push({ name: "内存", value: memory_utilisation });
+      var cpu=this.formatNumber(cpu_utilisation);
+      var disk=this.formatNumber(disk_size_utilisation);
+      var pod=this.formatNumber(pod_utilisation);
+      var memory=this.formatNumber(memory_utilisation);
+
+      radarDataList.push({ name: "CPU", value: cpu });
+      radarDataList.push({ name: "本地存储", value: disk });
+      radarDataList.push({ name: "容器组", value: pod });
+      radarDataList.push({ name: "内存", value: memory });
 
       return radarDataList;
     },
@@ -377,8 +382,8 @@ export default {
     //CPU 饼图
     cpuPieData() {
       var cpuPieData = [];
-      const cpu_usage = this.metrics.cluster_cpu_usage * 1;
-      const cpu_rest =
+      var cpu_usage = this.metrics.cluster_cpu_usage * 1;
+      var cpu_rest =
         (this.metrics.cluster_cpu_total - this.metrics.cluster_cpu_usage) * 1;
       cpuPieData.push({ name: "已使用", value: cpu_usage });
       cpuPieData.push({ name: "未使用", value: cpu_rest });
@@ -388,11 +393,11 @@ export default {
     //内存饼图
     memoryPieData() {
       var memoryPieData = [];
-      const memory_rest =
+      var memory_rest =
         this.metrics.cluster_memory_total *
         (1 - this.metrics.cluster_memory_utilisation) *
         1;
-      const memory_usage =
+      var memory_usage =
         (this.metrics.cluster_memory_total -
           this.metrics.cluster_memory_available) *
         1;
@@ -406,8 +411,8 @@ export default {
     localDiskSizePieData() {
       var localDiskSizePieData = [];
 
-      const disk_size_rest = this.metrics.cluster_disk_size_capacity * 1;
-      const disk_size_usage = this.metrics.cluster_disk_size_usage * 1;
+      var disk_size_rest = this.metrics.cluster_disk_size_capacity * 1;
+      var disk_size_usage = this.metrics.cluster_disk_size_usage * 1;
 
       localDiskSizePieData.push({ name: "已使用", value: disk_size_usage });
       localDiskSizePieData.push({ name: "未使用", value: disk_size_rest });
@@ -426,11 +431,11 @@ export default {
     //容器组饼图
     containerGroupPieData() {
       var containerGroupPieData = [];
-      const pod_rest =
+      var pod_rest =
         (this.metrics.cluster_pod_quota -
           this.metrics.cluster_pod_running_count) *
         1;
-      const pod_usage = this.metrics.cluster_pod_running_count * 1;
+      var pod_usage = this.metrics.cluster_pod_running_count * 1;
       containerGroupPieData.push({ name: "已使用", value: pod_usage });
       containerGroupPieData.push({ name: "未使用", value: pod_rest });
       return containerGroupPieData;

src/views/modules/monitor/index.vue

@@ -52,11 +52,11 @@ export default {
     };
   },
   created() {
-    getNodes();
+    /* getNodes();
     getMetrics();
     getApiServer();
     getScheduler();
-    getPhysicalMonitor();
+    getPhysicalMonitor(); */
   },
   mounted() {},
   methods: {