working, just need ot write test

liu-samuel · liu-samuel · commit 1f0c61fc5870 · 2024-10-31T16:53:25.000-04:00
diff --git a/app/controllers/ops_controller/settings/cap_and_u.rb b/app/controllers/ops_controller/settings/cap_and_u.rb
@@ -7,8 +7,7 @@ def cu_collection_update
     return unless load_edit("cu_edit__collection", "replace_cell__explorer")
 
     cu_collection_get_form_vars
-    # require 'byebug'
-    # byebug
+
     if params[:button] == "save"
       # C & U collection settings
       if @edit[:new][:all_clusters] != @edit[:current][:all_clusters]
diff --git a/app/javascript/components/settings-cu-collection/index.jsx b/app/javascript/components/settings-cu-collection/index.jsx
@@ -1,14 +1,16 @@
 /* eslint-disable no-restricted-syntax */
 import React, { useState, useEffect } from 'react';
+import { FormSpy } from '@data-driven-forms/react-form-renderer';
 import MiqFormRenderer, { useFormApi } from '@@ddf';
 import {
   Db2Database20, BareMetalServer20,
 } from '@carbon/icons-react';
-import createSchema from './settings-cu-collection-tab.schema.js';
-import miqRedirectBack from '../../helpers/miq-redirect-back.js';
+import PropTypes from 'prop-types';
+import { Button } from 'carbon-components-react';
+import createSchema from './settings-cu-collection-tab.schema';
 
 let idCounter = 0;
