refactor: centralize workflow info/badges in list, details pages (rea…

…nahub#394)

Closes reanahub#151
Closes reanahub#395

reana-ui/src/components/WorkflowBadges.js

@@ -0,0 +1,63 @@
+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";
+import { statusMapping } from "~/util";
+
+export default function WorkflowBadges({ workflow }) {
+ const reanaToken = useSelector(getReanaToken);
+ const {
+ id,
+ 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
+ size="tiny"
+ content={workflow.duration}
+ icon="clock"
+ rel="noopener noreferrer"
+ color={statusMapping[workflow.status].color}
+ onClick={(e) => e.stopPropagation()}
+ />
+ )}
+ {hasDiskUsage && (
+ <Label
+ size="tiny"
+ content={size.human_readable}
+ icon="hdd"
+ as="a"
+ href={"/details/" + id}
+ target="_blank"
+ rel="noopener noreferrer"
+ onClick={(e) => e.stopPropagation()}
+ />
+ )}
+ {isSessionOpen && (
+ <Label
+ size="tiny"
+ content={"Notebook"}
+ icon={<JupyterNotebookIcon size={12} />}
+ as="a"
+ href={INTERACTIVE_SESSION_URL(sessionUri, reanaToken)}
+ target="_blank"
+ rel="noopener noreferrer"
+ onClick={(e) => e.stopPropagation()}
+ />
+ )}
+ <LauncherLabel url={launcherURL} />
+ </div>
+ </>
+ );
+}

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

@@ -0,0 +1,23 @@
+/*
+ -*- coding: utf-8 -*-
+
+ This file is part of REANA.
+ Copyright (C) 2023 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.
+*/
+
+.badgesContainer {
+ display: flex;
+
+ a:global(.label) {
+ margin-left: 15px;
+ gap: 10px;
+
+ &:hover {
+ cursor: pointer;
+ filter: opacity(0.8);
+ }
+ }
+}

reana-ui/src/pages/workflowList/components/WorkflowDetails.js → reana-ui/src/components/WorkflowInfo.js

@@ -2,7 +2,7 @@
  -*- coding: utf-8 -*-
 
  This file is part of REANA.
- Copyright (C) 2023 CERN.
+ 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.
@@ -13,10 +13,10 @@ import PropTypes from "prop-types";
 
 import { statusMapping } from "~/util";
 
-import styles from "./WorkflowDetails.module.scss";
-import WorkflowProgressCircleBar from "~/pages/workflowList/components/WorkflowProgressCircleBar";
+import styles from "./WorkflowInfo.module.scss";
+import { WorkflowProgressCircleBar } from "~/components";
 
