Add colours and icons for job statuses to Lookout UI

config/lookoutv2/config.yaml

@@ -17,17 +17,18 @@ postgres:
     dbname: lookout
     sslmode: disable
 prunerConfig:
-  expireAfter: 1008h  # 42 days / 6 weeks
+  expireAfter: 1008h # 42 days / 6 weeks
   deduplicationExpireAfter: 168h # 7 days
   timeout: 1h
   batchSize: 1000
 uiConfig:
   backend: "jsonb"
   armadaApiBaseUrl: "http://armada-server:8080"
+  customTitle: "Local Dev"
   userAnnotationPrefix: "armadaproject.io/"
   binocularsBaseUrlPattern: "http://armada-binoculars:8080"
   commandSpecs:
-  - name: Logs
-    template: "kubectl --context {{ runs[runs.length - 1].cluster }} -n {{ namespace }} logs armada-{{ jobId }}-0"
-  - name: Exec
-    template: "kubectl --context {{ runs[runs.length - 1].cluster }} -n {{ namespace }} exec -it armada-{{ jobId }}-0 /bin/sh"
+    - name: Logs
+      template: "kubectl --context {{ runs[runs.length - 1].cluster }} -n {{ namespace }} logs armada-{{ jobId }}-0"
+    - name: Exec
+      template: "kubectl --context {{ runs[runs.length - 1].cluster }} -n {{ namespace }} exec -it armada-{{ jobId }}-0 /bin/sh"

internal/lookout/ui/package.json

@@ -20,6 +20,12 @@
   "dependencies": {
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
+    "@fortawesome/fontawesome-common-types": "^6.7.1",
+    "@fortawesome/fontawesome-svg-core": "^6.7.1",
+    "@fortawesome/free-brands-svg-icons": "^6.7.1",
+    "@fortawesome/free-regular-svg-icons": "^6.7.1",
+    "@fortawesome/free-solid-svg-icons": "^6.7.1",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@mui/icons-material": "^6.1.10",
     "@mui/lab": "^6.0.0-beta.18",
     "@mui/material": "^6.1.10",

internal/lookout/ui/src/App.tsx

@@ -1,19 +1,18 @@
 import { Dispatch, ReactNode, SetStateAction, useEffect, useState } from "react"
 
-import { ThemeProvider, createTheme } from "@mui/material"
+import { ThemeProvider } from "@mui/material"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
-import { JobsTableContainer } from "containers/lookoutV2/JobsTableContainer"
 import { SnackbarProvider } from "notistack"
 import { UserManager, WebStorageStateStore, UserManagerSettings, User } from "oidc-client-ts"
 import { BrowserRouter, Navigate, Route, Routes, useNavigate } from "react-router-dom"
-import { Services, ServicesProvider } from "services/context"
-import { withRouter } from "utils"
 
 import NavBar from "./components/NavBar"
 import JobSetsContainer from "./containers/JobSetsContainer"
+import { JobsTableContainer } from "./containers/lookoutV2/JobsTableContainer"
 import { UserManagerContext, useUserManager } from "./oidc"
-import { CommandSpec } from "./utils"
-import { OidcConfig } from "./utils"
+import { Services, ServicesProvider } from "./services/context"
+import { theme } from "./theme/theme"
+import { CommandSpec, OidcConfig, withRouter } from "./utils"
 
 import "./App.css"
 
@@ -23,30 +22,6 @@ export const queryClient = new QueryClient({
   },
 })
 
