select all modules

Author: petar-cvit

cyclops-ui/src/components/pages/Modules/Modules.tsx

@@ -51,14 +51,27 @@ const Modules = () => {
     description: "",
   });
 
-  const [checkedModules, setCheckedModules] = useState<string[]>([]);
+  const [checkedModules, setCheckedModules] = useState<Set<string>>(new Set());
+
+  const handleModuleSelect = (moduleName: string, checked: boolean) => {
+    setCheckedModules((prev) => {
+      const updatedSet = new Set(prev);
+      if (checked) {
+        updatedSet.add(moduleName);
+      } else {
+        updatedSet.delete(moduleName);
+      }
+      return updatedSet;
+    });
+  };
 
-  const handleCheckboxChange = (moduleName: string, checked: boolean) => {
-    setCheckedModules((prev) =>
-      checked
-        ? [...prev, moduleName]
-        : prev.filter((name) => name !== moduleName),
-    );
+  const handleSelectAllModules = (checked: boolean) => {
+    if (!checked) {
+      setCheckedModules(new Set());
+      return;
+    }
+
+    setCheckedModules(new Set(filteredData.map((module: any) => module.name)));
   };
 
   useEffect(() => {
@@ -120,14 +133,16 @@ const Modules = () => {
 
   const handleBatchReconcile = () => {
     axios
-      .post(`/api/modules/reconcile`, { modules: checkedModules })
+      .post(`/api/modules/reconcile`, {
+        modules: checkedModules.keys().toArray(),
+      })
       .then(() => {
         notification.success({
           message: "Reconciliation triggered",
           description: `Modules have been queued for reconciliation.`,
           duration: 10,
         });
-        setCheckedModules([]);
+        setCheckedModules(new Set());
       })
       .catch((error) => {
         setError(mapResponseError(error));
@@ -261,6 +276,16 @@ const Modules = () => {
       <Col key={index} xs={24} sm={12} md={8} lg={8} xl={6}>
         <a href={"/modules/" + module.name}>
           <Card
+            styles={{
+              header: {
+                borderRadius: "4px 7px 0 0",
+                backgroundColor: checkedModules.has(module.name)
+                  ? mode === "light"
+                    ? "#fcd8ae"
+                    : "#5e3301"
+                  : "",
+              },
+            }}
             title={
               <div
                 style={{
@@ -280,9 +305,9 @@ const Modules = () => {
                   {module.name}
                 </div>
                 <Checkbox
-                  checked={checkedModules.includes(module.name)}
+                  checked={checkedModules.has(module.name)}
                   onChange={(e) =>
-                    handleCheckboxChange(module.name, e.target.checked)
+                    handleModuleSelect(module.name, e.target.checked)
                   }
                 />
               </div>
@@ -422,35 +447,40 @@ const Modules = () => {
           />
         )}
 
-        <Row gutter={[20, 0]}>
-          <Col span={14}>
-            <Title level={2}>Deployed modules</Title>
-          </Col>
-          <Col span={4}>
-            <Button
-              onClick={handleBatchReconcile}
-              disabled={checkedModules.length === 0}
-              block
-              style={{
-                fontWeight: "600",
-              }}
-            >
-              <PlusCircleOutlined />
-              Reconcile
-            </Button>
+        <Row gutter={[20, 0]} align="middle" justify="space-between">
+          <Col>
+            <Title level={3}>Deployed modules</Title>
           </Col>
-          <Col span={6}>
-            <Button
-              type={"primary"}
-              onClick={handleClick}
-              block
-              style={{
-                fontWeight: "600",
-              }}
-            >
-              <PlusCircleOutlined />
-              Add module
-            </Button>
+          <Col>
+            <Row gutter={[10, 0]} align="middle">
+              <Col>
+                <Checkbox
+                  onChange={(e) => handleSelectAllModules(e.target.checked)}
+                >
+                  Select all modules
+                </Checkbox>
+              </Col>
+              <Col>
+                <Button
+                  onClick={handleBatchReconcile}
+                  disabled={checkedModules.size === 0}
+                  style={{ fontWeight: "600" }}
+                  block
+                >
+                  <PlusCircleOutlined /> Reconcile
+                </Button>
+              </Col>
+              <Col>
+                <Button
+                  type="primary"
+                  onClick={handleClick}
+                  style={{ fontWeight: "600", width: "240px" }}
+                  block
+                >
+                  <PlusCircleOutlined /> Add module
+                </Button>
+              </Col>
+            </Row>
           </Col>
         </Row>
 

cyclops-ui/src/components/shared/CreateModule/CreateModule.tsx

@@ -80,6 +80,7 @@ export interface CreateModuleProps {
     moduleNamespace: string,
     templateRef: any,
     values: string,
+    lockTemplateVersion?: boolean,
     gitOpsWrite?: any,
   ) => Promise<any>;
   onSubmitModuleSuccess: (moduleName: string) => void;
@@ -188,6 +189,7 @@ export const CreateModuleComponent = ({
 
     const moduleName = values["cyclops_module_name"];
     const moduleNamespace = values["cyclops_module_namespace"];
+    const lockTemplateVersion = values["cyclops_module_lock_version"];
 
     values = findMaps(config.root.properties, values, {});
 
@@ -201,6 +203,7 @@ export const CreateModuleComponent = ({
         sourceType: template.ref.sourceType,
       },
       values,
+      lockTemplateVersion,
       resolveGitOpsWrite(values),
     )
       .then(() => {
@@ -560,6 +563,26 @@ export const CreateModuleComponent = ({
                     <Divider
                       style={{ marginTop: "12px", marginBottom: "12px" }}
                     />
+                    <Form.Item
+                      name="cyclops_module_lock_version"
+                      id="cyclops_module_lock_version"
+                      label={
+                        <div>
+                          Lock template version
+                          <p style={{ color: "#8b8e91", marginBottom: "0px" }}>
+                            If toggled, this Module will not automatically
+                            follow the latest version of the template selected
+                            and you will have to bump the template version while
+                            editing the module.
+                          </p>
+                        </div>
+                      }
+                      style={{ padding: "0px 12px 0px 12px" }}
+                      hasFeedback={true}
+                      validateDebounce={1000}
+                    >
+                      <Switch />
+                    </Form.Item>
                     <Form.Item
                       name="cyclops_module_namespace"
                       id="cyclops_module_namespace"

cyclops-ui/src/utils/api/api.tsx

@@ -74,6 +74,7 @@ export async function createModule(
   moduleNamespace: string,
   templateRef: any,
   values: any,
+  lockTemplateVersion?: boolean,
   gitOpsWrite?: any,
 ) {
   return await axios.post(`/api/modules/new`, {
@@ -87,6 +88,7 @@ export async function createModule(
       version: templateRef.version,
       sourceType: templateRef.sourceType,
     },
+    lockTemplateVersion: lockTemplateVersion,
   });
 }