JobList: Add expandable failure reasons

Fixes: #48 Signed-off-by: Zack Cerza <[email protected]>
ceph · Dec 12, 2023 · ed8bb73 · ed8bb73
1 parent 0c058f8
commit ed8bb73
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 4 deletions.
diff --git a/src/components/JobList/index.tsx b/src/components/JobList/index.tsx
@@ -4,6 +4,7 @@ import {
   useMaterialReactTable,
   MaterialReactTable,
   type MRT_ColumnDef,
+  type MRT_Row,
 } from 'material-react-table';
 import type {
   DecodedValueMap,
@@ -19,6 +20,8 @@ import { dirName } from "../../lib/utils";
 import useDefaultTableOptions from "../../lib/table";
 
 import sentryIcon from "./assets/sentry.svg";
+import { ReactNode } from "react";
+import { Typography } from "@mui/material";
 
 
 const columns: MRT_ColumnDef<Job>[] = [
@@ -158,7 +161,30 @@ const columns: MRT_ColumnDef<Job>[] = [
   },
 ];
 
-interface JobListProps {
+type JobDetailPanelProps = {
+  row: MRT_Row<Job>;
+}
+
+function JobDetailPanel(props: JobDetailPanelProps): ReactNode {
+  const failure_reason = props.row.original.failure_reason;
+  if ( ! failure_reason ) return null;
+  return (
+    <div>
+      <Typography
+        variant="subtitle1"
+      >
+        Failure Reason:
+      </Typography>
+      <Typography
+        variant="caption"
+      >
+        <code>{failure_reason}</code>
+      </Typography>
+    </div>
+  )
+};
+
+type JobListProps = {
   query: UseQueryResult<Run> | UseQueryResult<NodeJobs>;
   params: DecodedValueMap<QueryParamConfigMap>;
   setter: SetQuery<QueryParamConfigMap>;
@@ -193,6 +219,7 @@ export default function JobList({ query }: JobListProps) {
     state: {
       isLoading: query.isLoading || query.isFetching,
     },
+    renderDetailPanel: JobDetailPanel,
   });
   return <MaterialReactTable table={table} />
 }
diff --git a/src/lib/table.ts b/src/lib/table.ts
@@ -39,10 +39,17 @@ export default function useDefaultTableOptions<TData extends MRT_RowData>(): Par
       sx: {
         'tr td': {padding: '2px'},
         'tr td:nth-of-type(1)': {paddingLeft: '8px'},
-        'tr.error td': {backgroundColor: palette.error.main},
-        'tr.warning td': {backgroundColor: palette.warning.main},
+        'tr.error td': {
+          backgroundColor: palette.error.main,
+          color: palette.error.contrastText,
+        },
+        'tr.warning td': {
+          backgroundColor: palette.warning.main,
+          color: palette.error.contrastText,
+        },
         'tr.info td': {backgroundColor: palette.info.main},
         'tr.success td': {backgroundColor: palette.success.main},
+        'tr.empty': {display: 'none'},
         '@media (prefers-color-scheme: dark)': {
           'tr:hover td': {filter: "brightness(85%)"},
         },
@@ -51,7 +58,12 @@ export default function useDefaultTableOptions<TData extends MRT_RowData>(): Par
         },
       },
     },
-    muiTableBodyRowProps: ({row}) => {
+    muiTableBodyRowProps: ({row, isDetailPanel}) => {
+      if ( isDetailPanel && ! row.original.failure_reason ) {
+        return {
+          className: "empty",
+        }
+      }
       const category = statusToThemeCategory(row.original.status);
       return {
         className: category,