Skip to content

Commit 385b63f

Browse files
andnordaandnorda
committed
instance utilization
1 parent 6bd03c9 commit 385b63f

File tree

6 files changed

+121
-118
lines changed

6 files changed

+121
-118
lines changed

‎src/lib/components/list/AppInstanceListItem.svelte

+60-15
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
<script lang="ts">
2+
import CpuIcon from '$lib/icons/CpuIcon.svelte';
3+
import MemoryIcon from '$lib/icons/MemoryIcon.svelte';
24
import Time from '$lib/Time.svelte';
3-
import { Detail } from '@nais/ds-svelte-community';
45
import { QuestionmarkIcon } from '@nais/ds-svelte-community/icons';
6+
import prettyBytes from 'pretty-bytes';
57
import ErrorIcon from '../../icons/ErrorIcon.svelte';
68
import IconLabel from '../IconLabel.svelte';
79
import RunningIndicator from '../RunningIndicator.svelte';
@@ -10,7 +12,8 @@
1012
1113
const {
1214
instance,
13-
urlBase
15+
urlBase,
16+
utilization
1417
}: {
1518
instance: {
1619
name: string;
@@ -20,15 +23,25 @@
2023
message: string;
2124
};
2225
created: Date;
26+
cpu: { current: number };
27+
memory: { current: number };
2328
};
2429
urlBase: string;
30+
utilization: {
31+
requested_cpu: number;
32+
requested_memory: number;
33+
};
2534
} = $props();
2635
</script>
2736

