feat(OCPADVISOR-72): Render upgrade risks banner

compiled-lang/en.json

@@ -55,6 +55,7 @@
   "noAffectedClustersTitle": "No clusters",
   "noClustersError": "No data about affected clusters",
   "noClustersErrorDesc": "There was an error fetching affected clusters for this recommendation.",
+  "noKnownUpgradeRisks": "No known upgrade risks identified for this cluster.",
   "noMatchingClustersDesc": "To continue, edit your filter settings and search again.",
   "noMatchingClustersTitle": "No matching clusters found",
   "noMatchingRecommendationsDesc": "To continue, edit your filter settings and search again.",
@@ -81,6 +82,8 @@
   "recommendation": "Recommendation",
   "recommendations": "Recommendations",
   "resetFilters": "Reset filters",
+  "resolveUpgradeRisks": "Resolve upgrade risks",
+  "resolveUpgradeRisksDesc": "There are risks present that could impact the success of your cluster upgrade. For the best performance, resolve these risks in the <strong>Upgrade risks</strong> tab before upgrading.",
   "riskOfChange": "Risk of change",
   "riskOfChangeLabel": "{level}",
   "riskOfChangeText": "The risk of change is <strong>{ level }</strong>, because the change takes very little time to implement and there is minimal impact to system operations.",
@@ -120,6 +123,7 @@
   "upgradeRisks": "Upgrade risks",
   "upgradeRisksNotAvailable": "Upgrade risks are not available",
   "upgradeRisksNotAvailableDesc": "This cluster has gone more than two hours without sending metrics. Check the cluster's web console if you think that this is incorrect.",
+  "upgradeRisksNotCurrentlyAvailable": "Upgrade risks are not currently available.",
   "version": "Version",
   "veryLow": "Very Low",
   "viewAffectedClusters": "View {clusters, plural, one {the affected cluster} other {# affected clusters}}",

cypress/utils/interceptors.js

@@ -1,6 +1,6 @@
 import singleClusterPageReport from '../fixtures/api/insights-results-aggregator/v2/cluster/dcb95bbf-8673-4f3a-a63c-12d4a530aa6f/reports-disabled-false.json';
+import upgradeRisksFixtures from '../fixtures/api/insights-results-aggregator/v1/clusters/41c30565-b4c9-49f2-a4ce-3277ad22b258/upgrade-risks-prediction.json';
 
-// interceptors
 export const clusterReportsInterceptors = {
   successful: () =>
     cy.intercept(
@@ -58,3 +58,66 @@ export const clusterReportsInterceptors = {
       }
     ),
 };
+
+export const upgradeRisksInterceptors = {
+  successful: () =>
+    cy.intercept(
+      'GET',
+      /\/api\/insights-results-aggregator\/v2\/cluster\/.*\/upgrade-risks-prediction/,
+      {
+        statusCode: 200,
+        body: upgradeRisksFixtures,
+      }
+    ),
+  'successful, alerts empty': () => {
+    const fixtures = upgradeRisksFixtures;
+    fixtures.upgrade_recommendation.upgrade_risks_predictors.alerts = [];
+    cy.intercept(
+      'GET',
+      /\/api\/insights-results-aggregator\/v2\/cluster\/.*\/upgrade-risks-prediction/,
+      {
+        statusCode: 200,
+        body: fixtures,
+      }
+    );
+  },
+  'successful, empty': () => {
+    const fixtures = upgradeRisksFixtures;
+    fixtures.upgrade_recommendation.upgrade_risks_predictors = {
+      alerts: [],
+      operator_conditions: [],
+    };
+    cy.intercept(
+      'GET',
+      /\/api\/insights-results-aggregator\/v2\/cluster\/.*\/upgrade-risks-prediction/,
+      {
+        statusCode: 200,
+        body: fixtures,
+      }
+    );
+  },
+  'error, not available': () =>
+    cy.intercept(
+      'GET',
+      /\/api\/insights-results-aggregator\/v2\/cluster\/.*\/upgrade-risks-prediction/,
+      {
+        statusCode: 503,
+      }
+    ),
+  'error, other': () =>
+    cy.intercept(
+      'GET',
+      /\/api\/insights-results-aggregator\/v2\/cluster\/.*\/upgrade-risks-prediction/,
+      {
+        statusCode: 500,
+      }
+    ),
+  'long responding': () =>
+    cy.intercept(
+      'GET',
+      /\/api\/insights-results-aggregator\/v2\/cluster\/.*\/upgrade-risks-prediction/,
+      {
+        delay: 420000,
+      }
+    ),
+};

src/Components/Cluster/Cluster.cy.js

@@ -5,13 +5,17 @@ import {
   checkNoMatchingRecs,
   checkRowCounts,
 } from '../../../cypress/utils/table';
