<template>
    <PopupTemplate :heading="StringUtils.format('Node: %s', node.metadata.name)">
        <div class="content-l">
            <h2>General</h2>
            <div class="content-l">
                <div class="col-3">
                    <div class="content-m">
                        <h3>Node</h3>
                        <p class="tile-m">{{ node.metadata.name }}</p>
                    </div>
                    <div class="content-m">
                        <h3>Status</h3>
                        <div class="tile-m left-center">
                            <NodeReadyComponent :ready="Node.isReady(node)"></NodeReadyComponent>
                        </div>
                    </div>
                    <div class="content-m">
                        <h3>Running Pods</h3>
                        <p class="tile-m">{{ node.metrics.runningPods }}</p>
                    </div>
                </div>
                <div class="content-m">
                    <h3>Metrics</h3>
                    <div class="col-3">
                        <div class="tile-l content-m">
                            <p>Total CPU</p>
                            <p class="metric" v-if="node.metrics.totalCpu != null">{{ (node.metrics.totalCpu / 1000).toFixed(2)  }}</p>
                        </div>
                        <div class="tile-l content-m">
                            <p>Total Memory</p>
                            <p class="metric" v-if="node.metrics.totalMemory != null" v-for="memory in [Memory.format(node.metrics.totalMemory)]">{{ memory.value.toFixed(2) }} {{ formatUnit(memory.unit) }}</p>
                        </div>
                        <div class="tile-l content-m">
                            <p>Total Disk Space</p>
                            <p class="metric" v-if="node.metrics.totalDiskSpace != null" v-for="diskSpace in [Memory.format(node.metrics.totalDiskSpace)]">{{ diskSpace.value.toFixed(2) }} {{ formatUnit(diskSpace.unit) }}</p>
                        </div>
                        <div class="tile-l content-m" v-if="node.metrics.relativeCpuUsage">
                            <div class="left-center">
                                <p>Used CPU</p>
                                <Pulse :threshold="new Threshold(node.metrics.relativeCpuUsage, Node.cpuUsageFlag)"></Pulse>
                            </div>
                            <p class="metric">{{ node.metrics.relativeCpuUsage }}%</p>
                        </div>
                        <div class="tile-l content-m" v-if="node.metrics.relativeMemory != null">
                            <div class="left-center">
                                <p>Used Memory</p>
                                <Pulse :threshold="new Threshold(node.metrics.relativeMemory, Node.memoryUsageFlag)"></Pulse>
                            </div>
                            <p class="metric">{{ node.metrics.relativeMemory }}%</p>
                        </div>
                        <div class="tile-l content-m" v-if="node.metrics.relativeDiskUsage != null">
                            <div class="left-center">
                                <p>Used Disk Space</p>
                                <Pulse :threshold="new Threshold(node.metrics.relativeDiskUsage, Node.diskUsageFlag)"></Pulse>
                            </div>
                            <p class="metric">{{ node.metrics.relativeDiskUsage }}%</p>
                        </div>
                    </div>
                </div>
                <div class="content-m" v-if="node.spec.taints">
                    <h3>Taints ({{ node.spec.taints.length }})</h3>
                    <div class="content-s">
                        <p class="tile-m" v-for="taint in node.spec.taints">{{ taint.key }}: {{ taint.effect }}</p>
                    </div>
                </div>
                <div class="col-3">
                    <div class="content-m">
                        <h3>Operating System</h3>
                        <p class="tile-m">{{ node.status.nodeInfo.osImage }}</p>
                    </div>
                    <div class="content-m">
                        <h3>Kubelet Version</h3>
                        <p class="tile-m">{{ node.status.nodeInfo.kubeletVersion }}</p>
                    </div>
                </div>
            </div>
        </div>
    </PopupTemplate>
</template>

<script setup lang="ts">
import PopupTemplate from "~/components/popup/PopupTemplate.vue";
import {usePopup} from "~/components/popup/Popup";
import {Node} from "~/classes/node/Node";
import { Memory, MemoryUnity } from '~/utils/Memory';
import { Threshold } from '~/classes/Threshold';

const node = usePopup().data() as Node;

function formatUnit(unit: MemoryUnity)
{
    return new Map<MemoryUnity, String>([[MemoryUnity.RAW, "Bytes"], [MemoryUnity.KI, "Ki"], [MemoryUnity.MI, "Mi"], [MemoryUnity.GI, "Gi"], [MemoryUnity.TI, "Ti"]]).get(unit);
}
</script>

<style scoped>
.metric {
    font-size: 2rem;
}
</style>