update overview events widget

defenseunicorns · Nov 7, 2024 · fe8f37d · fe8f37d
1 parent 369bd9a
commit fe8f37d
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 16 deletions.
diff --git a/ui/src/lib/components/k8s/DataTable/component.svelte b/ui/src/lib/components/k8s/DataTable/component.svelte
@@ -256,8 +256,8 @@
             {:else if $rows.length === 0}
               <tr class="!pointer-events-none !border-b-0">
                 <td colspan="9">
-                  <div class="w-full flex flex-col justify-center items-center content-center">
-                    {#each rows.noResourcesMSG as resource}
+                  <div class="flex flex-col items-center">
+                    {#each rows.noResourcesMsg as resource}
                       <div class={`w-96 text-center ${resource.style}`}>
                         {resource.msg}
                       </div>

diff --git a/ui/src/lib/components/k8s/Event/EventsOverviewWidget.svelte b/ui/src/lib/components/k8s/Event/EventsOverviewWidget.svelte
@@ -95,8 +95,12 @@
         <span>No matching entries found</span>
       </div>
     {:else if $rows.length === 0}
-      <div class="!pointer-events-none !border-b-0 flex h-12 justify-center items-center">
-        <span>No resources found</span>
+      <div class="!pointer-events-none !border-b-0 mt-6 flex flex-col items-center">
+        {#each rows.noResourcesMsg as resource}
+          <div class={`w-96 text-center ${resource.style}`}>
+            {resource.msg}
+          </div>
+        {/each}
       </div>
     {:else}
       {#each $rows as row}

diff --git a/ui/src/lib/features/k8s/events/store.ts b/ui/src/lib/features/k8s/events/store.ts
@@ -39,19 +39,21 @@ export function createStore(): ResourceStoreInterface<Resource, Row> {
 
   const store = new ResourceStore<Resource, Row>(url, transform, 'age', false)
 
+  const noResourcesMsg = [
+    {
+      msg: 'No active events to display',
+      style: 'text-sm font-bold dark:text-white',
+    },
+    {
+      msg: 'Cluster events from the last hour will appear here. An empty log often indicates healthy cluster performance.',
+      style: 'text-sm font-normal text-gray-400',
+    },
+  ]
+
   return {
     ...store,
     start: store.start.bind(store),
     sortByKey: store.sortByKey.bind(store),
-    noResourcesMSG: [
-      {
-        msg: 'No active events to display',
-        style: 'text-sm font-bold dark:text-white',
-      },
-      {
-        msg: 'Cluster events from the last hour will appear here. An empty log often indicates healthy cluster performance.',
-        style: '',
-      },
-    ],
+    noResourcesMsg,
   }
 }
diff --git a/ui/src/lib/features/k8s/store.ts b/ui/src/lib/features/k8s/store.ts
@@ -44,7 +44,7 @@ export class ResourceStore<T extends KubernetesObject, U extends CommonRow> impl
   // The URL for the EventSource
   public url = ''
   // The message to display when there are no resources
-  public noResourcesMSG = [{ msg: 'No resources found', style: '' }]
+  public noResourcesMsg = [{ msg: 'No resources found', style: '' }]
 
   /**
    * Create a new ResourceStore instance

diff --git a/ui/src/lib/features/k8s/types.ts b/ui/src/lib/features/k8s/types.ts
@@ -52,7 +52,7 @@ export interface ResourceStoreInterface<T extends KubernetesObject, U extends Co
   // The url for the EventSource
   url: string
   // The message to display when there are no resources
-  noResourcesMSG: { msg: string; style: string }[]
+  noResourcesMsg: { msg: string; style: string }[]
 }
 
 // Define specific status types for each resource