wf-details: display workflow size

Both `WorkflowList` and `WorkflowDetails` now use the same `WorkflowInfo` component. To account for small differences between the ways in which this component should be rendered in the two pages, a new `.workflow-details` class has been added, with some rules that are only applied in the workflow-details page (e.g. display the launcher label). Closes #151
reanahub · May 11, 2023 · 3307a11 · 3307a11
1 parent 9bf0040
commit 3307a11
Show file tree

Hide file tree

Showing 9 changed files with 153 additions and 221 deletions.
diff --git a/CHANGES.rst b/CHANGES.rst
@@ -5,6 +5,7 @@ Version 0.9.1 (UNRELEASED)
 --------------------------
 
 - Changes the interactive session notification by adding a message stating that the session will be closed after a specified number of days inactivity.
+- Changes the workflow-details page to show the workflow's workspace size.
 - Adds an extra button for login with custom third-party Keycloak SSO authentication services.
 
 Version 0.9.0 (2023-01-19)

diff --git a/reana-ui/src/components/Box.js b/reana-ui/src/components/Box.js
@@ -8,9 +8,21 @@
 
 import styles from "./Box.module.scss";
 
-export default function Box({ children, className, wrap = false }) {
+export default function Box({
+  children,
+  className,
+  wrap = false,
+  flex = true,
+}) {
   return (
-    <div className={`${styles.box} ${className} ${wrap ? styles.wrap : ""}`}>
+    <div
+      className={`
+        ${styles.box} 
+        ${className} 
+        ${wrap ? styles.wrap : ""} 
+        ${!flex ? styles["no-flex"] : ""}
+      `}
+    >
       {children}
     </div>
   );

diff --git a/reana-ui/src/components/Box.module.scss b/reana-ui/src/components/Box.module.scss
@@ -19,4 +19,8 @@
   &.wrap {
     flex-wrap: wrap;
   }
+
+  &.no-flex {
+    display: block !important;
+  }
 }
diff --git a/reana-ui/src/components/WorkflowActionsPopup.js b/reana-ui/src/components/WorkflowActionsPopup.js
@@ -107,7 +107,7 @@ export default function WorkflowActionsPopup({ workflow, className }) {
   }
 
   return (
-    <div className={className || styles.container}>
+    <div className={`${className} ${styles.container}`}>
       {menuItems.length > 0 && (
         <Popup
           basic

diff --git a/reana-ui/src/pages/workflowDetails/WorkflowDetails.js b/reana-ui/src/pages/workflowDetails/WorkflowDetails.js
@@ -28,7 +28,9 @@ import {
   WorkflowLogs,
   WorkflowFiles,
   WorkflowSpecification,
+  WorkflowProgress,
 } from "./components";
+import styles from "~/pages/workflowDetails/components/WorkflowInfo.module.scss";
 
 const FINISHED_STATUSES = ["finished", "failed", "stopped", "deleted"];
 
@@ -136,7 +138,10 @@ export default function WorkflowDetails() {
   return (
     <BasePage title={pageTitle}>
       <Container>
-        <WorkflowInfo workflow={workflow} />
+        <div className={`${styles.workflow} ${styles["workflow-details"]}`}>
+          <WorkflowInfo workflow={workflow} withBottomPadding={true} />
+          <WorkflowProgress workflow={workflow} />
+        </div>
         <Tab
           menu={{ secondary: true, pointing: true }}
           panes={panes}

diff --git a/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.js b/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.js
@@ -16,7 +16,7 @@ import { INTERACTIVE_SESSION_URL } from "~/client";
 import { NON_FINISHED_STATUSES } from "~/config";
 import { getReanaToken } from "~/selectors";
 import { statusMapping } from "~/util";
-import { LauncherLabel, WorkflowProgress } from "../components";
+import { LauncherLabel } from "../components";
 import { JupyterNotebookIcon, WorkflowActionsPopup } from "~/components";
 import styles from "./WorkflowInfo.module.scss";
 
@@ -33,24 +33,40 @@ export default function WorkflowInfo({ workflow }) {
     duration,
     completed,
     total,
+    size,
     status,
     launcherURL,
     session_uri: sessionUri,
     session_status: sessionStatus,
   } = workflow;
   const reanaToken = useSelector(getReanaToken);
+  const isDeleted = status === "deleted";
+  const hasDiskUsage = size.raw > 0;
+  const isDeletedUsingWorkspace = isDeleted && hasDiskUsage;
   const isSessionOpen = sessionStatus === "created";
   return (
-    <div className={styles.workflow}>
-      <section className={styles.info}>
-        <div className={styles["details-box"]}>
-          <Icon
-            name={statusMapping[status].icon}
-            color={statusMapping[status].color}
-          />
+    <section className={styles.info}>
+      <div className={styles["details-box"]}>
+        <Icon
+          name={statusMapping[status].icon}
+          color={statusMapping[status].color}
+        />
+        <div>
+          <span className={styles.name}>{name}</span>
+          <span className={styles.run}>#{run}</span>
+          <span className={styles["launcher-label"]}>
+            <LauncherLabel url={launcherURL} />
+          </span>
           <div>
-            <span className={styles["name"]}>{name}</span>
-            <span className={styles["run"]}>#{run}</span>
+            {hasDiskUsage && (
+              <span
+                className={`${styles["size"]} ${
+                  isDeletedUsingWorkspace ? styles["highlight"] : ""
+                }`}
+              >
+                <Icon name="hdd" /> {size.human_readable}
+              </span>
+            )}
             {isSessionOpen && (
               <a
                 href={INTERACTIVE_SESSION_URL(sessionUri, reanaToken)}
@@ -62,55 +78,51 @@ export default function WorkflowInfo({ workflow }) {
                 <JupyterNotebookIcon />
               </a>
             )}
-            <span className={styles["launcher-label"]}>
-              <LauncherLabel url={launcherURL} />
-            </span>
-            <Popup
-              trigger={
-                <div>
-                  {friendlyFinished
-                    ? `Finished ${friendlyFinished}`
-                    : friendlyStarted
-                    ? `Started ${friendlyStarted}`
-                    : `Created ${friendlyCreated}`}
-                </div>
-              }
-              content={
-                friendlyFinished
-                  ? finishedDate
-                  : friendlyStarted
-                  ? startedDate
-                  : createdDate
-              }
-            />
           </div>
+          <Popup
+            trigger={
+              <div>
+                {friendlyFinished
+                  ? `Finished ${friendlyFinished}`
+                  : friendlyStarted
+                  ? `Started ${friendlyStarted}`
+                  : `Created ${friendlyCreated}`}
+              </div>
+            }
+            content={
+              friendlyFinished
+                ? finishedDate
+                : friendlyStarted
+                ? startedDate
+                : createdDate
+            }
+          />
         </div>
-        <div className={styles.info}>
+      </div>
+      <div className={styles["status-box"]}>
+        <div>
+          <div className={styles["first-row"]}>
+            <span
+              className={`${styles["status"]} sui-${statusMapping[status].color}`}
+            >
+              {status}
+            </span>{" "}
+            {statusMapping[status].preposition} {duration}
+            {NON_FINISHED_STATUSES.includes(status) && (
+              <Icon
+                name="refresh"
+                className={styles.refresh}
+                onClick={() => window.location.reload()}
+              />
+            )}
+          </div>
           <div>
-            <div className={styles["first-row"]}>
-              <span
-                className={`${styles["status"]} sui-${statusMapping[status].color}`}
-              >
-                {status}
-              </span>{" "}
-              {statusMapping[status].preposition} {duration}
-              {NON_FINISHED_STATUSES.includes(status) && (
-                <Icon
-                  name="refresh"
-                  className={styles.refresh}
-                  onClick={() => window.location.reload()}
-                />
-              )}
-            </div>
-            <div>
-              step {completed}/{total}
-            </div>
+            step {completed}/{total}
           </div>
-          <WorkflowActionsPopup workflow={workflow} />
         </div>
-      </section>
-      <WorkflowProgress workflow={workflow} />
-    </div>
+      </div>
+      <WorkflowActionsPopup workflow={workflow} className={styles.actions} />
+    </section>
   );
 }
 

diff --git a/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.module.scss b/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.module.scss
@@ -12,18 +12,34 @@
 
 .workflow {
   color: $raven;
-  margin: 2rem 0;
   font-size: 16px;
+  line-height: 1.5;
 
   .info {
     display: flex;
     justify-content: space-between;
-    padding-bottom: 1em;
     flex-shrink: 0;
 
     .details-box {
       display: flex;
       align-items: baseline;
+      flex-grow: 1;
+      margin-right: 1em;
+    }
+
+    .status-box {
+      width: 210px;
+      flex-shrink: 0;
+    }
+
+    .size {
+      color: $light-gray;
+      font-size: 0.75em;
+      margin-right: 0.75em;
+
+      &.highlight {
+        color: $sui-red;
+      }
     }
   }
 
@@ -51,18 +67,45 @@
     margin-left: 1em;
     position: relative;
     top: 10px;
+    display: none;
+  }
+
+  .launcher-label {
+    vertical-align: bottom;
+    display: none;
+  }
 
-    &:hover {
-      color: $dark-gray;
+  .actions {
+    visibility: hidden;
+    margin-left: 0;
+  }
+
+  &:hover {
+    .actions {
+      visibility: visible;
     }
   }
+}
 
-  .notebook {
-    margin-left: 1em;
-    margin: 0.7em;
+/**
+  These styles are only applied in the "workflow-details" page
+ */
+.workflow-details {
+  margin: 2rem 0;
+
+  .info{
+    padding-bottom: 1em;
   }
 
   .launcher-label {
-    vertical-align: bottom;
+    display: inline-block;
+  }
+
+  .refresh {
+    display: inline-block;
+  }
+
+  .actions {
+    visibility: visible;
   }
 }