47 lines
1.0 KiB
Vue
47 lines
1.0 KiB
Vue
<template>
|
|
<div class="resource-container node-container">
|
|
<div class="header">
|
|
<p>Name</p>
|
|
<p>Alter</p>
|
|
<p>Status</p>
|
|
<p>CPU</p>
|
|
<p>RAM</p>
|
|
</div>
|
|
<NodeComponent :node-stats="ns" v-for="ns, index in nodeStats" class="resource" :class="{ even: index % 2 }"></NodeComponent>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { NodeStats } from '~/classes/Node';
|
|
import { getNodes } from '~/requests/nodes';
|
|
|
|
const nodeStats: Ref<NodeStats[] | undefined> = ref(undefined);
|
|
|
|
let interval: NodeJS.Timeout | undefined = undefined;
|
|
onMounted(() => {
|
|
loadNodes();
|
|
interval = setInterval(() => {
|
|
loadNodes();
|
|
}, 10000)
|
|
})
|
|
onUnmounted(() => {
|
|
clearInterval(interval);
|
|
});
|
|
|
|
function loadNodes()
|
|
{
|
|
getNodes((_nodes: NodeStats[]) => {
|
|
nodeStats.value = _nodes;
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.node-container {
|
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
|
}
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
</style> |