capture API errors in Jenkins card and show WarningPanel

Signed-off-by: Alexander Kaserbacher <alex.kaserbacher@icloud.com>

plugins/jenkins/src/components/Cards/Cards.tsx

@@ -17,6 +17,7 @@ import {
   InfoCard,
   InfoCardVariants,
   StructuredMetadataTable,
+  WarningPanel,
 } from '@backstage/core';
 import { LinearProgress, Link, makeStyles, Theme } from '@material-ui/core';
 import ExternalLinkIcon from '@material-ui/icons/Launch';
@@ -83,11 +84,19 @@ export const LatestRunCard = ({
   variant?: InfoCardVariants;
 }) => {
   const projectName = useProjectSlugFromEntity();
-  const [{ builds, loading }] = useBuilds(projectName, branch);
+  const [{ builds, loading, error }] = useBuilds(projectName, branch);
   const latestRun = builds ?? {};
   return (
     <InfoCard title={`Latest ${branch} build`} variant={variant}>
-      <WidgetContent loading={loading} branch={branch} latestRun={latestRun} />
+      {!error ? (
+        <WidgetContent
+          loading={loading}
+          branch={branch}
+          latestRun={latestRun}
+        />
+      ) : (
+        <WarningPanel severity="error" message={error.message} />
+      )}
     </InfoCard>
   );
 };

plugins/jenkins/src/components/useBuilds.ts

@@ -25,6 +25,7 @@ export function useBuilds(projectName: string, branch?: string) {
   const [total, setTotal] = useState(0);
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(5);
+  const [error, setError] = useState<Error>();
 
   const restartBuild = async (buildName: string) => {
     try {
@@ -48,6 +49,7 @@ export function useBuilds(projectName: string, branch?: string) {
 
       return build || [];
     } catch (e) {
+      setError(e);
       throw e;
     }
   }, [api, errorApi, projectName, branch]);
@@ -60,6 +62,7 @@ export function useBuilds(projectName: string, branch?: string) {
       builds,
       projectName,
       total,
+      error,
     },
     {
       builds,