From 6beed13bb326c7aee6d14389cc5a647b757c4638 Mon Sep 17 00:00:00 2001
From: Fabrizio Sestito <fabrizio.sestito@suse.com>
Date: Tue, 29 Mar 2022 17:00:50 +0200
Subject: [PATCH] Update frontend

---
 assets/js/components/ChecksResults.jsx   |  83 ++++++-----------
 assets/js/components/ChecksSelection.jsx | 110 ++++++++++++-----------
 assets/js/components/ClustersList.jsx    |  24 +++--
 3 files changed, 103 insertions(+), 114 deletions(-)

diff --git a/assets/js/components/ChecksResults.jsx b/assets/js/components/ChecksResults.jsx
index ea1841f9d0..b54ba21d58 100644
--- a/assets/js/components/ChecksResults.jsx
+++ b/assets/js/components/ChecksResults.jsx
@@ -19,30 +19,6 @@ const getChecksResults = (cluster) => {
   return {};
 };
 
-const getDescriptionFromCatalog =
-  (catalog = []) =>
-  (check_id) => {
-    return catalog.reduce((acc, check) => {
-      if (check.id === check_id) {
-        return check.description;
-      }
-
-      return acc;
-    }, '');
-  };
-
-const getGroupFromCatalog =
-  (catalog = []) =>
-  (checkId) => {
-    return catalog.reduce((acc, check) => {
-      if (check.id === checkId) {
-        return check.group;
-      }
-
-      return acc;
-    }, '');
-  };
-
 const getHostname =
   (hosts = []) =>
   (hostId) => {
@@ -55,6 +31,12 @@ const getHostname =
     }, '');
   };
 
