unify badges style and add circular progress bar to workflow list and details pages #394

giuseppe-steduto · 2024-02-12T17:02:22Z

feat(workflow-list): unify badges style and remove nested links (unify badges style and add circular progress bar to workflow list and details pages #394)
feat(progress): add circular progress bar in workflow list page (unify badges style and add circular progress bar to workflow list and details pages #394)
refactor: centralize workflow info/badges in list, details pages (unify badges style and add circular progress bar to workflow list and details pages #394)

Closes #151
Closes #395

…nahub#394) Closes reanahub#151 Closes reanahub#395

…ahub#394) Change the style of the workflow badges (Jupyter notebook, GitHub, ...) to unify their style. Move the workflow duration to another badge in the bottom section of the workflow box. Move the actions button to the same section to avoid having nested interactive element and comply with the W3 HTML specifications.

…ahub#394)

…nahub#394) Closes reanahub#151 Closes reanahub#395

tiborsimko · 2024-02-28T11:02:16Z

reana-ui/src/components/WorkflowBadges.js

+            icon="clock"
+            as="a"
+            href={"/details/" + id}
+            target="_blank"


A functional observation. Clicking on a badge on the workflow list page (and on workflow detailed page) leads to opening new tabs. This can quickly fill up, e.g. try to click several times on the duration badge on the worklow detailed page, it'll generate a new tab for every repeated click.

It would be better to always open in the same tab, i.e. remove _blank targets here and elsewhere in the code. If a user would like to open a new tab, they could always middle-click.

The links on the disk/duration badges were removed. If we want to keep them and to make them point to specific tabs of the workflow detail page, maybe we should open an issue and do so in another PR?

tiborsimko · 2024-02-28T11:04:07Z

reana-ui/src/components/WorkflowBadges.js

+          <Label
+            size="tiny"
+            content={size.human_readable}
+            icon="hdd"


Another functional observation. Clicking on the workspace size brings people to the default detailed record page. It would be nicer if the user landed on the workspace tab on the detailed page, because people clicking on the workspace size would probably like to consult workspace content directly.

See previous comment

tiborsimko · 2024-02-28T11:09:06Z

reana-ui/src/components/WorkflowProgressCircleBar.js

+  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.
+*/
+


A functional observation. When I submit a BSM workflow, immediately after submission the progress is shown as:

Here the "red" seems a bit harsh, so perhaps the colour is not appropriate.

Later when the engine starts and we know how many jobs are to be run, then the progress looks better:

Perhaps we should show "grey" also in the first case?

Should be fixed now. Can you double check?

tiborsimko · 2024-02-28T11:11:48Z

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.


A functional observation. Whilst the workflow is running, on the detailed record page, a step may be "completed", but the UI still says "created" next to the step selection drop-down:

Probably unrelated to this PR, let's check and fix this as part of another issue/PR?

tiborsimko · 2024-02-28T11:14:17Z

reana-ui/src/components/WorkflowProgressCircleBar.js

+*/
+
+import PropTypes from "prop-types";
+import styles from "./WorkflowProgressCircleBar.module.scss";


Another cosmetic observation. Whilst the workflow is running, we are displaying (correctly) green progress bar part for those jobs that have finished. However, on the worklfow list page, this gives too much "green" for a workflow that is "blue" because it is still running.

Perhaps we may want to show the progress circle in blue if the status of the workflow is running? In this way it'll be easy to distinguish directly which workflows are finished and which are still running, and the colour consistency may look better in that way.

Progress bar is now blue, with solid stroke for finished workflows and dashed stroke for running ones.

mdonadoni

Left some comments, but I like the redesign very much! Neat idea using an svg to show the progress circle 🚀

reana-ui/src/components/Box.js

reana-ui/src/components/WorkflowBadges.js

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

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

reana-ui/src/components/WorkflowProgressCircleBar.js

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

reana-ui/src/components/WorkflowProgressCircleBar.js

reana-ui/src/pages/workflowList/WorkflowList.js

…nahub#394) Closes reanahub#151 Closes reanahub#395

…ahub#394) Change the style of the workflow badges (Jupyter notebook, GitHub, ...) to unify their style. Move the workflow duration to another badge in the bottom section of the workflow box. Move the actions button to the same section to avoid having nested interactive element and comply with the W3 HTML specifications.

…ahub#394)

…nahub#394) Closes reanahub#151 Closes reanahub#395

mdonadoni · 2024-04-22T13:30:24Z

Rebased the PR and made some changes addressing comments posted here and coming from internal discussions in a separate commit. How should we handle commits, should we just squash and merge?

mdonadoni · 2024-04-22T14:05:26Z