NETOBSERV-1071: Custom icons #1189

jpinsonneau · 2026-01-08T15:24:11Z

Description

react icons library
custom svgs from kubernetes official icons

Dependencies

n/a

Checklist

If you are not familiar with our processes or don't know what to answer in the list below, let us know in a comment: the maintainers will take care of that.

openshift-ci-robot · 2026-01-08T15:24:15Z

openshift-ci · 2026-01-08T15:24:21Z

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign mffiedler for approval. For more information see the Code Review Process.

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

Details

Needs approval from an approver in each of these files:

DOWNSTREAM_OWNERS

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

openshift-ci-robot · 2026-01-08T15:25:13Z

openshift-ci-robot · 2026-01-08T15:27:35Z

github-actions · 2026-01-08T16:17:33Z

New image:
quay.io/netobserv/network-observability-console-plugin:a08ad5d

It will expire after two weeks.

To deploy this build, run from the operator repo, assuming the operator is running:

USER=netobserv VERSION=a08ad5d make set-plugin-image

leandroberetta

@jpinsonneau thanks for the PR, looks good to me although I have some small comments to discuss.

leandroberetta · 2026-01-12T14:42:34Z

web/src/components/icons/kubernetes-icons.tsx

+  render() {
+    const { size, className, style } = this.props;
+    const sizeValue = typeof size === 'number' ? size : parseFloat(size as string) || 18;
+    return <IconWrapper icon={GrGateway} size={sizeValue} className={className} style={style} />;


The gateway icon changed, I think I like the previous one, is it possible to use the patternfly one?. Also, it seems to have a black background:

Previous one was GlobeRouteIcon:

Also, is that the icon for deployments or should be different? I think we can look for a similar one to the existing today? What do you thinnk?

I don't know why it's so dark in your screen. It was supposed to render like that:

Anyways if you prefer the previous icon I can rollback for sure 👌

codecov · 2026-01-12T16:59:48Z

Codecov Report

❌ Patch coverage is 29.50820% with 129 lines in your changes missing coverage. Please review.
✅ Project coverage is 52.48%. Comparing base (e5a439c) to head (0881543).
⚠️ Report is 7 commits behind head on main.

Files with missing lines	Patch %	Lines
web/src/components/icons/kubernetes-icons.tsx	10.00%	90 Missing ⚠️
pkg/handler/lokiclientmock/loki_client_mock.go	0.00%	24 Missing ⚠️
web/src/components/icons/react-icons.tsx	75.00%	7 Missing ⚠️
...ents/tabs/netflow-topology/2d/styles/styleNode.tsx	46.15%	7 Missing ⚠️
web/src/components/dropdowns/match-dropdown.tsx	50.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1189      +/-   ##
==========================================
- Coverage   52.95%   52.48%   -0.48%     
==========================================
  Files         209      214       +5     
  Lines       10950    11154     +204     
  Branches     1391     1413      +22     
==========================================
+ Hits         5799     5854      +55     
- Misses       4602     4749     +147     
- Partials      549      551       +2

Flag	Coverage Δ
uitests	`54.58% <33.96%> (-0.37%)`	⬇️
unittests	`46.47% <0.00%> (-0.81%)`	⬇️

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

Files with missing lines	Coverage Δ
web/src/components/drawer/record/record-field.tsx	`49.73% <100.00%> (+0.26%)`	⬆️
web/src/components/icons/index.ts	`100.00% <100.00%> (ø)`
web/src/components/icons/react-icons-wrapper.tsx	`100.00% <100.00%> (ø)`
...ents/query-summary/flows-query-summary-content.tsx	`100.00% <100.00%> (ø)`
...c/components/query-summary/flows-query-summary.tsx	`80.00% <ø> (ø)`
...ts/query-summary/metrics-query-summary-content.tsx	`61.53% <100.00%> (+0.60%)`	⬆️
...components/query-summary/metrics-query-summary.tsx	`100.00% <ø> (ø)`
...nts/tabs/netflow-topology/2d/styles/styleGroup.tsx	`45.45% <100.00%> (ø)`
...b/src/components/toolbar/filters/filters-chips.tsx	`48.81% <100.00%> (+0.40%)`	⬆️
...b/src/components/toolbar/filters/quick-filters.tsx	`19.04% <100.00%> (ø)`
... and 5 more

... and 11 files with indirect coverage changes

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

leandroberetta

lgtm

Amoghrd · 2026-01-13T13:57:16Z

/ok-to-test

github-actions · 2026-01-13T14:01:03Z

New image:
quay.io/netobserv/network-observability-console-plugin:d3f82ca

It will expire after two weeks.

To deploy this build, run from the operator repo, assuming the operator is running:

USER=netobserv VERSION=d3f82ca make set-plugin-image

Amoghrd · 2026-01-13T19:43:04Z

Comments:

The summary fields are not in the same line

The icon for namespace can be something else other than dotted boxes or is that the norm?

It also would be good for the icons to be reviewed all members to see if they are apt/look good

Amoghrd · 2026-01-13T21:51:07Z

Also tested for network and VM icons, both are still ?

jpinsonneau · 2026-01-14T09:46:59Z

Comments:

The summary fields are not in the same line

Sure, let me fix that

The icon for namespace can be something else other than dotted boxes or is that the norm?

It also would be good for the icons to be reviewed all members to see if they are apt/look good

It could be anything we want. I just took it from the svgs in https://github.com/kubernetes/community/tree/master/icons/svg/resources/unlabeled

Also tested for network and VM icons, both are still ?

Yeah I'm not sure why I didn't found those implemented already 🤔
I thought it was ! I'll fix that in the same PR

Thanks for your feedback !

openshift-ci · 2026-01-14T11:35:52Z

New changes are detected. LGTM label has been removed.

jpinsonneau · 2026-01-14T11:36:39Z

Added the missing icons and fixed alignment: 3fc9829

jpinsonneau · 2026-01-14T11:41:27Z

Added the missing icons and fixed alignment: 0881543

Also updated the mocks so everybody can have a quick look 😸

Amoghrd · 2026-01-14T14:08:28Z

/ok-to-test

github-actions · 2026-01-14T14:12:01Z

New image:
quay.io/netobserv/network-observability-console-plugin:8741167

It will expire after two weeks.

To deploy this build, run from the operator repo, assuming the operator is running:

USER=netobserv VERSION=8741167 make set-plugin-image

Amoghrd · 2026-01-14T18:27:09Z

Alignment looks good now. VM's and network have icons too now.
I added a comment on slack about having different icons for some fields though

jpinsonneau · 2026-01-15T09:35:39Z

Alignment looks good now. VM's and network have icons too now. I added a comment on slack about having different icons for some fields though

yeah let's grab more feedback and merge when we agree. Thanks @Amoghrd !

openshift-ci-robot added the jira/valid-reference label Jan 8, 2026

react icons + custom svgs

aaa4343

jpinsonneau force-pushed the 1071 branch from 54a11d0 to aaa4343 Compare January 8, 2026 15:53

jpinsonneau added the ok-to-test To set manually when a PR is safe to test. Triggers image build on PR. label Jan 8, 2026

jpinsonneau requested review from OlivierCazade and leandroberetta January 8, 2026 16:17

colors polishing

5fd008b

github-actions bot removed the ok-to-test To set manually when a PR is safe to test. Triggers image build on PR. label Jan 12, 2026

leandroberetta reviewed Jan 12, 2026

View reviewed changes

rollback gateway icon

983b94d

leandroberetta approved these changes Jan 12, 2026

View reviewed changes

openshift-ci bot assigned leandroberetta Jan 12, 2026

openshift-ci bot added the lgtm label Jan 12, 2026

openshift-ci bot added the ok-to-test To set manually when a PR is safe to test. Triggers image build on PR. label Jan 13, 2026

openshift-ci bot removed the lgtm label Jan 14, 2026

github-actions bot removed the ok-to-test To set manually when a PR is safe to test. Triggers image build on PR. label Jan 14, 2026

address feedback and improve mocks

0881543

jpinsonneau force-pushed the 1071 branch from 3fc9829 to 0881543 Compare January 14, 2026 11:40

openshift-ci bot added the ok-to-test To set manually when a PR is safe to test. Triggers image build on PR. label Jan 14, 2026

NETOBSERV-1071: Custom icons #1189

Are you sure you want to change the base?

NETOBSERV-1071: Custom icons #1189

Uh oh!

Conversation

jpinsonneau commented Jan 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Dependencies

Checklist

Uh oh!

openshift-ci-robot commented Jan 8, 2026 • edited by openshift-ci bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Dependencies

Checklist

Uh oh!

openshift-ci bot commented Jan 8, 2026

Uh oh!

openshift-ci-robot commented Jan 8, 2026 • edited by openshift-ci bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Dependencies

Checklist

Uh oh!

openshift-ci-robot commented Jan 8, 2026 • edited by openshift-ci bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Dependencies

Checklist

Uh oh!

github-actions bot commented Jan 8, 2026

Uh oh!

leandroberetta left a comment

Choose a reason for hiding this comment

Uh oh!

leandroberetta Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

jpinsonneau Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jpinsonneau Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

leandroberetta left a comment

Choose a reason for hiding this comment

Uh oh!

Amoghrd commented Jan 13, 2026

Uh oh!

github-actions bot commented Jan 13, 2026

Uh oh!

Amoghrd commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Amoghrd commented Jan 13, 2026

Uh oh!

jpinsonneau commented Jan 14, 2026

Uh oh!

openshift-ci bot commented Jan 14, 2026

Uh oh!

jpinsonneau commented Jan 14, 2026

Uh oh!

jpinsonneau commented Jan 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Amoghrd commented Jan 14, 2026

Uh oh!

github-actions bot commented Jan 14, 2026

Uh oh!

Amoghrd commented Jan 14, 2026

Uh oh!

jpinsonneau commented Jan 15, 2026

Uh oh!

Reviewers

jpinsonneau commented Jan 8, 2026 •

edited

Loading

openshift-ci-robot commented Jan 8, 2026 •

edited by openshift-ci bot

Loading

openshift-ci-robot commented Jan 8, 2026 •

edited by openshift-ci bot

Loading

openshift-ci-robot commented Jan 8, 2026 •

edited by openshift-ci bot

Loading

jpinsonneau Jan 12, 2026 •

edited

Loading

codecov bot commented Jan 12, 2026 •

edited

Loading

Amoghrd commented Jan 13, 2026 •

edited

Loading

jpinsonneau commented Jan 14, 2026 •

edited

Loading