feat(OCPADVISOR-71): Show upgrade risks table

compiled-lang/en.json

@@ -67,6 +67,8 @@
   "noRecsForClusterListTitle": "No clusters yet",
   "noRecsFoundError": "No recommendations to display",
   "noRecsFoundErrorDesc": "Insights identifies and prioritizes risks to security, performance, availability, and stability of your clusters. This feature uses the Remote Health functionality of OpenShift Container Platform. For further details about Insights, see the",
+  "noUpgradeRisksFound": "No upgrade risks found for this cluster",
+  "noUpgradeRisksFoundDesc": "There are no known update risks that affect this cluster.",
   "none": "None",
   "oneOrMore": "1 or more",
   "performance": "Performance",
@@ -116,6 +118,8 @@
   "undefined": "Undefined",
   "unknown": "Unknown",
   "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.",
   "version": "Version",
   "veryLow": "Very Low",
   "viewAffectedClusters": "View {clusters, plural, one {the affected cluster} other {# affected clusters}}",

cypress/fixtures/api/insights-results-aggregator/v1/clusters/41c30565-b4c9-49f2-a4ce-3277ad22b258/upgrade-risks-prediction.json

@@ -0,0 +1,35 @@
+{
+  "status": "ok",
+  "upgrade_recommendation": {
+    "upgrade_risks_predictors": {
+      "alerts": [
+        {
+          "name": "ClusterOperatorDown",
+          "namespace": "openshift-monitoring",
+          "severity": "critical"
+        },
+        {
+          "name": "PostDisruptionBudgetLimit",
+          "namespace": "openshift-etcd",
+          "severity": "warning"
+        },
+        {
+          "name": "Cluster operators",
+          "namespace": "openshift-kube-apiserver",
+          "severity": "info"
+        }
+      ],
+      "operator_conditions": [
+        {
+          "name": "Version",
+          "condition": "failing"
+        },
+        {
+          "name": "Node-tuning",
+          "condition": "degraded",
+          "reason": "Multiple tasks failed"
+        }
+      ]
+    }
+  }
+}

src/Components/ClusterTabs/ClusterTabs.js

@@ -7,7 +7,7 @@ import messages from '../../Messages';
 import { setSearchParameter } from '../../Utilities/Helpers';
 import { useUpgradeRisksFeatureFlag } from '../../Utilities/useFeatureFlag';
 import ClusterRules from '../ClusterRules/ClusterRules';
-import { ComingSoon } from '../MessageState/EmptyStates';
+import { UpgradeRisksTable } from '../UpgradeRisksTable';
 
 const CLUSTER_TABS = ['recommendations', 'upgrade_risks'];
 
@@ -26,7 +26,7 @@ const ClusterTabs = () => {
   });
 
   return (
-    <Card isCompact>
+    <Card isCompact isPlain>
       <CardBody>
         <Tabs
           activeKey={activeKey}
@@ -47,7 +47,7 @@ const ClusterTabs = () => {
               eventKey="upgrade_risks"
               title={intl.formatMessage(messages.upgradeRisks)}
             >
-              <ComingSoon />
+              <UpgradeRisksTable />
             </Tab>
           )}
         </Tabs>

src/Components/MessageState/EmptyStates.js

@@ -18,6 +18,7 @@ import { InProgressIcon } from '@patternfly/react-icons/dist/esm/icons/in-progre
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { global_info_color_100 as globalInfoColor100 } from '@patternfly/react-tokens/dist/js/global_info_color_100.js';
 import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 
 import DefaultErrorMessage from '@redhat-cloud-services/frontend-components/ErrorState/DefaultErrorMessage';
 
@@ -187,6 +188,31 @@ const NoRecsAffecting = () => {
   );
 };
 
