defenseunicorns · BillyFigueroa · Oct 11, 2024 · Oct 11, 2024 · Oct 15, 2024 · Oct 15, 2024
@@ -81,6 +81,50 @@
         .table-scroll-container {
           @apply flex-grow overflow-auto;
 
+          /* This section is for the refactor from table to non table layout */
+          svg.sort {
+            @apply mb-1 ml-1 inline-block h-4 w-4 transform transition duration-300;
+
+            &.opacity-100 {
+              opacity: 1 !important;
+            }
+          }
+
+          .emphasize {
+            @apply text-gray-900 dark:text-white;
+          }
+
+          .datatable {
+            @apply w-full text-left text-sm text-gray-500 dark:text-gray-400;
+
+            .thead {
+              @apply sticky top-0 z-10 bg-gray-50 text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400;
+
+              .th {
+                @apply flex whitespace-nowrap px-4 py-3.5;
+
+                &:hover {
+                  svg.sort {
+                    @apply opacity-50;
+                  }
+                }
+              }
+            }
+
+            .tr {
+              @apply border-b hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-700;
+
+              &.active {
+                @apply border-solid border-4 bg-gray-100 dark:bg-gray-700/50;
+              }
+
+              .td {
+                @apply flex px-4 py-2.5 text-left;
+              }
+            }
+          }
+          /* End of non table layout refactor */
+
           table {
             @apply w-full text-left text-sm text-gray-500 dark:text-gray-400;
 

@@ -8,7 +8,7 @@
   import type { KubernetesObject } from '@kubernetes/client-node'
   import { goto } from '$app/navigation'
   import { page } from '$app/stores'
-  import { Drawer, Link, Tooltip } from '$components'
+  import { Drawer, Link } from '$components'
   import type { Row as NamespaceRow } from '$features/k8s/namespaces/store'
   import { type ResourceStoreInterface } from '$features/k8s/types'
   import { addToast } from '$features/toast'
@@ -30,6 +30,8 @@
   export let name = ''
   export let description = 'No description available'
 
+  export let minWidth = 1024
+
   let rows = createStore()
   $: ({ namespace, search, searchBy, searchTypes, sortAsc, sortBy, numResources } = rows)
 
@@ -143,6 +145,12 @@
       stop()
     }
   })
