Refactor ClusterSettings to either display wanda's checks selection o…

…r runner's settings
trento-project · Jan 9, 2023 · 528aa33 · 528aa33
1 parent 907f29b
commit 528aa33
Showing 1 changed file with 72 additions and 54 deletions.
diff --git a/assets/js/components/ClusterDetails/ClusterSettings.jsx b/assets/js/components/ClusterDetails/ClusterSettings.jsx
@@ -23,17 +23,6 @@ export function ClusterSettings({ usingNewChecksEngine = false }) {
 
   const cluster = useSelector(getCluster(clusterID));
 
-  const tabsSettings = {
-    'Checks Selection': usingNewChecksEngine ? (
-      <ChecksSelectionNew clusterId={clusterID} cluster={cluster} />
-    ) : (
-      <ChecksSelection clusterId={clusterID} cluster={cluster} />
-    ),
-    'Connection Settings': (
-      <ConnectionSettings clusterId={clusterID} cluster={cluster} />
-    ),
-  };
-
   if (!cluster) {
     return <div>Loading...</div>;
   }
@@ -51,54 +40,83 @@ export function ClusterSettings({ usingNewChecksEngine = false }) {
       </BackButton>
       <div className="flex mb-2">
         <h1 className="text-3xl w-1/2">
-          <span className="font-medium">Cluster Settings for</span>{' '}
+          <span className="font-medium">
+            {usingNewChecksEngine ? 'Checks Selection' : 'Cluster Settings'} for{' '}
+          </span>{' '}
           <span className={`font-bold ${truncatedClusterNameClasses}`}>
             {getClusterName(cluster)}
           </span>
         </h1>
       </div>
-      <Tab.Group manual>
-        <Tab.List className="flex p-1 space-x-1 bg-zinc-300/20 rounded">
-          {Object.keys(tabsSettings).map((tabTitle) => (
-            <Tab
-              key={tabTitle}
-              className={({ selected }) =>
-                classNames(
-                  'w-full py-2.5 text-sm leading-5 font-medium rounded',
-                  'focus:outline-none',
-                  selected
-                    ? 'bg-white shadow'
-                    : 'text-gray-800 hover:bg-white/[0.12]'
-                )
-              }
-            >
-              {tabTitle}
-            </Tab>
-          ))}
-        </Tab.List>
-        <ClusterInfoBox haScenario={cluster.type} provider={cluster.provider} />
-        {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.entries(tabsSettings).map(([tabTitle, tabContent]) => (
-            <Tab.Panel
-              key={tabTitle}
-              className={classNames(
-                'bg-white rounded p-3',
-                'focus:outline-none focus:ring-2 ring-offset-2 ring-white ring-opacity-60'
-              )}
-            >
-              {tabContent}
-            </Tab.Panel>
-          ))}
-        </Tab.Panels>
-      </Tab.Group>
+      {usingNewChecksEngine ? (
+        <ChecksSelectionNew clusterId={clusterID} cluster={cluster} />
+      ) : (
+        <RunnerSettings clusterID={clusterID} cluster={cluster} />
+      )}
+    </div>
+  );
+}
+
+function RunnerSettings({ clusterID, cluster }) {
+  const tabsSettings = {
+    'Checks Selection': (
+      <ChecksSelection clusterId={clusterID} cluster={cluster} />
+    ),
+    'Connection Settings': (
+      <ConnectionSettings clusterId={clusterID} cluster={cluster} />
+    ),
+  };
+
+  return (
+    <Tab.Group manual>
+      <Tab.List className="flex p-1 space-x-1 bg-zinc-300/20 rounded">
+        {Object.keys(tabsSettings).map((tabTitle) => (
+          <Tab
+            key={tabTitle}
+            className={({ selected }) =>
+              classNames(
+                'w-full py-2.5 text-sm leading-5 font-medium rounded',
+                'focus:outline-none',
+                selected
+                  ? 'bg-white shadow'
+                  : 'text-gray-800 hover:bg-white/[0.12]'
+              )
+            }
+          >
+            {tabTitle}
+          </Tab>
+        ))}
+      </Tab.List>
+      <InfoBox haScenario={cluster.type} provider={cluster.provider} />
+      <Tab.Panels className="mt-2">
+        {Object.entries(tabsSettings).map(([tabTitle, tabContent]) => (
+          <Tab.Panel
+            key={tabTitle}
+            className={classNames(
+              'bg-white rounded p-3',
+              'focus:outline-none focus:ring-2 ring-offset-2 ring-white ring-opacity-60'
+            )}
+          >
+            {tabContent}
+          </Tab.Panel>
+        ))}
+      </Tab.Panels>
+    </Tab.Group>
+  );
+}
+
+export function InfoBox({ haScenario, provider }) {
+  return (
+    <div>
+      <ClusterInfoBox haScenario={haScenario} provider={provider} />
+      {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>
+      )}
     </div>
   );
 }