Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add Topology sidebar for Operator Backed Services #6017

Merged
merged 1 commit into from Jul 27, 2020
Merged

Add Topology sidebar for Operator Backed Services #6017

merged 1 commit into from Jul 27, 2020

Conversation

rottencandy
Copy link
Contributor

@rottencandy rottencandy commented Jul 17, 2020 •
edited

Fixes:
https://issues.redhat.com/browse/ODC-4024

Analysis / Root cause:
As a user, I want to see more details about operator backed services in Topology.

Solution Description:
Add a sidebar that can be opened by clicking an operator backed service from the topology.

Screen shots / Gifs for design review(updated):
p1
p2

cc: @openshift/team-devconsole-ux @rohitkrai03

Browser conformance:

  • Chrome
  • Firefox
  • Safari
  • Edge

@openshift-ci-robot openshift-ci-robot added the component/dev-console Related to dev-console label Jul 17, 2020
invincibleJai
invincibleJai reviewed Jul 17, 2020
View reviewed changes
frontend/packages/dev-console/src/components/topology/operators/TopologyOperatorBackedPanel.tsx Outdated Show resolved Hide resolved
frontend/packages/dev-console/src/components/topology/operators/TopologyOperatorBackedPanel.tsx Outdated Show resolved Hide resolved
frontend/packages/dev-console/src/components/topology/operators/TopologyOperatorBackedPanel.tsx
<div className="overview__sidebar-pane-head resource-overview__heading">
<h1 className="co-m-pane__heading">
<div className="co-m-pane__name co-resource-item">
<ResourceIcon kind="Operator" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can use model to get kind or pick from obj itself, wdyt?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added a separate icon because ResourceLink was showing a CSV icon, but design docs had O, and O is also consistent with topology node. I can change it if it's not required.

...d/packages/dev-console/src/components/topology/operators/TopologyOperatorBackedResources.tsx Outdated Show resolved Hide resolved
...d/packages/dev-console/src/components/topology/operators/TopologyOperatorBackedResources.tsx Outdated Show resolved Hide resolved
...d/packages/dev-console/src/components/topology/operators/TopologyOperatorBackedResources.tsx Outdated Show resolved Hide resolved
@invincibleJai
Copy link
Member

on view all pods , it shows just 1 but in sidebar says 5

Jul-17-2020 15-52-22

@openshift-ci-robot openshift-ci-robot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Jul 18, 2020
@openshift-ci-robot openshift-ci-robot removed the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Jul 21, 2020
@rottencandy
Copy link
Contributor Author

Rebased and updated with Details tab.

rohitkrai03
rohitkrai03 suggested changes Jul 21, 2020
View reviewed changes
...d/packages/dev-console/src/components/topology/operators/TopologyOperatorBackedResources.tsx Outdated
Comment on lines 27 to 30
<TopologyHelmReleaseResourcesPanel
manifestResources={finalRes}
releaseNamespace={item.resources.obj.metadata.namespace}
/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably better to rename this component to something generic that both operator and helm side panels use. Something like TopologyWorkloadResourcesPanel. Props like manifestResources and releaseNamespace doesn't make sense here. WDYT @jeff-phillips-18 ?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

agreed.

@beaumorley
Copy link

Looks good @rohitkrai03 @rottencandy

One small comment. In the second screen capture with the resources tab selected, the alignment of the resources is off.

It looks like this:
image

The "Deployments" title should align with the "D" in the details tab. The deployments should move over the same amount of space (but stay indented from the title like they are now).

This looks like it may be resolved in the third screen grab taken by Jai but want to make sure.

Thank you!

cc @serenamarie125

@rottencandy
Copy link
Contributor Author

The extra space was occuring due to duplicate divs in the resources component, fixed it.

I also renamed TopologyHelmReleaseResourcesPanel to TopologyGroupResourcesPanel and moved it from helm to the components directory.

cc: @beaumorley @rohitkrai03
demo

debsmita1
debsmita1 reviewed Jul 23, 2020
View reviewed changes
...tend/packages/dev-console/src/components/topology/components/TopologyGroupResourcesPanel.tsx
</div>,
);
}
return lists;
}, []);

return <div className="overview__sidebar-pane-body">{resourceLists}</div>;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removing the div caused this in the Helm group's sidepanel
helm-sidepanel

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Had wrapped the wrong component. Updated.
demo

@debsmita1
Copy link
Contributor

/lgtm

@openshift-ci-robot openshift-ci-robot added the lgtm Indicates that a PR is ready to be merged. label Jul 24, 2020
@rohitkrai03
Copy link
Contributor

/assign

rohitkrai03
rohitkrai03 suggested changes Jul 24, 2020
View reviewed changes
frontend/packages/dev-console/src/components/topology/operators/TopologyOperatorBackedPanel.tsx Outdated

const ResourcesSection = () => <TopologyOperatorBackedResources item={item} />;
const DetailsSection = () => (
<div className="co-m-pane__body">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will align the resource details better with heading and nav items of the sidebar. There's a difference of 10px between sidebar heading and resource details.

Suggested change
<div className="co-m-pane__body">
<div className="overview__sidebar-pane-body">

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated.

@openshift-ci-robot openshift-ci-robot removed the lgtm Indicates that a PR is ready to be merged. label Jul 27, 2020
rohitkrai03
rohitkrai03 approved these changes Jul 27, 2020
View reviewed changes
Copy link
Contributor

@rohitkrai03 rohitkrai03 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

/lgtm
/approve

@openshift-ci-robot openshift-ci-robot added the lgtm Indicates that a PR is ready to be merged. label Jul 27, 2020
@openshift-ci-robot
Copy link
Contributor

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: debsmita1, rohitkrai03, rottencandy

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:

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 openshift-ci-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Jul 27, 2020
@openshift-merge-robot openshift-merge-robot merged commit 36df1ed into openshift:master Jul 27, 2020
@spadgett spadgett added this to the v4.6 milestone Jul 28, 2020
@rottencandy rottencandy deleted the sidebar-4024 branch July 29, 2020 07:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@invincibleJai invincibleJai invincibleJai left review comments

@debsmita1 debsmita1 debsmita1 left review comments

@rohitkrai03 rohitkrai03 rohitkrai03 approved these changes

@alecmerdler alecmerdler Awaiting requested review from alecmerdler

@jeff-phillips-18 jeff-phillips-18 Awaiting requested review from jeff-phillips-18

Assignees

@rohitkrai03 rohitkrai03

@debsmita1 debsmita1

Labels
approved Indicates a PR has been approved by an approver from all required OWNERS files. component/dev-console Related to dev-console lgtm Indicates that a PR is ready to be merged.
Projects
None yet
Milestone
v4.6
Development

Successfully merging this pull request may close these issues.

None yet
9 participants
@rottencandy @invincibleJai @beaumorley @debsmita1 @rohitkrai03 @openshift-ci-robot @jeff-phillips-18 @spadgett @openshift-merge-robot