Skip to content

Commit 914afec

Browse files
MarkHersheyMarkHershey
committed
Add InfoCPU and InfoInterfaces components for enhanced machine status display; refactor CopyableText usage in SingleIP component.
1 parent cfc6c86 commit 914afec

5 files changed

Lines changed: 177 additions & 70 deletions

File tree

‎mxstatus/src/components/CopyableText.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const CopyableText = ({ children, className, style, showCopyIcon = true, maxLeng
5151
opacity: 0.7,
5252
transition: 'opacity 0.2s ease'
5353
}}>
54-
📋
54+
copy
5555
</span>
5656
)
5757
}

‎mxstatus/src/components/InfoCPU.js‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import React from 'react'
2+
import DisplayPercent from './DisplayPercent'
3+
import CopyableText from './CopyableText'
4+
5+
const getUtilizationColor = (percent) => {
6+
if (percent < 30) return 'var(--hacker-info)'
7+
if (percent < 70) return 'var(--hacker-warning)'
8+
return 'var(--hacker-danger)'
9+
}
10+
11+
const InfoCPU = props => {
12+
const { cpu_model, cpu_usage, ram_usage, ram_free, ram_total } = props.data
13+
const ramUsed = ram_total - ram_free
14+
const ramPercent = ram_total > 0 ? (ramUsed / ram_total) * 100 : 0
15+
const ramUsedGB = (ramUsed / 1024).toFixed(1)
16+
const ramTotalGB = (ram_total / 1024).toFixed(1)
17+
return (
18+
<div style={{
19+
marginBottom: '0.75rem',
20+
padding: '0.75rem',
21+
border: '1px solid var(--hacker-border)',
22+
borderRadius: '0.5rem',
23+
backgroundColor: 'var(--hacker-surface)'
24+
}}>
25+
<div style={{
26+
display: 'flex',
27+
flexWrap: 'wrap',
28+
alignItems: 'center',
29+
gap: '0.4rem',
30+
marginBottom: '0.4rem'
31+
}}>
32+
<span style={{
33+
color: 'var(--hacker-text-secondary)',
34+
fontSize: '0.8rem',
35+
fontWeight: '500'
36+
}}>
37+
CPU Model:
38+
</span>
39+
<span style={{
40+
color: 'var(--hacker-text-secondary)',
41+
fontSize: '0.8rem',
42+
fontWeight: '500'
43+
}}>
44+
<CopyableText className="hacker-badge" style={{ fontSize: '0.8rem', fontWeight: '500', color: 'var(--hacker-text-secondary)' }}>{cpu_model}</CopyableText>
45+
</span>
46+
</div>
47+
{/* CPU Utilization */}
48+
<div className="metric-row mb-2">
49+
<div className="d-flex justify-content-between align-items-center mb-1">
50+
<span style={{
51+
color: 'var(--hacker-text-secondary)',
52+
fontSize: '0.75rem',
53+
fontWeight: '500'
54+
}}>
55+
CPU Utilization
56+
</span>
57+
<span style={{
58+
color: getUtilizationColor(cpu_usage),
59+
fontSize: '0.75rem',
60+
fontWeight: '600'
61+
}}>
62+
<DisplayPercent percent={cpu_usage / 100} />
63+
</span>
64+
</div>
65+
<div style={{
66+
width: '100%',
67+
height: '6px',
68+
backgroundColor: 'var(--hacker-border)',
69+
borderRadius: '3px',
70+
overflow: 'hidden'
71+
}}>
72+
<div style={{
73+
width: `${cpu_usage}%`,
74+
height: '100%',
75+
backgroundColor: getUtilizationColor(cpu_usage),
76+
borderRadius: '3px',
77+
transition: 'width 0.3s ease'
78+
}}></div>
79+
</div>
80+
</div>
81+
{/* RAM Utilization */}
82+
<div className="metric-row mb-2">
83+
<div className="d-flex justify-content-between align-items-center mb-1">
84+
<span style={{
85+
color: 'var(--hacker-text-secondary)',
86+
fontSize: '0.75rem',
87+
fontWeight: '500'
88+
}}>
89+
RAM Utilization
90+
</span>
91+
<span style={{
92+
color: getUtilizationColor(ramPercent),
93+
fontSize: '0.75rem',
94+
fontWeight: '600'
95+
}}>
96+
<DisplayPercent percent={ramPercent / 100} />
97+
</span>
98+
</div>
99+
<div style={{
100+
width: '100%',
101+
height: '6px',
102+
backgroundColor: 'var(--hacker-border)',
103+
borderRadius: '3px',
104+
overflow: 'hidden'
105+
}}>
106+
<div style={{
107+
width: `${ramPercent}%`,
108+
height: '100%',
109+
backgroundColor: getUtilizationColor(ramPercent),
110+
borderRadius: '3px',
111+
transition: 'width 0.3s ease'
112+
}}></div>
113+
</div>
114+
<div style={{ color: 'var(--hacker-text-secondary)', fontSize: '0.75rem', marginTop: '0.1rem' }}>
115+
{ramUsedGB} / {ramTotalGB} GB
116+
</div>
117+
</div>
118+
</div>
119+
)
120+
}
121+
122+
export default InfoCPU

