From f8f706c1dd76719eddfcff8feecfcceb73ec0d89 Mon Sep 17 00:00:00 2001
From: Josue <josue.quilon-barrios@senecacollege.ca>
Date: Wed, 17 Mar 2021 12:39:00 -0400
Subject: [PATCH] feat: use fetcher for cpu data

---
 striker-ui/components/CPU.tsx | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/striker-ui/components/CPU.tsx b/striker-ui/components/CPU.tsx
index 2be7fabb..ada734c7 100644
--- a/striker-ui/components/CPU.tsx
+++ b/striker-ui/components/CPU.tsx
@@ -2,8 +2,17 @@ import { Grid } from '@material-ui/core';
 import Panel from './Panel';
 import AllocationBar from './AllocationBar';
 import { HeaderText, BodyText } from './Text';
+import PeriodicFetch from '../lib/fetchers/periodicFetch';
+
+const CPU = ({ uuid }: { uuid: string }): JSX.Element => {
+  const { data, isLoading } = PeriodicFetch(
+    `${process.env.NEXT_PUBLIC_API_URL}/anvils/get_cpu?anvil_uuid=`,
+    uuid,
+  );
+
+  const cpuData =
+    isLoading || !data ? { allocated: 0, cores: 0, threads: 0 } : data;
 
-const CPU = (): JSX.Element => {
   return (
     <Panel>
       <Grid container alignItems="center" justify="space-around">
@@ -11,19 +20,21 @@ const CPU = (): JSX.Element => {
           <HeaderText text="CPU" />
         </Grid>
         <Grid item xs={3}>
-          <BodyText text="Allocated: 3" />
+          <BodyText text={`Allocated: ${cpuData.allocated}`} />
         </Grid>
         <Grid item xs={3}>
-          <BodyText text="Free: 6" />
+          <BodyText text={`Free: ${cpuData.cores - cpuData.allocated}`} />
         </Grid>
         <Grid item xs={10}>
-          <AllocationBar allocated={50} />
+          <AllocationBar
+            allocated={(cpuData.allocated / cpuData.cores) * 100}
+          />
         </Grid>
-        <Grid item xs={5}>
-          <BodyText text="Total Cores: 9" />
+        <Grid item xs={10}>
+          <BodyText text={`Total Cores: ${cpuData.cores}`} />
         </Grid>
         <Grid item xs={12}>
-          <BodyText text="Threads: 16" />
+          <BodyText text={`Threads: ${cpuData.threads}`} />
         </Grid>
       </Grid>
     </Panel>