DataLake DB module interface Function modification

Change-Id: I79dd646cd760e2799a0dd2b03aaeab6de92c5cd3
Issue-ID: DCAEGEN2-1622
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

14 files changed, 158 insertions, 162 deletions

diff --git a/components/datalake-handler/admin/src/src/app/core/services/rest-api.service.ts b/components/datalake-handler/admin/src/src/app/core/services/rest-api.service.ts
index b9134109..7eb5cf0c 100644
--- a/components/datalake-handler/admin/src/src/app/core/services/rest-api.service.ts
+++ b/components/datalake-handler/admin/src/src/app/core/services/rest-api.service.ts
@@ -162,20 +162,10 @@ export class RestApiService {
       catchError(this.handleError)
     );
   }
-
-  addDb(d: Db): Observable<any> {
-    return this.http
-      .post<any>(prefix + "dbs", JSON.stringify(d), httpOptions)
-      .pipe(
-        retry(1),
-        tap(_ => console.log(`add db name=${d.name}`)),
-        catchError(this.handleError)
-      );
-  }
-
+  
   upadteDb(d: Db): Observable<any> {
     return this.http
-      .put(prefix + "dbs/" + d.name, JSON.stringify(d), httpOptions)
+      .put(prefix + "dbs", d)
       .pipe(
         retry(1),
         tap(_ => this.extractData),
@@ -183,14 +173,6 @@ export class RestApiService {
       );
   }
 
-  deleteDb(name: string): Observable<any> {
-    return this.http.delete(prefix + "dbs/" + name, httpOptions).pipe(
-      retry(1),
-      tap(_ => console.log(`deleted db name=${name}`)),
-      catchError(this.handleError)
-    );
-  }
-
   /*
     Feeder
   */
diff --git a/components/datalake-handler/admin/src/src/app/database/database-list/database-list.component.html b/components/datalake-handler/admin/src/src/app/database/database-list/database-list.component.html
index 8b71f529..829d6c62 100644
--- a/components/datalake-handler/admin/src/src/app/database/database-list/database-list.component.html
+++ b/components/datalake-handler/admin/src/src/app/database/database-list/database-list.component.html
@@ -21,21 +21,9 @@ limitations under the License.
 <div class="d-flex flex-wrap">
   <!-- Database list -->
   <div *ngFor="let db of this.dbs" class="col-sm-3 db-block">
-    <div class="db-panel">
+    <div class="db-panel" (click)="this.openDetailModal(db.name)" style="cursor: pointer;padding: 40px;">
       <div class="d-flex flex-column align-content-center">
-        <div class="ml-auto dropdown db-dropdown mr-2" data-boundary="window">
-          <a class="badge badge-light db-dropdown" data-toggle="dropdown">
-            <i class="fas fa-ellipsis-h fa-2x db-config-icon"></i>
-          </a>
-          <div class="dropdown-menu">
-            <button class="dropdown-item" type="button" (click)="this.deleteDb(db.name)">
-              <i class="fas fa-times db-config-icon"></i> {{ 'DELETE' | translate }}
-            </button>
-          </div>
-        </div>
-
-        <div>
-          <button type="button" class="btn" (click)="this.openDetailModal(db.name)">
+        <div class="db-box">
             <div class="align-self-center" style="height: 130px;">
               <!-- Couchbase -->
               <div class="p-0" *ngIf="db.name == 'Couchbase'">
@@ -234,48 +222,14 @@ limitations under the License.
                 </span>
               </div>
             </div>
-
             <div class="mt-auto">
+              <i class="fa fa-check-circle" aria-hidden="true"
+                 [ngClass]="{'truecheck':db.enabled == true,'falsecheck':db.enabled == false}"></i>
               {{ db.name }}
             </div>
-          </button>
-        </div>
-
-      </div>
-    </div>
-  </div>
-
-  <!-- Add -->
-  <div class="col-sm-3 db-block">
-    <div class="db-panel">
-      <div class="d-flex flex-column align-content-center">
-        <div class="ml-auto dropdown db-dropdown mr-2" style="visibility: hidden;" data-boundary="window">
-          <a class="badge badge-light db-dropdown" data-toggle="dropdown">
-            <i class="fas fa-ellipsis-h fa-2x db-config-icon"></i>
-          </a>
-          <div class="dropdown-menu">
-            <button class="dropdown-item" type="button">
-              <i class="fas fa-times db-config-icon"></i> Delete
-            </button>
-          </div>
-        </div>
-
-        <div>
-          <button type="button" class="btn" (click)="this.openAddModal()">
-            <div class="align-self-center" style="height: 130px;">
-              <div style="width:100px; height:100px;">
-                <i class="fas fa-plus fa-3x pt-4 dl-icon-enable"></i>
-              </div>
-            </div>
-
-            <div class="mt-auto" style="visibility: hidden;">
-              add
-            </div>
-          </button>
         </div>
 
       </div>
     </div>
   </div>
-
 </div>
diff --git a/components/datalake-handler/admin/src/src/app/database/database-list/database-list.component.ts b/components/datalake-handler/admin/src/src/app/database/database-list/database-list.component.ts
index 13a6274a..556e9f97 100644
--- a/components/datalake-handler/admin/src/src/app/database/database-list/database-list.component.ts
+++ b/components/datalake-handler/admin/src/src/app/database/database-list/database-list.component.ts
@@ -134,31 +134,6 @@ export class DatabaseListComponent implements OnInit {
     });
   }
 
