NETOBSERV-669: overview export PNG

[Amoghrd]

Export overview page and each panel in overview page
Update topology export function

[openshift-ci-robot]

@Amoghrd: This pull request references NETOBSERV-669 which is a valid jira issue.

In response to this:

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[codecov]

Codecov Report

Merging #322 (0cedc6b) into main (a5117f8) will increase coverage by 2.74%.
The diff coverage is 25.71%.

❗ Current head 0cedc6b differs from pull request most recent head 48804ea. Consider uploading reports for the commit 48804ea to get more accurate results

@@            Coverage Diff             @@
##             main     #322      +/-   ##
==========================================
+ Coverage   55.18%   57.93%   +2.74%     
==========================================
  Files          29      150     +121     
  Lines        1745     6642    +4897     
  Branches        0      795     +795     
==========================================
+ Hits          963     3848    +2885     
- Misses        694     2577    +1883     
- Partials       88      217     +129     

Flag	Coverage Δ
uitests	58.77% <25.71%> (?)
unittests	55.56% <ø> (+0.37%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...c/components/netflow-overview/netflow-overview.tsx	80.00% <0.00%> (ø)
...omponents/netflow-topology/2d/topology-content.tsx	28.79% <ø> (ø)
web/src/utils/export.ts	14.28% <14.28%> (ø)
web/src/components/netflow-traffic.tsx	53.53% <20.00%> (ø)
...eb/src/components/netflow-overview/panel-kebab.tsx	66.66% <57.14%> (ø)
...onents/netflow-overview/netflow-overview-panel.tsx	100.00% <100.00%> (ø)

... and 118 files with indirect coverage changes

[openshift-ci-robot]

@Amoghrd: This pull request references NETOBSERV-669 which is a valid jira issue.

In response to this:

Export overview page and each panel in overview page
Update topology export function

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[Amoghrd]

@jpinsonneau Could you please review this when you are free

[jpinsonneau]

Small changes but LGTM 🥳 thanks @Amoghrd !

Do you want to centralize the toPng calls in a single place like utils/export.ts ?
It would avoid repeating the options, the link creation and the catch. That can be a followup if you prefer.

[Amoghrd]

/hold

[Amoghrd]

@jpinsonneau When implementing the utils/export.ts change, I am getting
<e> [webpack-dev-server] [HPM] Error occurred while proxying request localhost:9001/api/loki/flows?filters=&limit=50&recordType=flowLog&reporter=destination&timeRange=300&rateInterval=30s&step=15s&type=count to http://localhost:9002/ [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors) <e> [webpack-dev-server] [HPM] Error occurred while proxying request localhost:9001/api/frontend-config to http://localhost:9002/ [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors) <e> [webpack-dev-server] [HPM] Error occurred while proxying request localhost:9001/api/prometheus/api/v1/rules?type=alert to http://localhost:9002/ [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors) <e> [webpack-dev-server] [HPM] Error occurred while proxying request localhost:9001/api/alertmanager/api/v2/silences to http://localhost:9002/ [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors) <e> [webpack-dev-server] [HPM] Error occurred while proxying request localhost:9001/api/loki/topology?filters=&limit=5&recordType=flowLog&reporter=destination&timeRange=300&rateInterval=30s&step=15s&type=bytes&scope=namespace to http://localhost:9002/ [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors) <e> [webpack-dev-server] [HPM] Error occurred while proxying request localhost:9001/api/loki/topology?filters=&limit=5&recordType=flowLog&reporter=destination&timeRange=300&rateInterval=30s&step=15s&type=bytes&scope=app to http://localhost:9002/ [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors) <e> [webpack-dev-server] [HPM] Error occurred while proxying request localhost:9001/api/loki/ready to http://localhost:9002/ [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors)
when I do make-standalone-mock. Could you PTAL and let me know if there's something wrong in the utils file

[jpinsonneau]

@jpinsonneau When implementing the utils/export.ts change, I am getting ` [webpack-dev-server] [HPM] Error occurred while proxying request

@Amoghrd sorry about that. I didn't checked the impact of https://github.com/netobserv/network-observability-console-plugin/pull/315/files on standalone mode that actually conflicts.
I forced the metrics port to 9003 for this specific usage.

Also took the opportunity to refactor a bit the export function

• renamed to exportToPng
• check the HTMLElement inside it
• log error is provided element is undefined

[jpinsonneau]

/lgtm

[Amoghrd]

/unhold

[openshift-ci]

New changes are detected. LGTM label has been removed.

[github-actions]

New image: quay.io/netobserv/network-observability-console-plugin:97aed2d. It will expire after two weeks.

[openshift-ci]

New changes are detected. LGTM label has been removed.

[memodi]

/label qe-approved

[memodi]

/label qe-approved

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

Approval requirements bypassed by manually added approval.

This pull-request has been approved by:

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment