Connect List,Add Tenants (#148)

Author: dvaldivia

pkg/acl/endpoints.go

@@ -35,8 +35,8 @@ var (
 	buckets         = "/buckets"
 	bucketsDetail   = "/buckets/:bucketName"
 	serviceAccounts = "/service-accounts"
-	clusters        = "/clusters"
-	clustersDetail  = "/clusters/:clusterName"
+	tenants         = "/tenants"
+	tenantsDetail   = "/tenants/:tenantName"
 	heal            = "/heal"
 )
 
@@ -192,8 +192,8 @@ var serviceAccountsActionSet = ConfigurationActionSet{
 	actions:     iampolicy.NewActionSet(),
 }
 
-// clustersActionSet temporally no actions needed for clusters sections to work
-var clustersActionSet = ConfigurationActionSet{
+// tenantsActionSet temporally no actions needed for tenants sections to work
+var tenantsActionSet = ConfigurationActionSet{
 	actionTypes: iampolicy.NewActionSet(),
 	actions:     iampolicy.NewActionSet(),
 }
@@ -228,8 +228,8 @@ var endpointRules = map[string]ConfigurationActionSet{
 
 // operatorRules contains the mapping between endpoints and ActionSets for operator only mode
 var operatorRules = map[string]ConfigurationActionSet{
-	clusters:       clustersActionSet,
-	clustersDetail: clustersActionSet,
+	tenants:       tenantsActionSet,
+	tenantsDetail: tenantsActionSet,
 }
 
 // operatorOnly ENV variable

portal-ui/bindata_assetfs.go

@@ -25,6 +25,7 @@ export const units = [
   "ZiB",
   "YiB",
 ];
+export const k8sUnits = ["Ki", "Mi", "Gi", "Ti", "Pi", "Ei"];
 export const niceBytes = (x: string) => {
   let l = 0,
     n = parseInt(x, 10) || 0;
@@ -65,6 +66,13 @@ export const factorForDropdown = () => {
   });
 };
 
+// units to be used in a dropdown
+export const k8sfactorForDropdown = () => {
+  return k8sUnits.map((unit) => {
+    return { label: unit, value: unit };
+  });
+};
+
 //getBytes, converts from a value and a unit from units array to bytes
 export const getBytes = (value: string, unit: string) => {
   const vl: number = parseFloat(value);

portal-ui/src/common/utils.ts

@@ -64,10 +64,10 @@ import Trace from "./Trace/Trace";
 import Logs from "./Logs/Logs";
 import Heal from "./Heal/Heal";
 import Watch from "./Watch/Watch";
-import ListClusters from "./Clusters/ListClusters/ListClusters";
+import ListTenants from "./Tenants/ListTenants/ListTenants";
 import { ISessionResponse } from "./types";
 import { saveSessionResponse } from "./actions";
-import ClusterDetails from "./Clusters/ClusterDetails/ClusterDetails";
+import TenantDetails from "./Tenants/TenantDetails/TenantDetails";
 
 function Copyright() {
   return (
@@ -301,11 +301,11 @@ const Console = ({
       path: "/webhook/audit",
     },
     {
-      component: ListClusters,
-      path: "/clusters",
+      component: ListTenants,
+      path: "/tenants",
     },
     {
-      component: ClusterDetails,
+      component: TenantDetails,
       path: "/clusters/:clusterName",
     },
   ];

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

@@ -246,8 +246,8 @@ class Menu extends React.Component<MenuProps> {
         group: "Operator",
         type: "item",
         component: NavLink,
-        to: "/clusters",
-        name: "Clusters",
+        to: "/tenants",
+        name: "Tenants",
         icon: <StorageIcon />,
       },
       {

portal-ui/src/screens/Console/Menu.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, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import Grid from "@material-ui/core/Grid";
 import Typography from "@material-ui/core/Typography";
@@ -26,11 +26,11 @@ import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
 import { IVolumeConfiguration, IZone } from "./types";
 import CheckboxWrapper from "../../Common/FormComponents/CheckboxWrapper/CheckboxWrapper";
 import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
-import { factorForDropdown, units } from "../../../../common/utils";
+import { k8sfactorForDropdown } from "../../../../common/utils";
 import ZonesMultiSelector from "./ZonesMultiSelector";
 import { storageClasses } from "../utils";
 
-interface IAddClusterProps {
+interface IAddTenantProps {
   open: boolean;
   closeModalAndRefresh: (reloadData: boolean) => any;
   classes: any;
@@ -55,14 +55,14 @@ const styles = (theme: Theme) =>
     ...modalBasic,
   });
 
-const AddCluster = ({
+const AddTenant = ({
   open,
   closeModalAndRefresh,
   classes,
-}: IAddClusterProps) => {
+}: IAddTenantProps) => {
   const [addSending, setAddSending] = useState<boolean>(false);
   const [addError, setAddError] = useState<string>("");
-  const [clusterName, setClusterName] = useState<string>("");
+  const [tenantName, setTenantName] = useState<string>("");
   const [imageName, setImageName] = useState<string>("");
   const [serviceName, setServiceName] = useState<string>("");
   const [zones, setZones] = useState<IZone[]>([]);
@@ -75,13 +75,30 @@ const AddCluster = ({
   const [secretKey, setSecretKey] = useState<string>("");
   const [enableMCS, setEnableMCS] = useState<boolean>(false);
   const [enableSSL, setEnableSSL] = useState<boolean>(false);
-  const [sizeFactor, setSizeFactor] = useState<string>("GiB");
+  const [sizeFactor, setSizeFactor] = useState<string>("Gi");
 
   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,
+        .invoke("POST", `/api/v1/tenants`, {
+          name: tenantName,
+          service_name: tenantName,
+          enable_ssl: enableSSL,
+          enable_mcs: enableMCS,
+          access_key: accessKey,
+          secret_key: secretKey,
+          volumes_per_server: volumesPerServer,
+          volume_configuration: {
+            size: `${volumeConfiguration.size}${sizeFactor}`,
+          },
+          zones: cleanZones,
         })
         .then(() => {
           setAddSending(false);
@@ -107,7 +124,7 @@ const AddCluster = ({
 
   return (
     <ModalWrapper
-      title="Create Cluster"
+      title="Create Tenant"
       modalOpen={open}
       onClose={() => {
         setAddError("");
@@ -139,13 +156,13 @@ const AddCluster = ({
             )}
             <Grid item xs={12}>
               <InputBoxWrapper
-                id="cluster-name"
-                name="cluster-name"
+                id="tenant-name"
+                name="tenant-name"
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  setClusterName(e.target.value);
+                  setTenantName(e.target.value);
                 }}
-                label="Cluster Name"
-                value={clusterName}
+                label="Tenant Name"
+                value={tenantName}
               />
             </Grid>
             <Grid item xs={12}>
@@ -155,7 +172,7 @@ const AddCluster = ({
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                   setImageName(e.target.value);
                 }}
-                label="Image"
+                label="MinIO Image"
                 value={imageName}
               />
             </Grid>
@@ -175,7 +192,9 @@ const AddCluster = ({
                 <ZonesMultiSelector
                   label="Zones"
                   name="zones_selector"
-                  onChange={() => {}}
+                  onChange={(elements: IZone[]) => {
+                    setZones(elements);
+                  }}
                   elements={zones}
                 />
               </div>
@@ -220,7 +239,7 @@ const AddCluster = ({
                     onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
                       setSizeFactor(e.target.value as string);
                     }}
-                    options={factorForDropdown()}
+                    options={k8sfactorForDropdown()}
                   />
                 </div>
               </div>
@@ -322,4 +341,4 @@ const AddCluster = ({
   );
 };
 
-export default withStyles(styles)(AddCluster);
+export default withStyles(styles)(AddTenant);

portal-ui/src/screens/Console/Clusters/ListClusters/AddCluster.tsx renamed to portal-ui/src/screens/Console/Tenants/ListTenants/AddTenant.tsx

@@ -28,10 +28,10 @@ import Typography from "@material-ui/core/Typography";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import api from "../../../../common/api";
 
-interface IDeleteCluster {
+interface IDeleteTenant {
   classes: any;
   deleteOpen: boolean;
-  selectedCluster: string;
+  selectedTenant: string;
   closeDeleteModalAndRefresh: (refreshList: boolean) => any;
 }
 
@@ -42,27 +42,29 @@ const styles = (theme: Theme) =>
     },
   });
 
-const DeleteCluster = ({
+const DeleteTenant = ({
   classes,
   deleteOpen,
-  selectedCluster,
+  selectedTenant,
   closeDeleteModalAndRefresh,
-}: IDeleteCluster) => {
+}: IDeleteTenant) => {
   const [deleteLoading, setDeleteLoading] = useState(false);
   const [deleteError, setDeleteError] = useState("");
 
   useEffect(() => {
-    api
-      .invoke("DELETE", `/api/v1/clusters/${selectedCluster}`)
-      .then(() => {
-        setDeleteLoading(false);
-        setDeleteError("");
-        closeDeleteModalAndRefresh(true);
-      })
-      .catch((err) => {
-        setDeleteLoading(false);
-        setDeleteError(err);
-      });
+    if (deleteLoading) {
+      api
+        .invoke("DELETE", `/api/v1/clusters/${selectedTenant}`)
+        .then(() => {
+          setDeleteLoading(false);
+          setDeleteError("");
+          closeDeleteModalAndRefresh(true);
+        })
+        .catch((err) => {
+          setDeleteLoading(false);
+          setDeleteError(err);
+        });
+    }
   }, [deleteLoading]);
 
   const removeRecord = () => {
@@ -79,11 +81,11 @@ const DeleteCluster = ({
       aria-labelledby="alert-dialog-title"
       aria-describedby="alert-dialog-description"
     >
-      <DialogTitle id="alert-dialog-title">Delete Cluster</DialogTitle>
+      <DialogTitle id="alert-dialog-title">Delete Tenant</DialogTitle>
       <DialogContent>
         {deleteLoading && <LinearProgress />}
         <DialogContentText id="alert-dialog-description">
-          Are you sure you want to delete cluster <b>{selectedCluster}</b>?
+          Are you sure you want to delete tenant <b>{selectedTenant}</b>?
           {deleteError !== "" && (
             <React.Fragment>
               <br />
@@ -117,4 +119,4 @@ const DeleteCluster = ({
   );
 };
 
-export default withStyles(styles)(DeleteCluster);
+export default withStyles(styles)(DeleteTenant);