frontend: Pass errors to ResourceListView in all List pages

Signed-off-by: Oleksandr Dubenko <[email protected]>

frontend/src/components/cluster/Overview.tsx

@@ -8,7 +8,6 @@ import Node from '../../lib/k8s/node';
 import Pod from '../../lib/k8s/pod';
 import { useFilterFunc } from '../../lib/util';
 import { DateLabel, Link, PageGrid, StatusLabel } from '../common';
-import Empty from '../common/EmptyContent';
 import ResourceListView from '../common/Resource/ResourceListView';
 import { SectionBox } from '../common/SectionBox';
 import ShowHideLabel from '../common/ShowHideLabel';
@@ -19,6 +18,7 @@ import {
   NodesStatusCircleChart,
   PodsStatusCircleChart,
 } from './Charts';
+import { ClusterGroupErrorMessage } from './ClusterGroupErrorMessage';
 
 export default function Overview() {
   const { t } = useTranslation(['translation']);
@@ -35,7 +35,7 @@ export default function Overview() {
     <PageGrid>
       <SectionBox title={t('translation|Overview')} py={2} mt={[4, 0, 0]}>
         {noPermissions ? (
-          <Empty color="error">{t('translation|No permissions to list pods.')}</Empty>
+          <ClusterGroupErrorMessage errors={[metricsError]} />
         ) : (
           <Grid container justifyContent="flex-start" alignItems="stretch" spacing={4}>
             <Grid item xs sx={{ maxWidth: '300px' }}>
@@ -74,7 +74,7 @@ function EventsSection() {
       )
     )
   );
-  const [events, eventsError] = Event.useList({ limit: Event.maxLimit });
+  const { items: events, errors: eventsErrors } = Event.useList({ limit: Event.maxLimit });
 
   const warningActionFilterFunc = (event: Event, search?: string) => {
     if (!filterFunc(event, search)) {
@@ -138,7 +138,7 @@ function EventsSection() {
       }}
       defaultGlobalFilter={eventsFilter ?? undefined}
       data={events}
-      errorMessage={Event.getErrorMessage(eventsError)}
+      errors={eventsErrors}
       columns={[
         {
           label: t('Type'),

frontend/src/components/common/Link.tsx

@@ -35,7 +35,7 @@ function KubeObjectLink(props: { kubeObject: KubeObject; [prop: string]: any })
 
   const client = useQueryClient();
   const { namespace, name } = kubeObject.metadata;
-  const endpoint = useEndpoints(kubeObject._class().apiEndpoint.apiInfo, kubeObject.cluster);
+  const { endpoint } = useEndpoints(kubeObject._class().apiEndpoint.apiInfo, kubeObject.cluster);
 
   return (
     <MuiLink

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

@@ -975,15 +975,15 @@ export function OwnedPodsSection(props: OwnedPodsSectionProps) {
     fieldSelector: resource.kind === 'Node' ? `spec.nodeName=${resource.metadata.name}` : undefined,
   };
 
-  const [pods, error] = Pod.useList(queryData);
+  const { items: pods, errors } = Pod.useList(queryData);
   const onlyOneNamespace = !!resource.metadata.namespace || resource.kind === 'Namespace';
   const hideNamespaceFilter = onlyOneNamespace || noSearch;
 
   return (
     <PodListRenderer
       hideColumns={hideColumns || onlyOneNamespace ? ['namespace'] : undefined}
       pods={pods}
-      error={error}
+      errors={errors}
       noNamespaceFilter={hideNamespaceFilter}
     />
   );

frontend/src/components/cronjob/Details.tsx

@@ -124,7 +124,7 @@ export default function CronJobDetails(props: { name?: string; namespace?: strin
   const { t, i18n } = useTranslation('glossary');
   const dispatch: AppDispatch = useDispatch();
 
-  const [jobs, jobsError] = Job.useList({ namespace });
+  const { items: jobs, errors } = Job.useList({ namespace });
   const [cronJob] = CronJob.useGet(name, namespace);
   const [isSpawnDialogOpen, setIsSpawnDialogOpen] = useState(false);
   const [isPendingSuspend, setIsPendingSuspend] = useState(false);
@@ -233,7 +233,7 @@ export default function CronJobDetails(props: { name?: string; namespace?: strin
         cronJob && [
           <JobsListRenderer
             jobs={ownedJobs}
-            error={CronJob.getErrorMessage(jobsError)}
+            errors={errors}
             hideColumns={['namespace']}
             noNamespaceFilter
           />,

frontend/src/components/endpoints/__snapshots__/EndpointDetails.Error.stories.storyshot

@@ -92,7 +92,7 @@
               <p
                 class="MuiTypography-root MuiTypography-body1 MuiTypography-alignCenter css-9ldkza-MuiTypography-root"
               >
-                Error: Unreachable
+                TypeError: Failed to fetch
               </p>
             </div>
           </div>

frontend/src/components/horizontalPodAutoscaler/__snapshots__/HPADetails.Error.stories.storyshot

@@ -79,7 +79,7 @@
               <p
                 class="MuiTypography-root MuiTypography-body1 MuiTypography-alignCenter css-9ldkza-MuiTypography-root"
               >
-                Error: Unreachable
+                TypeError: Failed to fetch
               </p>
             </div>
           </div>

frontend/src/components/job/List.tsx

@@ -1,6 +1,7 @@
 import { Icon } from '@iconify/react';
 import { Box } from '@mui/material';
 import { useTranslation } from 'react-i18next';
+import { ApiError } from '../../lib/k8s/api/v2/ApiError';
 import { KubeContainer } from '../../lib/k8s/cluster';
 import Job from '../../lib/k8s/job';
 import { formatDuration } from '../../lib/util';
@@ -54,20 +55,20 @@ export function makeJobStatusLabel(job: Job) {
 }
 
 export default function JobsList() {
-  const [jobs, error] = Job.useList({ namespace: useNamespaces() });
-  return <JobsListRenderer jobs={jobs} error={Job.getErrorMessage(error)} reflectTableInURL />;
+  const { items: jobs, errors } = Job.useList({ namespace: useNamespaces() });
+  return <JobsListRenderer jobs={jobs} errors={errors} reflectTableInURL />;
 }
 
 export interface JobsListRendererProps {
   jobs: Job[] | null;
-  error: string | null;
+  errors?: ApiError[] | null;
   hideColumns?: 'namespace'[];
   reflectTableInURL?: SimpleTableProps['reflectInURL'];
   noNamespaceFilter?: boolean;
 }
 
 export function JobsListRenderer(props: JobsListRendererProps) {
-  const { jobs, error, hideColumns = [], reflectTableInURL = 'jobs', noNamespaceFilter } = props;
+  const { jobs, errors, hideColumns = [], reflectTableInURL = 'jobs', noNamespaceFilter } = props;
   const { t } = useTranslation(['glossary', 'translation']);
 
   function getCompletions(job: Job) {
@@ -89,7 +90,7 @@ export function JobsListRenderer(props: JobsListRendererProps) {
         noNamespaceFilter,
       }}
       hideColumns={hideColumns}
-      errorMessage={error}
+      errors={errors}
       columns={[
         'name',
         'namespace',

frontend/src/components/limitRange/List.tsx

@@ -7,16 +7,16 @@ import ResourceListView from '../common/Resource/ResourceListView';
 
 export interface LimitRangeProps {
   limitRanges: LimitRange[] | null;
-  error: ApiError | null;
+  errors: ApiError[] | null;
   hideColumns?: string[];
   reflectTableInURL?: SimpleTableProps['reflectInURL'];
   noNamespaceFilter?: boolean;
 }
 
 export function LimitRangeRenderer(props: LimitRangeProps) {
   const {
+    errors,
     limitRanges,
-    error,
     hideColumns = [],
     reflectTableInURL = 'limitranges',
     noNamespaceFilter,
@@ -31,7 +31,7 @@ export function LimitRangeRenderer(props: LimitRangeProps) {
       headerProps={{
         noNamespaceFilter,
       }}
-      errorMessage={LimitRange.getErrorMessage(error)}
+      errors={errors}
       data={limitRanges}
       reflectInURL={reflectTableInURL}
       id="headlamp-limitranges"
@@ -40,7 +40,7 @@ export function LimitRangeRenderer(props: LimitRangeProps) {
 }
 
 export function LimitRangeList() {
-  const [limitRanges, error] = LimitRange.useList({ namespace: useNamespaces() });
+  const { items: limitRanges, errors } = LimitRange.useList({ namespace: useNamespaces() });
 
-  return <LimitRangeRenderer limitRanges={limitRanges} error={error} reflectTableInURL />;
+  return <LimitRangeRenderer limitRanges={limitRanges} errors={errors} reflectTableInURL />;
 }

frontend/src/components/namespace/Details.tsx

@@ -69,15 +69,15 @@ export interface NamespacedLimitRangesSectionProps {
 export function NamespacedLimitRangesSection(props: NamespacedLimitRangesSectionProps) {
   const { resource } = props;
 
-  const [limitRanges, error] = LimitRange.useList({
+  const { items: limitRanges, errors } = LimitRange.useList({
     namespace: resource.metadata.name,
   });
 
   return (
     <LimitRangeRenderer
       hideColumns={['namespace']}
       limitRanges={limitRanges}
-      error={error}
+      errors={errors}
       noNamespaceFilter
     />
   );
@@ -90,15 +90,15 @@ export interface NamespacedResourceQuotasSectionProps {
 export function NamespacedResourceQuotasSection(props: NamespacedResourceQuotasSectionProps) {
   const { resource } = props;
 
-  const [resourceQuotas, error] = ResourceQuota.useList({
+  const { items: resourceQuotas, errors } = ResourceQuota.useList({
     namespace: resource.metadata.name,
   });
 
   return (
     <ResourceQuotaRenderer
       hideColumns={['namespace']}
       resourceQuotas={resourceQuotas}
-      error={error}
+      errors={errors}
       noNamespaceFilter
     />
   );

frontend/src/components/pod/List.tsx

@@ -10,7 +10,6 @@ import { HeadlampEventType, useEventCallback } from '../../redux/headlampEventSl
 import { LightTooltip, Link, SimpleTableProps } from '../common';
 import { StatusLabel, StatusLabelProps } from '../common/Label';
 import ResourceListView from '../common/Resource/ResourceListView';
-import { ResourceTableProps } from '../common/Resource/ResourceTable';
 
 export function makePodStatusLabel(pod: Pod) {
   const phase = pod.status.phase;
@@ -61,22 +60,14 @@ function getReadinessGatesStatus(pods: Pod) {
 
 export interface PodListProps {
   pods: Pod[] | null;
-  error: ApiError | null;
   hideColumns?: ('namespace' | 'restarts')[];
   reflectTableInURL?: SimpleTableProps['reflectInURL'];
   noNamespaceFilter?: boolean;
-  clusterErrors?: ResourceTableProps<Pod>['clusterErrors'];
+  errors?: ApiError[] | null;
 }
 
 export function PodListRenderer(props: PodListProps) {
-  const {
-    pods,
-    error,
-    hideColumns = [],
-    reflectTableInURL = 'pods',
-    noNamespaceFilter,
-    clusterErrors,
-  } = props;
+  const { pods, hideColumns = [], reflectTableInURL = 'pods', noNamespaceFilter, errors } = props;
   const { t } = useTranslation(['glossary', 'translation']);
 
   return (
@@ -86,7 +77,7 @@ export function PodListRenderer(props: PodListProps) {
         noNamespaceFilter,
       }}
       hideColumns={hideColumns}
-      errorMessage={Pod.getErrorMessage(error)}
+      errors={errors}
       columns={[
         'name',
         'namespace',
@@ -210,26 +201,23 @@ export function PodListRenderer(props: PodListProps) {
       ]}
       data={pods}
       reflectInURL={reflectTableInURL}
-      clusterErrors={clusterErrors}
       id="headlamp-pods"
     />
   );
 }
 
 export default function PodList() {
-  const { items, error, clusterErrors } = Pod.useList({ namespace: useNamespaces() });
+  const { items, errors } = Pod.useList({ namespace: useNamespaces() });
 
   const dispatchHeadlampEvent = useEventCallback(HeadlampEventType.LIST_VIEW);
 
   React.useEffect(() => {
     dispatchHeadlampEvent({
       resources: items ?? [],
       resourceKind: 'Pod',
-      error: error || undefined,
+      error: errors?.[0] || undefined,
     });
-  }, [items, error]);
+  }, [items, errors]);
 
-  return (
-    <PodListRenderer pods={items} error={error} clusterErrors={clusterErrors} reflectTableInURL />
-  );
+  return <PodListRenderer pods={items} errors={errors} reflectTableInURL />;
 }

frontend/src/components/podDisruptionBudget/__snapshots__/pdbDetails.Error.stories.storyshot

@@ -79,7 +79,7 @@
               <p
                 class="MuiTypography-root MuiTypography-body1 MuiTypography-alignCenter css-9ldkza-MuiTypography-root"
               >
-                Error: Unreachable
+                TypeError: Failed to fetch
               </p>
             </div>
           </div>

frontend/src/components/priorityClass/__snapshots__/priorityClassDetails.Error.stories.storyshot

@@ -79,7 +79,7 @@
               <p
                 class="MuiTypography-root MuiTypography-body1 MuiTypography-alignCenter css-9ldkza-MuiTypography-root"
               >
-                Error: Unreachable
+                TypeError: Failed to fetch
               </p>
             </div>
           </div>

frontend/src/components/resourceQuota/List.tsx

@@ -24,7 +24,7 @@ const PaddedChip = styled(Chip)({
 
 export interface ResourceQuotaProps {
   resourceQuotas: ResourceQuota[] | null;
-  error: ApiError | null;
+  errors: ApiError[] | null;
   hideColumns?: string[];
   reflectTableInURL?: SimpleTableProps['reflectInURL'];
   noNamespaceFilter?: boolean;
@@ -33,7 +33,7 @@ export interface ResourceQuotaProps {
 export function ResourceQuotaRenderer(props: ResourceQuotaProps) {
   const {
     resourceQuotas,
-    error,
+    errors,
     hideColumns = [],
     reflectTableInURL = 'resourcequotas',
     noNamespaceFilter,
@@ -77,7 +77,7 @@ export function ResourceQuotaRenderer(props: ResourceQuotaProps) {
       headerProps={{
         noNamespaceFilter,
       }}
-      errorMessage={ResourceQuota.getErrorMessage(error)}
+      errors={errors}
       data={resourceQuotas}
       reflectInURL={reflectTableInURL}
       id="headlamp-resourcequotas"
@@ -86,7 +86,9 @@ export function ResourceQuotaRenderer(props: ResourceQuotaProps) {
 }
 
 export default function ResourceQuotaList() {
-  const [resourceQuotas, error] = ResourceQuota.useList({ namespace: useNamespaces() });
+  const { items: resourceQuotas, errors } = ResourceQuota.useList({ namespace: useNamespaces() });
 
-  return <ResourceQuotaRenderer resourceQuotas={resourceQuotas} error={error} reflectTableInURL />;
+  return (
+    <ResourceQuotaRenderer resourceQuotas={resourceQuotas} errors={errors} reflectTableInURL />
+  );
 }

frontend/src/components/resourceQuota/__snapshots__/resourceQuotaDetails.Error.stories.storyshot

@@ -79,7 +79,7 @@
               <p
                 class="MuiTypography-root MuiTypography-body1 MuiTypography-alignCenter css-9ldkza-MuiTypography-root"
               >
-                Error: Unreachable
+                TypeError: Failed to fetch
               </p>
             </div>
           </div>