From 350beadf79fcf875aeb9fc1dc5127037dd735d02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=B8ran=20Brekke=20Svaland?= <goran.svaland@sintef.no>
Date: Mon, 10 Jul 2023 15:57:44 +0200
Subject: [PATCH] get metrics data for dryRun

---
 frontend-dev/package-lock.json                | 12 ++---
 frontend-dev/package.json                     |  2 +-
 .../src/queries/get_dry_run_metrics.ts        | 35 ++++++++++++++
 .../src/routes/visualizations/+page.svelte    | 47 +++++++++++++------
 frontend-dev/src/types.d.ts                   | 23 +++++++++
 5 files changed, 98 insertions(+), 21 deletions(-)
 create mode 100644 frontend-dev/src/queries/get_dry_run_metrics.ts

diff --git a/frontend-dev/package-lock.json b/frontend-dev/package-lock.json
index 0328455f..5756493d 100644
--- a/frontend-dev/package-lock.json
+++ b/frontend-dev/package-lock.json
@@ -8,10 +8,10 @@
 			"name": "frontend-dev",
 			"version": "0.0.1",
 			"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"
 			},
 			"devDependencies": {
@@ -50,11 +50,6 @@
 				"node": ">=0.10.0"
 			}
 		},
-		"node_modules/@aknakos/sveltekit-plotly": {
-			"version": "0.0.9",
-			"resolved": "https://registry.npmjs.org/@aknakos/sveltekit-plotly/-/sveltekit-plotly-0.0.9.tgz",
-			"integrity": "sha512-Gh/U3h3n5uzoIRAz4WCc0ObuBYseUk6YanhCafpnzJK/mky61QDB35++eVbnggqjDQrsy0PqopywpdcfQJXB4Q=="
-		},
 		"node_modules/@alloc/quick-lru": {
 			"version": "5.2.0",
 			"resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -2871,6 +2866,11 @@
 				"node": ">=14"
 			}
 		},
+		"node_modules/plotly.js-dist": {
+			"version": "2.24.3",
+			"resolved": "https://registry.npmjs.org/plotly.js-dist/-/plotly.js-dist-2.24.3.tgz",
+			"integrity": "sha512-ryz/Wn8FcR7c0t7Yb9WZlK6QUJJCAqLKYNexFdYc69A6R9U13HQRXypPeKZ+b657Aos8sgqaOn9FnY5yO5x6rQ=="
+		},
 		"node_modules/postcss": {
 			"version": "8.4.23",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz",
diff --git a/frontend-dev/package.json b/frontend-dev/package.json
index ee8ec7c3..068bf3d4 100644
--- a/frontend-dev/package.json
+++ b/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"
 	}
 }
diff --git a/frontend-dev/src/queries/get_dry_run_metrics.ts b/frontend-dev/src/queries/get_dry_run_metrics.ts
new file mode 100644
index 00000000..13c24746
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/frontend-dev/src/routes/visualizations/+page.svelte b/frontend-dev/src/routes/visualizations/+page.svelte
index 7c438a94..e0e78108 100644
--- a/frontend-dev/src/routes/visualizations/+page.svelte
+++ b/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>
\ No newline at end of file
diff --git a/frontend-dev/src/types.d.ts b/frontend-dev/src/types.d.ts
index 2e81826d..528ffe8d 100644
--- a/frontend-dev/src/types.d.ts
+++ b/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;