feat(ui): Support Unix epoch timestamps in links #5666

dinever · 2021-04-13T06:12:05Z

This PR enables us to use ${status.startedAtEpoch} and ${status.finishedAtEpoch} in Argo links.

This is very useful for users who want to link to a logging facility that only supports epoch timestamps as URL parameters.

For example, by setting the following link:

  links: |
    - name: Grafana
      scope: workflow
      url: https://play.grafana.org/d/000000012/grafana-play-home?namespace=${metadata.namespace}&workflowName=${metadata.name}&from=${status.startedAtEpoch}&to=${status.finishedAtEpoch}
    - name: DataDog
      scope: workflow
      url: https://app.datadoghq.com/logs?live=false&from_ts=${status.startedAtEpoch}&to_ts=${status.finishedAtEpoch}

We can link to a Grafana / DataDog dashboard by the timestamp.

Showcase:

Docs:

Would ❤️ to hear some feedback. Thanks!

codecov · 2021-04-13T06:17:32Z

Codecov Report

Merging #5666 (feba601) into master (71dfc79) will decrease coverage by 0.01%.
The diff coverage is n/a.

❗ Current head feba601 differs from pull request most recent head 815f3d3. Consider uploading reports for the commit 815f3d3 to get more accurate results

@@            Coverage Diff             @@
##           master    #5666      +/-   ##
==========================================
- Coverage   47.12%   47.10%   -0.02%     
==========================================
  Files         242      242              
  Lines       15135    15135              
==========================================
- Hits         7133     7130       -3     
- Misses       7095     7096       +1     
- Partials      907      909       +2

