Skip to content

Commit 33bd06a

Browse files
committed
update
1 parent 4c17b11 commit 33bd06a

File tree

4 files changed

+25
-14
lines changed

4 files changed

+25
-14
lines changed

dashboard2/src/components/AppArea.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,9 @@ const NoDeviceLabel = () => fabricate('Text')
2828
const AppCardList = () => fabricate('Row')
2929
.setStyles({
3030
flexWrap: 'wrap',
31-
padding: '15px',
31+
padding: '0px 15px',
3232
})
33+
.setNarrowStyles({ padding: '0px' })
3334
.onUpdate((el, state) => {
3435
el.setChildren(state.selectedDeviceApps.map((p) => AppCard({ app: p })));
3536
}, [fabricate.StateKeys.Created, 'selectedDeviceApps']);

dashboard2/src/components/AppCard.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const AppControls = ({ app }: { app: DeviceApp }) => fabricate('Column')
2222

2323
})
2424
.setChildren([
25-
fabricate('Text').setText('Controls here'),
25+
// fabricate('Text').setText('Controls here'),
2626
]);
2727

2828
/**

dashboard2/src/components/DeviceMetrics.ts

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,15 @@ declare const fabricate: Fabricate<AppState>;
1010

1111
/** Plot point label offset */
1212
const LABEL_OFFSET = 3;
13-
1413
/** Graph width based on length of a day */
1514
const GRAPH_WIDTH = Math.round(1440 / BUCKET_SIZE);
15+
/** Map of friendly metric names */
16+
const METRIC_NAME_MAP = {
17+
cpu: 'CPU',
18+
memoryPerc: 'Memory (%)',
19+
tempRaw: 'Temperature',
20+
freqPerc: 'CPU Frequency (%)',
21+
};
1622

1723
/**
1824
* NoDeviceLabel component.
@@ -72,9 +78,9 @@ const MetricGraph = ({ name } : { name: MetricName }) => {
7278
ctx.fillRect(0, 0, width, height);
7379

7480
if (!buckets.length) {
75-
ctx.font = '18px Arial';
81+
ctx.font = '12px Arial';
7682
ctx.fillStyle = 'white';
77-
ctx.fillText('No data', 15, 15);
83+
ctx.fillText('No data', 25, 25);
7884
return;
7985
}
8086

@@ -111,18 +117,22 @@ const MetricGraph = ({ name } : { name: MetricName }) => {
111117
};
112118

113119
return fabricate('div')
114-
.setStyles(() => ({ width: '100%', height: '100%' }))
120+
.setStyles(() => ({
121+
width: '100%',
122+
height: '100%',
123+
overflow: 'hidden',
124+
}))
115125
.setChildren([canvas as unknown as FabricateComponent<AppState>])
116126
.onUpdate(async (el, state, keys) => {
127+
canvas.width = el.offsetWidth - 1;
128+
canvas.height = el.offsetHeight - 1;
129+
117130
if (keys.includes(fabricate.StateKeys.Created)) {
118131
fetchMetric(state, name);
119132
return;
120133
}
121134

122135
if (keys.includes(dataKey)) {
123-
canvas.width = el.offsetWidth - 1;
124-
canvas.height = el.offsetHeight;
125-
126136
draw(state);
127137
}
128138
}, [fabricate.StateKeys.Created, dataKey]);
@@ -151,12 +161,12 @@ const MetricContainer = ({ name } : { name: MetricName }) => fabricate('Column')
151161
.setStyles(({ fonts, palette }) => ({
152162
color: 'white',
153163
fontSize: '0.9rem',
154-
fontFamily: fonts.code,
155-
margin: '5px 0px 0px 0px',
156-
padding: '0px 5px',
164+
fontFamily: fonts.body,
165+
margin: '0px',
166+
padding: '5px',
157167
borderBottom: `solid 2px ${palette.grey6}`,
158168
}))
159-
.setText(name),
169+
.setText(METRIC_NAME_MAP[name]),
160170
MetricGraph({ name }),
161171
]);
162172

dashboard2/src/components/StatRow.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ const StatRow = ({ device }: { device: Device }) => {
148148
}),
149149
StatView({
150150
iconSrc: 'assets/images/uptime.png',
151-
text: `${uptimeDays || '-'} days`,
151+
text: `${typeof uptimeDays === 'undefined' ? '-' : uptimeDays} days`,
152152
fontFamily: Theme.fonts.body,
153153
}),
154154
Toolbar({ device }),

0 commit comments

Comments
 (0)