From 2c2807d15c6ec20aecb686a5b1c78fa241518d0b Mon Sep 17 00:00:00 2001
From: WeeXnes <somtrigi@gmail.com>
Date: Mon, 16 Jun 2025 20:29:41 +0200
Subject: [PATCH] added promstats backend with charts

---
 nuxt.config.ts           |   4 +-
 package.json             |  10 +-
 pages/index.vue          | 574 +++++++++++++++++----------------------
 panel.config.ts          |   2 +-
 server/api/getCpu.ts     |  22 --
 server/api/getMemory.ts  |  17 --
 server/api/getMetrics.ts |  26 ++
 server/api/getSystem.ts  |  11 +-
 server/plugins/init.ts   |   2 +
 types/MetricsResponse.ts |  13 +
 10 files changed, 308 insertions(+), 373 deletions(-)
 delete mode 100644 server/api/getCpu.ts
 delete mode 100644 server/api/getMemory.ts
 create mode 100644 server/api/getMetrics.ts
 create mode 100644 types/MetricsResponse.ts

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 9a74de5..94c8ea9 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -2,5 +2,5 @@
 export default defineNuxtConfig({
   compatibilityDate: '2024-11-01',
   devtools: { enabled: true },
-  modules: ['@nuxtjs/tailwindcss'],
-})
+  modules: ['@nuxtjs/tailwindcss', 'nuxt-charts'],
+})
\ No newline at end of file
diff --git a/package.json b/package.json
index bda3b61..3fb1ddd 100644
--- a/package.json
+++ b/package.json
@@ -11,16 +11,18 @@
     "password_gen": "node .password_hash_gen/generator.js"
   },
   "dependencies": {
-    "nuxt": "^3.15.4",
-    "vue": "latest",
-    "vue-router": "latest",
     "@nuxtjs/tailwindcss": "^6.13.1",
     "axios": "^1.7.9",
     "bcryptjs": "^3.0.0",
     "daisyui": "^4.12.23",
     "dotenv": "^16.4.7",
     "jsonwebtoken": "^9.0.2",
-    "systeminformation": "^5.25.11"
+    "nuxt": "^3.15.4",
+    "nuxt-charts": "^0.1.10",
+    "promstats": "^1.0.1",
+    "systeminformation": "^5.25.11",
+    "vue": "latest",
+    "vue-router": "latest"
   },
   "devDependencies": {
     "@types/jsonwebtoken": "^9.0.8"
diff --git a/pages/index.vue b/pages/index.vue
index e155de7..9df79d5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,248 +1,116 @@
 <script setup lang="ts">
-import type { VM } from '~/types/VM';
-import { reactive, ref } from 'vue';
-import axios from 'axios';
-import type {networkInterface} from "~/types/networkInterface";
-import type {serviceInterface} from "~/types/serviceInterface";
-import {checkAuth} from "~/util/auth";
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import axios from "axios";
 
 
 
-const startVm = async (vm: any) => {
+
+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 response = await axios.post('/api/controlVM', {
-      action: 'start',
-      token: useCookie('token').value,
-      vm: vm
-    });
-    console.log(response.data);
-    if(response.data.status == 'success') {
-      vmInfo.vms.forEach(vm_list => {
-        if(vm.name == vm_list.name) {
-          vm_list.state = "on";
-        }
-      })
-    }
-  } catch (error) {
-    console.error(`Error starting VM: ${vm.name}`, error);
+
+
+
+    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
   }
-};
+}
 
-const shutdownVm = async (vm: any) => {
-  try {
-    const response = await axios.post('/api/controlVM', {
-      action: 'shutdown',
-      force: settings.force_shutdown,
-      token: useCookie('token').value,
-      vm: vm
-    });
-    console.log(response.data);
-    if(response.data.status == 'success') {
-      vmInfo.vms.forEach(vm_list => {
-        if(vm.name == vm_list.name) {
-          vm_list.state = "off";
-        }
-      })
-    }
-  } catch (error) {
-    console.error(`Error shutting down VM: ${vm.name}`, error);
-  }
-};
-
-
-const settings = reactive({
-  ignoreCache: false,
-  enable_services: false,
-  enable_qemu_controls: false,
-  force_shutdown: false
-});
-
-const vmInfo = reactive({
-  isLoaded: false,
-  vms: [] as VM[],
+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)
 })
 
