288 lines
8.4 KiB
Vue
288 lines
8.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
|
import axios from "axios";
|
|
|
|
|
|
|
|
|
|
const POLL_INTERVAL_MS = 30000
|
|
const MAX_POINTS = 10
|
|
|
|
interface AreaChartItem {
|
|
date: string
|
|
value: number
|
|
pinned: number
|
|
}
|
|
|
|
const cpuLoadData = ref<AreaChartItem[]>([])
|
|
const cpuClockData = ref<AreaChartItem[]>([])
|
|
const cpuTempData = ref<AreaChartItem[]>([])
|
|
const ramLoadData = ref<AreaChartItem[]>([])
|
|
|
|
|
|
let intervalId: number | undefined
|
|
let isUpdating = false
|
|
|
|
|
|
|
|
async function updateMetrics() {
|
|
if (isUpdating) return
|
|
isUpdating = true
|
|
try {
|
|
|
|
|
|
|
|
const token = useCookie('token').value
|
|
const response = await axios.post('/api/getMetrics', { token })
|
|
|
|
const load = response.data.cpu?.load || 0
|
|
const curClock = response.data.cpu?.currentClock || 0
|
|
const maxClock = response.data.cpu?.maxClock || 0
|
|
|
|
|
|
const cpuTemp = response.data.cpu?.temp || 0
|
|
|
|
|
|
|
|
const ramLoad = response.data.ram?.used || 0
|
|
const ramTotal = response.data.ram?.total || 0
|
|
|
|
|
|
|
|
const now = new Date().toLocaleTimeString()
|
|
cpuLoadData.value = [...cpuLoadData.value, { date: now, value: load, pinned: 100 }].slice(-MAX_POINTS)
|
|
cpuClockData.value = [...cpuClockData.value, { date: now, value: curClock, pinned: maxClock }].slice(-MAX_POINTS)
|
|
cpuTempData.value = [...cpuTempData.value, { date: now, value: cpuTemp, pinned: 100 }].slice(-MAX_POINTS)
|
|
ramLoadData.value = [...ramLoadData.value, { date: now, value: ramLoad, pinned: ramTotal }].slice(-MAX_POINTS)
|
|
} finally {
|
|
isUpdating = false
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
const empty1 = Array(MAX_POINTS).fill({ date: '', value: 0, pinned: 100 })
|
|
//cpuLoadData.value = [...empty1]
|
|
updateMetrics()
|
|
setTimeout(() => {
|
|
updateMetrics(); // Second call after 2 seconds
|
|
}, 1010);
|
|
intervalId = window.setInterval(updateMetrics, POLL_INTERVAL_MS)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
if (intervalId) clearInterval(intervalId)
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const chartDataCpuUsage = computed(() => cpuLoadData.value)
|
|
const chartCategoriesCpuUsage = computed(() => ({
|
|
value: { name: 'CPU Load (%)', color: '#863bf6' },
|
|
pinned: { name: 'Limit (100%)', color: 'rgba(0,0,0,0.01)' },
|
|
}))
|
|
const xFormatterCpuUsage = (i: number) => chartDataCpuUsage.value[i]?.date || ''
|
|
|
|
|
|
|
|
|
|
const chartDataCpuClock = computed(() => cpuClockData.value)
|
|
const chartCategoriesCpuClock = computed(() => ({
|
|
value: { name: 'CPU Clock (Ghz)', color: '#9cf63b' },
|
|
pinned: { name: 'CPU Max Clock (Ghz)', color: 'rgba(0,0,0,0.01)' },
|
|
}))
|
|
const xFormatterCpuClock = (i: number) => chartDataCpuClock.value[i]?.date || ''
|
|
|
|
const chartDataCpuTemp = computed(() => cpuTempData.value)
|
|
const chartCategoriesCpuTemp = computed(() => ({
|
|
value: { name: 'CPU Temp (°C)', color: '#f63b3b' },
|
|
pinned: { name: 'Max Temp (°C)', color: 'rgba(0,0,0,0.01)' },
|
|
}))
|
|
const xFormatterCpuTemp = (i: number) => chartDataCpuTemp.value[i]?.date || ''
|
|
|
|
|
|
|
|
|
|
const chartDataRamUsage = computed(() => ramLoadData.value)
|
|
const chartCategoriesRamUsage = computed(() => ({
|
|
value: { name: 'RAM Used (Gb)', color: '#f63b6d' },
|
|
pinned: { name: 'RAM Total (Gb)', color: 'rgba(0,0,0,0.01)' },
|
|
}))
|
|
const xFormatterRamUsage = (i: number) => chartDataRamUsage.value[i]?.date || ''
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<div class="flex flex-col items-center justify-center py-16 px-6">
|
|
<div class="grid md:grid-cols-3 gap-6 w-full max-w-5xl mb-8">
|
|
|
|
<div class="card bg-base-100 shadow-2xl p-6 transition-opacity duration-500 ease-in-out">
|
|
<h2 class="text-xl font-bold text-center">CPU Info</h2>
|
|
<div class="mt-4 text-sm">
|
|
<p><strong>Manufacturer:</strong> cpuInfo.manufacturer</p>
|
|
<p><strong>Model:</strong> cpuInfo.model</p>
|
|
<p><strong>Core Count:</strong> cpuInfo.cores</p>
|
|
<p><strong>Speed:</strong> puInfo.speed GHz</p>
|
|
<p><strong>Main Temp:</strong> cpuInfo.mainTemp °C</p>
|
|
<p><strong>Max Temp:</strong> cpuInfo.maxTemp °C</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card bg-base-100 shadow-2xl p-6 transition-opacity duration-500 ease-in-out">
|
|
<h2 class="text-xl font-bold text-center">CPU Info</h2>
|
|
<div class="mt-4 text-sm">
|
|
<p><strong>Manufacturer:</strong> cpuInfo.manufacturer</p>
|
|
<p><strong>Model:</strong> cpuInfo.model</p>
|
|
<p><strong>Core Count:</strong> cpuInfo.cores</p>
|
|
<p><strong>Speed:</strong> puInfo.speed GHz</p>
|
|
<p><strong>Main Temp:</strong> cpuInfo.mainTemp °C</p>
|
|
<p><strong>Max Temp:</strong> cpuInfo.maxTemp °C</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card bg-base-100 shadow-2xl p-6 transition-opacity duration-500 ease-in-out">
|
|
<h2 class="text-xl font-bold text-center">CPU Info</h2>
|
|
<div class="mt-4 text-sm">
|
|
<p><strong>Manufacturer:</strong> cpuInfo.manufacturer</p>
|
|
<p><strong>Model:</strong> cpuInfo.model</p>
|
|
<p><strong>Core Count:</strong> cpuInfo.cores</p>
|
|
<p><strong>Speed:</strong> puInfo.speed GHz</p>
|
|
<p><strong>Main Temp:</strong> cpuInfo.mainTemp °C</p>
|
|
<p><strong>Max Temp:</strong> cpuInfo.maxTemp °C</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="card bg-base-100 shadow-2xl p-6 transition-opacity duration-500 ease-in-out">
|
|
<h2 class="text-xl font-bold text-center">CPU Usage</h2>
|
|
<LineChart
|
|
:data="chartDataCpuUsage"
|
|
data-key-x="date"
|
|
data-key-y="value"
|
|
:height="250"
|
|
:categories="chartCategoriesCpuUsage"
|
|
:x-formatter="xFormatterCpuUsage"
|
|
:curve-type="CurveType.MonotoneX"
|
|
:legend-position="LegendPosition.Top"
|
|
:hide-legend="true"
|
|
:y-min="0"
|
|
:y-max="100"
|
|
|
|
:x-num-ticks='5'
|
|
:y-num-ticks='5'
|
|
|
|
:x-grid-line='false'
|
|
:y-grid-line='false'
|
|
|
|
:x-domain-line='true'
|
|
:y-domain-line='true'
|
|
|
|
|
|
:x-tick-line='false'
|
|
:y-tick-line='true'
|
|
/>
|
|
</div>
|
|
|
|
<div class="card bg-base-100 shadow-2xl p-6 transition-opacity duration-500 ease-in-out">
|
|
<h2 class="text-xl font-bold text-center">CPU Clock</h2>
|
|
<LineChart
|
|
:data="chartDataCpuClock"
|
|
data-key-x="date"
|
|
data-key-y="value"
|
|
:height="250"
|
|
:categories="chartCategoriesCpuClock"
|
|
:x-formatter="xFormatterCpuClock"
|
|
:curve-type="CurveType.MonotoneX"
|
|
:legend-position="LegendPosition.Top"
|
|
:hide-legend="true"
|
|
:y-min="0"
|
|
:y-max="100"
|
|
|
|
:x-num-ticks='5'
|
|
:y-num-ticks='5'
|
|
|
|
:x-grid-line='false'
|
|
:y-grid-line='false'
|
|
|
|
:x-domain-line='true'
|
|
:y-domain-line='true'
|
|
|
|
|
|
:x-tick-line='false'
|
|
:y-tick-line='true'
|
|
/>
|
|
</div>
|
|
<div class="card bg-base-100 shadow-2xl p-6 transition-opacity duration-500 ease-in-out">
|
|
<h2 class="text-xl font-bold text-center">CPU Temp</h2>
|
|
<LineChart
|
|
:data="chartDataCpuTemp"
|
|
data-key-x="date"
|
|
data-key-y="value"
|
|
:height="250"
|
|
:categories="chartCategoriesCpuTemp"
|
|
:x-formatter="xFormatterCpuTemp"
|
|
:curve-type="CurveType.MonotoneX"
|
|
:legend-position="LegendPosition.Top"
|
|
:hide-legend="true"
|
|
:y-min="0"
|
|
:y-max="100"
|
|
|
|
:x-num-ticks='5'
|
|
:y-num-ticks='5'
|
|
|
|
:x-grid-line='false'
|
|
:y-grid-line='false'
|
|
|
|
:x-domain-line='true'
|
|
:y-domain-line='true'
|
|
|
|
|
|
:x-tick-line='false'
|
|
:y-tick-line='true'
|
|
/>
|
|
</div>
|
|
<div class="card bg-base-100 shadow-2xl p-6 transition-opacity duration-500 ease-in-out">
|
|
<h2 class="text-xl font-bold text-center">Ram Usage</h2>
|
|
<LineChart
|
|
:data="chartDataRamUsage"
|
|
data-key-x="date"
|
|
data-key-y="value"
|
|
:height="250"
|
|
:categories="chartCategoriesRamUsage"
|
|
:x-formatter="xFormatterRamUsage"
|
|
:curve-type="CurveType.MonotoneX"
|
|
:legend-position="LegendPosition.Top"
|
|
:hide-legend="true"
|
|
:y-min="0"
|
|
:y-max="100"
|
|
|
|
:x-num-ticks='5'
|
|
:y-num-ticks='5'
|
|
|
|
:x-grid-line='false'
|
|
:y-grid-line='false'
|
|
|
|
:x-domain-line='true'
|
|
:y-domain-line='true'
|
|
|
|
|
|
:x-tick-line='false'
|
|
:y-tick-line='true'
|
|
/>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|