frontend: k8s: Sort namespaces in UI

This change alphabetically sorts namespaces in the UI, addressing the case where namespace lists from k3d/k3s clusters are not sorted by default. Fixes: #2656 Signed-off-by: Evangelos Skopelitis <[email protected]>
headlamp-k8s · Dec 16, 2024 · 442954c · 442954c
1 parent c97a07c
commit 442954c
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/frontend/src/components/common/NamespacesAutocomplete.tsx b/frontend/src/components/common/NamespacesAutocomplete.tsx
@@ -157,7 +157,11 @@ function NamespacesFromClusterAutocomplete(
 ) {
   const [namespacesList] = Namespace.useList();
   const namespaceNames = useMemo(
-    () => namespacesList?.map(namespace => namespace.metadata.name) ?? [],
+    () =>
+      namespacesList
+        ?.map(namespace => namespace.metadata.name)
+        .slice()
+        .sort((a, b) => a.localeCompare(b)) ?? [],
     [namespacesList]
   );
 

diff --git a/frontend/src/components/common/Resource/ResourceTable.tsx b/frontend/src/components/common/Resource/ResourceTable.tsx
@@ -147,8 +147,13 @@ function TableFromResourceClass<KubeClass extends KubeObjectClass>(
   const { resourceClass, id, ...otherProps } = props;
   const { items, error, clusterErrors } = resourceClass.useList({ namespace: useNamespaces() });
 
+  const sortedItems = useMemo(() => {
+    if (!items) return items;
+    return items.slice().sort((a, b) => a.metadata.name.localeCompare(b.metadata.name));
+  }, [items]);
+
   // throttle the update of the table to once per second
-  const throttledItems = useThrottle(items, 1000);
+  const throttledItems = useThrottle(sortedItems, 1000);
   const dispatchHeadlampEvent = useEventCallback(HeadlampEventType.LIST_VIEW);
 
   useEffect(() => {

diff --git a/frontend/src/components/ingress/__snapshots__/List.Items.stories.storyshot b/frontend/src/components/ingress/__snapshots__/List.Items.stories.storyshot
@@ -709,7 +709,7 @@
                   class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-srrjpp-MuiTypography-root-MuiLink-root"
                   href="/"
                 >
-                  tls-example-ingress
+                  resource-example-ingress
                 </a>
               </td>
               <td
@@ -740,12 +740,11 @@
                 class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1e2xkc-MuiTableCell-root"
               >
                 <span
-                  aria-label="/ 🞂 service1:80
-/second 🞂 service2:someport"
+                  aria-label="/ 🞂 Service:service1"
                   class=""
                   data-mui-internal-clone-element="true"
                 >
-                  / 🞂 service1:80, /second 🞂 service2:someport
+                  / 🞂 Service:service1
                 </span>
               </td>
               <td
@@ -827,7 +826,7 @@
                   class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-srrjpp-MuiTypography-root-MuiLink-root"
                   href="/"
                 >
-                  resource-example-ingress
+                  tls-example-ingress
                 </a>
               </td>
               <td
@@ -858,11 +857,12 @@
                 class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1e2xkc-MuiTableCell-root"
               >
                 <span
-                  aria-label="/ 🞂 Service:service1"
+                  aria-label="/ 🞂 service1:80
+/second 🞂 service2:someport"
                   class=""
                   data-mui-internal-clone-element="true"
                 >
-                  / 🞂 Service:service1
+                  / 🞂 service1:80, /second 🞂 service2:someport
                 </span>
               </td>
               <td