130 lines
2.9 KiB
Vue
130 lines
2.9 KiB
Vue
<template>
|
|
<div>
|
|
<p class="grid-element" v-if="node && node.metadata" @click="usePopup().open(NodeViewComponent, node)">{{
|
|
node.metadata.name
|
|
}}</p>
|
|
<div class="grid-element">
|
|
<p>{{ calcAge(node.metadata.creationTimestamp) }}</p>
|
|
</div>
|
|
<p class="grid-element">{{ node.metrics.runningPods }}</p>
|
|
<div class="grid-element">
|
|
<NodeReadyComponent :ready="isReady(node)"></NodeReadyComponent>
|
|
</div>
|
|
<div class="grid-element">
|
|
<p class="usage" :class="cpuUsageFlag(node.metrics.relativeCpuUsage)">{{ node.metrics.relativeCpuUsage }}%</p>
|
|
</div>
|
|
<div class="grid-element">
|
|
<p class="usage" :class="ramUsageFlag(node.metrics.relativeMemory)">{{ node.metrics.relativeMemory }}%</p>
|
|
</div>
|
|
<div class="grid-element">
|
|
<p class="usage" :class="diskUsageFlag(node.metrics.relativeDiskUsage)"><span v-if="node.metrics.relativeDiskUsage">{{ node.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';
|
|
import {usePopup} from "~/components/popup/Popup";
|
|
import NodeViewComponent from "~/components/node/view/NodeViewComponent.vue";
|
|
|
|
defineProps<{
|
|
node: Node;
|
|
}>();
|
|
|
|
function isReady(node: Node): boolean | undefined
|
|
{
|
|
const conditions = 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";
|
|
}
|
|
|
|
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> |