+
Container
-
+
-
+
{
/>
-
+
{getJobSpecResult.status === "pending" ||
(getLogsResult.status === "pending" && (
-
-
-
+
+
+
+
+
+
+
))}
{getLogsResult.status === "success" && (
@@ -254,7 +253,7 @@ export const SidebarTabJobLogs = ({ job }: SidebarTabJobLogsProps) => {
)}
-
+
)
}
@@ -315,9 +314,9 @@ function LogView({ logLines, showTimestamps }: { logLines: LogLine[]; showTimest
if (logLines.length === 0) {
return (
-
+
)
}
diff --git a/internal/lookout/ui/src/components/lookoutV2/sidebar/SidebarTabJobResult.module.css b/internal/lookout/ui/src/components/lookoutV2/sidebar/SidebarTabJobResult.module.css
deleted file mode 100644
index c7820321773..00000000000
--- a/internal/lookout/ui/src/components/lookoutV2/sidebar/SidebarTabJobResult.module.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.loading {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- margin-bottom: 0.5em;
-}
-
-.markUnschedulableButton {
- display: flex;
- align-items: center;
- justify-content: center;
- margin: 10px 0 10px 0;
-}
-
-.markUnschedulableDialog {
- display: flex;
- align-items: center !important;
- justify-content: center !important;
-}
diff --git a/internal/lookout/ui/src/components/lookoutV2/sidebar/SidebarTabJobResult.tsx b/internal/lookout/ui/src/components/lookoutV2/sidebar/SidebarTabJobResult.tsx
index 9a0ac0433b6..86598881f21 100644
--- a/internal/lookout/ui/src/components/lookoutV2/sidebar/SidebarTabJobResult.tsx
+++ b/internal/lookout/ui/src/components/lookoutV2/sidebar/SidebarTabJobResult.tsx
@@ -6,27 +6,44 @@ import {
AccordionDetails,
AccordionSummary,
Button,
- CircularProgress,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
+ Skeleton,
+ styled,
Tooltip,
Typography,
} from "@mui/material"
import { KeyValuePairTable } from "./KeyValuePairTable"
-import styles from "./SidebarTabJobResult.module.css"
+import { NoRunsAlert } from "./NoRunsAlert"
+import { SidebarTabHeading, SidebarTabSubheading } from "./sidebarTabContentComponents"
import { useCustomSnackbar } from "../../../hooks/useCustomSnackbar"
import { Job, JobRun, JobState } from "../../../models/lookoutV2Models"
import { getAccessToken, useUserManager } from "../../../oidc"
import { ICordonService } from "../../../services/lookoutV2/CordonService"
import { IGetJobInfoService } from "../../../services/lookoutV2/GetJobInfoService"
import { IGetRunInfoService } from "../../../services/lookoutV2/GetRunInfoService"
+import { SPACING } from "../../../styling/spacing"
import { getErrorMessage } from "../../../utils"
import { formatJobRunState, formatTimeSince, formatUtcDate } from "../../../utils/jobsTableFormatters"
import { CodeBlock } from "../../CodeBlock"
+const MarkNodeUnschedulableButtonContainer = styled("div")(({ theme }) => ({
+ display: "flex",
+ justifyContent: "center",
+ padding: theme.spacing(SPACING.sm),
+}))
+
+const loadingAccordion = (
+
+
+
+
+
+)
+
export interface SidebarTabJobResultProps {
job: Job
runInfoService: IGetRunInfoService
@@ -216,126 +233,132 @@ export const SidebarTabJobResult = ({
}
}
return (
-
+ <>
{topLevelError !== "" ? (
<>
-
{topLevelErrorTitle}:
-
+
{topLevelErrorTitle}
+
) : null}
-
Runs:
- {runsNewestFirst.map((run, i) => {
- return (
-
- } aria-controls="panel1a-content">
-
- {formatUtcDate(getRunScheduledTime(run))} UTC ({formatJobRunState(run.jobRunState)})
-
-
-
- pair.value !== "")}
- />
-
- {run.node !== undefined && run.node !== "" && (
- <>
-
-
-
-
-
-
-
- )}
- {runErrorLoadingMap.has(run.runId) && runErrorLoadingMap.get(run.runId) === "Loading" && (
-
-
-
- )}
- {runErrorMap.has(run.runId) && runErrorMap.get(run.runId) !== "" && (
-
- } aria-controls="panel1d-content" id="panel1d-header">
- Error
-
-
-
-
-
- )}
- {runDebugMessageLoadingMap.has(run.runId) && runDebugMessageLoadingMap.get(run.runId) === "Loading" && (
-
-
-
- )}
- {runDebugMessageMap.has(run.runId) && runDebugMessageMap.get(run.runId) !== "" && (
-
- } aria-controls="panel1d-content" id="panel1d-header">
- Debug
-
-
-
-
-
- )}
-
- )
- })}
- {runsNewestFirst.length === 0 && <>This job has not run.}
-
+ {runsNewestFirst.length === 0 ? (
+
+ ) : (
+ <>
+
Runs
+
+ {runsNewestFirst.map((run, i) => {
+ const node = run.node || undefined // set to undefined if it is an empty string
+ const runErrorLoading = runErrorLoadingMap.get(run.runId) === "Loading"
+ const runError = runErrorMap.get(run.runId) || undefined // set to undefined if it is an empty string
+ const runDebugMessageLoading = runDebugMessageLoadingMap.get(run.runId) === "Loading"
+ const runDebugMessage = runDebugMessageMap.get(run.runId) || undefined // set to undefined if it is an empty string
+ return (
+
+
+
+ {formatUtcDate(getRunScheduledTime(run))} UTC ({formatJobRunState(run.jobRunState)})
+
+
+
+ pair.value !== "")}
+ />
+ {node && (
+ <>
+
+
+
+
+
+
+
+ )}
+
+ {runErrorLoading && {loadingAccordion}
}
+ {runError && (
+
+ Error
+
+
+
+
+ )}
+ {runDebugMessageLoading && {loadingAccordion}
}
+ {runDebugMessage && (
+
+ } aria-controls="panel1d-content" id="panel1d-header">
+ Debug
+
+
+
+
+
+ )}
+
+ )
+ })}
+
+
+ )}
+
)
}
diff --git a/internal/lookout/ui/src/components/lookoutV2/sidebar/SidebarTabJobYaml.module.css b/internal/lookout/ui/src/components/lookoutV2/sidebar/SidebarTabJobYaml.module.css
deleted file mode 100644
index 1597d0454a8..00000000000
--- a/internal/lookout/ui/src/components/lookoutV2/sidebar/SidebarTabJobYaml.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.loading {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- margin-bottom: 0.5em;
-}
diff --git a/internal/lookout/ui/src/components/lookoutV2/sidebar/SidebarTabJobYaml.tsx b/internal/lookout/ui/src/components/lookoutV2/sidebar/SidebarTabJobYaml.tsx
index 39669e44fbb..874c68d92f5 100644
--- a/internal/lookout/ui/src/components/lookoutV2/sidebar/SidebarTabJobYaml.tsx
+++ b/internal/lookout/ui/src/components/lookoutV2/sidebar/SidebarTabJobYaml.tsx
@@ -1,9 +1,7 @@
import { useEffect } from "react"
-import { CircularProgress } from "@mui/material"
import yaml from "js-yaml"
-import styles from "./SidebarTabJobYaml.module.css"
import { useCustomSnackbar } from "../../../hooks/useCustomSnackbar"
import { Job } from "../../../models/lookoutV2Models"
import { useGetJobSpec } from "../../../services/lookoutV2/useGetJobSpec"
@@ -50,12 +48,8 @@ export const SidebarTabJobYaml = ({ job }: SidebarTabJobYamlProps) => {
}, [getJobSpecResult.status, getJobSpecResult.error])
return (
-
- {getJobSpecResult.status === "pending" && (
-
-
-
- )}
+ <>
+ {getJobSpecResult.status === "pending" &&
}
{getJobSpecResult.status === "success" && (
{
downloadable={getJobSpecResult.status === "success"}
downloadBlobType="text/plain"
downloadFileName={`${job.jobId}.yaml`}
+ loading={false}
/>
)}
-
+
)
}
diff --git a/internal/lookout/ui/src/components/lookoutV2/sidebar/SidebarTabScheduling.tsx b/internal/lookout/ui/src/components/lookoutV2/sidebar/SidebarTabScheduling.tsx
new file mode 100644
index 00000000000..efae2533185
--- /dev/null
+++ b/internal/lookout/ui/src/components/lookoutV2/sidebar/SidebarTabScheduling.tsx
@@ -0,0 +1,257 @@
+import { useState } from "react"
+
+import { Refresh } from "@mui/icons-material"
+import {
+ Accordion,
+ AccordionDetails,
+ AccordionSummary,
+ Alert,
+ AlertTitle,
+ Button,
+ Stack,
+ Typography,
+} from "@mui/material"
+
+import { KeyValuePairTable } from "./KeyValuePairTable"
+import { SidebarTabHeading, SidebarTabProminentValueCard, SidebarTabSubheading } from "./sidebarTabContentComponents"
+import { Job, JobState } from "../../../models/lookoutV2Models"
+import { useGetJobSchedulingReport } from "../../../services/lookoutV2/useGetJobSchedulingReport"
+import { useGetQueueSchedulingReport } from "../../../services/lookoutV2/useGetQueueSchedulingReport"
+import { useGetSchedulingReport } from "../../../services/lookoutV2/useGetSchedulingReport"
+import { SPACING } from "../../../styling/spacing"
+import { formatTimeSince } from "../../../utils/jobsTableFormatters"
+import { formatCpu, formatBytes } from "../../../utils/resourceUtils"
+import { CodeBlock } from "../../CodeBlock"
+import { VerbositySelector } from "../../VerbositySelector"
+
+export interface SidebarTabSchedulingProps {
+ job: Job
+}
+
+export const SidebarTabScheduling = ({ job }: SidebarTabSchedulingProps) => {
+ const [showAdvancedReports, setShowAdvancedReports] = useState(false)
+ const [queueReportVerbosity, setQueueReportVerbosity] = useState(0)
+ const [schedulingReportVerbosity, setSchedulingReportVerbosity] = useState(0)
+
+ const getJobSchedulingReportResult = useGetJobSchedulingReport(job.jobId, Boolean(job.jobId))
+ const getQueueSchedulingReportResult = useGetQueueSchedulingReport(
+ job.queue,
+ queueReportVerbosity,
+ showAdvancedReports && Boolean(job.queue),
+ )
+ const getSchedulingReportResult = useGetSchedulingReport(schedulingReportVerbosity, showAdvancedReports)
+
+ return (
+ <>
+
+ {job.state === JobState.Queued && (
+
+ )}
+
+
Scheduling report
+
This is the scheduling report for this job from the latest scheduling round.
+ {getJobSchedulingReportResult.status === "error" && (
+
getJobSchedulingReportResult.refetch()}>
+ Retry
+
+ }
+ >
+ Failed to get the scheduling report for this job.
+ {getJobSchedulingReportResult.error}
+
+ )}
+ {(getJobSchedulingReportResult.status === "pending" || getJobSchedulingReportResult.isFetching) && (
+
+ )}
+ {getJobSchedulingReportResult.status === "success" &&
+ !getJobSchedulingReportResult.isFetching &&
+ (getJobSchedulingReportResult.data.report ? (
+
getJobSchedulingReportResult.refetch(), icon: },
+ ]}
+ />
+ ) : (
+ getJobSchedulingReportResult.refetch()}>
+ Retry
+
+ }
+ >
+ No scheduling report is available for this job.
+
+ ))}
+
+
setShowAdvancedReports(expanded)}>
+
+ Advanced reports
+
+
+
+ Report for this job's queue ({job.queue})
+
+ setQueueReportVerbosity(verbosity)}
+ disabled={
+ getQueueSchedulingReportResult.status === "pending" || getQueueSchedulingReportResult.isFetching
+ }
+ />
+ {getQueueSchedulingReportResult.status === "error" && (
+ getQueueSchedulingReportResult.refetch()}>
+ Retry
+
+ }
+ >
+ Failed to get the scheduling report for this queue.
+ {getQueueSchedulingReportResult.error}
+
+ )}
+ {(getQueueSchedulingReportResult.status === "pending" || getQueueSchedulingReportResult.isFetching) && (
+
+ )}
+ {getQueueSchedulingReportResult.status === "success" &&
+ !getQueueSchedulingReportResult.isFetching &&
+ (getQueueSchedulingReportResult.data.report ? (
+ getQueueSchedulingReportResult.refetch(),
+ icon: ,
+ },
+ ]}
+ />
+ ) : (
+ getQueueSchedulingReportResult.refetch()}>
+ Retry
+
+ }
+ >
+ No scheduling report is available for this queue.
+
+ ))}
+
+ Overall scheduling report
+
+ setSchedulingReportVerbosity(verbosity)}
+ disabled={getSchedulingReportResult.status === "pending" || getSchedulingReportResult.isFetching}
+ />
+ {getSchedulingReportResult.status === "error" && (
+ getSchedulingReportResult.refetch()}>
+ Retry
+
+ }
+ >
+ Failed to get the overall scheduling report.
+ {getSchedulingReportResult.error}
+
+ )}
+ {(getSchedulingReportResult.status === "pending" || getSchedulingReportResult.isFetching) && (
+
+ )}
+ {getSchedulingReportResult.status === "success" &&
+ !getSchedulingReportResult.isFetching &&
+ (getSchedulingReportResult.data.report ? (
+ getSchedulingReportResult.refetch(), icon: },
+ ]}
+ />
+ ) : (
+ getSchedulingReportResult.refetch()}>
+ Retry
+
+ }
+ >
+ No scheduling report is available.
+
+ ))}
+
+
+
+
+
+
+
+ {label}
+
+
+ {value}
+
+
+