<template>
    <div class="content-l">
        <div class="spaced-center">
            <h1>Nodes</h1>
            <PeriodPicker v-model="startDate"></PeriodPicker>
        </div>
        <div class="content-l">
            <h2>CPU</h2>
            <div class="col-3">
                <div v-for="node in nodes">
                    <div class="tile-m content-m" v-for="dataset in [new Dataset('%', MonitoredResource.extractDataset('RELATIVE_CPU', node.jobs))]">
                        <div class="left-center">
                            <Pulse :threshold="new Threshold(dataset.getLatest()!.value, calcCpuThreshold)"></Pulse>
                            <h3>{{ node.resource.metadata.name }}</h3>
                        </div>
                        <div>
                            <Chart :datasets="dataset" :config="VOLUME_CHART_CONFIG(startDate, endDate)"></Chart>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-l">
            <h2>Memory</h2>
            <div class="col-3">
                <div v-for="node in nodes">
                    <div class="tile-m content-m" v-for="dataset in [new Dataset('%', MonitoredResource.extractDataset('RELATIVE_MEMORY', node.jobs))]">
                        <div class="left-center">
                            <Pulse :threshold="new Threshold(dataset.getLatest()!.value, calcMemoryThreshold)"></Pulse>
                            <h3>{{ node.resource.metadata.name }}</h3>
                        </div>
                        <div>
                            <Chart :datasets="dataset" :config="VOLUME_CHART_CONFIG(startDate, endDate)"></Chart>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { Node } from '~/classes/node/Node';
import { MonitoredResource } from './MonitoredResource';
import { Dataset } from '../chart/Dataset';
import { VOLUME_CHART_CONFIG } from './volumes/ChartConfig';
import Pulse from '../Pulse.vue';
import PeriodPicker from '../PeriodPicker.vue';
import { useTicker } from '~/classes/Ticker';
import { State, Threshold } from '~/classes/Threshold';

const nodes: Ref<MonitoredResource<Node>[] | undefined> = ref(undefined);

const startDate = ref();

const endDate = useTicker("10s");

function calcCpuThreshold(value: number)
{
    if (value > 85)
    {
        return State.RED;
    }
    if (value > 60)
    {
        return State.ORANGE;
    }
    return State.GREEN;
}

function calcMemoryThreshold(value: number)
{
    if (value > 90)
    {
        return State.RED;
    }
    if (value > 70)
    {
        return State.ORANGE;
    }
    return State.GREEN;
}

watch([startDate, endDate], ([startDate, endDate]) => {
    if (startDate != null && endDate != null)
    {
        MonitoredResource.getNodeMonitorings(startDate, endDate, (_nodes: MonitoredResource<Node>[]) => {
            nodes.value = _nodes;
        });
    }
}, { immediate: true })
</script>