+
+  const shouldTruncate = (classes: string = '') => {
+    const hasLineClamp = classes.split(' ').filter((cls) => cls.match(/^line-clamp/))
+
+    return hasLineClamp?.length > 0 ? '' : 'truncate'
+  }
 </script>
 
 {#if resource}
@@ -161,18 +169,21 @@
         {:else}
           <span class="dark:text-gray-500 pl-2" data-testid="table-header-results">({$numResources})</span>
         {/if}
+
         <div class="relative group">
           <Information class="ml-2 w-4 h-4 text-gray-400" />
           <div class="tooltip tooltip-right min-w-72">
             <div class="whitespace-normal">{description}</div>
           </div>
         </div>
       </div>
+
       <div class="table-filter-section">
         <div class="relative lg:w-96">
           <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
             <Search class="h-5 w-5 text-gray-400" />
           </div>
+
           <input
             type="text"
             name="input-search"
@@ -183,6 +194,7 @@
             bind:value={$search}
           />
         </div>
+
         <button
           id="filterDropdownButton"
           data-dropdown-toggle="filterDropdown"
@@ -194,6 +206,7 @@
           {$searchBy}
           <ChevronDown class="ml-2 h-4 w-4 text-gray-400" />
         </button>
+
         <div id="filterDropdown" class="z-10 hidden w-48 rounded-lg bg-white p-3 shadow dark:bg-gray-700">
           <h6 class="mb-3 text-sm font-medium text-gray-900 dark:text-white">Search By</h6>
           <ul class="space-y-2 text-sm" aria-labelledby="filterDropdownButton">
@@ -214,7 +227,9 @@
             {/each}
           </ul>
         </div>
+
         <div class="flex-grow"></div>
+
         <div>
           {#if isNamespaced}
             <select id="stream" bind:value={$namespace} data-testid="table-filter-namespace-select">
@@ -229,46 +244,46 @@
           {/if}
         </div>
       </div>
+
       <div class="table-scroll-container">
-        <table>
-          <thead>
-            <tr>
-              {#each columns as [header, style]}
-                <th>
-                  <button on:click={() => rows.sortByKey(header)}>
-                    {header.replaceAll('_', ' ')}
+        <div class={`datatable min-w-[${minWidth}px]`}>
+          <div class="thead">
+            <div class="flex items-center">
+              {#each columns as [header, style], idx}
+                <div class={`th ${style} ${idx === 0 ? 'emphasize' : ''}`}>
+                  <button class="flex font-bold" on:click={() => rows.sortByKey(header)}>
+                    {header.replaceAll('_', ' ').toUpperCase()}
                     <ChevronUp
                       class="sort
                       {style || ''}
                       {$sortAsc ? 'rotate-180' : ''}
                       {$sortBy === header ? 'opacity-100' : 'opacity-0'}"
                     />
                   </button>
-                </th>
+                </div>
               {/each}
-            </tr>
-          </thead>
-          <tbody>
-            {#if $rows.length === 0 && isFiltering}
-              <tr class="!pointer-events-none !border-b-0">
-                <td class="text-center" colspan="9">No matching entries found</td>
-              </tr>
-            {:else if $rows.length === 0}
-              <tr class="!pointer-events-none !border-b-0">
-                <td class="text-center" colspan="9">No resources found</td>
-              </tr>
-              <!--This case only happens when returning an error when a CRD does not exist in the cluster-->
-            {:else if typeof $rows[0].resource === 'string'}
-              <tr class="!pointer-events-none !border-b-0">
-                <td class="text-center" colspan="9">
-                  The CRD for the resources you are trying to view does not exist in the cluster.
-                  <br />
-                  Install CRD and refresh page to view resources.
-                </td>
-              </tr>
-            {:else}
-              {#each $rows as row}
-                <tr
+            </div>
+          </div>
+
+          {#if $rows.length === 0 && isFiltering}
+            <div class="!pointer-events-none !border-b-0 flex h-12 justify-center items-center">
+              <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>
+            <!--This case only happens when returning an error when a CRD does not exist in the cluster-->
+          {:else if typeof $rows[0].resource === 'string'}
+            <div class="!pointer-events-none !border-b-0 flex h-12 justify-center items-center">
+              <p>The CRD for the resources you are trying to view does not exist in the cluster.</p>
+              <p>Install CRD and refresh page to view resources.</p>
+            </div>
+          {:else}
+            {#each $rows as row}
+              <div class="tr">
+                <button
+                  class="w-full flex items-center"
                   id={row.resource.metadata?.uid}
                   on:click={() =>
                     !disableRowClick && row.resource.metadata?.uid && goto(`${baseURL}/${row.resource.metadata?.uid}`)}
@@ -278,8 +293,8 @@
                   {#each columns as [key, style, modifier], idx}
                     <!-- Check object to avoid issues with `false` values -->
                     {@const value = Object.hasOwn(row.table, key) ? row.table[key] : ''}
-                    <td
-                      class={style || ''}
+                    <div
+                      class={`td ${style}  ${idx === 0 ? 'emphasize' : ''}`}
                       data-testid={typeof value !== 'object'
                         ? `${value}-testid-${idx + 1}`
                         : `object-test-id-${idx + 1}`}
@@ -299,26 +314,22 @@
                       {:else if key === 'namespace'}
                         <button
                           on:click|stopPropagation={() => namespace.set(value)}
-                          class="text-blue-600 dark:text-blue-500 hover:underline pr-4 text-left"
+                          class="text-blue-600 dark:text-blue-500 hover:underline text-left truncate"
                         >
                           {value}
                         </button>
-                      {:else if style?.includes('truncate')}
-                        <Tooltip title={value}>
-                          <div class={`w-full ${style}`}>
-                            {value}
-                          </div>
-                        </Tooltip>
                       {:else}
-                        {value.text || (value === 0 ? '0' : value) || '-'}
+                        <div class={`w-full text-left ${shouldTruncate(style)}`}>
+                          {value.text || (value === 0 ? '0' : value) || '-'}
+                        </div>
                       {/if}
-                    </td>
+                    </div>
                   {/each}
-                </tr>
-              {/each}
-            {/if}
-          </tbody>
-        </table>
+                </button>
+              </div>
+            {/each}
+          {/if}
+        </div>
       </div>
     </div>
   </div>

@@ -11,7 +11,7 @@
 </script>
 
 {#if status}
-  <span class={statusClass}>
+  <span class={`${statusClass} truncate`}>
     {status}
   </span>
 {:else}

@@ -6,7 +6,12 @@
 
   import { createStore, type Columns } from './store'
 
-  export let columns: Columns = [['url', 'emphasize', 'link-external'], ['namespace'], ['status'], ['age']]
+  export let columns: Columns = [
+    ['url', 'w-3/12', 'link-external'],
+    ['namespace', 'w-3/12'],
+    ['status', 'w-3/12'],
+    ['age', 'w-3/12'],
+  ]
 
   const name = 'Application Endpoints'
   const description = 'Application Endpoints are exposed by the UDS Operator via a UDS Package CR.'

@@ -25,7 +25,12 @@ suite('StatefulsetTable Component', () => {
 
   testK8sTableWithDefaults(Component, {
     createStore,
-    columns: [['url', 'emphasize', 'link-external'], ['namespace'], ['status'], ['age']],
+    columns: [
+      ['url', 'w-3/12', 'link-external'],
+      ['namespace', 'w-3/12'],
+      ['status', 'w-3/12'],
+      ['age', 'w-3/12'],
+    ],
     name,
     description,
     disableRowClick: true,

@@ -7,13 +7,13 @@
   import { createStore, type Columns } from './store'
 
   export let columns: Columns = [
-    ['name', 'emphasize'],
-    ['version'],
-    ['description', 'italic'],
-    ['arch'],
-    ['flavor'],
-    ['components'],
-    ['age'],
+    ['name', 'w-1/12'],
+    ['version', ' w-1/12'],
+    ['description', 'italic  w-5/12'],
+    ['arch', ' w-1/12'],
+    ['flavor', ' w-1/12'],
+    ['components', ' w-2/12'],
+    ['age', ' w-1/12'],
   ]
   const name = 'Application Packages'
   const description = 'Packages are either UDS or Zarf packages that are deployed in the cluster.'

@@ -19,13 +19,13 @@ suite('LimitRangesTable Component', () => {
   testK8sTableWithDefaults(Component, {
     createStore,
     columns: [
-      ['name', 'emphasize'],
-      ['version'],
-      ['description', 'italic'],
-      ['arch'],
-      ['flavor'],
-      ['components'],
-      ['age'],
+      ['name', 'w-1/12'],
+      ['version', ' w-1/12'],
+      ['description', 'italic  w-5/12'],
+      ['arch', ' w-1/12'],
+      ['flavor', ' w-1/12'],
+      ['components', ' w-2/12'],
+      ['age', ' w-1/12'],
     ],
     name,
     description,

@@ -8,14 +8,14 @@
   import { createStore, type Columns } from './store'
 
   export let columns: Columns = [
-    ['name', 'emphasize'],
-    ['namespace'],
-    ['metrics'],
-    ['min_pods'],
-    ['max_pods'],
-    ['replicas'],
-    ['age'],
-    ['status'],
+    ['name', 'w-2/12'],
+    ['namespace', 'w-2/12'],
+    ['metrics', 'w-2/12'],
+    ['min_pods', 'w-1/12'],
+    ['max_pods', 'w-1/12'],
+    ['replicas', 'w-1/12'],
+    ['age', 'w-1/12'],
+    ['status', 'w-2/12'],
   ]
 
   const name = 'HorizontalPodAutoscalers'

@@ -28,14 +28,14 @@ suite('PriorityClassesTable Component', () => {
   testK8sTableWithDefaults(Component, {
     createStore,
     columns: [
-      ['name', 'emphasize'],
-      ['namespace'],
-      ['metrics'],
-      ['min_pods'],
-      ['max_pods'],
-      ['replicas'],
-      ['age'],
-      ['status'],
+      ['name', 'w-2/12'],
+      ['namespace', 'w-2/12'],
+      ['metrics', 'w-2/12'],
+      ['min_pods', 'w-1/12'],
+      ['max_pods', 'w-1/12'],
+      ['replicas', 'w-1/12'],
+      ['age', 'w-1/12'],
+      ['status', 'w-2/12'],
     ],
     name,
     description,

@@ -7,7 +7,11 @@
 
   import { createStore, type Columns } from './store'
 
-  export let columns: Columns = [['name', 'emphasize'], ['namespace'], ['age']]
+  export let columns: Columns = [
+    ['name', 'w-4/12'],
+    ['namespace', 'w-4/12'],
+    ['age', 'w-4/12'],
+  ]
   const name = 'LimitRanges'
   const description = resourceDescriptions[name]
 </script>