+const getCatalogByProvider = (catalogProvider) => (state) => {
+  return state.catalog.catalog.find(
+    ({ provider }) => provider === catalogProvider
+  );
+};
+
 const sortChecksResults = (checksResults = [], group) => {
   return checksResults.sort((a, b) => {
     if (a.check_id === b.check_id) {
@@ -83,16 +65,18 @@ const ChecksResults = () => {
     state.clustersList.clusters.find((cluster) => cluster.id === clusterID)
   );
 
-  const hostname = getHostname(useSelector((state) => state.hostsList.hosts));
+  const checksResults = getChecksResults(cluster);
 
-  const catalog = useSelector((state) => state.catalog.catalog).flatMap(
-    ({ checks }) => checks
-  );
+  const hostname = getHostname(useSelector((state) => state.hostsList.hosts));
 
-  const checksResults = getChecksResults(cluster);
+  // FIXME: Check the provider by cluster
+  const catalog = useSelector(getCatalogByProvider('azure'));
 
-  const description = getDescriptionFromCatalog(catalog);
-  const group = getGroupFromCatalog(catalog);
+  const description = (checkId) => {
+    return catalog?.groups
+      ?.flatMap(({ checks }) => checks)
+      .find(({ id }) => id === checkId).description;
+  };
 
   return (
     <div>
@@ -109,12 +93,6 @@ const ChecksResults = () => {
                 <table className="min-w-full divide-y divide-gray-200">
                   <thead className="bg-gray-50">
                     <tr>
-                      <th
-                        scope="col"
-                        className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                      >
-                        Group
-                      </th>
                       <th
                         scope="col"
                         className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
@@ -136,24 +114,19 @@ const ChecksResults = () => {
                     </tr>
                   </thead>
                   <tbody className="bg-white divide-y divide-gray-200">
-                    {sortChecksResults(checksResults[c], group).map(
-                      (checkResult) => (
-                        <tr key={checkResult.check_id} className="animate-fade">
-                          <td className="px-6 py-4 whitespace-nowrap">
-                            {group(checkResult.check_id)}
-                          </td>
-                          <td className="px-6 py-4 whitespace-nowrap">
-                            {checkResult.check_id}
-                          </td>
-                          <td className="px-6 py-4 whitespace-nowrap">
-                            {description(checkResult.check_id)}
-                          </td>
-                          <td className="px-6 py-4 whitespace-nowrap content-center">
-                            {getResultIcon(checkResult.result)}
-                          </td>
-                        </tr>
-                      )
-                    )}
+                    {sortChecksResults(checksResults[c]).map((checkResult) => (
+                      <tr key={checkResult.check_id} className="animate-fade">
+                        <td className="px-6 py-4 whitespace-nowrap">
+                          {checkResult.check_id}
+                        </td>
+                        <td className="px-6 py-4 whitespace-nowrap">
+                          {description(checkResult.check_id)}
+                        </td>
+                        <td className="px-6 py-4 whitespace-nowrap content-center">
+                          {getResultIcon(checkResult.result)}
+                        </td>
+                      </tr>
+                    ))}
                   </tbody>
                 </table>
               </div>
diff --git a/assets/js/components/ChecksSelection.jsx b/assets/js/components/ChecksSelection.jsx
index 44e3f97b50..5d02002db9 100644
--- a/assets/js/components/ChecksSelection.jsx
+++ b/assets/js/components/ChecksSelection.jsx
@@ -37,65 +37,69 @@ const ChecksSelection = () => {
 
   return (
     <div>
-      {catalog.map(({ group, checks }) => (
-        <div
-          key={group.id}
-          className="bg-white shadow overflow-hidden sm:rounded-md mb-8"
-        >
-          <div className="bg-white px-4 py-5 border-b border-gray-200 sm:px-6">
-            <h3 className="text-lg leading-6 font-medium text-gray-900">
-              {group}
-            </h3>
-          </div>
-          <ul role="list" className="divide-y divide-gray-200">
-            {checks.map((check) => (
-              <li key={check.id}>
-                <a href="#" className="block hover:bg-gray-50">
-                  <div className="px-4 py-4 sm:px-6">
-                    <div className="flex items-center">
-                      <p className="text-sm font-medium">{check.name}</p>
-                      <p className="ml-2 px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
-                        {check.id}
-                      </p>
-                    </div>
-                    <div className="mt-2 sm:flex sm:justify-between">
-                      <div className="sm:flex">
-                        <p className="flex items-center text-sm text-gray-500">
-                          {check.description}
+      {catalog
+        .flatMap(({ _provider, groups }) => groups)
+        .map(({ group, checks }) => (
+          <div
+            key={group.id}
+            className="bg-white shadow overflow-hidden sm:rounded-md mb-8"
+          >
+            <div className="bg-white px-4 py-5 border-b border-gray-200 sm:px-6">
+              <h3 className="text-lg leading-6 font-medium text-gray-900">
+                {group}
+              </h3>
+            </div>
+            <ul role="list" className="divide-y divide-gray-200">
+              {checks.map((check) => (
+                <li key={check.id}>
+                  <a href="#" className="block hover:bg-gray-50">
+                    <div className="px-4 py-4 sm:px-6">
+                      <div className="flex items-center">
+                        <p className="text-sm font-medium">{check.name}</p>
+                        <p className="ml-2 px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                          {check.id}
                         </p>
                       </div>
-                      <Switch.Group as="div" className="flex items-center">
-                        <Switch
-                          checked={isSelected(check.id)}
-                          className={classNames(
-                            isSelected(check.id)
-                              ? 'bg-jungle-green-500'
-                              : 'bg-gray-200',
-                            'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer focus:outline-none transition-colors ease-in-out duration-200'
-                          )}
-                          onChange={() => {
-                            setSelectedChecks(toggle(selectedChecks, check.id));
-                          }}
-                        >
-                          <span
-                            aria-hidden="true"
+                      <div className="mt-2 sm:flex sm:justify-between">
+                        <div className="sm:flex">
+                          <p className="flex items-center text-sm text-gray-500">
+                            {check.description}
+                          </p>
+                        </div>
+                        <Switch.Group as="div" className="flex items-center">
+                          <Switch
+                            checked={isSelected(check.id)}
                             className={classNames(
                               isSelected(check.id)
-                                ? 'translate-x-5'
-                                : 'translate-x-0',
-                              'inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200'
+                                ? 'bg-jungle-green-500'
+                                : 'bg-gray-200',
+                              'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer focus:outline-none transition-colors ease-in-out duration-200'
                             )}
-                          />
-                        </Switch>
-                      </Switch.Group>
+                            onChange={() => {
+                              setSelectedChecks(
+                                toggle(selectedChecks, check.id)
+                              );
+                            }}
+                          >
+                            <span
+                              aria-hidden="true"
+                              className={classNames(
+                                isSelected(check.id)
+                                  ? 'translate-x-5'
+                                  : 'translate-x-0',
+                                'inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200'
+                              )}
+                            />
+                          </Switch>
+                        </Switch.Group>
+                      </div>
                     </div>
-                  </div>
-                </a>
-              </li>
-            ))}
-          </ul>
-        </div>
-      ))}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
       <div className="place-items-end">
         <button
           className="bg-jungle-green-500 hover:opacity-75 text-white font-bold py-2 px-4 rounded"
diff --git a/assets/js/components/ClustersList.jsx b/assets/js/components/ClustersList.jsx
index 6a1db94314..83b375c870 100644
--- a/assets/js/components/ClustersList.jsx
+++ b/assets/js/components/ClustersList.jsx
@@ -10,7 +10,8 @@ import { EOS_EDIT, EOS_RUN_CIRCLE, EOS_MORE_HORIZ } from 'eos-icons-react';
 
 import { logError } from '@lib/log';
 
-import HealthIcon from './Health';
+import HealthIcon from '@components/Health';
+import Spinner from '@components/Spinner';
 
 const getClusterTypeLabel = (type) => {
   switch (type) {
@@ -65,11 +66,21 @@ const ClustersList = () => {
         title: 'Health',
         key: 'health',
         filter: true,
-        render: (content) => (
-          <div className="ml-4">
-            <HealthIcon health={content} />
-          </div>
-        ),
+        render: (content, { checks_execution }) => {
+          if (checks_execution === 'not_running') {
+            return (
+              <div className="ml-4">
+                <HealthIcon health={content} />
+              </div>
+            );
+          } else {
+            return (
+              <div className="ml-4">
+                <Spinner></Spinner>
+              </div>
+            );
+          }
+        },
       },
       {
         title: 'Name',
@@ -206,6 +217,7 @@ const ClustersList = () => {
       sid: cluster.sid,
       type: cluster.type,
       hasDetails: cluster.details != null,
+      checks_execution: cluster.checks_execution,
       tags: (cluster.tags && cluster.tags.map((tag) => tag.value)) || [],
     };
   });