Hide upgrade paths and show checklist progress during upgrades

openshift · Jul 16, 2020 · 281ac2c · 281ac2c
1 parent 8002686
commit 281ac2c
Show file tree

Hide file tree

Showing 9 changed files with 435 additions and 99 deletions.
diff --git a/frontend/__tests__/components/cluster-settings.spec.tsx b/frontend/__tests__/components/cluster-settings.spec.tsx
@@ -38,7 +38,7 @@ describe('Cluster Settings page', () => {
         .find(Firehose)
         .at(0)
         .props().resources.length,
-    ).toBe(2);
+    ).toBe(4);
     expect(
       wrapper
         .find(Firehose)
@@ -51,6 +51,18 @@ describe('Cluster Settings page', () => {
         .at(0)
         .props().resources[1].kind,
     ).toBe('autoscaling.openshift.io~v1~ClusterAutoscaler');
+    expect(
+      wrapper
+        .find(Firehose)
+        .at(0)
+        .props().resources[2].kind,
+    ).toBe('machineconfiguration.openshift.io~v1~MachineConfigPool');
+    expect(
+      wrapper
+        .find(Firehose)
+        .at(0)
+        .props().resources[3].kind,
+    ).toBe('config.openshift.io~v1~ClusterOperator');
     expect(
       wrapper
         .find(Firehose)
@@ -69,6 +81,18 @@ describe('Cluster Settings page', () => {
         .at(0)
         .props().resources[1].isList,
     ).toBe(true);
+    expect(
+      wrapper
+        .find(Firehose)
+        .at(0)
+        .props().resources[2].isList,
+    ).toBe(true);
+    expect(
+      wrapper
+        .find(Firehose)
+        .at(0)
+        .props().resources[3].isList,
+    ).toBe(true);
   });
   it('should render the HorizontalNav Component with the props', () => {
     expect(wrapper.find(HorizontalNav).exists()).toBe(true);
@@ -123,7 +147,14 @@ describe('Cluster Version Details Table page', () => {
 
   beforeEach(() => {
     cv = clusterVersionProps;
-    wrapper = shallow(<ClusterVersionDetailsTable obj={cv} autoscalers={[]} />);
+    wrapper = shallow(
+      <ClusterVersionDetailsTable
+        autoscalers={[]}
+        clusterOperators={[]}
+        machineConfigPools={[]}
+        obj={cv}
+      />,
+    );
   });
 
   it('should render ClusterVersionDetailsTable component', () => {

diff --git a/frontend/package.json b/frontend/package.json
@@ -133,6 +133,7 @@
     "react-redux": "7.1.0",
     "react-router": "5.0.1",
     "react-router-dom": "5.0.1",
+    "react-router-hash-link": "^2.0.0",
     "react-tagsinput": "3.19.x",
     "react-transition-group": "2.3.x",
     "react-virtualized": "9.x",
@@ -156,11 +157,11 @@
   },
   "devDependencies": {
     "@babel/core": "^7.10.3",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.3.3",
     "@graphql-codegen/cli": "^1.15.1",
     "@graphql-codegen/typescript": "^1.15.1",
     "@graphql-codegen/typescript-graphql-files-modules": "^1.15.1",
     "@graphql-codegen/typescript-operations": "^1.15.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.3.3",
     "@types/classnames": "^2.2.7",
     "@types/enzyme": "3.10.x",
     "@types/glob": "7.x",

diff --git a/frontend/public/components/cluster-settings/_cluster-settings.scss b/frontend/public/components/cluster-settings/_cluster-settings.scss
@@ -239,6 +239,23 @@ $co-channel-height: 60px;
       display: none;
     }
   }
+
+  &__updates-group {
+    margin: 0 0 var(--pf-global--spacer--lg) 0;
+
+    &--divided {
+      border-top: 1px solid $color-pf-black-200;
+      padding-top: var(--pf-global--spacer--lg);
+    }
+  }
+
+  &__updates-progress {
+    padding: var(--pf-global--spacer--sm) var(--pf-global--spacer--lg) 0 0;
+  }
+
+  &__updates-type {
+    margin: 0 0 var(--pf-global--spacer--xs) 0;
+  }
 }
 
 .co-update-status {

diff --git a/frontend/public/components/cluster-settings/cluster-operator.tsx b/frontend/public/components/cluster-settings/cluster-operator.tsx
@@ -32,6 +32,7 @@ import {
 } from '../utils';
 import { GreenCheckCircleIcon, YellowExclamationTriangleIcon } from '@console/shared';
 import RelatedObjectsPage from './related-objects';
+import { ClusterVersionLink, UpdatingMessageText } from './cluster-settings';
 
 export const clusterOperatorReference: K8sResourceKindReference = referenceForModel(
   ClusterOperatorModel,
@@ -144,7 +145,7 @@ const filters = [
   },
 ];
 
-const UpdateInProgressAlert: React.SFC<UpdateInProgressAlertProps> = ({ cv }) => {
+const UpdateInProgressAlert: React.SFC<UpdateInProgressAlertProps> = ({ clusterOperators, cv }) => {
   const updateCondition = getClusterVersionCondition(
     cv,
     ClusterVersionConditionType.Progressing,
@@ -154,8 +155,13 @@ const UpdateInProgressAlert: React.SFC<UpdateInProgressAlertProps> = ({ cv }) =>
     <>
       {updateCondition && (
         <div className="co-m-pane__body co-m-pane__body--section-heading">
-          <Alert isInline className="co-alert" variant="info" title="Cluster update in progress.">
-            {updateCondition.message}
+          <Alert
+            isInline
+            className="co-alert"
+            variant="info"
+            title={<UpdatingMessageText clusterOperators={clusterOperators} cv={cv} />}
+          >
+            <ClusterVersionLink cv={cv} />
           </Alert>
         </div>
       )}
@@ -165,7 +171,7 @@ const UpdateInProgressAlert: React.SFC<UpdateInProgressAlertProps> = ({ cv }) =>
 
 export const ClusterOperatorPage: React.SFC<ClusterOperatorPageProps> = (props) => (
   <>
-    <UpdateInProgressAlert cv={props.cv} />
+    <UpdateInProgressAlert cv={props.cv} clusterOperators={props.clusterOperators} />
     <ListPage
       {...props}
       title="Cluster Operators"
@@ -272,6 +278,7 @@ type OperatorStatusIconAndLabelProps = {
 };
 
 type ClusterOperatorPageProps = {
+  clusterOperators: ClusterOperator[];
   cv: ClusterVersionKind;
   autoFocus?: boolean;
   showTitle?: boolean;
@@ -290,5 +297,6 @@ type ClusterOperatorDetailsPageProps = {
 };
 
 type UpdateInProgressAlertProps = {
+  clusterOperators: ClusterOperator[];
   cv: ClusterVersionKind;
 };