Feature/status filter column

public/locales/en.json

@@ -294,7 +294,7 @@
   },
   "yaml": {
     "copiedToClipboard": "YAML copied to clipboard!",
-    "YAML": "YAML"
+    "YAML": "File"
   },
   "createMCP": {
     "dialogTitle": "Create Managed Control Plane",

src/components/ControlPlane/FluxList.tsx

@@ -16,6 +16,7 @@ import { timeAgo } from '../../utils/i18n/timeAgo.ts';
 import { ResourceStatusCell } from '../Shared/ResourceStatusCell.tsx';
 import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
 import { useMemo } from 'react';
+import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx';
 
 export default function FluxList() {
   const {
@@ -68,6 +69,7 @@ export default function FluxList() {
         accessor: 'status',
         width: 85,
         hAlign: 'Center',
+        Filter: ({ column }) => <StatusFilter column={column} />,
         Cell: (cellData: CellData<FluxRow['isReady']>) =>
           cellData.cell.row.original?.isReady != null ? (
             <ResourceStatusCell
@@ -85,6 +87,7 @@ export default function FluxList() {
         hAlign: 'Center',
         width: 85,
         accessor: 'yaml',
+        disableFilters: true,
         Cell: (cellData: CellData<KustomizationsResponse['items']>) => (
           <YamlViewButton resourceObject={cellData.cell.row.original?.item} />
         ),
@@ -109,6 +112,7 @@ export default function FluxList() {
         accessor: 'status',
         width: 85,
         hAlign: 'Center',
+        Filter: ({ column }) => <StatusFilter column={column} />,
         Cell: (cellData: CellData<FluxRow['isReady']>) =>
           cellData.cell.row.original?.isReady != null ? (
             <ResourceStatusCell
@@ -127,6 +131,7 @@ export default function FluxList() {
         hAlign: 'Center',
         width: 85,
         accessor: 'yaml',
+        disableFilters: true,
         Cell: (cellData: CellData<FluxRow>) => (
           <YamlViewButton resourceObject={cellData.cell.row.original?.item} />
         ),

src/components/ControlPlane/ManagedResources.tsx

@@ -15,6 +15,7 @@ import { resourcesInterval } from '../../lib/shared/constants';
 import { ResourceStatusCell } from '../Shared/ResourceStatusCell';
 import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
 import { useMemo } from 'react';
+import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx';
 
 interface CellData<T> {
   cell: {
@@ -66,6 +67,7 @@ export function ManagedResources() {
         accessor: 'synced',
         hAlign: 'Center',
         width: 85,
+        Filter: ({ column }) => <StatusFilter column={column} />,
         Cell: (cellData: CellData<ResourceRow['synced']>) =>
           cellData.cell.row.original?.synced != null ? (
             <ResourceStatusCell
@@ -79,6 +81,7 @@ export function ManagedResources() {
         accessor: 'ready',
         hAlign: 'Center',
         width: 85,
+        Filter: ({ column }) => <StatusFilter column={column} />,
         Cell: (cellData: CellData<ResourceRow['ready']>) =>
           cellData.cell.row.original?.ready != null ? (
             <ResourceStatusCell
@@ -92,8 +95,9 @@ export function ManagedResources() {
         hAlign: 'Center',
         width: 85,
         accessor: 'yaml',
+        disableFilters: true,
         Cell: (cellData: CellData<ResourceRow>) =>
-          !!cellData.cell.row.original?.item ? (
+          cellData.cell.row.original?.item ? (
             <YamlViewButton resourceObject={cellData.cell.row.original?.item} />
           ) : undefined,
       },

src/components/ControlPlane/Providers.tsx

@@ -1,37 +1,39 @@
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   AnalyticalTable,
   AnalyticalTableColumnDefinition,
   AnalyticalTableScaleWidthMode,
   Title,
 } from '@ui5/webcomponents-react';
+
 import useResource from '../../lib/api/useApiResource';
 import IllustratedError from '../Shared/IllustratedError';
-import '@ui5/webcomponents-icons/dist/sys-enter-2';
-import '@ui5/webcomponents-icons/dist/sys-cancel-2';
 import { ProvidersListRequest } from '../../lib/api/types/crossplane/listProviders';
 import { resourcesInterval } from '../../lib/shared/constants';
 import { timeAgo } from '../../utils/i18n/timeAgo';
 import { ResourceStatusCell } from '../Shared/ResourceStatusCell';
-
 import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
-import { useMemo } from 'react';
+
+import '@ui5/webcomponents-icons/dist/sys-enter-2';
+import '@ui5/webcomponents-icons/dist/sys-cancel-2';
+import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx';
 
 interface CellData<T> {
   cell: {
-    value: T | null; // null for grouping rows
+    value: T | null;
     row: {
-      original?: ProvidersRow; // missing for grouping rows
+      original?: ProvidersRow;
     };
   };
 }
 
 type ProvidersRow = {
   name: string;
   version: string;
-  healthy: boolean;
+  healthy: string;
   healthyTransitionTime: string;
-  installed: boolean;
+  installed: string;
   installedTransitionTime: string;
   created: string;
   item: unknown;
@@ -67,10 +69,12 @@ export function Providers() {
         accessor: 'installed',
         hAlign: 'Center',
         width: 85,
+        Filter: ({ column }) => <StatusFilter column={column} />,
+        filter: 'equals',
         Cell: (cellData: CellData<ProvidersRow['installed']>) =>
           cellData.cell.row.original?.installed != null ? (
             <ResourceStatusCell
-              value={cellData.cell.row.original?.installed}
+              value={cellData.cell.row.original?.installed === 'true'}
               transitionTime={
                 cellData.cell.row.original?.installedTransitionTime
               }
@@ -82,26 +86,28 @@ export function Providers() {
         accessor: 'healthy',
         hAlign: 'Center',
         width: 85,
+        Filter: ({ column }) => <StatusFilter column={column} />,
+        filter: 'equals',
         Cell: (cellData: CellData<ProvidersRow['healthy']>) =>
           cellData.cell.row.original?.installed != null ? (
             <ResourceStatusCell
-              value={cellData.cell.row.original?.healthy}
+              value={cellData.cell.row.original?.healthy === 'true'}
               transitionTime={cellData.cell.row.original?.healthyTransitionTime}
             />
           ) : null,
       },
-
       {
         Header: t('yaml.YAML'),
         hAlign: 'Center',
         width: 85,
         accessor: 'yaml',
+        disableFilters: true,
         Cell: (cellData: CellData<ProvidersRow>) => (
           <YamlViewButton resourceObject={cellData.cell.row.original?.item} />
         ),
       },
     ],
-    [],
+    [t],
   );
 
   const rows: ProvidersRow[] =
@@ -115,9 +121,9 @@ export function Providers() {
       return {
         name: item.metadata.name,
         created: timeAgo.format(new Date(item.metadata.creationTimestamp)),
-        installed: installed?.status === 'True',
+        installed: installed?.status === 'True' ? 'true' : 'false',
         installedTransitionTime: installed?.lastTransitionTime ?? '',
-        healthy: healthy?.status === 'True',
+        healthy: healthy?.status === 'True' ? 'true' : 'false',
         healthyTransitionTime: healthy?.lastTransitionTime ?? '',
         version: item.spec.package.match(/\d+(\.\d+)+/g)?.toString() ?? '',
         item: item,
@@ -138,7 +144,6 @@ export function Providers() {
           scaleWidthMode={AnalyticalTableScaleWidthMode.Smart}
           loading={isLoading}
           filterable
-          // Prevent the table from resetting when the data changes
           retainColumnWidth
           reactTableOptions={{
             autoResetHiddenColumns: false,

src/components/ControlPlane/ProvidersConfig.tsx

@@ -76,6 +76,7 @@ export function ProvidersConfig() {
         hAlign: 'Center',
         width: 85,
         accessor: 'yaml',
+        disableFilters: true,
         Cell: (cellData: CellData<Rows>) =>
           cellData.cell.row.original?.resource ? (
             <YamlViewButton

src/components/Projects/ProjectsList.tsx

@@ -75,6 +75,7 @@ export default function ProjectsList() {
         Header: t('yaml.YAML'),
         accessor: 'yaml',
         width: 85,
+        disableFilters: true,
         hAlign: 'Center',
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         Cell: (instance: any) => (

src/components/Shared/StatusFilter/StatusFilter.module.css

@@ -0,0 +1,19 @@
+.option {
+  padding: 6px 10px;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.label {
+  font-size: 14px;
+}

src/components/Shared/StatusFilter/StatusFilter.tsx

@@ -0,0 +1,64 @@
+import { Icon, Option, Select } from '@ui5/webcomponents-react';
+import { useTranslation } from 'react-i18next';
+import styles from './StatusFilter.module.css';
+
+interface StatusFilterProps {
+  column: {
+    filterValue?: string;
+    setFilter?: (value?: string | undefined) => void;
+  };
+}
+
+interface OptionConfig {
+  value: string;
+  iconName: string;
+  color: string;
+  labelKey: string;
+}
+
+const StatusFilter: React.FC<StatusFilterProps> = ({ column }) => {
+  const { t } = useTranslation();
+
+  const options: OptionConfig[] = [
+    { value: 'all', iconName: 'filter', color: 'gray', labelKey: 'All' },
+    {
+      value: 'true',
+      iconName: 'sys-enter-2',
+      color: 'green',
+      labelKey: 'Enabled',
+    },
+    {
+      value: 'false',
+      iconName: 'sys-cancel-2',
+      color: 'red',
+      labelKey: 'Disabled',
+    },
+  ];
+
+  const handleChange = (
+    e: CustomEvent<{ selectedOption: { dataset?: { value?: string } } }>,
+  ) => {
+    const value = e.detail.selectedOption.dataset?.value;
+    column.setFilter?.(value === 'all' ? undefined : value);
+  };
+
+  const renderOption = ({ value, iconName, color, labelKey }: OptionConfig) => (
+    <Option
+      key={value}
+      data-value={value}
+      selected={
+        column.filterValue === value || (value === 'all' && !column.filterValue)
+      }
+      className={styles.option}
+    >
+      <div className={styles.container}>
+        <Icon name={iconName} style={{ color }} className={styles.icon} />
+        <span className={styles.label}>{t(labelKey)}</span>
+      </div>
+    </Option>
+  );
+
+  return <Select onChange={handleChange}>{options.map(renderOption)}</Select>;
+};
+
+export default StatusFilter;