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