feat(ui): adding functionality to cards (#327)

defenseunicorns · Sep 16, 2024 · 15dbd05 · 15dbd05
1 parent b64c76b
commit 15dbd05
Showing 1 changed file with 16 additions and 6 deletions.
diff --git a/ui/src/lib/features/k8s/cluster-overview/component.svelte b/ui/src/lib/features/k8s/cluster-overview/component.svelte
@@ -5,6 +5,7 @@
   import { onMount } from 'svelte'
   import ApexCharts from 'apexcharts'
   import type { ApexOptions } from 'apexcharts'
+  import { goto } from '$app/navigation'
   import { createEventSource } from '$lib/utils/helpers'
 
   import './styles.postcss'
@@ -218,22 +219,30 @@
 <div class="p-4 dark:text-white pt-0">
   <h1 class="text-2xl font-bold mb-4">Cluster Overview</h1>
   <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-    <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
-      <div class="px-4 py-5 sm:p-6">
+    <button
+      class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg hover:dark:bg-gray-700 flex"
+      on:click={() => goto('/workloads/pods')}
+    >
+      <div class="px-4 py-5 sm:p-6 flex flex-col items-start">
         <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Running Pods</dt>
         <dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">
           {clusterData.totalPods}
         </dd>
       </div>
-    </div>
-    <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
-      <div class="px-4 py-5 sm:p-6">
+    </button>
+
+    <button
+      class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg hover:dark:bg-gray-700 flex"
+      on:click={() => goto('/nodes')}
+    >
+      <div class="px-4 py-5 sm:p-6 flex flex-col items-start">
         <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Running Nodes</dt>
         <dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white" data-testid="node-count">
           {clusterData.totalNodes}
         </dd>
       </div>
-    </div>
+    </button>
+
     <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
       <div class="px-4 py-5 sm:p-6">
         <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">CPU Usage</dt>
@@ -245,6 +254,7 @@
         </div>
       </div>
     </div>
+
     <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
       <div class="px-4 py-5 sm:p-6">
         <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Memory Usage</dt>