Show warning unknown check selection (#840)

* Remove not_found error handling * Create WarningBanner component * Add jest test to WarningBanner * Include e2e test for the warning banner * Set the unknown provider value to a constant
trento-project · Sep 23, 2022 · fae88ed · fae88ed
1 parent 3c0628b
commit fae88ed
Show file tree

Hide file tree

Showing 8 changed files with 894 additions and 52 deletions.
diff --git a/.photofinish.toml b/.photofinish.toml
@@ -90,6 +90,10 @@ files = ["./test/fixtures/scenarios/clusters-overview/13e8c25c-3180-5a9a-95c8-51
 
 files = ["./test/fixtures/scenarios/clusters-overview/13e8c25c-3180-5a9a-95c8-51ec38e50cfc_ha_cluster_discovery_unnamed.json"]
 
+[cluster-unknown-provider]
+
+files = ["./test/fixtures/scenarios/hana-cluster-details/b767b3e9-e802-587e-a442-541d093b86b9_ha_cluster_discovery_unknown_provider.json"]
+
 [host-details-azure]
 
 files = ["./test/fixtures/scenarios/healthy-27-node-SAP-cluster/9cd46919-5f19-59aa-993e-cf3736c71053_cloud_discovery.json"]

diff --git a/assets/js/components/Banners/WarningBanner.jsx b/assets/js/components/Banners/WarningBanner.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { EOS_WARNING_OUTLINED } from 'eos-icons-react';
+
+const WarningBanner = ({ children }) => {
+  return (
+    <div className="bg-yellow-50 rounded mt-2 mb-2 p-3 border-2 border-yellow-500">
+      <div className="flex flex-wrap items-center justify-between">
+        <div className="flex w-0 flex-1 items-center">
+          <EOS_WARNING_OUTLINED className="h-6 w-6 fill-yellow-500" />
+          <p className="ml-3 truncate font-medium">
+            <span
+              data-testid="warning-banner"
+              className="md:inline text-yellow-500"
+            >
+              {children}
+            </span>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WarningBanner;
diff --git a/assets/js/components/Banners/WarningBanner.test.jsx b/assets/js/components/Banners/WarningBanner.test.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import WarningBanner from './WarningBanner';
+
+describe('WarningBanner', () => {
+  it('should display a warning banner with its text and icon', () => {
+    render(
+      <WarningBanner>
+        Warning!
+        <br />
+        You should have a look on this!
+      </WarningBanner>
+    );
+
+    expect(screen.getByTestId('warning-banner')).toHaveTextContent(
+      'Warning!You should have a look on this!'
+    );
+  });
+});
diff --git a/assets/js/components/ClusterDetails/ChecksResults.jsx b/assets/js/components/ClusterDetails/ChecksResults.jsx
@@ -11,6 +11,8 @@ import LoadingBox from '../LoadingBox';
 
 import Button from '@components/Button';
 import BackButton from '@components/BackButton';
+import WarningBanner from '@components/Banners/WarningBanner';
+import { UNKNOWN_PROVIDER } from '@components/ClusterDetails/ClusterSettings';
 
 import { getCluster } from '@state/selectors';
 import TrentoLogo from '../../../static/trento-icon.png';
@@ -63,14 +65,11 @@ export const ChecksResults = () => {
   const cluster = useSelector(getCluster(clusterID));
   const [hasAlreadyChecksResults, setHasAlreadyChecksResults] = useState(false);
 
-  const [catalogData, catalogErrorCode, catalogError, loading] = useSelector(
-    (state) => [
-      state.catalog.data,
-      state.catalog.errorCode,
-      state.catalog.error,
-      state.catalog.loading,
-    ]
-  );
+  const [catalogData, catalogError, loading] = useSelector((state) => [
+    state.catalog.data,
+    state.catalog.error,
+    state.catalog.loading,
+  ]);
 
   const findCheckDataByID = (checkID) => {
     return catalogData.find((check) => check.id === checkID);
@@ -107,28 +106,14 @@ export const ChecksResults = () => {
   };
 
   if (catalogError) {
-    if (catalogErrorCode == 'not_found') {
-      pageContent = (
-        <NotificationBox
-          icon={<EOS_ERROR className="m-auto" color="red" size="xl" />}
-          text={
-            <ReactMarkdown
-              className="markdown"
-              remarkPlugins={[remarkGfm]}
-            >{`Provider \`${cluster?.provider}\` does not support checks execution`}</ReactMarkdown>
-          }
-        />
-      );
-    } else {
-      pageContent = (
-        <NotificationBox
-          icon={<EOS_ERROR className="m-auto" color="red" size="xl" />}
-          text={catalogError}
-          buttonText="Try again"
-          buttonOnClick={dispatchUpdateCatalog}
-        />
-      );
-    }
+    pageContent = (
+      <NotificationBox
+        icon={<EOS_ERROR className="m-auto" color="red" size="xl" />}
+        text={catalogError}
+        buttonText="Try again"
+        buttonOnClick={dispatchUpdateCatalog}
+      />
+    );
   } else if (!hasAlreadyChecksResults) {
     pageContent = (
       <HintForChecksSelection
@@ -253,6 +238,14 @@ export const ChecksResults = () => {
           }
         />
       </div>
+      {cluster.provider == UNKNOWN_PROVIDER && (
+        <WarningBanner>
+          The following results are valid for on-premise bare metal platforms.
+          <br />
+          If you are running your HANA cluster on a different platform, please
+          use results with caution
+        </WarningBanner>
+      )}
       {pageContent}
     </div>
   );

diff --git a/assets/js/components/ClusterDetails/ChecksSelection.jsx b/assets/js/components/ClusterDetails/ChecksSelection.jsx
@@ -36,14 +36,11 @@ export const ChecksSelection = ({ clusterId, cluster }) => {
   const isSelected = (check_id) =>
     selectedChecks ? selectedChecks.includes(check_id) : false;
 
-  const [[catalogData], catalogErrorCode, catalogError, loading] = useSelector(
-    (state) => [
-      state.catalog.data,
-      state.catalog.errorCode,
-      state.catalog.error,
-      state.catalog.loading,
-    ]
-  );
+  const [[catalogData], catalogError, loading] = useSelector((state) => [
+    state.catalog.data,
+    state.catalog.error,
+    state.catalog.loading,
+  ]);
 
   const { saving, savingError, savingSuccess } = useSelector(
     (state) => state.clusterChecksSelection
@@ -103,20 +100,6 @@ export const ChecksSelection = ({ clusterId, cluster }) => {
     }
   }, [loading]);
 
-  if (catalogErrorCode == 'not_found') {
-    return (
-      <NotificationBox
-        icon={<EOS_ERROR className="m-auto" color="red" size="xl" />}
-        text={
-          <ReactMarkdown
-            className="markdown"
-            remarkPlugins={[remarkGfm]}
-          >{`Provider \`${cluster?.provider}\` does not support checks execution`}</ReactMarkdown>
-        }
-      />
-    );
-  }
-
   if (catalogError) {
     return (
       <NotificationBox

diff --git a/assets/js/components/ClusterDetails/ClusterSettings.jsx b/assets/js/components/ClusterDetails/ClusterSettings.jsx
@@ -15,6 +15,9 @@ import {
   truncatedClusterNameClasses,
 } from './ClusterDetails';
 import { getClusterName } from '@components/ClusterLink';
+import WarningBanner from '@components/Banners/WarningBanner';
+
+export const UNKNOWN_PROVIDER = 'unknown';
 
 export const ClusterSettings = () => {
   const { clusterID } = useParams();
@@ -62,6 +65,14 @@ export const ClusterSettings = () => {
             </Tab>
           ))}
         </Tab.List>
+        {cluster.provider == UNKNOWN_PROVIDER && (
+          <WarningBanner>
+            The following catalog is valid for on-premise bare metal platforms.
+            <br />
+            If you are running your HANA cluster on a different platform, please
+            use results with caution
+          </WarningBanner>
+        )}
         <Tab.Panels className="mt-2">
           {Object.values(tabsSettings).map((tabContent, idx) => (
             <Tab.Panel

diff --git a/test/e2e/cypress/integration/hana_cluster_details.js b/test/e2e/cypress/integration/hana_cluster_details.js
@@ -147,4 +147,25 @@ context('HANA database details', () => {
       cy.get('.tn-check-result-row').should('have.length', 68);
     });
   });
+
+  describe('Cluster with unknown provider', () => {
+    before(() => {
+      cy.loadScenario('cluster-unknown-provider');
+      cy.visit(`/clusters/${availableHanaCluster.id}`);
+    });
+
+    it(`should show a warning message in the check selection view`, () => {
+      cy.contains('button', 'Settings').click();
+      cy.get('[data-testid="warning-banner"]').contains(
+        'The following catalog is valid for on-premise bare metal platforms.'
+      );
+    });
+
+    it(`should show a warning message in the checks results view`, () => {
+      cy.visit(`/clusters/${availableHanaCluster.id}/checks/results`);
+      cy.get('[data-testid="warning-banner"]').contains(
+        'The following results are valid for on-premise bare metal platforms.'
+      );
+    });
+  });
 });