-  deleteDb(name: string) {
-    const index = this.dbs.findIndex(d => d.name === name);
-    const modalRef = this.modalService.open(AlertComponent, {
-      size: "sm",
-      centered: true
-    });
-
-    modalRef.componentInstance.message =
-      'Are you sure you want to delete " ' + name + '" ?';
-    modalRef.componentInstance.passEntry.subscribe(receivedEntry => {
-      // Delete database
-      this.restApiService.deleteDb(name).subscribe(
-        res => {
-          this.dbs.splice(index, 1);
-          this.notificationService.success("Success deleted.");
-          modalRef.close();
-        },
-        err => {
-          this.notificationService.error(err);
-          modalRef.close();
-        }
-      );
-    });
-  }
-
   openDetailModal(name: string) {
     var modalRef, index;
 
@@ -210,15 +185,20 @@ export class DatabaseListComponent implements OnInit {
     } else {
       modalRef.componentInstance.db = this.tempDbDetail;
     }
-
     modalRef.componentInstance.passEntry.subscribe(receiveEntry => {
       this.tempDbDetail = receiveEntry;
-      if (index != -1) {
-        // Db name found, to update db
+      let enabled = receiveEntry.enabled;
+      console.log(this.tempDbDetail,"this.tempDbDetail");
+      if(enabled == true){
         this.restApiService.upadteDb(this.tempDbDetail).subscribe(
           res => {
-            this.dbs[index] = this.tempDbDetail;
-            this.notificationService.success("Success updated.");
+            console.log(res);
+            if (res.statusCode == 200) {
+              this.dbs[index] = this.tempDbDetail;
+              this.notificationService.success("SUCCESSFULLY_UPDATED");
+            }else {
+              this.notificationService.error("FAILED_UPDATED");
+            }
             modalRef.close();
           },
           err => {
@@ -226,12 +206,16 @@ export class DatabaseListComponent implements OnInit {
             modalRef.close();
           }
         );
-      } else {
-        // Db name not found, to insert db
-        this.restApiService.addDb(this.tempDbDetail).subscribe(
+      }else {
+        this.restApiService.upadteDb(this.dbs[index]).subscribe(
           res => {
-            this.dbs.push(this.tempDbDetail);
-            this.notificationService.success("Success inserted.");
+            console.log(res);
+            if (res.statusCode == 200) {
+              this.dbs[index] = this.tempDbDetail;
+              this.notificationService.success("SUCCESSFULLY_DELETED");
+            }else {
+              this.dbs[index].encrypt = true;
+            }
             modalRef.close();
           },
           err => {
diff --git a/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/couchbase/couchbase.component.html b/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/couchbase/couchbase.component.html
index d11ffd95..c67ab85c 100644
--- a/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/couchbase/couchbase.component.html
+++ b/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/couchbase/couchbase.component.html
@@ -24,6 +24,7 @@ limitations under the License.
       <div class="row">
         <div class="col-md-12">
           <label class="dl-h3">{{ 'DOCUMENT_STORE' | translate }} | Couchbase</label>
+          <i class="fas fa-plus fa-2x close-btn-icon" (click)="activeModal.close('Close click')"></i>
         </div>
       </div>
 
@@ -63,7 +64,7 @@ limitations under the License.
           <div class="col-md-3"><label class="dl-emphasis1" for="inputPort">{{ "PORT" | translate}}</label></div>
           <div class="col-md-2">
             <input [(ngModel)]="this.tempDb.port" class="form-control dl-input-text" id="inputPort" type="text"
-              placeholder="" (input)="this.adminService.onKeyPressNumber($event)">
+              placeholder="Default" (input)="this.adminService.onKeyPressNumber($event)">
           </div>
         </div>
       </div>
@@ -85,18 +86,31 @@ limitations under the License.
 
       <div class="form-group">
         <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1" for="inputSsl">{{ "ENABLE_SSL" | translate}}</label></div>
+          <div class="col-md-3"><label class="dl-emphasis1" for="switchs">{{ "ENABLE_SSL" | translate}}</label></div>
           <div class="col-md-3">
             <div class="input-group">
               <div class="input-group-prepend">
-                <label class="input-group-text dl-input-chk-label">
-                  <input id="chkSsl" [(ngModel)]="this.tempDb.encrypt" type="checkbox" />
-                  <span class="dl-input-checkmark"></span>
+                <label class="dl-switch">
+                  <input id="switchs" type="checkbox" [(ngModel)]="this.tempDb.encrypt" />
+                  <span class="dl-slider round"></span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-3"><label class="dl-emphasis1" for="switch">{{ "Enabled" | translate}}</label></div>
+          <div class="col-md-3">
+            <div class="input-group">
+              <div class="input-group-prepend">
+                <label class="dl-switch">
+                  <input id="switch" type="checkbox" [(ngModel)]="this.tempDb.enabled" />
+                  <span class="dl-slider round"></span>
                 </label>
               </div>
-              <label class="form-control dl-input-chk" for="chkSsl">
-                Enable
-              </label>
             </div>
           </div>
         </div>
diff --git a/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/couchbase/couchbase.component.ts b/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/couchbase/couchbase.component.ts
index deee9a0e..5e11900b 100644
--- a/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/couchbase/couchbase.component.ts
+++ b/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/couchbase/couchbase.component.ts
@@ -49,7 +49,7 @@ export class CouchbaseComponent {
     this.tempDb = new Db();
     const feed = {
       name: "Couchbase",
-      enabled: true, // TODO: enable
+      enabled: this.db.enabled,
       host: this.db.host,
       port: this.db.port,
       database: this.db.database,
diff --git a/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/druid/druid.component.html b/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/druid/druid.component.html
index 0f0de21d..5d5a38cf 100644
--- a/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/druid/druid.component.html
+++ b/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/druid/druid.component.html
@@ -24,6 +24,7 @@ limitations under the License.
       <div class="row">
         <div class="col-md-12">
           <label class="dl-h3">OLAP store | Druid</label>
+          <i class="fas fa-plus fa-2x close-btn-icon" (click)="activeModal.close('Close click')"></i>
         </div>
       </div>
 
@@ -38,15 +39,15 @@ limitations under the License.
   <div class="modal-body border-0 ml-4 mr-4">
     <div class="container">
 
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1" for="inputBucket">Database</label></div>
-          <div class="col-md-4">
-            <input [(ngModel)]="this.tempDb.database" class="form-control dl-input-text" id="inputBucket" type="text"
-              placeholder="">
-          </div>
-        </div>
-      </div>
+      <!--<div class="form-group">-->
+        <!--<div class="row">-->
+          <!--<div class="col-md-3"><label class="dl-emphasis1" for="inputBucket">Database</label></div>-->
+          <!--<div class="col-md-4">-->
+            <!--<input [(ngModel)]="this.tempDb.database" class="form-control dl-input-text" id="inputBucket" type="text"-->
+              <!--placeholder="">-->
+          <!--</div>-->
+        <!--</div>-->
+      <!--</div>-->
 
       <div class="form-group">
         <div class="row">
@@ -63,7 +64,7 @@ limitations under the License.
           <div class="col-md-3"><label class="dl-emphasis1" for="inputPort">{{ "PORT" | translate}}</label></div>
           <div class="col-md-2">
             <input [(ngModel)]="this.tempDb.port" class="form-control dl-input-text" id="inputPort" type="text"
-              placeholder="" (input)="this.adminService.onKeyPressNumber($event)">
+              placeholder="Default" (input)="this.adminService.onKeyPressNumber($event)">
           </div>
         </div>
       </div>
@@ -85,18 +86,31 @@ limitations under the License.
 
       <div class="form-group">
         <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1" for="inputSsl">{{ "ENABLE_SSL" | translate}}</label></div>
+          <div class="col-md-3"><label class="dl-emphasis1" for="switchs">{{ "ENABLE_SSL" | translate}}</label></div>
+          <div class="col-md-3">
+            <div class="input-group">
+              <div class="input-group-prepend">
+                <label class="dl-switch">
+                  <input id="switchs" type="checkbox" [(ngModel)]="this.tempDb.encrypt" />
+                  <span class="dl-slider round"></span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-3"><label class="dl-emphasis1" for="switch">{{ "Enabled" | translate}}</label></div>
           <div class="col-md-3">
             <div class="input-group">
               <div class="input-group-prepend">
-                <label class="input-group-text dl-input-chk-label">
-                  <input id="chkSsl" [(ngModel)]="this.tempDb.encrypt" type="checkbox" />
-                  <span class="dl-input-checkmark"></span>
+                <label class="dl-switch">
+                  <input id="switch" type="checkbox" [(ngModel)]="this.tempDb.enabled" />
+                  <span class="dl-slider round"></span>
                 </label>
               </div>
-              <label class="form-control dl-input-chk" for="chkSsl">
-                Enable
-              </label>
             </div>
           </div>
         </div>
diff --git a/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/druid/druid.component.ts b/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/druid/druid.component.ts
index 7465c266..43bd0ed4 100644
--- a/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/druid/druid.component.ts
+++ b/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/druid/druid.component.ts
@@ -49,7 +49,7 @@ export class DruidComponent {
     this.tempDb = new Db();
     const feed = {
       name: "Druid",
-      enabled: true, // TODO: enable
+      enabled: this.db.enabled,
       host: this.db.host,
       port: this.db.port,
       database: this.db.database,
diff --git a/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.html b/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.html
index a9cac352..1a7e7e80 100644
--- a/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.html
+++ b/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.html
@@ -24,6 +24,7 @@ limitations under the License.
       <div class="row">
         <div class="col-md-12">
           <label class="dl-h3"> {{ 'SEARCH_ENGINE' | translate }} | Elasticsearch</label>
+          <i class="fas fa-plus fa-2x close-btn-icon" (click)="activeModal.close('Close click')"></i>
         </div>
       </div>
 
@@ -53,7 +54,7 @@ limitations under the License.
           <div class="col-md-3"><label class="dl-emphasis1" for="inputPort">{{ "PORT" | translate}}</label></div>
           <div class="col-md-2">
             <input [(ngModel)]="this.tempDb.port" class="form-control dl-input-text" id="inputPort" type="text"
-              placeholder="" (input)="this.adminService.onKeyPressNumber($event)">
+              placeholder="Default" (input)="this.adminService.onKeyPressNumber($event)">
           </div>
         </div>
       </div>
@@ -75,18 +76,31 @@ limitations under the License.
 
       <div class="form-group">
         <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1" for="inputSsl">{{ "ENABLE_SSL" | translate}}</label></div>
+          <div class="col-md-3"><label class="dl-emphasis1" for="switchs">{{ "ENABLE_SSL" | translate}}</label></div>
           <div class="col-md-3">
             <div class="input-group">
               <div class="input-group-prepend">
-                <label class="input-group-text dl-input-chk-label">
-                  <input id="chkSsl" [(ngModel)]="this.tempDb.encrypt" type="checkbox" />
-                  <span class="dl-input-checkmark"></span>
+                <label class="dl-switch">
+                  <input id="switchs" type="checkbox" [(ngModel)]="this.tempDb.encrypt" />
+                  <span class="dl-slider round"></span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-3"><label class="dl-emphasis1" for="switch">{{ "Enabled" | translate}}</label></div>
+          <div class="col-md-3">
+            <div class="input-group">
+              <div class="input-group-prepend">
+                <label class="dl-switch">
+                  <input id="switch" type="checkbox" [(ngModel)]="this.tempDb.enabled" />
+                  <span class="dl-slider round"></span>
                 </label>
               </div>
-              <label class="form-control dl-input-chk" for="chkSsl">
-                Enable
-              </label>
             </div>
           </div>
         </div>
diff --git a/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.ts b/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.ts
index dbe57c9b..bbecea56 100644
--- a/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.ts
+++ b/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.ts
@@ -49,7 +49,7 @@ export class ElasticsearchComponent {
     this.tempDb = new Db();
     const feed = {
       name: "Elasticsearch",
-      enabled: true, // TODO: enable
+      enabled: this.db.enabled,
       host: this.db.host,
       port: this.db.port,
       database: this.db.database,
diff --git a/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/hdfs/hdfs.component.html b/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/hdfs/hdfs.component.html
index 830ed8f2..39b905b3 100644
--- a/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/hdfs/hdfs.component.html
+++ b/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/hdfs/hdfs.component.html
@@ -24,6 +24,7 @@ limitations under the License.
       <div class="row">
         <div class="col-md-12">
           <label class="dl-h3">Hadoop | HDFS</label>
+          <i class="fas fa-plus fa-2x close-btn-icon" (click)="activeModal.close('Close click')"></i>
         </div>
       </div>
 
@@ -53,7 +54,7 @@ limitations under the License.
           <div class="col-md-3"><label class="dl-emphasis1" for="inputPort">{{ "PORT" | translate}}</label></div>
           <div class="col-md-2">
             <input [(ngModel)]="this.tempDb.port" class="form-control dl-input-text" id="inputPort" type="text"
-              placeholder="" (input)="this.adminService.onKeyPressNumber($event)">
+              placeholder="Default" (input)="this.adminService.onKeyPressNumber($event)">
           </div>
         </div>
       </div>
@@ -75,18 +76,31 @@ limitations under the License.
 
       <div class="form-group">
         <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1" for="inputSsl">{{ "ENABLE_SSL" | translate}}</label></div>
+          <div class="col-md-3"><label class="dl-emphasis1" for="switchs">{{ "ENABLE_SSL" | translate}}</label></div>
           <div class="col-md-3">
             <div class="input-group">
               <div class="input-group-prepend">
-                <label class="input-group-text dl-input-chk-label">
-                  <input id="chkSsl" [(ngModel)]="this.tempDb.encrypt" type="checkbox" />
-                  <span class="dl-input-checkmark"></span>
+                <label class="dl-switch">
+                  <input id="switchs" type="checkbox" [(ngModel)]="this.tempDb.encrypt" />
+                  <span class="dl-slider round"></span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-3"><label class="dl-emphasis1" for="switch">{{ "Enabled" | translate}}</label></div>
+          <div class="col-md-3">
+            <div class="input-group">
+              <div class="input-group-prepend">
+                <label class="dl-switch">
+                  <input id="switch" type="checkbox" [(ngModel)]="this.tempDb.enabled" />
+                  <span class="dl-slider round"></span>
                 </label>
               </div>
-              <label class="form-control dl-input-chk" for="chkSsl">
-                Enable
-              </label>
             </div>
           </div>
         </div>
diff --git a/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/hdfs/hdfs.component.ts b/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/hdfs/hdfs.component.ts
index 0ada4117..034e2902 100644
--- a/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/hdfs/hdfs.component.ts
+++ b/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/hdfs/hdfs.component.ts
@@ -49,7 +49,7 @@ export class HdfsComponent {
     this.tempDb = new Db();
     const feed = {
       name: "HDFS",
-      enabled: true, // TODO: enable
+      enabled: this.db.enabled,
       host: this.db.host,
       port: this.db.port,
       database: this.db.database,
diff --git a/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/mongodb/mongodb.component.html b/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/mongodb/mongodb.component.html
index bda2b3a2..48dc0516 100644
--- a/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/mongodb/mongodb.component.html
+++ b/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/mongodb/mongodb.component.html
@@ -24,6 +24,7 @@ limitations under the License.
       <div class="row">
         <div class="col-md-12">
           <label class="dl-h3">Document store | MongoDB</label>
+          <i class="fas fa-plus fa-2x close-btn-icon" (click)="activeModal.close('Close click')"></i>
         </div>
       </div>
 
@@ -63,7 +64,7 @@ limitations under the License.
           <div class="col-md-3"><label class="dl-emphasis1" for="inputPort">{{ "PORT" | translate}}</label></div>
           <div class="col-md-2">
             <input [(ngModel)]="this.tempDb.port" class="form-control dl-input-text" id="inputPort" type="text"
-              placeholder="" (input)="this.adminService.onKeyPressNumber($event)">
+              placeholder="Default" (input)="this.adminService.onKeyPressNumber($event)">
           </div>
         </div>
       </div>
@@ -85,18 +86,31 @@ limitations under the License.
 
       <div class="form-group">
         <div class="row">
-          <div class="col-md-3"><label class="dl-emphasis1" for="inputSsl">{{ "ENABLE_SSL" | translate}}</label></div>
+          <div class="col-md-3"><label class="dl-emphasis1" for="switchs">{{ "ENABLE_SSL" | translate}}</label></div>
           <div class="col-md-3">
             <div class="input-group">
               <div class="input-group-prepend">
-                <label class="input-group-text dl-input-chk-label">
-                  <input id="chkSsl" [(ngModel)]="this.tempDb.encrypt" type="checkbox" />
-                  <span class="dl-input-checkmark"></span>
+                <label class="dl-switch">
+                  <input id="switchs" type="checkbox" [(ngModel)]="this.tempDb.encrypt" />
+                  <span class="dl-slider round"></span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-3"><label class="dl-emphasis1" for="switch">{{ "Enabled" | translate}}</label></div>
+          <div class="col-md-3">
+            <div class="input-group">
+              <div class="input-group-prepend">
+                <label class="dl-switch">
+                  <input id="switch" type="checkbox" [(ngModel)]="this.tempDb.enabled" />
+                  <span class="dl-slider round"></span>
                 </label>
               </div>
-              <label class="form-control dl-input-chk" for="chkSsl">
-                Enable
-              </label>
             </div>
           </div>
         </div>
diff --git a/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/mongodb/mongodb.component.ts b/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/mongodb/mongodb.component.ts
index 6f37f6a0..05a1526a 100644
--- a/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/mongodb/mongodb.component.ts
+++ b/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/mongodb/mongodb.component.ts
@@ -49,7 +49,7 @@ export class MongodbComponent {
     this.tempDb = new Db();
     const feed = {
       name: "MongoDB",
-      enabled: true, // TODO: enable
+      enabled: this.db.enabled,
       host: this.db.host,
       port: this.db.port,
       database: this.db.database,
diff --git a/components/datalake-handler/admin/src/src/styles.css b/components/datalake-handler/admin/src/src/styles.css
index 8dcf761e..33af86db 100644
--- a/components/datalake-handler/admin/src/src/styles.css
+++ b/components/datalake-handler/admin/src/src/styles.css
@@ -540,15 +540,15 @@ hr {
   transition: 0.4s;
 }
 
-input#switch:checked+.dl-slider {
+input#switch:checked+.dl-slider,input#switchs:checked+.dl-slider {
   background-color: #5dbebb;
 }
 
-input#switch:focus+.dl-slider {
+input#switch:focus+.dl-slider,input#switchs:checked+.dl-slider  {
   box-shadow: 0 0 1px #5dbebb;
 }
 
-input#switch:checked+.dl-slider:before {
+input#switch:checked+.dl-slider:before,input#switchs:checked+.dl-slider:before {
   -webkit-transform: translateX(26px);
   -ms-transform: translateX(26px);
   transform: translateX(26px);
@@ -612,3 +612,9 @@ ngb-modal-window.templatess .modal-dialog-centered {
   float: right;
   cursor: pointer;
 }
+.truecheck{
+  color:#5DBEBB
+}
+.falsecheck{
+  color:#BDBEC0
+}