feat: runtime metrics UI

[4nalog]

TL;DR

This PR adds logic for allowing runtime task metrics to me displayed in the timeline chart component

To run:

• setup the project by cloning
• run yarn install and yarn start
• navigate to a specific workflow and check out the timeline view

Type

• Bug Fix
• Feature
• Plugin

Are all requirements met?

• Code completed
• Smoke tested
• Unit tests added
• Code documentation added
• Any pending items have an associated Issue

Complete description

This feature:

• add logic to fetch task level runtime metrics in the timeline view using the new workflow execution metrics api
• destructures the data returned from the workflow execution metrics api to get values from the corresponding phases in detail based on the operation id
• displays those as a chart on the timeline

Tracking Issue

fixes

[codecov]

Codecov Report

Merging #747 (49f906d) into master (e28a142) will decrease coverage by 0.19%.
The diff coverage is 49.62%.

❗ Current head 49f906d differs from pull request most recent head 3bc01f9. Consider uploading reports for the commit 3bc01f9 to get more accurate results

@@            Coverage Diff             @@
##           master     #747      +/-   ##
==========================================
- Coverage   66.09%   65.90%   -0.19%     
==========================================
  Files         488      489       +1     
  Lines       11806    11914     +108     
  Branches     2171     2195      +24     
==========================================
+ Hits         7803     7852      +49     
- Misses       4003     4062      +59     

Impacted Files	Coverage Δ
...cutionDetails/Timeline/TimelineChart/barOptions.ts	0.00% <0.00%> (ø)
.../ExecutionDetails/Timeline/TimelineChart/index.tsx	0.00% <0.00%> (ø)
...ole/src/components/Workflow/useWorkflowInfoItem.ts	51.16% <0.00%> (-2.50%)	⬇️
...ges/console/src/components/common/DetailsPanel.tsx	92.30% <ø> (ø)
packages/console/src/models/Common/constants.ts	100.00% <ø> (ø)
packages/console/src/models/Execution/api.ts	46.77% <50.00%> (+0.10%)	⬆️
packages/console/src/models/Execution/utils.ts	75.00% <50.00%> (-2.78%)	⬇️
...sole/src/components/Entities/EntityDescription.tsx	79.62% <57.14%> (-1.51%)	⬇️
...s/ExecutionDetails/Timeline/TimelineChart/utils.ts	78.26% <65.21%> (-13.58%)	⬇️
...ges/console/src/components/hooks/useDescription.ts	66.66% <75.00%> (-3.34%)	⬇️
... and 6 more

[tsheiner]

@4nalog here I am

[tsheiner]

@4nalog I can run this, but I don't see any partitioning of the timeline graph. Also I'm seeing the height issue you reported earlier.

[tsheiner]

@4nalog I can run this but when I look at any timeline view, I do not see the the chart lines partitioned, do not get a detail pop up.

What am I missing?

[jsonporter]

Bugs per our sync with @hamersaw:

• Diff on seconds first
• append nanos (if present) to result of seconds diff.

[tsheiner]

@4nalog I see two issues:

• the way the tooltip animates is not OK; it kind of flys in from somewhere. Please just fade it up in .5ms at mouse position.
• I think we are still drawing the lines partitioning the bar; please suppress.

[flyte-bot]

🎉 This PR is included in version 1.7.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