Improve Installed Operators list page #4830

rebeccaalpert · 2020-03-26T15:57:54Z

Fixes 98% of https://issues.redhat.com/browse/CONSOLE-2130.

Changes

I removed the "Deployment" column and added a "Last Updated" column.
If "All Projects" is selected in the project selector, there is 1 row per installation of an operator/subscription:
- If Operator X is installed globally, there is 1 row
- If Operator X is installed in one namespace, there is 1 row
- If Operator X is installed twice in Namespace A and Namespace B, there are 2 rows, a row per install.
I added an "Operator Namespace" column indicating where the operator itself is installed (present on all projects view).
- The column includes a "namespace-name" which is linked to the namespace
- If the operator is installed globally, the muted text below "namespace-name" is "All Namespaces"
I added a "Managed Namespace(s)" column indicating the namespace(s) that the operator is watching.
- If the operator is global, it lists "All Namepaces" in muted text
- If the operator is not global, it lists the namespace(s) that it is watching
- I added a popover to list out namespaces if the list is 2+ to ensure the row doesn't blow up
I changed the "Namespace" field on the Operator Details page to "Managed Namespace"
I changed the "Namespace" field on the Operator Subscriptions page to "Operator Namespace"

The PatternFly React table does not currently support popovers in sortable headers, so that will be done as a follow-on. (I created this issue to track this: https://issues.redhat.com/browse/CONSOLE-2168.)

Screenshots

Before:

After (all projects):

After (single project):

Multinamespace:

All namespaces:

Subscription:

CSV Details Page:

Subscription Details Page:

Heads up @openshift/team-ux-review.

rachael-phillips · 2020-03-31T17:58:43Z

Hi @rebeccaalpert still taking a look at this, but at first glance we should add The Namespace where the Operator is installed to the Subscription page popover.

rebeccaalpert · 2020-03-31T18:09:15Z

All set @rachael-phillips!

frontend/public/components/utils/details-page.tsx

frontend/public/components/utils/details-item.tsx

frontend/packages/operator-lifecycle-manager/src/components/clusterserviceversion.tsx

frontend/public/components/factory/table.tsx

christianvogt · 2020-03-31T21:16:09Z

frontend/public/components/factory/table.tsx

    }

    componentDidMount() {
-      const { columns } = this.state;
+      const componentProps: any = _.pick(this.props, [


We should avoid any type.

I didn't write this one and I'm honestly not sure how to better define the type given that it changes so much in action.

frontend/public/components/factory/table.tsx

spadgett · 2020-04-01T13:27:53Z

Hi @rebeccaalpert still taking a look at this, but at first glance we should add The Namespace where the Operator is installed to the Subscription page popover.

I don't think we should modify the popover.

These descriptions come entirely from the API documentation today. I think it's a bad idea to diverge from our API doc and special case certain fields in console with special documentation. What you see in the popover should match oc explain. The reason for this approach is to let the owners of the resources provide accurate documentation and to make sure it's always up-to-date (since API doc will be updated when APIs change).

spadgett · 2020-04-01T13:51:21Z

frontend/public/components/utils/details-page.tsx

+  let label = 'Namespace';
+  if (kind === 'Subscription') {
+    label = 'Operator Namespace';
+  }
+  if (kind === 'ClusterServiceVersion') {
+    label = 'Managed Namespace';
+  }


I agree with @christianvogt that this component should be generic and not know about these kinds.

From a UX standpoint, I also think this change is confusing as well. Calling it something other than Namespace makes me think the resource is in a different namespace and is just managing this namespace, which is not the case. It makes me think I can change the managed namespace, which I can't.

This component is here to ensure consistency across pages, and every other page calls this Namespace. Namespace also matches what the CLI and YAML show. It's hard to change this label because it should be hard to change this label. Changing it creates an inconsistency.

@alimobrem @tlwu2013 @dmesser what are your thoughts on this? Curious to hear what you think, as well.

I see the value in indicating to the user what the actual labels are so that they can map them to the CLI/YAML, and also pulling the contents of the popover from API descriptions to keep them current. I do think though, that doesn't leave much room in these details screens to inject any additional UX niceness (further describing a namespace as "operator" or "managed" for example.)

Perhaps we could have some common paradigm where these labels are allowed to be changed in the UI (some sort of 'display name') and if that is present, add the actual resource label name is added to the popover contents for reference.

"Appears as Namespace in the ClusterServiceVersion YAML."

Alternatively, maybe these popovers could be divided into two sections, an optional 'ui-specified' description that appears first, followed by the API description.

It would seem unfortunate to try to further describe these two kinds of namespaces in the list view's column headers and not have any indication of which are which in the resource details.

itsptk · 2020-04-02T15:46:53Z

Subscription:

@rebeccaalpert I was wondering what view this screen was conveying? Is this when there is no subscription associated with the CSV?

rebeccaalpert · 2020-04-02T15:50:33Z

Hey @itsptk - Subscriptions show up in the Installed Operators view while the operator is installing or if it fails to install. (The row disappears once the operator is successfully installed and is replaced with the operator's details). This screen illustrates how subscriptions handle the new columns like "Managed Namespace."

benjaminapetersen · 2020-04-15T15:38:19Z

Just a few px off on the sorting arrows yet. Not sure if that is new.

benjaminapetersen · 2020-04-15T15:42:12Z

When I click the view one more... link, i get redirected to the All Instances tab, rather than the Details tab with the list of Provided APIs.

Goes here:

Rather than here:

Since this is an existing bug, creating a bugzilla:

frontend/packages/operator-lifecycle-manager/src/components/clusterserviceversion.tsx

frontend/packages/operator-lifecycle-manager/src/style.scss

rebeccaalpert · 2020-04-15T18:30:42Z

I pushed the PR feedback I can implement right now.

frontend/packages/operator-lifecycle-manager/src/components/clusterserviceversion.tsx

rebeccaalpert · 2020-04-15T20:39:52Z

Addressed round of PR feedback (refactored into component, renamed column classes, etc.)

benjaminapetersen · 2020-04-16T01:45:13Z

/approve

👍 to the approach, getting closer, just a couple items left for the lgtm.

spadgett

/lgtm

frontend/packages/operator-lifecycle-manager/src/components/clusterserviceversion.tsx

Removed deployment column and added columns for last updated, managed namespace,and operator namespace (present only on All Projects view). If operators are installed globally, we now only show one row. If operators are installed in more than one namespace, we now have a popover to list the namespaces. Fixes https://issues.redhat.com/browse/CONSOLE-2130

spadgett

/lgtm

openshift-ci-robot · 2020-04-17T18:30:19Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: benjaminapetersen, rachael-phillips, rebeccaalpert, spadgett

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:

~~frontend/OWNERS~~ [benjaminapetersen,spadgett]

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

spadgett · 2020-04-17T20:10:49Z

/test frontend

spadgett · 2020-04-17T21:49:04Z

/hold
for #5100

spadgett · 2020-04-17T23:17:21Z

/hold cancel
/retest

openshift-ci-robot added the do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. label Mar 26, 2020

openshift-ci-robot requested review from jeff-phillips-18 and spadgett March 26, 2020 15:58

rebeccaalpert force-pushed the installedoperators branch 3 times, most recently from 92ae2a2 to 5e52578 Compare March 26, 2020 17:48

openshift-ci-robot added needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. component/core Related to console core functionality labels Mar 26, 2020

rebeccaalpert force-pushed the installedoperators branch from 123abe6 to d328f68 Compare March 30, 2020 15:01

openshift-ci-robot removed the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Mar 30, 2020

rebeccaalpert force-pushed the installedoperators branch 3 times, most recently from e14c823 to babf9a1 Compare March 30, 2020 17:58

rebeccaalpert changed the title ~~[WIP] Installed operators page updates~~ [WIP] Improve Installed Operators List Page Mar 31, 2020

rebeccaalpert force-pushed the installedoperators branch 2 times, most recently from 9e63720 to a78f2b7 Compare March 31, 2020 16:46

rebeccaalpert changed the title ~~[WIP] Improve Installed Operators List Page~~ Improve Installed Operators list page Mar 31, 2020

openshift-ci-robot removed the do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. label Mar 31, 2020

rebeccaalpert requested review from rachael-phillips and benjaminapetersen March 31, 2020 16:47

rachael-phillips approved these changes Mar 31, 2020

View reviewed changes

rebeccaalpert requested a review from christianvogt March 31, 2020 19:38

rebeccaalpert force-pushed the installedoperators branch from a1fc0bd to c4c7ce1 Compare March 31, 2020 19:39

christianvogt reviewed Mar 31, 2020

View reviewed changes

spadgett reviewed Apr 1, 2020

View reviewed changes

rebeccaalpert force-pushed the installedoperators branch 2 times, most recently from ed99ca9 to cdfb045 Compare April 15, 2020 15:32

rebeccaalpert force-pushed the installedoperators branch from cdfb045 to 2b13ecb Compare April 15, 2020 15:57

spadgett requested changes Apr 15, 2020

View reviewed changes

rebeccaalpert force-pushed the installedoperators branch from 2b13ecb to d709227 Compare April 15, 2020 18:30

spadgett reviewed Apr 15, 2020

View reviewed changes

rebeccaalpert force-pushed the installedoperators branch from d709227 to 527f596 Compare April 15, 2020 20:39

openshift-ci-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Apr 16, 2020

rebeccaalpert force-pushed the installedoperators branch from 527f596 to 99212c9 Compare April 17, 2020 17:18

spadgett approved these changes Apr 17, 2020

View reviewed changes

frontend/packages/operator-lifecycle-manager/src/components/clusterserviceversion.tsx Outdated Show resolved Hide resolved

openshift-ci-robot assigned spadgett Apr 17, 2020

openshift-ci-robot added the lgtm Indicates that a PR is ready to be merged. label Apr 17, 2020

rebeccaalpert force-pushed the installedoperators branch from 99212c9 to c86e57f Compare April 17, 2020 18:22

openshift-ci-robot removed the lgtm Indicates that a PR is ready to be merged. label Apr 17, 2020

spadgett approved these changes Apr 17, 2020

View reviewed changes

openshift-ci-robot added the lgtm Indicates that a PR is ready to be merged. label Apr 17, 2020

openshift-ci-robot added the do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. label Apr 17, 2020

openshift-ci-robot removed the do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. label Apr 17, 2020

openshift-merge-robot merged commit 90f1d17 into openshift:master Apr 18, 2020

spadgett added this to the v4.5 milestone Apr 20, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve Installed Operators list page #4830

Improve Installed Operators list page #4830

rebeccaalpert commented Mar 26, 2020 •

edited

rachael-phillips commented Mar 31, 2020

rebeccaalpert commented Mar 31, 2020

christianvogt Mar 31, 2020

rebeccaalpert Apr 1, 2020

spadgett commented Apr 1, 2020

spadgett Apr 1, 2020

rachael-phillips Apr 2, 2020

itsptk Apr 2, 2020

itsptk commented Apr 2, 2020

rebeccaalpert commented Apr 2, 2020

benjaminapetersen commented Apr 15, 2020

benjaminapetersen commented Apr 15, 2020 •

edited

rebeccaalpert commented Apr 15, 2020

rebeccaalpert commented Apr 15, 2020

benjaminapetersen commented Apr 16, 2020

spadgett left a comment

spadgett left a comment

openshift-ci-robot commented Apr 17, 2020

spadgett commented Apr 17, 2020

spadgett commented Apr 17, 2020

spadgett commented Apr 17, 2020

Improve Installed Operators list page #4830

Improve Installed Operators list page #4830

Conversation

rebeccaalpert commented Mar 26, 2020 • edited

Changes

Screenshots

rachael-phillips commented Mar 31, 2020

rebeccaalpert commented Mar 31, 2020

christianvogt Mar 31, 2020

Choose a reason for hiding this comment

rebeccaalpert Apr 1, 2020

Choose a reason for hiding this comment

spadgett commented Apr 1, 2020

spadgett Apr 1, 2020

Choose a reason for hiding this comment

rachael-phillips Apr 2, 2020

Choose a reason for hiding this comment

itsptk Apr 2, 2020

Choose a reason for hiding this comment

itsptk commented Apr 2, 2020

rebeccaalpert commented Apr 2, 2020

benjaminapetersen commented Apr 15, 2020

benjaminapetersen commented Apr 15, 2020 • edited

rebeccaalpert commented Apr 15, 2020

rebeccaalpert commented Apr 15, 2020

benjaminapetersen commented Apr 16, 2020

spadgett left a comment

Choose a reason for hiding this comment

spadgett left a comment

Choose a reason for hiding this comment

openshift-ci-robot commented Apr 17, 2020

spadgett commented Apr 17, 2020

spadgett commented Apr 17, 2020

spadgett commented Apr 17, 2020

rebeccaalpert commented Mar 26, 2020 •

edited

benjaminapetersen commented Apr 15, 2020 •

edited