Connect List,Add Clusters

Author: dvaldivia

portal-ui/src/screens/Console/Clusters/ListClusters/AddCluster.tsx

@@ -79,9 +79,26 @@ const AddCluster = ({
 
   useEffect(() => {
     if (addSending) {
+      let cleanZones: IZone[] = [];
+      for (let zone of zones) {
+        if (zone.name !== "") {
+          cleanZones.push(zone);
+        }
+      }
+
       api
         .invoke("POST", `/api/v1/clusters`, {
           name: clusterName,
+          service_name: clusterName,
+          enable_ssl: enableSSL,
+          enable_mcs: enableMCS,
+          access_key: accessKey,
+          secret_key: secretKey,
+          volumes_per_server: volumesPerServer,
+          volume_configuration: {
+            size: volumeConfiguration.size,
+          },
+          zones: cleanZones,
         })
         .then(() => {
           setAddSending(false);
@@ -175,7 +192,9 @@ const AddCluster = ({
                 <ZonesMultiSelector
                   label="Zones"
                   name="zones_selector"
-                  onChange={() => {}}
+                  onChange={(elements: IZone[]) => {
+                    setZones(elements);
+                  }}
                   elements={zones}
                 />
               </div>

portal-ui/src/screens/Console/Clusters/ListClusters/ListClusters.tsx

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Grid from "@material-ui/core/Grid";
 import Typography from "@material-ui/core/Typography";
 import TextField from "@material-ui/core/TextField";
@@ -28,6 +28,12 @@ import AddCluster from "./AddCluster";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import DeleteCluster from "./DeleteCluster";
 import { Link } from "react-router-dom";
+import api from "../../../../common/api";
+import { PolicyList } from "../../Policies/types";
+import { GroupsList } from "../../Groups/types";
+import { stringSort } from "../../../../utils/sortFunctions";
+import { ICluster, IClustersResponse } from "./types";
+import { niceBytes } from "../../../../common/utils";
 
 interface IClustersList {
   classes: any;
@@ -85,8 +91,9 @@ const ListClusters = ({ classes }: IClustersList) => {
   const [filterClusters, setFilterClusters] = useState<string>("");
   const [records, setRecords] = useState<any[]>([]);
   const [offset, setOffset] = useState<number>(0);
-  const [rowsPerPage, setRowsPerPage] = useState<number>(0);
+  const [rowsPerPage, setRowsPerPage] = useState<number>(10);
   const [page, setPage] = useState<number>(0);
+  const [error, setError] = useState<string>("");
 
   const closeAddModalAndRefresh = (reloadData: boolean) => {
     setCreateClusterOpen(false);
@@ -140,6 +147,54 @@ const ListClusters = ({ classes }: IClustersList) => {
       }
     });
 
+  useEffect(() => {
+    if (isLoading) {
+      const fetchRecords = () => {
+        const offset = page * rowsPerPage;
+        api
+          .invoke(
+            "GET",
+            `/api/v1/clusters?offset=${offset}&limit=${rowsPerPage}`
+          )
+          .then((res: IClustersResponse) => {
+            if (res === null) {
+              setIsLoading(false);
+              return;
+            }
+            let resClusters: ICluster[] = [];
+            if (res.clusters !== null) {
+              resClusters = res.clusters;
+            }
+
+            for (let i = 0; i < resClusters.length; i++) {
+              const total =
+                resClusters[i].volume_count * resClusters[i].volume_size;
+              resClusters[i].capacity = niceBytes(total + "");
+            }
+
+            setRecords(resClusters);
+            setError("");
+            setIsLoading(false);
+
+            // if we get 0 results, and page > 0 , go down 1 page
+            if ((!res.clusters || res.clusters.length === 0) && page > 0) {
+              const newPage = page - 1;
+              setPage(newPage);
+            }
+          })
+          .catch((err) => {
+            setError(err);
+            setIsLoading(false);
+          });
+      };
+      fetchRecords();
+    }
+  }, [isLoading, page, rowsPerPage]);
+
+  useEffect(() => {
+    setIsLoading(true);
+  }, []);
+
   return (
     <React.Fragment>
       {createClusterOpen && (
@@ -200,7 +255,8 @@ const ListClusters = ({ classes }: IClustersList) => {
             columns={[
               { label: "Name", elementKey: "name" },
               { label: "Capacity", elementKey: "capacity" },
-              { label: "# of Zones", elementKey: "zones_counter" },
+              { label: "# of Zones", elementKey: "zone_count" },
+              { label: "State", elementKey: "currentState" },
             ]}
             isLoading={isLoading}
             records={filteredRecords}

portal-ui/src/screens/Console/Clusters/ListClusters/types.ts

@@ -23,3 +23,19 @@ export interface IVolumeConfiguration {
   size: string;
   storage_class: string;
 }
+
+export interface ICluster {
+  name: string;
+  zone_count: number;
+  currentState: string;
+  instance_count: 4;
+  creation_date: Date;
+  volume_size: number;
+  volume_count: number;
+  // computed
+  capacity: string;
+}
+
+export interface IClustersResponse {
+  clusters: ICluster[];
+}