-const theme = createTheme({
-  palette: {
-    primary: {
-      main: "#00aae1",
-      contrastText: "#fff",
-    },
-  },
-  typography: {
-    fontFamily: [
-      "-apple-system",
-      "BlinkMacSystemFont",
-      "'Segoe UI'",
-      "'Roboto'",
-      "'Oxygen'",
-      "'Ubuntu'",
-      "'Cantarell'",
-      "'Fira Sans'",
-      "'Droid Sans'",
-      "'Helvetica Neue'",
-      "sans-serif",
-    ].join(","),
-  },
-})
-
 type AppProps = {
   customTitle: string
   oidcConfig?: OidcConfig
@@ -159,7 +134,7 @@ export function App(props: AppProps): JSX.Element {
   }, [props.customTitle])
 
   const result = (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={theme} defaultMode="light">
       <SnackbarProvider anchorOrigin={{ horizontal: "right", vertical: "bottom" }} autoHideDuration={8000} maxSnack={3}>
         <QueryClientProvider client={queryClient}>
           <BrowserRouter>

internal/lookout/ui/src/components/NavBar.css

@@ -27,3 +27,10 @@
   flex-direction: row;
   align-items: flex-end;
 }
+
+.toolbar .nav-end {
+  display: flex;
+  flex-direction: row;
+  gap: 1em;
+  align-items: center;
+}

internal/lookout/ui/src/components/NavBar.tsx

@@ -51,17 +51,19 @@ function NavBar({ customTitle, router, username }: NavBarProps) {
   return (
     <AppBar position="static">
       <Toolbar className="toolbar">
-        <a href="/" className="title">
-          <img className="logo" src={process.env.PUBLIC_URL + "./Armada-white-rectangle.png"} alt={""} />
-          <Typography variant="h6" className="app-name">
-            Lookout
-          </Typography>
-          {customTitle && (
-            <Typography variant="h5" className="app-name" style={{ paddingLeft: "3em" }}>
-              {customTitle}
+        <div>
+          <a href="/" className="title">
+            <img className="logo" src={process.env.PUBLIC_URL + "./Armada-white-rectangle.png"} alt={""} />
+            <Typography variant="h6" className="app-name">
+              Lookout
             </Typography>
-          )}
-        </a>
+            {customTitle && (
+              <Typography variant="h5" className="app-name" style={{ paddingLeft: "3em" }}>
+                {customTitle}
+              </Typography>
+            )}
+          </a>
+        </div>
         <div className="nav-items">
           <Tabs
             value={currentValue}
@@ -77,11 +79,15 @@ function NavBar({ customTitle, router, username }: NavBarProps) {
             ))}
           </Tabs>
         </div>
-        {username && (
-          <Typography variant="h6" className="username" style={{ marginLeft: "auto" }}>
-            Welcome, {username}!
-          </Typography>
-        )}
+        <div className="nav-end">
+          <div>
+            {username && (
+              <Typography variant="h6" className="username" style={{ marginLeft: "auto" }}>
+                Welcome, {username}!
+              </Typography>
+            )}
+          </div>
+        </div>
       </Toolbar>
     </AppBar>
   )

internal/lookout/ui/src/components/fontAwesomeIcons.tsx

