Skip to content

Commit 6a6ace0

Browse files
author
sarthakpranesh
committedSep 18, 2020
Updated ui, release 1.0.0
Signed-off-by: sarthakpranesh <[email protected]>
·
v1.1.2v
1 parent 4ce850e commit 6a6ace0

16 files changed

+345
-88
lines changed
 

‎appicon.png

-105 KB
Loading

‎build/cpuRoller

0 Bytes
Binary file not shown.

‎build/cpuRoller-darwin-10.6-amd64

-9.47 MB
Binary file not shown.

‎build/cpuRoller-windows-4.0-amd64.exe

-9.78 MB
Binary file not shown.

‎frontend/package-lock.json

+79-11
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
"name": "cpuroller",
33
"author": "Sarthak Pranesh<sarthakpranesh08@gmail.com>",
44
"version": "0.1.0",
5-
"private": true,
5+
"private": false,
66
"dependencies": {
7+
"@wailsapp/runtime": "^1.0.10",
78
"core-js": "^3.6.4",
89
"react": "^16.13.1",
910
"react-dom": "^16.13.1",
10-
"wails-react-scripts": "3.0.1-2",
1111
"react-modal": "3.11.2",
12-
"@wailsapp/runtime": "^1.0.10"
12+
"wails-react-scripts": "3.0.1-2"
1313
},
1414
"scripts": {
1515
"start": "react-scripts start",

‎frontend/package.json.md5

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
de4d4f32319e215a59ff1b191f20e213
1+
b180169868e67fa72e5f912f51d9c94d

‎frontend/src/App.css

+9-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
/* Background color: #162447
22
Cards overlay: #1f4068
33
Primary Text: #ececec
4-
Secondary Text: #e43f5a */
4+
Secondary Text: #e43f5a
5+
6+
Progress Bar trail: #f4f4f4
7+
Progress Bar Path: #f0a500
8+
Progress Bar Circle width: #f0a500
9+
*/
510

611
.App {
712
display: flex;
@@ -25,14 +30,15 @@ Secondary Text: #e43f5a */
2530
}
2631

2732
.SysInfo {
28-
align-self: flex-start;
29-
margin: 4px 100px;
33+
margin: 0px;
34+
margin-top: 10px;
3035
}
3136

3237
.GridContainer {
3338
display: grid;
3439
grid-template-columns: auto auto auto;
3540
margin: 10px;
41+
margin-bottom: 40px;
3642
}
3743

3844
.GridItem {

‎frontend/src/App.js

+51-24
Original file line numberDiff line numberDiff line change
@@ -2,54 +2,81 @@ import React, {useState, useEffect} from 'react';
22
import './App.css';
33

44
// importing components
5-
import SectionTable from './components/SectionTable/index.js'
5+
import CircularUsage from './components/CircularUsage/index.js'
6+
7+
const gbFact = 1073741824;
68

79
function App() {
810
const [result, setResult] = useState(null);
11+
const [coreCount, setCoreCount] = useState(0);
12+
13+
const FindAndSetCoreCount = (cpu) => {
14+
let a = [];
15+
cpu.forEach(c => {
16+
if (a.includes(c.coreId)) {
17+
return;
18+
}
19+
a.push(c.coreId);
20+
});
21+
setCoreCount(a.length);
22+
}
923

1024
useEffect(() => {
11-
window.backend.initStats().then((result) => setResult(result));
25+
window.backend.initStats().then((result) => {
26+
setResult(result);
27+
FindAndSetCoreCount(result.CPUInfo);
28+
});
1229
setInterval(() => {
1330
window.backend.updateCPUStats().then((result) => {
14-
console.log(result)
31+
// console.log(result)
1532
setResult(result)
1633
});
17-
}, 1000);
34+
}, 1000);
1835
}, [])
1936

2037
return (
2138
<div id="app" className="App">
22-
<h2 className="PrimaryText SysInfo">Operating System: {result !== null ? result.Os : "..."}</h2>
23-
<h2 className="PrimaryText SysInfo">System Arch: {result !== null ? result.Arch : "..."}</h2>
2439
<div className="GridContainer">
2540
<div className="GridItem">
26-
<SectionTable title="CPU Info" data={{
27-
"Cores": result !== null ? result.Count : 0,
28-
"Threads": result !== null ? (result.CPUInfo.length !== 0 ? result.CPUInfo.length : 0) : 0,
29-
"Usage": result !== null ? result.Usage : 0,
30-
"Name": result !== null ? (result.CPUInfo.length !== 0 ? result.CPUInfo[0].modelName : "...") : "...",
31-
}}
41+
<CircularUsage
42+
percentage={result !== null ? result.Usage : 0}
43+
title="CPU"
44+
subContent={`${result !== null ? (result.Usage).toPrecision(2) : 0}%`}
3245
/>
3346
</div>
3447
<div className="GridItem">
35-
<SectionTable title="System RAM" data={{
36-
Total: result !== null ? result.Mem.total : 0,
37-
Used: result !== null ? result.Mem.used : 0,
38-
Available: result !== null ? result.Mem.available : 0,
39-
"Used %": result !== null ? `${Math.round(result.Mem.usedPercent)}%` : "0%"
40-
}}
48+
<CircularUsage
49+
percentage={result !== null ? result.Mem.usedPercent : 0}
50+
title="RAM"
51+
subContent={`${result !== null ? (result.Mem.used/gbFact).toPrecision(2) : 0}/${result !== null ? (result.Mem.total/gbFact).toPrecision(2) : 0} GB`}
4152
/>
4253
</div>
4354
<div className="GridItem">
44-
<SectionTable title="Swap" data={{
45-
Total: result !== null ?result.Swap.total : 0,
46-
Used: result !== null ?result.Swap.used : 0,
47-
Available: result !== null ?result.Swap.free : 0,
48-
"Used %": result !== null ? `${Math.round(result.Swap.usedPercent)}%` : "0%"
49-
}}
55+
<CircularUsage
56+
percentage={result !== null ? result.Swap.usedPercent : 0}
57+
title="SWAP"
58+
subContent={`${result !== null ? (result.Swap.used/gbFact).toPrecision(2) : 0}/${result !== null ? (result.Swap.total/gbFact).toPrecision(2) : 0} GB`}
5059
/>
5160
</div>
5261
</div>
62+
<h4 className="PrimaryText SysInfo">
63+
<span className="SecondaryText">CPU Model:</span> {result !== null ? result.CPUInfo[0].modelName : ""}
64+
</h4>
65+
<h4 className="PrimaryText SysInfo">
66+
<span className="SecondaryText">Total CPUs:</span> {coreCount}
67+
</h4>
68+
<h4 className="PrimaryText SysInfo">
69+
<span className="SecondaryText">Total Threads:</span> {result !== null ? result.CPUInfo.length : 0}
70+
</h4>
71+
<h4 className="PrimaryText SysInfo">
72+
<span className="SecondaryText">Cache Size:</span> {result !== null ? result.CPUInfo[0].cacheSize : 0}
73+
</h4>
74+
<h4 className="PrimaryText SysInfo">
75+
<span className="SecondaryText">Operating System:</span> {result !== null ? result.Os : " "}
76+
</h4>
77+
<h4 className="PrimaryText SysInfo">
78+
<span className="SecondaryText">System Arch:</span> {result !== null ? result.Arch : " "}
79+
</h4>
5380
</div>
5481
);
5582
}