-import { clusterReportsInterceptors as interceptors } from '../../../cypress/utils/interceptors';
+import {
+  clusterReportsInterceptors as interceptors,
+  upgradeRisksInterceptors,
+} from '../../../cypress/utils/interceptors';
 
 // selectors
 const CLUSTER_HEADER = '#cluster-header';
 const BREADCRUMBS = 'nav[class=pf-c-breadcrumb]';
 const RULES_TABLE = '#cluster-recs-list-table';
 const FILTER_CHIPS = 'li[class=pf-c-chip-group__list-item]';
+const ALERT = '[data-ouia-component-type="PF4/Alert"]';
 
 const CLUSTER_ID = '123';
 const CLUSTER_NAME = 'Cluster With Issues';
@@ -128,3 +132,55 @@ describe('cluster page', () => {
     });
   });
 });
+
+describe('upgrade risks banner', () => {
+  it('has some upgrade risks', () => {
+    upgradeRisksInterceptors.successful();
+    mount();
+
+    cy.get(ALERT).should('have.class', 'pf-m-warning');
+    cy.get(ALERT).within(() => {
+      cy.get('h4').should('contain.text', 'Resolve upgrade risks');
+    });
+  });
+
+  it('has no upgrade risks', () => {
+    upgradeRisksInterceptors['successful, empty']();
+    mount();
+
+    cy.get(ALERT).should('have.class', 'pf-m-success');
+    cy.get(ALERT).within(() => {
+      cy.get('h4').should(
+        'contain.text',
+        'No known upgrade risks identified for this cluster.'
+      );
+    });
+  });
+
+  it('upgrade risks service not available', () => {
+    upgradeRisksInterceptors['error, not available']();
+    mount();
+
+    cy.get(ALERT).should('have.class', 'pf-m-warning');
+    cy.get(ALERT).within(() => {
+      cy.get('h4').should(
+        'contain.text',
+        'Upgrade risks are not currently available.'
+      );
+    });
+  });
+
+  it('should not render alert in other error', () => {
+    upgradeRisksInterceptors['error, other']();
+    mount();
+
+    cy.get(ALERT).should('not.exist');
+  });
+
+  it('should not render alert in the loading state', () => {
+    upgradeRisksInterceptors['long responding']();
+    mount();
+
+    cy.get(ALERT).should('not.exist');
+  });
+});

src/Components/Cluster/Cluster.js

@@ -7,17 +7,23 @@ import PageHeader from '@redhat-cloud-services/frontend-components/PageHeader';
 import ClusterHeader from '../ClusterHeader';
 import Breadcrumbs from '../Breadcrumbs';
 import ClusterTabs from '../ClusterTabs/ClusterTabs';