-const osInfo = reactive({
-  isLoaded: false,
-  name: '',
-  version: '',
-  kernel: '',
-  architecture: ''
-});
-
-const serviceInfo = reactive({
-  isLoaded: false,
-  services: [] as serviceInterface[],
-});
-
-const cpuInfo = reactive({
-  isLoaded: false,
-  manufacturer: '',
-  model: '',
-  cores: 0,
-  speed: 0,
-  mainTemp: 0,
-  maxTemp: 0
-});
-
-const memoryInfo = reactive({
-  isLoaded: false,
-  total: 0,
-  free: 0,
-  used: 0
-});
-
-const networkInfo = reactive({
-  isLoaded: true,
-  interfacesList:[] as networkInterface[]
-})
-
-
-const fetchServiceInfo = async () => {
-  try{
-    //let services = await $fetch('/api/getServices')
-    const response = await axios.post('/api/getServices', {
-      token: useCookie('token').value
-    });
-    let services = response.data;
-    services?.forEach((interface_obj: serviceInterface) => {
-      serviceInfo.services.push(interface_obj)
-    });
-    serviceInfo.isLoaded = true;
-  }catch(error){
-    console.error(`Error fetchOsInfo: ${error}`);
-  }
-}
-
-const fetchNetworkInfo = async () => {
-  try{
-    const response = await axios.post('/api/getNetworkInterfaces', {
-      token: useCookie('token').value
-    });
-    let networkInfoFetch = response.data;
-
-    networkInfoFetch?.forEach((interface_obj: networkInterface) => {
-      networkInfo.interfacesList.push(interface_obj)
-    });
-
-    networkInfo.isLoaded = true
-  }catch(error){
-    console.error(`Error fetchOsInfo: ${error}`);
-  }
-}
-
-const fetchOsInfo = async () => {
-  try{
-    const response = await axios.post('/api/getSystem', {
-      token: useCookie('token').value
-    });
-    let systemInfoFetch = response.data;
-
-    console.log(systemInfoFetch)
-    osInfo.name = systemInfoFetch?.platform || 'N/A'
-    osInfo.version = systemInfoFetch?.distro || 'N/A'
-    osInfo.kernel = systemInfoFetch?.kernel || 'N/A'
-    osInfo.architecture = systemInfoFetch?.arch || 'N/A'
-    osInfo.isLoaded = true
-  }catch(error){
-    console.error(`Error fetchOsInfo: ${error}`);
-  }
-}
-
-const fetchCpuTemp = async () => {
-  try {
-    const response = await axios.post('/api/getCpu', {
-      token: useCookie('token').value
-    });
-    let cpuInfoFetch = response.data;
-    console.log(cpuInfoFetch)
-    cpuInfo.manufacturer = cpuInfoFetch?.info.manufacturer || 'N/A'
-    cpuInfo.model = cpuInfoFetch?.info.brand || 'N/A'
-    cpuInfo.cores = cpuInfoFetch?.info.cores || 0
-    cpuInfo.speed = cpuInfoFetch?.info.speed || 0
-    cpuInfo.mainTemp = cpuInfoFetch?.temps.main || 0
-    cpuInfo.maxTemp = cpuInfoFetch?.temps.max || 0
-  } catch (error) {
-    console.error('Error fetching CPU temperature:', error);
-  }
-};
-
-const fetchMemoryInfo = async () => {
-  try{
-    const response = await axios.post('/api/getMemory', {
-      token: useCookie('token').value
-    });
-    let memoryInfoFetch = response.data;
-    console.log(memoryInfoFetch)
-    let ram_cache = settings.ignoreCache ? (memoryInfoFetch?.cached ?? 0) : 0;
-    if(memoryInfoFetch?.total != null)
-      memoryInfo.total = Math.round( memoryInfoFetch?.total/ (1024 * 1024 * 1024)) || 0
-    if(memoryInfoFetch?.free != null)
-      memoryInfo.free = Math.round( (memoryInfoFetch?.free + ram_cache) / (1024 * 1024 * 1024)) || 0
-    if(memoryInfoFetch?.used != null)
-      memoryInfo.used = Math.round( (memoryInfoFetch?.used - ram_cache) / (1024 * 1024 * 1024)) || 0
-    memoryInfo.isLoaded = true
-  }catch(error){
-    console.error(`Error fetchOsInfo: ${error}`);
-  }
-}
-
-const fetchVMs = async () => {
-  try{
-    const response = await axios.post('/api/getVMs', {
-      token: useCookie('token').value
-    });
-    let vmInfoFetch = response.data;
-    console.log(vmInfoFetch)
-    vmInfoFetch?.forEach((vm: VM) => {
-      vmInfo.vms.push(vm)
-    })
-    vmInfo.isLoaded = true
-  }catch(error){
-    console.error(`Error fetchOsInfo: ${error}`);
-  }
-}
-
-
-
-const fetchSettings = async () => {
-  try {
-    const response = await axios.post('/api/getSettings', {
-      token: useCookie('token').value
-    });
-    let settingsFetch = response.data;
-    console.log(settingsFetch)
-    settings.ignoreCache = settingsFetch?.ignoreCache || false
-    settings.enable_qemu_controls = settingsFetch?.enable_qemu_controls || false
-    settings.enable_services = settingsFetch?.enable_services || false
-  } catch (error) {
-    console.error('Error fetching CPU temperature:', error);
-  }
-}
-
-let intervalId: NodeJS.Timeout;
-
-onMounted(async () => {
-  let isAuthed = await checkAuth(useRouter())
-  if(isAuthed){
-    await fetchSettings()
-    if(settings.enable_qemu_controls) await fetchVMs()
-    await fetchOsInfo()
-    await fetchCpuTemp()
-    cpuInfo.isLoaded = true
-    await fetchMemoryInfo()
-    await fetchNetworkInfo()
-    if(settings.enable_services) await fetchServiceInfo()
-    intervalId = setInterval(fetchCpuTemp, 7000);
-
-  }
+onUnmounted(() => {
+  if (intervalId) clearInterval(intervalId)
 })
 
 
 
-onBeforeUnmount(()=>{
-  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 || ''
 
 
 
@@ -252,111 +120,167 @@ onBeforeUnmount(()=>{
 
 <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 opacity-0 transition-opacity duration-500 ease-in-out"
-           :class="{'opacity-100': osInfo.isLoaded}">
-        <h2 class="text-xl font-bold text-center">OS Info</h2>
-        <div class="mt-4 text-sm">
-          <p><strong>Operating System:</strong> {{ osInfo.name }}</p>
-          <p><strong>Version:</strong> {{ osInfo.version }}</p>
-          <p><strong>Kernel:</strong> {{ osInfo.kernel }}</p>
-          <p><strong>Architecture:</strong> {{ osInfo.architecture }}</p>
-        </div>
-      </div>
-
-
-      <div class="card bg-base-100 shadow-2xl p-6 opacity-0 transition-opacity duration-500 ease-in-out"
-           :class="{'opacity-100': cpuInfo.isLoaded}">
+      <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> {{ cpuInfo.speed }} GHz</p>
-          <p><strong>Main Temp:</strong> {{ cpuInfo.mainTemp }} °C</p>
-          <p><strong>Max Temp:</strong> {{ cpuInfo.maxTemp }} °C</p>
+          <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 opacity-0 transition-opacity duration-500 ease-in-out"
-           :class="{'opacity-100': memoryInfo.isLoaded}">
-        <h2 class="text-xl font-bold text-center">Memory Info</h2>
-        <div class="mt-4 text-sm">
-          <p><strong>Total Memory:</strong> {{ memoryInfo.total }} GB</p>
-          <p><strong>Free Memory:</strong> {{ memoryInfo.free }} GB</p>
-          <p><strong>Used Memory:</strong> {{ memoryInfo.used }} GB</p>
-        </div>
-      </div>
-      <div v-for="ifs in networkInfo.interfacesList" class="card bg-base-100 shadow-2xl p-6">
-        <h2 :class="{
-                      'text-green-500': ifs.state === 'up',
-                      'text-red-500': ifs.state === 'down',
-                      'text-yellow-500': ifs.state === 'unknown'
-                     }"
-            class="text-xl font-bold text-center">Interface: {{ ifs.name }}</h2>
-        <div class="mt-4 text-sm">
-          <p><strong>Interface Name:</strong> {{ ifs.name }}</p>
-          <p><strong>IPv4:</strong> {{ ifs.ip4 }} / {{ ifs.ip4subnet }}</p>
-          <p><strong>IPv6:</strong> {{ ifs.ip6 }}</p>
-          <p><strong>State:</strong> {{ ifs.state }}</p>
-        </div>
-      </div>
-    </div>
 
-    <h1 v-if="settings.enable_qemu_controls" class="text-4xl font-bold text-center mb-6">QEMU Virtual Machines</h1>
-    <div v-if="settings.enable_qemu_controls" class="form-control flex flex-row gap-2 mb-6">
-      <label class="label cursor-pointer flex items-center gap-2">
-        <span class="label-text">Force Shutdown</span>
-        <input
-            type="checkbox"
-            class="checkbox checkbox-primary"
-            v-model="settings.force_shutdown"
+      <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'
         />
-      </label>
-    </div>
-    <div v-if="settings.enable_qemu_controls" class="grid md:grid-cols-3 gap-6 w-full max-w-5xl mb-8">
-      <div
-          v-for="vm in vmInfo.vms"
-          class="card bg-base-100 shadow-2xl p-6"
-      >
-        <h2 :class="vm.state === 'on' ? 'text-green-500' : 'text-red-500'" class="text-xl font-bold text-center">
-          {{ vm.name }}
-        </h2>
-        <div class="mt-2 text-sm">
-          <p><strong>OS:</strong> {{ vm.os }}</p>
-          <p><strong>CPU(s):</strong> {{ vm.vCpuCount }}</p>
-          <p><strong>Max Memory:</strong> {{ vm.maxMemory }} MB</p>
-          <p><strong>Autostart:</strong> {{ vm.autostart ? 'Enabled' : 'Disabled' }}</p>
-        </div>
-
-        <div class="form-control mt-4 flex flex-row gap-2">
-          <button @click="startVm(vm)" class="btn btn-primary w-1/2">Start</button>
-          <button
-              @click="shutdownVm(vm)"
-              :class="settings.force_shutdown ? 'btn btn-error w-1/2' : 'btn btn-warning w-1/2'"
-              class="w-1/2">
-            {{ settings.force_shutdown ? 'Kill' : 'Shutdown' }}
-          </button>
-        </div>
       </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 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'
 
 
-    <h1 v-if="serviceInfo.isLoaded" class="text-4xl font-bold text-center mb-6">Services</h1>
-    <div v-if="serviceInfo.isLoaded" class="grid md:grid-cols-3 gap-6 w-full max-w-5xl">
-      <div
-          v-for="service in serviceInfo.services"
-          class="card bg-base-100 shadow-2xl p-6">
-        <h2 :class="service.state === true ? 'text-green-500' : 'text-red-500'" class="text-xl font-bold text-center">
-          {{ service.name }}
-        </h2>
-        <div class="mt-2 text-sm">
-          <p><strong>Name:</strong> {{ service.name }}</p>
-          <p><strong>State:</strong> {{ service.state ? "Running" : "Not Running" }}</p>
-        </div>
+            :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>
diff --git a/panel.config.ts b/panel.config.ts
index e0b5ecc..72d8e47 100644
--- a/panel.config.ts
+++ b/panel.config.ts
@@ -24,5 +24,5 @@ export const settings = reactive({
         "libvirt",
         "frp"
     ],
-    password_hash: ""
+    password_hash: "$2b$10$UO1FyIPODvf.VpGwHBvlq.RfVWOSJYRp/Hh88L306P/fNcXTG9WAC"
 });
\ No newline at end of file
diff --git a/server/api/getCpu.ts b/server/api/getCpu.ts
deleted file mode 100644
index c13984c..0000000
--- a/server/api/getCpu.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { defineEventHandler, getCookie, createError } from 'h3';
-import si from 'systeminformation';
-import {checkValidJwtToken} from "~/core/command_auth";
-
-export default defineEventHandler(async (event) => {
-    try {
-        const body = await readBody(event);
-        const { token } = body;
-        checkValidJwtToken(token)
-
-        const cpuData = await si.cpu();
-        const cpuTemp = await si.cpuTemperature();
-
-        return {
-            info: cpuData,   // `info` is the key, `cpuData` is the value
-            temps: cpuTemp   // `temps` is the key, `cpuTemp` is the value
-        };
-
-    } catch (error) {
-        console.error('Error fetching CPU info:', error);
-    }
-});
diff --git a/server/api/getMemory.ts b/server/api/getMemory.ts
deleted file mode 100644
index 08c056d..0000000
--- a/server/api/getMemory.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import si from 'systeminformation';
-import {checkValidJwtToken} from "~/core/command_auth";
-import { defineEventHandler, getCookie, createError } from 'h3';
-export default defineEventHandler(async (event) => {
-    try {
-
-        const body = await readBody(event);
-        const { token } = body;
-        checkValidJwtToken(token)
-        const memoryData = await si.mem();
-
-        return memoryData;
-
-    } catch (error) {
-        console.error('Error fetching CPU info:', error);
-    }
-});
diff --git a/server/api/getMetrics.ts b/server/api/getMetrics.ts
new file mode 100644
index 0000000..ae18952
--- /dev/null
+++ b/server/api/getMetrics.ts
@@ -0,0 +1,26 @@
+import { defineEventHandler, getCookie, createError } from 'h3';
+import si from 'systeminformation';
+import {checkValidJwtToken} from "~/core/command_auth";
+import {CPU, RAM} from "promstats";
+
+export default defineEventHandler(async (event) => {
+    try {
+        //console.log("metrics called")
+        return {
+            cpu: {
+                load: await CPU.getCpuLoad(),
+                maxClock: await CPU.getMaxCpuClockGHz(),
+                minClock: await CPU.getMinCpuClockGHz(),
+                currentClock: await CPU.getCurrentCpuClockGHz(),
+                temp: await CPU.getAverageTemp(),
+            },
+            ram:{
+                used: await RAM.getUsedMemory(),
+                total: await RAM.getTotalMemory()
+            }
+        }
+
+    } catch (error) {
+        console.error('Error fetching CPU info:', error);
+    }
+});
diff --git a/server/api/getSystem.ts b/server/api/getSystem.ts
index 3900bd3..bee802b 100644
--- a/server/api/getSystem.ts
+++ b/server/api/getSystem.ts
@@ -1,14 +1,21 @@
 import si from 'systeminformation';
 import {checkValidJwtToken} from "~/core/command_auth";
 import { defineEventHandler, getCookie, createError } from 'h3';
+import {System} from "promstats";
 export default defineEventHandler(async (event) => {
     try {
         const body = await readBody(event);
         const { token } = body;
         checkValidJwtToken(token)
-        const systemData = await si.osInfo();
+        const osName = await System.getOsName();
+        const osVersion = await System.getKernelVersion();
+        const osArch = await System.getMachineArchitecture()
 
-        return systemData;
+        return {
+            name: osName,
+            version: osVersion,
+            arch: osArch,
+        };
 
     } catch (error) {
         console.error('Error fetching CPU info:', error);
diff --git a/server/plugins/init.ts b/server/plugins/init.ts
index cd88604..52abcb5 100644
--- a/server/plugins/init.ts
+++ b/server/plugins/init.ts
@@ -4,9 +4,11 @@ import * as crypto from 'crypto';
 import {jwt_globals} from "~/core/globals";
 import Logger from "~/core/logger";
 import {settings} from "~/panel.config";
+import {setUrlEndpoint} from "promstats";
 
 export default defineNitroPlugin((nitroApp) => {
     Logger.info("Running init...");
+    setUrlEndpoint("http://192.168.178.128:9595")
     if(settings.password_hash == ""){
         throw new Error("The password hash is missing. Please use \"npm run password_gen <password>\" to set the password and then \"npm run build\" rebuild the server files");
     }
diff --git a/types/MetricsResponse.ts b/types/MetricsResponse.ts
new file mode 100644
index 0000000..075d730
--- /dev/null
+++ b/types/MetricsResponse.ts
@@ -0,0 +1,13 @@
+interface MetricsResponse {
+    cpu: {
+        load: number
+        maxClock: number
+        minClock: number
+        currentClock: number
+        temp: number
+    }
+    ram: {
+        used: number
+        total: number
+    }
+}