-let hostsOrDatastoresIds = new Set();
+let modified = false;
 
 const SettingsCUCollectionTab = ({
   url, fetchURL, clusterTree, datastoreTree, allClusters, allDatastores,
@@ -20,8 +22,25 @@ const SettingsCUCollectionTab = ({
     datastoresNodes: [],
     hostsCheckedWithId: [],
     datastoresCheckedWithId: [],
+    callNumber: 0,
   });
 
+  const customValidation = (values) => {
+    if (values.tree_dropdown === undefined) {
+      values.tree_dropdown = data.checked || [];
+    }
+    if (values) {
+      if (JSON.stringify(values.clusters_tree) === JSON.stringify(data.hostsCheckedWithId)
+        && JSON.stringify(values.datastores_tree) === JSON.stringify(data.datastoresCheckedWithId)
+        && values.all_clusters === allClusters
+        && values.all_datastores === allDatastores) {
+        modified = false;
+      } else {
+        modified = true;
+      }
+    }
+  };
+
   const generateId = () => idCounter++;
 
   const parseLabel = (text) => {
@@ -53,11 +72,11 @@ const SettingsCUCollectionTab = ({
     let icon;
     switch (node.icon) {
       case 'fa fa-database':
-        icon = Db2Database20 ? <Db2Database20 color="black" /> : <span>Icon DATABSEnot available</span>;
+        icon = <Db2Database20 color="black" />;
         break;
 
       case 'pficon pficon-cluster':
-        icon = BareMetalServer20 ? <BareMetalServer20 color="black" /> : <span>Icon SERvERASDSADASDSADSADASDa not available</span>;
+        icon = <BareMetalServer20 color="black" />;
         break;
       default:
         break;
@@ -76,23 +95,10 @@ const SettingsCUCollectionTab = ({
     return nodeObject;
   };
 
-  useEffect(() => {
-    if (data.isLoading) {
-      http.post(url, data.tempData)
-        .then(() => {
-          setData({
-            ...data,
-            isLoading: false,
-          });
-          window.location.reload();
-        })
-        .catch((error) => console.log('error: ', error));
-    }
-  }, [data.isLoading]);
-
-  useEffect(() => {
+  const getNodeValues = () => {
     let clustersNodes = [];
     let datastoresNodes = [];
+    idCounter = 0;
     if (clusterTree) {
       const clustersBsTree = JSON.parse(clusterTree.bs_tree);
       clustersNodes = clustersBsTree.map((node) => transformTree(node, false, 0));
@@ -131,25 +137,46 @@ const SettingsCUCollectionTab = ({
 
       for (const node of datastoresNodes) {
         if (node.children) {
-          if (datastoresChecked.includes(node.value.split('#')[0])) {
+          const dsValue = node.value.split('#')[0];
+          const dsId = dsValue.split('-')[1];
+          const foundObject = datastores.find((item) => item.id === Number(dsId));
+          if (datastoresChecked.includes(dsValue) && foundObject.capture === true) {
             for (const host of node.children) {
               datastoresCheckedWithId.push(host.value);
             }
           }
-        } else {
-          if (datastoresChecked.includes(node.value.split('#')[0])) {
-            datastoresCheckedWithId.push(node.value);
-          }
+        } else if (datastoresChecked.includes(node.value.split('#')[0])) {
+          datastoresCheckedWithId.push(node.value);
         }
       }
+
       setData({
         ...data,
         clustersNodes,
         datastoresNodes,
         hostsCheckedWithId,
         datastoresCheckedWithId,
+        callNumber: data.callNumber + 1,
       });
     });
+  };
+
+  useEffect(() => {
+    if (data.isLoading) {
+      http.post(url, data.tempData)
+        .then(() => {
+          setData({
+            ...data,
+            isLoading: false,
+          });
+          window.location.reload();
+        })
+        .catch((error) => console.log('error: ', error));
+    }
+  }, [data.isLoading]);
+
+  useEffect(() => {
+    getNodeValues();
   }, []);
 
   const handleSubmit = (values) => {
@@ -201,36 +228,38 @@ const SettingsCUCollectionTab = ({
             }
           }
         }
+      } else if (clustersSplitValues.includes(node.key)) {
+        params.clusters_checked.push({ id: node.key, capture: true });
       } else {
-        if (clustersSplitValues.includes(node.key)) {
-          params.clusters_checked.push({ id: node.key, capture: true });
-        } else {
-          params.clusters_checked.push({ id: node.key, capture: false });
-        }
+        params.clusters_checked.push({ id: node.key, capture: false });
       }
     }
 
-    for (const node of datastoreTree.tree_nodes) {
+    for (const node of data.datastoresNodes) {
       const curr = [];
-      if (node.nodes) {
-        for (const hostNode of node.nodes) {
-          if (datastoresSplitValues.includes(hostNode.key)) {
-            curr.push(hostNode.key);
+      if (node.children) {
+        for (const hostNode of node.children) {
+          if (values.datastores_tree && values.datastores_tree.includes(hostNode.value)) {
+            curr.push(hostNode.value);
           }
-          if (hostNode === node.nodes[node.nodes.length - 1]) {
-            if (curr.length === node.nodes.length) {
-              params.datastores_checked.push({ id: node.key, capture: true });
+          if (hostNode === node.children[node.children.length - 1]) {
+            if (curr.length === node.children.length) {
+              params.datastores_checked.push({ id: node.value.split('#')[0], capture: true });
+              for (const val of curr) {
+                const index = values.datastores_tree.findIndex((host) => host.id === val);
+                if (index > -1) {
+                  values.datastores_tree.splice(index, 1);
+                }
+              }
             } else {
-              params.datastores_checked.push({ id: node.key, capture: false });
+              params.datastores_checked.push({ id: node.value.split('#')[0], capture: false });
             }
           }
         }
+      } else if (datastoresSplitValues.includes(node.value.split('#')[0])) {
+        params.datastores_checked.push({ id: node.value.split('#')[0], capture: true });
       } else {
-        if (datastoresSplitValues.includes(node.key)) {
-          params.datastores_checked.push({ id: node.key, capture: true });
-        } else {
-          params.datastores_checked.push({ id: node.key, capture: false });
-        }
+        params.datastores_checked.push({ id: node.value.split('#')[0], capture: false });
       }
     }
 
@@ -242,82 +271,90 @@ const SettingsCUCollectionTab = ({
   };
 
   const handleReset = () => {
-    let clustersNodes = [];
-    let datastoresNodes = [];
-    if (clusterTree) {
-      const clustersBsTree = JSON.parse(clusterTree.bs_tree);
-      clustersNodes = clustersBsTree.map((node) => transformTree(node, false, 0));
-    }
-    if (datastoreTree) {
-      const datastoresBsTree = JSON.parse(datastoreTree.bs_tree);
-      datastoresNodes = datastoresBsTree.map((node) => transformTree(node, true, 0));
-    }
-
-    const hostsChecked = [];
-    const hostsCheckedWithId = [];
-    const datastoresChecked = [];
-    const datastoresCheckedWithId = [];
-    http.get(fetchURL).then((result) => {
-      const { hosts, datastores } = result;
-      console.log("results: ", result);
-      for (const host of hosts) {
-        if (host.capture === true) {
-          hostsChecked.push(`h-${host.id}`);
-        }
-      }
-      for (const datastore of datastores) {
-        if (datastore.capture === true) {
-          datastoresChecked.push(`ds-${datastore.id}`);
-        }
-      }
-
-      for (const node of clustersNodes) {
-        if (node.children) {
-          for (const host of node.children) {
-            if (hostsChecked.includes(host.value.split('#')[0])) {
-              hostsCheckedWithId.push(host.value);
-            }
-          }
-        }
-      }
-
-      for (const node of datastoresNodes) {
-        if (node.children) {
-          if (datastoresChecked.includes(node.value.split('#')[0])) {
-            for (const host of node.children) {
-              datastoresCheckedWithId.push(host.value);
-            }
-          }
-        } else {
-          if (datastoresChecked.includes(node.value.split('#')[0])) {
-            datastoresCheckedWithId.push(node.value);
-          }
-        }
-      }
-      setData({
-        ...data,
-        clustersNodes,
-        datastoresNodes,
-        hostsCheckedWithId,
-        datastoresCheckedWithId,
-      });
-    });
+    getNodeValues();
   };
 
   return (
     <MiqFormRenderer
       className="toggle"
       schema={createSchema(
-        clusterTree, datastoreTree, data.clustersNodes, data.datastoresNodes,
-        data.hostsCheckedWithId, data.datastoresCheckedWithId, allClusters, allDatastores,
+        clusterTree, datastoreTree, data.clustersNodes, data.datastoresNodes, data.hostsCheckedWithId,
+        data.datastoresCheckedWithId, allClusters, allDatastores, data.callNumber,
       )}
       onSubmit={handleSubmit}
       canSubmit
       canReset
       onReset={handleReset}
-      // FormTemplate={(props) => <FormTemplate {...props} />}
+      validate={(values) => customValidation(values)}
+      FormTemplate={(props) => <FormTemplate {...props} />}
     />
   );
 };
 
+const FormTemplate = ({
+  formFields,
+}) => {
+  const {
+    handleSubmit, onReset, getState,
+  } = useFormApi();
+  const { valid } = getState();
+  return (
+    <form onSubmit={handleSubmit}>
+      {formFields}
+      <FormSpy>
+        {() => (
+          <div className="custom-button-wrapper">
+            <Button
+              disabled={!valid || !modified}
+              kind="primary"
+              className="btnRight"
+              type="submit"
+              variant="contained"
+            >
+              {__('Save')}
+            </Button>
+            <Button
+              disabled={!modified}
+              kind="secondary"
+              className="btnRight"
+              variant="contained"
+              onClick={onReset}
+              type="button"
+            >
+              { __('Reset')}
+            </Button>
+          </div>
+        )}
+      </FormSpy>
+    </form>
+  );
+};
+
+SettingsCUCollectionTab.propTypes = {
+  url: PropTypes.string,
+  fetchURL: PropTypes.string,
+  clusterTree: PropTypes.object,
+  datastoreTree: PropTypes.object,
+  allClusters: PropTypes.bool,
+  allDatastores: PropTypes.bool,
+
+};
+
+SettingsCUCollectionTab.defaultProps = {
+  url: '',
+  fetchURL: '',
+  clusterTree: undefined,
+  datastoreTree: undefined,
+  allClusters: false,
+  allDatastores: false,
+};
+
+FormTemplate.propTypes = {
+  formFields: PropTypes.object,
+};
+
+FormTemplate.defaultProps = {
+  formFields: undefined,
+};
+
 export default SettingsCUCollectionTab;
diff --git a/app/javascript/components/settings-cu-collection/settings-cu-collection-tab.schema.js b/app/javascript/components/settings-cu-collection/settings-cu-collection-tab.schema.js
@@ -1,7 +1,7 @@
 import { componentTypes } from '@@ddf';
 
 const createSchema = (
-  clustersTree, datastoresTree, clustersNodes, datastoresNodes, hostsChecked, datastoresChecked, allClusters, allDatastores,
+  clustersTree, datastoresTree, clustersNodes, datastoresNodes, hostsChecked, datastoresChecked, allClusters, allDatastores, callNumber,
 ) => {
   const fields = [
     {
@@ -69,7 +69,7 @@ const createSchema = (
               component: 'checkbox-tree',
               id: 'clusters-tree',
               name: 'clusters_tree',
-              key: `${clustersNodes.length}`,
+              key: `${clustersNodes.length}${callNumber}`,
               className: 'clusters-tree',
               nodes: clustersNodes,
               checked: hostsChecked,
@@ -84,8 +84,8 @@ const createSchema = (
               className: 'vm-data',
               condition: { and: [{ when: 'all_clusters', is: false }] },
               label: __(
-                'VM data will be collected for VMs under selected Hosts only. ' +
-                'Data is collected for a Cluster and all of its Hosts when at least one Host is selected.'
+                'VM data will be collected for VMs under selected Hosts only. '
+                + 'Data is collected for a Cluster and all of its Hosts when at least one Host is selected.'
               ),
             },
             ...(clustersTree != null
@@ -150,7 +150,7 @@ const createSchema = (
               id: 'datastores-tree',
               name: 'datastores_tree',
               className: 'datastores-tree',
-              key: `${datastoresNodes.length}`,
+              key: `${datastoresNodes.length}${callNumber}`,
               nodes: datastoresNodes,
               checked: datastoresChecked,
               condition: { and: [{ when: 'all_datastores', is: false }] },
