NETOBSERV-634 UI Consistency: Side panel styling

[jpinsonneau]

Side panel updates:

• wording / styling
• tabs (Details / Raw JSON / Metrics)
• sticky header (scroll is under the selected tab)
• expandable groups for Source / Destination
• added Namespace & Node infos when available on topology

[jpinsonneau]

One interesting thing would be to add long descriptions on each field like:

However there is no value if we don't add particular details. I guess we could start from https://www.iana.org/assignments/ipfix/ipfix.xhtml and update according to our usage.

Can someone help me to write these ? Then I would be happy to implement !
@stleerh @jotak

[andrew-ronaldson]

This looks good! The only thing I would change if it's possible is the Side panel Title. Can it be the resource name (P) dns-pod-blah-blah-blah-24 instead of "Pod"?

[jpinsonneau]

This looks good! The only thing I would change if it's possible is the Side panel Title. Can it be the resource name (P) dns-pod-blah-blah-blah-24 instead of "Pod"?

Yes I can do that when you click on a single item @andrew-ronaldson but what about edges (source + destination) ?
It's also the same for table row 🤔

[jotak]

One interesting thing would be to add long descriptions on each field like

It could be nice. Some fields are pretty obvious (pod, kind, namespace...) other are less (direction, collection latency..) , we just set a description on those who aren't obvious? (or an info icon + tooltip?) It's also to avoid making the user having to scroll to much.

[jotak]

Also, I wonder if we need to keep the "kind / owner kind" fields as they are already displayed as icons

[jotak]

/lgtm
tested and reviewed
@jpinsonneau do you want to try your suggestions in this PR or later?

[jotak]

This looks good! The only thing I would change if it's possible is the Side panel Title. Can it be the resource name (P) dns-pod-blah-blah-blah-24 instead of "Pod"?

Yes I can do that when you click on a single item @andrew-ronaldson but what about edges (source + destination) ? It's also the same for table row thinking

+1 with Andrew's suggestion.
Do you think the full edge name "pod-xxx to pod-yyy" would be too long for a title?

[jpinsonneau]

/lgtm tested and reviewed @jpinsonneau do you want to try your suggestions in this PR or later?

I have created a followup so we can really focus on the content
https://issues.redhat.com/browse/NETOBSERV-671

[jpinsonneau]

+1 with Andrew's suggestion. Do you think the full edge name "pod-xxx to pod-yyy" would be too long for a title?

Yes this become too long and we will need to truncate

Also remember the side panel is resizable so in some cases we can have a really small space here

[jpinsonneau]

rebased + added ResourceLink on title for node selection

[Amoghrd]

/ok-to-test

[github-actions]

New image: ["quay.io/netobserv/network-observability-console-plugin:3e97976"]. It will expire after two weeks.

[Amoghrd]

/qe-approved

[andrew-ronaldson]

Can we match the heading size on the sidebar title?

[stleerh]

I want to throw this out there to see what others think.  The Details section is very long.  What if the field name and value were combined on one row and only wraps if it doesn't fit.  Would that make it easier to read?  IMO, the use case for this section is to view fields that are not in the table or to copy the data (e.g. to report an issue). This would be different than how the Pod section shows it, which is on separate rows.

[stleerh]

One interesting thing would be to add long descriptions on each field like

It could be nice. Some fields are pretty obvious (pod, kind, namespace...) other are less (direction, collection latency..) , we just set a description on those who aren't obvious? (or an info icon + tooltip?) It's also to avoid making the user having to scroll to much.

I agree.  The ones that I don't think are obvious are: Start Time, End Time, Owner, Owner Kind, Direction, Duration, Collection Time, and Collection Latency.

[jpinsonneau]

I want to throw this out there to see what others think.  The Details section is very long.  What if the field name and value were combined on one row and only wraps if it doesn't fit.

I like the idea and that would work fine with large panels like this:

However, as soon as the panel is normal / small I would move back all values under their titles for consistency.
Does it makes sense ? @stleerh @andrew-ronaldson

I can create a followup for this about "responsive UI" with similar behaviors in other views

[jpinsonneau]

Can we match the heading size on the sidebar title?

Fixed title size:

Also took the opportunity to add a message on External / Unknown nodes:

Check commit 41e1f95

[jotak]

@stleerh I fully agree, if we can avoid too much scrolling and having more info in one sight, I like it :)

[andrew-ronaldson]

It would be good to have a PF empty state for those unknown nodes.

The title font-weight on the linked version is smaller than the non-linked ones. Sizing looks good though.

Based on the details side panel of the dev console it looks like we can reduce the spacing between field labels and info. I see 14px font-size and 1.66em line-height. Also they have some side-by-side content for shorter fields.

[jpinsonneau]

Rebased branch, no changes on my side

[Amoghrd]

/ok-to-test

[github-actions]

New image: ["quay.io/netobserv/network-observability-console-plugin:855d539"]. It will expire after two weeks.

[Amoghrd]

/qe-approved

[jotak]

/lgtm
Just a remark: we need to care about the separation of concerns and all this kind of things / code quality; the element-panel component was already doing multiple various things, now it's growing a little bit, whereas I think it's a very good candidate for more composition.
I'll do it via https://issues.redhat.com/browse/NETOBSERV-474 (I've already started it) ; but that's something to care about continuously.

[jpinsonneau]

/approve

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: jpinsonneau

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 [jpinsonneau]

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