mxstatus/src/components/IP.js renamed to mxstatus/src/components/InfoInterfaces.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22
import PropTypes from 'prop-types'
33
import SingleIP from './SingleIP'
44

5-
const IP = props => {
5+
const InfoInterfaces = props => {
66
return (
77
<div style={{
88
marginBottom: '0.75rem',
@@ -22,7 +22,7 @@ const IP = props => {
2222
fontSize: '0.8rem',
2323
fontWeight: '500'
2424
}}>
25-
Private IP Address:
25+
Interfaces:
2626
</span>
2727
{props.data.map((ip, index) => {
2828
if (ip[0] === 'lo' || ip[0] === 'docker0' || ip[0] === 'tailscale0') {
@@ -39,14 +39,14 @@ const IP = props => {
3939
)
4040
}
4141

42-
IP.propTypes = {
42+
InfoInterfaces.propTypes = {
4343
data: PropTypes.array,
4444
onClick: PropTypes.func
4545
}
4646

47-
IP.defaultProps = {
47+
InfoInterfaces.defaultProps = {
4848
data: [],
4949
onClick: () => { }
5050
}
5151

52-
export default IP
52+
export default InfoInterfaces

‎mxstatus/src/components/MachineCard.js‎

Lines changed: 42 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import React from 'react'
22
import PropTypes from 'prop-types'
33
import { useState } from 'react'
4-
import IP from './IP'
4+
import InfoInterfaces from './InfoInterfaces'
55
import GpuCard from './GpuCard'
66
import UsersLine from './UsersLine'
77
import DisplayPercent from './DisplayPercent'
88
import DisplayRAM from './DisplayRAM'
99
import CopyableText from './CopyableText'
10+
import InfoCPU from './InfoCPU'
1011

1112
const MachineCard = props => {
1213

@@ -179,73 +180,54 @@ const MachineCard = props => {
179180
</div>
180181
</div>
181182

183+
<div className="row">
184+
<div className="col-md-6">
185+
<p className="mb-1">
186+
<span style={{ color: 'var(--hacker-text-secondary)' }}>Last seen:</span>
187+
<CopyableText className="hacker-badge ms-2" onClick={handleInteractiveClick}>
188+
{getTimestamp()}
189+
</CopyableText>
190+
</p>
191+
<p className="mb-1">
192+
<span style={{ color: 'var(--hacker-text-secondary)' }}>Uptime:</span>
193+
<CopyableText className="hacker-badge ms-2" onClick={handleInteractiveClick}>
194+
{props.data.uptime_str}
195+
</CopyableText>
196+
</p>
197+
</div>
198+
<div className="col-md-6">
199+
<p className="mb-1">
200+
<span style={{ color: 'var(--hacker-text-secondary)' }}>Arch:</span>
201+
<CopyableText className="hacker-badge ms-2" onClick={handleInteractiveClick}>
202+
{props.data.architecture}
203+
</CopyableText>
204+
</p>
205+
<p className="mb-1">
206+
<span style={{ color: 'var(--hacker-text-secondary)' }}>System:</span>
207+
<CopyableText className="hacker-badge ms-2" onClick={handleInteractiveClick}>
208+
{props.data.linux_distro}
209+
</CopyableText>
210+
</p>
211+
</div>
212+
</div>
213+
182214
<div className={`details-anim${showDetails ? ' expanded' : ' collapsed'}`}>
183215
<div className="server-details" style={{
184216
borderTop: '1px solid var(--hacker-border)',
185217
paddingTop: '0.75rem',
186218
marginTop: '0.75rem'
187219
}}>
188-
<div className="row mb-2">
189-
<div className="col-md-6">
190-
<p className="mb-1">
191-
<span style={{ color: 'var(--hacker-text-secondary)' }}>Last seen:</span>
192-
<CopyableText className="hacker-badge ms-2" onClick={handleInteractiveClick}>
193-
{getTimestamp()}
194-
</CopyableText>
195-
</p>
196-
<p className="mb-1">
197-
<span style={{ color: 'var(--hacker-text-secondary)' }}>Uptime:</span>
198-
<CopyableText className="hacker-badge ms-2" onClick={handleInteractiveClick}>
199-
{props.data.uptime_str}
200-
</CopyableText>
201-
</p>
202-
<p className="mb-1">
203-
<span style={{ color: 'var(--hacker-text-secondary)' }}>Arch:</span>
204-
<CopyableText className="hacker-badge ms-2" onClick={handleInteractiveClick}>
205-
{props.data.architecture}
206-
</CopyableText>
207-
</p>
208-
</div>
209-
<div className="col-md-6">
210-
<p className="mb-1">
211-
<span style={{ color: 'var(--hacker-text-secondary)' }}>System:</span>
212-
<CopyableText className="hacker-badge ms-2" onClick={handleInteractiveClick}>
213-
{props.data.linux_distro}
214-
</CopyableText>
215-
</p>
216-
<p className="mb-1">
217-
<span style={{ color: 'var(--hacker-text-secondary)' }}>CPU:</span>
218-
<CopyableText className="hacker-badge ms-2" onClick={handleInteractiveClick}>
219-
{props.data.cpu_model}
220-
</CopyableText>
221-
</p>
222-
</div>
223-
</div>
224220

225-
<IP data={props.data.ipv4s} onClick={handleInteractiveClick} />
226-
<UsersLine users_info={props.data.users_info} onClick={handleInteractiveClick} />
227221

228-
<div className="row mt-2">
229-
<div className="col-md-6">
230-
<p className="mb-1">
231-
<span style={{ color: 'var(--hacker-text-secondary)' }}>CPU Util:</span>
232-
<span className="hacker-badge ms-2">
233-
<DisplayPercent percent={props.data.cpu_usage} />
234-
</span>
235-
</p>
236-
</div>
237-
<div className="col-md-6">
238-
<p className="mb-1">
239-
<span style={{ color: 'var(--hacker-text-secondary)' }}>RAM Util:</span>
240-
<span className="hacker-badge ms-2">
241-
<DisplayPercent percent={props.data.ram_usage} />
242-
</span>
243-
<span className="hacker-badge ms-2" style={{ fontSize: '0.65rem' }}>
244-
<DisplayRAM ram={props.data.ram_free} /> / <DisplayRAM ram={props.data.ram_total} />
245-
</span>
246-
</p>
247-
</div>
248-
</div>
222+
<InfoCPU data={{
223+
cpu_model: props.data.cpu_model,
224+
cpu_usage: props.data.cpu_usage,
225+
ram_usage: props.data.ram_usage,
226+
ram_free: props.data.ram_free,
227+
ram_total: props.data.ram_total
228+
}} />
229+
<InfoInterfaces data={props.data.ipv4s} onClick={handleInteractiveClick} />
230+
<UsersLine users_info={props.data.users_info} onClick={handleInteractiveClick} />
249231
</div>
250232
</div>
251233

‎mxstatus/src/components/SingleIP.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,21 @@ const SingleIP = props => {
99
alignItems: 'center',
1010
margin: '0 0.25rem'
1111
}}>
12-
<span style={{
12+
<CopyableText style={{
1313
padding: '0.25rem 0.5rem',
1414
borderRadius: '0.25rem 0 0 0.25rem',
1515
fontSize: '0.75rem',
1616
fontFamily: 'var(--hacker-font-mono)',
1717
color: 'var(--hacker-text-secondary)',
1818
border: '1px solid var(--hacker-border)',
1919
borderRight: 'none',
20-
backgroundColor: 'var(--hacker-surface)'
21-
}}>
20+
backgroundColor: 'var(--hacker-surface)',
21+
userSelect: 'all',
22+
cursor: 'pointer',
23+
transition: 'var(--hacker-transition)'
24+
}} onClick={props.onClick}>
2225
{props.name}
23-
</span>
26+
</CopyableText>
2427
<CopyableText style={{
2528
padding: '0.25rem 0.5rem',
2629
borderRadius: '0 0.25rem 0.25rem 0',

0 commit comments

Comments
 (0)