Skip to content

Commit 0b75a1b

Browse files
deep1401deep1401
authored
Merge pull request transformerlab#400 from transformerlab/add/macmon-stats
Add MacMon Specific Metrics
2 parents 439a035 + d6bb60b commit 0b75a1b

File tree

1 file changed

+128
-56
lines changed

1 file changed

+128
-56
lines changed

‎src/renderer/components/Computer.tsx‎

Lines changed: 128 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import {
3131
import { SiNvidia } from 'react-icons/si';
3232

3333
import { BsGpuCard } from 'react-icons/bs';
34-
import { FaComputer, FaW } from 'react-icons/fa6';
34+
import { FaComputer, FaW, FaApple } from 'react-icons/fa6';
3535
import { FaWindows } from 'react-icons/fa6';
3636
import { FaLinux } from 'react-icons/fa6';
3737

@@ -46,7 +46,7 @@ import { FaPython } from 'react-icons/fa';
4646

4747
function ComputerCard({ children, title, description = '', chip = '', icon }) {
4848
return (
49-
<Card variant="soft" sx={{ maxHeight: '400px', overflowY: 'auto' }}>
49+
<Card variant="soft" sx={{ maxHeight: '500px', overflowY: 'auto' }}>
5050
<CardContent>
5151
<Typography level="title-lg" startDecorator={icon}>
5252
{title}
@@ -141,61 +141,133 @@ export default function Computer() {
141141
<StatRow title="Cores" value={server?.cpu_count} />
142142
</ComputerCard>
143143
</Grid>
144-
<Grid xs={4}>
145-
<ComputerCard
146-
icon={<BsGpuCard />}
147-
title={'GPU Specs (' + server.gpu?.length + ')'}
148-
image={undefined}
149-
>
150-
{server.gpu?.map((g, i) => {
151-
return (
152-
<Box mb={2}>
153-
<Typography level="title-md">GPU # {i}</Typography>
154-
{g.name.includes('NVIDIA') ? (
155-
<SiNvidia color="#76B900" />
156-
) : (
157-
'🔥'
158-
)}
159-
&nbsp;
160-
{g.name}
161-
<StatRow
162-
title="Total VRAM"
163-
value={formatBytes(g?.total_memory)}
164-
/>
165-
<StatRow
166-
title="Available"
167-
value={formatBytes(g?.free_memory)}
168-
/>
169-
{g.total_memory !== 'n/a' && (
170-
<>
171-
<StatRow
172-
title="Used"
173-
value={
174-
<>
175-
{Math.round(
176-
(g?.used_memory / g?.total_memory) *
177-
100,
178-
)}
179-
%
180-
<LinearProgress
181-
determinate
182-
value={
144+
145+
{/* Mac metrics card replaces GPU specs */}
146+
{server.mac_metrics ? (
147+
<Grid xs={4}>
148+
<ComputerCard
149+
icon={<FaApple />}
150+
title="Mac Monitoring Metrics"
151+
sx={{ maxHeight: 'none', overflowY: 'visible' }}
152+
>
153+
<Typography level="title-sm" mb={1}>
154+
Temperature
155+
</Typography>
156+
<StatRow
157+
title="CPU Temperature"
158+
value={`${server.mac_metrics.temp?.cpu_temp_avg.toFixed(2)}°C`}
159+
/>
160+
<StatRow
161+
title="GPU Temperature"
162+
value={`${server.mac_metrics.temp?.gpu_temp_avg.toFixed(2)}°C`}
163+
/>
164+
165+
<Typography level="title-sm" mt={2} mb={1}>
166+
Power Consumption
167+
</Typography>
168+
<StatRow
169+
title="Total Power"
170+
value={`${server.mac_metrics.all_power.toFixed(2)} W`}
171+
/>
172+
<StatRow
173+
title="CPU Power"
174+
value={`${server.mac_metrics.cpu_power.toFixed(2)} W`}
175+
/>
176+
<StatRow
177+
title="GPU Power"
178+
value={`${server.mac_metrics.gpu_power.toFixed(2)} W`}
179+
/>
180+
<StatRow
181+
title="RAM Power"
182+
value={`${server.mac_metrics.ram_power.toFixed(2)} W`}
183+
/>
184+
<StatRow
185+
title="System Power"
186+
value={`${server.mac_metrics.sys_power.toFixed(2)} W`}
187+
/>
188+
189+
<Typography level="title-sm" mt={2} mb={1}>
190+
Usage
191+
</Typography>
192+
{server.mac_metrics.ecpu_usage && (
193+
<StatRow
194+
title="ECPU Usage"
195+
value={`${server.mac_metrics.ecpu_usage[0]} MHz, ${(server.mac_metrics.ecpu_usage[1] * 100).toFixed(2)}%`}
196+
/>
197+
)}
198+
{server.mac_metrics.pcpu_usage && (
199+
<StatRow
200+
title="PCPU Usage"
201+
value={`${server.mac_metrics.pcpu_usage[0]} MHz, ${(server.mac_metrics.pcpu_usage[1] * 100).toFixed(2)}%`}
202+
/>
203+
)}
204+
{server.mac_metrics.gpu_usage && (
205+
<StatRow
206+
title="GPU Usage"
207+
value={`${server.mac_metrics.gpu_usage[0]} MHz, ${(server.mac_metrics.gpu_usage[1] * 100).toFixed(2)}%`}
208+
/>
209+
)}
210+
</ComputerCard>
211+
</Grid>
212+
) : (
213+
<Grid xs={4}>
214+
<ComputerCard
215+
icon={<BsGpuCard />}
216+
title={'GPU Specs (' + server.gpu?.length + ')'}
217+
image={undefined}
218+
>
219+
{server.gpu?.map((g, i) => {
220+
return (
221+
<Box mb={2}>
222+
<Typography level="title-md">
223+
GPU # {i}
224+
</Typography>
225+
{g.name.includes('NVIDIA') ? (
226+
<SiNvidia color="#76B900" />
227+
) : (
228+
'🔥'
229+
)}
230+
&nbsp;
231+
{g.name}
232+
<StatRow
233+
title="Total VRAM"
234+
value={formatBytes(g?.total_memory)}
235+
/>
236+
<StatRow
237+
title="Available"
238+
value={formatBytes(g?.free_memory)}
239+
/>
240+
{g.total_memory !== 'n/a' && (
241+
<>
242+
<StatRow
243+
title="Used"
244+
value={
245+
<>
246+
{Math.round(
183247
(g?.used_memory / g?.total_memory) *
184-
100
185-
}
186-
variant="solid"
187-
sx={{ minWidth: '50px' }}
188-
/>
189-
</>
190-
}
191-
/>
192-
</>
193-
)}
194-
</Box>
195-
);
196-
})}
197-
</ComputerCard>
198-
</Grid>
248+
100,
249+
)}
250+
%
251+
<LinearProgress
252+
determinate
253+
value={
254+
(g?.used_memory / g?.total_memory) *
255+
100
256+
}
257+
variant="solid"
258+
sx={{ minWidth: '50px' }}
259+
/>
260+
</>
261+
}
262+
/>
263+
</>
264+
)}
265+
</Box>
266+
);
267+
})}
268+
</ComputerCard>
269+
</Grid>
270+
)}
199271
<Grid xs={3}>
200272
<ComputerCard icon={<ZapIcon />} title="Acceleration">
201273
<StatRow

0 commit comments

Comments
 (0)