96 lines
4.7 KiB
Vue
96 lines
4.7 KiB
Vue
<template>
|
|
<PopupTemplate :heading="StringUtils.format('Node: %s', node.metadata.name)">
|
|
<div class="content-l">
|
|
<h2>General</h2>
|
|
<div class="content-l">
|
|
<div class="col-3">
|
|
<div class="content-m">
|
|
<h3>Node</h3>
|
|
<p class="tile-m">{{ node.metadata.name }}</p>
|
|
</div>
|
|
<div class="content-m">
|
|
<h3>Status</h3>
|
|
<div class="left-center">
|
|
<NodeReadyComponent :ready="Node.isReady(node)"></NodeReadyComponent>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content-m">
|
|
<h3>Metrics</h3>
|
|
<div class="col-3">
|
|
<div class="tile-l content-m">
|
|
<p>Total CPU</p>
|
|
<p class="metric" v-if="node.metrics.totalCpu != null">{{ (node.metrics.totalCpu / 1000).toFixed(2) }}</p>
|
|
</div>
|
|
<div class="tile-l content-m">
|
|
<p>Total Disk Space</p>
|
|
<p class="metric" v-if="node.metrics.totalDiskSpace != null" v-for="diskSpace in [Memory.format(node.metrics.totalDiskSpace)]">{{ diskSpace.value.toFixed(2) }} {{ formatUnit(diskSpace.unit) }}</p>
|
|
</div>
|
|
<div class="tile-l content-m">
|
|
<p>Total Memory</p>
|
|
<p class="metric" v-if="node.metrics.totalMemory != null" v-for="memory in [Memory.format(node.metrics.totalMemory)]">{{ memory.value.toFixed(2) }} {{ formatUnit(memory.unit) }}</p>
|
|
</div>
|
|
<div class="tile-l content-m" v-if="node.metrics.relativeCpuUsage">
|
|
<div class="left-center">
|
|
<p>Used CPU</p>
|
|
<Pulse :threshold="new Threshold(node.metrics.relativeCpuUsage, Node.cpuUsageFlag)"></Pulse>
|
|
</div>
|
|
<p class="metric">{{ node.metrics.relativeCpuUsage }}%</p>
|
|
</div>
|
|
<div class="tile-l content-m" v-if="node.metrics.relativeDiskUsage != null">
|
|
<div class="left-center">
|
|
<p>Used Disk Space</p>
|
|
<Pulse :threshold="new Threshold(node.metrics.relativeDiskUsage, Node.diskUsageFlag)"></Pulse>
|
|
</div>
|
|
<p class="metric">{{ node.metrics.relativeDiskUsage }}%</p>
|
|
</div>
|
|
<div class="tile-l content-m" v-if="node.metrics.relativeMemory != null">
|
|
<div class="left-center">
|
|
<p>Used Memory</p>
|
|
<Pulse :threshold="new Threshold(node.metrics.relativeMemory, Node.memoryUsageFlag)"></Pulse>
|
|
</div>
|
|
<p class="metric">{{ node.metrics.relativeMemory }}%</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content-m" v-if="node.spec.taints">
|
|
<h3>Taints ({{ node.spec.taints.length }})</h3>
|
|
<div class="content-s">
|
|
<p class="tile-m" v-for="taint in node.spec.taints">{{ taint.key }}: {{ taint.effect }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-3">
|
|
<div class="content-m">
|
|
<h3>Operating System</h3>
|
|
<p class="tile-m">{{ node.status.nodeInfo.osImage }}</p>
|
|
</div>
|
|
<div class="content-m">
|
|
<h3>Kubelet Version</h3>
|
|
<p class="tile-m">{{ node.status.nodeInfo.kubeletVersion }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</PopupTemplate>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import PopupTemplate from "~/components/popup/PopupTemplate.vue";
|
|
import {usePopup} from "~/components/popup/Popup";
|
|
import {Node} from "~/classes/node/Node";
|
|
import { Memory, MemoryUnity } from '~/utils/Memory';
|
|
import { Threshold } from '~/classes/Threshold';
|
|
|
|
const node = usePopup().data() as Node;
|
|
|
|
function formatUnit(unit: MemoryUnity)
|
|
{
|
|
return new Map<MemoryUnity, String>([[MemoryUnity.RAW, "Bytes"], [MemoryUnity.KI, "Ki"], [MemoryUnity.MI, "Mi"], [MemoryUnity.GI, "Gi"], [MemoryUnity.TI, "Ti"]]).get(unit);
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.metric {
|
|
font-size: 2rem;
|
|
}
|
|
</style> |