Added Clusters mockups

pkg/acl/endpoints.go

@@ -31,8 +31,10 @@ var (
 	watch           = "/watch"
 	notifications   = "/notification-endpoints"
 	buckets         = "/buckets"
-	bucketDetails   = "/buckets/:bucketName"
+	bucketsDetail   = "/buckets/:bucketName"
 	serviceAccounts = "/service-accounts"
+	clusters        = "/clusters"
+	clustersDetail  = "/clusters/:clusterName"
 )
 
 type ConfigurationActionSet struct {
@@ -181,12 +183,18 @@ var bucketsActionSet = ConfigurationActionSet{
 	),
 }
 
-// serviceAccountsActionSet contains the list of admin actions required for this endpoint to work
+// serviceAccountsActionSet no actions needed for this module to work
 var serviceAccountsActionSet = ConfigurationActionSet{
 	actionTypes: iampolicy.NewActionSet(),
 	actions:     iampolicy.NewActionSet(),
 }
 
+// clustersActionSet temporally no actions needed for clusters sections to work
+var clustersActionSet = ConfigurationActionSet{
+	actionTypes: iampolicy.NewActionSet(),
+	actions:     iampolicy.NewActionSet(),
+}
+
 // endpointRules contains the mapping between endpoints and ActionSets, additional rules can be added here
 var endpointRules = map[string]ConfigurationActionSet{
 	configuration:   configurationActionSet,
@@ -200,8 +208,10 @@ var endpointRules = map[string]ConfigurationActionSet{
 	watch:           watchActionSet,
 	notifications:   notificationsActionSet,
 	buckets:         bucketsActionSet,
-	bucketDetails:   bucketsActionSet,
+	bucketsDetail:   bucketsActionSet,
 	serviceAccounts: serviceAccountsActionSet,
+	clusters:        clustersActionSet,
+	clustersDetail:  clustersActionSet,
 }
 
 // GetActionsStringFromPolicy extract the admin/s3 actions from a given policy and return them in []string format

pkg/acl/endpoints_test.go

@@ -37,7 +37,7 @@ func TestGetAuthorizedEndpoints(t *testing.T) {
 			args: args{
 				[]string{"admin:ServerInfo"},
 			},
-			want: 2,
+			want: 4,
 		},
 		{
 			name: "policies endpoint",
@@ -50,7 +50,7 @@ func TestGetAuthorizedEndpoints(t *testing.T) {
 					"admin:ListUserPolicies",
 				},
 			},
-			want: 2,
+			want: 4,
 		},
 		{
 			name: "all admin endpoints",
@@ -59,7 +59,7 @@ func TestGetAuthorizedEndpoints(t *testing.T) {
 					"admin:*",
 				},
 			},
-			want: 10,
+			want: 12,
 		},
 		{
 			name: "all s3 endpoints",
@@ -68,7 +68,7 @@ func TestGetAuthorizedEndpoints(t *testing.T) {
 					"s3:*",
 				},
 			},
-			want: 4,
+			want: 6,
 		},
 		{
 			name: "all admin and s3 endpoints",
@@ -78,7 +78,7 @@ func TestGetAuthorizedEndpoints(t *testing.T) {
 					"s3:*",
 				},
 			},
