Svelte update, minor UI edits (#78)

capillariesio · Sep 23, 2024 · a590c67 · a590c67
1 parent 419e732
commit a590c67
Show file tree

Hide file tree

Showing 12 changed files with 567 additions and 526 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -10,19 +10,19 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^3.1.1",
-		"@sveltejs/adapter-static": "^3.0.1",
-		"@sveltejs/kit": "^2.5.3",
-		"dayjs": "^1.11.10",
-		"eslint": "^8.57.0",
+		"@sveltejs/adapter-auto": "^3.2.5",
+		"@sveltejs/adapter-static": "^3.0.5",
+		"@sveltejs/kit": "^2.5.28",
+		"dayjs": "^1.11.13",
+		"eslint": "^9.11.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.35.1",
-		"prettier": "^3.2.5",
-		"prettier-plugin-svelte": "^3.2.2",
-		"svelte": "^4.2.12",
+		"eslint-plugin-svelte": "^2.44.0",
+		"prettier": "^3.3.3",
+		"prettier-plugin-svelte": "^3.2.6",
+		"svelte": "^4.2.19",
 		"svelte-modals": "^1.3.0",
 		"urlpattern-polyfill": "^10.0.0",
-		"vite": "^5.1.5",
+		"vite": "^5.4.7",
 		"vite-plugin-filter-replace": "^0.1.13"
 	},
 	"type": "module"