@@ -0,0 +1,66 @@
+import { forwardRef } from "react"
+
+import { IconDefinition } from "@fortawesome/fontawesome-common-types"
+import {
+  faBan,
+  faCheckCircle,
+  faExchangeAlt,
+  faFileContract,
+  faHand,
+  faHourglassHalf,
+  faPlayCircle,
+  faSpinner,
+  faTimesCircle,
+} from "@fortawesome/free-solid-svg-icons"
+import { SvgIcon, SvgIconProps } from "@mui/material"
+
+import "@fortawesome/fontawesome-svg-core/styles.css"
+
+export interface FontAwesomeSvgIconProps extends SvgIconProps {
+  icon: IconDefinition
+}
+
+export const FontAwesomeSvgIcon = forwardRef<SVGSVGElement, FontAwesomeSvgIconProps>(
+  ({ icon, ...svgIconProps }, ref) => {
+    const {
+      icon: [width, height, , , svgPathData],
+    } = icon
+
+    return (
+      <SvgIcon ref={ref} viewBox={`0 0 ${width} ${height}`} {...svgIconProps}>
+        {typeof svgPathData === "string" ? (
+          <path d={svgPathData} />
+        ) : (
+          /**
+           * A multi-path Font Awesome icon seems to imply a duotune icon. The 0th path seems to
+           * be the faded element (referred to as the "secondary" path in the Font Awesome docs)
+           * of a duotone icon. 40% is the default opacity.
+           *
+           * @see https://fontawesome.com/how-to-use/on-the-web/styling/duotone-icons#changing-opacity
+           */
+          svgPathData.map((d: string, i: number) => <path style={{ opacity: i === 0 ? 0.4 : 1 }} d={d} />)
+        )}
+      </SvgIcon>
+    )
+  },
+)
+
+export const FaHourglassHalf = (svgIconProps: SvgIconProps) => (
+  <FontAwesomeSvgIcon icon={faHourglassHalf} {...svgIconProps} />
+)
+export const FaSpinner = (svgIconProps: SvgIconProps) => <FontAwesomeSvgIcon icon={faSpinner} {...svgIconProps} />
+export const FaPlayCircle = (svgIconProps: SvgIconProps) => <FontAwesomeSvgIcon icon={faPlayCircle} {...svgIconProps} />
+export const FaCheckCircle = (svgIconProps: SvgIconProps) => (
+  <FontAwesomeSvgIcon icon={faCheckCircle} {...svgIconProps} />
+)
+export const FaTimesCircle = (svgIconProps: SvgIconProps) => (
+  <FontAwesomeSvgIcon icon={faTimesCircle} {...svgIconProps} />
+)
+export const FaBan = (svgIconProps: SvgIconProps) => <FontAwesomeSvgIcon icon={faBan} {...svgIconProps} />
+export const FaExcahngeAlt = (svgIconProps: SvgIconProps) => (
+  <FontAwesomeSvgIcon icon={faExchangeAlt} {...svgIconProps} />
+)
+export const FaFileContract = (svgIconProps: SvgIconProps) => (
+  <FontAwesomeSvgIcon icon={faFileContract} {...svgIconProps} />
+)
+export const FaHand = (svgIconProps: SvgIconProps) => <FontAwesomeSvgIcon icon={faHand} {...svgIconProps} />

internal/lookout/ui/src/components/job-sets/JobSetTable.tsx

@@ -1,13 +1,15 @@
+import { Stack } from "@mui/material"
 import Truncate from "react-truncate"
-import { TableCellProps, Table as VirtualizedTable, Column, defaultTableCellRenderer } from "react-virtualized"
+import { TableCellProps, Table as VirtualizedTable, Column } from "react-virtualized"
 
-import { JobState } from "../../models/lookoutV2Models"
+import { JobState, jobStateColors, jobStateIcons } from "../../models/lookoutV2Models"
 import { JobSet } from "../../services/JobService"
+import { formatJobState } from "../../utils/jobsTableFormatters"
 import CheckboxHeaderRow from "../CheckboxHeaderRow"
 import CheckboxRow from "../CheckboxRow"
 import "./JobSetTable.css"
-import LinkCell from "../LinkCell"
 import SortableHeaderCell from "../SortableHeaderCell"
