added encryption ui

rzrbld · Nov 29, 2020 · 0ecc0a6 · 0ecc0a6
1 parent aeb7eab
commit 0ecc0a6
Show file tree

Hide file tree

Showing 6 changed files with 174 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@ Build with [Angular](https://angular.io) and [mdbootstrap](https://mdbootstrap.c
 ### Web UI abilities:
 | Kind   |      Create      |  List  | Update | Delete |
 |--------------|:-----------------------|:-----------:|:-----------:|:-----------:|
-| Bucket |  V  | V | add/remove events, change lifecycle, manage quota, tags, policy | V |
+| Bucket |  V  | V | add/remove events, change lifecycle, manage quota, tags, policy, encryption | V |
 | User | V | V | update password, change policy | V |
 | Policy |  V | V | V | V |
 | Group |  V | V | add users to group, remove users, change policy | only if group is empty (has no members) |
@@ -57,7 +57,7 @@ In real life cases you'll need to change this environment variables at `` Docker
 
 If you run multiple instances of [adminio-api](https://github.com/rzrbld/adminio-api) you can set `` ADMINIO_MULTI_BACKEND `` to ``true`` and fill  `` ADMINIO_BACKENDS `` example with needed urls and names. Please note - in this case you still need points ``API_BASE_URL`` to one of this instances. And then build a docker image.
 #### Kubernetes/OpenShift/OKD/OCP
-go to [Helm carts](https://github.com/rzrbld/adminio-helm) repo
+go to [Helm chart](https://github.com/rzrbld/adminio-helm) repo
 
 #### npm build
 Method that described above also works if you build with `` npm run build ``.

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -1,15 +1,15 @@
 version: '3'
 services:
   minio:
-    image: minio/minio:RELEASE.2020-11-13T20-10-18Z
+    image: minio/minio:RELEASE.2020-11-25T22-36-25Z
     ports:
       - "9000:9000"
     environment:
       MINIO_ACCESS_KEY: test
       MINIO_SECRET_KEY: testtest123
     command: server /data0 /data1 /data2 /data3
   adminio-ui:
-    image: rzrbld/adminio-ui:release-1.5
+    image: rzrbld/adminio-ui:release-1.6
     environment:
       API_BASE_URL: "http://localhost:8080"
       ADMINIO_MULTI_BACKEND: "false"
@@ -18,11 +18,12 @@ services:
     ports:
       - "80:80"
   adminio-api:
-    image: rzrbld/adminio-api:release-1.5
+    image: rzrbld/adminio-api:release-1.6
     environment:
       MINIO_ACCESS: test
       MINIO_SECRET: testtest123
       MINIO_HOST_PORT: minio:9000
+      MINIO_SSE_MASTER_KEY: 1:da2f4cfa32bed76507dcd44b42872328a8e14f25cd2a1ec0fb85d299a192a447
       ADMINIO_HOST_PORT: :8080
     depends_on:
       - minio

diff --git a/src/app/api.service.ts b/src/app/api.service.ts
@@ -318,7 +318,6 @@ export class ApiService {
     return this.httpClient.post(this.baseUrl+'/api/v2/bucket/set-policy', form);
   }
 
-
   public getBucketPolicy(bucketName){
     let form = new FormData();
 
@@ -327,4 +326,31 @@ export class ApiService {
     return this.httpClient.post(this.baseUrl+'/api/v2/bucket/get-policy', form);
   }
 
+  public getBucketEncryption(bucketName){
+    let form = new FormData();
+
+    form.append('bucketName', bucketName);
+
+    return this.httpClient.post(this.baseUrl+'/api/v2/bucket/get-encryption', form);
+  }
+
+  public setBucketEncryption(bucketName, encType, encMasterKeyID){
+    let form = new FormData();
+
+    form.append('bucketName', bucketName);
+    form.append('bucketEncryptionType', encType);
+    form.append('kmsMasterKey', encMasterKeyID);
+
+    return this.httpClient.post(this.baseUrl+'/api/v2/bucket/set-encryption', form);
+  }
+
+  public removeBucketEncryption(bucketName){
+    let form = new FormData();
+
+    form.append('bucketName', bucketName);
+
+    return this.httpClient.post(this.baseUrl+'/api/v2/bucket/remove-encryption', form);
+  }
+
+
 }
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -70,7 +70,7 @@
 
   <!-- Copyright -->
   <div class="text-right py-3 transparent">
-    <a href="https://github.com/rzrbld/adminio-ui/issues">create issue or fork at github.com<mdb-icon fab icon="github-alt" size="1x" class="px-1" aria-hidden="true"></mdb-icon></a> | v:1.5 &nbsp;&nbsp;
+    <a href="https://github.com/rzrbld/adminio-ui/issues">create issue or fork at github.com<mdb-icon fab icon="github-alt" size="1x" class="px-1" aria-hidden="true"></mdb-icon></a> | v:1.6 &nbsp;&nbsp;
   </div>
   <!-- Copyright -->
 

diff --git a/src/app/buckets/buckets.component.html b/src/app/buckets/buckets.component.html
@@ -31,6 +31,7 @@ <h1>Buckets</h1>
 	    <tr mdbTableCol *ngFor="let b of objectKeys(buckets); let i = index">
 	      <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
           <strong>{{buckets[b].name}}</strong>
+          <span *ngIf="buckets[b].encryption?.Rules" mdbTooltip="Bucket encrypted">&nbsp;&nbsp;<mdb-icon fas icon="lock" size="1x" class="red-text pr-1" aria-hidden="true"></mdb-icon></span>
           <span mdbTooltip="Policy. Click to download" (click)="downloadPolicy(buckets[b].name, 'policy_'+buckets[b].name+'_'+buckets[b].policy+'.json')" class="ml-2 badge badge-primary pointer" *ngIf="buckets[b].policy!='none'">{{buckets[b].policy}}</span>
         </td>
 	      <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
@@ -94,11 +95,12 @@ <h1>Buckets</h1>
           </span>
         </td>
 	  	  <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
-	  	  	<a mdbTooltip="Update Bucket Events" placement="top" (click)="updateBucketPrepare(buckets[b].name,buckets[b].quota?.quota,buckets[b].quota?.quotatype,buckets[b].tags); editBucketModal.show()"><mdb-icon fas icon="pencil-alt" size="1x" class="green-text pr-1" aria-hidden="true"></mdb-icon></a><span class="pr-1">&nbsp;</span>
+	  	  	<a mdbTooltip="Update Bucket" placement="top" (click)="updateBucketPrepare(buckets[b].name,buckets[b].quota?.quota,buckets[b].quota?.quotatype,buckets[b].tags); editBucketModal.show()"><mdb-icon fas icon="pencil-alt" size="1x" class="green-text pr-1" aria-hidden="true"></mdb-icon></a><span class="pr-1">&nbsp;</span>
 	  	  	<a mdbTooltip="Remove Bucket" placement="top" (click)="deleteBucketPrepare(buckets[b].name); deleteApproveModal.show()"><mdb-icon fas icon="trash-alt" size="1x" class="red-text pr-1" aria-hidden="true"></mdb-icon></a><span class="pr-1">&nbsp;</span>
 	  	  	<a mdbTooltip="Bucket Lifecycyle" placement="top" (click)="bucketLifecycle(buckets[b].name); downloadLifecycle(buckets[b].name); resetLifecycleForm(); lifecycyleModal.show()"><mdb-icon fas icon="recycle" size="1x" class="green-text pr-1" aria-hidden="true"></mdb-icon></a><span class="pr-1">&nbsp;</span>
 	  	  	<a *ngIf="buckets[b].events.LambdaConfigs?.length || buckets[b].events.TopicConfigs?.length || buckets[b].events.QueueConfigs?.length" mdbTooltip="Remove Bucket Events" placement="top" (click)="removeBucketNotificationPrepare(buckets[b].name); removeNotificationApproveModal.show()"><mdb-icon fas icon="bell-slash" size="1x" class="red-text pr-1" aria-hidden="true"></mdb-icon></a><span class="pr-1" *ngIf="buckets[b].events.LambdaConfigs?.length || buckets[b].events.TopicConfigs?.length || buckets[b].events.QueueConfigs?.length">&nbsp;</span>
           <a *ngIf="buckets[b].quota?.quota" mdbTooltip="Remove Bucket Quota" placement="top" (click)="deleteBucketQuotaPrepare(buckets[b].name); removeQuotaApproveModal.show()"><mdb-icon fas icon="expand" size="1x" class="red-text pr-1" aria-hidden="true"></mdb-icon></a>
+          <a *ngIf="buckets[b].encryption?.Rules" mdbTooltip="Remove Bucket Encryption" placement="top" (click)="deleteBucketEncryptionPrepare(buckets[b].name); removeEncryptionApproveModal.show()"><mdb-icon fas icon="unlock-alt" size="1x" class="red-text pr-1" aria-hidden="true"></mdb-icon></a>
 	  	  </td>
 	    </tr>
 	  </tbody>
@@ -130,8 +132,8 @@ <h4 class="modal-title w-100" id="myModalLabel">Bucket Lifecycyle</h4>
               <div class="row">
                 <div class="col-md-12 col-12 mx-auto">
                   <div class="alert alert-success" role="alert" *ngIf="downloadLifecycleAvailable == 1" >
-                    <mdb-icon fas icon="info-circle" class="mr-1"></mdb-icon>This bucket already have a lifecycyle policy, you can dowload it by clicking on "dowload icon" >
-                    <a mdbTooltip="Download Lifecycle" placement="top" [href]="downloadJsonHref" download="{{lifecycleBucketName}}-lifecycle.xml"><mdb-icon fas icon="download" size="1x" class="green-text pr-1" aria-hidden="true"></mdb-icon></a>
+                    <mdb-icon fas icon="info-circle" class="mr-1"></mdb-icon>This bucket already have a lifecycyle policy, you can export it as JSON by clicking on "dowload icon" >
+                    <a mdbTooltip="Download Lifecycle" placement="top" [href]="downloadJsonHref" download="{{lifecycleBucketName}}-lifecycle.json"><mdb-icon fas icon="download" size="1x" class="green-text pr-1" aria-hidden="true"></mdb-icon></a>
                     <br/>
                     Or override it by upload a new lifecycle policy.
                   </div>
@@ -192,7 +194,7 @@ <h4 class="modal-title w-100" id="myModalLabel">Remove Bucket</h4>
                 <h4 class="modal-title w-100" id="myModalLabel">Remove Bucket Notifications</h4>
             </div>
             <div class="modal-body">
-                Are you shure? <br/> After you click on <strong>"remove"</strong> button bucket <strong>{{bucketToDelete}}</strong> notifications will be removed.
+                Are you shure? <br/> After you click on <strong>"remove"</strong> button bucket <strong>{{bucketToRemoveNotifications}}</strong> notifications will be removed.
             </div>
             <div class="modal-footer justify-content-center">
                 <button type="button" mdbBtn color="success" class="waves-light" aria-label="Close" (click)="removeNotificationApproveModal.hide()" mdbWavesEffect>Cancel</button>
@@ -215,7 +217,7 @@ <h4 class="modal-title w-100" id="myModalLabel">Remove Bucket Notifications</h4>
                 <h4 class="modal-title w-100" id="myModalLabel">Remove Bucket Quota Limits</h4>
             </div>
             <div class="modal-body">
-                Are you shure? <br/> After you click on <strong>"remove"</strong> button quota for bucket <strong>{{bucketToDelete}}</strong> will be removed.
+                Are you shure? <br/> After you click on <strong>"remove"</strong> button quota for bucket <strong>{{bucketToRemoveQuota}}</strong> will be removed.
             </div>
             <div class="modal-footer justify-content-center">
                 <button type="button" mdbBtn color="success" class="waves-light" aria-label="Close" (click)="removeQuotaApproveModal.hide()" mdbWavesEffect>Cancel</button>
@@ -225,6 +227,29 @@ <h4 class="modal-title w-100" id="myModalLabel">Remove Bucket Quota Limits</h4>
     </div >
 </div >
 
+<!-- remove encryption approve modal -->
+
+<div mdbModal #removeEncryptionApproveModal="mdbModal" class="modal fade right" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel"
+   aria-hidden="true" [config]='{backdrop: true, ignoreBackdropClick: true}'>
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close pull-right" aria-label="Close" (click)="removeEncryptionApproveModal.hide()">
+                    <span aria-hidden="true">×</span>
+                </button>
+                <h4 class="modal-title w-100" id="myModalLabel">Remove Encryption</h4>
+            </div>
+            <div class="modal-body">
+                Are you shure? <br/> After you click on <strong>"remove"</strong> button encryption for bucket <strong>{{bucketToRemoveEncryption}}</strong> will be removed.
+            </div>
+            <div class="modal-footer justify-content-center">
+                <button type="button" mdbBtn color="success" class="waves-light" aria-label="Close" (click)="removeEncryptionApproveModal.hide()" mdbWavesEffect>Cancel</button>
+                <button type="button" mdbBtn color="danger" class="relative waves-light" mdbWavesEffect (click)="removeBucketEncryption(); removeEncryptionApproveModal.hide()">Remove</button>
+            </div>
+        </div>
+    </div >
+</div >
+
 
 <!-- create modal -->
 
@@ -257,6 +282,16 @@ <h4 class="modal-title w-100" id="myModalLabel">Create Bucket</h4>
                     <label class="custom-file-label" for="customFileLang">{{uploadPolicyFileName == "" ? "Choose .policy or .json file" : uploadPolicyFileName}}</label>
                   </div>
                 </div>
+                <div class="mb-3" *ngIf="serviceInfo?.services?.vault?.status != 'disabled'">
+                  <div class="separator pointer">Encryption</div>
+                  <select class="browser-default custom-select" [(ngModel)]="newBucketEncryption" title="Select encryption type">
+                    <option value="" disabled selected>Select encryption</option>
+                    <option [value]="encType" *ngFor="let encType of encryptionTypes">{{encType}}</option>
+                  </select><br/><br/>
+                  <div class="d-flex justify-content-around mb-3 text-center" *ngIf="newBucketEncryption == 'sse-kms'">
+          					<input type="text" class="form-control" placeholder="Master Key ID" [(ngModel)]="newBucketMasterKeyID" name="newBucketMasterKeyID"  aria-label="bucketName" aria-describedby="basic-addon1">
+          				</div>
+                </div>
                 <div class="separator pointer">Tags</div>
                 <div class="d-flex justify-content-around mb-3 text-center">
                   <div class="form-row">
@@ -355,6 +390,17 @@ <h4 class="modal-title w-100" id="myModalLabel">Update Bucket</h4>
                     <label class="custom-file-label" for="customFileLang">{{uploadPolicyFileName == "" ? "Choose .policy or .json file" : uploadPolicyFileName}}</label>
                   </div>
                 </div>
+                <br/>
+                <div class="mb-3" *ngIf="serviceInfo?.services?.vault?.status != 'disabled'">
+                  <div class="separator pointer">Encryption</div>
+                  <select class="browser-default custom-select" [(ngModel)]="updateBucketEncryptionObj" title="Select encryption type" (change)="updateEncryptionType($event)">
+                    <option value="" disabled selected>Select encryption</option>
+                    <option [value]="encType" *ngFor="let encType of encryptionTypes">{{encType}}</option>
+                  </select><br/><br/>
+                  <div class="d-flex justify-content-around mb-3 text-center" *ngIf="updateBucketEncryptionObj == 'sse-kms'" (change)="updateEncryptionType($event)">
+          					<input type="text" class="form-control" placeholder="Master Key ID" [(ngModel)]="newBucketMasterKeyID" name="newBucketMasterKeyID"  aria-label="bucketName" aria-describedby="basic-addon1">
+          				</div>
+                </div>
                 <div class="separator pointer">Tags</div>
                 <div class="d-flex justify-content-around mb-3 text-center">
                   <div class="form-row">