update to v0.4.3

Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>

.github/workflows/go.yml

@@ -3,10 +3,10 @@ name: Go
 on:
   pull_request:
     branches:
-    - master
+      - master
   push:
     branches:
-    - master
+      - master
 
 jobs:
   build:
@@ -14,7 +14,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        go-version: [1.13.x, 1.14.x]
+        go-version: [1.14.x]
         os: [ubuntu-latest]
     steps:
       - name: Set up Go ${{ matrix.go-version }} on ${{ matrix.os }}

README.md

@@ -101,8 +101,6 @@ Additionally, you can create policies to limit the privileges for `console` user
 To run the server:
 
 ```
-export CONSOLE_HMAC_JWT_SECRET=YOURJWTSIGNINGSECRET
-
 #required to encrypt jwet payload
 export CONSOLE_PBKDF_PASSPHRASE=SECRET
 

cmd/console/main.go

@@ -76,21 +76,19 @@ func newApp(name string) *cli.App {
 
 	findClosestCommands := func(command string) []string {
 		var closestCommands []string
-		for _, value := range commandsTree.PrefixMatch(command) {
-			closestCommands = append(closestCommands, value.(string))
-		}
+		closestCommands = append(closestCommands, commandsTree.PrefixMatch(command)...)
 
 		sort.Strings(closestCommands)
 		// Suggest other close commands - allow missed, wrongly added and
 		// even transposed characters
 		for _, value := range commandsTree.Walk(commandsTree.Root()) {
-			if sort.SearchStrings(closestCommands, value.(string)) < len(closestCommands) {
+			if sort.SearchStrings(closestCommands, value) < len(closestCommands) {
 				continue
 			}
 			// 2 is arbitrary and represents the max
 			// allowed number of typed errors
-			if words.DamerauLevenshteinDistance(command, value.(string)) < 2 {
-				closestCommands = append(closestCommands, value.(string))
+			if words.DamerauLevenshteinDistance(command, value) < 2 {
+				closestCommands = append(closestCommands, value)
 			}
 		}
 

docs/console_operator_mode.md

@@ -2,7 +2,7 @@
 
 `Console` will authenticate against `Kubernetes`using bearer tokens via HTTP `Authorization` header. The user will provide this token once
 in the login form, Console will validate it against Kubernetes (list apis) and if valid will generate and return a new Console sessions 
-with encrypted claims (the user Service account token will be inside the JWT in the data field)
+with encrypted claims (the user Service account token will be inside the session encrypted token
 
 # Kubernetes
 

go.mod

@@ -16,16 +16,17 @@ require (
 	github.com/jessevdk/go-flags v1.4.0
 	github.com/minio/cli v1.22.0
 	github.com/minio/kes v0.11.0
-	github.com/minio/mc v0.0.0-20200808005614-7e52c104bee1
-	github.com/minio/minio v0.0.0-20200808024306-2a9819aff876
-	github.com/minio/minio-go/v7 v7.0.5-0.20200807085956-d7db33ea7618
-	github.com/minio/operator v0.0.0-20200806194125-c2ff646f4af1
+	github.com/minio/mc v0.0.0-20201001165056-7f2df96e4821
+	github.com/minio/minio v0.0.0-20200927172404-27d9bd04e544
+	github.com/minio/minio-go/v7 v7.0.6-0.20200923173112-bc846cb9b089
+	github.com/minio/operator v0.0.0-20200930213302-ab2bbdfae96c
 	github.com/pquerna/cachecontrol v0.0.0-20180517163645-1555304b9b35 // indirect
+	github.com/secure-io/sio-go v0.3.1
 	github.com/stretchr/testify v1.6.1
 	github.com/unrolled/secure v1.0.7
-	golang.org/x/crypto v0.0.0-20200728195943-123391ffb6de
-	golang.org/x/net v0.0.0-20200707034311-ab3426394381
-	golang.org/x/oauth2 v0.0.0-20190604053449-0f29369cfe45
+	golang.org/x/crypto v0.0.0-20200820211705-5c72a883971a
+	golang.org/x/net v0.0.0-20200904194848-62affa334b73
+	golang.org/x/oauth2 v0.0.0-20200107190931-bf48bf16ab8d
 	gopkg.in/yaml.v2 v2.3.0
 	k8s.io/api v0.18.6
 	k8s.io/apimachinery v0.18.6

k8s/console/base/console-cluster-role.yaml

@@ -7,7 +7,6 @@ rules:
       - ""
     resources:
       - namespaces
-      - secrets
       - pods
       - services
       - events
@@ -18,6 +17,18 @@ rules:
       - create
       - list
       - patch
+  - apiGroups:
+      - ""
+    resources:
+      - secrets
+    verbs:
+      - get
+      - watch
+      - create
+      - list
+      - patch
+      - deletecollection
+      - delete
   - apiGroups:
       - "storage.k8s.io"
     resources:

k8s/console/base/console-deployment.yaml

@@ -15,7 +15,7 @@ spec:
       serviceAccountName: console-sa
       containers:
         - name: console
-          image: minio/console:v0.3.13
+          image: minio/console:v0.4.3
           imagePullPolicy: "IfNotPresent"
           args:
             - server

k8s/console/base/kustomization.yaml

@@ -8,4 +8,4 @@ resources:
   - console-configmap.yaml
   - console-service.yaml
   - console-deployment.yaml
-  - minio-operator.yaml
+  - https://github.com/minio/operator/?ref=v3.0.10

k8s/operator-console/base/console-cluster-role.yaml

@@ -14,6 +14,7 @@ rules:
       - list
       - patch
       - update
+      - deletecollection
   - apiGroups:
       - ""
     resources:
@@ -22,12 +23,21 @@ rules:
       - services
       - events
       - resourcequotas
+      - nodes
     verbs:
       - get
       - watch
       - create
       - list
       - patch
+  - apiGroups:
+      - ""
+    resources:
+      - persistentvolumeclaims
+    verbs:
+      - deletecollection
+      - list
+      - get
   - apiGroups:
       - "storage.k8s.io"
     resources:

k8s/operator-console/base/console-deployment.yaml

@@ -15,7 +15,7 @@ spec:
       serviceAccountName: console-sa
       containers:
         - name: console
-          image: minio/console:v0.3.13
+          image: minio/console:v0.4.3
           imagePullPolicy: "IfNotPresent"
           env:
             - name: CONSOLE_OPERATOR_MODE

k8s/operator-console/base/kustomization.yaml

@@ -8,4 +8,4 @@ resources:
   - console-configmap.yaml
   - console-service.yaml
   - console-deployment.yaml
-  - minio-operator.yaml
+  - https://github.com/minio/operator/?ref=v3.0.19

models/add_bucket_replication.go

@@ -0,0 +1,63 @@
+// Code generated by go-swagger; DO NOT EDIT.
+
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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/>.
+//
+
+package models
+
+// This file was generated by the swagger tool.
+// Editing this file might prove futile when you re-run the swagger generate command
+
+import (
+	"github.com/go-openapi/strfmt"
+	"github.com/go-openapi/swag"
+)
+
+// AddBucketReplication add bucket replication
+//
+// swagger:model addBucketReplication
+type AddBucketReplication struct {
+
+	// arn
+	Arn string `json:"arn,omitempty"`
+
+	// destination bucket
+	DestinationBucket string `json:"destination_bucket,omitempty"`
+}
+
+// Validate validates this add bucket replication
+func (m *AddBucketReplication) Validate(formats strfmt.Registry) error {
+	return nil
+}
+
+// MarshalBinary interface implementation
+func (m *AddBucketReplication) MarshalBinary() ([]byte, error) {
+	if m == nil {
+		return nil, nil
+	}
+	return swag.WriteJSON(m)
+}
+
+// UnmarshalBinary interface implementation
+func (m *AddBucketReplication) UnmarshalBinary(b []byte) error {
+	var res AddBucketReplication
+	if err := swag.ReadJSON(b, &res); err != nil {
+		return err
+	}
+	*m = res
+	return nil
+}

models/bucket_object.go

@@ -0,0 +1,96 @@
+// Code generated by go-swagger; DO NOT EDIT.
+
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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/>.
+//
+
+package models
+
+// This file was generated by the swagger tool.
+// Editing this file might prove futile when you re-run the swagger generate command
+
+import (
+	"github.com/go-openapi/strfmt"
+	"github.com/go-openapi/swag"
+)
+
+// BucketObject bucket object
+//
+// swagger:model bucketObject
+type BucketObject struct {
+
+	// content type
+	ContentType string `json:"content_type,omitempty"`
+
+	// expiration
+	Expiration string `json:"expiration,omitempty"`
+
+	// expiration rule id
+	ExpirationRuleID string `json:"expiration_rule_id,omitempty"`
+
+	// is delete marker
+	IsDeleteMarker bool `json:"is_delete_marker,omitempty"`
+
+	// is latest
+	IsLatest bool `json:"is_latest,omitempty"`
+
+	// last modified
+	LastModified string `json:"last_modified,omitempty"`
+
+	// legal hold status
+	LegalHoldStatus string `json:"legal_hold_status,omitempty"`
+
+	// name
+	Name string `json:"name,omitempty"`
+
+	// retention mode
+	RetentionMode string `json:"retention_mode,omitempty"`
+
+	// retention until date
+	RetentionUntilDate string `json:"retention_until_date,omitempty"`
+
+	// size
+	Size int64 `json:"size,omitempty"`
+
+	// user tags
+	UserTags map[string]string `json:"user_tags,omitempty"`
+
+	// version id
+	VersionID string `json:"version_id,omitempty"`
+}
+
+// Validate validates this bucket object
+func (m *BucketObject) Validate(formats strfmt.Registry) error {
+	return nil
+}
+
+// MarshalBinary interface implementation
+func (m *BucketObject) MarshalBinary() ([]byte, error) {
+	if m == nil {
+		return nil, nil
+	}
+	return swag.WriteJSON(m)
+}
+
+// UnmarshalBinary interface implementation
+func (m *BucketObject) UnmarshalBinary(b []byte) error {
+	var res BucketObject
+	if err := swag.ReadJSON(b, &res); err != nil {
+		return err
+	}
+	*m = res
+	return nil
+}

models/bucket_replication_destination.go

@@ -0,0 +1,60 @@
+// Code generated by go-swagger; DO NOT EDIT.
+
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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/>.
+//
+
+package models
+
+// This file was generated by the swagger tool.
+// Editing this file might prove futile when you re-run the swagger generate command
+
+import (
+	"github.com/go-openapi/strfmt"
+	"github.com/go-openapi/swag"
+)
+
+// BucketReplicationDestination bucket replication destination
+//
+// swagger:model bucketReplicationDestination
+type BucketReplicationDestination struct {
+
+	// bucket
+	Bucket string `json:"bucket,omitempty"`
+}
+
+// Validate validates this bucket replication destination
+func (m *BucketReplicationDestination) Validate(formats strfmt.Registry) error {
+	return nil
+}
+
+// MarshalBinary interface implementation
+func (m *BucketReplicationDestination) MarshalBinary() ([]byte, error) {
+	if m == nil {
+		return nil, nil
+	}
+	return swag.WriteJSON(m)
+}
+
+// UnmarshalBinary interface implementation
+func (m *BucketReplicationDestination) UnmarshalBinary(b []byte) error {
+	var res BucketReplicationDestination
+	if err := swag.ReadJSON(b, &res); err != nil {
+		return err
+	}
+	*m = res
+	return nil
+}

models/bucket_replication_response.go

@@ -0,0 +1,97 @@
+// Code generated by go-swagger; DO NOT EDIT.
+
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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/>.
+//
+
+package models
+
+// This file was generated by the swagger tool.
+// Editing this file might prove futile when you re-run the swagger generate command
+
+import (
+	"strconv"
+
+	"github.com/go-openapi/errors"
+	"github.com/go-openapi/strfmt"
+	"github.com/go-openapi/swag"
+)
+
+// BucketReplicationResponse bucket replication response
+//
+// swagger:model bucketReplicationResponse
+type BucketReplicationResponse struct {
+
+	// rules
+	Rules []*BucketReplicationRule `json:"rules"`
+}
+
+// Validate validates this bucket replication response
+func (m *BucketReplicationResponse) Validate(formats strfmt.Registry) error {
+	var res []error
+
+	if err := m.validateRules(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if len(res) > 0 {
+		return errors.CompositeValidationError(res...)
+	}
+	return nil
+}
+
+func (m *BucketReplicationResponse) validateRules(formats strfmt.Registry) error {
+
+	if swag.IsZero(m.Rules) { // not required
+		return nil
+	}
+
+	for i := 0; i < len(m.Rules); i++ {
+		if swag.IsZero(m.Rules[i]) { // not required
+			continue
+		}
+
+		if m.Rules[i] != nil {
+			if err := m.Rules[i].Validate(formats); err != nil {
+				if ve, ok := err.(*errors.Validation); ok {
+					return ve.ValidateName("rules" + "." + strconv.Itoa(i))
+				}
+				return err
+			}
+		}
+
+	}
+
+	return nil
+}
+
+// MarshalBinary interface implementation
+func (m *BucketReplicationResponse) MarshalBinary() ([]byte, error) {
+	if m == nil {
+		return nil, nil
+	}
+	return swag.WriteJSON(m)
+}
+
+// UnmarshalBinary interface implementation
+func (m *BucketReplicationResponse) UnmarshalBinary(b []byte) error {
+	var res BucketReplicationResponse
+	if err := swag.ReadJSON(b, &res); err != nil {
+		return err
+	}
+	*m = res
+	return nil
+}

models/bucket_replication_rule.go

@@ -0,0 +1,173 @@
+// Code generated by go-swagger; DO NOT EDIT.
+
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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/>.
+//
+
+package models
+
+// This file was generated by the swagger tool.
+// Editing this file might prove futile when you re-run the swagger generate command
+
+import (
+	"encoding/json"
+
+	"github.com/go-openapi/errors"
+	"github.com/go-openapi/strfmt"
+	"github.com/go-openapi/swag"
+	"github.com/go-openapi/validate"
+)
+
+// BucketReplicationRule bucket replication rule
+//
+// swagger:model bucketReplicationRule
+type BucketReplicationRule struct {
+
+	// delete marker replication
+	DeleteMarkerReplication *BucketReplicationRuleMarker `json:"delete_marker_replication,omitempty"`
+
+	// destination
+	Destination *BucketReplicationDestination `json:"destination,omitempty"`
+
+	// id
+	ID string `json:"id,omitempty"`
+
+	// priority
+	Priority int32 `json:"priority,omitempty"`
+
+	// status
+	// Enum: [Enabled Disabled]
+	Status string `json:"status,omitempty"`
+}
+
+// Validate validates this bucket replication rule
+func (m *BucketReplicationRule) Validate(formats strfmt.Registry) error {
+	var res []error
+
+	if err := m.validateDeleteMarkerReplication(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if err := m.validateDestination(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if err := m.validateStatus(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if len(res) > 0 {
+		return errors.CompositeValidationError(res...)
+	}
+	return nil
+}
+
+func (m *BucketReplicationRule) validateDeleteMarkerReplication(formats strfmt.Registry) error {
+
+	if swag.IsZero(m.DeleteMarkerReplication) { // not required
+		return nil
+	}
+
+	if m.DeleteMarkerReplication != nil {
+		if err := m.DeleteMarkerReplication.Validate(formats); err != nil {
+			if ve, ok := err.(*errors.Validation); ok {
+				return ve.ValidateName("delete_marker_replication")
+			}
+			return err
+		}
+	}
+
+	return nil
+}
+
+func (m *BucketReplicationRule) validateDestination(formats strfmt.Registry) error {
+
+	if swag.IsZero(m.Destination) { // not required
+		return nil
+	}
+
+	if m.Destination != nil {
+		if err := m.Destination.Validate(formats); err != nil {
+			if ve, ok := err.(*errors.Validation); ok {
+				return ve.ValidateName("destination")
+			}
+			return err
+		}
+	}
+
+	return nil
+}
+
+var bucketReplicationRuleTypeStatusPropEnum []interface{}
+
+func init() {
+	var res []string
+	if err := json.Unmarshal([]byte(`["Enabled","Disabled"]`), &res); err != nil {
+		panic(err)
+	}
+	for _, v := range res {
+		bucketReplicationRuleTypeStatusPropEnum = append(bucketReplicationRuleTypeStatusPropEnum, v)
+	}
+}
+
+const (
+
+	// BucketReplicationRuleStatusEnabled captures enum value "Enabled"
+	BucketReplicationRuleStatusEnabled string = "Enabled"
+
+	// BucketReplicationRuleStatusDisabled captures enum value "Disabled"
+	BucketReplicationRuleStatusDisabled string = "Disabled"
+)
+
+// prop value enum
+func (m *BucketReplicationRule) validateStatusEnum(path, location string, value string) error {
+	if err := validate.EnumCase(path, location, value, bucketReplicationRuleTypeStatusPropEnum, true); err != nil {
+		return err
+	}
+	return nil
+}
+
+func (m *BucketReplicationRule) validateStatus(formats strfmt.Registry) error {
+
+	if swag.IsZero(m.Status) { // not required
+		return nil
+	}
+
+	// value enum
+	if err := m.validateStatusEnum("status", "body", m.Status); err != nil {
+		return err
+	}
+
+	return nil
+}
+
+// MarshalBinary interface implementation
+func (m *BucketReplicationRule) MarshalBinary() ([]byte, error) {
+	if m == nil {
+		return nil, nil
+	}
+	return swag.WriteJSON(m)
+}
+
+// UnmarshalBinary interface implementation
+func (m *BucketReplicationRule) UnmarshalBinary(b []byte) error {
+	var res BucketReplicationRule
+	if err := swag.ReadJSON(b, &res); err != nil {
+		return err
+	}
+	*m = res
+	return nil
+}

models/bucket_replication_rule_marker.go

@@ -0,0 +1,117 @@
+// Code generated by go-swagger; DO NOT EDIT.
+
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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/>.
+//
+
+package models
+
+// This file was generated by the swagger tool.
+// Editing this file might prove futile when you re-run the swagger generate command
+
+import (
+	"encoding/json"
+
+	"github.com/go-openapi/errors"
+	"github.com/go-openapi/strfmt"
+	"github.com/go-openapi/swag"
+	"github.com/go-openapi/validate"
+)
+
+// BucketReplicationRuleMarker bucket replication rule marker
+//
+// swagger:model bucketReplicationRuleMarker
+type BucketReplicationRuleMarker struct {
+
+	// status
+	// Enum: [Enabled Disabled]
+	Status string `json:"status,omitempty"`
+}
+
+// Validate validates this bucket replication rule marker
+func (m *BucketReplicationRuleMarker) Validate(formats strfmt.Registry) error {
+	var res []error
+
+	if err := m.validateStatus(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if len(res) > 0 {
+		return errors.CompositeValidationError(res...)
+	}
+	return nil
+}
+
+var bucketReplicationRuleMarkerTypeStatusPropEnum []interface{}
+
+func init() {
+	var res []string
+	if err := json.Unmarshal([]byte(`["Enabled","Disabled"]`), &res); err != nil {
+		panic(err)
+	}
+	for _, v := range res {
+		bucketReplicationRuleMarkerTypeStatusPropEnum = append(bucketReplicationRuleMarkerTypeStatusPropEnum, v)
+	}
+}
+
+const (
+
+	// BucketReplicationRuleMarkerStatusEnabled captures enum value "Enabled"
+	BucketReplicationRuleMarkerStatusEnabled string = "Enabled"
+
+	// BucketReplicationRuleMarkerStatusDisabled captures enum value "Disabled"
+	BucketReplicationRuleMarkerStatusDisabled string = "Disabled"
+)
+
+// prop value enum
+func (m *BucketReplicationRuleMarker) validateStatusEnum(path, location string, value string) error {
+	if err := validate.EnumCase(path, location, value, bucketReplicationRuleMarkerTypeStatusPropEnum, true); err != nil {
+		return err
+	}
+	return nil
+}
+
+func (m *BucketReplicationRuleMarker) validateStatus(formats strfmt.Registry) error {
+
+	if swag.IsZero(m.Status) { // not required
+		return nil
+	}
+
+	// value enum
+	if err := m.validateStatusEnum("status", "body", m.Status); err != nil {
+		return err
+	}
+
+	return nil
+}
+
+// MarshalBinary interface implementation
+func (m *BucketReplicationRuleMarker) MarshalBinary() ([]byte, error) {
+	if m == nil {
+		return nil, nil
+	}
+	return swag.WriteJSON(m)
+}
+
+// UnmarshalBinary interface implementation
+func (m *BucketReplicationRuleMarker) UnmarshalBinary(b []byte) error {
+	var res BucketReplicationRuleMarker
+	if err := swag.ReadJSON(b, &res); err != nil {
+		return err
+	}
+	*m = res
+	return nil
+}

models/bucket_versioning_response.go

@@ -0,0 +1,60 @@
+// Code generated by go-swagger; DO NOT EDIT.
+
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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/>.
+//
+
+package models
+
+// This file was generated by the swagger tool.
+// Editing this file might prove futile when you re-run the swagger generate command
+
+import (
+	"github.com/go-openapi/strfmt"
+	"github.com/go-openapi/swag"
+)
+
+// BucketVersioningResponse bucket versioning response
+//
+// swagger:model bucketVersioningResponse
+type BucketVersioningResponse struct {
+
+	// is versioned
+	IsVersioned bool `json:"is_versioned,omitempty"`
+}
+
+// Validate validates this bucket versioning response
+func (m *BucketVersioningResponse) Validate(formats strfmt.Registry) error {
+	return nil
+}
+
+// MarshalBinary interface implementation
+func (m *BucketVersioningResponse) MarshalBinary() ([]byte, error) {
+	if m == nil {
+		return nil, nil
+	}
+	return swag.WriteJSON(m)
+}
+
+// UnmarshalBinary interface implementation
+func (m *BucketVersioningResponse) UnmarshalBinary(b []byte) error {
+	var res BucketVersioningResponse
+	if err := swag.ReadJSON(b, &res); err != nil {
+		return err
+	}
+	*m = res
+	return nil
+}

models/console_configuration.go

@@ -0,0 +1,117 @@
+// Code generated by go-swagger; DO NOT EDIT.
+
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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/>.
+//
+
+package models
+
+// This file was generated by the swagger tool.
+// Editing this file might prove futile when you re-run the swagger generate command
+
+import (
+	"github.com/go-openapi/errors"
+	"github.com/go-openapi/strfmt"
+	"github.com/go-openapi/swag"
+)
+
+// ConsoleConfiguration console configuration
+//
+// swagger:model consoleConfiguration
+type ConsoleConfiguration struct {
+	MetadataFields
+
+	// image
+	Image string `json:"image,omitempty"`
+}
+
+// UnmarshalJSON unmarshals this object from a JSON structure
+func (m *ConsoleConfiguration) UnmarshalJSON(raw []byte) error {
+	// AO0
+	var aO0 MetadataFields
+	if err := swag.ReadJSON(raw, &aO0); err != nil {
+		return err
+	}
+	m.MetadataFields = aO0
+
+	// AO1
+	var dataAO1 struct {
+		Image string `json:"image,omitempty"`
+	}
+	if err := swag.ReadJSON(raw, &dataAO1); err != nil {
+		return err
+	}
+
+	m.Image = dataAO1.Image
+
+	return nil
+}
+
+// MarshalJSON marshals this object to a JSON structure
+func (m ConsoleConfiguration) MarshalJSON() ([]byte, error) {
+	_parts := make([][]byte, 0, 2)
+
+	aO0, err := swag.WriteJSON(m.MetadataFields)
+	if err != nil {
+		return nil, err
+	}
+	_parts = append(_parts, aO0)
+	var dataAO1 struct {
+		Image string `json:"image,omitempty"`
+	}
+
+	dataAO1.Image = m.Image
+
+	jsonDataAO1, errAO1 := swag.WriteJSON(dataAO1)
+	if errAO1 != nil {
+		return nil, errAO1
+	}
+	_parts = append(_parts, jsonDataAO1)
+	return swag.ConcatJSON(_parts...), nil
+}
+
+// Validate validates this console configuration
+func (m *ConsoleConfiguration) Validate(formats strfmt.Registry) error {
+	var res []error
+
+	// validation for a type composition with MetadataFields
+	if err := m.MetadataFields.Validate(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if len(res) > 0 {
+		return errors.CompositeValidationError(res...)
+	}
+	return nil
+}
+
+// MarshalBinary interface implementation
+func (m *ConsoleConfiguration) MarshalBinary() ([]byte, error) {
+	if m == nil {
+		return nil, nil
+	}
+	return swag.WriteJSON(m)
+}
+
+// UnmarshalBinary interface implementation
+func (m *ConsoleConfiguration) UnmarshalBinary(b []byte) error {
+	var res ConsoleConfiguration
+	if err := swag.ReadJSON(b, &res); err != nil {
+		return err
+	}
+	*m = res
+	return nil
+}

models/create_remote_bucket.go

@@ -0,0 +1,162 @@
+// Code generated by go-swagger; DO NOT EDIT.
+
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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/>.
+//
+
+package models
+
+// This file was generated by the swagger tool.
+// Editing this file might prove futile when you re-run the swagger generate command
+
+import (
+	"github.com/go-openapi/errors"
+	"github.com/go-openapi/strfmt"
+	"github.com/go-openapi/swag"
+	"github.com/go-openapi/validate"
+)
+
+// CreateRemoteBucket create remote bucket
+//
+// swagger:model createRemoteBucket
+type CreateRemoteBucket struct {
+
+	// access key
+	// Required: true
+	// Min Length: 3
+	AccessKey *string `json:"accessKey"`
+
+	// region
+	Region string `json:"region,omitempty"`
+
+	// secret key
+	// Required: true
+	// Min Length: 8
+	SecretKey *string `json:"secretKey"`
+
+	// source bucket
+	// Required: true
+	SourceBucket *string `json:"sourceBucket"`
+
+	// target bucket
+	// Required: true
+	TargetBucket *string `json:"targetBucket"`
+
+	// target URL
+	// Required: true
+	TargetURL *string `json:"targetURL"`
+}
+
+// Validate validates this create remote bucket
+func (m *CreateRemoteBucket) Validate(formats strfmt.Registry) error {
+	var res []error
+
+	if err := m.validateAccessKey(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if err := m.validateSecretKey(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if err := m.validateSourceBucket(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if err := m.validateTargetBucket(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if err := m.validateTargetURL(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if len(res) > 0 {
+		return errors.CompositeValidationError(res...)
+	}
+	return nil
+}
+
+func (m *CreateRemoteBucket) validateAccessKey(formats strfmt.Registry) error {
+
+	if err := validate.Required("accessKey", "body", m.AccessKey); err != nil {
+		return err
+	}
+
+	if err := validate.MinLength("accessKey", "body", string(*m.AccessKey), 3); err != nil {
+		return err
+	}
+
+	return nil
+}
+
+func (m *CreateRemoteBucket) validateSecretKey(formats strfmt.Registry) error {
+
+	if err := validate.Required("secretKey", "body", m.SecretKey); err != nil {
+		return err
+	}
+
+	if err := validate.MinLength("secretKey", "body", string(*m.SecretKey), 8); err != nil {
+		return err
+	}
+
+	return nil
+}
+
+func (m *CreateRemoteBucket) validateSourceBucket(formats strfmt.Registry) error {
+
+	if err := validate.Required("sourceBucket", "body", m.SourceBucket); err != nil {
+		return err
+	}
+
+	return nil
+}
+
+func (m *CreateRemoteBucket) validateTargetBucket(formats strfmt.Registry) error {
+
+	if err := validate.Required("targetBucket", "body", m.TargetBucket); err != nil {
+		return err
+	}
+
+	return nil
+}
+
+func (m *CreateRemoteBucket) validateTargetURL(formats strfmt.Registry) error {
+
+	if err := validate.Required("targetURL", "body", m.TargetURL); err != nil {
+		return err
+	}
+
+	return nil
+}
+
+// MarshalBinary interface implementation
+func (m *CreateRemoteBucket) MarshalBinary() ([]byte, error) {
+	if m == nil {
+		return nil, nil
+	}
+	return swag.WriteJSON(m)
+}
+
+// UnmarshalBinary interface implementation
+func (m *CreateRemoteBucket) UnmarshalBinary(b []byte) error {
+	var res CreateRemoteBucket
+	if err := swag.ReadJSON(b, &res); err != nil {
+		return err
+	}
+	*m = res
+	return nil
+}

models/create_tenant_request.go

@@ -42,12 +42,18 @@ type CreateTenantRequest struct {
 	// annotations
 	Annotations map[string]string `json:"annotations,omitempty"`
 
+	// console
+	Console *ConsoleConfiguration `json:"console,omitempty"`
+
 	// console image
 	ConsoleImage string `json:"console_image,omitempty"`
 
 	// enable console
 	EnableConsole *bool `json:"enable_console,omitempty"`
 
+	// enable prometheus
+	EnablePrometheus *bool `json:"enable_prometheus,omitempty"`
+
 	// enable tls
 	EnableTLS *bool `json:"enable_tls,omitempty"`
 
@@ -69,6 +75,9 @@ type CreateTenantRequest struct {
 	// image registry
 	ImageRegistry *ImageRegistry `json:"image_registry,omitempty"`
 
+	// labels
+	Labels map[string]string `json:"labels,omitempty"`
+
 	// mounth path
 	MounthPath string `json:"mounth_path,omitempty"`
 
@@ -99,6 +108,10 @@ type CreateTenantRequest struct {
 func (m *CreateTenantRequest) Validate(formats strfmt.Registry) error {
 	var res []error
 
+	if err := m.validateConsole(formats); err != nil {
+		res = append(res, err)
+	}
+
 	if err := m.validateEncryption(formats); err != nil {
 		res = append(res, err)
 	}
@@ -133,6 +146,24 @@ func (m *CreateTenantRequest) Validate(formats strfmt.Registry) error {
 	return nil
 }
 
+func (m *CreateTenantRequest) validateConsole(formats strfmt.Registry) error {
+
+	if swag.IsZero(m.Console) { // not required
+		return nil
+	}
+
+	if m.Console != nil {
+		if err := m.Console.Validate(formats); err != nil {
+			if ve, ok := err.(*errors.Validation); ok {
+				return ve.ValidateName("console")
+			}
+			return err
+		}
+	}
+
+	return nil
+}
+
 func (m *CreateTenantRequest) validateEncryption(formats strfmt.Registry) error {
 
 	if swag.IsZero(m.Encryption) { // not required

models/delete_tenant_request.go

@@ -0,0 +1,60 @@
+// Code generated by go-swagger; DO NOT EDIT.
+
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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/>.
+//
+
+package models
+
+// This file was generated by the swagger tool.
+// Editing this file might prove futile when you re-run the swagger generate command
+
+import (
+	"github.com/go-openapi/strfmt"
+	"github.com/go-openapi/swag"
+)
+
+// DeleteTenantRequest delete tenant request
+//
+// swagger:model deleteTenantRequest
+type DeleteTenantRequest struct {
+
+	// delete pvcs
+	DeletePvcs bool `json:"delete_pvcs,omitempty"`
+}
+
+// Validate validates this delete tenant request
+func (m *DeleteTenantRequest) Validate(formats strfmt.Registry) error {
+	return nil
+}
+
+// MarshalBinary interface implementation
+func (m *DeleteTenantRequest) MarshalBinary() ([]byte, error) {
+	if m == nil {
+		return nil, nil
+	}
+	return swag.WriteJSON(m)
+}
+
+// UnmarshalBinary interface implementation
+func (m *DeleteTenantRequest) UnmarshalBinary(b []byte) error {
+	var res DeleteTenantRequest
+	if err := swag.ReadJSON(b, &res); err != nil {
+		return err
+	}
+	*m = res
+	return nil
+}

models/encryption_configuration.go

@@ -32,6 +32,7 @@ import (
 //
 // swagger:model encryptionConfiguration
 type EncryptionConfiguration struct {
+	MetadataFields
 
 	// aws
 	Aws *AwsConfiguration `json:"aws,omitempty"`
@@ -52,10 +53,100 @@ type EncryptionConfiguration struct {
 	Vault *VaultConfiguration `json:"vault,omitempty"`
 }
 
+// UnmarshalJSON unmarshals this object from a JSON structure
+func (m *EncryptionConfiguration) UnmarshalJSON(raw []byte) error {
+	// AO0
+	var aO0 MetadataFields
+	if err := swag.ReadJSON(raw, &aO0); err != nil {
+		return err
+	}
+	m.MetadataFields = aO0
+
+	// AO1
+	var dataAO1 struct {
+		Aws *AwsConfiguration `json:"aws,omitempty"`
+
+		Client *KeyPairConfiguration `json:"client,omitempty"`
+
+		Gemalto *GemaltoConfiguration `json:"gemalto,omitempty"`
+
+		Image string `json:"image,omitempty"`
+
+		Server *KeyPairConfiguration `json:"server,omitempty"`
+
+		Vault *VaultConfiguration `json:"vault,omitempty"`
+	}
+	if err := swag.ReadJSON(raw, &dataAO1); err != nil {
+		return err
+	}
+
+	m.Aws = dataAO1.Aws
+
+	m.Client = dataAO1.Client
+
+	m.Gemalto = dataAO1.Gemalto
+
+	m.Image = dataAO1.Image
+
+	m.Server = dataAO1.Server
+
+	m.Vault = dataAO1.Vault
+
+	return nil
+}
+
+// MarshalJSON marshals this object to a JSON structure
+func (m EncryptionConfiguration) MarshalJSON() ([]byte, error) {
+	_parts := make([][]byte, 0, 2)
+
+	aO0, err := swag.WriteJSON(m.MetadataFields)
+	if err != nil {
+		return nil, err
+	}
+	_parts = append(_parts, aO0)
+	var dataAO1 struct {
+		Aws *AwsConfiguration `json:"aws,omitempty"`
+
+		Client *KeyPairConfiguration `json:"client,omitempty"`
+
+		Gemalto *GemaltoConfiguration `json:"gemalto,omitempty"`
+
+		Image string `json:"image,omitempty"`
+
+		Server *KeyPairConfiguration `json:"server,omitempty"`
+
+		Vault *VaultConfiguration `json:"vault,omitempty"`
+	}
+
+	dataAO1.Aws = m.Aws
+
+	dataAO1.Client = m.Client
+
+	dataAO1.Gemalto = m.Gemalto
+
+	dataAO1.Image = m.Image
+
+	dataAO1.Server = m.Server
+
+	dataAO1.Vault = m.Vault
+
+	jsonDataAO1, errAO1 := swag.WriteJSON(dataAO1)
+	if errAO1 != nil {
+		return nil, errAO1
+	}
+	_parts = append(_parts, jsonDataAO1)
+	return swag.ConcatJSON(_parts...), nil
+}
+
 // Validate validates this encryption configuration
 func (m *EncryptionConfiguration) Validate(formats strfmt.Registry) error {
 	var res []error
 
+	// validation for a type composition with MetadataFields
+	if err := m.MetadataFields.Validate(formats); err != nil {
+		res = append(res, err)
+	}
+
 	if err := m.validateAws(formats); err != nil {
 		res = append(res, err)
 	}

models/error.go

@@ -35,7 +35,7 @@ import (
 type Error struct {
 
 	// code
-	Code int64 `json:"code,omitempty"`
+	Code int32 `json:"code,omitempty"`
 
 	// message
 	// Required: true

models/list_objects_response.go

@@ -0,0 +1,100 @@
+// Code generated by go-swagger; DO NOT EDIT.
+
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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/>.
+//
+
+package models
+
+// This file was generated by the swagger tool.
+// Editing this file might prove futile when you re-run the swagger generate command
+
+import (
+	"strconv"
+
+	"github.com/go-openapi/errors"
+	"github.com/go-openapi/strfmt"
+	"github.com/go-openapi/swag"
+)
+
+// ListObjectsResponse list objects response
+//
+// swagger:model listObjectsResponse
+type ListObjectsResponse struct {
+
+	// list of resulting objects
+	Objects []*BucketObject `json:"objects"`
+
+	// number of objects
+	Total int64 `json:"total,omitempty"`
+}
+
+// Validate validates this list objects response
+func (m *ListObjectsResponse) Validate(formats strfmt.Registry) error {
+	var res []error
+
+	if err := m.validateObjects(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if len(res) > 0 {
+		return errors.CompositeValidationError(res...)
+	}
+	return nil
+}
+
+func (m *ListObjectsResponse) validateObjects(formats strfmt.Registry) error {
+
+	if swag.IsZero(m.Objects) { // not required
+		return nil
+	}
+
+	for i := 0; i < len(m.Objects); i++ {
+		if swag.IsZero(m.Objects[i]) { // not required
+			continue
+		}
+
+		if m.Objects[i] != nil {
+			if err := m.Objects[i].Validate(formats); err != nil {
+				if ve, ok := err.(*errors.Validation); ok {
+					return ve.ValidateName("objects" + "." + strconv.Itoa(i))
+				}
+				return err
+			}
+		}
+
+	}
+
+	return nil
+}
+
+// MarshalBinary interface implementation
+func (m *ListObjectsResponse) MarshalBinary() ([]byte, error) {
+	if m == nil {
+		return nil, nil
+	}
+	return swag.WriteJSON(m)
+}
+
+// UnmarshalBinary interface implementation
+func (m *ListObjectsResponse) UnmarshalBinary(b []byte) error {
+	var res ListObjectsResponse
+	if err := swag.ReadJSON(b, &res); err != nil {
+		return err
+	}
+	*m = res
+	return nil
+}

models/list_remote_buckets_response.go

@@ -0,0 +1,100 @@
+// Code generated by go-swagger; DO NOT EDIT.
+
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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/>.
+//
+
+package models
+
+// This file was generated by the swagger tool.
+// Editing this file might prove futile when you re-run the swagger generate command
+
+import (
+	"strconv"
+
+	"github.com/go-openapi/errors"
+	"github.com/go-openapi/strfmt"
+	"github.com/go-openapi/swag"
+)
+
+// ListRemoteBucketsResponse list remote buckets response
+//
+// swagger:model listRemoteBucketsResponse
+type ListRemoteBucketsResponse struct {
+
+	// list of remote buckets
+	Buckets []*RemoteBucket `json:"buckets"`
+
+	// number of remote buckets accessible to user
+	Total int64 `json:"total,omitempty"`
+}
+
+// Validate validates this list remote buckets response
+func (m *ListRemoteBucketsResponse) Validate(formats strfmt.Registry) error {
+	var res []error
+
+	if err := m.validateBuckets(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if len(res) > 0 {
+		return errors.CompositeValidationError(res...)
+	}
+	return nil
+}
+
+func (m *ListRemoteBucketsResponse) validateBuckets(formats strfmt.Registry) error {
+
+	if swag.IsZero(m.Buckets) { // not required
+		return nil
+	}
+
+	for i := 0; i < len(m.Buckets); i++ {
+		if swag.IsZero(m.Buckets[i]) { // not required
+			continue
+		}
+
+		if m.Buckets[i] != nil {
+			if err := m.Buckets[i].Validate(formats); err != nil {
+				if ve, ok := err.(*errors.Validation); ok {
+					return ve.ValidateName("buckets" + "." + strconv.Itoa(i))
+				}
+				return err
+			}
+		}
+
+	}
+
+	return nil
+}
+
+// MarshalBinary interface implementation
+func (m *ListRemoteBucketsResponse) MarshalBinary() ([]byte, error) {
+	if m == nil {
+		return nil, nil
+	}
+	return swag.WriteJSON(m)
+}
+
+// UnmarshalBinary interface implementation
+func (m *ListRemoteBucketsResponse) UnmarshalBinary(b []byte) error {
+	var res ListRemoteBucketsResponse
+	if err := swag.ReadJSON(b, &res); err != nil {
+		return err
+	}
+	*m = res
+	return nil
+}

models/make_bucket_request.go

@@ -37,6 +37,12 @@ type MakeBucketRequest struct {
 	// name
 	// Required: true
 	Name *string `json:"name"`
+
+	// quota
+	Quota *SetBucketQuota `json:"quota,omitempty"`
+
+	// versioning
+	Versioning bool `json:"versioning,omitempty"`
 }
 
 // Validate validates this make bucket request
@@ -47,6 +53,10 @@ func (m *MakeBucketRequest) Validate(formats strfmt.Registry) error {
 		res = append(res, err)
 	}
 
+	if err := m.validateQuota(formats); err != nil {
+		res = append(res, err)
+	}
+
 	if len(res) > 0 {
 		return errors.CompositeValidationError(res...)
 	}
@@ -62,6 +72,24 @@ func (m *MakeBucketRequest) validateName(formats strfmt.Registry) error {
 	return nil
 }
 
+func (m *MakeBucketRequest) validateQuota(formats strfmt.Registry) error {
+
+	if swag.IsZero(m.Quota) { // not required
+		return nil
+	}
+
+	if m.Quota != nil {
+		if err := m.Quota.Validate(formats); err != nil {
+			if ve, ok := err.(*errors.Validation); ok {
+				return ve.ValidateName("quota")
+			}
+			return err
+		}
+	}
+
+	return nil
+}
+
 // MarshalBinary interface implementation
 func (m *MakeBucketRequest) MarshalBinary() ([]byte, error) {
 	if m == nil {

models/max_allocatable_mem_response.go

@@ -0,0 +1,60 @@
+// Code generated by go-swagger; DO NOT EDIT.
+
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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/>.
+//
+
+package models
+
+// This file was generated by the swagger tool.
+// Editing this file might prove futile when you re-run the swagger generate command
+
+import (
+	"github.com/go-openapi/strfmt"
+	"github.com/go-openapi/swag"
+)
+
+// MaxAllocatableMemResponse max allocatable mem response
+//
+// swagger:model maxAllocatableMemResponse
+type MaxAllocatableMemResponse struct {
+
+	// max memory
+	MaxMemory int64 `json:"max_memory,omitempty"`
+}
+
+// Validate validates this max allocatable mem response
+func (m *MaxAllocatableMemResponse) Validate(formats strfmt.Registry) error {
+	return nil
+}
+
+// MarshalBinary interface implementation
+func (m *MaxAllocatableMemResponse) MarshalBinary() ([]byte, error) {
+	if m == nil {
+		return nil, nil
+	}
+	return swag.WriteJSON(m)
+}
+
+// UnmarshalBinary interface implementation
+func (m *MaxAllocatableMemResponse) UnmarshalBinary(b []byte) error {
+	var res MaxAllocatableMemResponse
+	if err := swag.ReadJSON(b, &res); err != nil {
+		return err
+	}
+	*m = res
+	return nil
+}

models/metadata_fields.go

@@ -0,0 +1,66 @@
+// Code generated by go-swagger; DO NOT EDIT.
+
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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/>.
+//
+
+package models
+
+// This file was generated by the swagger tool.
+// Editing this file might prove futile when you re-run the swagger generate command
+
+import (
+	"github.com/go-openapi/strfmt"
+	"github.com/go-openapi/swag"
+)
+
+// MetadataFields metadata fields
+//
+// swagger:model metadataFields
+type MetadataFields struct {
+
+	// annotations
+	Annotations map[string]string `json:"annotations,omitempty"`
+
+	// labels
+	Labels map[string]string `json:"labels,omitempty"`
+
+	// node selector
+	NodeSelector map[string]string `json:"node_selector,omitempty"`
+}
+
+// Validate validates this metadata fields
+func (m *MetadataFields) Validate(formats strfmt.Registry) error {
+	return nil
+}
+
+// MarshalBinary interface implementation
+func (m *MetadataFields) MarshalBinary() ([]byte, error) {
+	if m == nil {
+		return nil, nil
+	}
+	return swag.WriteJSON(m)
+}
+
+// UnmarshalBinary interface implementation
+func (m *MetadataFields) UnmarshalBinary(b []byte) error {
+	var res MetadataFields
+	if err := swag.ReadJSON(b, &res); err != nil {
+		return err
+	}
+	*m = res
+	return nil
+}

models/object_legal_hold_status.go

@@ -0,0 +1,80 @@
+// Code generated by go-swagger; DO NOT EDIT.
+
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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/>.
+//
+
+package models
+
+// This file was generated by the swagger tool.
+// Editing this file might prove futile when you re-run the swagger generate command
+
+import (
+	"encoding/json"
+
+	"github.com/go-openapi/errors"
+	"github.com/go-openapi/strfmt"
+	"github.com/go-openapi/validate"
+)
+
+// ObjectLegalHoldStatus object legal hold status
+//
+// swagger:model objectLegalHoldStatus
+type ObjectLegalHoldStatus string
+
+const (
+
+	// ObjectLegalHoldStatusEnabled captures enum value "enabled"
+	ObjectLegalHoldStatusEnabled ObjectLegalHoldStatus = "enabled"
+
+	// ObjectLegalHoldStatusDisabled captures enum value "disabled"
+	ObjectLegalHoldStatusDisabled ObjectLegalHoldStatus = "disabled"
+)
+
+// for schema
+var objectLegalHoldStatusEnum []interface{}
+
+func init() {
+	var res []ObjectLegalHoldStatus
+	if err := json.Unmarshal([]byte(`["enabled","disabled"]`), &res); err != nil {
+		panic(err)
+	}
+	for _, v := range res {
+		objectLegalHoldStatusEnum = append(objectLegalHoldStatusEnum, v)
+	}
+}
+
+func (m ObjectLegalHoldStatus) validateObjectLegalHoldStatusEnum(path, location string, value ObjectLegalHoldStatus) error {
+	if err := validate.EnumCase(path, location, value, objectLegalHoldStatusEnum, true); err != nil {
+		return err
+	}
+	return nil
+}
+
+// Validate validates this object legal hold status
+func (m ObjectLegalHoldStatus) Validate(formats strfmt.Registry) error {
+	var res []error
+
+	// value enum
+	if err := m.validateObjectLegalHoldStatusEnum("", "body", m); err != nil {
+		return err
+	}
+
+	if len(res) > 0 {
+		return errors.CompositeValidationError(res...)
+	}
+	return nil
+}

models/parity_response.go

@@ -0,0 +1,37 @@
+// Code generated by go-swagger; DO NOT EDIT.
+
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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/>.
+//
+
+package models
+
+// This file was generated by the swagger tool.
+// Editing this file might prove futile when you re-run the swagger generate command
+
+import (
+	"github.com/go-openapi/strfmt"
+)
+
+// ParityResponse parity response
+//
+// swagger:model parityResponse
+type ParityResponse []string
+
+// Validate validates this parity response
+func (m ParityResponse) Validate(formats strfmt.Registry) error {
+	return nil
+}

models/put_object_legal_hold_request.go

@@ -0,0 +1,83 @@
+// Code generated by go-swagger; DO NOT EDIT.
+
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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/>.
+//
+
+package models
+
+// This file was generated by the swagger tool.
+// Editing this file might prove futile when you re-run the swagger generate command
+
+import (
+	"github.com/go-openapi/errors"
+	"github.com/go-openapi/strfmt"
+	"github.com/go-openapi/swag"
+)
+
+// PutObjectLegalHoldRequest put object legal hold request
+//
+// swagger:model putObjectLegalHoldRequest
+type PutObjectLegalHoldRequest struct {
+
+	// status
+	// Required: true
+	Status ObjectLegalHoldStatus `json:"status"`
+}
+
+// Validate validates this put object legal hold request
+func (m *PutObjectLegalHoldRequest) Validate(formats strfmt.Registry) error {
+	var res []error
+
+	if err := m.validateStatus(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if len(res) > 0 {
+		return errors.CompositeValidationError(res...)
+	}
+	return nil
+}
+
+func (m *PutObjectLegalHoldRequest) validateStatus(formats strfmt.Registry) error {
+
+	if err := m.Status.Validate(formats); err != nil {
+		if ve, ok := err.(*errors.Validation); ok {
+			return ve.ValidateName("status")
+		}
+		return err
+	}
+
+	return nil
+}
+
+// MarshalBinary interface implementation
+func (m *PutObjectLegalHoldRequest) MarshalBinary() ([]byte, error) {
+	if m == nil {
+		return nil, nil
+	}
+	return swag.WriteJSON(m)
+}
+
+// UnmarshalBinary interface implementation
+func (m *PutObjectLegalHoldRequest) UnmarshalBinary(b []byte) error {
+	var res PutObjectLegalHoldRequest
+	if err := swag.ReadJSON(b, &res); err != nil {
+		return err
+	}
+	*m = res
+	return nil
+}

models/remote_bucket.go

@@ -0,0 +1,200 @@
+// Code generated by go-swagger; DO NOT EDIT.
+
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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/>.
+//
+
+package models
+
+// This file was generated by the swagger tool.
+// Editing this file might prove futile when you re-run the swagger generate command
+
+import (
+	"encoding/json"
+
+	"github.com/go-openapi/errors"
+	"github.com/go-openapi/strfmt"
+	"github.com/go-openapi/swag"
+	"github.com/go-openapi/validate"
+)
+
+// RemoteBucket remote bucket
+//
+// swagger:model remoteBucket
+type RemoteBucket struct {
+
+	// access key
+	// Required: true
+	// Min Length: 3
+	AccessKey *string `json:"accessKey"`
+
+	// remote a r n
+	// Required: true
+	RemoteARN *string `json:"remoteARN"`
+
+	// secret key
+	// Min Length: 8
+	SecretKey string `json:"secretKey,omitempty"`
+
+	// service
+	// Enum: [replication]
+	Service string `json:"service,omitempty"`
+
+	// source bucket
+	// Required: true
+	SourceBucket *string `json:"sourceBucket"`
+
+	// status
+	Status string `json:"status,omitempty"`
+
+	// target bucket
+	TargetBucket string `json:"targetBucket,omitempty"`
+
+	// target URL
+	TargetURL string `json:"targetURL,omitempty"`
+}
+
+// Validate validates this remote bucket
+func (m *RemoteBucket) Validate(formats strfmt.Registry) error {
+	var res []error
+
+	if err := m.validateAccessKey(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if err := m.validateRemoteARN(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if err := m.validateSecretKey(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if err := m.validateService(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if err := m.validateSourceBucket(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if len(res) > 0 {
+		return errors.CompositeValidationError(res...)
+	}
+	return nil
+}
+
+func (m *RemoteBucket) validateAccessKey(formats strfmt.Registry) error {
+
+	if err := validate.Required("accessKey", "body", m.AccessKey); err != nil {
+		return err
+	}
+
+	if err := validate.MinLength("accessKey", "body", string(*m.AccessKey), 3); err != nil {
+		return err
+	}
+
+	return nil
+}
+
+func (m *RemoteBucket) validateRemoteARN(formats strfmt.Registry) error {
+
+	if err := validate.Required("remoteARN", "body", m.RemoteARN); err != nil {
+		return err
+	}
+
+	return nil
+}
+
+func (m *RemoteBucket) validateSecretKey(formats strfmt.Registry) error {
+
+	if swag.IsZero(m.SecretKey) { // not required
+		return nil
+	}
+
+	if err := validate.MinLength("secretKey", "body", string(m.SecretKey), 8); err != nil {
+		return err
+	}
+
+	return nil
+}
+
+var remoteBucketTypeServicePropEnum []interface{}
+
+func init() {
+	var res []string
+	if err := json.Unmarshal([]byte(`["replication"]`), &res); err != nil {
+		panic(err)
+	}
+	for _, v := range res {
+		remoteBucketTypeServicePropEnum = append(remoteBucketTypeServicePropEnum, v)
+	}
+}
+
+const (
+
+	// RemoteBucketServiceReplication captures enum value "replication"
+	RemoteBucketServiceReplication string = "replication"
+)
+
+// prop value enum
+func (m *RemoteBucket) validateServiceEnum(path, location string, value string) error {
+	if err := validate.EnumCase(path, location, value, remoteBucketTypeServicePropEnum, true); err != nil {
+		return err
+	}
+	return nil
+}
+
+func (m *RemoteBucket) validateService(formats strfmt.Registry) error {
+
+	if swag.IsZero(m.Service) { // not required
+		return nil
+	}
+
+	// value enum
+	if err := m.validateServiceEnum("service", "body", m.Service); err != nil {
+		return err
+	}
+
+	return nil
+}
+
+func (m *RemoteBucket) validateSourceBucket(formats strfmt.Registry) error {
+
+	if err := validate.Required("sourceBucket", "body", m.SourceBucket); err != nil {
+		return err
+	}
+
+	return nil
+}
+
+// MarshalBinary interface implementation
+func (m *RemoteBucket) MarshalBinary() ([]byte, error) {
+	if m == nil {
+		return nil, nil
+	}
+	return swag.WriteJSON(m)
+}
+
+// UnmarshalBinary interface implementation
+func (m *RemoteBucket) UnmarshalBinary(b []byte) error {
+	var res RemoteBucket
+	if err := swag.ReadJSON(b, &res); err != nil {
+		return err
+	}
+	*m = res
+	return nil
+}

models/set_bucket_quota.go

@@ -0,0 +1,137 @@
+// Code generated by go-swagger; DO NOT EDIT.
+
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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/>.
+//
+
+package models
+
+// This file was generated by the swagger tool.
+// Editing this file might prove futile when you re-run the swagger generate command
+
+import (
+	"encoding/json"
+
+	"github.com/go-openapi/errors"
+	"github.com/go-openapi/strfmt"
+	"github.com/go-openapi/swag"
+	"github.com/go-openapi/validate"
+)
+
+// SetBucketQuota set bucket quota
+//
+// swagger:model setBucketQuota
+type SetBucketQuota struct {
+
+	// amount
+	Amount int64 `json:"amount,omitempty"`
+
+	// enabled
+	// Required: true
+	Enabled *bool `json:"enabled"`
+
+	// quota type
+	// Enum: [fifo hard]
+	QuotaType string `json:"quota_type,omitempty"`
+}
+
+// Validate validates this set bucket quota
+func (m *SetBucketQuota) Validate(formats strfmt.Registry) error {
+	var res []error
+
+	if err := m.validateEnabled(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if err := m.validateQuotaType(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if len(res) > 0 {
+		return errors.CompositeValidationError(res...)
+	}
+	return nil
+}
+
+func (m *SetBucketQuota) validateEnabled(formats strfmt.Registry) error {
+
+	if err := validate.Required("enabled", "body", m.Enabled); err != nil {
+		return err
+	}
+
+	return nil
+}
+
+var setBucketQuotaTypeQuotaTypePropEnum []interface{}
+
+func init() {
+	var res []string
+	if err := json.Unmarshal([]byte(`["fifo","hard"]`), &res); err != nil {
+		panic(err)
+	}
+	for _, v := range res {
+		setBucketQuotaTypeQuotaTypePropEnum = append(setBucketQuotaTypeQuotaTypePropEnum, v)
+	}
+}
+
+const (
+
+	// SetBucketQuotaQuotaTypeFifo captures enum value "fifo"
+	SetBucketQuotaQuotaTypeFifo string = "fifo"
+
+	// SetBucketQuotaQuotaTypeHard captures enum value "hard"
+	SetBucketQuotaQuotaTypeHard string = "hard"
+)
+
+// prop value enum
+func (m *SetBucketQuota) validateQuotaTypeEnum(path, location string, value string) error {
+	if err := validate.EnumCase(path, location, value, setBucketQuotaTypeQuotaTypePropEnum, true); err != nil {
+		return err
+	}
+	return nil
+}
+
+func (m *SetBucketQuota) validateQuotaType(formats strfmt.Registry) error {
+
+	if swag.IsZero(m.QuotaType) { // not required
+		return nil
+	}
+
+	// value enum
+	if err := m.validateQuotaTypeEnum("quota_type", "body", m.QuotaType); err != nil {
+		return err
+	}
+
+	return nil
+}
+
+// MarshalBinary interface implementation
+func (m *SetBucketQuota) MarshalBinary() ([]byte, error) {
+	if m == nil {
+		return nil, nil
+	}
+	return swag.WriteJSON(m)
+}
+
+// UnmarshalBinary interface implementation
+func (m *SetBucketQuota) UnmarshalBinary(b []byte) error {
+	var res SetBucketQuota
+	if err := swag.ReadJSON(b, &res); err != nil {
+		return err
+	}
+	*m = res
+	return nil
+}

models/set_bucket_versioning.go

@@ -0,0 +1,60 @@
+// Code generated by go-swagger; DO NOT EDIT.
+
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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/>.
+//
+
+package models
+
+// This file was generated by the swagger tool.
+// Editing this file might prove futile when you re-run the swagger generate command
+
+import (
+	"github.com/go-openapi/strfmt"
+	"github.com/go-openapi/swag"
+)
+
+// SetBucketVersioning set bucket versioning
+//
+// swagger:model setBucketVersioning
+type SetBucketVersioning struct {
+
+	// versioning
+	Versioning bool `json:"versioning,omitempty"`
+}
+
+// Validate validates this set bucket versioning
+func (m *SetBucketVersioning) Validate(formats strfmt.Registry) error {
+	return nil
+}
+
+// MarshalBinary interface implementation
+func (m *SetBucketVersioning) MarshalBinary() ([]byte, error) {
+	if m == nil {
+		return nil, nil
+	}
+	return swag.WriteJSON(m)
+}
+
+// UnmarshalBinary interface implementation
+func (m *SetBucketVersioning) UnmarshalBinary(b []byte) error {
+	var res SetBucketVersioning
+	if err := swag.ReadJSON(b, &res); err != nil {
+		return err
+	}
+	*m = res
+	return nil
+}

models/tenant.go

@@ -35,12 +35,21 @@ import (
 // swagger:model tenant
 type Tenant struct {
 
+	// console image
+	ConsoleImage string `json:"console_image,omitempty"`
+
 	// creation date
 	CreationDate string `json:"creation_date,omitempty"`
 
 	// current state
 	CurrentState string `json:"currentState,omitempty"`
 
+	// deletion date
+	DeletionDate string `json:"deletion_date,omitempty"`
+
+	// enable prometheus
+	EnablePrometheus bool `json:"enable_prometheus,omitempty"`
+
 	// image
 	Image string `json:"image,omitempty"`
 

models/tenant_list.go

@@ -38,6 +38,9 @@ type TenantList struct {
 	// current state
 	CurrentState string `json:"currentState,omitempty"`
 
+	// deletion date
+	DeletionDate string `json:"deletion_date,omitempty"`
+
 	// instance count
 	InstanceCount int64 `json:"instance_count,omitempty"`
 

models/tls_configuration.go

@@ -23,6 +23,8 @@ package models
 // Editing this file might prove futile when you re-run the swagger generate command
 
 import (
+	"strconv"
+
 	"github.com/go-openapi/errors"
 	"github.com/go-openapi/strfmt"
 	"github.com/go-openapi/swag"
@@ -37,7 +39,7 @@ type TLSConfiguration struct {
 	Console *KeyPairConfiguration `json:"console,omitempty"`
 
 	// minio
-	Minio *KeyPairConfiguration `json:"minio,omitempty"`
+	Minio []*KeyPairConfiguration `json:"minio"`
 }
 
 // Validate validates this tls configuration
@@ -82,13 +84,20 @@ func (m *TLSConfiguration) validateMinio(formats strfmt.Registry) error {
 		return nil
 	}
 
-	if m.Minio != nil {
-		if err := m.Minio.Validate(formats); err != nil {
-			if ve, ok := err.(*errors.Validation); ok {
-				return ve.ValidateName("minio")
-			}
-			return err
+	for i := 0; i < len(m.Minio); i++ {
+		if swag.IsZero(m.Minio[i]) { // not required
+			continue
 		}
+
+		if m.Minio[i] != nil {
+			if err := m.Minio[i].Validate(formats); err != nil {
+				if ve, ok := err.(*errors.Validation); ok {
+					return ve.ValidateName("minio" + "." + strconv.Itoa(i))
+				}
+				return err
+			}
+		}
+
 	}
 
 	return nil

models/update_tenant_request.go

@@ -38,6 +38,9 @@ type UpdateTenantRequest struct {
 	// Pattern: ^((.*?)/(.*?):(.+))$
 	ConsoleImage string `json:"console_image,omitempty"`
 
+	// enable prometheus
+	EnablePrometheus bool `json:"enable_prometheus,omitempty"`
+
 	// image
 	// Pattern: ^((.*?)/(.*?):(.+))$
 	Image string `json:"image,omitempty"`

models/zone.go

@@ -207,6 +207,12 @@ func (m *Zone) UnmarshalBinary(b []byte) error {
 // swagger:model ZoneVolumeConfiguration
 type ZoneVolumeConfiguration struct {
 
+	// annotations
+	Annotations map[string]string `json:"annotations,omitempty"`
+
+	// labels
+	Labels map[string]string `json:"labels,omitempty"`
+
 	// size
 	// Required: true
 	Size *int64 `json:"size"`

models/zone_update_request.go

@@ -0,0 +1,99 @@
+// Code generated by go-swagger; DO NOT EDIT.
+
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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/>.
+//
+
+package models
+
+// This file was generated by the swagger tool.
+// Editing this file might prove futile when you re-run the swagger generate command
+
+import (
+	"strconv"
+
+	"github.com/go-openapi/errors"
+	"github.com/go-openapi/strfmt"
+	"github.com/go-openapi/swag"
+	"github.com/go-openapi/validate"
+)
+
+// ZoneUpdateRequest zone update request
+//
+// swagger:model zoneUpdateRequest
+type ZoneUpdateRequest struct {
+
+	// zones
+	// Required: true
+	Zones []*Zone `json:"zones"`
+}
+
+// Validate validates this zone update request
+func (m *ZoneUpdateRequest) Validate(formats strfmt.Registry) error {
+	var res []error
+
+	if err := m.validateZones(formats); err != nil {
+		res = append(res, err)
+	}
+
+	if len(res) > 0 {
+		return errors.CompositeValidationError(res...)
+	}
+	return nil
+}
+
+func (m *ZoneUpdateRequest) validateZones(formats strfmt.Registry) error {
+
+	if err := validate.Required("zones", "body", m.Zones); err != nil {
+		return err
+	}
+
+	for i := 0; i < len(m.Zones); i++ {
+		if swag.IsZero(m.Zones[i]) { // not required
+			continue
+		}
+
+		if m.Zones[i] != nil {
+			if err := m.Zones[i].Validate(formats); err != nil {
+				if ve, ok := err.(*errors.Validation); ok {
+					return ve.ValidateName("zones" + "." + strconv.Itoa(i))
+				}
+				return err
+			}
+		}
+
+	}
+
+	return nil
+}
+
+// MarshalBinary interface implementation
+func (m *ZoneUpdateRequest) MarshalBinary() ([]byte, error) {
+	if m == nil {
+		return nil, nil
+	}
+	return swag.WriteJSON(m)
+}
+
+// UnmarshalBinary interface implementation
+func (m *ZoneUpdateRequest) UnmarshalBinary(b []byte) error {
+	var res ZoneUpdateRequest
+	if err := swag.ReadJSON(b, &res); err != nil {
+		return err
+	}
+	*m = res
+	return nil
+}

package-lock.json

@@ -1,3 +0,0 @@
-{
-  "lockfileVersion": 1
-}

pkg/acl/endpoints.go

@@ -22,22 +22,27 @@ import (
 
 // endpoints definition
 var (
-	configuration   = "/configurations-list"
-	users           = "/users"
-	groups          = "/groups"
-	iamPolicies     = "/policies"
-	dashboard       = "/dashboard"
-	profiling       = "/profiling"
-	trace           = "/trace"
-	logs            = "/logs"
-	watch           = "/watch"
-	notifications   = "/notification-endpoints"
-	buckets         = "/buckets"
-	bucketsDetail   = "/buckets/:bucketName"
-	serviceAccounts = "/service-accounts"
-	tenants         = "/tenants"
-	tenantsDetail   = "/tenants/:tenantName"
-	heal            = "/heal"
+	configuration     = "/configurations-list"
+	users             = "/users"
+	groups            = "/groups"
+	iamPolicies       = "/policies"
+	dashboard         = "/dashboard"
+	profiling         = "/profiling"
+	trace             = "/trace"
+	logs              = "/logs"
+	watch             = "/watch"
+	notifications     = "/notification-endpoints"
+	buckets           = "/buckets"
+	bucketsDetail     = "/buckets/:bucketName"
+	serviceAccounts   = "/service-accounts"
+	tenants           = "/tenants"
+	tenantsDetail     = "/namespaces/:tenantNamespace/tenants/:tenantName"
+	heal              = "/heal"
+	remoteBuckets     = "/remote-buckets"
+	replication       = "/replication"
+	objectBrowser     = "/object-browser/:bucket?"
+	mainObjectBrowser = "/object-browser"
+	license           = "/license"
 )
 
 type ConfigurationActionSet struct {
@@ -208,22 +213,57 @@ var healActionSet = ConfigurationActionSet{
 	),
 }
 
+var remoteBucketsActionSet = ConfigurationActionSet{
+	actionTypes: iampolicy.NewActionSet(
+		iampolicy.AllAdminActions,
+	),
+	actions: iampolicy.NewActionSet(
+		iampolicy.ConfigUpdateAdminAction,
+	),
+}
+
+var replicationActionSet = ConfigurationActionSet{
+	actionTypes: iampolicy.NewActionSet(
+		iampolicy.AllAdminActions,
+	),
+	actions: iampolicy.NewActionSet(
+		iampolicy.ConfigUpdateAdminAction,
+	),
+}
+
+// objectBrowserActionSet no actions needed for this module to work
+var objectBrowserActionSet = ConfigurationActionSet{
+	actionTypes: iampolicy.NewActionSet(),
+	actions:     iampolicy.NewActionSet(),
+}
+
+// licenseActionSet no actions needed for this module to work
+var licenseActionSet = 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,
-	users:           usersActionSet,
-	groups:          groupsActionSet,
-	iamPolicies:     iamPoliciesActionSet,
-	dashboard:       dashboardActionSet,
-	profiling:       profilingActionSet,
-	trace:           traceActionSet,
-	logs:            logsActionSet,
-	watch:           watchActionSet,
-	notifications:   notificationsActionSet,
-	buckets:         bucketsActionSet,
-	bucketsDetail:   bucketsActionSet,
-	serviceAccounts: serviceAccountsActionSet,
-	heal:            healActionSet,
+	configuration:     configurationActionSet,
+	users:             usersActionSet,
+	groups:            groupsActionSet,
+	iamPolicies:       iamPoliciesActionSet,
+	dashboard:         dashboardActionSet,
+	profiling:         profilingActionSet,
+	trace:             traceActionSet,
+	logs:              logsActionSet,
+	watch:             watchActionSet,
+	notifications:     notificationsActionSet,
+	buckets:           bucketsActionSet,
+	bucketsDetail:     bucketsActionSet,
+	serviceAccounts:   serviceAccountsActionSet,
+	heal:              healActionSet,
+	remoteBuckets:     remoteBucketsActionSet,
+	replication:       replicationActionSet,
+	objectBrowser:     objectBrowserActionSet,
+	mainObjectBrowser: objectBrowserActionSet,
+	license:           licenseActionSet,
 }
 
 // operatorRules contains the mapping between endpoints and ActionSets for operator only mode

pkg/acl/endpoints_test.go

@@ -50,7 +50,7 @@ func TestGetAuthorizedEndpoints(t *testing.T) {
 			args: args{
 				[]string{"admin:ServerInfo"},
 			},
-			want: 2,
+			want: 5,
 		},
 		{
 			name: "policies endpoint",
@@ -63,7 +63,7 @@ func TestGetAuthorizedEndpoints(t *testing.T) {
 					"admin:ListUserPolicies",
 				},
 			},
-			want: 2,
+			want: 5,
 		},
 		{
 			name: "all admin endpoints",
@@ -72,7 +72,7 @@ func TestGetAuthorizedEndpoints(t *testing.T) {
 					"admin:*",
 				},
 			},
-			want: 11,
+			want: 16,
 		},
 		{
 			name: "all s3 endpoints",
@@ -81,7 +81,7 @@ func TestGetAuthorizedEndpoints(t *testing.T) {
 					"s3:*",
 				},
 			},
-			want: 4,
+			want: 7,
 		},
 		{
 			name: "all admin and s3 endpoints",
@@ -91,7 +91,7 @@ func TestGetAuthorizedEndpoints(t *testing.T) {
 					"s3:*",
 				},
 			},
-			want: 14,
+			want: 19,
 		},
 		{
 			name: "no endpoints",

pkg/auth/token.go

@@ -17,14 +17,17 @@
 package auth
 
 import (
+	"bytes"
 	"crypto/aes"
 	"crypto/cipher"
-	"crypto/rand"
+	"crypto/hmac"
 	"crypto/sha1"
+	"crypto/sha256"
 	"encoding/base64"
 	"errors"
 	"fmt"
 	"io"
+	"io/ioutil"
 	"log"
 	"net/http"
 	"strings"
@@ -33,6 +36,9 @@ import (
 	"github.com/minio/console/models"
 	"github.com/minio/console/pkg/auth/token"
 	"github.com/minio/minio-go/v7/pkg/credentials"
+	"github.com/secure-io/sio-go/sioutil"
+	"golang.org/x/crypto/chacha20"
+	"golang.org/x/crypto/chacha20poly1305"
 	"golang.org/x/crypto/pbkdf2"
 )
 
@@ -40,6 +46,7 @@ var (
 	errNoAuthToken  = errors.New("session token missing")
 	errReadingToken = errors.New("session token internal data is malformed")
 	errClaimsFormat = errors.New("encrypted session token claims not in the right format")
+	errorGeneric    = errors.New("an error has occurred")
 )
 
 // derivedKey is the key used to encrypt the session token claims, its derived using pbkdf on CONSOLE_PBKDF_PASSPHRASE with CONSOLE_PBKDF_SALT
@@ -102,9 +109,10 @@ func NewEncryptedTokenForClient(credentials *credentials.Value, actions []string
 // returns a base64 encoded ciphertext
 func encryptClaims(accessKeyID, secretAccessKey, sessionToken string, actions []string) (string, error) {
 	payload := []byte(fmt.Sprintf("%s#%s#%s#%s", accessKeyID, secretAccessKey, sessionToken, strings.Join(actions, ",")))
-	ciphertext, err := encrypt(payload)
+	ciphertext, err := encrypt(payload, []byte{})
 	if err != nil {
-		return "", err
+		log.Println(err)
+		return "", errorGeneric
 	}
 	return base64.StdEncoding.EncodeToString(ciphertext), nil
 }
@@ -116,7 +124,7 @@ func decryptClaims(ciphertext string) (*DecryptedClaims, error) {
 		log.Println(err)
 		return nil, errClaimsFormat
 	}
-	plaintext, err := decrypt(decoded)
+	plaintext, err := decrypt(decoded, []byte{})
 	if err != nil {
 		log.Println(err)
 		return nil, errClaimsFormat
@@ -136,37 +144,137 @@ func decryptClaims(ciphertext string) (*DecryptedClaims, error) {
 	}, nil
 }
 
-// Encrypt a blob of data using AEAD (AES-GCM) with a pbkdf2 derived key
-func encrypt(plaintext []byte) ([]byte, error) {
-	block, _ := aes.NewCipher(derivedKey)
-	gcm, err := cipher.NewGCM(block)
+const (
+	aesGcm   = 0x00
+	c20p1305 = 0x01
+)
+
+// Encrypt a blob of data using AEAD scheme, AES-GCM if the executing CPU
+// provides AES hardware support, otherwise will use ChaCha20-Poly1305
+// with a pbkdf2 derived key, this function should be used to encrypt a session
+// or data key provided as plaintext.
+//
+// The returned ciphertext data consists of:
+//    AEAD ID | iv | nonce | encrypted data
+//       1      16		 12     ~ len(data)
+func encrypt(plaintext, associatedData []byte) ([]byte, error) {
+	iv, err := sioutil.Random(16) // 16 bytes IV
 	if err != nil {
 		return nil, err
 	}
-	nonce := make([]byte, gcm.NonceSize())
-	if _, err = io.ReadFull(rand.Reader, nonce); err != nil {
+	var algorithm byte
+	if sioutil.NativeAES() {
+		algorithm = aesGcm
+	} else {
+		algorithm = c20p1305
+	}
+	var aead cipher.AEAD
+	switch algorithm {
+	case aesGcm:
+		mac := hmac.New(sha256.New, derivedKey)
+		mac.Write(iv)
+		sealingKey := mac.Sum(nil)
+
+		var block cipher.Block
+		block, err = aes.NewCipher(sealingKey)
+		if err != nil {
+			return nil, err
+		}
+		aead, err = cipher.NewGCM(block)
+		if err != nil {
+			return nil, err
+		}
+	case c20p1305:
+		var sealingKey []byte
+		sealingKey, err = chacha20.HChaCha20(derivedKey, iv) // HChaCha20 expects nonce of 16 bytes
+		if err != nil {
+			return nil, err
+		}
+		aead, err = chacha20poly1305.New(sealingKey)
+		if err != nil {
+			return nil, err
+		}
+	}
+	nonce, err := sioutil.Random(aead.NonceSize())
+	if err != nil {
 		return nil, err
 	}
-	cipherText := gcm.Seal(nonce, nonce, plaintext, nil)
-	return cipherText, nil
+
+	sealedBytes := aead.Seal(nil, nonce, plaintext, associatedData)
+
+	// ciphertext = AEAD ID | iv | nonce | sealed bytes
+
+	var buf bytes.Buffer
+	buf.WriteByte(algorithm)
+	buf.Write(iv)
+	buf.Write(nonce)
+	buf.Write(sealedBytes)
+
+	return buf.Bytes(), nil
 }
 
-// Decrypts a blob of data using AEAD (AES-GCM) with a pbkdf2 derived key
-func decrypt(data []byte) ([]byte, error) {
-	block, err := aes.NewCipher(derivedKey)
+// Decrypts a blob of data using AEAD scheme AES-GCM if the executing CPU
+// provides AES hardware support, otherwise will use ChaCha20-Poly1305with
+// and a pbkdf2 derived key
+func decrypt(ciphertext []byte, associatedData []byte) ([]byte, error) {
+	var (
+		algorithm [1]byte
+		iv        [16]byte
+		nonce     [12]byte // This depends on the AEAD but both used ciphers have the same nonce length.
+	)
+
+	r := bytes.NewReader(ciphertext)
+	if _, err := io.ReadFull(r, algorithm[:]); err != nil {
+		return nil, err
+	}
+	if _, err := io.ReadFull(r, iv[:]); err != nil {
+		return nil, err
+	}
+	if _, err := io.ReadFull(r, nonce[:]); err != nil {
+		return nil, err
+	}
+
+	var aead cipher.AEAD
+	switch algorithm[0] {
+	case aesGcm:
+		mac := hmac.New(sha256.New, derivedKey)
+		mac.Write(iv[:])
+		sealingKey := mac.Sum(nil)
+		block, err := aes.NewCipher(sealingKey[:])
+		if err != nil {
+			return nil, err
+		}
+		aead, err = cipher.NewGCM(block)
+		if err != nil {
+			return nil, err
+		}
+	case c20p1305:
+		sealingKey, err := chacha20.HChaCha20(derivedKey, iv[:]) // HChaCha20 expects nonce of 16 bytes
+		if err != nil {
+			return nil, err
+		}
+		aead, err = chacha20poly1305.New(sealingKey)
+		if err != nil {
+			return nil, err
+		}
+	default:
+		return nil, fmt.Errorf("invalid algorithm: %v", algorithm)
+	}
+
+	if len(nonce) != aead.NonceSize() {
+		return nil, fmt.Errorf("invalid nonce size %d, expected %d", len(nonce), aead.NonceSize())
+	}
+
+	sealedBytes, err := ioutil.ReadAll(r)
 	if err != nil {
 		return nil, err
 	}
-	gcm, err := cipher.NewGCM(block)
-	if err != nil {
-		return nil, err
-	}
-	nonceSize := gcm.NonceSize()
-	nonce, cipherText := data[:nonceSize], data[nonceSize:]
-	plaintext, err := gcm.Open(nil, nonce, cipherText, nil)
+
+	plaintext, err := aead.Open(nil, nonce[:], sealedBytes, associatedData)
 	if err != nil {
 		return nil, err
 	}
+
 	return plaintext, nil
 }
 

pkg/auth/token/config.go

@@ -23,10 +23,9 @@ import (
 	"github.com/minio/minio/pkg/env"
 )
 
-// ConsoleSTSAndJWTDurationSeconds returns the default session duration for the STS requested tokens and the generated JWTs.
-// Ideally both values should match so jwt and Minio sts sessions expires at the same time.
-func GetConsoleSTSAndJWTDurationInSeconds() int {
-	duration, err := strconv.Atoi(env.Get(ConsoleSTSAndJWTDurationSeconds, "3600"))
+// ConsoleSTSDurationSeconds returns the default session duration for the STS requested tokens.
+func GetConsoleSTSDurationInSeconds() int {
+	duration, err := strconv.Atoi(env.Get(ConsoleSTSDurationSeconds, "3600"))
 	if err != nil {
 		duration = 3600
 	}

pkg/auth/token/const.go

@@ -17,7 +17,7 @@
 package token
 
 const (
-	ConsoleSTSAndJWTDurationSeconds = "CONSOLE_STS_AND_JWT_DURATION_SECONDS"
-	ConsolePBKDFPassphrase          = "CONSOLE_PBKDF_PASSPHRASE"
-	ConsolePBKDFSalt                = "CONSOLE_PBKDF_SALT"
+	ConsoleSTSDurationSeconds = "CONSOLE_STS_DURATION_SECONDS"
+	ConsolePBKDFPassphrase    = "CONSOLE_PBKDF_PASSPHRASE"
+	ConsolePBKDFSalt          = "CONSOLE_PBKDF_SALT"
 )

pkg/auth/token_test.go

@@ -36,12 +36,12 @@ func TestNewJWTWithClaimsForClient(t *testing.T) {
 	funcAssert := assert.New(t)
 	// Test-1 : NewEncryptedTokenForClient() is generated correctly without errors
 	function := "NewEncryptedTokenForClient()"
-	jwt, err := NewEncryptedTokenForClient(creds, []string{""})
-	if err != nil || jwt == "" {
+	token, err := NewEncryptedTokenForClient(creds, []string{""})
+	if err != nil || token == "" {
 		t.Errorf("Failed on %s:, error occurred: %s", function, err)
 	}
-	// saving jwt for future tests
-	goodToken = jwt
+	// saving token for future tests
+	goodToken = token
 	// Test-2 : NewEncryptedTokenForClient() throws error because of empty credentials
 	if _, err = NewEncryptedTokenForClient(nil, []string{""}); err != nil {
 		funcAssert.Equal("provided credentials are empty", err.Error())
@@ -60,17 +60,17 @@ func TestJWTAuthenticate(t *testing.T) {
 		funcAssert.Equal(claims.SecretAccessKey, creds.SecretAccessKey)
 		funcAssert.Equal(claims.SessionToken, creds.SessionToken)
 	}
-	// Test-2 : SessionTokenAuthenticate() return an error because of a tampered jwt
+	// Test-2 : SessionTokenAuthenticate() return an error because of a tampered token
 	if _, err := SessionTokenAuthenticate(badToken); err != nil {
 		funcAssert.Equal("session token internal data is malformed", err.Error())
 	}
-	// Test-3 : SessionTokenAuthenticate() return an error because of an empty jwt
+	// Test-3 : SessionTokenAuthenticate() return an error because of an empty token
 	if _, err := SessionTokenAuthenticate(""); err != nil {
 		funcAssert.Equal("session token missing", err.Error())
 	}
 }
 
-func TestIsJWTValid(t *testing.T) {
+func TestSessionTokenValid(t *testing.T) {
 	funcAssert := assert.New(t)
 	// Test-1 : SessionTokenAuthenticate() provided token is valid
 	funcAssert.Equal(true, IsSessionTokenValid(goodToken))

pkg/utils/parity.go

@@ -0,0 +1,219 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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/>.
+
+package utils
+
+import (
+	"errors"
+	"fmt"
+	"sort"
+
+	"github.com/minio/minio/pkg/ellipses"
+)
+
+// This file implements and supports ellipses pattern for
+// `minio server` command line arguments.
+
+// Supported set sizes this is used to find the optimal
+// single set size.
+var setSizes = []uint64{4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16}
+
+// getDivisibleSize - returns a greatest common divisor of
+// all the ellipses sizes.
+func getDivisibleSize(totalSizes []uint64) (result uint64) {
+	gcd := func(x, y uint64) uint64 {
+		for y != 0 {
+			x, y = y, x%y
+		}
+		return x
+	}
+	result = totalSizes[0]
+	for i := 1; i < len(totalSizes); i++ {
+		result = gcd(result, totalSizes[i])
+	}
+	return result
+}
+
+// isValidSetSize - checks whether given count is a valid set size for erasure coding.
+var isValidSetSize = func(count uint64) bool {
+	return (count >= setSizes[0] && count <= setSizes[len(setSizes)-1])
+}
+
+// possibleSetCountsWithSymmetry returns symmetrical setCounts based on the
+// input argument patterns, the symmetry calculation is to ensure that
+// we also use uniform number of drives common across all ellipses patterns.
+func possibleSetCountsWithSymmetry(setCounts []uint64, argPatterns []ellipses.ArgPattern) []uint64 {
+	var newSetCounts = make(map[uint64]struct{})
+	for _, ss := range setCounts {
+		var symmetry bool
+		for _, argPattern := range argPatterns {
+			for _, p := range argPattern {
+				if uint64(len(p.Seq)) > ss {
+					symmetry = uint64(len(p.Seq))%ss == 0
+				} else {
+					symmetry = ss%uint64(len(p.Seq)) == 0
+				}
+			}
+		}
+		// With no arg patterns, it is expected that user knows
+		// the right symmetry, so either ellipses patterns are
+		// provided (recommended) or no ellipses patterns.
+		if _, ok := newSetCounts[ss]; !ok && (symmetry || argPatterns == nil) {
+			newSetCounts[ss] = struct{}{}
+		}
+	}
+
+	setCounts = []uint64{}
+	for setCount := range newSetCounts {
+		setCounts = append(setCounts, setCount)
+	}
+
+	// Not necessarily needed but it ensures to the readers
+	// eyes that we prefer a sorted setCount slice for the
+	// subsequent function to figure out the right common
+	// divisor, it avoids loops.
+	sort.Slice(setCounts, func(i, j int) bool {
+		return setCounts[i] < setCounts[j]
+	})
+
+	return setCounts
+}
+
+func commonSetDriveCount(divisibleSize uint64, setCounts []uint64) (setSize uint64) {
+	// prefers setCounts to be sorted for optimal behavior.
+	if divisibleSize < setCounts[len(setCounts)-1] {
+		return divisibleSize
+	}
+
+	// Figure out largest value of total_drives_in_erasure_set which results
+	// in least number of total_drives/total_drives_erasure_set ratio.
+	prevD := divisibleSize / setCounts[0]
+	for _, cnt := range setCounts {
+		if divisibleSize%cnt == 0 {
+			d := divisibleSize / cnt
+			if d <= prevD {
+				prevD = d
+				setSize = cnt
+			}
+		}
+	}
+	return setSize
+}
+
+// getSetIndexes returns list of indexes which provides the set size
+// on each index, this function also determines the final set size
+// The final set size has the affinity towards choosing smaller
+// indexes (total sets)
+func getSetIndexes(args []string, totalSizes []uint64, argPatterns []ellipses.ArgPattern) (setIndexes [][]uint64, err error) {
+	if len(totalSizes) == 0 || len(args) == 0 {
+		return nil, errors.New("invalid argument")
+	}
+
+	setIndexes = make([][]uint64, len(totalSizes))
+	for _, totalSize := range totalSizes {
+		// Check if totalSize has minimum range upto setSize
+		if totalSize < setSizes[0] {
+			return nil, fmt.Errorf("incorrect number of endpoints provided %s", args)
+		}
+	}
+
+	commonSize := getDivisibleSize(totalSizes)
+	possibleSetCounts := func(setSize uint64) (ss []uint64) {
+		for _, s := range setSizes {
+			if setSize%s == 0 {
+				ss = append(ss, s)
+			}
+		}
+		return ss
+	}
+
+	setCounts := possibleSetCounts(commonSize)
+	if len(setCounts) == 0 {
+		err = fmt.Errorf("incorrect number of endpoints provided %s, number of disks %d is not divisible by any supported erasure set sizes %d", args, commonSize, setSizes)
+		return nil, err
+	}
+
+	// Returns possible set counts with symmetry.
+	setCounts = possibleSetCountsWithSymmetry(setCounts, argPatterns)
+	if len(setCounts) == 0 {
+		err = fmt.Errorf("no symmetric distribution detected with input endpoints provided %s, disks %d cannot be spread symmetrically by any supported erasure set sizes %d", args, commonSize, setSizes)
+		return nil, err
+	}
+
+	// Final set size with all the symmetry accounted for.
+	setSize := commonSetDriveCount(commonSize, setCounts)
+
+	// Check whether setSize is with the supported range.
+	if !isValidSetSize(setSize) {
+		err = fmt.Errorf("incorrect number of endpoints provided %s, number of disks %d is not divisible by any supported erasure set sizes %d", args, commonSize, setSizes)
+		return nil, err
+	}
+
+	for i := range totalSizes {
+		for j := uint64(0); j < totalSizes[i]/setSize; j++ {
+			setIndexes[i] = append(setIndexes[i], setSize)
+		}
+	}
+
+	return setIndexes, nil
+}
+
+// Return the total size for each argument patterns.
+func getTotalSizes(argPatterns []ellipses.ArgPattern) []uint64 {
+	var totalSizes []uint64
+	for _, argPattern := range argPatterns {
+		var totalSize uint64 = 1
+		for _, p := range argPattern {
+			totalSize = totalSize * uint64(len(p.Seq))
+		}
+		totalSizes = append(totalSizes, totalSize)
+	}
+	return totalSizes
+}
+
+// PossibleParityValues returns possible parities for input args,
+// parties are calculated in uniform manner for one zone or
+// multiple zones, ensuring that parities returned are common
+// and applicable across all zones.
+func PossibleParityValues(args ...string) ([]string, error) {
+	setIndexes, err := parseEndpointSet(args...)
+	if err != nil {
+		return nil, err
+	}
+	maximumParity := setIndexes[0][0] / 2
+	var parities []string
+	for maximumParity >= 2 {
+		parities = append(parities, fmt.Sprintf("EC:%d", maximumParity))
+		maximumParity--
+	}
+	return parities, nil
+}
+
+// Parses all arguments and returns an endpointSet which is a collection
+// of endpoints following the ellipses pattern, this is what is used
+// by the object layer for initializing itself.
+func parseEndpointSet(args ...string) (setIndexes [][]uint64, err error) {
+	var argPatterns = make([]ellipses.ArgPattern, len(args))
+	for i, arg := range args {
+		patterns, err := ellipses.FindEllipsesPatterns(arg)
+		if err != nil {
+			return nil, err
+		}
+		argPatterns[i] = patterns
+	}
+
+	return getSetIndexes(args, getTotalSizes(argPatterns), argPatterns)
+}

pkg/utils/parity_test.go

@@ -0,0 +1,281 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// All rights reserved
+
+package utils
+
+import (
+	"reflect"
+	"testing"
+
+	"github.com/minio/minio/pkg/ellipses"
+)
+
+func TestGetDivisibleSize(t *testing.T) {
+	testCases := []struct {
+		totalSizes []uint64
+		result     uint64
+	}{{[]uint64{24, 32, 16}, 8},
+		{[]uint64{32, 8, 4}, 4},
+		{[]uint64{8, 8, 8}, 8},
+		{[]uint64{24}, 24},
+	}
+
+	for _, testCase := range testCases {
+		testCase := testCase
+		t.Run("", func(t *testing.T) {
+			gotGCD := getDivisibleSize(testCase.totalSizes)
+			if testCase.result != gotGCD {
+				t.Errorf("Expected %v, got %v", testCase.result, gotGCD)
+			}
+		})
+	}
+}
+
+// Test tests calculating set indexes.
+func TestGetSetIndexes(t *testing.T) {
+	testCases := []struct {
+		args       []string
+		totalSizes []uint64
+		indexes    [][]uint64
+		success    bool
+	}{
+		// Invalid inputs.
+		{
+			[]string{"data{1...3}"},
+			[]uint64{3},
+			nil,
+			false,
+		},
+		{
+			[]string{"data/controller1/export{1...2}, data/controller2/export{1...4}, data/controller3/export{1...8}"},
+			[]uint64{2, 4, 8},
+			nil,
+			false,
+		},
+		{
+			[]string{"data{1...17}/export{1...52}"},
+			[]uint64{14144},
+			nil,
+			false,
+		},
+		// Valid inputs.
+		{
+			[]string{"data{1...27}"},
+			[]uint64{27},
+			[][]uint64{{9, 9, 9}},
+			true,
+		},
+		{
+			[]string{"http://host{1...3}/data{1...180}"},
+			[]uint64{540},
+			[][]uint64{{15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15}},
+			true,
+		},
+		{
+			[]string{"http://host{1...2}.rack{1...4}/data{1...180}"},
+			[]uint64{1440},
+			[][]uint64{{16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16}},
+			true,
+		},
+		{
+			[]string{"http://host{1...2}/data{1...180}"},
+			[]uint64{360},
+			[][]uint64{{12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12}},
+			true,
+		},
+		{
+			[]string{"data/controller1/export{1...4}, data/controller2/export{1...8}, data/controller3/export{1...12}"},
+			[]uint64{4, 8, 12},
+			[][]uint64{{4}, {4, 4}, {4, 4, 4}},
+			true,
+		},
+		{
+			[]string{"data{1...64}"},
+			[]uint64{64},
+			[][]uint64{{16, 16, 16, 16}},
+			true,
+		},
+		{
+			[]string{"data{1...24}"},
+			[]uint64{24},
+			[][]uint64{{12, 12}},
+			true,
+		},
+		{
+			[]string{"data/controller{1...11}/export{1...8}"},
+			[]uint64{88},
+			[][]uint64{{11, 11, 11, 11, 11, 11, 11, 11}},
+			true,
+		},
+		{
+			[]string{"data{1...4}"},
+			[]uint64{4},
+			[][]uint64{{4}},
+			true,
+		},
+		{
+			[]string{"data/controller1/export{1...10}, data/controller2/export{1...10}, data/controller3/export{1...10}"},
+			[]uint64{10, 10, 10},
+			[][]uint64{{10}, {10}, {10}},
+			true,
+		},
+		{
+			[]string{"data{1...16}/export{1...52}"},
+			[]uint64{832},
+			[][]uint64{{16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16}},
+			true,
+		},
+	}
+
+	for _, testCase := range testCases {
+		testCase := testCase
+		t.Run("", func(t *testing.T) {
+			var argPatterns = make([]ellipses.ArgPattern, len(testCase.args))
+			for i, arg := range testCase.args {
+				patterns, err := ellipses.FindEllipsesPatterns(arg)
+				if err != nil {
+					t.Fatalf("Unexpected failure %s", err)
+				}
+				argPatterns[i] = patterns
+			}
+			gotIndexes, err := getSetIndexes(testCase.args, testCase.totalSizes, argPatterns)
+			if err != nil && testCase.success {
+				t.Errorf("Expected success but failed instead %s", err)
+			}
+			if err == nil && !testCase.success {
+				t.Errorf("Expected failure but passed instead")
+			}
+			if !reflect.DeepEqual(testCase.indexes, gotIndexes) {
+				t.Errorf("Expected %v, got %v", testCase.indexes, gotIndexes)
+			}
+		})
+	}
+}
+
+// Test tests possible parities returned for any input args
+func TestPossibleParities(t *testing.T) {
+	testCases := []struct {
+		arg      string
+		parities []string
+		success  bool
+	}{
+		// Tests invalid inputs.
+		{
+			"...",
+			nil,
+			false,
+		},
+		// No range specified.
+		{
+			"{...}",
+			nil,
+			false,
+		},
+		// Invalid range.
+		{
+			"http://minio{2...3}/export/set{1...0}",
+			nil,
+			false,
+		},
+		// Range cannot be smaller than 4 minimum.
+		{
+			"/export{1..2}",
+			nil,
+			false,
+		},
+		// Unsupported characters.
+		{
+			"/export/test{1...2O}",
+			nil,
+			false,
+		},
+		// Tests valid inputs.
+		{
+			"{1...27}",
+			[]string{"EC:4", "EC:3", "EC:2"},
+			true,
+		},
+		{
+			"/export/set{1...64}",
+			[]string{"EC:8", "EC:7", "EC:6", "EC:5", "EC:4", "EC:3", "EC:2"},
+			true,
+		},
+		// Valid input for distributed setup.
+		{
+			"http://minio{2...3}/export/set{1...64}",
+			[]string{"EC:8", "EC:7", "EC:6", "EC:5", "EC:4", "EC:3", "EC:2"},
+			true,
+		},
+		// Supporting some advanced cases.
+		{
+			"http://minio{1...64}.mydomain.net/data",
+			[]string{"EC:8", "EC:7", "EC:6", "EC:5", "EC:4", "EC:3", "EC:2"},
+			true,
+		},
+		{
+			"http://rack{1...4}.mydomain.minio{1...16}/data",
+			[]string{"EC:8", "EC:7", "EC:6", "EC:5", "EC:4", "EC:3", "EC:2"},
+			true,
+		},
+		// Supporting kubernetes cases.
+		{
+			"http://minio{0...15}.mydomain.net/data{0...1}",
+			[]string{"EC:8", "EC:7", "EC:6", "EC:5", "EC:4", "EC:3", "EC:2"},
+			true,
+		},
+		// No host regex, just disks.
+		{
+			"http://server1/data{1...32}",
+			[]string{"EC:8", "EC:7", "EC:6", "EC:5", "EC:4", "EC:3", "EC:2"},
+			true,
+		},
+		// No host regex, just disks with two position numerics.
+		{
+			"http://server1/data{01...32}",
+			[]string{"EC:8", "EC:7", "EC:6", "EC:5", "EC:4", "EC:3", "EC:2"},
+			true,
+		},
+		// More than 2 ellipses are supported as well.
+		{
+			"http://minio{2...3}/export/set{1...64}/test{1...2}",
+			[]string{"EC:8", "EC:7", "EC:6", "EC:5", "EC:4", "EC:3", "EC:2"},
+			true,
+		},
+		// More than 1 ellipses per argument for standalone setup.
+		{
+			"/export{1...10}/disk{1...10}",
+			[]string{"EC:5", "EC:4", "EC:3", "EC:2"},
+			true,
+		},
+		// IPv6 ellipses with hexadecimal expansion
+		{
+			"http://[2001:3984:3989::{1...a}]/disk{1...10}",
+			[]string{"EC:5", "EC:4", "EC:3", "EC:2"},
+			true,
+		},
+		// IPv6 ellipses with hexadecimal expansion with 3 position numerics.
+		{
+			"http://[2001:3984:3989::{001...00a}]/disk{1...10}",
+			[]string{"EC:5", "EC:4", "EC:3", "EC:2"},
+			true,
+		},
+	}
+
+	for _, testCase := range testCases {
+		testCase := testCase
+		t.Run("", func(t *testing.T) {
+			gotPs, err := PossibleParityValues(testCase.arg)
+			if err != nil && testCase.success {
+				t.Errorf("Expected success but failed instead %s", err)
+			}
+			if err == nil && !testCase.success {
+				t.Errorf("Expected failure but passed instead")
+			}
+			if !reflect.DeepEqual(testCase.parities, gotPs) {
+				t.Errorf("Expected %v, got %v", testCase.parities, gotPs)
+			}
+		})
+	}
+}

policies/mcsTestUserAddOnly.json

@@ -0,0 +1,15 @@
+{
+    "name": "consoleTestUserAddOnly",
+    "Statement": [
+        {
+            "Action": [
+                "admin:CreateUser"
+            ],
+            "Effect": "Allow",
+            "Resource": [
+                "arn:aws:s3:::*"
+            ]
+        }
+    ],
+    "version": "2012-10-17"
+}

portal-ui/config-overrides.js

@@ -0,0 +1,10 @@
+const rewireReactHotLoader = require('react-app-rewire-hot-loader');
+
+/* config-overrides.js */
+module.exports = function override(config, env) {
+    if (env === 'development') {
+        config.resolve.alias['react-dom'] = '@hot-loader/react-dom';
+    }
+    config = rewireReactHotLoader(config, env);
+    return config;
+};

portal-ui/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@babel/helper-create-regexp-features-plugin": "^7.7.4",
     "@babel/plugin-transform-react-jsx-development": "^7.9.0",
+    "@hot-loader/react-dom": "^16.9.0",
     "@material-ui/core": "^4.9.12",
     "@material-ui/icons": "^4.9.1",
     "@types/history": "^4.7.3",
@@ -27,25 +28,29 @@
     "local-storage-fallback": "^4.1.1",
     "lodash": "^4.17.19",
     "moment": "^2.24.0",
-    "npm": "^6.14.4",
     "react": "^16.13.1",
+    "react-app-rewire-hot-loader": "^2.0.1",
+    "react-app-rewired": "^2.1.6",
+    "react-async-hook": "^3.6.1",
     "react-chartjs-2": "^2.9.0",
     "react-codemirror2": "^7.1.0",
     "react-dom": "^16.12.0",
+    "react-hot-loader": "^4.13.0",
     "react-moment": "^0.9.7",
     "react-redux": "^7.1.3",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.1",
+    "react-scripts": "3.4.4",
     "recharts": "^1.8.5",
     "redux": "^4.0.4",
     "redux-thunk": "^2.3.0",
     "superagent": "^5.1.0",
     "typeface-roboto": "^0.0.75",
     "typescript": "3.6.4",
+    "use-debounce": "^5.0.1",
     "websocket": "^1.0.31"
   },
   "scripts": {
-    "start": "PORT=5000 react-scripts start",
+    "start": "PORT=5000 react-app-rewired start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

portal-ui/public/images/BG_IllustrationDarker.svg

@@ -0,0 +1,67 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 368.999 192.934">
+    <defs>
+        <style>
+            .cls-1{opacity:0.35;}.cls-12,.cls-15,.cls-16,.cls-17,.cls-2,.cls-5,.cls-6,.cls-7,.cls-8{opacity:0.5;}.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-9{fill:none;stroke:#707070;stroke-miterlimit:10;}.cls-4{stroke-width:1px;}.cls-10,.cls-11,.cls-5,.cls-9{stroke-width:1.2px;}.cls-5{stroke-dasharray:2.619
+            2.182;}.cls-12,.cls-15,.cls-16,.cls-17,.cls-5,.cls-6,.cls-7,.cls-8{isolation:isolate;}.cls-6{stroke-width:1.6px;stroke-dasharray:2.144
+            1.786;}.cls-7{stroke-width:1.6px;stroke-dasharray:2.23 1.858;}.cls-10{stroke-dasharray:2.646
+            2.204;}.cls-11{stroke-dasharray:2.585 2.154;}.cls-12{stroke-width:1.8px;stroke-dasharray:2.484
+            2.07;}.cls-13{stroke-dasharray:2.984 2.487;}.cls-14{stroke-dasharray:2.773
+            2.311;}.cls-16{stroke-width:1.8px;}.cls-17{stroke-width:1.8px;}
+        </style>
+    </defs>
+    <title>BG_Illustration</title>
+    <g id="Layer_2" data-name="Layer 2">
+        <g id="Layer_1-2" data-name="Layer 1">
+            <g id="BG_Illustration" data-name="BG Illustration" class="cls-1">
+                <g id="Group_118" data-name="Group 118" class="cls-2">
+                    <path id="Path_56" data-name="Path 56" class="cls-3"
+                          d="M211.5,140.678l-52.726,29.078L79.687,126.139V29.652L132.411.571,211.5,44.188Z"/>
+                    <path id="Path_58" data-name="Path 58" class="cls-3"
+                          d="M158.776,169.756V73.271L211.5,44.193,158.776,73.271,79.688,29.654"/>
+                    <path id="Path_59" data-name="Path 59" class="cls-4" d="M84.681,41l69.1,38.11v79.3l-69.1-38.11Z"/>
+                    <line id="Line_37" data-name="Line 37" class="cls-4" x1="106.25" y1="52.782" x2="106.25"
+                          y2="132.086"/>
+                    <line id="Line_38" data-name="Line 38" class="cls-4" x1="153.783" y1="92.327" x2="106.25"
+                          y2="65.999"/>
+                    <line id="Line_39" data-name="Line 39" class="cls-4" x1="153.783" y1="105.545" x2="106.25"
+                          y2="79.217"/>
+                    <line id="Line_40" data-name="Line 40" class="cls-4" x1="153.783" y1="118.762" x2="106.25"
+                          y2="92.434"/>
+                    <line id="Line_41" data-name="Line 41" class="cls-4" x1="153.783" y1="131.979" x2="106.25"
+                          y2="105.651"/>
+                    <line id="Line_42" data-name="Line 42" class="cls-4" x1="153.783" y1="145.197" x2="106.25"
+                          y2="118.869"/>
+                    <path id="Path_60" data-name="Path 60" class="cls-4"
+                          d="M166.723,151.031l38.8-22.487V62.916L166.723,85.4Z"/>
+                </g>
+                <path id="Path_62" data-name="Path 62" class="cls-5" d="M117.106,148.062l-76.18,43.33"/>
+                <path id="Path_63" data-name="Path 63" class="cls-6" d="M271.394,167.271l-44.483,25.3"/>
+                <path id="Path_64" data-name="Path 64" class="cls-7" d="M190.722,155.708l61.951,36.031"/>
+                <path id="Path_65" data-name="Path 65" class="cls-5" d="M237.7,36.385l28.182,17.229"/>
+                <g id="Path_66" data-name="Path 66" class="cls-8">
+                    <line class="cls-9" x1="362.563" y1="69.327" x2="361.42" y2="68.688"/>
+                    <line class="cls-10" x1="359.496" y1="67.613" x2="305.418" y2="37.39"/>
+                    <polyline class="cls-9" points="304.456 36.852 303.313 36.213 302.158 36.83"/>
+                    <line class="cls-11" x1="300.258" y1="37.844" x2="213.418" y2="84.213"/>
+                    <line class="cls-9" x1="212.468" y1="84.72" x2="211.313" y2="85.337"/>
+                </g>
+                <path id="Path_67" data-name="Path 67" class="cls-12"
+                      d="M79.648,192.571,31.786,166.344h-.868l-23.579,14.2"/>
+                <g id="Path_68" data-name="Path 68" class="cls-8">
+                    <line class="cls-3" x1="22.871" y1="84.641" x2="24.156" y2="83.867"/>
+                    <line class="cls-13" x1="26.286" y1="82.584" x2="48.654" y2="69.113"/>
+                    <polyline class="cls-3" points="49.719 68.471 51.004 67.698 52.307 68.441"/>
+                    <line class="cls-14" x1="54.315" y1="69.585" x2="75.395" y2="81.606"/>
+                    <line class="cls-3" x1="76.399" y1="82.178" x2="77.702" y2="82.921"/>
+                </g>
+                <circle id="Ellipse_11" data-name="Ellipse 11" class="cls-15" cx="4.092" cy="183.59" r="3.592"/>
+                <circle id="Ellipse_12" data-name="Ellipse 12" class="cls-15" cx="274.986" cy="165.477" r="3.592"/>
+                <ellipse id="Ellipse_13" data-name="Ellipse 13" class="cls-16" cx="364.957" cy="71.922" rx="3.592"
+                         ry="2.904"/>
+                <circle id="Ellipse_14" data-name="Ellipse 14" class="cls-15" cx="19.279" cy="87.681" r="3.592"/>
+                <ellipse id="Ellipse_15" data-name="Ellipse 15" class="cls-17" cx="234.106" cy="32.58" rx="3.592"
+                         ry="2.649"/>
+            </g>
+        </g>
+    </g>
+</svg>

portal-ui/src/Routes.tsx

@@ -15,7 +15,13 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Redirect, Route, Router, Switch } from "react-router-dom";
+import {
+  Redirect,
+  Route,
+  Router,
+  Switch,
+  BrowserRouter,
+} from "react-router-dom";
 import history from "./history";
 import Login from "./screens/LoginPage/LoginPage";
 import Console from "./screens/Console/Console";
@@ -25,6 +31,23 @@ import { connect } from "react-redux";
 import { AppState } from "./store";
 import { userLoggedIn } from "./actions";
 import LoginCallback from "./screens/LoginPage/LoginCallback";
+import { hot } from "react-hot-loader/root";
+
+interface ProtectedRouteProps {
+  loggedIn: boolean;
+  component: any;
+}
+
+export class ProtectedRoute extends React.Component<ProtectedRouteProps> {
+  render() {
+    const Component = this.props.component;
+    return this.props.loggedIn ? (
+      <Component />
+    ) : (
+      <Redirect to={{ pathname: "/login" }} />
+    );
+  }
+}
 
 const isLoggedIn = () => {
   return (
@@ -46,33 +69,18 @@ interface RoutesProps {
 }
 
 class Routes extends React.Component<RoutesProps> {
-  componentDidMount(): void {
-    if (isLoggedIn()) {
-      this.props.userLoggedIn(true);
-    }
-  }
-
   render() {
+    const loggedIn = isLoggedIn();
     return (
       <Router history={history}>
         <Switch>
           <Route exact path="/oauth_callback" component={LoginCallback} />
           <Route exact path="/login" component={Login} />
-          {this.props.loggedIn ? (
-            <Switch>
-              <Route path="/*" component={Console} />
-              <Route component={NotFoundPage} />
-            </Switch>
-          ) : (
-            <Switch>
-              <Route exact path="/" component={Login} />
-              <Redirect to="/" />
-            </Switch>
-          )}
+          <ProtectedRoute component={Console} loggedIn={loggedIn} />
         </Switch>
       </Router>
     );
   }
 }
 
-export default connector(Routes);
+export default hot(connector(Routes));

portal-ui/src/common/types.ts

@@ -0,0 +1,333 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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/>.
+
+/* Copyright (c) 2020 MinIO, Inc. All rights reserved. */
+
+export interface ITenantsObject {
+  tenants: ITenant[];
+}
+
+export interface ITenant {
+  creation_date: string;
+  deletion_date: string;
+  currentState: string;
+  image: string;
+  console_image: string;
+  instance_count: string;
+  name: string;
+  namespace?: string;
+  total_size: string;
+  used_size: string;
+  volume_count: string;
+  volume_size: string;
+  volumes_per_server?: string;
+  zone_count: string;
+  zones?: IZoneModel[];
+  used_capacity?: string;
+  endpoint?: string;
+  storage_class?: string;
+  enable_prometheus: boolean;
+}
+
+export interface IVolumeConfiguration {
+  size: string;
+  storage_class_name: string;
+  labels?: any;
+}
+
+export interface ITenantCreator {
+  name: string;
+  service_name: string;
+  enable_console: boolean;
+  enable_prometheus: boolean;
+  enable_tls: boolean;
+  access_key: string;
+  secret_key: string;
+  image: string;
+  console_image: string;
+  zones: IZoneModel[];
+  namespace: string;
+  erasureCodingParity: number;
+  tls?: ITLSTenantConfiguration;
+  encryption?: IEncryptionConfiguration;
+  idp?: IIDPConfiguration;
+  annotations?: Object;
+}
+
+export interface ITenantUpdateObject {
+  image: string;
+  image_registry?: IRegistryObject;
+}
+
+export interface IRegistryObject {
+  registry: string;
+  username: string;
+  password: string;
+}
+
+export interface ITenantUsage {
+  used: string;
+  disk_used: string;
+}
+
+export interface IAffinityModel {
+  podAntiAffinity: IPodAntiAffinityModel;
+}
+
+export interface IPodAntiAffinityModel {
+  requiredDuringSchedulingIgnoredDuringExecution: IPodAffinityTerm[];
+}
+
+export interface IPodAffinityTerm {
+  labelSelector: IPodAffinityTermLabelSelector;
+  topologyKey: string;
+}
+
+export interface IPodAffinityTermLabelSelector {
+  matchExpressions: IMatchExpressionItem[];
+}
+
+export interface IMatchExpressionItem {
+  key: string;
+  operator: string;
+  values: string[];
+}
+
+export interface ITolerationModel {
+  effect: string;
+  key: string;
+  operator: string;
+  value?: string;
+  tolerationSeconds?: ITolerationSeconds;
+}
+
+export interface ITolerationSeconds {
+  seconds: number;
+}
+
+export interface IResourceModel {
+  requests: IResourceRequests;
+  limits?: IResourceLimits;
+}
+
+export interface IResourceRequests {
+  memory: number;
+}
+
+export interface IResourceLimits {
+  memory: number;
+}
+
+export interface ITLSTenantConfiguration {
+  minio: ITLSConfiguration;
+  console: ITLSConfiguration;
+}
+
+export interface ITLSConfiguration {
+  crt: string;
+  key: string;
+}
+
+export interface IEncryptionConfiguration {
+  server: ITLSConfiguration;
+  client: ITLSConfiguration;
+  master_key?: string;
+  gemalto?: IGemaltoConfig;
+  aws?: IAWSConfig;
+  vault?: IVaultConfig;
+}
+
+export interface IVaultConfig {
+  endpoint: string;
+  engine?: string;
+  namespace?: string;
+  prefix?: string;
+  approle: IApproleConfig;
+  tls: IVaultTLSConfig;
+  status: IVaultStatusConfig;
+}
+
+export interface IGemaltoConfig {
+  keysecure: IKeysecureConfig;
+}
+
+export interface IAWSConfig {
+  secretsmanager: ISecretsManagerConfig;
+}
+
+export interface IApproleConfig {
+  engine: string;
+  id: string;
+  secret: string;
+  retry: number;
+}
+
+export interface IVaultTLSConfig {
+  key: string;
+  crt: string;
+  ca: string;
+}
+
+export interface IVaultStatusConfig {
+  ping: number;
+}
+
+export interface IKeysecureConfig {
+  endpoint: string;
+  credentials: IGemaltoCredentials;
+  tls: IGemaltoTLS;
+}
+
+export interface IGemaltoCredentials {
+  token: string;
+  domain: string;
+  retry?: number;
+}
+
+export interface IGemaltoTLS {
+  ca: string;
+}
+
+export interface ISecretsManagerConfig {
+  endpoint: string;
+  region: string;
+  kmskey?: string;
+  credentials: IAWSCredentials;
+}
+
+export interface IAWSCredentials {
+  accesskey: string;
+  secretkey: string;
+  token?: string;
+}
+
+export interface IIDPConfiguration {
+  oidc?: IOpenIDConfiguration;
+  active_directory: IActiveDirectoryConfiguration;
+}
+
+export interface IOpenIDConfiguration {
+  url: string;
+  client_id: string;
+  secret_id: string;
+}
+
+export interface IActiveDirectoryConfiguration {
+  url: string;
+  skip_tls_verification: boolean;
+  server_insecure: boolean;
+  user_search_filter: string;
+  group_Search_base_dn: string;
+  group_search_filter: string;
+  group_name_attribute: string;
+}
+
+export interface IStorageDistribution {
+  error: number;
+  nodes: number;
+  persistentVolumes: number;
+  disks: number;
+  pvSize: number;
+}
+
+export interface IErasureCodeCalc {
+  error: number;
+  maxEC: string;
+  erasureCodeSet: number;
+  rawCapacity: string;
+  storageFactors: IStorageFactors[];
+  defaultEC: string;
+}
+
+export interface IStorageFactors {
+  erasureCode: string;
+  storageFactor: number;
+  maxCapacity: string;
+}
+
+export interface ITenantHealthInList {
+  name: string;
+  namespace: string;
+  status?: string;
+  message?: string;
+}
+
+export interface ITenantsListHealthRequest {
+  tenants: ITenantHealthInList[];
+}
+
+export interface IMaxAllocatableMemoryRequest {
+  num_nodes: number;
+}
+
+export interface IMaxAllocatableMemoryResponse {
+  max_memory: number;
+}
+
+export interface IEncryptionUpdateRequest {
+  encryption: IEncryptionConfiguration;
+}
+
+export interface IArchivedTenantsList {
+  tenants: IArchivedTenant[];
+}
+
+export interface IArchivedTenant {
+  namespace: string;
+  tenant: string;
+  number_volumes: number;
+  capacity: number;
+}
+
+export interface IZoneModel {
+  name?: string;
+  servers: number;
+  volumes_per_server: number;
+  volume_configuration: IVolumeConfiguration;
+  affinity?: IAffinityModel;
+  tolerations?: ITolerationModel[];
+  resources?: IResourceModel;
+}
+
+export interface IUpdateZone {
+  zones: IZoneModel[];
+}
+
+export interface INode {
+  name: string;
+  freeSpace: string;
+  totalSpace: string;
+  disks: IDisk[];
+}
+
+export interface IStorageType {
+  freeSpace: string;
+  totalSpace: string;
+  storageClasses: string[];
+  nodes: INode[];
+  schedulableNodes: INode[];
+}
+
+export interface IDisk {
+  name: string;
+  freeSpace: string;
+  totalSpace: string;
+}
+
+export interface ICapacity {
+  value: string;
+  unit: string;
+}

portal-ui/src/common/utils.ts

@@ -15,6 +15,10 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import storage from "local-storage-fallback";
+import { ICapacity, IStorageType, IZoneModel } from "./types";
+
+const minStReq = 1073741824; // Minimal Space required for MinIO
+const minMemReq = 2147483648; // Minimal Memory required for MinIO in bytes
 
 export const units = [
   "B",
@@ -28,6 +32,8 @@ export const units = [
   "YiB",
 ];
 export const k8sUnits = ["Ki", "Mi", "Gi", "Ti", "Pi", "Ei"];
+export const k8sCalcUnits = ["B", ...k8sUnits];
+
 export const niceBytes = (x: string) => {
   let l = 0,
     n = parseInt(x, 10) || 0;
@@ -90,12 +96,19 @@ export const k8sfactorForDropdown = () => {
 };
 
 //getBytes, converts from a value and a unit from units array to bytes
-export const getBytes = (value: string, unit: string) => {
+export const getBytes = (
+  value: string,
+  unit: string,
+  fork8s: boolean = false
+) => {
   const vl: number = parseFloat(value);
-  const powFactor = units.findIndex((element) => element === unit);
 
-  if (powFactor == -1) {
-    return 0;
+  const unitsTake = fork8s ? k8sCalcUnits : units;
+
+  const powFactor = unitsTake.findIndex((element) => element === unit);
+
+  if (powFactor === -1) {
+    return "0";
   }
   const factor = Math.pow(1024, powFactor);
   const total = vl * factor;
@@ -105,6 +118,220 @@ export const getBytes = (value: string, unit: string) => {
 
 //getTotalSize gets the total size of a value & unit
 export const getTotalSize = (value: string, unit: string) => {
-  const bytes = getBytes(value, unit).toString(10);
+  const bytes = getBytes(value, unit, true).toString();
   return niceBytes(bytes);
 };
+
+export const setMemoryResource = (
+  memorySize: number,
+  capacitySize: string,
+  maxMemorySize: number
+) => {
+  // value always comes as Gi
+  const requestedSizeBytes = getBytes(memorySize.toString(10), "Gi", true);
+  const memReqSize = parseInt(requestedSizeBytes, 10);
+  if (maxMemorySize === 0) {
+    return {
+      error: "There is no memory available for the selected number of nodes",
+      request: 0,
+      limit: 0,
+    };
+  }
+
+  if (maxMemorySize < minMemReq) {
+    return {
+      error: "There are not enough memory resources available",
+      request: 0,
+      limit: 0,
+    };
+  }
+
+  if (memReqSize < minMemReq) {
+    return {
+      error: "The requested memory size must be greater than 2Gi",
+      request: 0,
+      limit: 0,
+    };
+  }
+  if (memReqSize > maxMemorySize) {
+    return {
+      error:
+        "The requested memory is greater than the max available memory for the selected number of nodes",
+      request: 0,
+      limit: 0,
+    };
+  }
+
+  const capSize = parseInt(capacitySize, 10);
+  let memLimitSize = memReqSize;
+  // set memory limit based on the capacitySize
+  // if capacity size is lower than 1TiB we use the limit equal to request
+  if (capSize >= parseInt(getBytes("1", "Pi", true), 10)) {
+    memLimitSize = Math.max(
+      memReqSize,
+      parseInt(getBytes("64", "Gi", true), 10)
+    );
+  } else if (capSize >= parseInt(getBytes("100", "Ti"), 10)) {
+    memLimitSize = Math.max(
+      memReqSize,
+      parseInt(getBytes("32", "Gi", true), 10)
+    );
+  } else if (capSize >= parseInt(getBytes("10", "Ti"), 10)) {
+    memLimitSize = Math.max(
+      memReqSize,
+      parseInt(getBytes("16", "Gi", true), 10)
+    );
+  } else if (capSize >= parseInt(getBytes("1", "Ti"), 10)) {
+    memLimitSize = Math.max(
+      memReqSize,
+      parseInt(getBytes("8", "Gi", true), 10)
+    );
+  }
+
+  return {
+    error: "",
+    request: memReqSize,
+    limit: memLimitSize,
+  };
+};
+
+export const calculateDistribution = (
+  capacityToUse: ICapacity,
+  forcedNodes: number = 0,
+  limitSize: number = 0
+) => {
+  let numberOfNodes = {};
+  const requestedSizeBytes = getBytes(
+    capacityToUse.value,
+    capacityToUse.unit,
+    true
+  );
+
+  if (parseInt(requestedSizeBytes, 10) < minStReq) {
+    return {
+      error: "The zone size must be greater than 1Gi",
+      nodes: 0,
+      persistentVolumes: 0,
+      disks: 0,
+      pvSize: 0,
+    };
+  }
+
+  if (forcedNodes < 4) {
+    return {
+      error: "Number of nodes cannot be less than 4",
+      nodes: 0,
+      persistentVolumes: 0,
+      disks: 0,
+      pvSize: 0,
+    };
+  }
+
+  numberOfNodes = calculateStorage(requestedSizeBytes, forcedNodes, limitSize);
+
+  return numberOfNodes;
+};
+
+const calculateStorage = (
+  requestedBytes: string,
+  forcedNodes: number,
+  limitSize: number
+) => {
+  // Size validation
+  const intReqBytes = parseInt(requestedBytes, 10);
+  const maxDiskSize = minStReq * 256; // 256 GiB
+
+  // We get the distribution
+  return structureCalc(forcedNodes, intReqBytes, maxDiskSize, limitSize);
+};
+
+const structureCalc = (
+  nodes: number,
+  desiredCapacity: number,
+  maxDiskSize: number,
+  maxClusterSize: number,
+  disksPerNode: number = 0
+) => {
+  if (
+    isNaN(nodes) ||
+    isNaN(desiredCapacity) ||
+    isNaN(maxDiskSize) ||
+    isNaN(maxClusterSize)
+  ) {
+    return {
+      error: "Some provided data is invalid, please try again.",
+      nodes: 0,
+      persistentVolumes: 0,
+      disks: 0,
+      volumePerDisk: 0,
+    }; // Invalid Data
+  }
+
+  let persistentVolumeSize = 0;
+  let numberPersistentVolumes = 0;
+  let volumesPerServer = 0;
+
+  if (disksPerNode === 0) {
+    persistentVolumeSize = Math.floor(
+      Math.min(desiredCapacity / Math.max(4, nodes), maxDiskSize)
+    ); // pVS = min((desiredCapacity / max(4 | nodes)) | maxDiskSize)
+
+    numberPersistentVolumes = desiredCapacity / persistentVolumeSize; // nPV = dC / pVS
+    volumesPerServer = numberPersistentVolumes / nodes; // vPS = nPV / n
+  }
+
+  if (disksPerNode) {
+    volumesPerServer = disksPerNode;
+    numberPersistentVolumes = volumesPerServer * nodes;
+    persistentVolumeSize = Math.floor(
+      desiredCapacity / numberPersistentVolumes
+    );
+  }
+
+  // Volumes are not exact, we force the volumes number & minimize the volume size
+  if (volumesPerServer % 1 > 0) {
+    volumesPerServer = Math.ceil(volumesPerServer); // Increment of volumes per server
+    numberPersistentVolumes = volumesPerServer * nodes; // nPV = vPS * n
+    persistentVolumeSize = Math.floor(
+      desiredCapacity / numberPersistentVolumes
+    ); // pVS = dC / nPV
+
+    const limitSize = persistentVolumeSize * volumesPerServer * nodes; // lS = pVS * vPS * n
+
+    if (limitSize > maxClusterSize) {
+      return {
+        error: "We were not able to allocate this server.",
+        nodes: 0,
+        persistentVolumes: 0,
+        disks: 0,
+        volumePerDisk: 0,
+      }; // Cannot allocate this server
+    }
+  }
+
+  if (persistentVolumeSize < minStReq) {
+    return {
+      error:
+        "Disk Size with this combination would be less than 1Gi, please try another combination",
+      nodes: 0,
+      persistentVolumes: 0,
+      disks: 0,
+      volumePerDisk: 0,
+    }; // Cannot allocate this volume size
+  }
+
+  return {
+    error: "",
+    nodes,
+    persistentVolumes: numberPersistentVolumes,
+    disks: volumesPerServer,
+    pvSize: persistentVolumeSize,
+  };
+};
+
+// Zone Name Generator
+export const generateZoneName = (zones: IZoneModel[]) => {
+  const zoneCounter = zones.length;
+
+  return `zone-${zoneCounter}`;
+};

portal-ui/src/icons/AddIcon.tsx

@@ -0,0 +1,34 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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 from "react";
+import { SvgIcon } from "@material-ui/core";
+class AddIcon extends React.Component {
+  render() {
+    return (
+      <SvgIcon viewBox="0 0 12 12">
+        <path
+          fill="#081c42"
+          className="a"
+          d="M-13160.269,1885.114h-3.235v-4.381h-4.382V1877.5h4.382v-4.381h3.235v4.381h4.383v3.238h-4.383v4.38Z"
+          transform="translate(13167.886 -1873.114)"
+        />
+      </SvgIcon>
+    );
+  }
+}
+
+export default AddIcon;

portal-ui/src/icons/AllBucketsIcon.tsx

@@ -0,0 +1,75 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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 from "react";
+import { SvgIcon } from "@material-ui/core";
+class AllBucketsIcon extends React.Component {
+  render() {
+    return (
+      <SvgIcon viewBox="0 0 15.834 17.375">
+        <defs>
+          <linearGradient
+            id="a"
+            y1="0.5"
+            x2="1"
+            y2="0.5"
+            gradientUnits="objectBoundingBox"
+          >
+            <stop offset="0.044" stopColor="#362585" />
+            <stop offset="0.301" stopColor="#281b6f" />
+            <stop offset="1" stopColor="#1e1560" />
+          </linearGradient>
+        </defs>
+        <g transform="translate(0 0.375)">
+          <circle
+            style={{ opacity: 0.1, fill: "url(#a)" }}
+            cx="6.625"
+            cy="6.625"
+            r="6.625"
+            transform="translate(0 3.75)"
+          />
+          <g transform="translate(3.092)">
+            <ellipse
+              style={{
+                fill: "none",
+                stroke: "#707070",
+                strokeMiterlimit: 10,
+                strokeWidth: "0.75px",
+              }}
+              cx="6.183"
+              cy="1.244"
+              rx="6.183"
+              ry="1.244"
+              transform="translate(0)"
+            />
+            <path
+              style={{
+                fill: "none",
+                stroke: "#707070",
+                strokeMiterlimit: 10,
+                strokeWidth: "0.75px",
+              }}
+              d="M-3722.174,1225.225l-1.687,10.292a.858.858,0,0,1-.578.669,12.182,12.182,0,0,1-3.918.647,12.187,12.187,0,0,1-3.894-.639.878.878,0,0,1-.6-.678q-.843-5.145-1.687-10.291"
+              transform="translate(3734.541 -1223.981)"
+            />
+          </g>
+        </g>
+      </SvgIcon>
+    );
+  }
+}
+
+export default AllBucketsIcon;

portal-ui/src/icons/ConsoleIcon.tsx

@@ -0,0 +1,37 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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 from "react";
+import { SvgIcon } from "@material-ui/core";
+class ConsoleIcon extends React.Component {
+  render() {
+    return (
+      <SvgIcon>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
+          <g transform="translate(-518 -361)">
+            <path
+              d="M-126,0V10h10V0Zm1.5,8.5V2.95h7V8.5Z"
+              transform="translate(644 361)"
+            />
+            <rect width="2" height="1" transform="translate(520.272 364.772)" />
+          </g>
+        </svg>
+      </SvgIcon>
+    );
+  }
+}
+
+export default ConsoleIcon;

portal-ui/src/icons/EgressIcon.tsx

@@ -0,0 +1,73 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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 from "react";
+import { SvgIcon } from "@material-ui/core";
+class EgressIcon extends React.Component {
+  render() {
+    return (
+      <SvgIcon viewBox="0 0 18.344 17.009">
+        <defs>
+          <linearGradient
+            id="a"
+            y1="0.5"
+            x2="1"
+            y2="0.5"
+            gradientUnits="objectBoundingBox"
+          >
+            <stop offset="0.044" stopColor="#362585" />
+            <stop offset="0.301" stopColor="#281b6f" />
+            <stop offset="1" stopColor="#1e1560" />
+          </linearGradient>
+        </defs>
+        <g transform="translate(0 0.25)">
+          <ellipse
+            style={{ opacity: 0.1, fill: "url(#a)" }}
+            cx="7.462"
+            cy="7.462"
+            rx="7.462"
+            ry="7.462"
+            transform="translate(0 1.835)"
+          />
+          <rect
+            style={{
+              fill: "none",
+              stroke: "#707070",
+              strokeMiterlimit: 10,
+              strokeWidth: "0.5px",
+            }}
+            width="9.323"
+            height="9.323"
+            transform="translate(4.083)"
+          />
+          <rect
+            style={{
+              fill: "none",
+              stroke: "#707070",
+              strokeMiterlimit: 10,
+              strokeWidth: "0.5px",
+            }}
+            width="8.223"
+            height="8.223"
+            transform="translate(9.871 5.307)"
+          />
+        </g>
+      </SvgIcon>
+    );
+  }
+}
+
+export default EgressIcon;

portal-ui/src/icons/HealIcon.tsx

@@ -0,0 +1,53 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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 from "react";
+import { SvgIcon } from "@material-ui/core";
+class HealIcon extends React.Component {
+  render() {
+    return (
+      <SvgIcon>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10.014 9.993">
+          <path
+            className="a"
+            d="M9.162,5.971h0L8.192,5,9.346,3.846a2.257,2.257,0,0,0,0-3.192,2.311,2.311,0,0,0-3.192,0L5,1.808,4.029.837,3.846.654a2.311,2.311,0,0,0-3.192,0,2.257,2.257,0,0,0,0,3.192l.184.183h0L1.808,5,.654,6.154A2.257,2.257,0,0,0,3.846,9.346L5,8.192l.971.971.183.183A2.257,2.257,0,0,0,9.346,6.154Zm-2.29-4.6a1.27,1.27,0,0,1,1.757,0,1.242,1.242,0,0,1,0,1.757L7.475,4.283,5.717,2.525Zm-5.5,1.757A1.243,1.243,0,0,1,3.129,1.371l.183.183L1.555,3.312Zm1.757,5.5a1.27,1.27,0,0,1-1.757,0,1.242,1.242,0,0,1,0-1.757L2.525,5.717,4.283,7.475Zm2.843-.9-.254-.253L2.525,4.283l-.253-.254L4.029,2.272l.254.253L7.475,5.717l.253.254Zm2.657.9a1.271,1.271,0,0,1-1.757,0l-.183-.183L8.446,6.688l.183.183h0a1.241,1.241,0,0,1,0,1.757Z"
+            transform="translate(0.007 -0.014)"
+          />
+          <circle
+            cx="0.5"
+            cy="0.5"
+            r="0.5"
+            transform="translate(4.507 4.486)"
+          />
+          <circle
+            cx="0.5"
+            cy="0.5"
+            r="0.5"
+            transform="translate(3.507 3.486)"
+          />
+          <circle
+            cx="0.5"
+            cy="0.5"
+            r="0.5"
+            transform="translate(5.507 5.486)"
+          />
+        </svg>
+      </SvgIcon>
+    );
+  }
+}
+
+export default HealIcon;

portal-ui/src/icons/LicenseIcon.tsx

@@ -0,0 +1,47 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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 from "react";
+import { SvgIcon } from "@material-ui/core";
+
+class LicenseIcon extends React.Component {
+  render() {
+    return (
+      <SvgIcon>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 11">
+          <path fill="#fff" d="M11 11H0V2h11v9zM2 8v1h7V8zm0-3v1h5V5z"></path>
+          <g
+            fill="#07274a"
+            stroke="#fdfdfd"
+            strokeWidth="0.5"
+            transform="translate(7)"
+          >
+            <circle cx="3" cy="3" r="3" stroke="none"></circle>
+            <circle cx="3" cy="3" r="2.75" fill="none"></circle>
+          </g>
+          <path
+            fill="none"
+            stroke="#fff"
+            strokeWidth="0.5"
+            d="M8.73 2.794l.954.953 1.471-1.471"
+          ></path>
+        </svg>
+      </SvgIcon>
+    );
+  }
+}
+
+export default LicenseIcon;

portal-ui/src/icons/LogoutIcon.tsx

@@ -0,0 +1,47 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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 from "react";
+import { SvgIcon } from "@material-ui/core";
+class LogoutIcon extends React.Component {
+  render() {
+    return (
+      <SvgIcon>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.122 10.571">
+          <g transform="translate(0 0.5)">
+            <path
+              style={{ fill: "none", stroke: "rgba(255,255,255,0.8)" }}
+              d="M4816.27,3755.205v-2.939h8.539v9.571h-8.539v-2.932"
+              transform="translate(-4813.187 -3752.266)"
+            />
+            <path
+              style={{ fill: "none", stroke: "rgba(255,255,255,0.8)" }}
+              d="M4813.187,3757.052h8.081"
+              transform="translate(-4813.187 -3752.266)"
+            />
+            <path
+              style={{ fill: "none", stroke: "rgba(255,255,255,0.8)" }}
+              d="M4806.5,3756.511l2.265,2.063-2.265,2.063"
+              transform="translate(-4800.808 -3753.863)"
+            />
+          </g>
+        </svg>
+      </SvgIcon>
+    );
+  }
+}
+
+export default LogoutIcon;

portal-ui/src/icons/RemoveIcon.tsx

@@ -0,0 +1,33 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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 from "react";
+import { SvgIcon } from "@material-ui/core";
+class RemoveIcon extends React.Component {
+  render() {
+    return (
+      <SvgIcon viewBox="0 0 11.656 3.101">
+        <path
+          fill="#081c42"
+          d="M-13157.172,1879.551h-11.656v-3.1h11.656v3.1Z"
+          transform="translate(13168.828 -1876.449)"
+        />
+      </SvgIcon>
+    );
+  }
+}
+
+export default RemoveIcon;

portal-ui/src/icons/UsageIcon.tsx

@@ -0,0 +1,64 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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 from "react";
+import { SvgIcon } from "@material-ui/core";
+class UsageIcon extends React.Component {
+  render() {
+    return (
+      <SvgIcon viewBox="0 0 16.172 17.187">
+        <defs>
+          <linearGradient
+            id="a"
+            y1="0.5"
+            x2="1"
+            y2="0.5"
+            gradientUnits="objectBoundingBox"
+          >
+            <stop offset="0.044" stopColor="#362585" />
+            <stop offset="0.301" stopColor="#281b6f" />
+            <stop offset="1" stopColor="#1e1560" />
+          </linearGradient>
+        </defs>
+        <path
+          style={{
+            fill: "none",
+            stroke: "#707070",
+            strokeMiterlimit: 10,
+            strokeWidth: "0.5px",
+          }}
+          d="M-4778.1,2239.582v6.425h6.425"
+          transform="translate(4787.594 -2239.582)"
+        />
+        <path
+          fill={"#707070"}
+          d="M-4784.238,2247.532v-.581c0-.027.009-.054.012-.081.039-.313.055-.632.121-.939a6.744,6.744,0,0,1,3.064-4.441,6.514,6.514,0,0,1,3.293-1.032,6.923,6.923,0,0,1,2.667.423,6.793,6.793,0,0,1,4.119,4.333,6.053,6.053,0,0,1,.279,1.337c.006.083.014.164.021.247v.86c-.011.131-.018.261-.032.392a6.494,6.494,0,0,1-.626,2.147,6.807,6.807,0,0,1-4.044,3.528,6.052,6.052,0,0,1-1.663.3,6.576,6.576,0,0,1-2.565-.325,6.73,6.73,0,0,1-3.947-3.451,6.627,6.627,0,0,1-.658-2.288C-4784.212,2247.816-4784.225,2247.674-4784.238,2247.532Zm13.025-.306c-.024-.309-.021-.661-.082-1a6.206,6.206,0,0,0-1.658-3.293,6.153,6.153,0,0,0-4.1-1.9,5.984,5.984,0,0,0-2.476.355,6.188,6.188,0,0,0-4.134,5.708,6.453,6.453,0,0,0,.228,1.881,6.127,6.127,0,0,0,1.984,3.052,6.046,6.046,0,0,0,3.806,1.445,6.043,6.043,0,0,0,1.235-.065,6.249,6.249,0,0,0,3.783-2.2,6.2,6.2,0,0,0,1.352-3.048C-4771.228,2247.863-4771.233,2247.563-4771.212,2247.226Z"
+          transform="translate(4786.834 -2240.452)"
+        />
+        <ellipse
+          style={{ opacity: 0.1, fill: "url(#a)" }}
+          cx="6.151"
+          cy="6.151"
+          rx="6.151"
+          ry="6.151"
+          transform="translate(0 4.886)"
+        />
+      </SvgIcon>
+    );
+  }
+}
+
+export default UsageIcon;

portal-ui/src/icons/minio_console_logo.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.879 23.119"><defs><style>.cls-1{fill:#1b1556;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M10.086,13.4,8.969,14.573a4.2,4.2,0,0,0-3.01-1.279,3.886,3.886,0,0,0-3.884,4.093,3.888,3.888,0,0,0,3.884,4.1A4.4,4.4,0,0,0,9,20.2l1.082,1.186A5.344,5.344,0,0,1,6,23.119a5.512,5.512,0,0,1-5.7-5.732A5.509,5.509,0,0,1,6,11.667,5.328,5.328,0,0,1,10.086,13.4Z"/><path class="cls-1" d="M23.608,17.387a5.637,5.637,0,0,1-5.8,5.732,5.628,5.628,0,0,1-5.791-5.732,5.626,5.626,0,0,1,5.791-5.72A5.635,5.635,0,0,1,23.608,17.387Zm-9.825,0a4.024,4.024,0,1,0,8.046,0,4.024,4.024,0,1,0-8.046,0Z"/><path class="cls-1" d="M36.862,16.073V22.9H35.129V16.643c0-2.093-1.163-3.325-3.174-3.325a3.24,3.24,0,0,0-3.371,3.372V22.9H26.839V11.888H28.56v1.569a4.354,4.354,0,0,1,3.709-1.79A4.261,4.261,0,0,1,36.862,16.073Z"/><path class="cls-1" d="M48.2,14.225a6.872,6.872,0,0,0-3.605-1.035c-1.569,0-2.6.663-2.6,1.732,0,.919.8,1.372,2.244,1.547l1.3.163c2.338.3,3.7,1.267,3.7,3.069,0,2.093-1.884,3.407-4.849,3.407A7.725,7.725,0,0,1,39.791,21.7l.8-1.3a5.8,5.8,0,0,0,3.815,1.2c1.86,0,3.034-.616,3.034-1.778,0-.884-.744-1.419-2.3-1.605l-1.314-.151c-2.477-.3-3.639-1.408-3.639-3.046,0-2.082,1.755-3.338,4.4-3.338a8.067,8.067,0,0,1,4.372,1.2Z"/><path class="cls-1" d="M63.033,17.387a5.8,5.8,0,0,1-11.593,0,5.8,5.8,0,0,1,11.593,0Zm-9.825,0a4.023,4.023,0,1,0,8.045,0,4.023,4.023,0,1,0-8.045,0Z"/><path class="cls-1" d="M68.008,22.9H66.264V6.155h1.744Z"/><path class="cls-1" d="M81.879,17.353a5.606,5.606,0,0,1-.035.65H73.019a3.743,3.743,0,0,0,3.9,3.593A5.1,5.1,0,0,0,80.4,20.213l.931,1.186a6.179,6.179,0,0,1-4.524,1.72A5.394,5.394,0,0,1,71.24,17.4a5.406,5.406,0,0,1,5.465-5.732C79.693,11.667,81.856,14,81.879,17.353ZM73.043,16.6h7.069a3.446,3.446,0,0,0-3.442-3.384A3.59,3.59,0,0,0,73.043,16.6Z"/><rect class="cls-1" x="13.484" y="0.12" width="2.328" height="6.875"/><path class="cls-1" d="M10.662.215,5.936,3.1a.21.21,0,0,1-.219,0L.992.215A.651.651,0,0,0,.654.12H.648A.648.648,0,0,0,0,.768v6.22H2.327V4.028a.233.233,0,0,1,.354-.2l2.648,1.62a.829.829,0,0,0,.853.008l2.8-1.639a.232.232,0,0,1,.35.2V6.988h2.327V.768A.648.648,0,0,0,11.006.12H11A.651.651,0,0,0,10.662.215Z"/><path class="cls-1" d="M27.422.12H25.061V3.25a.233.233,0,0,1-.342.205L18.6.2A.662.662,0,0,0,18.3.12h0a.648.648,0,0,0-.648.648v6.22h2.342V3.863a.233.233,0,0,1,.342-.206L26.47,6.915a.646.646,0,0,0,.3.076h0a.648.648,0,0,0,.648-.648Z"/><path class="cls-1" d="M29.252,7V.12h1.072V7Z"/><path class="cls-1" d="M36.629,7.119c-2.882,0-4.927-1.368-4.927-3.56S33.759,0,36.629,0s4.938,1.367,4.938,3.559S39.547,7.119,36.629,7.119Zm0-6.208c-2.143,0-3.794.936-3.794,2.648s1.651,2.648,3.794,2.648,3.805-.923,3.805-2.648S38.772.911,36.629.911Z"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="121.755" height="29.822" viewBox="0 0 121.755 29.822"><defs><style>.a{fill:#fff;}</style></defs><g transform="translate(3016.56 -1037.757)"><path class="a" d="M-3000.913,1053.692l-1.772,1.194a6.088,6.088,0,0,0-5.135-2.652,6.348,6.348,0,0,0-6.522,6.654,6.348,6.348,0,0,0,6.522,6.654,6.031,6.031,0,0,0,5.124-2.64l1.735,1.266a8.126,8.126,0,0,1-6.859,3.411,8.422,8.422,0,0,1-8.74-8.691,8.422,8.422,0,0,1,8.74-8.691A7.963,7.963,0,0,1-3000.913,1053.692Z"/><path class="a" d="M-2980.919,1058.888a8.422,8.422,0,0,1-8.74,8.691,8.422,8.422,0,0,1-8.739-8.691,8.421,8.421,0,0,1,8.739-8.691A8.422,8.422,0,0,1-2980.919,1058.888Zm-15.261,0a6.347,6.347,0,0,0,6.521,6.654,6.347,6.347,0,0,0,6.521-6.654,6.347,6.347,0,0,0-6.521-6.654A6.347,6.347,0,0,0-2996.18,1058.888Z"/><path class="a" d="M-2962.831,1067.338h-1.917l-10.2-13.26-.012,13.248h-2.122v-16.888h1.917l10.21,13.26V1050.45h2.122Z"/><path class="a" d="M-2947.009,1053.777a8.835,8.835,0,0,0-5-1.555c-2.471,0-4.231,1.109-4.231,2.929,0,1.531,1.29,2.315,3.821,2.628l1.484.181c2.856.35,5.3,1.507,5.3,4.484,0,3.364-3.05,5.123-6.7,5.123a10.935,10.935,0,0,1-6.654-2.194l1.157-1.687a9.018,9.018,0,0,0,5.5,1.868c2.519,0,4.5-1.025,4.5-2.929,0-1.567-1.41-2.314-4.038-2.64l-1.567-.193c-2.784-.337-5-1.627-5-4.508,0-3.255,2.893-5.075,6.449-5.075a10.336,10.336,0,0,1,6.076,1.844Z"/><path class="a" d="M-2925.292,1058.888a8.422,8.422,0,0,1-8.74,8.691,8.422,8.422,0,0,1-8.739-8.691,8.421,8.421,0,0,1,8.739-8.691A8.422,8.422,0,0,1-2925.292,1058.888Zm-15.261,0a6.348,6.348,0,0,0,6.521,6.654,6.347,6.347,0,0,0,6.521-6.654,6.347,6.347,0,0,0-6.521-6.654A6.348,6.348,0,0,0-2940.553,1058.888Z"/><path class="a" d="M-2909.663,1067.326h-11.79V1050.45h2.122v14.863h9.668Z"/><path class="a" d="M-2894.8,1067.326h-11.982V1050.45h11.862v1.988h-9.74v5.389h9.427v2h-9.427v5.509h9.86Z"/><rect class="a" width="2.576" height="7.547" transform="translate(-3001.66 1037.924)"/><path class="a" d="M-3004.759,1037.995l-5.23,3.194a.229.229,0,0,1-.242,0l-5.23-3.194a.726.726,0,0,0-.374-.1h-.006a.717.717,0,0,0-.717.717v6.864h2.574v-3.257a.258.258,0,0,1,.392-.22l2.931,1.793a.919.919,0,0,0,.944.009l3.092-1.814a.258.258,0,0,1,.388.222v3.267h2.575v-6.864a.717.717,0,0,0-.717-.717h-.006A.723.723,0,0,0-3004.759,1037.995Z"/><path class="a" d="M-2986.212,1037.922h-2.613v3.463a.258.258,0,0,1-.379.228l-6.771-3.607a.723.723,0,0,0-.337-.084h0a.717.717,0,0,0-.717.717v6.832h2.592v-3.408a.258.258,0,0,1,.379-.227l6.8,3.606a.714.714,0,0,0,.336.083h0a.716.716,0,0,0,.717-.717v-6.886Z"/><path class="a" d="M-2984.121,1045.469v-7.547h1.2v7.547Z"/><path class="a" d="M-2976.024,1045.635c-3.189,0-5.451-1.513-5.451-3.939s2.276-3.939,5.451-3.939,5.466,1.513,5.466,3.939S-2972.794,1045.635-2976.024,1045.635Zm0-6.87c-2.371,0-4.2,1.036-4.2,2.931s1.826,2.93,4.2,2.93,4.212-1.022,4.212-2.93S-2973.652,1038.765-2976.024,1038.765Z"/></g></svg>

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

@@ -1,4 +1,4 @@
-// This file is part of MinIO Buckets Server
+// This file is part of MinIO Console Server
 // Copyright (c) 2020 MinIO, Inc.
 //
 // This program is free software: you can redistribute it and/or modify
@@ -19,7 +19,7 @@ import {
   createStyles,
   StyledProps,
   Theme,
-  withStyles
+  withStyles,
 } from "@material-ui/core/styles";
 
 import history from "../../../history";
@@ -28,7 +28,7 @@ import {
   RouteComponentProps,
   Router,
   Switch,
-  withRouter
+  withRouter,
 } from "react-router-dom";
 import { connect } from "react-redux";
 import { AppState } from "../../../store";
@@ -41,62 +41,62 @@ import ViewBucket from "./ViewBucket/ViewBucket";
 const styles = (theme: Theme) =>
   createStyles({
     root: {
-      display: "flex"
+      display: "flex",
     },
     toolbar: {
       background: theme.palette.background.default,
       color: "black",
-      paddingRight: 24 // keep right padding when drawer closed
+      paddingRight: 24, // keep right padding when drawer closed
     },
     toolbarIcon: {
       display: "flex",
       alignItems: "center",
       justifyContent: "flex-end",
       padding: "0 8px",
-      ...theme.mixins.toolbar
+      ...theme.mixins.toolbar,
     },
     appBar: {
       zIndex: theme.zIndex.drawer + 1,
       transition: theme.transitions.create(["width", "margin"], {
         easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen
-      })
+        duration: theme.transitions.duration.leavingScreen,
+      }),
     },
 
     menuButton: {
-      marginRight: 36
+      marginRight: 36,
     },
     menuButtonHidden: {
-      display: "none"
+      display: "none",
     },
     title: {
-      flexGrow: 1
+      flexGrow: 1,
     },
     appBarSpacer: {
-      height: "5px"
+      height: "5px",
     },
     content: {
       flexGrow: 1,
       height: "100vh",
-      overflow: "auto"
+      overflow: "auto",
     },
     container: {
       paddingTop: theme.spacing(4),
-      paddingBottom: theme.spacing(4)
+      paddingBottom: theme.spacing(4),
     },
     paper: {
       padding: theme.spacing(2),
       display: "flex",
       overflow: "auto",
-      flexDirection: "column"
+      flexDirection: "column",
     },
     fixedHeight: {
-      minHeight: 240
-    }
+      minHeight: 240,
+    },
   });
 
 const mapState = (state: AppState) => ({
-  open: state.system.sidebarOpen
+  open: state.system.sidebarOpen,
 });
 
 const connector = connect(mapState, { setMenuOpen });

portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.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 from "react";
+import React, { useEffect, useState } from "react";
 import Grid from "@material-ui/core/Grid";
 import Typography from "@material-ui/core/Typography";
 import { Button, LinearProgress } from "@material-ui/core";
@@ -23,6 +23,22 @@ import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
 import api from "../../../../common/api";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
+import CheckboxWrapper from "../../Common/FormComponents/CheckboxWrapper/CheckboxWrapper";
+import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
+import { factorForDropdown, getBytes } from "../../../../common/utils";
+import { AppState } from "../../../../store";
+import { connect } from "react-redux";
+import {
+  addBucketName,
+  addBucketQuota,
+  addBucketQuotaSize,
+  addBucketQuotaType,
+  addBucketQuotaUnit,
+  addBucketVersioned,
+} from "../actions";
+import { useDebounce } from "use-debounce";
+import { MakeBucketRequest } from "../types";
+import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -32,6 +48,20 @@ const styles = (theme: Theme) =>
     buttonContainer: {
       textAlign: "right",
     },
+    multiContainer: {
+      display: "flex",
+      alignItems: "center" as const,
+      justifyContent: "flex-start" as const,
+    },
+    quotaSizeContainer: {
+      flexGrow: 1,
+    },
+    sizeFactorContainer: {
+      flexGrow: 0,
+      maxWidth: 80,
+      marginLeft: 8,
+      alignSelf: "flex-start" as const,
+    },
     ...modalBasic,
   });
 
@@ -39,119 +69,273 @@ interface IAddBucketProps {
   classes: any;
   open: boolean;
   closeModalAndRefresh: () => void;
-}
-
-interface IAddBucketState {
-  addLoading: boolean;
-  addError: string;
+  addBucketName: typeof addBucketName;
+  addBucketVersioned: typeof addBucketVersioned;
+  addBucketQuota: typeof addBucketQuota;
+  addBucketQuotaType: typeof addBucketQuotaType;
+  addBucketQuotaSize: typeof addBucketQuotaSize;
+  addBucketQuotaUnit: typeof addBucketQuotaUnit;
   bucketName: string;
+  versioned: boolean;
+  enableQuota: boolean;
+  quotaType: string;
+  quotaSize: string;
+  quotaUnit: string;
 }
 
-class AddBucket extends React.Component<IAddBucketProps, IAddBucketState> {
-  state: IAddBucketState = {
-    addLoading: false,
-    addError: "",
-    bucketName: "",
-  };
+const AddBucket = ({
+  classes,
+  open,
+  closeModalAndRefresh,
+  addBucketName,
+  addBucketVersioned,
+  addBucketQuota,
+  addBucketQuotaType,
+  addBucketQuotaSize,
+  addBucketQuotaUnit,
+  bucketName,
+  versioned,
+  enableQuota,
+  quotaType,
+  quotaSize,
+  quotaUnit,
+}: IAddBucketProps) => {
+  const [bName, setBName] = useState<string>(bucketName);
+  const [addLoading, setAddLoading] = useState<boolean>(false);
+  const [addError, setAddError] = useState<string>("");
+  const [sendEnabled, setSendEnabled] = useState<boolean>(false);
 
-  addRecord(event: React.FormEvent) {
+  const addRecord = (event: React.FormEvent) => {
     event.preventDefault();
-    const { bucketName, addLoading } = this.state;
     if (addLoading) {
       return;
     }
-    this.setState({ addLoading: true }, () => {
-      api
-        .invoke("POST", "/api/v1/buckets", {
-          name: bucketName,
-        })
-        .then((res) => {
-          this.setState(
-            {
-              addLoading: false,
-              addError: "",
-            },
-            () => {
-              this.props.closeModalAndRefresh();
-            }
-          );
-        })
-        .catch((err) => {
-          this.setState({
-            addLoading: false,
-            addError: err,
-          });
-        });
-    });
-  }
+    setAddLoading(true);
 
-  render() {
-    const { classes, open } = this.props;
-    const { addLoading, addError, bucketName } = this.state;
-    return (
-      <ModalWrapper
-        title="Create Bucket"
-        modalOpen={open}
-        onClose={() => {
-          this.setState({ addError: "" }, () => {
-            this.props.closeModalAndRefresh();
-          });
+    let request: MakeBucketRequest = {
+      name: bucketName,
+      versioning: versioned,
+    };
+
+    if (enableQuota) {
+      const amount = getBytes(quotaSize, quotaUnit, false);
+      request.quota = {
+        enabled: true,
+        quota_type: quotaType,
+        amount: parseInt(amount),
+      };
+    }
+
+    api
+      .invoke("POST", "/api/v1/buckets", request)
+      .then((res) => {
+        setAddLoading(false);
+        setAddError("");
+        closeModalAndRefresh();
+      })
+      .catch((err) => {
+        setAddLoading(false);
+        setAddError(err);
+      });
+  };
+
+  const [value] = useDebounce(bName, 1000);
+
+  useEffect(() => {
+    addBucketName(value);
+  }, [value]);
+
+  const resetForm = () => {
+    setBName("");
+    addBucketVersioned(false);
+    addBucketQuota(false);
+    addBucketQuotaType("hard");
+    addBucketQuotaSize("1");
+    addBucketQuotaUnit("TiB");
+  };
+
+  useEffect(() => {
+    let valid = false;
+
+    if (bName.trim() !== "") {
+      valid = true;
+    }
+
+    if (enableQuota && valid) {
+      if (quotaSize.trim() === "" || parseInt(quotaSize) === 0) {
+        valid = false;
+      }
+    }
+
+    setSendEnabled(valid);
+  }, [bName, versioned, quotaType, quotaSize, quotaUnit, enableQuota]);
+
+  return (
+    <ModalWrapper
+      title="Create Bucket"
+      modalOpen={open}
+      onClose={() => {
+        setAddError("");
+        closeModalAndRefresh();
+      }}
+      aria-labelledby="alert-dialog-title"
+      aria-describedby="alert-dialog-description"
+    >
+      <form
+        noValidate
+        autoComplete="off"
+        onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
+          addRecord(e);
         }}
-        aria-labelledby="alert-dialog-title"
-        aria-describedby="alert-dialog-description"
       >
-        <form
-          noValidate
-          autoComplete="off"
-          onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
-            this.addRecord(e);
-          }}
-        >
-          <Grid container>
-            <Grid item xs={12} className={classes.formScrollable}>
-              {addError !== "" && (
-                <Grid item xs={12}>
-                  <Typography
-                    component="p"
-                    variant="body1"
-                    className={classes.errorBlock}
-                  >
-                    {addError}
-                  </Typography>
-                </Grid>
-              )}
+        <Grid container>
+          <Grid item xs={12} className={classes.formScrollable}>
+            {addError !== "" && (
               <Grid item xs={12}>
-                <InputBoxWrapper
-                  id="bucket-name"
-                  name="bucket-name"
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                    this.setState({ bucketName: e.target.value });
-                  }}
-                  label="Bucket Name"
-                  value={bucketName}
-                />
-              </Grid>
-            </Grid>
-            <Grid item xs={12} className={classes.buttonContainer}>
-              <Button
-                type="submit"
-                variant="contained"
-                color="primary"
-                disabled={addLoading}
-              >
-                Save
-              </Button>
-            </Grid>
-            {addLoading && (
-              <Grid item xs={12}>
-                <LinearProgress />
+                <Typography
+                  component="p"
+                  variant="body1"
+                  className={classes.errorBlock}
+                >
+                  {addError}
+                </Typography>
               </Grid>
             )}
+            <Grid item xs={12}>
+              <InputBoxWrapper
+                id="bucket-name"
+                name="bucket-name"
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                  setBName(event.target.value);
+                }}
+                label="Bucket Name"
+                value={bName}
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <FormSwitchWrapper
+                value="versioned"
+                id="versioned"
+                name="versioned"
+                checked={versioned}
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                  addBucketVersioned(event.target.checked);
+                }}
+                label={"Versioning"}
+                indicatorLabel={"On"}
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <FormSwitchWrapper
+                value="bucket_quota"
+                id="bucket_quota"
+                name="bucket_quota"
+                checked={enableQuota}
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                  addBucketQuota(event.target.checked);
+                }}
+                label={"Enable Bucket Quota"}
+                indicatorLabel={"On"}
+              />
+            </Grid>
+            {enableQuota && (
+              <React.Fragment>
+                <Grid item xs={12}>
+                  <SelectWrapper
+                    value={quotaType}
+                    label="Quota Type"
+                    id="quota_type"
+                    name="quota_type"
+                    onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
+                      addBucketQuotaType(e.target.value as string);
+                    }}
+                    options={[
+                      { value: "hard", label: "Hard" },
+                      { value: "fifo", label: "FIFO" },
+                    ]}
+                  />
+                </Grid>
+                <Grid item xs={12}>
+                  <div className={classes.multiContainer}>
+                    <div className={classes.quotaSizeContainer}>
+                      <InputBoxWrapper
+                        type="number"
+                        id="quota_size"
+                        name="quota_size"
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                          addBucketQuotaSize(e.target.value);
+                        }}
+                        label="Quota"
+                        value={quotaSize}
+                        required
+                        min="1"
+                      />
+                    </div>
+                    <div className={classes.sizeFactorContainer}>
+                      <SelectWrapper
+                        label="&nbsp;"
+                        id="quota_unit"
+                        name="quota_unit"
+                        value={quotaUnit}
+                        onChange={(
+                          e: React.ChangeEvent<{ value: unknown }>
+                        ) => {
+                          addBucketQuotaUnit(e.target.value as string);
+                        }}
+                        options={factorForDropdown()}
+                      />
+                    </div>
+                  </div>
+                </Grid>
+              </React.Fragment>
+            )}
           </Grid>
-        </form>
-      </ModalWrapper>
-    );
-  }
-}
+          <Grid item xs={12} className={classes.buttonContainer}>
+            <button
+              type="button"
+              color="primary"
+              className={classes.clearButton}
+              onClick={resetForm}
+            >
+              Clear
+            </button>
+            <Button
+              type="submit"
+              variant="contained"
+              color="primary"
+              disabled={addLoading || !sendEnabled}
+            >
+              Save
+            </Button>
+          </Grid>
+          {addLoading && (
+            <Grid item xs={12}>
+              <LinearProgress />
+            </Grid>
+          )}
+        </Grid>
+      </form>
+    </ModalWrapper>
+  );
+};
 
-export default withStyles(styles)(AddBucket);
+const mapState = (state: AppState) => ({
+  addBucketModalOpen: state.buckets.open,
+  bucketName: state.buckets.addBucketName,
+  versioned: state.buckets.addBucketVersioning,
+  enableQuota: state.buckets.addBucketQuotaEnabled,
+  quotaType: state.buckets.addBucketQuotaType,
+  quotaSize: state.buckets.addBucketQuotaSize,
+  quotaUnit: state.buckets.addBucketQuotaUnit,
+});
+
+const connector = connect(mapState, {
+  addBucketName: addBucketName,
+  addBucketVersioned: addBucketVersioned,
+  addBucketQuota: addBucketQuota,
+  addBucketQuotaType: addBucketQuotaType,
+  addBucketQuotaSize: addBucketQuotaSize,
+  addBucketQuotaUnit: addBucketQuotaUnit,
+});
+
+export default connector(withStyles(styles)(AddBucket));

portal-ui/src/screens/Console/Buckets/ListBuckets/DeleteBucket.tsx

@@ -23,7 +23,7 @@ import {
   DialogContent,
   DialogContentText,
   DialogTitle,
-  LinearProgress
+  LinearProgress,
 } from "@material-ui/core";
 import api from "../../../../common/api";
 import { BucketList } from "../types";
@@ -32,8 +32,8 @@ import Typography from "@material-ui/core/Typography";
 const styles = (theme: Theme) =>
   createStyles({
     errorBlock: {
-      color: "red"
-    }
+      color: "red",
+    },
   });
 
 interface IDeleteBucketProps {
@@ -54,7 +54,7 @@ class DeleteBucket extends React.Component<
 > {
   state: IDeleteBucketState = {
     deleteLoading: false,
-    deleteError: ""
+    deleteError: "",
   };
 
   removeRecord() {
@@ -66,23 +66,23 @@ class DeleteBucket extends React.Component<
     this.setState({ deleteLoading: true }, () => {
       api
         .invoke("DELETE", `/api/v1/buckets/${selectedBucket}`, {
-          name: selectedBucket
+          name: selectedBucket,
         })
         .then((res: BucketList) => {
           this.setState(
             {
               deleteLoading: false,
-              deleteError: ""
+              deleteError: "",
             },
             () => {
               this.props.closeDeleteModalAndRefresh(true);
             }
           );
         })
-        .catch(err => {
+        .catch((err) => {
           this.setState({
             deleteLoading: false,
-            deleteError: err
+            deleteError: err,
           });
         });
     });

portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.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 from "react";
+import React, { useEffect, useState } from "react";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
 import { Button } from "@material-ui/core";
@@ -31,6 +31,15 @@ import DeleteBucket from "./DeleteBucket";
 import { MinTablePaginationActions } from "../../../../common/MinTablePaginationActions";
 import { CreateIcon } from "../../../../icons";
 import { niceBytes } from "../../../../common/utils";
+import { AppState } from "../../../../store";
+import { connect } from "react-redux";
+import { addBucketOpen, addBucketReset } from "../actions";
+import {
+  actionsTray,
+  containerForHeader,
+  searchField,
+} from "../../Common/FormComponents/common/styleLibrary";
+import PageHeader from "../../Common/PageHeader/PageHeader";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -62,188 +71,155 @@ const styles = (theme: Theme) =>
         },
       },
     },
-    actionsTray: {
-      textAlign: "right",
-      "& button": {
-        marginLeft: 10,
-      },
-    },
-    searchField: {
-      background: "#FFFFFF",
-      padding: 12,
-      borderRadius: 5,
-      boxShadow: "0px 3px 6px #00000012",
-    },
+    ...actionsTray,
+    ...searchField,
+    ...containerForHeader(theme.spacing(4)),
   });
 
 interface IListBucketsProps {
   classes: any;
+  addBucketOpen: typeof addBucketOpen;
+  addBucketModalOpen: boolean;
+  addBucketReset: typeof addBucketReset;
 }
 
-interface IListBucketsState {
-  records: Bucket[];
-  totalRecords: number;
-  loading: boolean;
-  error: string;
-  deleteError: string;
-  addScreenOpen: boolean;
-  page: number;
-  rowsPerPage: number;
-  deleteOpen: boolean;
-  selectedBucket: string;
-  filterBuckets: string;
-}
+const ListBuckets = ({
+  classes,
+  addBucketOpen,
+  addBucketModalOpen,
+  addBucketReset,
+}: IListBucketsProps) => {
+  const [records, setRecords] = useState<Bucket[]>([]);
+  const [totalRecords, setTotalRecords] = useState<number>(0);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string>("");
+  const [deleteError, setDeleteError] = useState<string>("");
+  const [page, setPage] = useState<number>(0);
+  const [rowsPerPage, setRowsPerPage] = useState<number>(10);
+  const [deleteOpen, setDeleteOpen] = useState<boolean>(false);
+  const [selectedBucket, setSelectedBucket] = useState<string>("");
+  const [filterBuckets, setFilterBuckets] = useState<string>("");
 
-class ListBuckets extends React.Component<
-  IListBucketsProps,
-  IListBucketsState
-> {
-  state: IListBucketsState = {
-    records: [],
-    totalRecords: 0,
-    loading: false,
-    error: "",
-    deleteError: "",
-    addScreenOpen: false,
-    page: 0,
-    rowsPerPage: 10,
-    deleteOpen: false,
-    selectedBucket: "",
-    filterBuckets: "",
+  useEffect(() => {
+    if (loading) {
+      const fetchRecords = () => {
+        setLoading(true);
+        const offset = page * rowsPerPage;
+        api
+          .invoke(
+            "GET",
+            `/api/v1/buckets?offset=${offset}&limit=${rowsPerPage}`
+          )
+          .then((res: BucketList) => {
+            setLoading(false);
+            setRecords(res.buckets || []);
+            setTotalRecords(!res.buckets ? 0 : res.total);
+            setError("");
+            // if we get 0 results, and page > 0 , go down 1 page
+            if (
+              (res.buckets === undefined ||
+                res.buckets == null ||
+                res.buckets.length === 0) &&
+              page > 0
+            ) {
+              const newPage = page - 1;
+              setPage(newPage);
+              setLoading(true);
+            }
+          })
+          .catch((err: any) => {
+            setLoading(false);
+            setError(err);
+          });
+      };
+      fetchRecords();
+    }
+  }, [loading, page, rowsPerPage]);
+
+  const closeAddModalAndRefresh = () => {
+    addBucketOpen(false);
+    addBucketReset();
+    setLoading(true);
   };
 
-  fetchRecords() {
-    this.setState({ loading: true }, () => {
-      const { page, rowsPerPage } = this.state;
-      const offset = page * rowsPerPage;
-      api
-        .invoke("GET", `/api/v1/buckets?offset=${offset}&limit=${rowsPerPage}`)
-        .then((res: BucketList) => {
-          this.setState({
-            loading: false,
-            records: res.buckets || [],
-            totalRecords: !res.buckets ? 0 : res.total,
-            error: "",
-          });
-          // if we get 0 results, and page > 0 , go down 1 page
-          if (
-            (res.buckets === undefined ||
-              res.buckets == null ||
-              res.buckets.length === 0) &&
-            page > 0
-          ) {
-            const newPage = page - 1;
-            this.setState({ page: newPage }, () => {
-              this.fetchRecords();
-            });
-          }
-        })
-        .catch((err: any) => {
-          this.setState({ loading: false, error: err });
-        });
-    });
-  }
+  const closeDeleteModalAndRefresh = (refresh: boolean) => {
+    setDeleteOpen(false);
+    if (refresh) {
+      setLoading(true);
+    }
+  };
 
-  closeAddModalAndRefresh() {
-    this.setState({ addScreenOpen: false }, () => {
-      this.fetchRecords();
-    });
-  }
+  useEffect(() => {
+    setLoading(true);
+  }, []);
 
-  closeDeleteModalAndRefresh(refresh: boolean) {
-    this.setState({ deleteOpen: false }, () => {
-      if (refresh) {
-        this.fetchRecords();
-      }
-    });
-  }
+  useEffect(() => {
+    setLoading(true);
+  }, [page, rowsPerPage]);
 
-  componentDidMount(): void {
-    this.fetchRecords();
-  }
+  const confirmDeleteBucket = (bucket: string) => {
+    setDeleteOpen(true);
+    setSelectedBucket(bucket);
+  };
 
-  bucketFilter(): void {}
+  const handleChangePage = (event: unknown, newPage: number) => {
+    setPage(newPage);
+  };
 
-  render() {
-    const { classes } = this.props;
-    const {
-      records,
-      totalRecords,
-      addScreenOpen,
-      loading,
-      page,
-      rowsPerPage,
-      deleteOpen,
-      selectedBucket,
-      filterBuckets,
-    } = this.state;
+  const handleChangeRowsPerPage = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const rPP = parseInt(event.target.value, 10);
+    setPage(0);
+    setRowsPerPage(rPP);
+  };
+  const tableActions = [
+    { type: "view", to: `/buckets`, sendOnlyId: true },
+    { type: "delete", onClick: confirmDeleteBucket, sendOnlyId: true },
+  ];
 
-    const offset = page * rowsPerPage;
+  const offset = page * rowsPerPage;
 
-    const handleChangePage = (event: unknown, newPage: number) => {
-      this.setState({ page: newPage });
-    };
+  const displayParsedDate = (date: string) => {
+    return <Moment>{date}</Moment>;
+  };
 
-    const handleChangeRowsPerPage = (
-      event: React.ChangeEvent<HTMLInputElement>
-    ) => {
-      const rPP = parseInt(event.target.value, 10);
-      this.setState({ page: 0, rowsPerPage: rPP });
-    };
-
-    const confirmDeleteBucket = (bucket: string) => {
-      this.setState({ deleteOpen: true, selectedBucket: bucket });
-    };
-
-    const tableActions = [
-      { type: "view", to: `/buckets`, sendOnlyId: true },
-      { type: "delete", onClick: confirmDeleteBucket, sendOnlyId: true },
-    ];
-
-    const displayParsedDate = (date: string) => {
-      return <Moment>{date}</Moment>;
-    };
-
-    const filteredRecords = records
-      .slice(offset, offset + rowsPerPage)
-      .filter((b: Bucket) => {
-        if (filterBuckets === "") {
+  const filteredRecords = records
+    .filter((b: Bucket) => {
+      if (filterBuckets === "") {
+        return true;
+      } else {
+        if (b.name.indexOf(filterBuckets) >= 0) {
           return true;
         } else {
-          if (b.name.indexOf(filterBuckets) >= 0) {
-            return true;
-          } else {
-            return false;
-          }
+          return false;
         }
-      });
+      }
+    })
+    .slice(offset, offset + rowsPerPage);
 
-    return (
-      <React.Fragment>
-        {addScreenOpen && (
-          <AddBucket
-            open={addScreenOpen}
-            closeModalAndRefresh={() => {
-              this.closeAddModalAndRefresh();
-            }}
-          />
-        )}
-        {deleteOpen && (
-          <DeleteBucket
-            deleteOpen={deleteOpen}
-            selectedBucket={selectedBucket}
-            closeDeleteModalAndRefresh={(refresh: boolean) => {
-              this.closeDeleteModalAndRefresh(refresh);
-            }}
-          />
-        )}
-        <Grid container>
-          <Grid item xs={12}>
-            <Typography variant="h6">Buckets</Typography>
-          </Grid>
-          <Grid item xs={12}>
-            <br />
-          </Grid>
+  return (
+    <React.Fragment>
+      {addBucketModalOpen && (
+        <AddBucket
+          open={addBucketModalOpen}
+          closeModalAndRefresh={() => {
+            closeAddModalAndRefresh();
+          }}
+        />
+      )}
+      {deleteOpen && (
+        <DeleteBucket
+          deleteOpen={deleteOpen}
+          selectedBucket={selectedBucket}
+          closeDeleteModalAndRefresh={(refresh: boolean) => {
+            closeDeleteModalAndRefresh(refresh);
+          }}
+        />
+      )}
+      <PageHeader label={"Buckets"} />
+      <Grid container>
+        <Grid item xs={12} className={classes.container}>
           <Grid item xs={12} className={classes.actionsTray}>
             <TextField
               placeholder="Search Buckets"
@@ -251,9 +227,7 @@ class ListBuckets extends React.Component<
               id="search-resource"
               label=""
               onChange={(val) => {
-                this.setState({
-                  filterBuckets: val.target.value,
-                });
+                setFilterBuckets(val.target.value);
               }}
               InputProps={{
                 disableUnderline: true,
@@ -269,9 +243,7 @@ class ListBuckets extends React.Component<
               color="primary"
               startIcon={<CreateIcon />}
               onClick={() => {
-                this.setState({
-                  addScreenOpen: true,
-                });
+                addBucketOpen(true);
               }}
             >
               Create Bucket
@@ -317,9 +289,18 @@ class ListBuckets extends React.Component<
             />
           </Grid>
         </Grid>
-      </React.Fragment>
-    );
-  }
-}
+      </Grid>
+    </React.Fragment>
+  );
+};
 
-export default withStyles(styles)(ListBuckets);
+const mapState = (state: AppState) => ({
+  addBucketModalOpen: state.buckets.open,
+});
+
+const connector = connect(mapState, {
+  addBucketOpen: addBucketOpen,
+  addBucketReset: addBucketReset,
+});
+
+export default connector(withStyles(styles)(ListBuckets));

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DeleteObject.tsx

@@ -0,0 +1,160 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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 { createStyles, Theme, withStyles } from "@material-ui/core/styles";
+import React from "react";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  LinearProgress,
+} from "@material-ui/core";
+import api from "../../../../../../common/api";
+import Typography from "@material-ui/core/Typography";
+
+const styles = (theme: Theme) =>
+  createStyles({
+    errorBlock: {
+      color: "red",
+    },
+  });
+
+interface IDeleteObjectProps {
+  classes: any;
+  closeDeleteModalAndRefresh: (refresh: boolean) => void;
+  deleteOpen: boolean;
+  selectedObject: string;
+  selectedBucket: string;
+}
+
+interface IDeleteObjectState {
+  deleteLoading: boolean;
+  deleteError: string;
+}
+
+class DeleteObject extends React.Component<
+  IDeleteObjectProps,
+  IDeleteObjectState
+> {
+  state: IDeleteObjectState = {
+    deleteLoading: false,
+    deleteError: "",
+  };
+
+  removeRecord() {
+    const { deleteLoading } = this.state;
+    const { selectedObject, selectedBucket } = this.props;
+    if (deleteLoading) {
+      return;
+    }
+    var recursive = false;
+    if (selectedObject.endsWith("/")) {
+      recursive = true;
+    }
+
+    this.setState({ deleteLoading: true }, () => {
+      api
+        .invoke(
+          "DELETE",
+          `/api/v1/buckets/${selectedBucket}/objects?path=${selectedObject}&recursive=${recursive}`
+        )
+        .then((res: any) => {
+          this.setState(
+            {
+              deleteLoading: false,
+              deleteError: "",
+            },
+            () => {
+              this.props.closeDeleteModalAndRefresh(true);
+            }
+          );
+        })
+        .catch((err) => {
+          this.setState({
+            deleteLoading: false,
+            deleteError: err,
+          });
+        });
+    });
+  }
+
+  render() {
+    const { classes, deleteOpen, selectedObject } = this.props;
+    const { deleteLoading, deleteError } = this.state;
+
+    return (
+      <Dialog
+        open={deleteOpen}
+        onClose={() => {
+          this.setState({ deleteError: "" }, () => {
+            this.props.closeDeleteModalAndRefresh(false);
+          });
+        }}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+      >
+        <DialogTitle id="alert-dialog-title">Delete</DialogTitle>
+        <DialogContent>
+          {deleteLoading && <LinearProgress />}
+          <DialogContentText id="alert-dialog-description">
+            Are you sure you want to delete: <b>{selectedObject}</b>?{" "}
+            {deleteError !== "" && (
+              <React.Fragment>
+                <br />
+                <Typography
+                  component="p"
+                  variant="body1"
+                  className={classes.errorBlock}
+                >
+                  {deleteError}
+                </Typography>
+              </React.Fragment>
+            )}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            onClick={() => {
+              this.setState({ deleteError: "" }, () => {
+                this.props.closeDeleteModalAndRefresh(false);
+              });
+            }}
+            color="primary"
+            disabled={deleteLoading}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={() => {
+              this.setState({ deleteError: "" }, () => {
+                this.removeRecord();
+              });
+            }}
+            color="secondary"
+            disabled={deleteLoading}
+          >
+            Delete
+          </Button>
+        </DialogActions>
+      </Dialog>
+    );
+  }
+}
+
+export default withStyles(styles)(DeleteObject);

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx

@@ -0,0 +1,400 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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 { createStyles, Theme, withStyles } from "@material-ui/core/styles";
+import Grid from "@material-ui/core/Grid";
+import TextField from "@material-ui/core/TextField";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import SearchIcon from "@material-ui/icons/Search";
+import { BucketObject, BucketObjectsList } from "./types";
+import api from "../../../../../../common/api";
+import React from "react";
+import TableWrapper from "../../../../Common/TableWrapper/TableWrapper";
+import { niceBytes } from "../../../../../../common/utils";
+import DeleteObject from "./DeleteObject";
+
+import {
+  actionsTray,
+  containerForHeader,
+  searchField,
+} from "../../../../Common/FormComponents/common/styleLibrary";
+import PageHeader from "../../../../Common/PageHeader/PageHeader";
+import storage from "local-storage-fallback";
+import { isNullOrUndefined } from "util";
+import { Button, Input } from "@material-ui/core";
+import * as reactMoment from "react-moment";
+import { CreateIcon } from "../../../../../../icons";
+import Snackbar from "@material-ui/core/Snackbar";
+
+const styles = (theme: Theme) =>
+  createStyles({
+    seeMore: {
+      marginTop: theme.spacing(3),
+    },
+    paper: {
+      display: "flex",
+      overflow: "auto",
+      flexDirection: "column",
+    },
+
+    addSideBar: {
+      width: "320px",
+      padding: "20px",
+    },
+    errorBlock: {
+      color: "red",
+    },
+    tableToolbar: {
+      paddingLeft: theme.spacing(2),
+      paddingRight: theme.spacing(0),
+    },
+    minTableHeader: {
+      color: "#393939",
+      "& tr": {
+        "& th": {
+          fontWeight: "bold",
+        },
+      },
+    },
+    ...actionsTray,
+    ...searchField,
+    ...containerForHeader(theme.spacing(4)),
+  });
+
+interface IListObjectsProps {
+  classes: any;
+  match: any;
+}
+
+interface IListObjectsState {
+  records: BucketObject[];
+  totalRecords: number;
+  loading: boolean;
+  error: string;
+  deleteOpen: boolean;
+  deleteError: string;
+  selectedObject: string;
+  selectedBucket: string;
+  filterObjects: string;
+  openSnackbar: boolean;
+  snackBarMessage: string;
+}
+
+class ListObjects extends React.Component<
+  IListObjectsProps,
+  IListObjectsState
+> {
+  state: IListObjectsState = {
+    records: [],
+    totalRecords: 0,
+    loading: false,
+    error: "",
+    deleteOpen: false,
+    deleteError: "",
+    selectedObject: "",
+    selectedBucket: "",
+    filterObjects: "",
+    openSnackbar: false,
+    snackBarMessage: "",
+  };
+
+  fetchRecords = () => {
+    this.setState({ loading: true }, () => {
+      const { match } = this.props;
+      const bucketName = match.params["bucket"];
+      api
+        .invoke("GET", `/api/v1/buckets/${bucketName}/objects`)
+        .then((res: BucketObjectsList) => {
+          this.setState({
+            loading: false,
+            selectedBucket: bucketName,
+            records: res.objects || [],
+            totalRecords: !res.objects ? 0 : res.total,
+            error: "",
+          });
+          // TODO:
+          // if we get 0 results, and page > 0 , go down 1 page
+        })
+        .catch((err: any) => {
+          this.setState({ loading: false, error: err });
+        });
+    });
+  };
+
+  componentDidMount(): void {
+    this.fetchRecords();
+  }
+
+  closeDeleteModalAndRefresh(refresh: boolean) {
+    this.setState({ deleteOpen: false }, () => {
+      if (refresh) {
+        this.fetchRecords();
+      }
+    });
+  }
+
+  showSnackBarMessage(text: string) {
+    this.setState({ openSnackbar: true, snackBarMessage: text });
+  }
+
+  closeSnackBar() {
+    this.setState({ openSnackbar: false, snackBarMessage: `` });
+  }
+
+  upload(e: any, bucketName: string, path: string) {
+    let listObjects = this;
+    if (isNullOrUndefined(e) || isNullOrUndefined(e.target)) {
+      return;
+    }
+    const token: string = storage.getItem("token")!;
+    e.preventDefault();
+    let file = e.target.files[0];
+    const fileName = file.name;
+
+    const objectName = `${path}${fileName}`;
+    let uploadUrl = `/api/v1/buckets/${bucketName}/objects/upload?prefix=${objectName}`;
+    let xhr = new XMLHttpRequest();
+
+    xhr.open("POST", uploadUrl, true);
+    xhr.setRequestHeader("Authorization", `Bearer ${token}`);
+
+    xhr.withCredentials = false;
+    xhr.onload = function (event) {
+      // TODO: handle status
+      if (xhr.status == 401 || xhr.status == 403) {
+        listObjects.showSnackBarMessage(
+          "An error occurred while uploading the file."
+        );
+      }
+      if (xhr.status == 500) {
+        listObjects.showSnackBarMessage(
+          "An error occurred while uploading the file."
+        );
+      }
+      if (xhr.status == 200) {
+        listObjects.showSnackBarMessage("Object uploaded successfully.");
+        listObjects.fetchRecords();
+      }
+    };
+
+    xhr.upload.addEventListener("error", (event) => {
+      // TODO: handle error
+      this.showSnackBarMessage("An error occurred while uploading the file.");
+    });
+
+    xhr.upload.addEventListener("progress", (event) => {
+      // TODO: handle progress with event.loaded, event.total
+    });
+
+    xhr.onerror = () => {
+      listObjects.showSnackBarMessage(
+        "An error occurred while uploading the file."
+      );
+    };
+
+    var formData = new FormData();
+    var blobFile = new Blob([file]);
+
+    formData.append("upfile", blobFile);
+    xhr.send(formData);
+    e.target.value = null;
+  }
+
+  download(bucketName: string, objectName: string) {
+    var anchor = document.createElement("a");
+    document.body.appendChild(anchor);
+    const token: string = storage.getItem("token")!;
+    var xhr = new XMLHttpRequest();
+
+    xhr.open(
+      "GET",
+      `/api/v1/buckets/${bucketName}/objects/download?prefix=${objectName}`,
+      true
+    );
+    xhr.setRequestHeader("Authorization", `Bearer ${token}`);
+    xhr.responseType = "blob";
+
+    xhr.onload = function (e) {
+      if (this.status == 200) {
+        var blob = new Blob([this.response], {
+          type: "octet/stream",
+        });
+        var blobUrl = window.URL.createObjectURL(blob);
+
+        anchor.href = blobUrl;
+        anchor.download = objectName;
+
+        anchor.click();
+        window.URL.revokeObjectURL(blobUrl);
+        anchor.remove();
+      }
+    };
+    xhr.send();
+  }
+
+  bucketFilter(): void {}
+
+  render() {
+    const { classes } = this.props;
+    const {
+      records,
+      loading,
+      selectedObject,
+      selectedBucket,
+      deleteOpen,
+      filterObjects,
+      snackBarMessage,
+      openSnackbar,
+    } = this.state;
+    const displayParsedDate = (date: string) => {
+      return <reactMoment.default>{date}</reactMoment.default>;
+    };
+
+    const confirmDeleteObject = (object: string) => {
+      this.setState({ deleteOpen: true, selectedObject: object });
+    };
+
+    const downloadObject = (object: string) => {
+      this.download(selectedBucket, object);
+    };
+
+    const uploadObject = (e: any): void => {
+      // TODO: handle deeper paths/folders
+      let file = e.target.files[0];
+      this.showSnackBarMessage(`Uploading: ${file.name}`);
+      this.upload(e, selectedBucket, "");
+    };
+
+    const snackBarAction = (
+      <Button
+        color="secondary"
+        size="small"
+        onClick={() => {
+          this.closeSnackBar();
+        }}
+      >
+        Dismiss
+      </Button>
+    );
+
+    const tableActions = [
+      { type: "download", onClick: downloadObject, sendOnlyId: true },
+      { type: "delete", onClick: confirmDeleteObject, sendOnlyId: true },
+    ];
+
+    const filteredRecords = records.filter((b: BucketObject) => {
+      if (filterObjects === "") {
+        return true;
+      } else {
+        if (b.name.indexOf(filterObjects) >= 0) {
+          return true;
+        } else {
+          return false;
+        }
+      }
+    });
+
+    return (
+      <React.Fragment>
+        {deleteOpen && (
+          <DeleteObject
+            deleteOpen={deleteOpen}
+            selectedBucket={selectedBucket}
+            selectedObject={selectedObject}
+            closeDeleteModalAndRefresh={(refresh: boolean) => {
+              this.closeDeleteModalAndRefresh(refresh);
+            }}
+          />
+        )}
+        <Snackbar
+          open={openSnackbar}
+          message={snackBarMessage}
+          action={snackBarAction}
+        />
+        <PageHeader label="Objects" />
+        <Grid container>
+          <Grid item xs={12} className={classes.container}>
+            <Grid item xs={12} className={classes.actionsTray}>
+              <TextField
+                placeholder="Search Objects"
+                className={classes.searchField}
+                id="search-resource"
+                label=""
+                onChange={(val) => {
+                  this.setState({
+                    filterObjects: val.target.value,
+                  });
+                }}
+                InputProps={{
+                  disableUnderline: true,
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <SearchIcon />
+                    </InputAdornment>
+                  ),
+                }}
+              />
+
+              <>
+                <Button
+                  variant="contained"
+                  color="primary"
+                  startIcon={<CreateIcon />}
+                  component="label"
+                >
+                  Upload Object
+                  <Input
+                    type="file"
+                    onChange={(e) => uploadObject(e)}
+                    id="file-input"
+                    style={{ display: "none" }}
+                  />
+                </Button>
+              </>
+            </Grid>
+            <Grid item xs={12}>
+              <br />
+            </Grid>
+            <Grid item xs={12}>
+              <TableWrapper
+                itemActions={tableActions}
+                columns={[
+                  { label: "Name", elementKey: "name" },
+                  {
+                    label: "Last Modified",
+                    elementKey: "last_modified",
+                    renderFunction: displayParsedDate,
+                  },
+                  {
+                    label: "Size",
+                    elementKey: "size",
+                    renderFunction: niceBytes,
+                  },
+                ]}
+                isLoading={loading}
+                entityName="Objects"
+                idField="name"
+                records={filteredRecords}
+              />
+            </Grid>
+          </Grid>
+        </Grid>
+      </React.Fragment>
+    );
+  }
+}
+
+export default withStyles(styles)(ListObjects);

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/types.tsx

@@ -0,0 +1,27 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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/>.
+
+export interface BucketObject {
+  name: string;
+  size: number;
+  last_modified: Date;
+  content_type: string;
+}
+
+export interface BucketObjectsList {
+  objects: BucketObject[];
+  total: number;
+}

portal-ui/src/screens/Console/Buckets/ViewBucket/AddReplicationModal.tsx

@@ -0,0 +1,235 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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 get from "lodash/get";
+import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
+import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
+import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
+import Grid from "@material-ui/core/Grid";
+import Typography from "@material-ui/core/Typography";
+import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
+import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
+import { Button, LinearProgress } from "@material-ui/core";
+import api from "../../../../common/api";
+import { IRemoteBucket } from "../types";
+
+interface IReplicationModal {
+  open: boolean;
+  closeModalAndRefresh: () => any;
+  classes: any;
+  bucketName: string;
+}
+
+const styles = (theme: Theme) =>
+  createStyles({
+    errorBlock: {
+      color: "red",
+    },
+    minTableHeader: {
+      color: "#393939",
+      "& tr": {
+        "& th": {
+          fontWeight: "bold",
+        },
+      },
+    },
+    buttonContainer: {
+      textAlign: "right",
+    },
+    ...modalBasic,
+  });
+
+const AddReplicationModal = ({
+  open,
+  closeModalAndRefresh,
+  classes,
+  bucketName,
+}: IReplicationModal) => {
+  const [addError, setAddError] = useState("");
+  const [addLoading, setAddLoading] = useState(false);
+  const [accessKey, setAccessKey] = useState("");
+  const [secretKey, setSecretKey] = useState("");
+  const [targetURL, setTargetURL] = useState("");
+  const [targetBucket, setTargetBucket] = useState("");
+  const [region, setRegion] = useState("");
+
+  const addRecord = () => {
+    const remoteBucketInfo = {
+      accessKey: accessKey,
+      secretKey: secretKey,
+      sourceBucket: bucketName,
+      targetURL: targetURL,
+      targetBucket: targetBucket,
+      region: region,
+    };
+
+    api
+      .invoke("POST", "/api/v1/remote-buckets", remoteBucketInfo)
+      .then(() => {
+        api
+          .invoke("GET", "/api/v1/remote-buckets")
+          .then((res: any) => {
+            const remoteBuckets = get(res, "buckets", []);
+            const remoteBucket = remoteBuckets.find(
+              (itemRemote: IRemoteBucket) => {
+                return itemRemote.sourceBucket === bucketName;
+              }
+            );
+            if (remoteBucket && remoteBucket.remoteARN) {
+              const remoteARN = remoteBucket.remoteARN;
+              const replicationInfo = {
+                destination_bucket: targetBucket,
+                arn: remoteARN,
+              };
+              api
+                .invoke(
+                  "POST",
+                  `/api/v1/buckets/${bucketName}/replication`,
+                  replicationInfo
+                )
+                .then(() => {
+                  setAddLoading(false);
+                  setAddError("");
+                  closeModalAndRefresh();
+                })
+                .catch((err) => {
+                  setAddLoading(false);
+                  setAddError(err);
+                });
+            }
+          })
+          .catch((err) => {
+            setAddError(err);
+          });
+      })
+      .catch((err) => {
+        setAddLoading(false);
+        setAddError(err);
+      });
+  };
+
+  return (
+    <ModalWrapper
+      modalOpen={open}
+      onClose={() => {
+        setAddError("");
+        closeModalAndRefresh();
+      }}
+      title="Set Bucket Replication"
+    >
+      <form
+        noValidate
+        autoComplete="off"
+        onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
+          e.preventDefault();
+          setAddLoading(true);
+          addRecord();
+        }}
+      >
+        <Grid container>
+          <Grid item xs={12} className={classes.formScrollable}>
+            {addError !== "" && (
+              <Grid item xs={12}>
+                <Typography
+                  component="p"
+                  variant="body1"
+                  className={classes.errorBlock}
+                >
+                  {addError}
+                </Typography>
+              </Grid>
+            )}
+
+            <Grid item xs={12}>
+              <InputBoxWrapper
+                id="target"
+                name="target"
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  setAccessKey(e.target.value);
+                }}
+                label="Access Key"
+                value={accessKey}
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <InputBoxWrapper
+                id="target"
+                name="target"
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  setSecretKey(e.target.value);
+                }}
+                label="Secret Key"
+                value={secretKey}
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <InputBoxWrapper
+                id="target"
+                name="target"
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  setTargetURL(e.target.value);
+                }}
+                placeholder="https://play.min.io:9000"
+                label="Target URL"
+                value={targetURL}
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <InputBoxWrapper
+                id="target"
+                name="target"
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  setTargetBucket(e.target.value);
+                }}
+                label="Target Bucket"
+                value={targetBucket}
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <InputBoxWrapper
+                id="target"
+                name="target"
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  setRegion(e.target.value);
+                }}
+                label="Region"
+                value={region}
+              />
+            </Grid>
+          </Grid>
+          <Grid item xs={12} className={classes.buttonContainer}>
+            <Button
+              type="submit"
+              variant="contained"
+              color="primary"
+              disabled={addLoading}
+            >
+              Save
+            </Button>
+          </Grid>
+          {addLoading && (
+            <Grid item xs={12}>
+              <LinearProgress />
+            </Grid>
+          )}
+        </Grid>
+      </form>
+    </ModalWrapper>
+  );
+};
+
+export default withStyles(styles)(AddReplicationModal);

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

@@ -23,8 +23,18 @@ import Tabs from "@material-ui/core/Tabs";
 import Tab from "@material-ui/core/Tab";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import api from "../../../../common/api";
-import { BucketEvent, BucketEventList, BucketInfo, BucketList } from "../types";
-import { Button } from "@material-ui/core";
+import {
+  BucketEvent,
+  BucketEventList,
+  BucketInfo,
+  BucketList,
+  BucketReplication,
+  BucketReplicationDestination,
+  BucketReplicationRule,
+  BucketReplicationRuleDeleteMarker,
+  BucketVersioning,
+} from "../types";
+import { Box, Button } from "@material-ui/core";
 import Typography from "@material-ui/core/Typography";
 import SetAccessPolicy from "./SetAccessPolicy";
 import { MinTablePaginationActions } from "../../../../common/MinTablePaginationActions";
@@ -33,6 +43,9 @@ import AddEvent from "./AddEvent";
 import DeleteEvent from "./DeleteEvent";
 import TableWrapper from "../../Common/TableWrapper/TableWrapper";
 import { niceBytes } from "../../../../common/utils";
+import AddReplicationModal from "./AddReplicationModal";
+import { containerForHeader } from "../../Common/FormComponents/common/styleLibrary";
+import PageHeader from "../../Common/PageHeader/PageHeader";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -117,6 +130,14 @@ const styles = (theme: Theme) =>
     capitalizeFirst: {
       textTransform: "capitalize",
     },
+    doubleElement: {
+      display: "flex",
+      justifyContent: "space-between",
+    },
+    tabPan: {
+      marginTop: "5px",
+    },
+    ...containerForHeader(theme.spacing(4)),
   });
 
 interface IViewBucketProps {
@@ -124,9 +145,40 @@ interface IViewBucketProps {
   match: any;
 }
 
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: any;
+  value: any;
+}
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      style={{ marginTop: "5px" }}
+      {...other}
+    >
+      {value === index && <React.Fragment>{children}</React.Fragment>}
+    </div>
+  );
+}
+
+function a11yProps(index: any) {
+  return {
+    id: `simple-tab-${index}`,
+    "aria-controls": `simple-tabpanel-${index}`,
+  };
+}
+
 interface IViewBucketState {
   info: BucketInfo | null;
   records: BucketEvent[];
+  replicationRules: BucketReplicationRule[];
   totalRecords: number;
   loadingBucket: boolean;
   loadingEvents: boolean;
@@ -137,18 +189,23 @@ interface IViewBucketState {
   setAccessPolicyScreenOpen: boolean;
   page: number;
   rowsPerPage: number;
+  curTab: number;
   addScreenOpen: boolean;
   deleteOpen: boolean;
   selectedBucket: string;
   selectedEvent: BucketEvent | null;
   bucketSize: string;
   errorSize: string;
+  replicationSet: boolean;
+  openSetReplication: boolean;
+  isVersioned: boolean;
 }
 
 class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
   state: IViewBucketState = {
     info: null,
     records: [],
+    replicationRules: [],
     totalRecords: 0,
     loadingBucket: true,
     loadingEvents: true,
@@ -158,6 +215,7 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
     errBucket: "",
     setAccessPolicyScreenOpen: false,
     page: 0,
+    curTab: 0,
     rowsPerPage: 10,
     addScreenOpen: false,
     deleteOpen: false,
@@ -165,6 +223,9 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
     selectedEvent: null,
     bucketSize: "0",
     errorSize: "",
+    replicationSet: false,
+    openSetReplication: false,
+    isVersioned: false,
   };
 
   fetchEvents() {
@@ -195,6 +256,29 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
         .catch((err: any) => {
           this.setState({ loadingEvents: false, error: err });
         });
+
+      api
+        .invoke("GET", `/api/v1/buckets/${bucketName}/versioning`)
+        .then((res: BucketVersioning) => {
+          this.setState({
+            isVersioned: res.is_versioned,
+          });
+        })
+        .catch((err: any) => {
+          this.setState({ error: err });
+        });
+
+      api
+        .invoke("GET", `/api/v1/buckets/${bucketName}/replication`)
+        .then((res: BucketReplication) => {
+          const r = res.rules ? res.rules : [];
+          this.setState({
+            replicationRules: r,
+          });
+        })
+        .catch((err: any) => {
+          this.setState({ error: err });
+        });
     });
   }
 
@@ -279,6 +363,11 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
       selectedEvent,
       bucketSize,
       loadingSize,
+      replicationSet,
+      openSetReplication,
+      isVersioned,
+      replicationRules,
+      curTab,
     } = this.state;
 
     const offset = page * rowsPerPage;
@@ -301,6 +390,7 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
     };
 
     let accessPolicy = "n/a";
+
     if (info !== null) {
       accessPolicy = info.access;
     }
@@ -309,9 +399,26 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
       return <React.Fragment>{events.join(", ")}</React.Fragment>;
     };
 
+    const ruleDestDisplay = (events: BucketReplicationDestination) => {
+      return (
+        <React.Fragment>
+          {events.bucket.replace("arn:aws:s3:::", "")}
+        </React.Fragment>
+      );
+    };
+
+    const ruleDelDisplay = (events: BucketReplicationRuleDeleteMarker) => {
+      return <React.Fragment>{events.status}</React.Fragment>;
+    };
+
+    const setOpenReplicationOpen = (open = false) => {
+      this.setState({ openSetReplication: open });
+    };
+
     const tableActions = [{ type: "delete", onClick: confirmDeleteEvent }];
 
     const filteredRecords = records.slice(offset, offset + rowsPerPage);
+    const filteredRules = replicationRules.slice(offset, offset + rowsPerPage);
 
     return (
       <React.Fragment>
@@ -335,130 +442,203 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
             }}
           />
         )}
-
+        {openSetReplication && (
+          <AddReplicationModal
+            closeModalAndRefresh={() => {
+              setOpenReplicationOpen(false);
+              this.fetchEvents();
+            }}
+            open={openSetReplication}
+            bucketName={bucketName}
+          />
+        )}
+        <PageHeader label={`Bucket > ${match.params["bucketName"]}`} />
         <Grid container>
-          <Grid item xs={12}>
-            <Typography variant="h6">
-              Bucket > {match.params["bucketName"]}
-            </Typography>
-          </Grid>
-          <Grid item xs={12}>
-            <br />
-          </Grid>
-          <Grid item xs={12}>
-            <div className={classes.headerContainer}>
-              <div>
-                <Paper className={classes.paperContainer}>
-                  <div className={classes.gridContainer}>
-                    <div>Access Policy:</div>
-                    <div className={classes.capitalizeFirst}>
-                      {loadingBucket ? (
-                        <CircularProgress
-                          color="primary"
-                          size={16}
-                          variant="indeterminate"
-                        />
-                      ) : (
-                        accessPolicy.toLowerCase()
-                      )}
-                    </div>
-                    <div>Reported Usage:</div>
-                    <div>
-                      {loadingSize ? (
-                        <CircularProgress
-                          color="primary"
-                          size={16}
-                          variant="indeterminate"
-                        />
-                      ) : (
-                        niceBytes(bucketSize)
-                      )}
-                    </div>
-                  </div>
-                </Paper>
-              </div>
-              <div className={classes.masterActions}>
+          <Grid item xs={12} className={classes.container}>
+            <Grid item xs={12}>
+              <div className={classes.headerContainer}>
                 <div>
+                  <Paper className={classes.paperContainer}>
+                    <div className={classes.gridContainer}>
+                      <div>Access Policy:</div>
+                      <div className={classes.capitalizeFirst}>
+                        {loadingBucket ? (
+                          <CircularProgress
+                            color="primary"
+                            size={16}
+                            variant="indeterminate"
+                          />
+                        ) : (
+                          accessPolicy.toLowerCase()
+                        )}
+                      </div>
+                      <div>Reported Usage:</div>
+                      <div>
+                        {loadingSize ? (
+                          <CircularProgress
+                            color="primary"
+                            size={16}
+                            variant="indeterminate"
+                          />
+                        ) : (
+                          niceBytes(bucketSize)
+                        )}
+                      </div>
+                      <div>Replication:</div>
+                      <div className={classes.doubleElement}>
+                        <span>{replicationRules.length ? "Yes" : "No"}</span>
+                      </div>
+                      <div>Versioning:</div>
+                      <div>{isVersioned ? "Yes" : "No"}&nbsp;</div>
+                    </div>
+                  </Paper>
+                </div>
+                <div className={classes.masterActions}>
+                  <div>
+                    <Button
+                      variant="contained"
+                      color="primary"
+                      fullWidth
+                      size="medium"
+                      onClick={() => {
+                        this.setState({
+                          setAccessPolicyScreenOpen: true,
+                        });
+                      }}
+                    >
+                      Change Access Policy
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </Grid>
+            <Grid item xs={12}>
+              <br />
+            </Grid>
+            <Grid container item xs={12}>
+              <Grid item xs={6}>
+                <Tabs
+                  value={curTab}
+                  onChange={(e: React.ChangeEvent<{}>, newValue: number) => {
+                    this.setState({ curTab: newValue });
+                  }}
+                  indicatorColor="primary"
+                  textColor="primary"
+                  aria-label="cluster-tabs"
+                >
+                  <Tab label="Events" {...a11yProps(0)} />
+                  <Tab label="Replication" {...a11yProps(1)} />
+                </Tabs>
+              </Grid>
+              <Grid item xs={6} className={classes.actionsTray}>
+                {curTab === 0 && (
                   <Button
                     variant="contained"
                     color="primary"
-                    fullWidth
+                    startIcon={<CreateIcon />}
                     size="medium"
                     onClick={() => {
                       this.setState({
-                        setAccessPolicyScreenOpen: true,
+                        addScreenOpen: true,
                       });
                     }}
                   >
-                    Change Access Policy
+                    Subscribe to Event
                   </Button>
-                </div>
-              </div>
-            </div>
-          </Grid>
-          <Grid item xs={12}>
-            <br />
-          </Grid>
-          <Grid item xs={6}>
-            <Tabs
-              value={0}
-              indicatorColor="primary"
-              textColor="primary"
-              aria-label="cluster-tabs"
-            >
-              <Tab label="Events" />
-            </Tabs>
-          </Grid>
-          <Grid item xs={6} className={classes.actionsTray}>
-            <Button
-              variant="contained"
-              color="primary"
-              startIcon={<CreateIcon />}
-              size="medium"
-              onClick={() => {
-                this.setState({
-                  addScreenOpen: true,
-                });
-              }}
-            >
-              Subcribe to Event
-            </Button>
-          </Grid>
-          <Grid item xs={12}>
-            <br />
-          </Grid>
-          <Grid item xs={12}>
-            <TableWrapper
-              itemActions={tableActions}
-              columns={[
-                { label: "SQS", elementKey: "arn" },
-                {
-                  label: "Events",
-                  elementKey: "events",
-                  renderFunction: eventsDisplay,
-                },
-                { label: "Prefix", elementKey: "prefix" },
-                { label: "Suffix", elementKey: "suffix" },
-              ]}
-              isLoading={loadingEvents}
-              records={filteredRecords}
-              entityName="Events"
-              idField="id"
-              paginatorConfig={{
-                rowsPerPageOptions: [5, 10, 25],
-                colSpan: 3,
-                count: totalRecords,
-                rowsPerPage: rowsPerPage,
-                page: page,
-                SelectProps: {
-                  inputProps: { "aria-label": "rows per page" },
-                  native: true,
-                },
-                onChangePage: handleChangePage,
-                onChangeRowsPerPage: handleChangeRowsPerPage,
-                ActionsComponent: MinTablePaginationActions,
-              }}
-            />
+                )}
+                {curTab === 1 && (
+                  <Button
+                    variant="contained"
+                    color="primary"
+                    startIcon={<CreateIcon />}
+                    size="medium"
+                    onClick={() => {
+                      this.setState({
+                        openSetReplication: true,
+                      });
+                    }}
+                  >
+                    Add Replication Rule
+                  </Button>
+                )}
+              </Grid>
+            </Grid>
+            <Grid item xs={12}>
+              <TabPanel index={0} value={curTab}>
+                <TableWrapper
+                  itemActions={tableActions}
+                  columns={[
+                    { label: "SQS", elementKey: "arn" },
+                    {
+                      label: "Events",
+                      elementKey: "events",
+                      renderFunction: eventsDisplay,
+                    },
+                    { label: "Prefix", elementKey: "prefix" },
+                    { label: "Suffix", elementKey: "suffix" },
+                  ]}
+                  isLoading={loadingEvents}
+                  records={filteredRecords}
+                  entityName="Events"
+                  idField="id"
+                  paginatorConfig={{
+                    rowsPerPageOptions: [5, 10, 25],
+                    colSpan: 3,
+                    count: totalRecords,
+                    rowsPerPage: rowsPerPage,
+                    page: page,
+                    SelectProps: {
+                      inputProps: { "aria-label": "rows per page" },
+                      native: true,
+                    },
+                    onChangePage: handleChangePage,
+                    onChangeRowsPerPage: handleChangeRowsPerPage,
+                    ActionsComponent: MinTablePaginationActions,
+                  }}
+                />
+              </TabPanel>
+              <TabPanel index={1} value={curTab}>
+                <TableWrapper
+                  itemActions={tableActions}
+                  columns={[
+                    { label: "ID", elementKey: "id" },
+                    {
+                      label: "Priority",
+                      elementKey: "priority",
+                    },
+                    {
+                      label: "Destination",
+                      elementKey: "destination",
+                      renderFunction: ruleDestDisplay,
+                    },
+                    {
+                      label: "Delete Replication",
+                      elementKey: "delete_marker_replication",
+                      renderFunction: ruleDelDisplay,
+                    },
+                    { label: "Status", elementKey: "status" },
+                  ]}
+                  isLoading={loadingEvents}
+                  records={filteredRules}
+                  entityName="Replication Rules"
+                  idField="id"
+                  paginatorConfig={{
+                    rowsPerPageOptions: [5, 10, 25],
+                    colSpan: 3,
+                    count: totalRecords,
+                    rowsPerPage: rowsPerPage,
+                    page: page,
+                    SelectProps: {
+                      inputProps: { "aria-label": "rows per page" },
+                      native: true,
+                    },
+                    onChangePage: handleChangePage,
+                    onChangeRowsPerPage: handleChangeRowsPerPage,
+                    ActionsComponent: MinTablePaginationActions,
+                  }}
+                />
+              </TabPanel>
+            </Grid>
           </Grid>
         </Grid>
 

portal-ui/src/screens/Console/Buckets/actions.ts

@@ -0,0 +1,126 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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/>.
+
+export const ADD_BUCKET_OPEN = "ADD_BUCKET_OPEN";
+export const ADD_BUCKET_NAME = "ADD_BUCKET_NAME";
+export const ADD_BUCKET_VERSIONED = "ADD_BUCKET_VERSIONED";
+export const ADD_BUCKET_QUOTA = "ADD_BUCKET_QUOTA";
+export const ADD_BUCKET_QUOTA_TYPE = "ADD_BUCKET_QUOTA_TYPE";
+export const ADD_BUCKET_QUOTA_SIZE = "ADD_BUCKET_QUOTA_SIZE";
+export const ADD_BUCKET_QUOTA_UNIT = "ADD_BUCKET_QUOTA_UNIT";
+export const ADD_BUCKET_RESET = "ADD_BUCKET_RESET";
+
+interface AddBucketOpenAction {
+  type: typeof ADD_BUCKET_OPEN;
+  open: boolean;
+}
+
+interface AddBucketNameAction {
+  type: typeof ADD_BUCKET_NAME;
+  name: string;
+}
+
+interface AddBucketVersionedAction {
+  type: typeof ADD_BUCKET_VERSIONED;
+  versioned: boolean;
+}
+
+interface AddBucketQuotaAction {
+  type: typeof ADD_BUCKET_QUOTA;
+  quota: boolean;
+}
+
+interface AddBucketQuotaTypeAction {
+  type: typeof ADD_BUCKET_QUOTA_TYPE;
+  quotaType: string;
+}
+
+interface AddBucketQuotaSizeAction {
+  type: typeof ADD_BUCKET_QUOTA_SIZE;
+  quotaSize: string;
+}
+
+interface AddBucketQuotaUnitAction {
+  type: typeof ADD_BUCKET_QUOTA_UNIT;
+  quotaUnit: string;
+}
+interface AddBucketResetAction {
+  type: typeof ADD_BUCKET_RESET;
+}
+
+export type BucketActionTypes =
+  | AddBucketOpenAction
+  | AddBucketNameAction
+  | AddBucketVersionedAction
+  | AddBucketQuotaAction
+  | AddBucketQuotaTypeAction
+  | AddBucketQuotaSizeAction
+  | AddBucketQuotaUnitAction
+  | AddBucketResetAction;
+
+export function addBucketOpen(open: boolean) {
+  return {
+    type: ADD_BUCKET_OPEN,
+    open: open,
+  };
+}
+export function addBucketName(name: string) {
+  return {
+    type: ADD_BUCKET_NAME,
+    name: name,
+  };
+}
+
+export function addBucketVersioned(versioned: boolean) {
+  return {
+    type: ADD_BUCKET_VERSIONED,
+    versioned: versioned,
+  };
+}
+
+export function addBucketQuota(quota: boolean) {
+  return {
+    type: ADD_BUCKET_QUOTA,
+    quota: quota,
+  };
+}
+
+export function addBucketQuotaType(quotaType: string) {
+  return {
+    type: ADD_BUCKET_QUOTA_TYPE,
+    quotaType: quotaType,
+  };
+}
+
+export function addBucketQuotaSize(quotaSize: string) {
+  return {
+    type: ADD_BUCKET_QUOTA_SIZE,
+    quotaSize: quotaSize,
+  };
+}
+
+export function addBucketQuotaUnit(quotaUnit: string) {
+  return {
+    type: ADD_BUCKET_QUOTA_UNIT,
+    quotaUnit: quotaUnit,
+  };
+}
+
+export function addBucketReset() {
+  return {
+    type: ADD_BUCKET_RESET,
+  };
+}

portal-ui/src/screens/Console/Buckets/reducers.ts

@@ -0,0 +1,102 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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 {
+  ADD_BUCKET_NAME,
+  ADD_BUCKET_OPEN,
+  ADD_BUCKET_QUOTA,
+  ADD_BUCKET_QUOTA_SIZE,
+  ADD_BUCKET_QUOTA_TYPE,
+  ADD_BUCKET_QUOTA_UNIT,
+  ADD_BUCKET_RESET,
+  ADD_BUCKET_VERSIONED,
+  BucketActionTypes,
+} from "./actions";
+
+export interface BucketsState {
+  open: boolean;
+  addBucketName: string;
+  addBucketVersioning: boolean;
+  addBucketQuotaEnabled: boolean;
+  addBucketQuotaType: string;
+  addBucketQuotaSize: string;
+  addBucketQuotaUnit: string;
+}
+
+const initialState: BucketsState = {
+  open: false,
+  addBucketName: "",
+  addBucketVersioning: false,
+  addBucketQuotaEnabled: false,
+  addBucketQuotaType: "hard",
+  addBucketQuotaSize: "1",
+  addBucketQuotaUnit: "TiB",
+};
+
+export function bucketsReducer(
+  state = initialState,
+  action: BucketActionTypes
+): BucketsState {
+  switch (action.type) {
+    case ADD_BUCKET_OPEN:
+      return {
+        ...state,
+        open: action.open,
+      };
+    case ADD_BUCKET_NAME:
+      return {
+        ...state,
+        addBucketName: action.name,
+      };
+    case ADD_BUCKET_VERSIONED:
+      return {
+        ...state,
+        addBucketVersioning: action.versioned,
+      };
+    case ADD_BUCKET_QUOTA:
+      return {
+        ...state,
+        addBucketQuotaEnabled: action.quota,
+      };
+    case ADD_BUCKET_QUOTA_TYPE:
+      return {
+        ...state,
+        addBucketQuotaType: action.quotaType,
+      };
+    case ADD_BUCKET_QUOTA_SIZE:
+      return {
+        ...state,
+        addBucketQuotaSize: action.quotaSize,
+      };
+    case ADD_BUCKET_QUOTA_UNIT:
+      return {
+        ...state,
+        addBucketQuotaUnit: action.quotaUnit,
+      };
+    case ADD_BUCKET_RESET:
+      return {
+        ...state,
+        addBucketName: "",
+        addBucketVersioning: false,
+        addBucketQuotaEnabled: false,
+        addBucketQuotaType: "hard",
+        addBucketQuotaSize: "1",
+        addBucketQuotaUnit: "TiB",
+      };
+    default:
+      return state;
+  }
+}

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

@@ -45,3 +45,49 @@ export interface BucketEventList {
 export interface ArnList {
   arns: string[];
 }
+
+export interface BucketVersioning {
+  is_versioned: boolean;
+}
+
+export interface BucketReplicationRuleDeleteMarker {
+  status: string;
+}
+export interface BucketReplicationDestination {
+  bucket: string;
+}
+export interface BucketReplicationRule {
+  id: string;
+  status: string;
+  priority: number;
+  delete_marker_replication: BucketReplicationRuleDeleteMarker;
+  Destination: BucketReplicationDestination;
+}
+
+export interface BucketReplication {
+  rules: BucketReplicationRule[];
+}
+
+export interface QuotaRequest {
+  enabled: boolean;
+  quota_type: string;
+  amount: number;
+}
+
+export interface MakeBucketRequest {
+  name: string;
+  versioning: boolean;
+  quota?: QuotaRequest;
+}
+
+export interface IRemoteBucket {
+  name: string;
+  accessKey: string;
+  secretKey: string;
+  sourceBucket: string;
+  targetURL: string;
+  targetBucket: string;
+  remoteARN: string;
+  status: string;
+  service: string;
+}

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

@@ -15,6 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
+import get from "lodash/get";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { NewServiceAccount } from "./types";
 import { Button } from "@material-ui/core";
@@ -67,6 +68,8 @@ const CredentialsPrompt = ({
     return null;
   }
 
+  const consoleCreds = get(newServiceAccount, "console", null);
+
   return (
     <ModalWrapper
       modalOpen={open}
@@ -87,6 +90,21 @@ const CredentialsPrompt = ({
                 <b>Secret Key:</b> {newServiceAccount.secretKey}
               </li>
             </ul>
+            {consoleCreds && (
+              <React.Fragment>
+                <Grid item xs={12}>
+                  <strong>Console Credentials</strong>
+                  <ul>
+                    <li>
+                      <b>Access Key:</b> {consoleCreds.accessKey}
+                    </li>
+                    <li>
+                      <b>Secret Key:</b> {consoleCreds.secretKey}
+                    </li>
+                  </ul>
+                </Grid>
+              </React.Fragment>
+            )}
             <Typography
               component="p"
               variant="body1"
@@ -99,11 +117,23 @@ const CredentialsPrompt = ({
           <Grid item xs={12} className={classes.buttonContainer}>
             <Button
               onClick={() => {
+                let consoleExtras = {};
+
+                if (consoleCreds) {
+                  consoleExtras = {
+                    console: {
+                      access_key: consoleCreds.accessKey,
+                      secret_key: consoleCreds.secretKey,
+                    },
+                  };
+                }
+
                 download(
                   "credentials.json",
                   JSON.stringify({
                     access_key: newServiceAccount.accessKey,
                     secret_key: newServiceAccount.secretKey,
+                    ...consoleExtras,
                   })
                 );
               }}

portal-ui/src/screens/Console/Common/CredentialsPrompt/types.ts

@@ -17,4 +17,10 @@
 export interface NewServiceAccount {
   accessKey: string;
   secretKey: string;
+  console?: ConsoleSA;
+}
+
+export interface ConsoleSA {
+  accessKey: string;
+  secretKey: string;
 }

portal-ui/src/screens/Console/Common/FormComponents/CSVMultiSelector/CSVMultiSelector.tsx

@@ -1,5 +1,5 @@
 // This file is part of MinIO Console Server
-// Copyright (c) 2019 MinIO, Inc.
+// Copyright (c) 2020 MinIO, Inc.
 //
 // This program is free software: you can redistribute it and/or modify
 // it under the terms of the GNU Affero General Public License as published by
@@ -13,21 +13,32 @@
 //
 // 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, createRef, ChangeEvent } from "react";
+import React, {
+  useState,
+  useEffect,
+  createRef,
+  useLayoutEffect,
+  ChangeEvent,
+  useRef,
+} from "react";
+import get from "lodash/get";
+import debounce from "lodash/debounce";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
-import get from "lodash/get";
-import InputBoxWrapper from "../InputBoxWrapper/InputBoxWrapper";
+import HelpIcon from "@material-ui/icons/Help";
 import { InputLabel, Tooltip } from "@material-ui/core";
 import { fieldBasic, tooltipHelper } from "../common/styleLibrary";
-import HelpIcon from "@material-ui/icons/Help";
+import InputBoxWrapper from "../InputBoxWrapper/InputBoxWrapper";
+import AddIcon from "../../../../../icons/AddIcon";
 
 interface ICSVMultiSelector {
   elements: string;
   name: string;
   label: string;
   tooltip?: string;
+  commonPlaceholder?: string;
   classes: any;
+  withBorder?: boolean;
   onChange: (elements: string) => void;
 }
 
@@ -35,16 +46,13 @@ const styles = (theme: Theme) =>
   createStyles({
     ...fieldBasic,
     ...tooltipHelper,
-    inputLabel: {
-      ...fieldBasic.inputLabel,
-      width: 116,
-    },
-    inputContainer: {
+    inputWithBorder: {
+      border: "1px solid #EAEAEA",
+      padding: 15,
       height: 150,
       overflowY: "auto",
-      padding: 15,
       position: "relative",
-      border: "1px solid #c4c4c4",
+      marginTop: 15,
     },
     labelContainer: {
       display: "flex",
@@ -56,7 +64,9 @@ const CSVMultiSelector = ({
   name,
   label,
   tooltip = "",
+  commonPlaceholder = "",
   onChange,
+  withBorder = false,
   classes,
 }: ICSVMultiSelector) => {
   const [currentElements, setCurrentElements] = useState<string[]>([""]);
@@ -75,29 +85,37 @@ const CSVMultiSelector = ({
 
       setCurrentElements(elementsSplit);
     }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [elements, currentElements]);
 
   // Use effect to send new values to onChange
   useEffect(() => {
-    const elementsString = currentElements
-      .filter((element) => element.trim() !== "")
-      .join(",");
-    onChange(elementsString);
+    const refScroll = bottomList.current;
+    if (refScroll) {
+      refScroll.scrollIntoView(false);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentElements]);
 
+  // We avoid multiple re-renders / hang issue typing too fast
+  const firstUpdate = useRef(true);
+  useLayoutEffect(() => {
+    if (firstUpdate.current) {
+      firstUpdate.current = false;
+      return;
+    }
+
+    debouncedOnChange();
+  }, [currentElements]);
+
   // If the last input is not empty, we add a new one
   const addEmptyLine = (elementsUp: string[]) => {
     if (elementsUp[elementsUp.length - 1].trim() !== "") {
-      elementsUp.push("");
-      const refScroll = bottomList.current;
-
-      if (refScroll) {
-        refScroll.scrollIntoView(false);
-      }
+      const cpList = [...elementsUp];
+      cpList.push("");
+      setCurrentElements(cpList);
     }
-
-    return elementsUp;
   };
 
   // Onchange function for input box, we get the dataset-index & only update that value in the array
@@ -108,10 +126,18 @@ const CSVMultiSelector = ({
     const index = get(e.target, "dataset.index", 0);
     updatedElement[index] = e.target.value;
 
-    updatedElement = addEmptyLine(updatedElement);
     setCurrentElements(updatedElement);
   };
 
+  // Debounce for On Change
+  const debouncedOnChange = debounce(() => {
+    const elementsString = currentElements
+      .filter((element) => element.trim() !== "")
+      .join(",");
+
+    onChange(elementsString);
+  }, 500);
+
   const inputs = currentElements.map((element, index) => {
     return (
       <InputBoxWrapper
@@ -122,6 +148,11 @@ const CSVMultiSelector = ({
         onChange={onChangeElement}
         index={index}
         key={`csv-${name}-${index.toString()}`}
+        placeholder={commonPlaceholder}
+        overlayIcon={index === currentElements.length - 1 ? <AddIcon /> : null}
+        overlayAction={() => {
+          addEmptyLine(currentElements);
+        }}
       />
     );
   });
@@ -139,7 +170,11 @@ const CSVMultiSelector = ({
             </div>
           )}
         </InputLabel>
-        <Grid item xs={12} className={classes.inputContainer}>
+        <Grid
+          item
+          xs={12}
+          className={`${withBorder ? classes.inputWithBorder : ""}`}
+        >
           {inputs}
           <div ref={bottomList} />
         </Grid>
@@ -147,5 +182,4 @@ const CSVMultiSelector = ({
     </React.Fragment>
   );
 };
-
 export default withStyles(styles)(CSVMultiSelector);

portal-ui/src/screens/Console/Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper.tsx

@@ -0,0 +1,83 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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 from "react";
+import HelpIcon from "@material-ui/icons/Help";
+import Grid from "@material-ui/core/Grid";
+import { Controlled as CodeMirror } from "react-codemirror2";
+import { InputLabel, Tooltip } from "@material-ui/core";
+import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
+import { fieldBasic } from "../common/styleLibrary";
+import "./ConsoleCodeMirror.css";
+
+require("codemirror/mode/javascript/javascript");
+
+interface ICodeWrapper {
+  value: string;
+  label?: string;
+  tooltip?: string;
+  classes: any;
+  onChange?: (editor: any, data: any, value: string) => any;
+  onBeforeChange: (editor: any, data: any, value: string) => any;
+  readOnly?: boolean;
+}
+
+const styles = (theme: Theme) =>
+  createStyles({
+    ...fieldBasic,
+  });
+
+const CodeMirrorWrapper = ({
+  value,
+  label = "",
+  tooltip = "",
+  classes,
+  onChange = () => {},
+  onBeforeChange,
+  readOnly = false,
+}: ICodeWrapper) => {
+  return (
+    <React.Fragment>
+      <InputLabel className={classes.inputLabel}>
+        <span>{label}</span>
+        {tooltip !== "" && (
+          <div className={classes.tooltipContainer}>
+            <Tooltip title={tooltip} placement="top-start">
+              <HelpIcon className={classes.tooltip} />
+            </Tooltip>
+          </div>
+        )}
+      </InputLabel>
+      <Grid item xs={12}>
+        <br />
+      </Grid>
+      <Grid item xs={12}>
+        <CodeMirror
+          value={value}
+          options={{
+            mode: "javascript",
+            lineNumbers: true,
+            readOnly,
+          }}
+          onBeforeChange={onBeforeChange}
+          onChange={onChange}
+        />
+      </Grid>
+    </React.Fragment>
+  );
+};
+
+export default withStyles(styles)(CodeMirrorWrapper);

portal-ui/src/screens/Console/Common/FormComponents/CodeMirrorWrapper/ConsoleCodeMirror.css

@@ -0,0 +1,353 @@
+/* BASICS */
+
+.CodeMirror {
+    /* Set height, width, borders, and global font properties here */
+    font-family: monospace;
+    height: 300px;
+    color: #fff;
+    background: #081C42;
+    direction: ltr;
+    font-size: 13px;
+}
+
+/* PADDING */
+
+.CodeMirror-lines {
+    padding: 4px 0; /* Vertical padding around content */
+}
+.CodeMirror pre.CodeMirror-line,
+.CodeMirror pre.CodeMirror-line-like {
+    padding: 0 4px; /* Horizontal padding of content */
+}
+
+.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+    background-color: rgba(255,255,255,0.8); /* The little square between H and V scrollbars */
+}
+
+/* GUTTER */
+
+.CodeMirror-gutters {
+    border-right: 1px solid #ddd;
+    background-color: #ffffff80;
+    white-space: nowrap;
+}
+.CodeMirror-linenumbers {}
+.CodeMirror-linenumber {
+    padding: 0 3px 0 5px;
+    min-width: 20px;
+    white-space: nowrap;
+    color: #000;
+    font-size: 10px;
+    height: 18px;
+    line-height: 18px;
+    text-align: center;
+}
+
+.CodeMirror-guttermarker { color: black; }
+.CodeMirror-guttermarker-subtle { color: #999; }
+
+/* CURSOR */
+
+.CodeMirror-cursor {
+    border-left: 1px solid white;
+    border-right: none;
+    width: 0;
+}
+/* Shown when moving in bi-directional text */
+.CodeMirror div.CodeMirror-secondarycursor {
+    border-left: 1px solid silver;
+}
+.cm-fat-cursor .CodeMirror-cursor {
+    width: auto;
+    border: 0 !important;
+    background: #7e7;
+}
+.cm-fat-cursor div.CodeMirror-cursors {
+    z-index: 1;
+}
+.cm-fat-cursor-mark {
+    background-color: rgba(20, 255, 20, 0.5);
+    -webkit-animation: blink 1.06s steps(1) infinite;
+    -moz-animation: blink 1.06s steps(1) infinite;
+    animation: blink 1.06s steps(1) infinite;
+}
+.cm-animate-fat-cursor {
+    width: auto;
+    border: 0;
+    -webkit-animation: blink 1.06s steps(1) infinite;
+    -moz-animation: blink 1.06s steps(1) infinite;
+    animation: blink 1.06s steps(1) infinite;
+    background-color: #7e7;
+}
+@-moz-keyframes blink {
+    0% {}
+    50% { background-color: transparent; }
+    100% {}
+}
+@-webkit-keyframes blink {
+    0% {}
+    50% { background-color: transparent; }
+    100% {}
+}
+@keyframes blink {
+    0% {}
+    50% { background-color: transparent; }
+    100% {}
+}
+
+/* Can style cursor different in overwrite (non-insert) mode */
+.CodeMirror-overwrite .CodeMirror-cursor {}
+
+.cm-tab { display: inline-block; text-decoration: inherit; }
+
+.CodeMirror-rulers {
+    position: absolute;
+    left: 0; right: 0; top: -50px; bottom: 0;
+    overflow: hidden;
+}
+.CodeMirror-ruler {
+    border-left: 1px solid #ccc;
+    top: 0; bottom: 0;
+    position: absolute;
+}
+
+/* DEFAULT THEME */
+
+.cm-s-default .cm-header {color: #fff;}
+.cm-s-default .cm-quote {color: #fff;}
+.cm-negative {color: #fff;}
+.cm-positive {color: #fff;}
+.cm-header, .cm-strong {font-weight: bold;}
+.cm-em {font-style: italic;}
+.cm-link {text-decoration: underline;}
+.cm-strikethrough {text-decoration: line-through;}
+
+.cm-s-default .cm-keyword {color: #fff;}
+.cm-s-default .cm-atom {color: #fff;}
+.cm-s-default .cm-number {color: #fff;}
+.cm-s-default .cm-def {color: #fff;}
+.cm-s-default .cm-variable,
+.cm-s-default .cm-punctuation,
+.cm-s-default .cm-property,
+.cm-s-default .cm-operator {}
+.cm-s-default .cm-variable-2 {color: #fff;}
+.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #fff;}
+.cm-s-default .cm-comment {color: #fff;}
+.cm-s-default .cm-string {color: #fff;}
+.cm-s-default .cm-string-2 {color: #fff;}
+.cm-s-default .cm-meta {color: #fff;}
+.cm-s-default .cm-qualifier {color: #fff;}
+.cm-s-default .cm-builtin {color: #fff;}
+.cm-s-default .cm-bracket {color: #fff;}
+.cm-s-default .cm-tag {color: #fff;}
+.cm-s-default .cm-attribute {color: #fff;}
+.cm-s-default .cm-hr {color: #fff;}
+.cm-s-default .cm-link {color: #fff;}
+
+.cm-s-default .cm-error {color: #fff;}
+.cm-invalidchar {color: #fff;}
+
+.CodeMirror-composing { border-bottom: 2px solid; }
+
+/* Default styles for common addons */
+
+div.CodeMirror span.CodeMirror-matchingbracket {color: #fff;}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #fff;}
+.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
+.CodeMirror-activeline-background {background: #e8f2ff;}
+
+/* STOP */
+
+/* The rest of this file contains styles related to the mechanics of
+   the editor. You probably shouldn't touch them. */
+
+.CodeMirror {
+    position: relative;
+    overflow: hidden;
+}
+
+.CodeMirror-scroll {
+    overflow: scroll !important; /* Things will break if this is overridden */
+    /* 50px is the magic margin used to hide the element's real scrollbars */
+    /* See overflow: hidden in .CodeMirror */
+    margin-bottom: -50px; margin-right: -50px;
+    padding-bottom: 50px;
+    height: 100%;
+    outline: none; /* Prevent dragging from highlighting the element */
+    position: relative;
+}
+.CodeMirror-sizer {
+    position: relative;
+    border-right: 50px solid transparent;
+}
+
+/* The fake, visible scrollbars. Used to force redraw during scrolling
+   before actual scrolling happens, thus preventing shaking and
+   flickering artifacts. */
+.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+    position: absolute;
+    z-index: 6;
+    display: none;
+}
+.CodeMirror-vscrollbar {
+    right: 0; top: 0;
+    overflow-x: hidden;
+    overflow-y: scroll;
+}
+.CodeMirror-hscrollbar {
+    bottom: 0; left: 0;
+    overflow-y: hidden;
+    overflow-x: scroll;
+}
+.CodeMirror-scrollbar-filler {
+    right: 0; bottom: 0;
+}
+.CodeMirror-gutter-filler {
+    left: 0; bottom: 0;
+}
+
+.CodeMirror-gutters {
+    position: absolute; left: 0; top: 0;
+    min-height: 100%;
+    z-index: 3;
+}
+.CodeMirror-gutter {
+    white-space: normal;
+    height: 100%;
+    display: inline-block;
+    vertical-align: top;
+    margin-bottom: -50px;
+}
+.CodeMirror-gutter-wrapper {
+    position: absolute;
+    z-index: 4;
+    background: none !important;
+    border: none !important;
+}
+.CodeMirror-gutter-background {
+    position: absolute;
+    top: 0; bottom: 0;
+    z-index: 4;
+}
+.CodeMirror-gutter-elt {
+    position: absolute;
+    cursor: default;
+    z-index: 4;
+}
+.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
+.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
+
+.CodeMirror-lines {
+    cursor: text;
+    min-height: 1px; /* prevents collapsing before first draw */
+}
+.CodeMirror pre.CodeMirror-line,
+.CodeMirror pre.CodeMirror-line-like {
+    /* Reset some styles that the rest of the page might have set */
+    -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
+    border-width: 0;
+    background: transparent;
+    font-family: inherit;
+    font-size: inherit;
+    margin: 0;
+    white-space: pre;
+    word-wrap: normal;
+    line-height: inherit;
+    color: inherit;
+    z-index: 2;
+    position: relative;
+    overflow: visible;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-font-variant-ligatures: contextual;
+    font-variant-ligatures: contextual;
+}
+.CodeMirror-wrap pre.CodeMirror-line,
+.CodeMirror-wrap pre.CodeMirror-line-like {
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    word-break: normal;
+}
+
+.CodeMirror-linebackground {
+    position: absolute;
+    left: 0; right: 0; top: 0; bottom: 0;
+    z-index: 0;
+}
+
+.CodeMirror-linewidget {
+    position: relative;
+    z-index: 2;
+    padding: 0.1px; /* Force widget margins to stay inside of the container */
+}
+
+.CodeMirror-widget {}
+
+.CodeMirror-rtl pre { direction: rtl; }
+
+.CodeMirror-code {
+    outline: none;
+}
+
+/* Force content-box sizing for the elements where we expect it */
+.CodeMirror-scroll,
+.CodeMirror-sizer,
+.CodeMirror-gutter,
+.CodeMirror-gutters,
+.CodeMirror-linenumber {
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+}
+
+.CodeMirror-measure {
+    position: absolute;
+    width: 100%;
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+}
+
+.CodeMirror-cursor {
+    position: absolute;
+    pointer-events: none;
+}
+.CodeMirror-measure pre { position: static; }
+
+div.CodeMirror-cursors {
+    visibility: hidden;
+    position: relative;
+    z-index: 3;
+}
+div.CodeMirror-dragcursors {
+    visibility: visible;
+}
+
+.CodeMirror-focused div.CodeMirror-cursors {
+    visibility: visible;
+}
+
+.CodeMirror-selected { background: #d9d9d9; }
+.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
+.CodeMirror-crosshair { cursor: crosshair; }
+.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
+.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
+
+.cm-searching {
+    background-color: #ffa;
+    background-color: rgba(255, 255, 0, .4);
+}
+
+/* Used to force a border model for a node */
+.cm-force-border { padding-right: .1px; }
+
+@media print {
+    /* Hide the cursor when printing */
+    .CodeMirror div.CodeMirror-cursors {
+        visibility: hidden;
+    }
+}
+
+/* See issue #2901 */
+.cm-tab-wrap-hack:after { content: ''; }
+
+/* Help users use markselection to safely style text background */
+span.CodeMirror-selectedtext { background: none; }

portal-ui/src/screens/Console/Common/FormComponents/CommentBoxWrapper/CommentBoxWrapper.tsx

@@ -0,0 +1,158 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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 from "react";
+import {
+  Grid,
+  InputLabel,
+  TextField,
+  TextFieldProps,
+  Tooltip,
+} from "@material-ui/core";
+import { OutlinedInputProps } from "@material-ui/core/OutlinedInput";
+import {
+  createStyles,
+  makeStyles,
+  Theme,
+  withStyles,
+} from "@material-ui/core/styles";
+import { fieldBasic, tooltipHelper } from "../common/styleLibrary";
+import HelpIcon from "@material-ui/icons/Help";
+
+interface CommentBoxProps {
+  label: string;
+  classes: any;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  value: string | boolean;
+  id: string;
+  name: string;
+  disabled?: boolean;
+  tooltip?: string;
+  index?: number;
+  error?: string;
+  required?: boolean;
+  placeholder?: string;
+}
+
+const styles = (theme: Theme) =>
+  createStyles({
+    ...fieldBasic,
+    ...tooltipHelper,
+    inputLabel: {
+      ...fieldBasic.inputLabel,
+      marginBottom: 16,
+      fontSize: 14,
+    },
+    textBoxContainer: {
+      flexGrow: 1,
+      position: "relative",
+    },
+    errorState: {
+      color: "#b53b4b",
+      fontSize: 14,
+      position: "absolute",
+      top: 7,
+      right: 7,
+    },
+    cssOutlinedInput: {
+      borderColor: "#9C9C9C",
+      padding: 16,
+    },
+    rootContainer: {
+      "& .MuiOutlinedInput-inputMultiline": {
+        ...fieldBasic.inputLabel,
+        fontSize: 13,
+        minHeight: 150,
+      },
+    },
+  });
+
+const CommentBoxWrapper = ({
+  label,
+  onChange,
+  value,
+  id,
+  name,
+  disabled = false,
+  tooltip = "",
+  index = 0,
+  error = "",
+  required = false,
+  placeholder = "",
+  classes,
+}: CommentBoxProps) => {
+  let inputProps: any = { "data-index": index };
+
+  return (
+    <React.Fragment>
+      <Grid
+        item
+        xs={12}
+        className={`${classes.fieldContainer} ${
+          error !== "" ? classes.errorInField : ""
+        }`}
+      >
+        {label !== "" && (
+          <InputLabel
+            htmlFor={id}
+            className={`${error !== "" ? classes.fieldLabelError : ""} ${
+              classes.inputLabel
+            }`}
+          >
+            <span>
+              {label}
+              {required ? "*" : ""}
+            </span>
+            {tooltip !== "" && (
+              <div className={classes.tooltipContainer}>
+                <Tooltip title={tooltip} placement="top-start">
+                  <HelpIcon className={classes.tooltip} />
+                </Tooltip>
+              </div>
+            )}
+          </InputLabel>
+        )}
+
+        <div className={classes.textBoxContainer}>
+          <TextField
+            id={id}
+            name={name}
+            fullWidth
+            value={value}
+            disabled={disabled}
+            onChange={onChange}
+            multiline
+            inputProps={inputProps}
+            error={error !== ""}
+            helperText={error}
+            placeholder={placeholder}
+            InputLabelProps={{
+              shrink: true,
+            }}
+            InputProps={{
+              classes: {
+                notchedOutline: classes.cssOutlinedInput,
+                root: classes.rootContainer,
+              },
+            }}
+            variant="outlined"
+          />
+        </div>
+      </Grid>
+    </React.Fragment>
+  );
+};
+
+export default withStyles(styles)(CommentBoxWrapper);

portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx

@@ -0,0 +1,186 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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 get from "lodash/get";
+import { Grid, InputLabel, Tooltip } from "@material-ui/core";
+import IconButton from "@material-ui/core/IconButton";
+import AttachFileIcon from "@material-ui/icons/AttachFile";
+import CancelIcon from "@material-ui/icons/Cancel";
+import HelpIcon from "@material-ui/icons/Help";
+import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
+import { fieldBasic, tooltipHelper } from "../common/styleLibrary";
+import { fileProcess } from "./utils";
+
+interface InputBoxProps {
+  label: string;
+  classes: any;
+  onChange: (e: string, i: string) => void;
+  id: string;
+  name: string;
+  disabled?: boolean;
+  tooltip?: string;
+  required?: boolean;
+  error?: string;
+  accept?: string;
+  value?: string;
+}
+
+const styles = (theme: Theme) =>
+  createStyles({
+    ...fieldBasic,
+    ...tooltipHelper,
+    textBoxContainer: {
+      flexGrow: 1,
+      position: "relative",
+      flexDirection: "column",
+    },
+    errorState: {
+      color: "#b53b4b",
+      fontSize: 14,
+      position: "absolute",
+      top: 7,
+      right: 7,
+    },
+    errorText: {
+      margin: "0",
+      fontSize: "0.75rem",
+      marginTop: 3,
+      textAlign: "left",
+      fontFamily: "Lato,sans-serif",
+      fontWeight: 400,
+      lineHeight: "1.66",
+      color: "#dc1f2e",
+    },
+    valueString: {
+      maxWidth: 350,
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      marginTop: 2,
+    },
+    fileReselect: {
+      display: "flex",
+      alignItems: "center",
+    },
+  });
+
+const FileSelector = ({
+  label,
+  classes,
+  onChange,
+  id,
+  name,
+  disabled = false,
+  tooltip = "",
+  required,
+  error = "",
+  accept = "",
+  value = "",
+}: InputBoxProps) => {
+  const [showFileSelector, setShowSelector] = useState(false);
+
+  return (
+    <React.Fragment>
+      <Grid
+        item
+        xs={12}
+        className={`${classes.fieldContainer} ${
+          error !== "" ? classes.errorInField : ""
+        }`}
+      >
+        {label !== "" && (
+          <InputLabel
+            htmlFor={id}
+            className={`${error !== "" ? classes.fieldLabelError : ""} ${
+              classes.inputLabel
+            }`}
+          >
+            <span>
+              {label}
+              {required ? "*" : ""}
+            </span>
+            {tooltip !== "" && (
+              <div className={classes.tooltipContainer}>
+                <Tooltip title={tooltip} placement="top-start">
+                  <HelpIcon className={classes.tooltip} />
+                </Tooltip>
+              </div>
+            )}
+          </InputLabel>
+        )}
+
+        {showFileSelector || value === "" ? (
+          <div className={classes.textBoxContainer}>
+            <input
+              type="file"
+              name={name}
+              onChange={(e) => {
+                const fileName = get(e, "target.files[0].name", "");
+                fileProcess(e, (data: any) => {
+                  onChange(data, fileName);
+                });
+              }}
+              accept={accept}
+              required={required}
+              disabled={disabled}
+            />
+
+            {value !== "" && (
+              <IconButton
+                color="primary"
+                aria-label="upload picture"
+                component="span"
+                onClick={() => {
+                  setShowSelector(false);
+                }}
+                disableRipple={false}
+                disableFocusRipple={false}
+              >
+                <CancelIcon />
+              </IconButton>
+            )}
+
+            {error !== "" && (
+              <React.Fragment>
+                <br />
+                <span className={classes.errorText}>{error}</span>
+              </React.Fragment>
+            )}
+          </div>
+        ) : (
+          <div className={classes.fileReselect}>
+            <div className={classes.valueString}>{value}</div>
+            <IconButton
+              color="primary"
+              aria-label="upload picture"
+              component="span"
+              onClick={() => {
+                setShowSelector(true);
+              }}
+              disableRipple={false}
+              disableFocusRipple={false}
+            >
+              <AttachFileIcon />
+            </IconButton>
+          </div>
+        )}
+      </Grid>
+    </React.Fragment>
+  );
+};
+
+export default withStyles(styles)(FileSelector);

portal-ui/src/screens/Console/Common/FormComponents/FileSelector/utils.ts

@@ -0,0 +1,34 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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/>.
+
+export const fileProcess = (evt: any, callback: any) => {
+  const file = evt.target.files[0];
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+
+  reader.onload = () => {
+    // reader.readAsDataURL(file) output will be something like: data:application/x-x509-ca-cert;base64,LS0tLS1CRUdJTiBDRVJUSU
+    // we care only about the actual base64 part (everything after "data:application/x-x509-ca-cert;base64,")
+    const fileBase64 = reader.result;
+    if (fileBase64) {
+      const fileArray = fileBase64.toString().split("base64,");
+
+      if (fileArray.length === 2) {
+        callback(fileArray[1]);
+      }
+    }
+  };
+};

portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx

@@ -0,0 +1,225 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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, { useEffect, useState } from "react";
+import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
+import { InputLabel, Switch, Tooltip } from "@material-ui/core";
+import Grid from "@material-ui/core/Grid";
+import { actionsTray, fieldBasic } from "../common/styleLibrary";
+import HelpIcon from "@material-ui/icons/Help";
+
+interface IFormSwitch {
+  label?: string;
+  classes: any;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  value: string | boolean;
+  id: string;
+  name: string;
+  disabled?: boolean;
+  tooltip?: string;
+  index?: number;
+  indicatorLabel?: string;
+  checked: boolean;
+  switchOnly?: boolean;
+}
+
+const styles = (theme: Theme) =>
+  createStyles({
+    seeMore: {
+      marginTop: theme.spacing(3),
+    },
+    paper: {
+      display: "flex",
+      overflow: "auto",
+      flexDirection: "column",
+      paddingTop: 15,
+      boxShadow: "none",
+    },
+    addSideBar: {
+      width: "320px",
+      padding: "20px",
+    },
+    errorBlock: {
+      color: "red",
+    },
+    tableToolbar: {
+      paddingLeft: theme.spacing(2),
+      paddingRight: theme.spacing(0),
+    },
+    wrapCell: {
+      maxWidth: "200px",
+      whiteSpace: "normal",
+      wordWrap: "break-word",
+    },
+    minTableHeader: {
+      color: "#393939",
+      "& tr": {
+        "& th": {
+          fontWeight: "bold",
+        },
+      },
+    },
+    noFound: {
+      textAlign: "center",
+      padding: "10px 0",
+    },
+    tableContainer: {
+      maxHeight: 200,
+    },
+    stickyHeader: {
+      backgroundColor: "#fff",
+    },
+    actionsTitle: {
+      fontWeight: 600,
+      color: "#081C42",
+      fontSize: 16,
+      alignSelf: "center",
+    },
+    tableBlock: {
+      marginTop: 15,
+    },
+    filterField: {
+      width: 375,
+      fontWeight: 600,
+      "& .input": {
+        "&::placeholder": {
+          fontWeight: 600,
+          color: "#081C42",
+        },
+      },
+    },
+    wrapperContainer: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      borderBottom: "#9c9c9c 1px solid",
+      paddingBottom: 14,
+      marginBottom: 20,
+    },
+    indicatorLabel: {
+      fontSize: 12,
+      fontWeight: 600,
+      color: "#081C42",
+      margin: "0 8px 0 10px",
+    },
+    switchContainer: {
+      display: "flex",
+    },
+    ...actionsTray,
+    ...fieldBasic,
+  });
+
+const StyledSwitch = withStyles({
+  root: {
+    alignItems: "flex-start",
+    height: 18,
+    padding: "0 12px",
+    display: "flex",
+    position: "relative",
+  },
+  switchBase: {
+    color: "#fff",
+    padding: 0,
+    top: "initial",
+    "&$checked": {
+      color: "#fff",
+    },
+    "&$checked + $track": {
+      backgroundColor: "#081C42",
+      opacity: 1,
+      height: 15,
+    },
+  },
+  checked: {},
+  track: {
+    height: 15,
+    backgroundColor: "#081C42",
+    opacity: 1,
+    padding: 0,
+    marginTop: 1.5,
+  },
+  thumb: {
+    backgroundColor: "#fff",
+    border: "#081C42 1px solid",
+    boxShadow: "none",
+    width: 18,
+    height: 18,
+    padding: 0,
+    marginLeft: 10,
+  },
+})(Switch);
+
+const FormSwitchWrapper = ({
+  label = "",
+  onChange,
+  value,
+  id,
+  name,
+  checked = false,
+  disabled = false,
+  switchOnly = false,
+  tooltip = "",
+  indicatorLabel = "",
+  classes,
+}: IFormSwitch) => {
+  const switchComponent = (
+    <React.Fragment>
+      <div className={classes.switchContainer}>
+        <StyledSwitch
+          checked={checked}
+          onChange={onChange}
+          color="primary"
+          name={name}
+          inputProps={{ "aria-label": "primary checkbox" }}
+          disabled={disabled}
+          disableRipple
+          disableFocusRipple
+          disableTouchRipple
+          value={value}
+        />
+        {indicatorLabel !== "" && (
+          <span className={classes.indicatorLabel}>{indicatorLabel}</span>
+        )}
+      </div>
+    </React.Fragment>
+  );
+
+  if (switchOnly) {
+    return switchComponent;
+  }
+
+  return (
+    <React.Fragment>
+      <Grid item xs={12} className={`${classes.wrapperContainer}`}>
+        {label !== "" && (
+          <InputLabel htmlFor={id} className={classes.inputLabel}>
+            <span>{label}</span>
+            {tooltip !== "" && (
+              <div className={classes.tooltipContainer}>
+                <Tooltip title={tooltip} placement="top-start">
+                  <HelpIcon className={classes.tooltip} />
+                </Tooltip>
+              </div>
+            )}
+          </InputLabel>
+        )}
+        {switchComponent}
+      </Grid>
+    </React.Fragment>
+  );
+};
+
+export default withStyles(styles)(FormSwitchWrapper);