+import { JobStateCountChip } from "../lookoutV2/JobStateCountChip"
 
 interface JobSetTableProps {
   height: number
@@ -24,12 +26,8 @@ interface JobSetTableProps {
   onJobSetStateClick(rowIndex: number, state: string): void
 }
 
-function cellRendererForState(cellProps: TableCellProps, onClickFunc: () => void) {
-  if (cellProps.cellData > 0) {
-    return <LinkCell onClick={onClickFunc} {...cellProps} />
-  }
-
-  return defaultTableCellRenderer(cellProps)
+function cellRendererForState(cellProps: TableCellProps, jobState: JobState, onClickFunc: () => void) {
+  return <JobStateCountChip state={jobState} count={cellProps.cellData} onClick={onClickFunc} />
 }
 
 function cellRendererForJobSet(cellProps: TableCellProps, width: number) {
@@ -99,6 +97,7 @@ export default function JobSetTable(props: JobSetTableProps) {
           dataKey="jobSetId"
           width={0.5 * props.width}
           label="Job Set"
+          headerRenderer={(cellProps) => cellProps.label}
           cellRenderer={(cellProps) => cellRendererForJobSet(cellProps, 0.5 * props.width)}
           className="job-set-table-job-set-name-cell"
         />
@@ -116,60 +115,35 @@ export default function JobSetTable(props: JobSetTableProps) {
             />
           )}
         />
-        <Column
-          dataKey="jobsQueued"
-          width={0.06 * props.width}
-          label="Queued"
-          className="job-set-table-number-cell"
-          cellRenderer={(cellProps) =>
-            cellRendererForState(cellProps, () => props.onJobSetStateClick(cellProps.rowIndex, JobState.Queued))
-          }
-        />
-        <Column
-          dataKey="jobsPending"
-          width={0.06 * props.width}
-          label="Pending"
-          className="job-set-table-number-cell"
-          cellRenderer={(cellProps) =>
-            cellRendererForState(cellProps, () => props.onJobSetStateClick(cellProps.rowIndex, JobState.Pending))
-          }
-        />
-        <Column
-          dataKey="jobsRunning"
-          width={0.06 * props.width}
-          label="Running"
-          className="job-set-table-number-cell"
-          cellRenderer={(cellProps) =>
-            cellRendererForState(cellProps, () => props.onJobSetStateClick(cellProps.rowIndex, JobState.Running))
-          }
-        />
-        <Column
-          dataKey="jobsSucceeded"
-          width={0.06 * props.width}
-          label="Succeeded"
-          className="job-set-table-number-cell"
-          cellRenderer={(cellProps) =>
-            cellRendererForState(cellProps, () => props.onJobSetStateClick(cellProps.rowIndex, JobState.Succeeded))
-          }
-        />
-        <Column
-          dataKey="jobsFailed"
-          width={0.06 * props.width}
-          label="Failed"
-          className="job-set-table-number-cell"
-          cellRenderer={(cellProps) =>
-            cellRendererForState(cellProps, () => props.onJobSetStateClick(cellProps.rowIndex, JobState.Failed))
-          }
-        />
-        <Column
-          dataKey="jobsCancelled"
-          width={0.06 * props.width}
-          label="Cancelled"
-          className="job-set-table-number-cell"
-          cellRenderer={(cellProps) =>
-            cellRendererForState(cellProps, () => props.onJobSetStateClick(cellProps.rowIndex, JobState.Cancelled))
-          }
-        />
+        {(
+          [
+            [JobState.Queued, "jobsQueued"],
+            [JobState.Pending, "jobsPending"],
+            [JobState.Running, "jobsRunning"],
+            [JobState.Succeeded, "jobsSucceeded"],
+            [JobState.Failed, "jobsFailed"],
+            [JobState.Cancelled, "jobsCancelled"],
+          ] as [JobState, keyof JobSet][]
+        ).map(([jobState, dataKey]) => {
+          const Icon = jobStateIcons[jobState]
+          return (
+            <Column
+              key={jobState}
+              dataKey={dataKey}
+              width={0.06 * props.width}
+              label={
+                <Stack direction="row" spacing={1} alignItems="center">
+                  <span>{formatJobState(jobState)}</span>
+                  <Icon fontSize="inherit" color={jobStateColors[jobState]} />
+                </Stack>
+              }
+              className="job-set-table-number-cell"
+              cellRenderer={(cellProps) =>
+                cellRendererForState(cellProps, jobState, () => props.onJobSetStateClick(cellProps.rowIndex, jobState))
+              }
+            />
+          )
+        })}
       </VirtualizedTable>
     </div>
   )

internal/lookout/ui/src/components/lookoutV2/JobGroupStateCounts.module.css

@@ -1,8 +1,8 @@
 .container {
   display: flex;
   flex-direction: row;
-  justify-content: center;
-  align-items: center;
+  flex-wrap: wrap;
+  justify-content: flex-start;
   gap: 5px;
 }