-import { PageSection } from '@patternfly/react-core';
+import { Flex, FlexItem, PageSection } from '@patternfly/react-core';
+import { UpgradeRisksAlert } from '../UpgradeRisksAlert';
 
 export const Cluster = ({ cluster, clusterId }) => {
   // TODO: make breadcrumbs take display name from GET /cluster/id/info
   return (
     <React.Fragment>
       <PageHeader className="pf-m-light ins-inventory-detail">
-        <Breadcrumbs
-          current={cluster?.data?.report.meta.cluster_name || clusterId}
-        />
-        <ClusterHeader />
+        <Flex direction={{ default: 'column' }}>
+          <FlexItem>
+            <Breadcrumbs
+              current={cluster?.data?.report.meta.cluster_name || clusterId}
+            />
+            <ClusterHeader />
+          </FlexItem>
+          <UpgradeRisksAlert />
+        </Flex>
       </PageHeader>
       <PageSection>
         <ClusterTabs cluster={cluster} />

src/Components/UpgradeRisksAlert/UpgradeRisksAlert.js

@@ -0,0 +1,47 @@
+import { Alert } from '@patternfly/react-core';
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { useParams } from 'react-router-dom';
+import messages from '../../Messages';
+import { useGetUpgradeRisksQuery } from '../../Services/SmartProxy';
+import { strong } from '../../Utilities/Helpers';
+
+const UpgradeRisksAlert = () => {
+  const intl = useIntl();
+  const { clusterId } = useParams();
+  const { isError, isUninitialized, isFetching, isSuccess, data, error } =
+    useGetUpgradeRisksQuery({ id: clusterId });
+  const { alerts = [], operator_conditions: conditions = [] } =
+    data?.upgrade_recommendation?.upgrade_risks_predictors || {};
+
+  const hasRisks = isSuccess && (alerts.length > 0 || conditions.length > 0);
+  const noRisks = isSuccess && alerts.length === 0 && conditions.length === 0;
+
+  return isUninitialized || isFetching ? (
+    <></>
+  ) : hasRisks ? (
+    <Alert
+      variant="warning"
+      isInline
+      title={intl.formatMessage(messages.resolveUpgradeRisks)}
+    >
+      {intl.formatMessage(messages.resolveUpgradeRisksDesc, { strong })}
+    </Alert>
+  ) : noRisks ? (
+    <Alert
+      variant="success"
+      isInline
+      title={intl.formatMessage(messages.noKnownUpgradeRisks)}
+    />
+  ) : isError && error.status === 503 ? (
+    <Alert
+      variant="warning"
+      isInline
+      title={intl.formatMessage(messages.upgradeRisksNotCurrentlyAvailable)}
+    />
+  ) : (
+    <></>
+  );
+};
+
+export default UpgradeRisksAlert;

src/Components/UpgradeRisksAlert/index.js

@@ -0,0 +1 @@
+export { default as UpgradeRisksAlert } from './UpgradeRisksAlert';

src/Components/UpgradeRisksTable/UpgradeRisksTable.cy.js

@@ -6,6 +6,7 @@ import {
   checkTableHeaders,
 } from '../../../cypress/utils/table';
 import UpgradeRisksTable from './UpgradeRisksTable';
+import { upgradeRisksInterceptors as interceptors } from '../../../cypress/utils/interceptors';
 
 const SEVERITY_MAPPING = {
   critical: 'Critical',
@@ -26,69 +27,6 @@ export const CLUSTER_OPERATOR_LABEL_MAPPING = {
   upgradeable: 'Not Upgradeable',
 };
 
-const interceptors = {
-  successful: () =>
-    cy.intercept(
-      'GET',
-      /\/api\/insights-results-aggregator\/v2\/cluster\/.*\/upgrade-risks-prediction/,
-      {
-        statusCode: 200,
-        body: upgradeRisksFixtures,
-      }
-    ),
-  'successful, alerts empty': () => {
-    const fixtures = upgradeRisksFixtures;
-    fixtures.upgrade_recommendation.upgrade_risks_predictors.alerts = [];
-    cy.intercept(
-      'GET',
-      /\/api\/insights-results-aggregator\/v2\/cluster\/.*\/upgrade-risks-prediction/,
-      {
-        statusCode: 200,
-        body: fixtures,
-      }
-    );
-  },
-  'successful, empty': () => {
-    const fixtures = upgradeRisksFixtures;
-    fixtures.upgrade_recommendation.upgrade_risks_predictors = {
-      alerts: [],
-      operator_conditions: [],
-    };
-    cy.intercept(
-      'GET',
-      /\/api\/insights-results-aggregator\/v2\/cluster\/.*\/upgrade-risks-prediction/,
-      {
-        statusCode: 200,
-        body: fixtures,
-      }
-    );
-  },
-  'error, not available': () =>
-    cy.intercept(
-      'GET',
-      /\/api\/insights-results-aggregator\/v2\/cluster\/.*\/upgrade-risks-prediction/,
-      {
-        statusCode: 503,
-      }
-    ),
-  'error, other': () =>
-    cy.intercept(
-      'GET',
-      /\/api\/insights-results-aggregator\/v2\/cluster\/.*\/upgrade-risks-prediction/,
-      {
-        statusCode: 500,
-      }
-    ),
-  'long responding': () =>
-    cy.intercept(
-      'GET',
-      /\/api\/insights-results-aggregator\/v2\/cluster\/.*\/upgrade-risks-prediction/,
-      {
-        delay: 420000,
-      }
-    ),
-};
-
 const CLUSTER_ID = '41c30565-b4c9-49f2-a4ce-3277ad22b258';
 
 const mount = (initialEntries = [`/clusters/${CLUSTER_ID}`]) => {

src/Messages.js

@@ -664,4 +664,21 @@ export default defineMessages({
     defaultMessage:
       "This cluster has gone more than two hours without sending metrics. Check the cluster's web console if you think that this is incorrect.",
   },
+  resolveUpgradeRisks: {
+    id: 'resolveUpgradeRisks',
+    defaultMessage: 'Resolve upgrade risks',
+  },
+  resolveUpgradeRisksDesc: {
+    id: 'resolveUpgradeRisksDesc',
+    defaultMessage:
+      'There are risks present that could impact the success of your cluster upgrade. For the best performance, resolve these risks in the <strong>Upgrade risks</strong> tab before upgrading.',
+  },
+  noKnownUpgradeRisks: {
+    id: 'noKnownUpgradeRisks',
+    defaultMessage: 'No known upgrade risks identified for this cluster.',
+  },
+  upgradeRisksNotCurrentlyAvailable: {
+    id: 'upgradeRisksNotCurrentlyAvailable',
+    defaultMessage: 'Upgrade risks are not currently available.',
+  },
 });