created socket for cpu utilsation and also plotting it on the frontend with bargraph

Author: yashkathe

backend/package-lock.json

@@ -29,6 +29,7 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
+    "@types/pidusage": "^2.0.5",
     "cors": "^2.8.5",
     "dotenv": "^16.4.5",
     "nodemon": "^3.1.3",

backend/package.json

@@ -1,14 +1,15 @@
 import os from 'os'
 import si from 'systeminformation'
 
-import { isRamUtil, isSwapUtil } from '../types/types'
+import { isCpuUtil, isRamUtil, isSwapUtil, isError } from '../types/types'
 
 let limit: number = 10
 
 let idx: number = 0
 
 let RAM: isRamUtil[] = []
 let SWAP: isSwapUtil[] = []
+let CPU: isCpuUtil[] = []
 
 // CALCULATING RAM UTILISATION
 export const calculateRamUtil = (): isRamUtil[] => {
@@ -63,4 +64,26 @@ export const calculateSwapUtil = async () => {
 
     }
 
+}
+
+// CALCULATE CPU UTILISATION FOR EACH CORE
+export const calculateCpuUtil = async (): Promise<isCpuUtil[] | isError> => {
+
+    const cpuInfo = os.cpus()
+    const numCores = cpuInfo.length
+
+    try {
+
+        const load = await si.currentLoad()
+        const coresUsage = load.cpus.map((cpu, index) => ({
+            core: index,
+            load: cpu.load
+        }));
+
+        return coresUsage
+
+    } catch (error: any) {
+        return { message: error }
+    }
+
 }

backend/src/helpers/helpers.ts

@@ -4,7 +4,7 @@ import cors from 'cors';
 import { Server as socketServer } from 'socket.io';
 import { createServer } from 'http';
 import router from './routes/routes'
-import { calculateRamUtil } from './helpers/helpers';
+import { calculateRamUtil, calculateCpuUtil } from './helpers/helpers';
 
 // load the .env file
 dotenv.config();
