feat(ui): Add start/end workflows ISO display switch #13284

Adrien-D · 2024-06-30T12:41:00Z

Fixes #12943

Motivation

To give the user the ability to display workflows start/stop time in ISO format.

Modifications

I added the ability to switch time format with a toggle clock icon. This settings is persisted in localStorage.

Verification

I tested on multiple workflows to make sure this settings is shared across workflows.

agilgur5

Fixes #12943

I thought that issue was for more than just the start/end times on the node side panel, no?

Adrien-D · 2024-07-01T09:54:01Z

@agilgur5 I updated my PR to include every Timestamp components corresponding to the timestamps on major views
The setting is stored in localStorage with a unique key by component so it can be changed on specific need.

Also I face a UI issue on list so the icon isn't always shown (STARTED vs FINISHED on my screenshot), so what would be the way to handle this in your opinion ? Is it relevant to be able to switch here ?

Adrien-D · 2024-07-15T17:17:10Z

@agilgur5 I moved the time switch to the table header to make better experience. This PR is ready to review now.

ui/src/app/workflows/components/workflows-row/workflows-row.tsx

ui/src/app/cron-workflows/cron-workflow-list.tsx

terrytangyuan

Maybe also show what format this will be changed to once it's clicked?

Adrien-D · 2024-08-12T07:15:38Z

You mean in the tooltip title ?

To change Switch time format to Switch to ISO format or Switch to relative format for example ?

terrytangyuan · 2024-08-19T18:43:55Z

Yes exactly. Just a suggestion though. Not a blocking comment.

Signed-off-by: Adrien Delannoy <[email protected]>

Adrien-D · 2024-08-21T14:02:00Z

@terrytangyuan I implemented your suggestion, now ready to review

terrytangyuan · 2024-08-27T14:14:01Z

Thanks. Would you mind sharing the screenshots?

Adrien-D · 2024-08-27T14:24:33Z

Thanks. Would you mind sharing the screenshots?

Sure I took them, but forgot to share them 😅 Here they are :

terrytangyuan

Perfect. Thank you for your hard work on this!

Signed-off-by: Adrien Delannoy <[email protected]>

ui/src/app/cluster-workflow-templates/cluster-workflow-template-list.tsx

agilgur5 · 2024-10-08T21:34:57Z

ui/src/app/cluster-workflow-templates/cluster-workflow-template-list.tsx

