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 reanahub#151

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)

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>
  );

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

@@ -19,4 +19,8 @@
  &.wrap {
  flex-wrap: wrap;
  }
+
+ &.no-flex {
+ display: block !important;
+ }
 }

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

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}

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

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