Skip to content

Commit 660584e

Browse files
mdonadonimdonadoni
committed
feat(workflow-list): redesign subtler progress bar and badges (#394)
- Make non-clickable badges more subtle. - Make progress bar smaller and place it close to the step counter. - Fix alignment and spacing of some elements.
1 parent fa65bb5 commit 660584e

16 files changed

+264
-255
lines changed

‎reana-ui/src/components/Box.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/*
22
This file is part of REANA.
3-
Copyright (C) 2022 CERN.
3+
Copyright (C) 2022, 2024 CERN.
44
55
REANA is free software; you can redistribute it and/or modify it
66
under the terms of the MIT License; see LICENSE file for more details.

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

+1-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/*
22
This file is part of REANA.
3-
Copyright (C) 2022 CERN.
3+
Copyright (C) 2022, 2024 CERN.
44
55
REANA is free software; you can redistribute it and/or modify it
66
under the terms of the MIT License; see LICENSE file for more details.
@@ -12,7 +12,6 @@
1212
color: $raven;
1313
border: 5px solid $sepia;
1414
margin: 1rem 0;
15-
padding: 0;
1615

1716
&.padding {
1817
padding: 1em 1em;
@@ -22,8 +21,4 @@
2221
display: flex;
2322
justify-content: space-between;
2423
}
25-
26-
&.wrap {
27-
flex-wrap: wrap;
28-
}
2924
}

‎reana-ui/src/components/LauncherLabel.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/*
22
This file is part of REANA.
3-
Copyright (C) 2022 CERN.
3+
Copyright (C) 2022, 2024 CERN.
44
55
REANA is free software; you can redistribute it and/or modify it
66
under the terms of the MIT License; see LICENSE file for more details.

‎reana-ui/src/components/WorkflowActionsPopup.js

+2-7
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,6 @@ export default function WorkflowActionsPopup({ workflow, className }) {
4747
onClick: (e) => {
4848
dispatch(openInteractiveSessionModal(workflow));
4949
setOpen(false);
50-
e.stopPropagation();
5150
},
5251
});
5352
}
@@ -60,7 +59,6 @@ export default function WorkflowActionsPopup({ workflow, className }) {
6059
onClick: (e) => {
6160
dispatch(closeInteractiveSession(id));
6261
setOpen(false);
63-
e.stopPropagation();
6462
},
6563
});
6664
}
@@ -73,7 +71,6 @@ export default function WorkflowActionsPopup({ workflow, className }) {
7371
onClick: (e) => {
7472
dispatch(openStopWorkflowModal(workflow));
7573
setOpen(false);
76-
e.stopPropagation();
7774
},
7875
});
7976
}
@@ -86,7 +83,6 @@ export default function WorkflowActionsPopup({ workflow, className }) {
8683
onClick: (e) => {
8784
dispatch(openDeleteWorkflowModal(workflow));
8885
setOpen(false);
89-
e.stopPropagation();
9086
},
9187
});
9288
}
@@ -99,23 +95,22 @@ export default function WorkflowActionsPopup({ workflow, className }) {
9995
onClick: (e) => {
10096
dispatch(deleteWorkflow(id));
10197
setOpen(false);
102-
e.stopPropagation();
10398
},
10499
});
105100
}
106101

107102
return (
108-
<div className={className || styles.container}>
103+
<div className={className}>
109104
{menuItems.length > 0 && (
110105
<Popup
111106
basic
112107
trigger={
113108
<Icon
109+
link
114110
name="ellipsis vertical"
115111
className={styles.icon}
116112
onClick={(e) => {
117113
setOpen(true);
118-
e.preventDefault();
119114
}}
120115
/>
121116
}

‎reana-ui/src/components/WorkflowActionsPopup.module.scss

+1-19
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,14 @@
22
-*- coding: utf-8 -*-
33
44
This file is part of REANA.
5-
Copyright (C) 2020, 2022 CERN.
5+
Copyright (C) 2020, 2022, 2024 CERN.
66
77
REANA is free software; you can redistribute it and/or modify it
88
under the terms of the MIT License; see LICENSE file for more details.
99
*/
1010

1111
@import "@palette";
1212

13-
:global(.icon).icon {
14-
display: flex;
15-
align-items: center;
16-
justify-content: center;
17-
height: 100%;
18-
color: $gray;
19-
20-
&:hover {
21-
color: $dark-gray;
22-
}
23-
}
24-
25-
.container {
26-
cursor: pointer;
27-
min-width: 22px;
28-
margin-left: 2em;
29-
}
30-
3113
.jupyter-icon {
3214
width: 1.18em;
3315
float: right;

‎reana-ui/src/components/WorkflowBadges.js

+44-41
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,24 @@
1+
/*
2+
-*- coding: utf-8 -*-
3+
4+
This file is part of REANA.
5+
Copyright (C) 2023, 2024 CERN.
6+
7+
REANA is free software; you can redistribute it and/or modify it
8+
under the terms of the MIT License; see LICENSE file for more details.
9+
*/
10+
111
import styles from "./WorkflowBadges.module.scss";
212
import { Label } from "semantic-ui-react";
313
import { JupyterNotebookIcon } from "~/components";
414
import { INTERACTIVE_SESSION_URL } from "~/client";
515
import { LauncherLabel } from "~/components";
616
import { getReanaToken } from "~/selectors";
717
import { useSelector } from "react-redux";
8-
import { statusMapping } from "~/util";
918

1019
export default function WorkflowBadges({ workflow }) {
1120
const reanaToken = useSelector(getReanaToken);
1221
const {
13-
id,
1422
size,
1523
launcherURL,
1624
session_uri: sessionUri,
@@ -20,44 +28,39 @@ export default function WorkflowBadges({ workflow }) {
2028
const isSessionOpen = sessionStatus === "created";
2129

2230
return (
23-
<>
24-
<div className={styles.badgesContainer}>
25-
{workflow.duration && (
26-
<Label
27-
size="tiny"
28-
content={workflow.duration}
29-
icon="clock"
30-
rel="noopener noreferrer"
31-
color={statusMapping[workflow.status].color}
32-
onClick={(e) => e.stopPropagation()}
33-
/>
34-
)}
35-
{hasDiskUsage && (
36-
<Label
37-
size="tiny"
38-
content={size.human_readable}
39-
icon="hdd"
40-
as="a"
41-
href={"/details/" + id}
42-
target="_blank"
43-
rel="noopener noreferrer"
44-
onClick={(e) => e.stopPropagation()}
45-
/>
46-
)}
47-
{isSessionOpen && (
48-
<Label
49-
size="tiny"
50-
content={"Notebook"}
51-
icon={<JupyterNotebookIcon size={12} />}
52-
as="a"
53-
href={INTERACTIVE_SESSION_URL(sessionUri, reanaToken)}
54-
target="_blank"
55-
rel="noopener noreferrer"
56-
onClick={(e) => e.stopPropagation()}
57-
/>
58-
)}
59-
<LauncherLabel url={launcherURL} />
60-
</div>
61-
</>
31+
<div className={styles.badgesContainer}>
32+
{workflow.duration && (
33+
<Label
34+
basic
35+
size="tiny"
36+
content={`CPU ${workflow.duration}`}
37+
icon="clock"
38+
/>
39+
)}
40+
{hasDiskUsage && (
41+
<Label
42+
basic
43+
size="tiny"
44+
content={`Disk ${size.human_readable}`}
45+
icon="hdd"
46+
/>
47+
)}
48+
<LauncherLabel url={launcherURL} />
49+
{isSessionOpen && (
50+
<Label
51+
size="tiny"
52+
content={"Notebook"}
53+
icon={
54+
<i className="icon">
55+
<JupyterNotebookIcon size={12} />
56+
</i>
57+
}
58+
as="a"
59+
href={INTERACTIVE_SESSION_URL(sessionUri, reanaToken)}
60+
target="_blank"
61+
rel="noopener noreferrer"
62+
/>
63+
)}
64+
</div>
6265
);
6366
}

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

+5-9
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,18 @@
22
-*- coding: utf-8 -*-
33
44
This file is part of REANA.
5-
Copyright (C) 2023 CERN.
5+
Copyright (C) 2023, 2024 CERN.
66
77
REANA is free software; you can redistribute it and/or modify it
88
under the terms of the MIT License; see LICENSE file for more details.
99
*/
10+
@import "@palette";
1011

1112
.badgesContainer {
1213
display: flex;
14+
gap: 5px;
1315

14-
a:global(.label) {
15-
margin-left: 15px;
16-
gap: 10px;
17-
18-
&:hover {
19-
cursor: pointer;
20-
filter: opacity(0.8);
21-
}
16+
:global(.ui.basic.label) {
17+
color: $raven;
2218
}
2319
}

‎reana-ui/src/components/WorkflowInfo.js

+39-47
Original file line numberDiff line numberDiff line change
@@ -32,55 +32,47 @@ export default function WorkflowInfo({ workflow }) {
3232
} = workflow;
3333

3434
return (
35-
<div>
36-
<div
37-
className={`${styles.flexbox} ${styles.workflow} ${
38-
status === "deleted" ? styles.deleted : ""
39-
}`}
40-
>
41-
<div className={styles["details-box"]}>
42-
<Icon
43-
className={styles["status-icon"]}
44-
name={statusMapping[status].icon}
45-
color={statusMapping[status].color}
46-
/>
47-
<div>
48-
<span className={styles.name}>{name}</span>
49-
<span className={styles.run}>#{run}</span>
50-
<Popup
51-
trigger={
52-
<div>
53-
{friendlyFinished
54-
? `Finished ${friendlyFinished}`
55-
: friendlyStarted
56-
? `Started ${friendlyStarted}`
57-
: `Created ${friendlyCreated}`}
58-
</div>
59-
}
60-
content={
61-
friendlyFinished
62-
? finishedDate
35+
<div className={styles["workflow-info"]}>
36+
<div className={styles["details-box"]}>
37+
<Icon
38+
className={styles["status-icon"]}
39+
name={statusMapping[status].icon}
40+
color={statusMapping[status].color}
41+
/>
42+
<div>
43+
<span className={styles.name}>{name}</span>
44+
<span className={styles.run}>#{run}</span>
45+
<Popup
46+
trigger={
47+
<div>
48+
{friendlyFinished
49+
? `Finished ${friendlyFinished}`
6350
: friendlyStarted
64-
? startedDate
65-
: createdDate
66-
}
67-
/>
68-
</div>
51+
? `Started ${friendlyStarted}`
52+
: `Created ${friendlyCreated}`}
53+
</div>
54+
}
55+
content={
56+
friendlyFinished
57+
? finishedDate
58+
: friendlyStarted
59+
? startedDate
60+
: createdDate
61+
}
62+
/>
6963
</div>
70-
<div className={styles["status-box"]}>
71-
<div>
72-
<span
73-
className={`${styles["status"]} sui-${statusMapping[status].color}`}
74-
>
75-
{status}
76-
</span>{" "}
77-
<div>
78-
step {completed}/{total}
79-
</div>
80-
</div>
81-
<div className={styles["progressbar-container"]}>
82-
<WorkflowProgressCircleBar workflow={workflow} />
83-
</div>
64+
</div>
65+
<div className={styles["status-box"]}>
66+
<span
67+
className={`${styles["status"]} sui-${statusMapping[status].color}`}
68+
>
69+
{status}
70+
</span>
71+
<div className={styles["progress-box"]}>
72+
<span>
73+
step {completed}/{total}
74+
</span>
75+
<WorkflowProgressCircleBar workflow={workflow} />
8476
</div>
8577
</div>
8678
</div>

0 commit comments

Comments
 (0)