diff --git a/ui/src/Util.svelte b/ui/src/Util.svelte
@@ -2,7 +2,7 @@
 	export function webapiUrl() {
 		// If no Webapi url supplied, assume it's a dev environment and use our best guess
 		const webapiUrlEnvVar = import.meta.env.VITE_WEBAPI_URL;
-		return (!!webapiUrlEnvVar ? webapiUrlEnvVar : 'http://localhost:6543');
+		return !!webapiUrlEnvVar ? webapiUrlEnvVar : 'http://localhost:6543';
 	}
 	export function handleResponse(responseJson, setWebapiDataFunc) {
 		if (!!responseJson.error.msg) {

diff --git a/ui/src/modals/ModalStartRun.svelte b/ui/src/modals/ModalStartRun.svelte
@@ -16,7 +16,8 @@
 	function setWebapiData(dataFromJson, errorFromJson) {
 		webapiWaiting = false;
 		if (!!errorFromJson) {
-			responseError = "cannot start this run, Capillaries webapi returned an error: " + errorFromJson;
+			responseError =
+				'cannot start this run, Capillaries webapi returned an error: ' + errorFromJson;
 		} else {
 			console.log(dataFromJson);
 			responseError = '';
@@ -75,9 +76,7 @@
 	function newAndCloseModal() {
 		//console.log("Sending:",JSON.stringify({"script_uri": scriptUri, "script_params_uri": paramsUri, "start_nodes": startNodes}));
 		responseError =
-			validateKeyspace(keyspace) +
-			validateUri(scriptUri) +
-			validateStartNodes(startNodes);
+			validateKeyspace(keyspace) + validateUri(scriptUri) + validateStartNodes(startNodes);
 		if (responseError.length == 0) {
 			// For this ks, cache last used run parameters
 			$ksRunMap[keyspace] = { scriptUri: scriptUri, paramsUri: paramsUri };

diff --git a/ui/src/modals/ModalStopRun.svelte b/ui/src/modals/ModalStopRun.svelte
@@ -15,7 +15,8 @@
 	function setWebapiData(dataFromJson, errorFromJson) {
 		webapiWaiting = false;
 		if (!!errorFromJson) {
-			responseError = "cannot stop this run, Capillaries webapi returned an error: " + errorFromJson;
+			responseError =
+				'cannot stop this run, Capillaries webapi returned an error: ' + errorFromJson;
 		} else {
 			responseError = '';
 			closeModal();

diff --git a/ui/src/panels/BatchHistory.svelte b/ui/src/panels/BatchHistory.svelte
@@ -8,24 +8,34 @@
 	export let batch_history = [];
 
 	let nodeElapsed = 0;
+	let elapsedAverage = 0;
+	let elapsedMedian = 0;
+
+	let nonStartedBatchesPercent = 100;
+	let nonStartedBatchesRatio = '';
 	let nonStartedBatches = '';
+	let startedBatchesPercent = 0;
+	let startedBatchesRatio = '';
 	let startedBatches = '';
+	let runningBatchesPercent = 0;
+	let runningBatchesRatio = '';
 	let runningBatches = '';
+	let finishedBatchesPercent = 0;
+	let finishedBatchesRatio = '';
 	let finishedBatches = '';
+
 	let svgSummary = '';
 	let executionDetailsVisible = false;
-	let elapsedAverage = 0;
-	let elapsedMedian = 0;
 
 	function findMedian(arr) {
- 	   arr.sort((a, b) => a - b);
-	    const middleIndex = Math.floor(arr.length / 2);
+		arr.sort((a, b) => a - b);
+		const middleIndex = Math.floor(arr.length / 2);
 
-    	if (arr.length % 2 === 0) {
-        	return (arr[middleIndex - 1] + arr[middleIndex]) / 2;
-    	} else {
-        	return arr[middleIndex];
-	    }
+		if (arr.length % 2 === 0) {
+			return (arr[middleIndex - 1] + arr[middleIndex]) / 2;
+		} else {
+			return arr[middleIndex];
+		}
 	}
 
 	function arrayToReadable(arr) {
@@ -93,16 +103,37 @@
 			}
 		}
 
-		nonStartedBatches = arrayToReadable(
-			[...Array(batch_history[0].batches_total).keys()].filter((i) => !(i in batchStartMap))
-		);
-		startedBatches = arrayToReadable(Array.from(Object.keys(batchStartMap)));
-		runningBatches = arrayToReadable(
-			Array.from(runningBatchSet).sort(function (a, b) {
-				return a - b;
-			})
+		let nonStartedBatchesArray = [...Array(batch_history[0].batches_total).keys()].filter(
+			(i) => !(i in batchStartMap)
 		);
-		finishedBatches = arrayToReadable(Array.from(Object.keys(batchEndMap)));
+		nonStartedBatchesPercent =
+			(nonStartedBatchesArray.length.toString() / batch_history[0].batches_total.toString()) * 100;
+		nonStartedBatchesRatio =
+			nonStartedBatchesArray.length.toString() + '/' + batch_history[0].batches_total.toString();
+		nonStartedBatches = arrayToReadable(nonStartedBatchesArray);
+
+		let startedBatchesArray = Array.from(Object.keys(batchStartMap));
+		startedBatchesPercent =
+			(startedBatchesArray.length.toString() / batch_history[0].batches_total.toString()) * 100;
+		startedBatchesRatio =
+			startedBatchesArray.length.toString() + '/' + batch_history[0].batches_total.toString();
+		startedBatches = arrayToReadable(startedBatchesArray);
+
+		let runningBatchesArray = Array.from(runningBatchSet).sort(function (a, b) {
+			return a - b;
+		});
+		runningBatchesPercent =
+			(runningBatchesArray.length.toString() / batch_history[0].batches_total.toString()) * 100;
+		runningBatchesRatio =
+			runningBatchesArray.length.toString() + '/' + batch_history[0].batches_total.toString();
+		runningBatches = arrayToReadable(runningBatchesArray);
+
+		let finishedBatchesArray = Array.from(Object.keys(batchEndMap));
+		finishedBatchesPercent =
+			(finishedBatchesArray.length.toString() / batch_history[0].batches_total.toString()) * 100;
+		finishedBatchesRatio =
+			finishedBatchesArray.length.toString() + '/' + batch_history[0].batches_total.toString();
+		finishedBatches = arrayToReadable(finishedBatchesArray);
 
 		if (earliestTs != null && latestTs != null && batch_history[0].batches_total > 1) {
 			executionDetailsVisible = true;
@@ -127,7 +158,8 @@
 					svgSummary += `<path d="M${startX},${topY} L${endX},${topY} L${endX},${bottomY} L${startX},${bottomY} Z" fill="${nodeStatusToColor(
 						batchStatusMap[batchIdx]
 					)}" ><title>Batch ${batchIdx} ${(
-						(batchEndMap[batchIdx] - batchStartMap[batchIdx]) / 1000
+						(batchEndMap[batchIdx] - batchStartMap[batchIdx]) /
+						1000
 					).toFixed(1)}s</title></path>`;
 				}
 			}
@@ -139,7 +171,7 @@
 			svgSummary += '</svg>';
 		}
 
-		var elapsed = []
+		var elapsed = [];
 		var elapsedSum = 0;
 		for (let i = 0; i < batch_history.length; i++) {
 			let e = batch_history[i];
@@ -174,38 +206,47 @@
 			</td>
 			<td>
 				{#if executionDetailsVisible}
-				<table>
-					<tbody>
-						<tr>
-							<td>Elapsed:</td>
-							<td>{nodeElapsed}s</td>
-						</tr>
-						<tr>
-							<td>Elapsed average:</td>
-							<td>{elapsedAverage}s</td>
-						</tr>
-						<tr>
-							<td>Elapsed median:</td>
-							<td>{elapsedMedian}s</td>
-						</tr>
-						<tr>
-							<td>Batches not started:</td>
-							<td>{nonStartedBatches}</td>
-						</tr>
-						<tr>
-							<td>Batches started:</td>
-							<td>{startedBatches}</td>
-						</tr>
-						<tr>
-							<td>Batches running:</td>
-							<td>{runningBatches}</td>
-						</tr>
-						<tr>
-							<td>Batches finished:</td>
-							<td>{finishedBatches}</td>
-						</tr>
-					</tbody>
-				</table>
+					<table>
+						<tbody>
+							<tr>
+								<td>Elapsed:</td>
+								<td>{nodeElapsed}s</td>
+								<td colspan="2">(not very useful, skewed by other nodes)</td>
+							</tr>
+							<tr>
+								<td>Elapsed average:</td>
+								<td colspan="3">{elapsedAverage}s</td>
+							</tr>
+							<tr>
+								<td>Elapsed median:</td>
+								<td colspan="3">{elapsedMedian}s</td>
+							</tr>
+							<tr>
+								<td>Batches not started:</td>
+								<td style="text-align: right; width:1%;">{nonStartedBatchesPercent.toFixed(0)}%</td>
+								<td style="text-align: right; width:1%;">{nonStartedBatchesRatio}</td>
+								<td>{nonStartedBatches}</td>
+							</tr>
+							<tr>
+								<td>Batches started:</td>
+								<td style="text-align: right; width:1%;">{startedBatchesPercent.toFixed(0)}%</td>
+								<td style="text-align: right; width:1%;">{startedBatchesRatio}</td>
+								<td>{startedBatches}</td>
+							</tr>
+							<tr>
+								<td>Batches running:</td>
+								<td style="text-align: right; width:1%;">{runningBatchesPercent.toFixed(0)}%</td>
+								<td style="text-align: right; width:1%;">{runningBatchesRatio}</td>
+								<td>{runningBatches}</td>
+							</tr>
+							<tr>
+								<td>Batches finished:</td>
+								<td style="text-align: right; width:1%;">{finishedBatchesPercent.toFixed(0)}%</td>
+								<td style="text-align: right; width:1%;">{finishedBatchesRatio}</td>
+								<td>{finishedBatches}</td>
+							</tr>
+						</tbody>
+					</table>
 				{/if}
 			</td>
 		</tr>

diff --git a/ui/src/panels/RunInfo.svelte b/ui/src/panels/RunInfo.svelte
@@ -43,7 +43,7 @@
 				<td style="white-space: nowrap;"
 					>{dayjs(run_lifespan.start_ts).format('MMM D, YYYY HH:mm:ss.SSS Z')}</td
 				>
-				<td>{run_lifespan.start_comment}</td>
+				<td style="max-width: 1000px; overflow-wrap: break-word;">{run_lifespan.start_comment}</td>
 			</tr>
 			<tr>
 				<td>Completed</td>
@@ -52,7 +52,9 @@
 						? dayjs(run_lifespan.completed_ts).format('MMM D, YYYY HH:mm:ss.SSS Z')
 						: 'never'}</td
 				>
-				<td>{run_lifespan.completed_comment}</td>
+				<td style="max-width: 1000px; overflow-wrap: break-word;"
+					>{run_lifespan.completed_comment}</td
+				>
 			</tr>
 			<tr>
 				<td>Stopped/Invalidated</td>
@@ -61,7 +63,8 @@
 						? dayjs(run_lifespan.stopped_ts).format('MMM D, YYYY HH:mm:ss.SSS Z')
 						: 'never'}</td
 				>
-				<td>{run_lifespan.stopped_comment}</td>
+				<td style="max-width: 1000px; overflow-wrap: break-word;">{run_lifespan.stopped_comment}</td
+				>
 			</tr>
 			<tr>
 				<td>Elapsed</td>
@@ -106,11 +109,11 @@
 			</tr>
 			<tr>
 				<td>Start nodes:</td>
-				<td>{run_props.start_nodes}</td>
+				<td style="max-width: 1000px; overflow-wrap: break-word;">{run_props.start_nodes}</td>
 			</tr>
 			<tr>
 				<td>Affected nodes:</td>
-				<td>{run_props.affected_nodes}</td>
+				<td style="max-width: 1000px; overflow-wrap: break-word;">{run_props.affected_nodes}</td>
 			</tr>
 		</tbody>
 	</table>

diff --git a/ui/src/routes/Keyspaces.svelte b/ui/src/routes/Keyspaces.svelte
@@ -19,7 +19,8 @@
 	function setWebapiData(dataFromJson, errorFromJson) {
 		webapiData = !!dataFromJson ? dataFromJson : [];
 		if (!!errorFromJson) {
-			responseError = "cannot retrieve keyspaces, Capillaries webapi returned an error: " + errorFromJson;
+			responseError =
+				'cannot retrieve keyspaces, Capillaries webapi returned an error: ' + errorFromJson;
 		} else {
 			responseError = '';
 		}
@@ -37,7 +38,13 @@
 				if (!isDestroyed) timer = setTimeout(fetchData, 500);
 			})
 			.catch((error) => {
-				responseError = "cannot fetch keyspaces data from Capillaries webapi at " + method + ' ' + url + ', error:' + error;
+				responseError =
+					'cannot fetch keyspaces data from Capillaries webapi at ' +
+					method +
+					' ' +
+					url +
+					', error:' +
+					error;
 				console.log(error);
 				if (!isDestroyed) timer = setTimeout(fetchData, 3000);
 			});

diff --git a/ui/src/routes/KsMatrix.svelte b/ui/src/routes/KsMatrix.svelte
@@ -21,7 +21,8 @@
 	function setWebapiData(dataFromJson, errorFromJson) {
 		webapiData = !!dataFromJson ? dataFromJson : { run_lifespans: [], nodes: [] };
 		if (!!errorFromJson) {
-			responseError = "cannot retrieve keyspace matrix, Capillaries webapi returned an error: " + errorFromJson;
+			responseError =
+				'cannot retrieve keyspace matrix, Capillaries webapi returned an error: ' + errorFromJson;
 		} else {
 			responseError = '';
 		}
@@ -34,8 +35,8 @@
 				(tsCompleted > 0
 					? tsCompleted - tsStart
 					: tsStopped > 0
-					  ? tsStopped - tsStart
-					  : Date.now() - tsStart) / 1000
+						? tsStopped - tsStart
+						: Date.now() - tsStart) / 1000
 			).toString();
 		}
 	}
@@ -52,7 +53,13 @@
 				if (!isDestroyed) timer = setTimeout(fetchData, 500);
 			})
 			.catch((error) => {
-				responseError = "cannot fetch keyspace matrix data from Capillaries webapi at " + method + ' ' + url + ', error:' + error;
+				responseError =
+					'cannot fetch keyspace matrix data from Capillaries webapi at ' +
+					method +
+					' ' +
+					url +
+					', error:' +
+					error;
 				console.log(error);
 				if (!isDestroyed) timer = setTimeout(fetchData, 3000);
 			});

diff --git a/ui/src/routes/KsRunNodeBatchHistory.svelte b/ui/src/routes/KsRunNodeBatchHistory.svelte
@@ -21,7 +21,8 @@
 			? dataFromJson
 			: { run_props: {}, run_lifespan: {}, batch_history: [] };
 		if (!!errorFromJson) {
-			responseError = "cannot retrieve batch history, Capillaries webapi returned an error: " + errorFromJson;
+			responseError =
+				'cannot retrieve batch history, Capillaries webapi returned an error: ' + errorFromJson;
 		} else {
 			responseError = '';
 		}
@@ -54,7 +55,13 @@
 				}
 			})
 			.catch((error) => {
-				responseError = "cannot fetch batch history data from Capillaries webapi at " + method + ' ' + url + ', error:' + error;
+				responseError =
+					'cannot fetch batch history data from Capillaries webapi at ' +
+					method +
+					' ' +
+					url +
+					', error:' +
+					error;
 				console.log(error);
 				if (!isDestroyed) timer = setTimeout(fetchData, 3000);
 			});