Add colours and icons for job statuses to Lookout UI (#4095)

* ARMADA-3015 add colours and icons to Lookout UI for displaying job statuses (#307) * Add coloured icons to display of job statuses in Jobs view * Add job status colours to job sets page * Fix lint (#308) * Fix TypeScript with casting The TypeScript type checker sometimes fails when the development server is run because it does not correctly infer this type. This seems to be inconsistent and so was not caught in the previous commit which introduced this change. --------- Co-authored-by: Maurice Yap <[email protected]>
armadaproject · Dec 13, 2024 · 0d3e5bc · 0d3e5bc
1 parent 81c2942
commit 0d3e5bc
Show file tree

Hide file tree

Showing 24 changed files with 437 additions and 260 deletions.
diff --git a/config/lookoutv2/config.yaml b/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"
diff --git a/internal/lookout/ui/package.json b/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",

diff --git a/internal/lookout/ui/src/App.tsx b/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>

diff --git a/internal/lookout/ui/src/components/LinkCell.css b/internal/lookout/ui/src/components/LinkCell.css
diff --git a/internal/lookout/ui/src/components/LinkCell.tsx b/internal/lookout/ui/src/components/LinkCell.tsx
diff --git a/internal/lookout/ui/src/components/NavBar.css b/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;
+}
diff --git a/internal/lookout/ui/src/components/NavBar.tsx b/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>
   )

diff --git a/internal/lookout/ui/src/components/fontAwesomeIcons.tsx b/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} />
diff --git a/internal/lookout/ui/src/components/job-sets/JobSetTable.tsx b/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>
   )

diff --git a/internal/lookout/ui/src/components/lookoutV2/JobGroupStateCounts.module.css b/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;
 }