wf-details: display workflow size

Closes reanahub#151
giuseppe-steduto · May 9, 2023 · c64f9ca · c64f9ca
1 parent 9bf0040
commit c64f9ca
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 152 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/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}>
+ <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,11 +16,11 @@ 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";
 
-export default function WorkflowInfo({ workflow }) {
+export default function WorkflowInfo({ workflow, withBottomPadding = false }) {
  const {
  name,
  run,
@@ -33,24 +33,41 @@ 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} ${
+ withBottomPadding ? styles["padding-bottom"] : ""
+ }`}
+ >
+ <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>
  <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 +79,57 @@ 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>
+ <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>
- <div className={styles.info}>
+ </div>
+ <div className={styles.info}>
+ <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>
+ <WorkflowActionsPopup
+ workflow={workflow}
+ className={styles["actions"]}
+ />
+ </div>
+ </section>
  );
 }
 

diff --git a/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.module.scss b/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.module.scss
@@ -14,13 +14,17 @@
  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;
 
+ &.padding-bottom {
+ padding-bottom: 1em;
+ }
+
  .details-box {
  display: flex;
  align-items: baseline;

diff --git a/reana-ui/src/pages/workflowList/components/WorkflowList.js b/reana-ui/src/pages/workflowList/components/WorkflowList.js
@@ -23,7 +23,9 @@ import {
 } from "~/components";
 import { statusMapping } from "~/util";
 
-import styles from "./WorkflowList.module.scss";
+import workflowListStyles from "./WorkflowList.module.scss";
+import styles from "~/pages/workflowDetails/components/WorkflowInfo.module.scss";
+import { WorkflowInfo } from "~/pages/workflowDetails/components";
 
 export default function WorkflowList({ workflows, loading }) {
  const reanaToken = useSelector(getReanaToken);
@@ -35,101 +37,16 @@ export default function WorkflowList({ workflows, loading }) {
  return (
  <>
  {workflows.map((workflow) => {
- const {
- id,
- name,
- run,
- createdDate,
- startedDate,
- finishedDate,
- friendlyCreated,
- friendlyStarted,
- friendlyFinished,
- duration,
- completed,
- total,
- size,
- status,
- session_uri: sessionUri,
- session_status: sessionStatus,
- } = workflow;
- const isDeleted = status === "deleted";
- const hasDiskUsage = size.raw > 0;
- const isDeletedUsingWorkspace = isDeleted && hasDiskUsage;
- const isSessionOpen = sessionStatus === "created";
+ const isDeleted = workflow.status === "deleted";
  return (
- <Link key={id} to={`/details/${id}`}>
+ <Link key={workflow.id} to={`/details/${workflow.id}`}>
  <Box
- className={`${styles.workflow} ${
- isDeleted ? styles["deleted"] : ""
- }`}
+ className={`${workflowListStyles.workflow} ${
+ isDeleted ? workflowListStyles["deleted"] : ""
+ } ${styles.workflow}`}
+ flex={false}
  >
- <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>
- <div>
- {hasDiskUsage && (
- <span
- className={`${styles.size} ${
- isDeletedUsingWorkspace ? styles.highlight : ""
- }`}
- >
- <Icon name="hdd" /> {size.human_readable}
- </span>
- )}
- {isSessionOpen && (
- <a
- href={INTERACTIVE_SESSION_URL(sessionUri, reanaToken)}
- target="_blank"
- rel="noopener noreferrer"
- onClick={(e) => e.stopPropagation()}
- className={styles.notebook}
- >
- <JupyterNotebookIcon />
- </a>
- )}
- </div>
- <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>{" "}
- {statusMapping[status].preposition} {duration}
- <div>
- step {completed}/{total}
- </div>
- </div>
- <WorkflowActionsPopup
- workflow={workflow}
- className={styles.actions}
- />
+ <WorkflowInfo workflow={workflow} />
  </Box>
  </Link>
  );