fix(workflow-details): make step labels less prominent (reanahub#397)

Closes reanahub#352

Author: giuseppe-steduto

reana-ui/src/components/WorkflowBadges.js

@@ -1,4 +1,5 @@
 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";
@@ -7,7 +8,7 @@ import { getReanaToken } from "~/selectors";
 import { useSelector } from "react-redux";
 import { statusMapping } from "~/util";
 
-export default function WorkflowBadges({ workflow }) {
+export default function WorkflowBadges({ workflow, badgeSize = "tiny" }) {
   const reanaToken = useSelector(getReanaToken);
   const {
     id,
@@ -24,7 +25,7 @@ export default function WorkflowBadges({ workflow }) {
       <div className={styles.badgesContainer}>
         {workflow.duration && (
           <Label
-            size="tiny"
+            size={badgeSize}
             content={workflow.duration}
             icon="clock"
             as="a"
@@ -37,7 +38,7 @@ export default function WorkflowBadges({ workflow }) {
         )}
         {hasDiskUsage && (
           <Label
-            size="tiny"
+            size={badgeSize}
             content={size.human_readable}
             icon="hdd"
             as="a"
@@ -49,7 +50,7 @@ export default function WorkflowBadges({ workflow }) {
         )}
         {isSessionOpen && (
           <Label
-            size="tiny"
+            size={badgeSize}
             content={" Notebook"}
             icon={<JupyterNotebookIcon size={12} />}
             as="a"
@@ -64,3 +65,8 @@ export default function WorkflowBadges({ workflow }) {
     </>
   );
 }
+
+WorkflowBadges.propTypes = {
+  workflow: PropTypes.object.isRequired,
+  badgeSize: PropTypes.string,
+};

reana-ui/src/pages/workflowDetails/WorkflowDetails.js

@@ -145,7 +145,7 @@ export default function WorkflowDetails() {
       <Container className={styles["workflow-details-container"]}>
         <WorkflowInfo workflow={workflow} />
         <div className={styles["badges-and-actions"]}>
-          <WorkflowBadges workflow={workflow} withDivider={false} />
+          <WorkflowBadges workflow={workflow} badgeSize="medium" />
           <div className={styles.actionsContainer}>
             <WorkflowActionsPopup workflow={workflow} />
           </div>

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" />