diff --git a/dashboard/src/components/SystemMetrics.vue b/dashboard/src/components/SystemMetrics.vue
index 50c96b17e..47ac8eb45 100644
--- a/dashboard/src/components/SystemMetrics.vue
+++ b/dashboard/src/components/SystemMetrics.vue
@@ -43,6 +43,7 @@ const cpuGraphNode = useTemplateRef('cpuGraphNode');
 const memoryGraphNode = useTemplateRef('memoryGraphNode');
 
 let systemMemory = {};
+let systemCpus = {};
 let cpuGraph = null;
 let memoryGraph = null;
 let metricStream = null;
@@ -68,15 +69,28 @@ async function liveRefresh() {
   };
 }
 
+async function getMetrics(fromSecs) {
+  if (fromSecs === 0) return { cpuLabels: [], cpuData: [], memoryLabels: [], memoryData: [], swapData: [] };
+
+  const [error, result] = await systemModel.getMetrics({ fromSecs: fromSecs * 60 * 60, intervalSecs: 300 });
+  if (error) return console.error(error);
+
+  const cpuLabels = result.cpu.map(v => v[1]*1000); // convert to msecs
+  const cpuData = result.cpu.map(v => v[0]); // already scaled to cpu*100
+
+  const memoryLabels = result.memory.map(v => v[1]*1000); // convert to msecs
+  const memoryData = result.memory.map(v => (v[0] / 1024 / 1024 / 1024).toFixed(2));
+  // assume that there is 1:1 timeline for swap and memory data
+  const swapData = result.swap.map(v => (v[0] / 1024 / 1024 / 1024).toFixed(2));
+
+  return { cpuLabels, cpuData, memoryLabels, memoryData, swapData };
+}
+
 async function refresh() {
   busy.value = true;
 
-  const [error, result] = await systemModel.getMetrics({ fromSecs: (period.value || 0.1) * 60 * 60, intervalSecs: 300 });
-  if (error) return console.error(error);
-
   const now = Date.now();
-  const cpuLabels = result.cpu.map(v => v[1]*1000); // convert to msecs
-  const cpuData = result.cpu.map(v => v[0]); // already scaled to cpu*100
+  const { cpuLabels, cpuData, memoryLabels, memoryData, swapData } = await getMetrics(period.value);
 
   const cpuGraphData = {
     labels: cpuLabels,
@@ -116,7 +130,7 @@ async function refresh() {
       y: {
         type: 'linear',
         min: 0,
-        max: result.cpuCount * 100,
+        max: systemCpus.length * 100,
         ticks: {
           callback: (value) => `${value}%`,
           maxTicksLimit: 6 // max tick labels to show
@@ -134,11 +148,6 @@ async function refresh() {
   if (cpuGraph) cpuGraph.destroy();
   cpuGraph = new Chart(cpuGraphNode.value, { type: 'line', data: cpuGraphData, options: cpuGraphOptions });
 
-  const memoryLabels = result.memory.map(v => v[1]*1000); // convert to msecs
-  const memoryData = result.memory.map(v => (v[0] / 1024 / 1024 / 1024).toFixed(2));
-  // assume that there is 1:1 timeline for swap and memory data
-  const swapData = result.swap.map(v => (v[0] / 1024 / 1024 / 1024).toFixed(2));
-
   const giB = 1024 * 1024 * 1024;
   const roundedMemory = Math.ceil(systemMemory.memory / giB) * giB; // we have to scale up so that the graph can show the data!
   const roundedSwap = Math.ceil(systemMemory.swap / giB) * giB;
@@ -227,11 +236,17 @@ async function refresh() {
 }
 
 onMounted(async () => {
-  const [error, result] = await systemModel.memory();
+  let error, result;
+  [error, result] = await systemModel.memory();
   if (error) return console.error(error);
 
   systemMemory = result;
 
+  [error, result] = await systemModel.cpus();
+  if (error) return console.error(error);
+
+  systemCpus = result;
+
   await refresh();
 });