@@ -39,6 +39,8 @@ const server = new socketServer(httpServer, {
 server.on("connection", (socket) => {
     console.log("socket connected");
 
+    // ______________MAIN FUNCTIONS______________
+
     // RAM
     const ramInterval = setInterval(() => {
         try {
@@ -49,9 +51,23 @@ server.on("connection", (socket) => {
         }
     }, 1000);
 
+    // CPU
+
+    const cpuInterval = setInterval(async () => {
+        try{
+            const cpuUsage = await calculateCpuUtil()
+            socket.emit("cpuUsage", cpuUsage)
+        }catch(error){
+            console.error('Error calculating CPU usage:', error);
+        }
+    }, 1000)
+
+    // ______________CLEAN UP______________
+
     // CLEAR INTERVALS ON DISCONNECTS
     socket.on("disconnect", () => {
         clearInterval(ramInterval);
+        clearInterval(cpuInterval);
         console.log("socket disconnected");
     });
 

backend/src/server.ts

@@ -8,6 +8,11 @@ export type isSwapUtil = {
     x: number
 }
 
+export type isCpuUtil = {
+    core: number;
+    load: number
+}
+
 export type isRamStat = {
     totalRam: number;
     minRam: number;
@@ -18,4 +23,8 @@ export type isSwapStat = {
     totalSwap: number;
     minSwap: number;
     freeSwap: number;
+}
+
+export type isError = {
+    message: string;
 }

backend/src/types/types.ts

@@ -1,12 +1,14 @@
 import React from 'react'
 import RamUtil from './sockets/RamUtil'
+import CpuUtil from './sockets/CpuUtil'
 
 import classes from './App.module.css'
 
 const App: React.FC = () => {
     return (
         <div className={classes.parent}>
                 <RamUtil />
+                <CpuUtil />
         </div>
     )
 }

frontend/src/App.tsx

@@ -1,14 +1,9 @@
 import React from 'react';
-import { AreaChart, XAxis, YAxis, CartesianGrid, Tooltip, Area, LineChart, Legend, Line, ResponsiveContainer } from 'recharts'
+import { AreaChartProps } from '../types/types';
+import { AreaChart, XAxis, YAxis, CartesianGrid, Tooltip, Area, Legend, ResponsiveContainer } from 'recharts'
 
 import Wrapper from '../shared/Wrapper';
 
-// INTERFACE
-interface AreaChartProps {
-    data: { name: string, x: number }[];
-    dataLabel : string
-}
-
 // COMPONENT
 const AreaChartGraph: React.FC<AreaChartProps> = ({ data, dataLabel}) => {
     return (
@@ -29,7 +24,6 @@ const AreaChartGraph: React.FC<AreaChartProps> = ({ data, dataLabel}) => {
                     <Area name={dataLabel} type="monotone" dataKey="x" stroke="#4CAF50" fillOpacity={1} fill="url(#colorUv)" />
                 </AreaChart>
             </ResponsiveContainer>
-
         </Wrapper>
     )
 }

frontend/src/graphs/AreaChartGraph.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { BarChartProps } from '../types/types'
+import {ResponsiveContainer, BarChart, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Bar} from 'recharts'
+
+import Wrapper from '../shared/Wrapper';
+
+const BarChartGraph: React.FC<BarChartProps> = ({ data, dataLabel }) => {
+    return (
+        <Wrapper>
+            <ResponsiveContainer width="100%" height="100%">
+                <BarChart data={data} style={{ backgroundColor: '#2b2b3d' }} margin={{ top: 25, right: 25, left: 0, bottom: 0 }}> 
+                    <CartesianGrid strokeDasharray="2 2" stroke="rgba(204, 204, 204, 0.5)"/>
+                    <XAxis dataKey="core" stroke="#ccc"/>
+                    <YAxis stroke="#ccc"/>
+                    <Tooltip />
+                    <Legend />
+                    <Bar name={dataLabel} dataKey="load" fill="#8884d8" />
+                </BarChart>
+            </ResponsiveContainer>
+        </Wrapper>
+    )
+}
+
+export default BarChartGraph

frontend/src/graphs/BarChartGraph.tsx

@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from 'react'
+import socketIOClient from 'socket.io-client'
+
+import BarChartGraph from '../graphs/BarChartGraph';
+import Spinner from '../shared/Spinner';
+import { isCpuUtil } from '../types/types';
+
+import classes from './shared.module.css'
+
+const CpuUtil: React.FC = () => {
+
+    const [data, setData] = useState<isCpuUtil[]>([])
+    const [isLoading, setIsLoading] = useState<boolean>(true);
+
+    // connect the socket
+    useEffect(() => {
+
+        const socket = socketIOClient("http://192.167.0.119:4001/");
+
+        socket.on("cpuUsage", (data: isCpuUtil[]) => {
+            setData(data);
+            setIsLoading(false)
+        });
+
+        socket.on("disconnect", () => {
+            setIsLoading(true)
+        })
+
+        // Clean up the socket connection when the component unmounts
+        return () => {
+            setIsLoading(true)
+            socket.disconnect();
+        };
+
+    }, [])
+
+    return (
+        <div className={classes.parent}>
+            <h1>CPU Utilization</h1>
+            {isLoading && <Spinner />}
+            {!isLoading && <BarChartGraph data={data} dataLabel="CPU Core Utilization"/>}
+        </div>
+    )
+}
+
+export default CpuUtil

frontend/src/sockets/CpuUtil.tsx

@@ -3,14 +3,9 @@ import socketIOClient from "socket.io-client";
 
 import AreaChartGraph from '../graphs/AreaChartGraph';
 import Spinner from '../shared/Spinner';
+import { isRamUtil } from '../types/types';
 
-import classes from './RamUtil.module.css'
-
-//INTERFACE
-interface isRamUtil {
-    name: string;
-    x: number;
-}
+import classes from './shared.module.css'
 
 // COMPONENT
 const RamUtil: React.FC = () => {
@@ -26,9 +21,12 @@ const RamUtil: React.FC = () => {
         socket.on("ramUsage", (data: isRamUtil[]) => {
             setData(data);
             setIsLoading(false)
-            console.log(data)
         });
 
+        socket.on("disconnect", () => {
+            setIsLoading(true)
+        })
+
         // Clean up the socket connection when the component unmounts
         return () => {
             setIsLoading(true)

frontend/src/sockets/RamUtil.tsx

@@ -0,0 +1,19 @@
+export interface AreaChartProps {
+    data: { name: string, x: number }[];
+    dataLabel : string
+}
+
+export interface BarChartProps {
+    data: {core: number, load: number}[];
+    dataLabel: string
+}
+
+export interface isRamUtil {
+    name: string;
+    x: number;
+}
+
+export interface isCpuUtil {
+    core: number;
+    load: number;
+}