From 13ab9c32e0ecacf4a76f9e26c6a790838c20fcf9 Mon Sep 17 00:00:00 2001
From: Giuseppe Steduto <giuseppe@steduto.it>
Date: Wed, 21 Feb 2024 15:29:38 +0100
Subject: [PATCH] fix(workflow-details): make step labels less prominent (#397)

Closes #352
---
 reana-ui/src/components/WorkflowBadges.js          | 14 ++++++++++----
 .../src/pages/workflowDetails/WorkflowDetails.js   |  6 +++++-
 .../workflowDetails/components/WorkflowLogs.js     | 12 ++++--------
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/reana-ui/src/components/WorkflowBadges.js b/reana-ui/src/components/WorkflowBadges.js
index 5bf13a46..c5b096d3 100644
--- a/reana-ui/src/components/WorkflowBadges.js
+++ b/reana-ui/src/components/WorkflowBadges.js
@@ -9,6 +9,7 @@
 */
 
 import styles from "./WorkflowBadges.module.scss";
+import PropTypes from "prop-types";
 import { Label } from "semantic-ui-react";
 import { JupyterNotebookIcon } from "~/components";
 import { INTERACTIVE_SESSION_URL } from "~/client";
@@ -16,7 +17,7 @@ import { LauncherLabel } from "~/components";
 import { getReanaToken } from "~/selectors";
 import { useSelector } from "react-redux";
 
-export default function WorkflowBadges({ workflow }) {
+export default function WorkflowBadges({ workflow, badgeSize = "tiny" }) {
   const reanaToken = useSelector(getReanaToken);
   const {
     size,
@@ -32,7 +33,7 @@ export default function WorkflowBadges({ workflow }) {
       {workflow.duration && (
         <Label
           basic
-          size="tiny"
+          size={badgeSize}
           content={`CPU ${workflow.duration}`}
           icon="clock"
         />
@@ -40,7 +41,7 @@ export default function WorkflowBadges({ workflow }) {
       {hasDiskUsage && (
         <Label
           basic
-          size="tiny"
+          size={badgeSize}
           content={`Disk ${size.human_readable}`}
           icon="hdd"
         />
@@ -48,7 +49,7 @@ export default function WorkflowBadges({ workflow }) {
       <LauncherLabel url={launcherURL} />
       {isSessionOpen && (
         <Label
-          size="tiny"
+          size={badgeSize}
           content={"Notebook"}
           icon={
             <i className="icon">
@@ -64,3 +65,8 @@ export default function WorkflowBadges({ workflow }) {
     </div>
   );
 }
+
+WorkflowBadges.propTypes = {
+  workflow: PropTypes.object.isRequired,
+  badgeSize: PropTypes.string,
+};
diff --git a/reana-ui/src/pages/workflowDetails/WorkflowDetails.js b/reana-ui/src/pages/workflowDetails/WorkflowDetails.js
index 24e9d4d7..8add3056 100644
--- a/reana-ui/src/pages/workflowDetails/WorkflowDetails.js
+++ b/reana-ui/src/pages/workflowDetails/WorkflowDetails.js
@@ -160,7 +160,11 @@ export default function WorkflowDetails() {
           </div>
         </div>
         <div className={styles.badges}>
-          <WorkflowBadges className={styles.badges} workflow={workflow} />
+          <WorkflowBadges
+            className={styles.badges}
+            workflow={workflow}
+            badgeSize="medium"
+          />
         </div>
         <Tab
           menu={{ secondary: true, pointing: true }}
diff --git a/reana-ui/src/pages/workflowDetails/components/WorkflowLogs.js b/reana-ui/src/pages/workflowDetails/components/WorkflowLogs.js
index b6ef684c..051e147d 100644
--- a/reana-ui/src/pages/workflowDetails/components/WorkflowLogs.js
+++ b/reana-ui/src/pages/workflowDetails/components/WorkflowLogs.js
@@ -71,7 +71,9 @@ function JobLogs({ logs }) {
 
   const steps = Object.entries(logs).map(([id, log]) => ({
     key: id,
-    text: log.job_name || log.backend_job_id,
+    text:
+      (log.job_name || log.backend_job_id) +
+      (log.duration !== null ? ` (${log.duration})` : ``),
     icon: {
       name: "dot circle outline",
       size: "small",
@@ -100,14 +102,8 @@ function JobLogs({ logs }) {
         </div>
         {log && (
           <div className={styles["step-tags"]}>
-            <Label color={statusMapping[log.status].color}>
+            <Label basic color={statusMapping[log.status].color}>
               {log.status}
-              {log.duration && (
-                <span className={styles["step-duration"]}>
-                  {" "}
-                  {statusMapping[log.status].preposition} {log.duration}
-                </span>
-              )}
             </Label>
             <Label>
               <Icon name="cloud" />