‎frontend/src/components/CircularUsage/index.js

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react'
2+
// import {CircularProgressbarWithChildren} from 'react-circular-progressbar';
3+
import ProgressBar from "../ProgressBar/index.js";
4+
5+
// importing styles
6+
import "./styles.css";
7+
8+
const CircularUsage = ({percentage=66, title="title", subContent="subs"}) => {
9+
10+
return (
11+
<div className="CircularUsageWrapper">
12+
<ProgressBar
13+
progress={percentage}
14+
strokeWidth={10}
15+
strokeColor='#f0a500'
16+
strokeLinecap='round'
17+
transition='0.3s ease'
18+
trackStrokeWidth={10}
19+
trackStrokeColor='#f4f4f4'
20+
trackStrokeLinecap='butt'
21+
>
22+
<div>
23+
<h1 className="PrimaryText CircularUsageTitle">{title}</h1>
24+
<p className="SecondaryText CircularUsageSubContent">{subContent}</p>
25+
</div>
26+
</ProgressBar>
27+
</div>
28+
);
29+
}
30+
31+
export default CircularUsage;

‎frontend/src/components/CircularUsage/styles.css

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.CircularUsageWrapper {
2+
width: 20vw;
3+
height: 20vw;
4+
display: flex;
5+
margin: 20px;
6+
flex-direction: column;
7+
justify-content: center;
8+
align-items: center;
9+
}
10+
11+
.CircularUsageTitle {
12+
margin: 0px;
13+
padding-bottom: 4px;
14+
}
15+
16+
.CircularUsageSubContent {
17+
margin: 0px;
18+
}

‎frontend/src/components/ProgressBar/index.js