+const NoUpgradeRisks = () => {
+  const intl = useIntl();
+  return (
+    <MessageState
+      icon={CheckCircleIcon}
+      iconStyle={{
+        color: globalSuccessColor100.value,
+      }}
+      title={intl.formatMessage(messages.noUpgradeRisksFound)}
+      text={intl.formatMessage(messages.noUpgradeRisksFoundDesc)}
+    />
+  );
+};
+
+const UpgradeRisksNotAvailable = () => {
+  const intl = useIntl();
+  return (
+    <MessageState
+      icon={ExclamationTriangleIcon}
+      title={intl.formatMessage(messages.upgradeRisksNotAvailable)}
+      text={intl.formatMessage(messages.upgradeRisksNotAvailableDesc)}
+    />
+  );
+};
+
 export {
   ErrorState,
   NoAffectedClusters,
@@ -197,4 +223,6 @@ export {
   NoInsightsResults,
   NoRecsError,
   NoRecsAffecting,
+  NoUpgradeRisks,
+  UpgradeRisksNotAvailable,
 };

src/Components/MessageState/MessageState.js

@@ -32,7 +32,9 @@ const MessageState = ({
     <Title headingLevel="h5" size="lg">
       {title}
     </Title>
-    <EmptyStateBody style={{ marginBottom: '16px' }}>{text}</EmptyStateBody>
+    <EmptyStateBody style={{ marginBottom: '16px', maxWidth: '400px' }}>
+      {text}
+    </EmptyStateBody>
     {children}
   </EmptyState>
 );

src/Components/UpgradeRisksTable/AlertsList.js

@@ -0,0 +1,89 @@
+import { Flex, Icon } from '@patternfly/react-core';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import {
+  TableComposable,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+} from '@patternfly/react-table';
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { useGetUpgradeRisksQuery } from '../../Services/SmartProxy';
+
+export const ALERTS_SEVERITY_ICONS = {
+  critical: (
+    <Icon status="danger">
+      <ExclamationCircleIcon />
+    </Icon>
+  ),
+  warning: (
+    <Icon status="warning">
+      <ExclamationTriangleIcon />
+    </Icon>
+  ),
+  info: (
+    <Icon status="info">
+      <InfoCircleIcon />
+    </Icon>
+  ),
+};
+
+export const ALERTS_SEVERITY_LABEL = {
+  critical: (
+    <Flex alignItems={{ default: 'alignItemsCenter' }}>
+      {ALERTS_SEVERITY_ICONS['critical']} <b>Critical</b>
+    </Flex>
+  ),
+  warning: (
+    <Flex alignItems={{ default: 'alignItemsCenter' }}>
+      {ALERTS_SEVERITY_ICONS['warning']} <b>Warning</b>
+    </Flex>
+  ),
+  info: (
+    <Flex alignItems={{ default: 'alignItemsCenter' }}>
+      {ALERTS_SEVERITY_ICONS['info']} <b>Info</b>
+    </Flex>
+  ),
+};
+
+export const ALERTS_SEVERITY_ORDER = ['critical', 'warning', 'info'];
+
+const AlertsList = () => {
+  const { clusterId } = useParams();
+  const { data } = useGetUpgradeRisksQuery({ id: clusterId });
+  const { alerts = [] } =
+    data?.upgrade_recommendation?.upgrade_risks_predictors || {};
+
+  return (
+    <TableComposable
+      aria-label="Alerts firing table"
+      variant="compact"
+      borders={false}
+    >
+      <Thead>
+        <Tr>
+          <Th width={50}>Name</Th>
+          <Th width={25}>Status</Th>
+          <Th width={25}>Namespace</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {alerts.map(({ name, namespace, severity }) => (
+          <Tr key={name}>
+            <Td className="alerts__name">{name}</Td>
+            <Td className="alerts__severity">
+              {ALERTS_SEVERITY_LABEL[severity]}
+            </Td>
+            <Td className="alerts__namespace">{namespace}</Td>
+          </Tr>
+        ))}
+      </Tbody>
+    </TableComposable>
+  );
+};
+
+export default AlertsList;

src/Components/UpgradeRisksTable/ClusterOperatorsList.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import {
+  TableComposable,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+} from '@patternfly/react-table';
+import { useParams } from 'react-router-dom';
+import { useGetUpgradeRisksQuery } from '../../Services/SmartProxy';
+import { Flex, Icon } from '@patternfly/react-core';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+
+export const CLUSTER_OPERATOR_LABEL = {
+  degraded: 'Degraded',
+  failing: 'Failing',
+  available: 'Not Available',
+  upgradeable: 'Not Upgradeable',
+};
+
+const ClusterOperatorsList = () => {
+  const { clusterId } = useParams();
+  const { data } = useGetUpgradeRisksQuery({ id: clusterId });
+  const { operator_conditions: conditions = [] } =
+    data?.upgrade_recommendation?.upgrade_risks_predictors || {};
+
+  return (
+    <TableComposable
+      aria-label="Cluster operators firing table"
+      variant="compact"
+      borders={false}
+    >
+      <Thead>
+        <Tr>
+          <Th width={50}>Name</Th>
+          <Th width={25}>Status</Th>
+          <Th width={25}>Message</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {conditions.map(({ name, condition, reason }) => (
+          <Tr key={name}>
+            <Td class="operators__name">{name}</Td>
+            <Td class="operators__status">
+              <Flex alignItems={{ default: 'alignItemsCenter' }}>
+                <Icon status="warning">
+                  <ExclamationTriangleIcon />
+                </Icon>
+                <b>{CLUSTER_OPERATOR_LABEL[condition]}</b>
+              </Flex>
+            </Td>
+            <Td class="operators__message">{reason || '-'}</Td>
+          </Tr>
+        ))}
+      </Tbody>
+    </TableComposable>
+  );
+};
+
+export default ClusterOperatorsList;