Add scheduling reports to Lookout UI (#4144)

Add scheduling reports to a new sidebar tab for jobs which in a queuing state. This tab displays the time the job has spent in the queue, scheduling reports for the job (reports for the queue and overall are also available, but initially hidden), and parameters which are significant in the context of scheduling - the priority and resource requests.

.gitignore

@@ -14,6 +14,10 @@ junit.xml
 docker-compose.dev.yaml
 delve
 
+# VS Code debugging
+__debug_bin
+**/__debug_bin*
+
 # Build artifacts
 dist
 .goreleaser-minimal.yml

.goreleaser.yml

@@ -222,6 +222,7 @@ dockers:
       - internal/lookout/ui
       - pkg/api/api.swagger.json
       - pkg/api/binoculars/api.swagger.json
+      - pkg/api/schedulerobjects/api.swagger.json
     dockerfile: ./build/bundles/lookout/Dockerfile
 
   - id: full-bundle
@@ -255,6 +256,7 @@ dockers:
       - internal/lookout/ui
       - pkg/api/api.swagger.json
       - pkg/api/binoculars/api.swagger.json
+      - pkg/api/schedulerobjects/api.swagger.json
     dockerfile: ./build/bundles/full/Dockerfile
 
   - id: server
@@ -352,6 +354,7 @@ dockers:
       - internal/lookout/ui
       - pkg/api/api.swagger.json
       - pkg/api/binoculars/api.swagger.json
+      - pkg/api/schedulerobjects/api.swagger.json
       - config/lookoutv2/config.yaml
       - config/lookoutingesterv2/config.yaml
     dockerfile: ./build/lookoutv2/Dockerfile

.run/LookoutV2.run.xml

@@ -6,6 +6,8 @@
       <env name="ARMADA_CORSALLOWEDORIGINS" value="&quot;http://localhost:3000,http://localhost:4173,http://localhost:8089,http://localhost:10000,http://example.com:10000,http://example.com:8089&quot;" />
       <env name="ARMADA_POSTGRES_CONNECTION_HOST" value="localhost" />
       <env name="ARMADA_POSTGRES_CONNECTION_PORT" value="5432" />
+      <env name="ARMADA_UICONFIG_ARMADAAPIBASEURL" value="http://localhost:8080" />
+      <env name="ARMADA_UICONFIG_BINOCULARSBASEURLPATTERN" value="http://localhost:8082" />
     </envs>
     <kind value="FILE" />
     <package value="$PROJECT_DIR$/cmd/lookoutv2/main.go" />

build/bundles/full/Dockerfile

@@ -9,6 +9,7 @@ LABEL org.opencontainers.image.url=https://hub.docker.com/r/gresearch/armada-ful
 COPY internal/lookout/ui /project/internal/lookout/ui
 COPY pkg/api/*.swagger.json /project/pkg/api/
 COPY pkg/api/binoculars/*.swagger.json /project/pkg/api/binoculars/
+COPY pkg/api/schedulerobjects/*.swagger.json /project/pkg/api/schedulerobjects/
 RUN ./project/internal/lookout/ui/openapi.sh
 
 FROM ${NODE_BUILD_IMAGE} AS NODE

build/lookoutv2/Dockerfile

@@ -7,6 +7,7 @@ FROM ${OPENAPI_BUILD_IMAGE} AS OPENAPI
 COPY internal/lookout/ui /project/internal/lookout/ui
 COPY pkg/api/*.swagger.json /project/pkg/api/
 COPY pkg/api/binoculars/*.swagger.json /project/pkg/api/binoculars/
+COPY pkg/api/schedulerobjects/*.swagger.json /project/pkg/api/schedulerobjects/
 RUN ./project/internal/lookout/ui/openapi.sh
 
 FROM ${NODE_BUILD_IMAGE} AS NODE

cmd/server/main.go

@@ -21,6 +21,7 @@ import (
 	"github.com/armadaproject/armada/internal/server"
 	"github.com/armadaproject/armada/internal/server/configuration"
 	"github.com/armadaproject/armada/pkg/api"
+	"github.com/armadaproject/armada/pkg/api/schedulerobjects"
 )
 
 const CustomConfigLocation string = "config"
@@ -92,6 +93,7 @@ func main() {
 		api.RegisterSubmitHandler,
 		api.RegisterEventHandler,
 		api.RegisterJobsHandler,
+		schedulerobjects.RegisterSchedulerReportingHandler,
 	)
 	defer shutdownGateway()
 

internal/armadactl/scheduling.go

@@ -4,7 +4,7 @@ import (
 	"fmt"
 
 	"github.com/armadaproject/armada/internal/common"
-	"github.com/armadaproject/armada/internal/scheduler/schedulerobjects"
+	"github.com/armadaproject/armada/pkg/api/schedulerobjects"
 	"github.com/armadaproject/armada/pkg/client"
 )
 

internal/lookout/ui/openapi.sh

@@ -6,3 +6,7 @@
     -g typescript-fetch \
     -i /project/pkg/api/binoculars/api.swagger.json \
     -o /project/internal/lookout/ui/src/openapi/binoculars
+/usr/local/bin/docker-entrypoint.sh generate \
+    -g typescript-fetch \
+    -i /project/pkg/api/schedulerobjects/api.swagger.json \
+    -o /project/internal/lookout/ui/src/openapi/schedulerobjects

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

@@ -1,4 +1,4 @@
-import { useCallback } from "react"
+import { ReactNode, useCallback } from "react"
 
 import { Download } from "@mui/icons-material"
 import { IconButton, Skeleton, styled, useColorScheme } from "@mui/material"
@@ -45,6 +45,7 @@ const StyledPre = styled("pre")(({ theme }) => ({
   minHeight: 50,
   display: "flex",
   alignItems: "center",
+  margin: 0,
 }))
 
 const Code = styled("code")({
@@ -72,6 +73,12 @@ const CodeLineNumber = styled("span")({
   },
 })
 
+interface CodeBlockActionProps {
+  title: string
+  onClick: () => void
+  icon: ReactNode
+}
+
 interface CodeBlockLoadingProps {
   loading: true
   code?: undefined | string
@@ -96,13 +103,14 @@ interface CodeBlockNonDownloadbaleProps {
   downloadFileName?: undefined | string
 }
 
-interface CodeBlockbaseProps {
+interface CodeBlockBaseProps {
   showLineNumbers: boolean
   loadingLines?: number
   loadingLineLength?: number
+  additionalActions?: CodeBlockActionProps[]
 }
 
-export type CodeBlockProps = CodeBlockbaseProps &
+export type CodeBlockProps = CodeBlockBaseProps &
   (CodeBlockLoadedProps | CodeBlockLoadingProps) &
   (CodeBlockDownloadbaleProps | CodeBlockNonDownloadbaleProps)
 
@@ -116,6 +124,7 @@ export const CodeBlock = ({
   showLineNumbers,
   loadingLines = DEFAULT_LOADING_LINES,
   loadingLineLength = DEFAULT_LOADING_LINE_LENGTH,
+  additionalActions = [],
 }: CodeBlockProps) => {
   const { colorScheme } = useColorScheme()
 
@@ -177,6 +186,11 @@ export const CodeBlock = ({
             <Download />
           </IconButton>
         )}
+        {additionalActions.map(({ title, onClick, icon }) => (
+          <IconButton key={title} size="small" title={title} onClick={onClick}>
+            {icon}
+          </IconButton>
+        ))}
       </CodeActionsContainer>
       <Highlight
         prism={Prism}

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

@@ -0,0 +1,70 @@
+import { useState } from "react"
+
+import { Chat, ChatBubbleOutline } from "@mui/icons-material"
+import { Rating, styled, Typography } from "@mui/material"
+
+import { SPACING } from "../styling/spacing"
+
+const OuterContainer = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(SPACING.xs),
+}))
+
+const RatingAndLabelContainer = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(SPACING.sm),
+}))
+
+const StyledRating = styled(Rating)(({ theme }) => ({
+  "& .MuiRating-iconFilled": {
+    color: theme.palette.secondary.light,
+  },
+  "& .MuiRating-iconHover": {
+    color: theme.palette.secondary.main,
+  },
+}))
+
+export interface VerbositySelectorProps {
+  name: string
+  legendLabel: string
+  max: number
+  verbosity: number
+  onChange: (verbosity: number) => void
+  disabled?: boolean
+}
+
+export const VerbositySelector = ({
+  name,
+  legendLabel,
+  max,
+  verbosity,
+  onChange,
+  disabled,
+}: VerbositySelectorProps) => {
+  const [hoverValue, setHoverValue] = useState(-1)
+  return (
+    <OuterContainer>
+      <Typography component="legend" variant="caption">
+        {legendLabel}
+      </Typography>
+      <RatingAndLabelContainer>
+        <StyledRating
+          name={name}
+          value={verbosity}
+          onChangeActive={(_, value) => {
+            setHoverValue(value)
+          }}
+          onChange={(_, value) => onChange(value ?? 0)}
+          max={max}
+          getLabelText={(value) => value.toString()}
+          icon={<Chat fontSize="inherit" />}
+          emptyIcon={<ChatBubbleOutline fontSize="inherit" />}
+          disabled={disabled}
+        />
+        <Typography>Level {hoverValue !== -1 ? hoverValue.toString() : verbosity.toString()}</Typography>
+      </RatingAndLabelContainer>
+    </OuterContainer>
+  )
+}

internal/lookout/ui/src/components/lookoutV2/sidebar/Sidebar.tsx

@@ -10,6 +10,7 @@ import { SidebarTabJobDetails } from "./SidebarTabJobDetails"
 import { SidebarTabJobLogs } from "./SidebarTabJobLogs"
 import { SidebarTabJobResult } from "./SidebarTabJobResult"
 import { SidebarTabJobYaml } from "./SidebarTabJobYaml"
+import { SidebarTabScheduling } from "./SidebarTabScheduling"
 import { Job, JobState } from "../../../models/lookoutV2Models"
 import { ICordonService } from "../../../services/lookoutV2/CordonService"
 import { IGetJobInfoService } from "../../../services/lookoutV2/GetJobInfoService"
@@ -20,6 +21,7 @@ import { CommandSpec } from "../../../utils"
 enum SidebarTab {
   JobDetails = "JobDetails",
   JobResult = "JobResult",
+  Scheduling = "Scheduling",
   Yaml = "Yaml",
   Logs = "Logs",
   Commands = "Commands",
@@ -149,6 +151,11 @@ export const Sidebar = memo(
     commandSpecs,
   }: SidebarProps) => {
     const [openTab, setOpenTab] = useState<SidebarTab>(SidebarTab.JobDetails)
+    useEffect(() => {
+      if (openTab === SidebarTab.Scheduling && job.state !== JobState.Queued) {
+        setOpenTab(SidebarTab.JobDetails)
+      }
+    }, [openTab, job.state])
 
     const handleTabChange = useCallback((_: SyntheticEvent, newValue: SidebarTab) => {
       setOpenTab(newValue)
@@ -254,6 +261,9 @@ export const Sidebar = memo(
                   <SidebarTabs value={openTab} onChange={handleTabChange}>
                     <StyledSidebarTab label="Details" value={SidebarTab.JobDetails} />
                     <StyledSidebarTab label="Result" value={SidebarTab.JobResult} />
+                    {job.state === JobState.Queued && (
+                      <StyledSidebarTab label="Scheduling" value={SidebarTab.Scheduling} />
+                    )}
                     <StyledSidebarTab label="Yaml" value={SidebarTab.Yaml} />
                     <StyledSidebarTab label="Logs" value={SidebarTab.Logs} disabled={job.state === JobState.Queued} />
                     <StyledSidebarTab
@@ -278,6 +288,12 @@ export const Sidebar = memo(
                   />
                 </SidebarTabPanel>
 
+                {job.state === JobState.Queued && (
+                  <SidebarTabPanel value={SidebarTab.Scheduling}>
+                    <SidebarTabScheduling key={job.jobId} job={job} />
+                  </SidebarTabPanel>
+                )}
+
                 <SidebarTabPanel value={SidebarTab.Yaml}>
                   <SidebarTabJobYaml key={job.jobId} job={job} />
                 </SidebarTabPanel>