92 lines
3.0 KiB
Vue
92 lines
3.0 KiB
Vue
<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> |