2837
<ListItem>
2938
<IconLabel size="large" href="{urlBase}{instance.name}" label={instance.name} level="4">
3039
{#snippet description()}
31-
Created <Time time={instance.created} distance={true} />
40+
Created <Time time={instance.created} distance={true} />, {instance.status
41+
.message}{#if instance.restarts > 0}, {instance.restarts} restart{instance.restarts === 1
42+
? ''
43+
: 's'}
44+
{/if}
3245
{/snippet}
3346
{#snippet icon()}
3447
{#if instance.status.state === 'RUNNING'}
@@ -46,17 +59,49 @@
4659
{/if}
4760
{/snippet}
4861
</IconLabel>
49-
<div class="right">
50-
<Detail>{instance.restarts + ' restart' + (instance.restarts === 1 ? '' : 's')}</Detail>
51-
<Detail>{instance.status.state}: {instance.status.message}</Detail>
62+
<div>
63+
<div>
64+
<TooltipAlignHack
65+
content={`Memory usage compared to the requested ${prettyBytes(
66+
utilization.requested_memory,
67+
{
68+
locale: 'en',
69+
minimumFractionDigits: 2,
70+
maximumFractionDigits: 2,
71+
binary: true
72+
}
73+
)}.`}
74+
>
75+
<IconLabel
76+
size="small"
77+
icon={MemoryIcon}
78+
label={`${prettyBytes(instance.memory.current, {
79+
locale: 'en',
80+
minimumFractionDigits: 2,
81+
maximumFractionDigits: 2,
82+
binary: true
83+
})} (${((instance.memory.current / utilization.requested_memory) * 100).toLocaleString(
84+
'en',
85+
{ maximumSignificantDigits: 3 }
86+
)}%)`}
87+
/>
88+
</TooltipAlignHack>
89+
</div>
90+
<div>
91+
<TooltipAlignHack
92+
content={`CPU usage compared to the requested ${utilization.requested_cpu} CPUs.`}
93+
>
94+
<IconLabel
95+
size="small"
96+
icon={CpuIcon}
97+
label={`${instance.cpu.current.toLocaleString('en', {
98+
maximumSignificantDigits: 3
99+
})} CPUs (${((instance.cpu.current / utilization.requested_cpu) * 100).toLocaleString(
100+
'en',
101+
{ maximumSignificantDigits: 3 }
102+
)}%)`}
103+
/>
104+
</TooltipAlignHack>
105+
</div>
52106
</div>
53107
</ListItem>
54-
55-
<style>
56-
.right {
57-
display: flex;
58-
flex-direction: column;
59-
align-items: end;
60-
gap: var(--a-spacing-05);
61-
}
62-
</style>

‎src/lib/components/list/List.stories.svelte

+49-12
Original file line numberDiff line numberDiff line change
@@ -230,62 +230,92 @@
230230
{
231231
name: 'sparkiv-subsumsjon-77c799fccd-2gmhx',
232232
restarts: 0,
233-
status: { state: 'FAILING', message: 'Failing' },
234-
created: new Date('2025-02-12T09:59:36Z')
233+
status: { state: 'FAILING', message: 'CrashLoopBackOff' },
234+
created: new Date('2025-02-12T09:59:36Z'),
235+
236+
cpu: { current: 0.0543 },
237+
memory: { current: 234 }
235238
},
236239
{
237240
name: 'sparkiv-subsumsjon-77c799fccd-2rdm5',
238241
restarts: 0,
239242
status: { state: 'RUNNING', message: 'Running' },
240-
created: new Date('2025-02-12T09:58:04Z')
243+
created: new Date('2025-02-12T09:58:04Z'),
244+
245+
cpu: { current: 0.0543 },
246+
memory: { current: 234 }
241247
},
242248
{
243249
name: 'sparkiv-subsumsjon-77c799fccd-4k47z',
244250
restarts: 0,
245251
status: { state: 'UNKNOWN', message: 'Unknown' },
246-
created: new Date('2025-02-12T15:34:13Z')
252+
created: new Date('2025-02-12T15:34:13Z'),
253+
254+
cpu: { current: 0.0543 },
255+
memory: { current: 234 }
247256
},
248257
{
249258
name: 'sparkiv-subsumsjon-77c799fccd-5qg2r',
250259
restarts: 0,
251260
status: { state: 'RUNNING', message: 'Running' },
252-
created: new Date('2025-02-12T16:23:28Z')
261+
created: new Date('2025-02-12T16:23:28Z'),
262+
263+
cpu: { current: 0.0543 },
264+
memory: { current: 234 }
253265
},
254266
{
255267
name: 'sparkiv-subsumsjon-77c799fccd-bpxtx',
256268
restarts: 0,
257269
status: { state: 'RUNNING', message: 'Running' },
258-
created: new Date('2025-02-12T15:09:46Z')
270+
created: new Date('2025-02-12T15:09:46Z'),
271+
272+
cpu: { current: 0.0543 },
273+
memory: { current: 234 }
259274
},
260275
{
261276
name: 'sparkiv-subsumsjon-77c799fccd-fg4c6',
262277
restarts: 0,
263278
status: { state: 'RUNNING', message: 'Running' },
264-
created: new Date('2025-02-12T12:14:10Z')
279+
created: new Date('2025-02-12T12:14:10Z'),
280+
281+
cpu: { current: 0.0543 },
282+
memory: { current: 234 }
265283
},
266284
{
267285
name: 'sparkiv-subsumsjon-77c799fccd-jnzb4',
268286
restarts: 0,
269287
status: { state: 'RUNNING', message: 'Running' },
270-
created: new Date('2025-02-12T16:06:57Z')
288+
created: new Date('2025-02-12T16:06:57Z'),
289+
290+
cpu: { current: 0.0543 },
291+
memory: { current: 234 }
271292
},
272293
{
273294
name: 'sparkiv-subsumsjon-77c799fccd-km9p5',
274295
restarts: 0,
275296
status: { state: 'RUNNING', message: 'Running' },
276-
created: new Date('2025-02-12T15:30:13Z')
297+
created: new Date('2025-02-12T15:30:13Z'),
298+
299+
cpu: { current: 0.0543 },
300+
memory: { current: 234 }
277301
},
278302
{
279303
name: 'sparkiv-subsumsjon-77c799fccd-mfsgp',
280304
restarts: 0,
281305
status: { state: 'RUNNING', message: 'Running' },
282-
created: new Date('2025-02-12T13:35:53Z')
306+
created: new Date('2025-02-12T13:35:53Z'),
307+
308+
cpu: { current: 0.0543 },
309+
memory: { current: 234 }
283310
},
284311
{
285312
name: 'sparkiv-subsumsjon-77c799fccd-xb4st',
286313
restarts: 0,
287314
status: { state: 'RUNNING', message: 'Running' },
288-
created: new Date('2025-02-12T12:31:14Z')
315+
created: new Date('2025-02-12T12:31:14Z'),
316+
317+
cpu: { current: 0.0543 },
318+
memory: { current: 234 }
289319
}
290320
];
291321
</script>
@@ -309,7 +339,14 @@
309339
<Story name="App instances">
310340
<List title="{instances.length} application instances">
311341
{#each instances as instance (instance)}
312-
<AppInstanceListItem {instance} urlBase="/" />
342+
<AppInstanceListItem
343+
{instance}
344+
urlBase="/"
345+
utilization={{
346+
requested_cpu: 0.32,
347+
requested_memory: 234
348+
}}
349+
/>
313350
{/each}
314351
</List>
315352
</Story>

‎src/routes/team/[team]/[env]/app/[app]/+page.svelte

-3
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@
1818
import type { PageProps } from './$houdini';
1919
import Ingresses from './Ingresses.svelte';
2020
import Instances from './Instances.svelte';
21-
import Utilization from './Utilization.svelte';
2221
2322
let { data }: PageProps = $props();
2423
let { App, teamSlug, viewerIsMember } = $derived(data);
@@ -121,10 +120,8 @@
121120
</div>
122121
</div>
123122
<div class="sidebar">
124-
<!-- <Status {app} /> -->
125123
<AggregatedCostForWorkload workload={app.name} {environment} {teamSlug} />
126124
<Image workload={app} />
127-
<Utilization {app} />
128125
<WorkloadDeploy workload={app} />
129126
{#if viewerIsMember}
130127
<Secrets workload={app.name} {environment} {teamSlug} />

‎src/routes/team/[team]/[env]/app/[app]/Instances.svelte

+11-6
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,12 @@
6161
message
6262
}
6363
created
64+
memory: instanceUtilization(resourceType: MEMORY) {
65+
current
66+
}
67+
cpu: instanceUtilization(resourceType: CPU) {
68+
current
69+
}
6470
}
6571
}
6672
}
@@ -116,22 +122,20 @@
116122
<div>Memory:</div>
117123
<div class="data">
118124
<code>
119-
{#if $data.resources.requests.memory}
125+
{#if $data.resources.requests.memory !== null}
120126
{prettyBytes($data.resources.requests.memory, {
121127
locale: 'en',
122128
minimumFractionDigits: 2,
123129
maximumFractionDigits: 2,
124130
binary: true
125131
})}
126-
{:else if $data.utilization.requested_memory}
132+
{:else}
127133
{prettyBytes($data.utilization.requested_memory, {
128134
locale: 'en',
129135
minimumFractionDigits: 2,
130136
maximumFractionDigits: 2,
131137
binary: true
132138
})} (default)
133-
{:else}
134-
Not set
135139
{/if}
136140
</code>
137141
</div>
@@ -148,9 +152,9 @@
148152
<div class="data">
149153
<code>
150154
{#if $data.resources.limits.cpu}
151-
{$data.resources.limits.cpu?.toFixed(2)} CPUs
155+
{$data.resources.limits.cpu.toFixed(2)} CPUs
152156
{:else if $data.utilization.limit_cpu}
153-
{$data.utilization.limit_cpu?.toFixed(2)} CPUs (default)
157+
{$data.utilization.limit_cpu.toFixed(2)} CPUs (default)
154158
{:else}
155159
Not set
156160
{/if}
@@ -222,6 +226,7 @@
222226
{instance}
223227
urlBase="/team/{$data.team.slug}/{$data.teamEnvironment.environment
224228
.name}/app/{$data.name}/logs?name="
229+
utilization={$data.utilization}
225230
/>
226231
{/each}
227232
</List>

‎src/routes/team/[team]/[env]/app/[app]/Utilization.svelte

-81
This file was deleted.

‎src/routes/team/[team]/[env]/app/[app]/utilization/+page.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777
(v) =>
7878
`<div style="display: flex; align-items: center; gap: 0.25rem;">${dot(
7979
v.color?.toString() ?? ''
80-
)}${v.seriesName}:</div><div style="text-align: right;">${valueFormatter(
80+
)}${v.seriesName}</div><div style="text-align: right;">${valueFormatter(
8181
(Array.isArray(v.value) ? v.value[1] : null) as number
8282
)}</div>`
8383
)

0 commit comments

Comments
 (0)