126 lines
2.8 KiB
Vue
126 lines
2.8 KiB
Vue
<template>
|
|
<div>
|
|
<p class="grid-element" v-if="nodeStats && nodeStats.metadata">{{ nodeStats.metadata.name }}</p>
|
|
<div class="grid-element">
|
|
<p>{{ calcAge(nodeStats.metadata?.creationTimestamp) }}</p>
|
|
</div>
|
|
<p class="grid-element">{{ nodeStats.metrics.runningPods }}</p>
|
|
<div class="grid-element">
|
|
<NodeReadyComponent :ready="isReady(nodeStats)"></NodeReadyComponent>
|
|
</div>
|
|
<div class="grid-element">
|
|
<p class="usage" :class="cpuUsageFlag(nodeStats.metrics.relativeCpuUsage)">{{ nodeStats.metrics.relativeCpuUsage }}%</p>
|
|
</div>
|
|
<div class="grid-element">
|
|
<p class="usage" :class="ramUsageFlag(nodeStats.metrics.relativeMemory)">{{ nodeStats.metrics.relativeMemory }}%</p>
|
|
</div>
|
|
<div class="grid-element">
|
|
<p class="usage" :class="diskUsageFlag(nodeStats.metrics.relativeDiskUsage)"><span v-if="nodeStats.metrics.relativeDiskUsage">{{ nodeStats.metrics.relativeDiskUsage }}%</span><span v-else>-</span></p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Node } from '~/classes/node/Node';
|
|
import NodeReadyComponent from './NodeReadyComponent.vue';
|
|
import { calcAge } from '~/classes/Pod';
|
|
|
|
defineProps<{
|
|
nodeStats: Node;
|
|
}>();
|
|
|
|
function isReady(nodeStats: Node): boolean | undefined
|
|
{
|
|
const conditions = nodeStats.status.conditions;
|
|
if(conditions != undefined)
|
|
{
|
|
for(const condition of conditions)
|
|
{
|
|
if(condition.type === "Ready" && condition.status === "True")
|
|
{
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
return undefined;
|
|
}
|
|
|
|
function cpuUsageFlag(usage: number | undefined)
|
|
{
|
|
if(!usage)
|
|
{
|
|
return undefined;
|
|
}
|
|
if(usage < 20)
|
|
{
|
|
return "green";
|
|
}
|
|
if(usage < 60)
|
|
{
|
|
return "orange";
|
|
}
|
|
return "red";
|
|
}
|
|
function ramUsageFlag(usage: number | undefined)
|
|
{
|
|
if(!usage)
|
|
{
|
|
return undefined;
|
|
}
|
|
if(usage < 30)
|
|
{
|
|
return "green";
|
|
}
|
|
if(usage < 75)
|
|
{
|
|
return "orange";
|
|
}
|
|
return "red";
|
|
}
|
|
|
|
function diskUsageFlag(usage: number | undefined)
|
|
{
|
|
if(!usage)
|
|
{
|
|
return undefined;
|
|
}
|
|
if(usage < 30)
|
|
{
|
|
return "green";
|
|
}
|
|
if(usage < 70)
|
|
{
|
|
return "orange";
|
|
}
|
|
return "red";
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.usage {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 4rem;
|
|
padding: 0.25rem;
|
|
border-radius: 0.25rem;
|
|
background-color: rgb(179, 179, 179);
|
|
border-radius: 0.25rem;
|
|
}
|
|
.usage * {
|
|
color: white;
|
|
}
|
|
.green {
|
|
background-color: green;
|
|
color: white;
|
|
}
|
|
.orange {
|
|
color: white;
|
|
background-color: #d68100;
|
|
}
|
|
.red {
|
|
background-color: #ff2a0e;
|
|
color: white;
|
|
}
|
|
</style> |