<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>