Skip to content

Commit 0a4de68

Browse files
rbjornstadrbjornstad
committed
feat: add resource utilization display for CPU and memory in Instances and Runs components
1 parent f6823ff commit 0a4de68

File tree

2 files changed

+200
-37
lines changed

2 files changed

+200
-37
lines changed

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

+66-36
Original file line numberDiff line numberDiff line change
@@ -64,11 +64,11 @@
6464
}
6565
}
6666
}
67-
resources {
68-
requests {
69-
cpu
70-
memory
71-
}
67+
utilization {
68+
requested_cpu: requested(resourceType: CPU)
69+
requested_memory: requested(resourceType: MEMORY)
70+
limit_cpu: limit(resourceType: CPU)
71+
limit_memory: limit(resourceType: MEMORY)
7272
}
7373
}
7474
`)
@@ -98,11 +98,15 @@
9898
<div class="resource-list-item">
9999
<div>CPU:</div>
100100
<div class="data">
101-
{#if $data.resources.requests.cpu}
102-
{$data.resources.requests.cpu?.toFixed(2)} cores
103-
{:else}
104-
Not set
105-
{/if}
101+
<code>
102+
{#if $data.resources.requests.cpu}
103+
{$data.resources.requests.cpu?.toFixed(2)} CPUs
104+
{:else if $data.utilization.requested_cpu}
105+
{$data.utilization.requested_cpu?.toFixed(2)} CPUs (default)
106+
{:else}
107+
Not set
108+
{/if}
109+
</code>
106110
</div>
107111
</div>
108112
</li>
@@ -111,16 +115,25 @@
111115
<div class="resource-list-item">
112116
<div>Memory:</div>
113117
<div class="data">
114-
{#if $data.resources.requests.memory}
115-
{prettyBytes($data.resources.requests.memory, {
116-
locale: 'en',
117-
minimumFractionDigits: 2,
118-
maximumFractionDigits: 2,
119-
binary: true
120-
})}
121-
{:else}
122-
Not set
123-
{/if}
118+
<code>
119+
{#if $data.resources.requests.memory}
120+
{prettyBytes($data.resources.requests.memory, {
121+
locale: 'en',
122+
minimumFractionDigits: 2,
123+
maximumFractionDigits: 2,
124+
binary: true
125+
})}
126+
{:else if $data.utilization.requested_memory}
127+
{prettyBytes($data.utilization.requested_memory, {
128+
locale: 'en',
129+
minimumFractionDigits: 2,
130+
maximumFractionDigits: 2,
131+
binary: true
132+
})} (default)
133+
{:else}
134+
Not set
135+
{/if}
136+
</code>
124137
</div>
125138
</div>
126139
</li>
@@ -133,10 +146,15 @@
133146
<div class="resource-list-item">
134147
<div>CPU:</div>
135148
<div class="data">
136-
{#if $data.resources.limits.cpu}{$data.resources.limits.cpu?.toFixed(2)} cores
137-
{:else}
138-
Not set
139-
{/if}
149+
<code>
150+
{#if $data.resources.limits.cpu}
151+
{$data.resources.limits.cpu?.toFixed(2)} CPUs
152+
{:else if $data.utilization.limit_cpu}
153+
{$data.utilization.limit_cpu?.toFixed(2)} CPUs (default)
154+
{:else}
155+
Not set
156+
{/if}
157+
</code>
140158
</div>
141159
</div>
142160
</li>
@@ -145,16 +163,25 @@
145163
<div class="resource-list-item">
146164
<div>Memory:</div>
147165
<div class="data">
148-
{#if $data.resources.limits.memory}
149-
{prettyBytes($data.resources.limits.memory, {
150-
locale: 'en',
151-
minimumFractionDigits: 2,
152-
maximumFractionDigits: 2,
153-
binary: true
154-
})}
155-
{:else}
156-
Not set
157-
{/if}
166+
<code>
167+
{#if $data.resources.limits.memory}
168+
{prettyBytes($data.resources.limits.memory, {
169+
locale: 'en',
170+
minimumFractionDigits: 2,
171+
maximumFractionDigits: 2,
172+
binary: true
173+
})}
174+
{:else if $data.utilization.limit_memory}
175+
{prettyBytes($data.utilization.limit_memory, {
176+
locale: 'en',
177+
minimumFractionDigits: 2,
178+
maximumFractionDigits: 2,
179+
binary: true
180+
})} (default)
181+
{:else}
182+
Not set
183+
{/if}
184+
</code>
158185
</div>
159186
</div>
160187
</li>
@@ -204,7 +231,7 @@
204231
ul {
205232
list-style-type: none;
206233
padding: 0;
207-
margin: 0 0 0 1rem;
234+
margin: 0;
208235
}
209236
210237
li ul {
@@ -218,9 +245,12 @@
218245
}
219246
.resource-list-item {
220247
display: grid;
221-
grid-template-columns: 80px 100px;
248+
grid-template-columns: 1fr 1fr;
222249
}
223250
.data {
224251
text-align: right;
225252
}
253+
code {
254+
font-size: 1rem;
255+
}
226256
</style>

‎src/routes/team/[team]/[env]/job/[job]/Runs.svelte

+134-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
import { fragment, graphql } from '$houdini';
44
import JobRunListItem from '$lib/components/list/JobRunListItem.svelte';
55
import List from '$lib/components/list/List.svelte';
6-
import { BodyShort } from '@nais/ds-svelte-community';
6+
import { BodyShort, Heading } from '@nais/ds-svelte-community';
7+
import prettyBytes from 'pretty-bytes';
78
89
interface Props {
910
job: JobRuns;
@@ -25,6 +26,16 @@
2526
}
2627
}
2728
name
29+
resources {
30+
requests {
31+
cpu
32+
memory
33+
}
34+
limits {
35+
cpu
36+
memory
37+
}
38+
}
2839
2940
runs(first: 20) @list(name: "All_Runs") {
3041
edges {
@@ -51,6 +62,100 @@
5162
);
5263
</script>
5364

65+
<div>
66+
<Heading level="4" size="small">Resources:</Heading>
67+
<ul class="resource-list">
68+
<li>
69+
Requests:
70+
<ul>
71+
<li>
72+
<div class="resource-list-item">
73+
<div>CPU:</div>
74+
<div class="data">
75+
<code>
76+
{#if $data.resources.requests.cpu}
77+
{$data.resources.requests.cpu?.toFixed(2)} CPUs
78+
{:else}
79+
0.2 CPUs (default)
80+
{/if}
81+
</code>
82+
</div>
83+
</div>
84+
</li>
85+
86+
<li>
87+
<div class="resource-list-item">
88+
<div>Memory:</div>
89+
<div class="data">
90+
<code>
91+
{#if $data.resources.requests.memory}
92+
{prettyBytes($data.resources.requests.memory, {
93+
locale: 'en',
94+
minimumFractionDigits: 2,
95+
maximumFractionDigits: 2,
96+
binary: true
97+
})}
98+
{:else}
99+
{prettyBytes(268435456, {
100+
locale: 'en',
101+
minimumFractionDigits: 2,
102+
maximumFractionDigits: 2,
103+
binary: true
104+
})} (default)
105+
{/if}
106+
</code>
107+
</div>
108+
</div>
109+
</li>
110+
</ul>
111+
</li>
112+
<li>
113+
Limits:
114+
<ul>
115+
<li>
116+
<div class="resource-list-item">
117+
<div>CPU:</div>
118+
<div class="data">
119+
<code>
120+
{#if $data.resources.limits.cpu}
121+
{$data.resources.limits.cpu?.toFixed(2)} CPUs
122+
{:else}
123+
0.5 CPUs (default)
124+
{/if}
125+
</code>
126+
</div>
127+
</div>
128+
</li>
129+
130+
<li>
131+
<div class="resource-list-item">
132+
<div>Memory:</div>
133+
<div class="data">
134+
<code>
135+
{#if $data.resources.limits.memory}
136+
{prettyBytes($data.resources.limits.memory, {
137+
locale: 'en',
138+
minimumFractionDigits: 2,
139+
maximumFractionDigits: 2,
140+
binary: true
141+
})}
142+
{:else}
143+
{prettyBytes(536870912, {
144+
locale: 'en',
145+
minimumFractionDigits: 2,
146+
maximumFractionDigits: 2,
147+
binary: true
148+
})} (default)
149+
{/if}
150+
</code>
151+
</div>
152+
</div>
153+
</li>
154+
</ul>
155+
</li>
156+
</ul>
157+
</div>
158+
54159
{#if $data.runs.edges.length === 0}
55160
<BodyShort>No runs found</BodyShort>
56161
{:else}
@@ -64,3 +169,31 @@
64169
{/each}
65170
</List>
66171
{/if}
172+
173+
<style>
174+
ul {
175+
list-style-type: none;
176+
padding: 0;
177+
margin: 0;
178+
}
179+
180+
li ul {
181+
margin-left: 1rem;
182+
}
183+
184+
.resource-list {
185+
display: grid;
186+
grid-template-columns: 1fr 1fr;
187+
gap: 1rem;
188+
}
189+
.resource-list-item {
190+
display: grid;
191+
grid-template-columns: 1fr 1fr;
192+
}
193+
.data {
194+
text-align: right;
195+
}
196+
code {
197+
font-size: 1rem;
198+
}
199+
</style>

0 commit comments

Comments
 (0)