Impacted Files	Coverage Δ
workflow/controller/operator.go	`70.84% <0.00%> (-0.27%)`	⬇️
workflow/metrics/server.go	`16.66% <0.00%> (+4.16%)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 71dfc79...815f3d3. Read the comment docs.

ui/src/app/shared/utils.ts

Signed-off-by: Peixuan Ding <dingpeixuan911@gmail.com>

dinever · 2021-04-15T05:04:12Z

docs/workflow-controller-configmap.yaml

+    # Adds a button to the workflow page but the timestamps are converted to Unix epoch time instead.
+    - name: Example Workflow Link
+      scope: workflow
+      url: "http://logging-facility?namespace=${metadata.namespace}&workflowName=${metadata.name}&startedAt=${status.startedAt | date: '%s'}&finishedAt=${ status.finishedAt | date: '%s' | default: 'now' }"


Added an example to demonstrate filters.

dinever · 2021-04-15T05:05:04Z

...rc/app/archived-workflows/components/archived-workflow-details/archived-workflow-details.tsx

+            window.open(url, '_blank');
+        } else {
+            document.location.href = url;
+        }


Looks like archived workflow links don't support opening with a new tab before. So fixed that.

Signed-off-by: Peixuan Ding <dingpeixuan911@gmail.com>

dinever · 2021-04-15T05:07:26Z

ui/src/app/event-sources/components/event-source-log-viewer.tsx

@@ -99,6 +100,7 @@ export const EventSourceLogsViewer = ({
                            }}
                        />
                    )}
+                    <Links scope='event-source-logs' object={eventSource} />


Looks like event source logs were not actually added. We have this in the example configmap tho. So have to fix this.

dinever · 2021-04-15T05:08:49Z

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

@@ -34,7 +34,7 @@ export const Links = ({scope, object, button}: {scope: string; object: {metadata
    };

    const openLink = (url: string) => {
-        if ((window.event as MouseEvent).ctrlKey) {
+        if ((window.event as MouseEvent).ctrlKey || (window.event as MouseEvent).metaKey) {


In MacOS we have to use command + left click to open in a new tab.

dinever · 2021-04-15T05:09:38Z

docs/links.md

+| `${status.startedAt}`   | Start timestamp of the workflow/pod, in the format of `2021-01-01T10:35:56Z`                                                                              |
+| `${status.finishedAt}`  | End timestamp of the workflow/pod, in the format of  `2021-01-01T10:35:56Z`. If the workflow/pod is still running, this variable will be an empty string. |
+
+> v3.1 and after


I don't see 3.1 branch created yet so I assume this change will go in 3.1 release (if merged)?

dinever · 2021-04-15T05:10:23Z

Thanks for the review @alexec!

I've done some investigation.
Seems like there isn't a way to limit the scope of eval or Function() and make it safe in JavaScript.
So I looked for some template engine that we can use. The following are the ones don't work:

mustache: doesn’t support utility functions/filters
ejs: doesn’t support custom tags like ${...}
dotjs: context is only accessible under it variable, which is not backward compatible with what we have right now
handlerbars: doesn’t support custom tags like ${...}
nunjucks: not safe to use due to no sandbox execution

Luckily, I found LiquidJS which is safe and lightweight with useful built-in filters like date and default.

For example, to convert startedAt to epoch, we can do:

${ status.startedAt | date: '%s' }

I've pushed all my changes. Let me know what you think. Thanks!

Signed-off-by: Peixuan Ding <dingpeixuan911@gmail.com>

ui/yarn.lock

Signed-off-by: Peixuan Ding <dingpeixuan911@gmail.com>

alexec · 2021-04-15T18:33:57Z

Great stuff! 🚢

dinever force-pushed the fix/5557 branch from 89ecf27 to b1ea33e Compare April 13, 2021 06:12

alexec changed the title ~~feat(ui): Support expression evaludaiton in links~~ feat(ui): Support expression evaluation in links Apr 13, 2021

alexec reviewed Apr 13, 2021

View reviewed changes

ui/src/app/shared/utils.ts Outdated Show resolved Hide resolved

alexec reviewed Apr 13, 2021

View reviewed changes

ui/src/app/shared/utils.ts Outdated Show resolved Hide resolved

whynowy assigned alexec Apr 13, 2021

feat(ui): Support expression evaludaiton in links

a371aec

Signed-off-by: Peixuan Ding <dingpeixuan911@gmail.com>

dinever force-pushed the fix/5557 branch from b1ea33e to 9183e0b Compare April 15, 2021 04:47

feat(ui): use LiquidJS for link URL rendering

f6f01fe

Signed-off-by: Peixuan Ding <dingpeixuan911@gmail.com>

dinever force-pushed the fix/5557 branch from 9183e0b to f6f01fe Compare April 15, 2021 04:52

dinever commented Apr 15, 2021

View reviewed changes

feat(ui): fix typo

b1665d0

Signed-off-by: Peixuan Ding <dingpeixuan911@gmail.com>

dinever commented Apr 15, 2021

View reviewed changes

dinever force-pushed the fix/5557 branch 2 times, most recently from 7f1cae2 to e3af497 Compare April 15, 2021 05:53

feat(ui): improved docs

f757591

Signed-off-by: Peixuan Ding <dingpeixuan911@gmail.com>

dinever force-pushed the fix/5557 branch from e3af497 to f757591 Compare April 15, 2021 05:54

alexec reviewed Apr 15, 2021

View reviewed changes

ui/yarn.lock Outdated Show resolved Hide resolved

feat(ui): Added ${status.startedAtEpoch} and ${status.finishedAtEpoch}

abf3860

Signed-off-by: Peixuan Ding <dingpeixuan911@gmail.com>

dinever force-pushed the fix/5557 branch from 75885f9 to abf3860 Compare April 15, 2021 18:00

docs(ui): fix typo

815f3d3

Signed-off-by: Peixuan Ding <dingpeixuan911@gmail.com>

alexec approved these changes Apr 15, 2021

View reviewed changes

alexec merged commit a018523 into argoproj:master Apr 15, 2021

alexec added this to the v3.1 milestone Apr 15, 2021

dinever deleted the fix/5557 branch April 15, 2021 18:38

dinever changed the title ~~feat(ui): Support expression evaluation in links~~ feat(ui): Support Unix epoch timestamps in links Apr 15, 2021

simster7 mentioned this pull request Apr 19, 2021

v3.0.2 cherry-pick #5715

Closed

50 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui): Support Unix epoch timestamps in links #5666

feat(ui): Support Unix epoch timestamps in links #5666

dinever commented Apr 13, 2021 •

edited

Loading

codecov bot commented Apr 13, 2021 •

edited

Loading

dinever Apr 15, 2021 •

edited

Loading

dinever Apr 15, 2021

dinever Apr 15, 2021

dinever Apr 15, 2021

dinever Apr 15, 2021

dinever commented Apr 15, 2021

alexec commented Apr 15, 2021

feat(ui): Support Unix epoch timestamps in links #5666

feat(ui): Support Unix epoch timestamps in links #5666

Conversation

dinever commented Apr 13, 2021 • edited Loading

codecov bot commented Apr 13, 2021 • edited Loading

Codecov Report

dinever Apr 15, 2021 • edited Loading

Choose a reason for hiding this comment

dinever Apr 15, 2021

Choose a reason for hiding this comment

dinever Apr 15, 2021

Choose a reason for hiding this comment

dinever Apr 15, 2021

Choose a reason for hiding this comment

dinever Apr 15, 2021

Choose a reason for hiding this comment

dinever commented Apr 15, 2021

alexec commented Apr 15, 2021

dinever commented Apr 13, 2021 •

edited

Loading

codecov bot commented Apr 13, 2021 •

edited

Loading

dinever Apr 15, 2021 •

edited

Loading