<template>
  <div class="mod-home">
    <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>
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>
.mod-home {
  line-height: 1.5;
}
</style>