-			want: 13,
+			want: 15,
 		},
 		{
 			name: "no endpoints",

portal-ui/src/common/utils.ts

@@ -57,3 +57,11 @@ export const timeFromDate = (d: Date) => {
 
   return `${h}:${m}:${s}:${d.getMilliseconds()}`;
 };
+
+// units to be used in a dropdown
+
+export const factorForDropdown = () => {
+  return units.map((unit) => {
+    return { label: unit, value: unit };
+  });
+};

portal-ui/src/screens/Console/Clusters/ClusterDetails/AddZoneModal.tsx

@@ -0,0 +1,157 @@
+import React, { useState } from "react";
+import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
+import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
+import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
+import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
+import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
+import Grid from "@material-ui/core/Grid";
+import { factorForDropdown } from "../../../../common/utils";
+import { Button, LinearProgress } from "@material-ui/core";
+
+interface IAddZoneProps {
+  classes: any;
+  open: boolean;
+  onCloseZoneAndReload: (shouldReload: boolean) => void;
+}
+
+const styles = (theme: Theme) =>
+  createStyles({
+    errorBlock: {
+      color: "red",
+    },
+    buttonContainer: {
+      textAlign: "right",
+    },
+    multiContainer: {
+      display: "flex",
+      alignItems: "center" as const,
+      justifyContent: "flex-start" as const,
+    },
+    sizeFactorContainer: {
+      marginLeft: 8,
+    },
+    ...modalBasic,
+  });
+
+const AddZoneModal = ({
+  classes,
+  open,
+  onCloseZoneAndReload,
+}: IAddZoneProps) => {
+  const [addSending, setAddSending] = useState<boolean>(false);
+  const [zoneName, setZoneName] = useState<string>("");
+  const [numberOfInstances, setNumberOfInstances] = useState<number>(0);
+  const [volumesPerInstance, setVolumesPerInstance] = useState<number>(0);
+  const [sizeFactor, setSizeFactor] = useState<string>("GiB");
+  const [volumeConfiguration, setVolumeConfig] = useState<string>("");
+  const [storageClass, setStorageClass] = useState<string>("");
+  return (
+    <ModalWrapper
+      onClose={() => onCloseZoneAndReload(false)}
+      modalOpen={open}
+      title="Add Zone"
+    >
+      <form
+        noValidate
+        autoComplete="off"
+        onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
+          e.preventDefault();
+          setAddSending(true);
+        }}
+      >
+        <Grid item xs={12}>
+          <InputBoxWrapper
+            id="zone_name"
+            name="zone_name"
+            type="string"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setZoneName(e.target.value);
+            }}
+            label="Name"
+            value={zoneName}
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <InputBoxWrapper
+            id="number_instances"
+            name="number_instances"
+            type="number"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setNumberOfInstances(parseInt(e.target.value));
+            }}
+            label="Volumes per Server"
+            value={numberOfInstances.toString(10)}
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <InputBoxWrapper
+            id="volumes_per_instance"
+            name="volumes_per_instance"
+            type="number"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setVolumesPerInstance(parseInt(e.target.value));
+            }}
+            label="Volumes per Instance"
+            value={volumesPerInstance.toString(10)}
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <div className={classes.multiContainer}>
+            <div>
+              <InputBoxWrapper
+                id="volume_size"
+                name="volume_size"
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  setVolumeConfig(e.target.value);
+                }}
+                label="Size"
+                value={volumeConfiguration}
+              />
+            </div>
+            <div className={classes.sizeFactorContainer}>
+              <SelectWrapper
+                label=""
+                id="size_factor"
+                name="size_factor"
+                value={sizeFactor}
+                onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
+                  setSizeFactor(e.target.value as string);
+                }}
+                options={factorForDropdown()}
+              />
+            </div>
+          </div>
+          <Grid item xs={12}>
+            <InputBoxWrapper
+              id="storage_class"
+              name="storage_class"
+              type="string"
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                setStorageClass(e.target.value);
+              }}
+              label="Volumes per Server"
+              value={storageClass}
+            />
+          </Grid>
+          <Grid item xs={12} className={classes.buttonContainer}>
+            <Button
+              type="submit"
+              variant="contained"
+              color="primary"
+              disabled={addSending}
+            >
+              Save
+            </Button>
+          </Grid>
+          {addSending && (
+            <Grid item xs={12}>
+              <LinearProgress />
+            </Grid>
+          )}
+        </Grid>
+      </form>
+    </ModalWrapper>
+  );
+};
+
+export default withStyles(styles)(AddZoneModal);