get metrics data for dryRun

frontend-dev/package.json

@@ -41,10 +41,10 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@aknakos/sveltekit-plotly": "^0.0.9",
 		"@fontsource/ibm-plex-sans": "^5.0.3",
 		"graphql-request": "^6.1.0",
 		"keycloak-js": "^21.1.1",
+		"plotly.js-dist": "^2.24.3",
 		"svelte-feather-icons": "^4.0.1"
 	}
 }

frontend-dev/src/queries/get_dry_run_metrics.ts

@@ -0,0 +1,35 @@
+import { gql } from 'graphql-request';
+
+const getDryRunMetricsQuery = gql`
+query getDryRunMetrics($dryRunId: String!) {
+  dryRun(dryRunId: $dryRunId) {
+    nodes {
+    ... on DryRunNodePod {
+        displayName
+        startedAt
+        duration
+        metrics {
+          cpuUsageSecondsTotal {
+            timestamp
+            value
+          }
+          memoryUsageBytes {
+            timestamp
+            value
+          }
+          networkReceiveBytesTotal {
+            timestamp
+            value
+          }
+          networkTransmitBytesTotal {
+            timestamp
+            value
+          }
+        }
+      }
+    }
+  }
+}
+`;
+
+export default getDryRunMetricsQuery;

frontend-dev/src/routes/visualizations/+page.svelte

@@ -1,12 +1,32 @@
-<svelte:head>
-  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
-</svelte:head>
-
-
 <script lang="ts">
+    import Plotly from 'plotly.js-dist';
     import { afterUpdate, onMount } from 'svelte';
     import { modeCurrent } from '@skeletonlabs/skeleton';
+    import type { DryRunMetrics } from '../../types';
+    import { get } from 'svelte/store';
+    import { graphQLClient } from '../../stores/stores';
+    import getDryRunMetricsQuery from '../../queries/get_dry_run_metrics.js';
+
+    const dryRunName = 'forever-7mchz'
+
+    const getDryRunMetrics = async (): Promise<DryRunMetrics[]> => {
+        const variables = {
+            dryRunId: dryRunName
+        }
+		const response: {metrics: DryRunMetrics[]} = await get(graphQLClient).request(getDryRunMetricsQuery, variables);
+        console.log(response.dryRun.nodes)
+		return response.dryRun.nodes;
+	};
+	
+    const metricsPromise = getDryRunMetrics();
+    let metricsData = [];
 
+    // TODO: move to lib or utils
+	metricsPromise.then((value) => {
+            metricsData = value;
+		}).catch(() => {
+		    console.log(metricsPromise)
+		});
 
     var trace1 = {
         x: [1, 2, 3, 4],
@@ -30,8 +50,8 @@
         font: {size: 10, color:textcolor},
         paper_bgcolor: 'rgba(0,0,0,0)',
         plot_bgcolor: 'rgba(0,0,0,0)',
-        xaxis: {title: 'xaxis title'},
-        yaxis: {title: 'yaxis title'},
+        xaxis: {title: 'xaxis title', showgrid: true, gridwidth: 1},
+        yaxis: {title: 'yaxis title', showgrid: true, gridwidth: 1},
     };
 
     var config = {
@@ -41,21 +61,19 @@
 
     const drawPlot1 = () => {
         let plot1 = document.getElementById('plot1');
-        layout.xaxis = {title: 'time (s)'};
-        layout.yaxis = {title: 'CPU'};
+        layout.xaxis.title = 'time (s)';
+        layout.yaxis.title = 'CPU';
 		let p1 = new Plotly.newPlot(plot1, {"data": data, "layout": layout, "config": config});
-        console.log(plot1.id)
     };
 
     const drawPlot2 = () => {
         let plot2 = document.getElementById('plot2');
-        layout.xaxis = {title: 'time (s)'};
-        layout.yaxis = {title: 'Memory'};
+        layout.xaxis.title = 'time (s)';
+        layout.yaxis.title =  'Memory';
 		let p2 = new Plotly.newPlot(plot2, {"data": [trace2], "layout": layout, "config": config});
-        console.log(plot2.id)
     };    
 
-    onMount(() => {
+    onMount(async () => {
         drawPlot1();
         drawPlot2();
     });
@@ -82,4 +100,5 @@
             <div id="plot2"></div>
         </div>
     </div>
+    <div>{JSON.stringify(metricsData)}</div>
 </div>

frontend-dev/src/types.d.ts

@@ -36,6 +36,29 @@ export type DryRun = {
   // log(maxLines: number, grep: string): [string];
 }
 
+export type DryRunMetrics = {
+  displayName: string;
+  startedAt: string;
+  duration: number;
+  metrics: {
+    cpuUsageSecondsTotal: {
+      timestamp: string;
+      value: number;
+    };
+    memoryUsageBytes: {
+      timestamp: string;
+      value: number;
+    };
+    networkReceiveBytesTotal: {
+      timestamp: string;
+      value: number;
+    };
+    networkTransmitBytesTotal: {
+      timestamp: string;
+      value: number;
+    };
+}
+
 export type ArgoWorkflow = {
   input: unknown;
   output: unknown;