Refresh the Console View Step Header Cards (#347)

Co-authored-by: Stuart Rowe <[email protected]>

src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogCard.tsx

@@ -1,24 +1,31 @@
 import React from "react";
 import { lazy, Suspense } from "react";
 import { styled } from "@mui/material/styles";
-import Card from "@mui/material/Card";
-import CardContent from "@mui/material/CardContent";
+import {
+  Button,
+  Card,
+  CardContent,
+  CircularProgress,
+  Collapse,
+  Grid,
+  Typography,
+} from "@mui/material";
 import CardActionArea from "@mui/material/CardActions";
-import { CircularProgress } from "@mui/material";
-import Collapse from "@mui/material/Collapse";
 import IconButton, { IconButtonProps } from "@mui/material/IconButton";
-import Typography from "@mui/material/Typography";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import { StepInfo, StepLogBufferInfo } from "./PipelineConsoleModel";
-import Grid from "@mui/material/Grid";
-import Button from "@mui/material/Button";
+import LinkIcon from "@mui/icons-material/Link";
 import { Tooltip } from "react-tippy";
 
-import { LOG_FETCH_SIZE } from "./PipelineConsoleModel";
-import LinkIcon from "@mui/icons-material/Link";
+import {
+  LOG_FETCH_SIZE,
+  StepInfo,
+  StepLogBufferInfo,
+} from "./PipelineConsoleModel";
 import ConsoleLogModal from "./ConsoleLogModal";
 import ResizeIcon from "./ResizeIcon";
 
+import { getStepStatus } from "../../../step-status/StepStatus";
+
 const ConsoleLogStream = lazy(() => import("./ConsoleLogStream"));
 
 interface ExpandMoreProps extends IconButtonProps {
@@ -127,10 +134,32 @@ export class ConsoleLogCard extends React.Component<
     return `${(size / gib).toFixed(2)}GiB`;
   }
 
+  getStepHeaderTitle(stepTitle: string, stepId: string) {
+    if (stepTitle) {
+      return (
+        <Typography
+          className="log-card--text"
+          component="div"
+          key={`step-duration-text-${stepId}`}
+        >
+          {stepTitle}
+        </Typography>
+      );
+    } else {
+      return null;
+    }
+  }
+
   render() {
     const handleOpen = () => this.setState({ open: true });
     const handleClose = () => this.setState({ open: false });
 
+    const statusIcon = getStepStatus(
+      this.props.step.state,
+      this.props.step.completePercent,
+      10
+    );
+
     return (
       <Card
         className="step-detail-group"
@@ -145,6 +174,7 @@ export class ConsoleLogCard extends React.Component<
           }`}
           key={`step-action-area-${this.props.step.id}`}
         >
+          {statusIcon}
           <Grid
             container
             wrap="nowrap"
@@ -165,22 +195,12 @@ export class ConsoleLogCard extends React.Component<
                 key={`step-name-text-${this.props.step.id}`}
                 sx={{ flexGrow: 3 }}
               >
-                {this.props.step.name
-                  .substring(0, this.props.step.name.lastIndexOf("-"))
-                  .trimEnd()}
-              </Typography>
-              <Typography
-                className="log-card--text"
-                component="div"
-                key={`step-duration-text-${this.props.step.id}`}
-              >
-                {this.props.step.name
-                  .substring(
-                    this.props.step.name.lastIndexOf("-") + 1,
-                    this.props.step.name.length
-                  )
-                  .trimStart()}
+                {this.props.step.name}
               </Typography>
+              {this.getStepHeaderTitle(
+                this.props.step.title,
+                this.props.step.id
+              )}
             </Grid>
             <Grid
               item
@@ -202,13 +222,15 @@ export class ConsoleLogCard extends React.Component<
               </Typography>
             </Grid>
 
-            <Grid item xs={1} alignItems="center" sx={{ margin: "auto" }}>
+            <Grid item xs={2} alignItems="center" sx={{ margin: "auto" }}>
               <Tooltip title="Open console log in full-screen mode">
                 <IconButton
                   aria-label={"Open console log in full-screen mode"}
                   onClick={handleOpen}
                 >
-                  <ResizeIcon />
+                  <div className="svg-icon--expand">
+                    <ResizeIcon />
+                  </div>
                 </IconButton>
               </Tooltip>
               <Tooltip title="View step as plain text">
@@ -218,11 +240,11 @@ export class ConsoleLogCard extends React.Component<
                   }
                   aria-label="View step as plain text"
                 >
-                  <LinkIcon />
+                  <LinkIcon className="svg-icon--expand" />
                 </IconButton>
               </Tooltip>
             </Grid>
-            <Grid item xs={2} alignItems="center" sx={{ margin: "auto" }}>
+            <Grid item xs={1} alignItems="center" sx={{ margin: "auto" }}>
               <Tooltip title="Open console log">
                 <ExpandMore
                   expand={this.props.isExpanded}

src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogModal.tsx

@@ -1,9 +1,8 @@
 import React from "react";
 import { StepInfo, StepLogBufferInfo } from "./PipelineConsoleModel";
+import { getStepStatus } from "../../../step-status/StepStatus";
 import CloseIcon from "./CloseIcon";
 
-import Button from "@mui/material/Button";
-
 export interface ConsoleLogModelProps {
   logBuffer: StepLogBufferInfo;
   handleMoreConsoleClick: (nodeId: string, startByte: number) => void;
@@ -13,7 +12,7 @@ export interface ConsoleLogModelProps {
   open: boolean;
 }
 
-import { Box, Modal } from "@mui/material";
+import { Box, Modal, Stack } from "@mui/material";
 import Typography from "@mui/material/Typography";
 import ConsoleLogStream from "./ConsoleLogStream";
 
@@ -36,6 +35,13 @@ const style = {
 
 export default function ConsoleLogModal(props: ConsoleLogModelProps) {
   const handleClose = () => props.setClose();
+  const statusIcon = getStepStatus(
+    props.step.state,
+    props.step.completePercent,
+    10
+  );
+  const stepDisplayName = props.step.name;
+  const stepTitle = props.step.title ? " - " + props.step.title : "";
 
   return (
     <>
@@ -54,25 +60,17 @@ export default function ConsoleLogModal(props: ConsoleLogModelProps) {
             noWrap={true}
             key={`step-name-text-${props.step.id}`}
           >
-            {props.step.name
-              .substring(0, props.step.name.lastIndexOf("-"))
-              .trimEnd()}
+            <Stack direction="row" alignItems="center" spacing={1}>
+              {statusIcon}
+              <Box component="span">
+                <Box component="span" fontWeight="bold">
+                  {stepDisplayName}
+                </Box>
+                {stepTitle}
+              </Box>
+            </Stack>
           </Typography>
           <CloseIcon onClick={handleClose} />
-          <Typography
-            className="log-card--text"
-            id="modal-modal-description"
-            sx={{ mt: 2, mb: 2 }}
-            key={`step-duration-text-${props.step.id}`}
-          >
-            {props.step.name
-              .substring(
-                props.step.name.lastIndexOf("-") + 1,
-                props.step.name.length
-              )
-              .trimStart()}
-          </Typography>
-
           <ConsoleLogStream {...props} />
         </Box>
       </Modal>

src/main/frontend/pipeline-console-view/pipeline-console/main/pipeline-console.scss

@@ -2,13 +2,13 @@
 
 :root {
   --card-background: hsl(212, 30%, 96%);
-  --step-bg-running: var(--accent-color);
-  --step-bg-success: var(--success-color);
-  --step-bg-unstable: var(--warning-color);
-  --step-bg-failure: var(--error-color);
-  --step-bg-aborted: var(--purple);
-  --step-bg-paused: var(--blue);
-  --step-text-color: rgb(233, 237, 237);
+  --step-bg-running: color-mix(in srgb, var(--accent-color) 50%, white);
+  --step-bg-success: color-mix(in srgb, var(--success-color) 50%, white);
+  --step-bg-unstable: color-mix(in srgb, var(--warning-color) 50%, white);
+  --step-bg-failure: color-mix(in srgb, var(--error-color) 50%, white);
+  --step-bg-aborted: color-mix(in srgb, var(--purple) 50%, white);
+  --step-bg-paused: color-mix(in srgb, var(--blue) 50%, white);
+  --step-text-color: var(--text-color);
 }
 
 .app-page-body--one-column {
@@ -17,14 +17,25 @@
 
 [data-theme="dark"] {
   --card-background: hsl(230deg 14% 23%);
-  --step-text-color: hsl(230deg 14% 23%);
+  --step-bg-running: color-mix(in srgb, var(--accent-color) 50%, black);
+  --step-bg-success: color-mix(in srgb, var(--success-color) 50%, black);
+  --step-bg-unstable: color-mix(in srgb, var(--warning-color) 50%, black);
+  --step-bg-failure: color-mix(in srgb, var(--error-color) 50%, black);
+  --step-bg-aborted: color-mix(in srgb, var(--purple) 50%, black);
+  --step-bg-paused: color-mix(in srgb, var(--blue) 50%, black);
 }
 
 @media (prefers-color-scheme: dark) {
   [data-theme="dark-system"],
   [data-theme="dark-system"] {
     --card-background: hsl(230deg 14% 23%);
-    --step-text-color: hsl(230deg 14% 23%);
+    //--step-text-color: hsl(230deg 14% 23%);
+    --step-bg-running: color-mix(in srgb, var(--accent-color) 50%, black);
+    --step-bg-success: color-mix(in srgb, var(--success-color) 50%, black);
+    --step-bg-unstable: color-mix(in srgb, var(--warning-color) 50%, black);
+    --step-bg-failure: color-mix(in srgb, var(--error-color) 50%, black);
+    --step-bg-aborted: color-mix(in srgb, var(--purple) 50%, black);
+    --step-bg-paused: color-mix(in srgb, var(--blue) 50%, black);
   }
 }
 
@@ -222,6 +233,14 @@ g.build-status-icon__outer {
   color: var(--step-text-color);
 }
 
+.svg-icon--link {
+  color: var(--step-text-color);
+}
+
+.svg-icon--resize {
+  color: var(--step-text-color);
+}
+
 .svg-icon--step-card-status {
   color: var(--step-text-color) !important;
 }

src/main/frontend/step-status/StepStatus.tsx

@@ -24,7 +24,11 @@ const Component: FunctionComponent<Props> = (props: Props) => {
   );
 };
 
-function getStepStatus(status: Result, complete?: number, radius?: number) {
+export function getStepStatus(
+  status: Result,
+  complete?: number,
+  radius?: number
+) {
   const icon = getGroupForResult(
     decodeResultValue(status),
     complete ?? 100,

src/main/java/io/jenkins/plugins/pipelinegraphview/utils/PipelineStepApi.java

@@ -28,19 +28,22 @@ private List<PipelineStep> parseSteps(List<FlowNodeWrapper> stepNodes, String st
                     if (flowNodeWrapper.getStatus().getState() != BlueRun.BlueRunState.FINISHED) {
                         state = flowNodeWrapper.getStatus().getState().name().toLowerCase(Locale.ROOT);
                     }
-                    String displayName = flowNodeWrapper.getDisplayName();
 
+                    String displayName = flowNodeWrapper.getDisplayName();
+                    String title = "";
                     if (flowNodeWrapper.getType() == FlowNodeWrapper.NodeType.UNHANDLED_EXCEPTION) {
                         displayName = "Pipeline error";
                     } else {
                         String stepArguments = flowNodeWrapper.getArgumentsAsString();
                         if (stepArguments != null && !stepArguments.isEmpty()) {
-                            displayName = stepArguments + " - " + displayName;
+                            displayName = stepArguments;
+                            title = flowNodeWrapper.getDisplayName();
                         }
                         // Use the step label as the displayName if set
                         String labelDisplayName = flowNodeWrapper.getLabelDisplayName();
                         if (labelDisplayName != null && !labelDisplayName.isEmpty()) {
                             displayName = labelDisplayName;
+                            title = "";
                         }
                     }
                     // Remove non-printable chars (e.g. ANSI color codes).
@@ -54,7 +57,7 @@ private List<PipelineStep> parseSteps(List<FlowNodeWrapper> stepNodes, String st
                             state,
                             50, // TODO how ???
                             flowNodeWrapper.getType().name(),
-                            flowNodeWrapper.getDisplayName(), // TODO blue ocean uses timing information: "Passed in
+                            title, // TODO blue ocean uses timing information: "Passed in
                             // 0s"
                             stageId,
                             "Queued "