Skip to content

Commit 416eee1

Browse files
rbjornstadrbjornstad
committed
utilization2 -> utilization
1 parent dd26897 commit 416eee1

File tree

6 files changed

+80
-435
lines changed

6 files changed

+80
-435
lines changed

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

+2
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,12 @@ query ResourceUtilizationForApp(
1818
cpu_series: series(input: { start: $start, end: $end, resourceType: CPU }) {
1919
timestamp
2020
value
21+
instance
2122
}
2223
memory_series: series(input: { start: $start, end: $end, resourceType: MEMORY }) {
2324
timestamp
2425
value
26+
instance
2527
}
2628
}
2729
}

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

+64-42
Original file line numberDiff line numberDiff line change
@@ -26,21 +26,32 @@
2626
type resourceUsage = {
2727
readonly timestamp: Date;
2828
readonly value: number;
29+
readonly instance: string;
2930
}[];
3031
3132
const interval = $derived(page.url.searchParams.get('interval') ?? '7d');
3233
34+
const visualizationColors: string[] = [
35+
'#FFC166',
36+
'#99DEAD',
37+
'#CCE1FF',
38+
'#C0B2D2',
39+
'#66CBEC',
40+
'#99C4DD'
41+
];
42+
3343
function options(
3444
data: resourceUsage,
3545
request: number,
3646
limit?: number,
37-
color: string = '#000000',
3847
valueFormatter: (value: number) => string = (value: number) =>
3948
value == null ? '-' : value.toLocaleString('en-GB', { maximumFractionDigits: 4 })
4049
): EChartsOption {
4150
const safeData = data ?? [];
4251
43-
return {
52+
const uniqueTimestamps = Array.from(new Set(safeData.map((d) => d.timestamp.getTime())));
53+
54+
const opts = {
4455
animation: false,
4556
tooltip: {
4657
trigger: 'axis',
@@ -49,18 +60,27 @@
4960
`<div style="height: 8px; width: 8px; border-radius: 50%; background-color: ${color};"></div>`;
5061
const div = document.createElement('div');
5162
52-
const [usage, request, limit] = value;
53-
if (Array.isArray(usage.value) && Array.isArray(request.value)) {
54-
div.innerHTML = `
55-
<div>${format(usage.value.at(0) as number, 'dd/MM/yyyy HH:mm')}</div>
63+
div.innerHTML = `
64+
<div>${format(
65+
Array.isArray(value) && Array.isArray(value[0]?.value)
66+
? (value[0].value[0] as number)
67+
: 0,
68+
'dd/MM/yyyy HH:mm'
69+
)}</div>
5670
<hr style="border: none; height: 1px; background-color: var(--a-border-subtle);" />
5771
<div style="display: grid; grid-template-columns: auto auto; column-gap: 0.5rem;">
58-
<div style="display: flex; align-items: center; gap: 0.25rem;">${dot(color)}${usage.seriesName}:</div><div style="text-align: right;">${valueFormatter(usage.value.at(1) as number)}</div>
59-
<div style="display: flex; align-items: center; gap: 0.25rem;">${dot(requestColor)}${request.seriesName}:</div><div style="text-align: right;">${valueFormatter(request.value.at(1) as number)}</div>
60-
${Array.isArray(limit?.value) ? `<div style="display: flex; align-items: center; gap: 0.25rem;">${dot(limitColor)}${limit.seriesName}:</div><div style="text-align: right;">${valueFormatter(limit.value.at(1) as number)}</div>` : ''}
72+
${value
73+
.map(
74+
(v) =>
75+
`<div style="display: flex; align-items: center; gap: 0.25rem;">${dot(
76+
v.color?.toString() ?? ''
77+
)}${v.seriesName}:</div><div style="text-align: right;">${valueFormatter(
78+
(Array.isArray(v.value) ? v.value[1] : null) as number
79+
)}</div>`
80+
)
81+
.join('')}
6182
</div>
6283
`;
63-
}
6484
return div;
6585
},
6686
axisPointer: {
@@ -80,18 +100,20 @@
80100
}
81101
},
82102
series: [
83-
{
84-
name: 'Usage',
103+
...Array.from(new Set(safeData.map((d) => d.instance))).map((instance, index) => ({
104+
name: `Usage - ${instance}`,
85105
type: 'line',
86-
data: safeData.map((d) => [d.timestamp.getTime(), d.value]),
106+
data: safeData
107+
.filter((d) => d.instance === instance)
108+
.map((d) => [d.timestamp.getTime(), d.value]),
87109
showSymbol: false,
88-
color,
110+
color: visualizationColors[index % visualizationColors.length],
89111
areaStyle: {
90112
opacity: 0.2
91113
}
92-
},
114+
})),
93115
{
94-
data: safeData.map((d) => [d.timestamp.getTime(), request]),
116+
data: uniqueTimestamps.map((timestamp) => [timestamp, request]),
95117
type: 'line',
96118
name: 'Requested',
97119
showSymbol: false,
@@ -108,35 +130,33 @@
108130
]
109131
}
110132
},
111-
...(limit
112-
? [
113-
{
114-
data: safeData.map((d) => [d.timestamp.getTime(), limit]),
115-
type: 'line',
116-
name: 'Limit',
117-
showSymbol: false,
118-
color: limitColor,
119-
lineStyle: { color: limitColor },
120-
markLine: {
121-
symbol: 'none',
122-
data: [
123-
{
124-
yAxis: limit,
125-
label: { formatter: 'Limit', position: 'end', color: limitColor },
126-
lineStyle: { type: 'solid', color: 'transparent' }
127-
}
128-
]
129-
}
133+
limit
134+
? {
135+
data: uniqueTimestamps.map((timestamp) => [timestamp, limit]),
136+
type: 'line',
137+
name: 'Limit',
138+
showSymbol: false,
139+
color: limitColor,
140+
lineStyle: { color: limitColor },
141+
markLine: {
142+
symbol: 'none',
143+
data: [
144+
{
145+
yAxis: limit,
146+
label: { formatter: 'Limit', position: 'end', color: limitColor },
147+
lineStyle: { type: 'solid', color: 'transparent' }
148+
}
149+
]
130150
}
131-
]
132-
: [])
151+
}
152+
: null
133153
]
134154
} as EChartsOption;
155+
156+
return opts;
135157
}
136158
137159
const limitColor = '#DE2E2E';
138-
const usageMemColor = '#8269A2';
139-
const usageCPUColor = '#FF9100';
140160
const requestColor = '#3386E0';
141161
</script>
142162

@@ -203,11 +223,14 @@
203223
<EChart
204224
options={options(
205225
utilization.memory_series.map((d) => {
206-
return { timestamp: d.timestamp, value: d.value / 1024 / 1024 / 1024 };
226+
return {
227+
timestamp: d.timestamp,
228+
value: d.value / 1024 / 1024 / 1024,
229+
instance: d.instance
230+
};
207231
}),
208232
utilization.requested_memory / 1024 / 1024 / 1024,
209233
utilization.limit_memory ? utilization.limit_memory / 1024 / 1024 / 1024 : undefined,
210-
usageMemColor,
211234
(value) =>
212235
value == null
213236
? '-'
@@ -260,7 +283,6 @@
260283
utilization.cpu_series,
261284
utilization.requested_cpu,
262285
utilization.limit_cpu ? utilization.limit_cpu : undefined,
263-
usageCPUColor,
264286
(value: number) =>
265287
value == null
266288
? '-'

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

+14-13
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,26 @@
11
import { load_ResourceUtilizationForApp } from '$houdini';
22
import type { PageLoad } from './$houdini';
33

4-
export const ssr = false;
5-
export const load: PageLoad = async (event) => {
6-
const interval = event.url.searchParams.get('interval');
7-
const end = new Date(Date.now());
8-
let start = new Date(Date.now() - 7 * 24 * 1000 * 60 * 60);
4+
function getStart(interval: string | null) {
95
switch (interval) {
106
case '1h':
11-
start = new Date(Date.now() - 1000 * 60 * 60);
12-
break;
7+
return new Date(Date.now() - 1000 * 60 * 60);
138
case '6h':
14-
start = new Date(Date.now() - 6 * 1000 * 60 * 60);
15-
break;
9+
return new Date(Date.now() - 6 * 1000 * 60 * 60);
1610
case '1d':
17-
start = new Date(Date.now() - 24 * 1000 * 60 * 60);
18-
break;
11+
return new Date(Date.now() - 24 * 1000 * 60 * 60);
1912
case '30d':
20-
start = new Date(Date.now() - 30 * 24 * 1000 * 60 * 60);
21-
break;
13+
return new Date(Date.now() - 30 * 24 * 1000 * 60 * 60);
14+
default:
15+
return new Date(Date.now() - 7 * 24 * 1000 * 60 * 60);
2216
}
17+
}
18+
19+
export const ssr = false;
20+
export const load: PageLoad = async (event) => {
21+
const interval = event.url.searchParams.get('interval');
22+
const end = new Date(Date.now());
23+
const start = getStart(interval);
2324

2425
return {
2526
interval,

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

-32
This file was deleted.

0 commit comments

Comments
 (0)