|
@@ -1,479 +1,50 @@
|
|
|
<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 class="iframediv">
|
|
|
+ <iframe class="mod-home" frameborder="0" src="../../../static/pdf/cloudhelpword.pdf"></iframe>
|
|
|
</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;
|
|
|
-}
|
|
|
+ .iframediv {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ margin: auto auto;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .iframediv iframe {
|
|
|
+ width: 1920px;
|
|
|
+ height: 2000px;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ transform-origin: top left;
|
|
|
+ transform: scale(1)
|
|
|
+ }
|
|
|
+
|
|
|
</style>
|
|
|
|