103 lines
2.3 KiB
Vue
103 lines
2.3 KiB
Vue
<template>
|
|
<div>
|
|
<p class="grid-element" v-if="nodeStats.node && nodeStats.node.metadata">{{ nodeStats.node.metadata.name }}</p>
|
|
<div class="grid-element">
|
|
<p>{{ calcAge(nodeStats.node?.metadata?.creationTimestamp) }}</p>
|
|
</div>
|
|
<p class="grid-element">{{ nodeStats.runningPods }}</p>
|
|
<div class="grid-element">
|
|
<NodeReadyComponent :ready="isReady(nodeStats)"></NodeReadyComponent>
|
|
</div>
|
|
<div class="grid-element">
|
|
<p class="usage" :class="cpuUsageFlag(nodeStats.relativeCpuUsage)">{{ nodeStats.relativeCpuUsage }}%</p>
|
|
</div>
|
|
<div class="grid-element">
|
|
<p class="usage" :class="ramUsageFlag(nodeStats.relativeMemory)">{{ nodeStats.relativeMemory }}%</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { NodeStats } from '~/classes/Node';
|
|
import NodeReadyComponent from './NodeReadyComponent.vue';
|
|
import { calcAge } from '~/classes/Pod';
|
|
|
|
defineProps<{
|
|
nodeStats: NodeStats;
|
|
}>();
|
|
|
|
function isReady(nodeStats: NodeStats): boolean | undefined
|
|
{
|
|
const conditions = nodeStats.node?.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";
|
|
}
|
|
</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;
|
|
}
|
|
.green {
|
|
background-color: green;
|
|
color: white;
|
|
}
|
|
.orange {
|
|
color: white;
|
|
background-color: #d68100;
|
|
}
|
|
.red {
|
|
background-color: #ff2a0e;
|
|
color: white;
|
|
}
|
|
</style> |