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

Closes reanahub#352

Author: giuseppe-steduto

reana-ui/src/components/WorkflowBadges.js

@@ -9,14 +9,15 @@
 */
 
 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";
 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,23 +33,23 @@ export default function WorkflowBadges({ workflow }) {
       {workflow.duration && (
         <Label
           basic
-          size="tiny"
+          size={badgeSize}
           content={`CPU ${workflow.duration}`}
           icon="clock"
         />
       )}
       {hasDiskUsage && (
         <Label
           basic
-          size="tiny"
+          size={badgeSize}
           content={`Disk ${size.human_readable}`}
           icon="hdd"
         />
       )}
       <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,
+};

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 }}

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