-export default function WorkflowDetails({ workflow }) {
+export default function WorkflowInfo({ workflow }) {
  const {
  name,
  run,
@@ -87,6 +87,6 @@ export default function WorkflowDetails({ workflow }) {
  );
 }
 
-WorkflowDetails.propTypes = {
+WorkflowInfo.propTypes = {
  workflow: PropTypes.object.isRequired,
 };

reana-ui/src/pages/workflowList/components/WorkflowDetails.module.scss → reana-ui/src/components/WorkflowInfo.module.scss

@@ -17,13 +17,7 @@
 
 .workflow {
  color: $raven;
-
- /**FIXME visibility on hover is missing!*/
- &.hover {
- .actions {
- visibility: visible !important;
- }
- }
+ font-size: 1.15rem;
 
  &.deleted {
  opacity: 0.5;
@@ -47,16 +41,6 @@
  .run {
  padding-left: 0.8em;
  }
-
- .size {
- color: $light-gray;
- font-size: 0.75em;
- margin-right: 0.75em;
-
- &.highlight {
- color: $sui-red;
- }
- }
  }
 
  .name,
@@ -73,17 +57,12 @@
  width: 210px;
  flex-shrink: 0;
  display: flex;
- justify-content: end;
+ justify-content: flex-end;
  text-align: right;
  }
 
  .progressbar-container {
  width: 80px;
- padding: 10px;
- padding-top: 0;
- }
-
- .notebook {
- font-size: 0.85em;
+ padding: 0 10px;
  }
 }

reana-ui/src/pages/workflowList/components/WorkflowProgressCircleBar.js → reana-ui/src/components/WorkflowProgressCircleBar.js

@@ -16,7 +16,7 @@ export default function WorkflowProgressCircleBar({ workflow }) {
 
  const size = 80;
  const strokeWidth = 10;
- const radius = size / 2 - strokeWidth;
+ const radius = (size - strokeWidth) / 2;
  const circumference = 2 * Math.PI * radius;
 
  let lengthFinishedArc = (completed / total) * circumference;

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

@@ -1,6 +1,6 @@
 /*
  This file is part of REANA.
- Copyright (C) 2022 CERN.
+ Copyright (C) 2022, 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.

reana-ui/src/components/index.js

@@ -2,7 +2,7 @@
  -*- coding: utf-8 -*-
 
  This file is part of REANA.
- Copyright (C) 2020, 2021, 2022, 2023 CERN.
+ Copyright (C) 2020, 2021, 2022, 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.
@@ -16,10 +16,14 @@ export { default as Pagination } from "./Pagination";
 export { default as Title } from "./Title";
 export { default as TopHeader } from "./TopHeader";
 export { default as TooltipIfTruncated } from "./TooltipIfTruncated";
+export { default as LauncherLabel } from "./LauncherLabel";
 export { default as JupyterNotebookIcon } from "./JupyterNotebookIcon";
 export { default as WorkflowDeleteModal } from "./WorkflowDeleteModal";
+export { default as WorkflowInfo } from "./WorkflowInfo";
+export { default as WorkflowBadges } from "./WorkflowBadges";
 export { default as WorkflowStopModal } from "./WorkflowStopModal";
 export { default as WorkflowActionsPopup } from "./WorkflowActionsPopup";
+export { default as WorkflowProgressCircleBar } from "./WorkflowProgressCircleBar";
 export { default as PieChart } from "./PieChart";
 export { default as Search } from "./Search";
 export { default as Box } from "./Box";

reana-ui/src/pages/workflowDetails/WorkflowDetails.js

@@ -2,7 +2,7 @@
  -*- coding: utf-8 -*-
 
  This file is part of REANA.
- Copyright (C) 2020, 2022, 2023 CERN.
+ Copyright (C) 2020, 2022, 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.
@@ -24,15 +24,18 @@ import {
 import BasePage from "../BasePage";
 import {
  Notification,
+ WorkflowInfo,
+ WorkflowActionsPopup,
+ WorkflowBadges,
  WorkflowDeleteModal,
  WorkflowStopModal,
 } from "~/components";
 import {
- WorkflowInfo,
  WorkflowLogs,
  WorkflowFiles,
  WorkflowSpecification,
 } from "./components";
+import styles from "./WorkflowDetails.module.scss";
 
 const FINISHED_STATUSES = ["finished", "failed", "stopped", "deleted"];
 
@@ -139,8 +142,14 @@ export default function WorkflowDetails() {
 
  return (
  <BasePage title={pageTitle}>
- <Container>
+ <Container className={styles["workflow-details-container"]}>
  <WorkflowInfo workflow={workflow} />
+ <div className={styles["badges-and-actions"]}>
+ <WorkflowBadges workflow={workflow} withDivider={false} />
+ <div className={styles.actionsContainer}>
+ <WorkflowActionsPopup workflow={workflow} />
+ </div>
+ </div>
  <Tab
  menu={{ secondary: true, pointing: true }}
  panes={panes}

reana-ui/src/pages/workflowDetails/WorkflowDetails.module.scss

@@ -0,0 +1,10 @@
+.workflow-details-container {
+ padding-top: 2rem;
+}
+
+.badges-and-actions {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ padding: 0 0.75rem 1rem 1rem;
+}