feat: AST-based CEL Explainer for Kyverno policies

app-catalog/package.json

@@ -55,7 +55,11 @@
     ]
   },
   "devDependencies": {
-    "@kinvolk/headlamp-plugin": "^0.14.0"
+    "@kinvolk/headlamp-plugin": "^0.14.0",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.2",
+    "jsdom": "^30.0.1",
+    "vitest": "^3.2.7"
   },
   "dependencies": {
     "react-syntax-highlighter": "^15.6.6",

app-catalog/src/components/releases/List.test.tsx

@@ -0,0 +1,98 @@
+/// <reference types="@testing-library/jest-dom" />
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import List from './List';
+import * as releasesApi from '../../api/releases';
+
+// Mock localStorage
+Object.defineProperty(global, 'localStorage', {
+  value: {
+    getItem: vi.fn(),
+    setItem: vi.fn(),
+    removeItem: vi.fn(),
+    clear: vi.fn(),
+  },
+  writable: true,
+});
+
+// Mock the API calls
+vi.mock('../../api/releases', () => ({
+  listReleases: vi.fn(),
+  getReleaseHistory: vi.fn(),
+  deleteRelease: vi.fn(),
+  rollbackRelease: vi.fn(),
+  getActionStatus: vi.fn(),
+}));
+
+vi.mock('@kinvolk/headlamp-plugin/lib', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+vi.mock('@kinvolk/headlamp-plugin/lib/CommonComponents', () => ({
+  SectionBox: ({ children }: any) => <div>{children}</div>,
+  SectionHeader: ({ title, actions }: any) => <div><h1>{title}</h1>{actions}</div>,
+  SimpleTable: ({ columns, data }: any) => (
+    <table>
+      <thead>
+        <tr>{columns.map((c: any) => <th key={c.label}>{c.label}</th>)}</tr>
+      </thead>
+      <tbody>
+        {data?.map((row: any, i: number) => (
+          <tr key={i}>
+            {columns.map((c: any, j: number) => <td key={j}>{c.getter(row)}</td>)}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  ),
+  Link: ({ children }: any) => <a>{children}</a>,
+  StatusLabel: ({ children }: any) => <span>{children}</span>,
+  DateLabel: ({ date }: any) => <span>{new Date(date).toISOString()}</span>,
+  Dialog: ({ open, children }: any) => open ? <div data-testid="dialog">{children}</div> : null,
+}));
+
+vi.mock('notistack', () => ({
+  useSnackbar: () => ({ enqueueSnackbar: vi.fn() }),
+}));
+
+vi.mock('../../api/charts', () => ({
+  fetchLatestAppVersion: vi.fn().mockResolvedValue('1.0.0'),
+}));
+
+const mockReleases = [
+  { name: 'release-A', namespace: 'default', version: 1, info: { status: 'deployed', last_deployed: '2023-01-01T00:00:00Z' }, chart: { metadata: { name: 'chart-alpha', appVersion: '1.0.0' } } },
+  { name: 'release-B', namespace: 'kube-system', version: 2, info: { status: 'failed', last_deployed: '2023-01-02T00:00:00Z' }, chart: { metadata: { name: 'chart-beta', appVersion: '2.0.0' } } },
+  { name: 'release-C', namespace: 'default', version: 1, info: { status: 'superseded', last_deployed: '2023-01-03T00:00:00Z' }, chart: { metadata: { name: 'chart-gamma', appVersion: '1.5.0' } } },
+  { name: 'app-D', namespace: 'test-ns', version: 3, info: { status: 'deployed', last_deployed: '2023-01-04T00:00:00Z' }, chart: { metadata: { name: 'chart-delta', appVersion: '3.0.0' } } },
+  { name: 'app-E', namespace: 'test-ns', version: 1, info: { status: 'pending', last_deployed: '2023-01-05T00:00:00Z' }, chart: { metadata: { name: 'chart-epsilon', appVersion: '1.1.0' } } },
+  { name: 'test-F', namespace: 'default', version: 1, info: { status: 'deployed', last_deployed: '2023-01-06T00:00:00Z' }, chart: { metadata: { name: 'chart-zeta', appVersion: '0.9.0' } } },
+  { name: 'test-G', namespace: 'kube-system', version: 5, info: { status: 'failed', last_deployed: '2023-01-07T00:00:00Z' }, chart: { metadata: { name: 'chart-eta', appVersion: '2.2.0' } } },
+  { name: 'service-H', namespace: 'default', version: 1, info: { status: 'superseded', last_deployed: '2023-01-08T00:00:00Z' }, chart: { metadata: { name: 'chart-theta', appVersion: '4.0.0' } } },
+  { name: 'service-I', namespace: 'prod-ns', version: 2, info: { status: 'deployed', last_deployed: '2023-01-09T00:00:00Z' }, chart: { metadata: { name: 'chart-iota', appVersion: '1.2.3' } } },
+  { name: 'db-J', namespace: 'prod-ns', version: 1, info: { status: 'deployed', last_deployed: '2023-01-10T00:00:00Z' }, chart: { metadata: { name: 'chart-kappa', appVersion: '5.0.0' } } },
+];
+
+describe('List', () => {
+  it('renders releases and filters by text search', async () => {
+    vi.mocked(releasesApi.listReleases).mockResolvedValue({ releases: mockReleases } as any);
+    const mockFetch = vi.fn().mockResolvedValue({ releases: mockReleases });
+    render(<List fetchReleases={mockFetch} />);
+
+    // Wait for data to load
+    const releaseA = await screen.findByText('release-A');
+    expect(releaseA).toBeInTheDocument();
+    expect(screen.getByText('release-B')).toBeInTheDocument();
+
+    // Search by name
+    const searchInput = screen.getByLabelText('Search');
+    fireEvent.change(searchInput, { target: { value: 'release-' } });
+
+    await waitFor(() => {
+      expect(screen.queryByText('app-D')).not.toBeInTheDocument();
+    });
+
+    expect(screen.getByText('release-A')).toBeInTheDocument();
+    expect(screen.getByText('release-B')).toBeInTheDocument();
+    expect(screen.getByText('release-C')).toBeInTheDocument();
+  });
+});

app-catalog/src/components/releases/List.tsx

@@ -127,6 +127,7 @@ export default function ReleaseList({ fetchReleases = listReleases }: ReleaseLis
   const [latestMap, setLatestMap] = useState<Record<string, string>>({});
   const [nameFilter, setNameFilter] = useState('');
   const [namespaceFilter, setNamespaceFilter] = useState('');
+  const [statusFilter, setStatusFilter] = useState('');
   const [openDeleteAlert, setOpenDeleteAlert] = useState<boolean>(false);
   const [rollbackPopup, setRollbackPopup] = useState<boolean>(false);
   const [selectedRelease, setSelectedRelease] = useState<Release | null>(null);
@@ -189,13 +190,18 @@ export default function ReleaseList({ fetchReleases = listReleases }: ReleaseLis
     if (!releases) return null;
 
     return releases.filter(release => {
+      const searchTerm = nameFilter.toLowerCase();
       const matchesName =
-        !nameFilter || release.name.toLowerCase().includes(nameFilter.toLowerCase());
+        !searchTerm ||
+        release.name.toLowerCase().includes(searchTerm) ||
+        release.namespace.toLowerCase().includes(searchTerm) ||
+        (release.chart?.metadata?.name || '').toLowerCase().includes(searchTerm);
       const matchesNamespace = !namespaceFilter || release.namespace === namespaceFilter;
+      const matchesStatus = !statusFilter || release.info.status === statusFilter;
 
-      return matchesName && matchesNamespace;
+      return matchesName && matchesNamespace && matchesStatus;
     });
-  }, [releases, nameFilter, namespaceFilter]);
+  }, [releases, nameFilter, namespaceFilter, statusFilter]);
 
   const availableNamespaces = useMemo(() => {
     if (!releases) return [];
@@ -204,6 +210,13 @@ export default function ReleaseList({ fetchReleases = listReleases }: ReleaseLis
     return Array.from(namespaces).sort();
   }, [releases]);
 
+  const availableStatuses = useMemo(() => {
+    if (!releases) return [];
+
+    const statuses = new Set(releases.map(r => r.info.status));
+    return Array.from(statuses).sort();
+  }, [releases]);
+
   // Count how many of the currently visible (filtered) releases are selected
   const selectedVisibleCount = useMemo(() => {
     if (!filteredReleases) return 0;
@@ -590,9 +603,12 @@ export default function ReleaseList({ fetchReleases = listReleases }: ReleaseLis
             key="filters"
             nameFilter={nameFilter}
             namespaceFilter={namespaceFilter}
+            statusFilter={statusFilter}
             availableNamespaces={availableNamespaces}
+            availableStatuses={availableStatuses}
             onNameFilterChange={setNameFilter}
             onNamespaceFilterChange={setNamespaceFilter}
+            onStatusFilterChange={setStatusFilter}
           />,
         ]}
       />
@@ -664,6 +680,7 @@ export default function ReleaseList({ fetchReleases = listReleases }: ReleaseLis
                   </Box>
                 </Box>
               ),
+              sort: (a: Release, b: Release) => a.name.localeCompare(b.name),
             },
             {
               label: t('Namespace'),
@@ -672,6 +689,11 @@ export default function ReleaseList({ fetchReleases = listReleases }: ReleaseLis
             {
               label: t('Current Version'),
               getter: release => formatVersion(release.chart.metadata.appVersion),
+              sort: (a: Release, b: Release) => {
+                const vA = formatVersion(a.chart.metadata.appVersion);
+                const vB = formatVersion(b.chart.metadata.appVersion);
+                return vA.localeCompare(vB);
+              },
             },
             {
               label: t('Latest Version'),
@@ -689,6 +711,7 @@ export default function ReleaseList({ fetchReleases = listReleases }: ReleaseLis
                   {release.info.status}
                 </StatusLabel>
               ),
+              sort: (a: Release, b: Release) => a.info.status.localeCompare(b.info.status),
             },
             {
               label: t('Updated'),

app-catalog/src/components/releases/ReleaseFilters.tsx

@@ -5,18 +5,24 @@ import { useEffect, useRef, useState } from 'react';
 interface ReleaseFiltersProps {
   nameFilter: string;
   namespaceFilter: string;
+  statusFilter: string;
   /** Namespace strings derived from the currently loaded releases, used to populate the dropdown. */
   availableNamespaces: string[];
+  availableStatuses: string[];
   onNameFilterChange: (value: string) => void;
   onNamespaceFilterChange: (value: string) => void;
+  onStatusFilterChange: (value: string) => void;
 }
 
 export function ReleaseFilters({
   nameFilter,
   namespaceFilter,
+  statusFilter,
   availableNamespaces,
+  availableStatuses,
   onNameFilterChange,
   onNamespaceFilterChange,
+  onStatusFilterChange,
 }: ReleaseFiltersProps) {
   const [inputValue, setInputValue] = useState(nameFilter);
   const timeoutRef = useRef<NodeJS.Timeout>();
@@ -58,13 +64,23 @@ export function ReleaseFilters({
       <Autocomplete
         sx={{ width: { xs: '100%', sm: '200px', md: '250px' } }}
         options={availableNamespaces}
-        getOptionLabel={option => option || 'All'}
+        getOptionLabel={option => option || 'All Namespaces'}
         value={namespaceFilter || null}
         onChange={(event, newValue) => {
           onNamespaceFilterChange(newValue || '');
         }}
         renderInput={params => <TextField {...params} label="Namespace" size="small" />}
       />
+      <Autocomplete
+        sx={{ width: { xs: '100%', sm: '200px', md: '250px' } }}
+        options={availableStatuses}
+        getOptionLabel={option => option || 'All Statuses'}
+        value={statusFilter || null}
+        onChange={(event, newValue) => {
+          onStatusFilterChange(newValue || '');
+        }}
+        renderInput={params => <TextField {...params} label="Status" size="small" />}
+      />
     </Box>
   );
 }

app-catalog/vitest.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./vitest.setup.js'],
+  },
+});

app-catalog/vitest.setup.js

@@ -0,0 +1,11 @@
+import '@testing-library/jest-dom/vitest';
+
+Object.defineProperty(global, 'localStorage', {
+  value: {
+    getItem: () => null,
+    setItem: () => null,
+    removeItem: () => null,
+    clear: () => null,
+  },
+  writable: true,
+});