wf-details: display workspace size

reanahub · May 15, 2023 · 22cadf6 · 22cadf6
1 parent ddb62ed
commit 22cadf6
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 0 deletions.
diff --git a/CHANGES.rst b/CHANGES.rst
@@ -7,6 +7,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.
 - Adds an extra button for login with custom third-party Keycloak SSO authentication services.
 - Changes the workflow-details page to make it possible to scroll through the list of workflow steps in the job logs section.
+- Changes the workflow-details page to show the workflow's workspace size.
 
 Version 0.9.0 (2023-01-19)
 --------------------------

diff --git a/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.js b/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.js
@@ -34,11 +34,15 @@ export default function WorkflowInfo({ workflow }) {
     completed,
     total,
     status,
+    size,
     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}>
@@ -65,6 +69,17 @@ export default function WorkflowInfo({ workflow }) {
             <span className={styles["launcher-label"]}>
               <LauncherLabel url={launcherURL} />
             </span>
+            <div>
+              {hasDiskUsage && (
+                <span
+                  className={`${styles.size} ${
+                    isDeletedUsingWorkspace ? styles.highlight : ""
+                  }`}
+                >
+                  <Icon name="hdd" /> {size.human_readable}
+                </span>
+              )}
+            </div>
             <Popup
               trigger={
                 <div>

diff --git a/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.module.scss b/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.module.scss
@@ -24,6 +24,16 @@
     .details-box {
       display: flex;
       align-items: baseline;
+
+      .size {
+        color: $light-gray;
+        font-size: 0.75em;
+        margin-right: 0.75em;
+
+        &.highlight {
+          color: $sui-red;
+        }
+      }
     }
   }