unify badges style and add circular progress bar to workflow list and details pages

reana-ui/src/components/Box.js

@@ -1,16 +1,25 @@
 /*
   This file is part of REANA.
-  Copyright (C) 2022 CERN.
+  Copyright (C) 2022, 2024 CERN.
 
   REANA is free software; you can redistribute it and/or modify it
   under the terms of the MIT License; see LICENSE file for more details.
 */
 
 import styles from "./Box.module.scss";
 
-export default function Box({ children, className, wrap = false }) {
+export default function Box({
+  children,
+  className,
+  padding = true,
+  flex = true,
+}) {
   return (
-    <div className={`${styles.box} ${className} ${wrap ? styles.wrap : ""}`}>
+    <div
+      className={`${styles.box} ${className} ${padding ? styles.padding : ""} ${
+        flex ? styles.flex : ""
+      }`}
+    >
       {children}
     </div>
   );

reana-ui/src/components/Box.module.scss

@@ -1,6 +1,6 @@
 /*
   This file is part of REANA.
-  Copyright (C) 2022 CERN.
+  Copyright (C) 2022, 2024 CERN.
 
   REANA is free software; you can redistribute it and/or modify it
   under the terms of the MIT License; see LICENSE file for more details.
@@ -9,14 +9,16 @@
 @import "@palette";
 
 .box {
-  display: flex;
-  justify-content: space-between;
   color: $raven;
   border: 5px solid $sepia;
   margin: 1rem 0;
-  padding: 1em 1em;
 
-  &.wrap {
-    flex-wrap: wrap;
+  &.padding {
+    padding: 1em 1em;
+  }
+
+  &.flex {
+    display: flex;
+    justify-content: space-between;
   }
 }

reana-ui/src/pages/workflowDetails/components/LauncherLabel.js → reana-ui/src/components/LauncherLabel.js

@@ -1,6 +1,6 @@
 /*
   This file is part of REANA.
-  Copyright (C) 2022 CERN.
+  Copyright (C) 2022, 2024 CERN.
 
   REANA is free software; you can redistribute it and/or modify it
   under the terms of the MIT License; see LICENSE file for more details.
@@ -32,13 +32,11 @@ export default function LauncherLabel({ url }) {
         trigger={
           <Label
             size="tiny"
-            color="grey"
             as="a"
             href={url}
             target="_blank"
             rel="noopener noreferrer"
             {...getProps(url)}
-            basic
           />
         }
         content={url}

reana-ui/src/components/WorkflowActionsPopup.js

@@ -47,7 +47,6 @@ export default function WorkflowActionsPopup({ workflow, className }) {
       onClick: (e) => {
         dispatch(openInteractiveSessionModal(workflow));
         setOpen(false);
-        e.stopPropagation();
       },
     });
   }
@@ -60,7 +59,6 @@ export default function WorkflowActionsPopup({ workflow, className }) {
       onClick: (e) => {
         dispatch(closeInteractiveSession(id));
         setOpen(false);
-        e.stopPropagation();
       },
     });
   }
@@ -73,7 +71,6 @@ export default function WorkflowActionsPopup({ workflow, className }) {
       onClick: (e) => {
         dispatch(openStopWorkflowModal(workflow));
         setOpen(false);
-        e.stopPropagation();
       },
     });
   }
@@ -86,7 +83,6 @@ export default function WorkflowActionsPopup({ workflow, className }) {
       onClick: (e) => {
         dispatch(openDeleteWorkflowModal(workflow));
         setOpen(false);
-        e.stopPropagation();
       },
     });
   }
@@ -99,23 +95,22 @@ export default function WorkflowActionsPopup({ workflow, className }) {
       onClick: (e) => {
         dispatch(deleteWorkflow(id));
         setOpen(false);
-        e.stopPropagation();
       },
     });
   }
 
   return (
-    <div className={className || styles.container}>
+    <div className={className}>
       {menuItems.length > 0 && (
         <Popup
           basic
           trigger={
             <Icon
+              link
               name="ellipsis vertical"
               className={styles.icon}
               onClick={(e) => {
                 setOpen(true);
-                e.preventDefault();
               }}
             />
           }

reana-ui/src/components/WorkflowActionsPopup.module.scss

@@ -2,32 +2,14 @@
   -*- coding: utf-8 -*-
 
   This file is part of REANA.
-  Copyright (C) 2020, 2022 CERN.
+  Copyright (C) 2020, 2022, 2024 CERN.
 
   REANA is free software; you can redistribute it and/or modify it
   under the terms of the MIT License; see LICENSE file for more details.
 */
 
 @import "@palette";
 
-:global(.icon).icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: $gray;
-
-  &:hover {
-    color: $dark-gray;
-  }
-}
-
-.container {
-  cursor: pointer;
-  min-width: 22px;
-  margin-left: 2em;
-}
-
 .jupyter-icon {
   width: 1.18em;
   float: right;

reana-ui/src/components/WorkflowBadges.js

@@ -0,0 +1,66 @@
+/*
+  -*- coding: utf-8 -*-
+
+  This file is part of REANA.
+  Copyright (C) 2023, 2024 CERN.
+
+  REANA is free software; you can redistribute it and/or modify it
+  under the terms of the MIT License; see LICENSE file for more details.
+*/
+
+import styles from "./WorkflowBadges.module.scss";
+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 }) {
+  const reanaToken = useSelector(getReanaToken);
+  const {
+    size,
+    launcherURL,
+    session_uri: sessionUri,
+    session_status: sessionStatus,
+  } = workflow;
+  const hasDiskUsage = size.raw > 0;
+  const isSessionOpen = sessionStatus === "created";
+
+  return (
+    <div className={styles.badgesContainer}>
+      {workflow.duration && (
+        <Label
+          basic
+          size="tiny"
+          content={`CPU ${workflow.duration}`}
+          icon="clock"
+        />
+      )}
+      {hasDiskUsage && (
+        <Label
+          basic
+          size="tiny"
+          content={`Disk ${size.human_readable}`}
+          icon="hdd"
+        />
+      )}
+      <LauncherLabel url={launcherURL} />
+      {isSessionOpen && (
+        <Label
+          size="tiny"
+          content={"Notebook"}
+          icon={
+            <i className="icon">
+              <JupyterNotebookIcon size={12} />
+            </i>
+          }
+          as="a"
+          href={INTERACTIVE_SESSION_URL(sessionUri, reanaToken)}
+          target="_blank"
+          rel="noopener noreferrer"
+        />
+      )}
+    </div>
+  );
+}

