Merge pull request #1184 from TheRealJon/CONSOLE-1270

Show or hide masthead cluster update icon in real-time

Author: openshift-merge-robot

frontend/public/components/cluster-settings/cluster-settings.tsx

@@ -32,7 +32,7 @@ enum ClusterUpdateStatus {
 }
 
 const clusterAutoscalerReference = referenceForModel(ClusterAutoscalerModel);
-const clusterVersionReference = referenceForModel(ClusterVersionModel);
+export const clusterVersionReference = referenceForModel(ClusterVersionModel);
 
 export const getAvailableClusterChannels = () => ({'nightly-4.0': 'nightly-4.0', 'pre-release-4.0': 'pre-release-4.0', 'stable-4.0': 'stable-4.0'});
 

frontend/public/components/masthead-toolbar.jsx

@@ -6,9 +6,21 @@ import { Button, Dropdown, DropdownToggle, DropdownSeparator, DropdownItem, Keba
 
 import { FLAGS, stateToProps as flagStateToProps, flagPending } from '../features';
 import { authSvc } from '../module/auth';
-import { history } from './utils';
+import { history, Firehose } from './utils';
 import { openshiftHelpBase } from './utils/documentation';
 import { AboutModal } from './about-modal';
+import { getAvailableClusterUpdates, clusterVersionReference } from './cluster-settings/cluster-settings';
+
+const UpdatesAvailableButton = ({obj, onClick}) => {
+  const updatesAvailable = !_.isEmpty(getAvailableClusterUpdates(obj.data));
+  return updatesAvailable
+    ? <ToolbarItem>
+      <Button variant="plain" aria-label="Cluster Updates Available" onClick={onClick}>
+        <ArrowCircleUpIcon />
+      </Button>
+    </ToolbarItem>
+    : null;
+};
 
 class MastheadToolbar_ extends React.Component {
   constructor(props) {
@@ -218,16 +230,20 @@ class MastheadToolbar_ extends React.Component {
   render() {
     const { isApplicationLauncherDropdownOpen, isHelpDropdownOpen, showAboutModal } = this.state;
     const { flags } = this.props;
+    const resources = [{
+      kind: clusterVersionReference,
+      name: 'version',
+      isList: false,
+      prop: 'obj',
+    }];
     return (
       <React.Fragment>
         <Toolbar>
           <ToolbarGroup className="pf-u-sr-only pf-u-visible-on-md">
             {/* desktop -- (updates button) */}
-            {flags[FLAGS.CLUSTER_UPDATES_AVAILABLE] && <ToolbarItem>
-              <Button variant="plain" aria-label="Cluster Updates Available" onClick={this._onClusterUpdatesAvailable}>
-                <ArrowCircleUpIcon />
-              </Button>
-            </ToolbarItem>}
+            <Firehose resources={resources}>
+              <UpdatesAvailableButton onClick={this._onClusterUpdatesAvailable} />
+            </Firehose>
             {/* desktop -- (application launcher dropdown), help dropdown [documentation, about] */}
             {flags[FLAGS.OPENSHIFT] && <ToolbarItem>
               <Dropdown
@@ -281,7 +297,7 @@ class MastheadToolbar_ extends React.Component {
 }
 
 const mastheadToolbarStateToProps = state => {
-  const desiredFlags = [FLAGS.AUTH_ENABLED, FLAGS.OPENSHIFT, FLAGS.CLUSTER_UPDATES_AVAILABLE];
+  const desiredFlags = [FLAGS.AUTH_ENABLED, FLAGS.OPENSHIFT];
   const flagProps = flagStateToProps(desiredFlags, state);
   const user = state.UI.get('user');
   return { ...flagProps, user };

frontend/public/features.ts

@@ -41,7 +41,6 @@ import { UIActions } from './ui/ui-actions';
   OPERATOR_HUB: false,
   CLUSTER_API: false,
   CLUSTER_VERSION: false,
-  CLUSTER_UPDATES_AVAILABLE: false,
   MACHINE_CONFIG: false,
  */
 export enum FLAGS {
@@ -63,7 +62,6 @@ export enum FLAGS {
   OPERATOR_HUB = 'OPERATOR_HUB',
   CLUSTER_API = 'CLUSTER_API',
   CLUSTER_VERSION = 'CLUSTER_VERSION',
-  CLUSTER_UPDATES_AVAILABLE = 'CLUSTER_UPDATES_AVAILABLE',
   MACHINE_CONFIG = 'MACHINE_CONFIG',
 }
 
@@ -118,14 +116,10 @@ const detectClusterVersion = dispatch => coFetchJSON(clusterVersionPath)
       if (hasClusterVersion && !_.isEmpty(clusterVersion.spec)) {
         dispatch(UIActions.setClusterID(clusterVersion.spec.clusterID));
       }
-
-      const availableUpdates = _.get(clusterVersion, 'status.availableUpdates');
-      setFlag(dispatch, FLAGS.CLUSTER_UPDATES_AVAILABLE, !_.isEmpty(availableUpdates));
     },
     err => {
       if (_.includes([403, 404], _.get(err, 'response.status'))) {
         setFlag(dispatch, FLAGS.CLUSTER_VERSION, false);
-        setFlag(dispatch, FLAGS.CLUSTER_UPDATES_AVAILABLE, false);
       } else {
         handleError(err, FLAGS.OPENSHIFT, dispatch, detectOpenShift);
       }