frontend: improve filter table

Signed-off-by: farodin91 <github@jan-jansen.net>

Author: farodin91

frontend/src/components/common/Resource/ResourceTable.tsx

@@ -416,7 +416,7 @@ function ResourceTableContent<RowItem extends KubeObject>(props: ResourceTablePr
               id: 'namespace',
               header: t('glossary|Namespace'),
               gridTemplate: 'auto',
-              accessorFn: (item: RowItem) => item.getNamespace() ?? '',
+              accessorFn: (item: RowItem) => item.getNamespace() ?? '(cluster-wide)',
               filterVariant: 'multi-select',
               Cell: ({ row }: { row: MRT_Row<RowItem> }) =>
                 row.original?.getNamespace() ? (

frontend/src/components/job/List.tsx

@@ -29,6 +29,24 @@ import ResourceListView from '../common/Resource/ResourceListView';
 import { SimpleTableProps } from '../common/SimpleTable';
 import LightTooltip from '../common/Tooltip/TooltipLight';
 
+export function makeJobStatusValue(job: Job) {
+  if (!job?.status?.conditions) {
+    return 'Unknown';
+  }
+  const conditionOptions = ['Failed', 'Complete', 'Suspended'];
+
+  const condition = job.status.conditions.find(
+    ({ status, type }: { status: string; type: string }) =>
+      conditionOptions.includes(type) && status === 'True'
+  );
+
+  if (!condition) {
+    return 'Unknown';
+  }
+
+  return condition.type;
+}
+
 export function makeJobStatusLabel(job: Job) {
   if (!job?.status?.conditions) {
     return null;
@@ -127,10 +145,9 @@ export function JobsListRenderer(props: JobsListRendererProps) {
         {
           id: 'conditions',
           label: t('translation|Conditions'),
+          filterVariant: 'multi-select',
           gridTemplate: 'min-content',
-          getValue: job =>
-            job.status?.conditions?.find(({ status }: { status: string }) => status === 'True') ??
-            null,
+          getValue: job => makeJobStatusValue(job),
           render: job => makeJobStatusLabel(job),
         },
         {

frontend/src/components/job/__snapshots__/JobList.Items.stories.storyshot

@@ -494,12 +494,12 @@
                       Conditions
                     </div>
                     <span
-                      aria-label="Sort by Conditions descending"
+                      aria-label="Sort by Conditions ascending"
                       class="MuiBadge-root css-1c32n2y-MuiBadge-root"
                       data-mui-internal-clone-element="true"
                     >
                       <span
-                        aria-label="Sort by Conditions descending"
+                        aria-label="Sort by Conditions ascending"
                         class="MuiButtonBase-root MuiTableSortLabel-root Mui-active css-542clt-MuiButtonBase-root-MuiTableSortLabel-root"
                         role="button"
                         tabindex="0"

frontend/src/components/pod/List.tsx

@@ -237,7 +237,7 @@ export function PodListRenderer(props: PodListProps) {
           gridTemplate: 'min-content',
           filterVariant: 'multi-select',
           label: t('translation|Status'),
-          getValue: pod => getPodStatus(pod) + '/' + pod.getDetailedStatus().reason,
+          getValue: pod => pod.getDetailedStatus().reason,
           render: makePodStatusLabel,
         },
         ...(metrics?.length

frontend/src/components/storage/VolumeList.tsx

@@ -111,6 +111,7 @@ export default function VolumeList() {
         {
           id: 'status',
           label: t('translation|Status'),
+          filterVariant: 'multi-select',
           getValue: volume => volume.status?.phase,
           render: volume => makePVStatusLabel(volume),
           gridTemplate: 0.3,