@@ -51,6 +52,8 @@ export function ClusterWorkflowTemplateList({history, location}: RouteComponentP

    useCollectEvent('openedClusterWorkflowTemplateList');

+    const [storedDisplayISOFormat, setStoredDisplayISOFormat] = useTimestamp(TIMESTAMP_KEYS.CLUSTER_WORKFLOW_TEMPLATE_LIST);


similarly, the existing style has all consts at the top of the component, while this is an outlier. please follow the existing style

ui/src/app/cron-workflows/cron-workflow-list.tsx

ui/src/app/cron-workflows/cron-workflow-status-viewer.tsx

ui/src/app/event-sources/event-source-list.tsx

ui/src/app/sensors/sensor-list.tsx

ui/src/app/workflow-templates/workflow-template-list.tsx

ui/src/app/workflows/components/workflow-details-list/workflow-details-list.tsx

ui/src/app/workflows/components/workflow-node-info/workflow-node-info.tsx

ui/src/app/workflows/components/workflow-summary-panel.tsx

ui/src/app/workflows/components/workflows-list/workflows-list.tsx

agilgur5 · 2024-10-10T07:39:20Z

ui/src/app/shared/use-timestamp.ts

+const storage = new ScopedLocalStorage('Timestamp');
+
+// key is used to store the preference in local storage
+const useTimestamp = (timestampKey: TIMESTAMP_KEYS): [boolean, (value: boolean) => void] => {


Per #13160 (comment) and #12062 et al, please use named functions instead of consts assigned to anonymous functions.

this file seems to be an outlier in this usage amongst the rest of the code in this PR

agilgur5 · 2024-10-10T07:39:31Z

ui/src/app/shared/use-timestamp.ts

+const useTimestamp = (timestampKey: TIMESTAMP_KEYS): [boolean, (value: boolean) => void] => {
+    const [storedDisplayISOFormat, setStoredDisplayISOFormat] = useState<boolean>(storage.getItem(`displayISOFormat-${timestampKey}`, false));
+
+    const handleStoredDisplayISOFormatChange = (value: boolean) => {


same as above

agilgur5

Sorry that I did not get to this earlier; as you might be able to tell, my list of todos has been overflowing for some time.

It looks like this can be quite heavily simplified with a single global, which would be more consistent and match the "Settings" / "Preferences" page intent of #12943 (comment)

agilgur5 · 2024-10-10T07:41:50Z

ui/src/app/shared/components/timestamp.tsx

+            <a>
+                <i


This isn't a button nor has the role of a button, so this will cause accessibility issues and keyboard limitations. Related: argoproj/argo-ui#221

agilgur5 · 2024-10-10T07:50:11Z

ui/src/app/shared/use-timestamp.ts

+    WORKFLOWS_ROW_FINISHED = 'workflowsRowFinished',
+    CRON_ROW_STARTED = 'cronRowStarted',
+    CRON_ROW_FINISHED = 'cronRowFinished'
+}


So in #12943 (comment) I had proposed a "Settings" or "Preferences" page. That would also help with width issues from the icon, but the more important part is the functionality itself:

Rather than having a separate state for each page or multiple states on the same page, there would be a single global.
In the approach you have here, you wouldn't need any of these keys and instead they all share the same localStorage entry / same context (see also #12986 (comment)).
I think that is more consistent, especially when on the same page or multiple columns of the same page. Those especially having simultaneously different formats feels pretty confusing to me.

On top of that, reducing this to a single global would significantly simplify the usage in other components -- there would no longer be state and callbacks to pass through nor constants to use. (there's some change detection you'd need to handle, but there's a couple ways of doing that)

agilgur5 · 2024-10-10T07:55:25Z

ui/src/app/shared/use-timestamp.ts

this hook is only ever used with the Timestamp components, so I would suggest placing them in the same file as well (although it may not be necessary to export at all with a global as per above; depends on how you do it).
Same as in #13593 (comment), that would combine the imports to make the usage very self-evident as import {Timestamp, useTimestamp}, which is also a common convention in the React ecosystem

Signed-off-by: Adrien Delannoy <[email protected]>

Signed-off-by: Adrien Delannoy <[email protected]> Co-authored-by: Adrien Delannoy <[email protected]> Backports: argoproj#13284 Fixes: argoproj#12943

agilgur5 changed the title ~~feat: Add start/end workflows ISO display switch~~ feat(ui): Add start/end workflows ISO display switch Jun 30, 2024

agilgur5 reviewed Jun 30, 2024

View reviewed changes

agilgur5 added the area/ui label Jun 30, 2024

Adrien-D force-pushed the iso-timestamps branch from 3a85e4f to 42c0f31 Compare July 1, 2024 09:48

Adrien-D force-pushed the iso-timestamps branch from 42c0f31 to 6c4b05e Compare July 15, 2024 17:09

Adrien-D requested a review from agilgur5 July 15, 2024 17:17

Adrien-D force-pushed the iso-timestamps branch from 6c4b05e to 10673dc Compare July 15, 2024 17:25

djanjic reviewed Jul 24, 2024

View reviewed changes

ui/src/app/workflows/components/workflows-row/workflows-row.tsx Show resolved Hide resolved

djanjic reviewed Jul 24, 2024

View reviewed changes

ui/src/app/cron-workflows/cron-workflow-list.tsx Outdated Show resolved Hide resolved

Adrien-D requested a review from djanjic July 29, 2024 14:41

Adrien-D mentioned this pull request Jul 31, 2024

REQUEST: New membership for Adrien-d argoproj/argoproj#312

Closed

6 tasks

terrytangyuan reviewed Aug 10, 2024

View reviewed changes

Adrien-D added 4 commits August 21, 2024 11:45

feat: add start/end workflows ISO display switch

80b5d60

Signed-off-by: Adrien Delannoy <[email protected]>

feat: improve timestamp switch management

40f0258

Signed-off-by: Adrien Delannoy <[email protected]>

fix: timestamp display on cron workflow list

d3cea28

Signed-off-by: Adrien Delannoy <[email protected]>

feat: update title depending on ISO/relative

f02c44b

Signed-off-by: Adrien Delannoy <[email protected]>

Adrien-D force-pushed the iso-timestamps branch from c6fab17 to f02c44b Compare August 21, 2024 13:56

Adrien-D requested a review from terrytangyuan August 27, 2024 12:57

terrytangyuan approved these changes Aug 28, 2024

View reviewed changes

terrytangyuan merged commit fed83ca into argoproj:main Aug 28, 2024
16 checks passed

Adrien-D added a commit to pipekit/argo-workflows that referenced this pull request Sep 17, 2024

feat(ui): Add start/end workflows ISO display switch (argoproj#13284)

5d8c9c3

Signed-off-by: Adrien Delannoy <[email protected]>

Adrien-D added a commit to pipekit/argo-workflows that referenced this pull request Sep 17, 2024

feat(ui): Add start/end workflows ISO display switch (argoproj#13284)

22b2cb8

Signed-off-by: Adrien Delannoy <[email protected]>

Adrien-D added a commit to pipekit/argo-workflows that referenced this pull request Sep 17, 2024

feat(ui): Add start/end workflows ISO display switch (argoproj#13284)

130fe43

Signed-off-by: Adrien Delannoy <[email protected]>

tooptoop4 mentioned this pull request Sep 30, 2024

UI: Workflows "Started" / "Finished" should show date and time vs "time ago" #8683

Closed

agilgur5 reviewed Oct 8, 2024

View reviewed changes

ui/src/app/cluster-workflow-templates/cluster-workflow-template-list.tsx Show resolved Hide resolved

agilgur5 reviewed Oct 8, 2024

View reviewed changes

agilgur5 reviewed Oct 10, 2024

View reviewed changes

agilgur5 added this to the v3.6.0 milestone Oct 24, 2024

Adrien-D added a commit to pipekit/argo-workflows that referenced this pull request Nov 26, 2024

feat(ui): Add start/end workflows ISO display switch (argoproj#13284)

3fdb9e9

Signed-off-by: Adrien Delannoy <[email protected]>

Joibel pushed a commit to Joibel/argo-workflows that referenced this pull request Dec 5, 2024

feat(ui): Add start/end workflows ISO display switch (argoproj#13284)

ea2a20b

Signed-off-by: Adrien Delannoy <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui): Add start/end workflows ISO display switch #13284

feat(ui): Add start/end workflows ISO display switch #13284

Adrien-D commented Jun 30, 2024

agilgur5 left a comment

Adrien-D commented Jul 1, 2024

Adrien-D commented Jul 15, 2024

terrytangyuan left a comment

Adrien-D commented Aug 12, 2024 •

edited by agilgur5

Loading

terrytangyuan commented Aug 19, 2024

Adrien-D commented Aug 21, 2024

terrytangyuan commented Aug 27, 2024

Adrien-D commented Aug 27, 2024

terrytangyuan left a comment

agilgur5 Oct 8, 2024

agilgur5 Oct 10, 2024

agilgur5 Oct 10, 2024 •

edited

Loading

agilgur5 left a comment •

edited

Loading

agilgur5 Oct 10, 2024

agilgur5 Oct 10, 2024 •

edited

Loading

agilgur5 Oct 10, 2024 •

edited

Loading

		@@ -51,6 +52,8 @@ export function ClusterWorkflowTemplateList({history, location}: RouteComponentP

		useCollectEvent('openedClusterWorkflowTemplateList');

		const [storedDisplayISOFormat, setStoredDisplayISOFormat] = useTimestamp(TIMESTAMP_KEYS.CLUSTER_WORKFLOW_TEMPLATE_LIST);

feat(ui): Add start/end workflows ISO display switch #13284

feat(ui): Add start/end workflows ISO display switch #13284

Conversation

Adrien-D commented Jun 30, 2024

Motivation

Modifications

Verification

agilgur5 left a comment

Choose a reason for hiding this comment

Adrien-D commented Jul 1, 2024

Adrien-D commented Jul 15, 2024

terrytangyuan left a comment

Choose a reason for hiding this comment

Adrien-D commented Aug 12, 2024 • edited by agilgur5 Loading

terrytangyuan commented Aug 19, 2024

Adrien-D commented Aug 21, 2024

terrytangyuan commented Aug 27, 2024

Adrien-D commented Aug 27, 2024

terrytangyuan left a comment

Choose a reason for hiding this comment

agilgur5 Oct 8, 2024

Choose a reason for hiding this comment

agilgur5 Oct 10, 2024

Choose a reason for hiding this comment

agilgur5 Oct 10, 2024 • edited Loading

Choose a reason for hiding this comment

agilgur5 left a comment • edited Loading

Choose a reason for hiding this comment

agilgur5 Oct 10, 2024

Choose a reason for hiding this comment

agilgur5 Oct 10, 2024 • edited Loading

Choose a reason for hiding this comment

agilgur5 Oct 10, 2024 • edited Loading

Choose a reason for hiding this comment

Adrien-D commented Aug 12, 2024 •

edited by agilgur5

Loading

agilgur5 Oct 10, 2024 •

edited

Loading

agilgur5 left a comment •

edited

Loading

agilgur5 Oct 10, 2024 •

edited

Loading

agilgur5 Oct 10, 2024 •

edited

Loading