#1311. Built out the cluster-info-table and added to cluster-info whe…

…n a cluster is found
zarf-dev · Apr 2, 2023 · a899709 · a899709
1 parent 28951f8
commit a899709
Show file tree

Hide file tree

Showing 2 changed files with 113 additions and 30 deletions.
diff --git a/src/ui/lib/components/cluster-info-table.svelte b/src/ui/lib/components/cluster-info-table.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { Paper, Typography, Box, type SSX } from '@ui';
+	import { clusterStore } from '$lib/store';
+
+	const clusterInfoTableSSX: SSX = {
+		$self: {
+			height: '160px',
+			padding: '16px 24px',
+			display: 'flex',
+			gap: '38px',
+			'& > .cluster-info-table-column': {
+				display: 'flex',
+				flexDirection: 'column',
+				height: '128px',
+				width: '166px',
+				gap: '18px',
+				padding: 'none',
+				'& > .overline': {
+					color: 'var(--text-secondary-on-dark)',
+				},
+			},
+			'& > .cluster-info-table-divider': {
+				height: '100px',
+				width: '1px',
+				border: '1px solid rgba(255, 255, 255, 0.12)',
+				alignSelf: 'center',
+			},
+			'& .label-values-container': {
+				display: 'flex',
+				justifyContent: 'space-between',
+				'& .label-values': {
+					display: 'flex',
+					flexDirection: 'column',
+					'&:first-child': {
+						color: 'var(--text-secondary-on-dark)',
+					},
+				},
+			},
+		},
+	};
+</script>
+
+<Box class="cluster-info-table" ssx={clusterInfoTableSSX}>
+	<div class="cluster-info-table-column">
+		<Typography variant="overline">name</Typography>
+		<Typography variant="caption" style="display:flex;">
+			<span
+				class="material-symbols-outlined"
+				style="color:var(--success);line-height:inherit;font-size:24px;"
+			>
+				check_circle
+			</span>
+			<Typography variant="inherit" element="span">
+				&nbsp;{$clusterStore.host}
+			</Typography>
+		</Typography>
+	</div>
+	<div class="cluster-info-table-divider" />
+	<div class="cluster-info-table-column">
+		<Typography variant="overline">details</Typography>
+		<Box class="label-values-container">
+			<Typography element="div" variant="caption" class="label-values">
+				<Typography variant="inherit">Health:</Typography>
+				<Typography variant="inherit">User:</Typography>
+				<Typography variant="inherit">K7s Rev:</Typography>
+			</Typography>
+			<Typography element="div" variant="caption" class="label-values">
+				<Typography variant="inherit">Ready</Typography>
+				<Typography variant="inherit">kind-kind</Typography>
+				<Typography variant="inherit">v1.24.0</Typography>
+			</Typography>
+		</Box>
+	</div>
+	<div class="cluster-info-table-divider" />
+	<div class="cluster-info-table-column">
+		<Typography variant="overline">resources</Typography>
+	</div>
+	<div class="cluster-info-table-divider" />
+	<div class="cluster-info-table-column">
+		<Typography variant="overline">metadata</Typography>
+	</div>
+</Box>
diff --git a/src/ui/lib/components/cluster-info.svelte b/src/ui/lib/components/cluster-info.svelte
@@ -1,12 +1,37 @@
 <script lang="ts">
-	import { Paper, Typography } from '@ui';
+	import ClusterInfoTable from './cluster-info-table.svelte';
+
+	import { Paper, Typography, Box, type SSX } from '@ui';
 	import ButtonDense from './button-dense.svelte';
 	import { clusterStore } from '$lib/store';
 
+	const ssx: SSX = {
+		$self: {
+			display: 'flex',
+			flexDirection: 'column',
+			'& .cluster-info-body': {
+				minHeight: '86px',
+				maxHeight: '160px',
+				'& > .cluster-not-connected': {
+					display: 'flex',
+					height: '100%',
+					alignItems: 'center',
+					justifyContent: 'center',
+				},
+			},
+			'& .cluster-info-header': {
+				padding: '16px',
+				height: '56px',
+				display: 'flex',
+				alignItems: 'center',
+				justifyContent: 'space-between',
+			},
+		},
+	};
 	$: showClusterInfo = $clusterStore?.hasZarf;
 </script>
 
-<div class="cluster-info-container">
+<Box {ssx} class="cluster-info-container">
 	<Paper class="cluster-info-header" square elevation={1}>
 		<div class="header-right">
 			<Typography variant="th">Cluster</Typography>
@@ -19,36 +44,12 @@
 	</Paper>
 	<Paper class="cluster-info-body" square elevation={1}>
 		{#if !showClusterInfo}
-			<Typography
-				variant="body1"
-				element="span"
-				style="display:flex;align-items:center;justify-content:center;"
-			>
+			<Typography class="cluster-not-connected" variant="body1" element="span">
 				<span class="material-symbols-outlined" style="color:var(--warning);"> warning </span>
 				<span>&nbsp;Cluster not connected </span>
 			</Typography>
+		{:else}
+			<ClusterInfoTable />
 		{/if}
 	</Paper>
-</div>
-
-<style>
-	.cluster-info-container {
-		display: flex;
-		flex-direction: column;
-	}
-	.cluster-info-container > :global(.paper) {
-		padding: 16px;
-	}
-
-	.cluster-info-container :global(.cluster-info-body) {
-		min-height: 86px;
-		max-height: 160px;
-	}
-
-	.cluster-info-container :global(.cluster-info-header) {
-		height: 56px;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-	}
-</style>
+</Box>