+148
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
import React, { Component } from 'react'
2+
3+
class ProgressBar extends Component {
4+
5+
state = {
6+
animationInited: false
7+
}
8+
9+
componentDidMount() {
10+
this.initAnimation()
11+
}
12+
13+
initAnimation = () => {
14+
this.setState({ animationInited: true })
15+
}
16+
17+
getProgress = () => {
18+
const { progress } = this.props
19+
const { animationInited } = this.state
20+
21+
return !animationInited ? 0 : progress
22+
}
23+
24+
getStrokeDashoffset = strokeLength => {
25+
const progress = this.getProgress()
26+
const progressLength = (strokeLength / 100) * (100 - progress)
27+
return progressLength
28+
}
29+
30+
getStrokeDashArray = (strokeLength, circumference) => {
31+
return `${strokeLength}, ${circumference}`
32+
}
33+
34+
getTrackStrokeDashArray = (strokeLength, circumference) => {
35+
const { initialAnimation } = this.props
36+
const { animationInited } = this.state
37+
38+
if (initialAnimation && !animationInited) return `0, ${circumference}`
39+
return `${strokeLength}, ${circumference}`
40+
}
41+
42+
getExtendedWidth = () => {
43+
const {
44+
strokeWidth,
45+
pointerRadius,
46+
pointerStrokeWidth,
47+
trackStrokeWidth
48+
} = this.props
49+
const pointerWidth = pointerRadius + pointerStrokeWidth
50+
51+
if (pointerWidth > strokeWidth && pointerWidth > trackStrokeWidth) return pointerWidth * 2
52+
else if (strokeWidth > trackStrokeWidth) return strokeWidth * 2
53+
else return trackStrokeWidth * 2
54+
}
55+
56+
render() {
57+
const {
58+
trackStrokeWidth,
59+
trackStrokeColor,
60+
trackStrokeLinecap,
61+
strokeColor,
62+
strokeWidth,
63+
strokeLinecap,
64+
children,
65+
trackTransition,
66+
transition,
67+
} = this.props
68+
69+
const d = 2 * 100
70+
const width = d + this.getExtendedWidth()
71+
72+
const circumference = 2 * Math.PI * 100
73+
const strokeLength = (circumference / 360) * (360)
74+
75+
return (
76+
<div style={{
77+
display: 'flex',
78+
flexDirection: 'column',
79+
justifyContent: 'center',
80+
alignItems: 'center',
81+
textAlign: 'center',
82+
}}>
83+
<div style={{position: 'absolute'}}>
84+
{children || null}
85+
</div>
86+
<svg
87+
width={width}
88+
height={width}
89+
viewBox={`0 0 ${width} ${width}`}
90+
style={{ transform: `rotate(90deg)` }}
91+
>
92+
{trackStrokeWidth > 0 && (
93+
<circle
94+
cx={width / 2}
95+
cy={width / 2}
96+
r={100}
97+
fill="none"
98+
stroke={trackStrokeColor}
99+
strokeWidth={trackStrokeWidth}
100+
strokeDasharray={this.getTrackStrokeDashArray(
101+
strokeLength,
102+
circumference
103+
)}
104+
strokeLinecap={trackStrokeLinecap}
105+
className="RCP__track"
106+
style={{ transition: trackTransition }}
107+
/>
108+
)}
109+
{strokeWidth > 0 && (
110+
<circle
111+
cx={width / 2}
112+
cy={width / 2}
113+
r={100}
114+
fill="none"
115+
stroke={strokeColor}
116+
strokeWidth={strokeWidth}
117+
strokeDasharray={this.getStrokeDashArray(
118+
strokeLength,
119+
circumference
120+
)}
121+
strokeDashoffset={this.getStrokeDashoffset(
122+
strokeLength
123+
)}
124+
strokeLinecap={strokeLinecap}
125+
className="RCP__progress"
126+
style={{ transition }}
127+
/>
128+
)}
129+
</svg>
130+
</div>
131+
)
132+
}
133+
134+
}
135+
136+
ProgressBar.defaultProps = {
137+
progress: 0,
138+
strokeWidth: 10,
139+
strokeColor: 'indianred',
140+
strokeLinecap: 'round',
141+
transition: '.3s ease',
142+
trackStrokeColor: '#e6e6e6',
143+
trackStrokeWidth: 10,
144+
trackStrokeLinecap: 'round',
145+
trackTransition: '.3s ease',
146+
}
147+
148+
export default ProgressBar

‎frontend/src/components/SectionTable/index.js

-25
This file was deleted.

‎frontend/src/components/SectionTable/style.css

-19
This file was deleted.

‎package-lock.json

+3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎project.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{
22
"name": "cpuRoller",
3-
"description": "Enter your project description",
3+
"description": "Real time system usage and information",
44
"author": {
55
"name": "Sarthak Pranesh",
66
"email": "sarthakpranesh08@gmail.com"
77
},
8-
"version": "0.1.0",
8+
"version": "1.0.0",
99
"binaryname": "cpuRoller",
1010
"frontend": {
1111
"dir": "frontend",

0 commit comments

Comments
 (0)
Please sign in to comment.