Skip to content

Commit 1c8713c

Browse files
goranbsgoranbs
authored
Merge pull request #158 from DataCloud-project/bug-156
Bug 156
2 parents dd95a94 + e3000a9 commit 1c8713c

File tree

3 files changed

+190
-84
lines changed

3 files changed

+190
-84
lines changed

‎frontend/src/routes/projects/analytics/[prediction]/+page.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,9 @@
6767
} = {};
6868
const metrics = await getMetricsResponse(dryRunId);
6969
const result = await getMetricsUsageUtils(metrics);
70-
cpuData = result.cpuData;
70+
cpuData = result.cumulativeCpuData;
7171
memoryData = result.memoryData;
72-
networkDataCombined = result.networkDataCombined;
72+
networkDataCombined = result.cumulativeNetworkData;
7373
allStepNames = result.allStepNames;
7474
const pipelineMetricsAnalytics: MetricsAnalytics = await getMetricsAnalyticsUtils(
7575
allStepNames,

‎frontend/src/routes/projects/dryruns/[dry_run]/[resource]/+page.svelte

Lines changed: 111 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script lang="ts">
22
import { onMount } from 'svelte';
33
import { ProgressBar, CodeBlock } from '@skeletonlabs/skeleton';
4-
import { ZoomInIcon } from 'svelte-feather-icons';
4+
import { AlertTriangleIcon, ZoomInIcon } from 'svelte-feather-icons';
55
import { filesize } from 'filesize';
66
import getDryRunMetricsQuery from '$queries/get_dry_run_metrics.js';
77
import getProjectQuery from '$queries/get_project';
@@ -36,9 +36,13 @@
3636
let selectedProject: { name: string; id: string };
3737
let logs: { [x: string]: string } = {};
3838
39-
let cpuData: { [key: string]: MetricsWithTimeStamps } = {};
39+
let cumulativeCpuData: { [key: string]: MetricsWithTimeStamps } = {};
40+
let currentCpuData: { [key: string]: MetricsWithTimeStamps } = {};
4041
let memoryData: { [key: string]: MetricsWithTimeStamps } = {};
41-
let networkDataCombined: {
42+
let cumulativeNetworkData: {
43+
[key: string]: MetricsWithTimeStamps[];
44+
} = {};
45+
let currentNetworkData: {
4246
[key: string]: MetricsWithTimeStamps[];
4347
} = {};
4448
@@ -119,16 +123,18 @@
119123
const result = await getMetricsUsageUtils(metricsResponse as unknown as DryRunMetrics[]);
120124
const { allStepNames } = result;
121125
// console.log('allStepNames:', allStepNames);
122-
cpuData = result.cpuData;
126+
cumulativeCpuData = result.cumulativeCpuData;
127+
currentCpuData = result.currentCpuData;
123128
memoryData = result.memoryData;
124-
networkDataCombined = result.networkDataCombined;
129+
cumulativeNetworkData = result.cumulativeNetworkData;
130+
currentNetworkData = result.currentNetworkData;
125131
logs = result.logs;
126132
pipelineMetricsAnalytics = await getMetricsAnalyticsUtils(
127133
allStepNames,
128134
metricsResponse as unknown as DryRunMetrics[],
129-
cpuData,
135+
cumulativeCpuData,
130136
memoryData,
131-
networkDataCombined
137+
cumulativeNetworkData
132138
);
133139
const responses = {
134140
workflow: workflowResponse.project,
@@ -260,41 +266,79 @@
260266
261267
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
262268
$: getResource = (resource: string) => {
263-
let resourceData;
264-
let wholeData: { x: string[]; y: number[]; type: string; name: string }[] = [];
265-
if (resource === 'cpu') {
266-
resourceData = cpuData;
267-
if (Object.keys(cpuData).length > 0)
268-
allStepNames.forEach((step) => {
269-
if (cpuData[step]) wholeData.push(cpuData[step]);
270-
});
271-
} else if (resource === 'memory') {
272-
resourceData = memoryData;
273-
if (Object.keys(memoryData).length > 0)
274-
allStepNames.forEach((step) => {
275-
if (memoryData[step]) wholeData.push(memoryData[step]);
276-
});
277-
} else {
278-
resourceData = networkDataCombined;
279-
wholeData = [];
280-
allStepNames.forEach((step) => {
281-
networkDataCombined[step]?.forEach((elem) => {
282-
wholeData.push(elem);
283-
});
284-
});
285-
}
286-
if (selectedStep !== 'Total') {
287-
if (resource === 'network')
288-
return {
289-
title: `${selectedStep}`,
290-
data: resourceData[selectedStep] ? resourceData[selectedStep] : []
291-
};
292-
return {
293-
title: `${selectedStep}`,
294-
data: resourceData[selectedStep] ? [resourceData[selectedStep]] : []
295-
};
269+
const data: { x: string[]; y: number[]; type: string; name: string }[] = [];
270+
switch (resource) {
271+
case 'cpu-cumulative': {
272+
if (Object.keys(cumulativeCpuData).length > 0) {
273+
if (selectedStep === 'Total') {
274+
allStepNames.forEach((step) => {
275+
if (cumulativeCpuData[step]) data.push(cumulativeCpuData[step]);
276+
});
277+
} else {
278+
data.push(cumulativeCpuData[selectedStep]);
279+
}
280+
}
281+
break;
282+
}
283+
case 'cpu-current': {
284+
if (Object.keys(currentCpuData).length > 0)
285+
if (selectedStep === 'Total') {
286+
allStepNames.forEach((step) => {
287+
if (currentCpuData[step]) data.push(currentCpuData[step]);
288+
});
289+
} else {
290+
data.push(currentCpuData[selectedStep]);
291+
}
292+
break;
293+
}
294+
case 'memory': {
295+
if (Object.keys(memoryData).length > 0)
296+
if (selectedStep === 'Total') {
297+
allStepNames.forEach((step) => {
298+
if (memoryData[step]) data.push(memoryData[step]);
299+
});
300+
} else {
301+
data.push(memoryData[selectedStep]);
302+
}
303+
break;
304+
}
305+
case 'network-cumulative': {
306+
if (Object.keys(cumulativeNetworkData).length > 0)
307+
if (selectedStep === 'Total') {
308+
allStepNames.forEach((step) => {
309+
cumulativeNetworkData[step].forEach((networkData) => {
310+
data.push(networkData);
311+
});
312+
});
313+
} else {
314+
cumulativeNetworkData[selectedStep].forEach((networkData) => {
315+
data.push(networkData);
316+
});
317+
}
318+
break;
319+
}
320+
case 'network-current': {
321+
if (Object.keys(currentNetworkData).length > 0)
322+
if (selectedStep === 'Total') {
323+
allStepNames.forEach((step) => {
324+
currentNetworkData[step].forEach((networkData) => {
325+
data.push(networkData);
326+
});
327+
});
328+
} else {
329+
currentNetworkData[selectedStep].forEach((networkData) => {
330+
data.push(networkData);
331+
});
332+
}
333+
break;
334+
}
335+
default: {
336+
throw new Error('Invalid resource');
337+
}
296338
}
297-
return { title: `- entire dry run`, data: wholeData };
339+
return selectedStep === 'Total'
340+
? { title: `- entire dry run`, data }
341+
: { title: `${selectedStep}`, data };
298342
};
299343
300344
onMount(async () => {
@@ -368,10 +412,10 @@
368412
<tr on:click={() => stepOnClick(step.displayName)}>
369413
<td style="width:15%">{step.displayName}</td>
370414
<td style="width:20%">
371-
{step.startedAt ? step.startedAt : '-'}
415+
{step.startedAt ?? '-'}
372416
</td>
373417
<td style="width:20%">
374-
{step.finishedAt ? step.finishedAt : '-'}
418+
{step.finishedAt ?? '-'}
375419
</td>
376420
<td style="width:15%">{displayStepDuration(step)}</td>
377421
<td style="width:15%">{step.phase}</td>
@@ -396,6 +440,20 @@
396440
<!-- if the logs are empty, remove logs sections -->
397441
{#if Object.values(logs).join('') !== ''}
398442
<div class="card logcard row-span-4 p-5">
443+
<!-- display if the dryrun has a non-empty phase message from argo (usually null if no error) -->
444+
{#if dryRunPhaseMessage}
445+
<div class="card logcard row-span-1 p-5">
446+
<div style="display: flex; align-items: center; color: red; gap: 5px">
447+
<AlertTriangleIcon />
448+
<h1>Error Message</h1>
449+
</div>
450+
<section class="p-1">
451+
<div class="w-full">
452+
<CodeBlock language="json" code={dryRunPhaseMessage} />
453+
</div>
454+
</section>
455+
</div>
456+
{/if}
399457
<header class="card-header"><h1>Logs</h1></header>
400458
<section class="p-1">
401459
<br />
@@ -406,7 +464,7 @@
406464
</li>
407465
<li>
408466
{#if logs[key] && getPartLogs(key, 20_000)}
409-
<div class="w-full">
467+
<div class="logbox w-full">
410468
<CodeBlock language="bash" code={getPartLogs(key, 20_000)} />
411469
</div>
412470
{:else}
@@ -419,17 +477,6 @@
419477
</section>
420478
</div>
421479
{/if}
422-
<!-- display if the dryrun has a non-empty phase message from argo (usually null if no error) -->
423-
{#if dryRunPhaseMessage}
424-
<div class="card logcard row-span-4 p-5">
425-
<h1>Message</h1>
426-
<section class="p-1">
427-
<div class="w-full">
428-
<CodeBlock language="json" code={dryRunPhaseMessage} />
429-
</div>
430-
</section>
431-
</div>
432-
{/if}
433480

434481
<div class="card resourcecard">
435482
<table class="table table-interactive">
@@ -470,10 +517,10 @@
470517

471518
<div class="card plotcard">
472519
<Plot
473-
data={getResource('cpu').data}
474-
plotTitle={`CPU Usage ${getResource('cpu').title}`}
520+
data={getResource('cpu-current').data}
521+
plotTitle={`CPU Utilization ${getResource('cpu-current').title}`}
475522
xaxisTitle="time"
476-
yaxisTitle="cpu usage"
523+
yaxisTitle="cpu utilization %"
477524
/>
478525
</div>
479526
<div class="card plotcard">
@@ -486,8 +533,8 @@
486533
</div>
487534
<div class="card plotcard">
488535
<Plot
489-
data={getResource('network').data}
490-
plotTitle={`Network ${getResource('network').title}`}
536+
data={getResource('network-current').data}
537+
plotTitle={`Network ${getResource('network-current').title}`}
491538
xaxisTitle="time"
492539
yaxisTitle="bytes"
493540
/>
@@ -512,6 +559,10 @@
512559
overflow-y: scroll;
513560
max-height: fit-content;
514561
}
562+
.logbox {
563+
overflow-y: scroll;
564+
max-height: 100vh;
565+
}
515566
ul {
516567
max-height: 75vh;
517568
max-height: fit-content;

0 commit comments

Comments
 (0)