reana-ui/src/components/WorkflowBadges.module.scss

@@ -0,0 +1,19 @@
+/*
+  -*- coding: utf-8 -*-
+
+  This file is part of REANA.
+  Copyright (C) 2023, 2024 CERN.
+
+  REANA is free software; you can redistribute it and/or modify it
+  under the terms of the MIT License; see LICENSE file for more details.
+*/
+@import "@palette";
+
+.badgesContainer {
+  display: flex;
+  gap: 5px;
+
+  :global(.ui.basic.label) {
+    color: $raven;
+  }
+}

reana-ui/src/components/WorkflowInfo.js

@@ -0,0 +1,84 @@
+/*
+  -*- coding: utf-8 -*-
+
+  This file is part of REANA.
+  Copyright (C) 2023, 2024 CERN.
+
+  REANA is free software; you can redistribute it and/or modify it
+  under the terms of the MIT License; see LICENSE file for more details.
+*/
+
+import { Icon, Popup } from "semantic-ui-react";
+import PropTypes from "prop-types";
+
+import { statusMapping } from "~/util";
+
+import styles from "./WorkflowInfo.module.scss";
+import { WorkflowProgressCircleBar } from "~/components";
+
+export default function WorkflowInfo({ workflow }) {
+  const {
+    name,
+    run,
+    createdDate,
+    startedDate,
+    finishedDate,
+    friendlyCreated,
+    friendlyStarted,
+    friendlyFinished,
+    completed,
+    total,
+    status,
+  } = workflow;
+
+  return (
+    <div className={styles["workflow-info"]}>
+      <div className={styles["details-box"]}>
+        <Icon
+          className={styles["status-icon"]}
+          name={statusMapping[status].icon}
+          color={statusMapping[status].color}
+        />
+        <div>
+          <span className={styles.name}>{name}</span>
+          <span className={styles.run}>#{run}</span>
+          <Popup
+            trigger={
+              <div>
+                {friendlyFinished
+                  ? `Finished ${friendlyFinished}`
+                  : friendlyStarted
+                    ? `Started ${friendlyStarted}`
+                    : `Created ${friendlyCreated}`}
+              </div>
+            }
+            content={
+              friendlyFinished
+                ? finishedDate
+                : friendlyStarted
+                  ? startedDate
+                  : createdDate
+            }
+          />
+        </div>
+      </div>
+      <div className={styles["status-box"]}>
+        <span
+          className={`${styles["status"]} sui-${statusMapping[status].color}`}
+        >
+          {status}
+        </span>
+        <div className={styles["progress-box"]}>
+          <span>
+            step {completed}/{total}
+          </span>
+          <WorkflowProgressCircleBar workflow={workflow} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+WorkflowInfo.propTypes = {
+  workflow: PropTypes.object.isRequired,
+};