To apply the shared module into 3rd party design page

and cleanup useless files

Issue-ID: DCAEGEN2-1717
Signed-off-by: Ekko Chang <ekko.chang@qct.io>
Change-Id: I069afc836230c2470d6c25d80335428b37ef98f6

68 files changed, 581 insertions, 5749 deletions

diff --git a/components/datalake-handler/admin/src/src/app/app.module.ts b/components/datalake-handler/admin/src/src/app/app.module.ts
index 53b4e064..94ce52e0 100644
--- a/components/datalake-handler/admin/src/src/app/app.module.ts
+++ b/components/datalake-handler/admin/src/src/app/app.module.ts
@@ -28,86 +28,66 @@ import { BrowserModule } from "@angular/platform-browser";
 import { NgModule } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
-
-import { AppRoutingModule } from "./app-routing.module";
-import { AppComponent } from "./app.component";
-
-import { HeaderComponent } from "./shared/layout/header/header.component";
-import { SidebarComponent } from "./shared/layout/sidebar/sidebar.component";
-
-import { FeederComponent } from "./views/feeder/feeder.component";
-import { TopicsComponent } from "./views/topics/topics.component";
-import { DatabaseComponent } from "./views/database/database.component";
-import { TopicListComponent } from "./views/topics/topic-list/topic-list.component";
-
-// Service
-import { AdminService } from "./core/services/admin.service";
-import { RestApiService } from "./core/services/rest-api.service";
-import { ToastrNotificationService } from "src/app/shared/components/toastr-notification/toastr-notification.service";
-
-// i18n
 import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
 import { TranslateHttpLoader } from "@ngx-translate/http-loader";
-
+import { MatTabsModule } from "@angular/material";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { HttpClientModule } from "@angular/common/http";
+import { HttpClient } from "@angular/common/http";
 export function createLoader(http: HttpClient) {
   return new TranslateHttpLoader(http);
 }
+import { NgxDatatableModule } from "@swimlane/ngx-datatable";
 
-// REST API
-import { HttpClientModule } from "@angular/common/http";
-import { HttpClient } from "@angular/common/http";
+import { AppRoutingModule } from "./app-routing.module";
+import { AppComponent } from "./app.component";
 
+// DataLake pages
+import { FeederComponent } from "./views/feeder/feeder.component";
+import { TopicsComponent } from "./views/topics/topics.component";
+import { TopicListComponent } from "./views/topics/topic-list/topic-list.component";
+import { DatabaseComponent } from "./views/database/database.component";
 import { DatabaseListComponent } from "./views/database/database-list/database-list.component";
-import { NgxDatatableModule } from "@swimlane/ngx-datatable";
-import { CouchbaseComponent } from "./views/database/database-list/dbs-modal/couchbase/couchbase.component";
-import { MongodbComponent } from "./views/database/database-list/dbs-modal/mongodb/mongodb.component";
-import { HdfsComponent } from "./views/database/database-list/dbs-modal/hdfs/hdfs.component";
-import { DatabaseAddModalComponent } from "./views/database/database-list/database-add-modal/database-add-modal.component";
-import { ElasticsearchComponent } from "./views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component";
-import { DruidComponent } from "./views/database/database-list/dbs-modal/druid/druid.component";
+import { KafkaComponent } from "./views/kafka/kafka.component";
 import { KafkaListComponent } from "./views/kafka/kafka-list/kafka-list.component";
-import { NewKafkaModalComponent } from "./views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component";
-import { EditKafkaModalComponent } from "./views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component";
 import { ToolsComponent } from "./views/tools/tools.component";
-import { ModalToolsComponent } from "./views/tools/modal-tools/modal-tools.component";
-import { ToolAddModalComponent } from "./views/tools/tool-add-modal/tool-add-modal.component";
-
-// Modals
-import { TopicDetailModalComponent } from "./views/topics/topic-list/topic-detail-modal/topic-detail-modal.component";
-import { TopicConfigModalComponent } from "./views/topics/topic-list/topic-config-modal/topic-config-modal.component";
-import { ToastrNotificationComponent } from "./shared/components/toastr-notification/toastr-notification.component";
-import { AlertComponent } from "./shared/components/alert/alert.component";
-import { AboutComponent } from "./views/about/about.component";
-
-// Loading spinner
-import { NgxSpinnerModule } from "ngx-spinner";
 import { DashboardSettingComponent } from "./views/dashboard-setting/dashboard-setting.component";
 import { DashboardListComponent } from "./views/dashboard-setting/dashboard-list/dashboard-list.component";
-import { TemplateComponent } from "./views/dashboard-setting/template/template.component";
 import { CreateDashboardComponent } from "./views/dashboard-setting/dashboard-list/create-dashboard/create-dashboard.component";
+import { TemplateComponent } from "./views/dashboard-setting/template/template.component";
 import { TemplateListComponent } from "./views/dashboard-setting/template/template-list/template-list.component";
-import { NewTemplateModalComponent } from "./views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component";
-import { EditTemplateModalComponent } from "./views/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component";
-import { NewTopicModelComponent } from "./views/topics/topic-list/new-topic-model/new-topic-model.component";
+import { AboutComponent } from "./views/about/about.component";
 import { TestComponent } from "./views/test/test.component";
-import { ModalComponent } from "./shared/modules/modal/modal.component";
+
+// Services
+import { AdminService } from "./core/services/admin.service";
+import { RestApiService } from "./core/services/rest-api.service";
+import { ToastrNotificationService } from "src/app/shared/components/toastr-notification/toastr-notification.service";
+
+// Modals
+import { ModalDemoComponent } from "./views/test/modal-demo/modal-demo.component";
+import { TopicModalComponent } from "./views/topics/topic-list/topic-modal/topic-modal.component";
+import { KafkaModalComponent } from "./views/kafka/kafka-list/kafka-modal/kafka-modal.component";
+import { DbModalComponent } from "./views/database/database-list/db-modal/db-modal.component";
+import { ToolModalComponent } from "./views/tools/tool-modal/tool-modal.component";
+import { TemplateModalComponent } from "./views/dashboard-setting/template/template-list/template-modal/template-modal.component";
+
+// Shared modules
+import { HeaderComponent } from "./shared/layout/header/header.component";
+import { SidebarComponent } from "./shared/layout/sidebar/sidebar.component";
 import { TableComponent } from "./shared/modules/table/table.component";
 import { SearchComponent } from "./shared/modules/search/search.component";
 import { CardComponent } from "./shared/modules/card/card.component";
 import { ButtonComponent } from "./shared/components/Button/button.component";
-import { ModalDirective } from "./shared/modules/modal/modal.directive";
-import { ModalDemoComponent } from "./views/test/modal-demo/modal-demo.component";
-import { KafkaComponent } from "./views/kafka/kafka.component";
-// Angular SVG Icon
 import { AngularSvgIconModule } from "angular-svg-icon";
 import { IconComponent } from "./shared/components/icon/icon.component";
+import { NgxSpinnerModule } from "ngx-spinner";
+import { ModalComponent } from "./shared/modules/modal/modal.component";
+import { ModalDirective } from "./shared/modules/modal/modal.directive";
+import { ToastrNotificationComponent } from "./shared/components/toastr-notification/toastr-notification.component";
+import { AlertComponent } from "./shared/components/alert/alert.component";
 
-import { MatTabsModule } from "@angular/material";
-import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import { TopicModalComponent } from "./views/topics/topic-list/topic-modal/topic-modal.component";
-import { KafkaModalComponent } from "./views/kafka/kafka-list/kafka-modal/kafka-modal.component";
-import { DbModalComponent } from "./views/database/database-list/db-modal/db-modal.component";
-import { ToolModalComponent } from "./views/tools/tool-modal/tool-modal.component";
+// Others
 
 @NgModule({
   declarations: [
@@ -119,14 +99,6 @@ import { ToolModalComponent } from "./views/tools/tool-modal/tool-modal.componen
     DatabaseComponent,
     TopicListComponent,
     DatabaseListComponent,
-    CouchbaseComponent,
-    MongodbComponent,
-    HdfsComponent,
-    DatabaseAddModalComponent,
-    ElasticsearchComponent,
-    DruidComponent,
-    TopicDetailModalComponent,
-    TopicConfigModalComponent,
     ToastrNotificationComponent,
     AlertComponent,
     AboutComponent,
@@ -135,9 +107,6 @@ import { ToolModalComponent } from "./views/tools/tool-modal/tool-modal.componen
     CreateDashboardComponent,
     TemplateComponent,
     TemplateListComponent,
-    NewTemplateModalComponent,
-    EditTemplateModalComponent,
-    NewTopicModelComponent,
     TestComponent,
     ModalComponent,
     TableComponent,
@@ -148,16 +117,13 @@ import { ToolModalComponent } from "./views/tools/tool-modal/tool-modal.componen
     ModalDemoComponent,
     KafkaComponent,
     KafkaListComponent,
-    NewKafkaModalComponent,
-    EditKafkaModalComponent,
     ToolsComponent,
-    ModalToolsComponent,
-    ToolAddModalComponent,
     IconComponent,
     TopicModalComponent,
     KafkaModalComponent,
     DbModalComponent,
-    ToolModalComponent
+    ToolModalComponent,
+    TemplateModalComponent
   ],
   imports: [
     BrowserModule,
@@ -182,29 +148,15 @@ import { ToolModalComponent } from "./views/tools/tool-modal/tool-modal.componen
   bootstrap: [AppComponent],
   entryComponents: [
     AlertComponent,
-    DatabaseAddModalComponent,
-    CouchbaseComponent,
-    DruidComponent,
-    ElasticsearchComponent,
-    MongodbComponent,
-    HdfsComponent,
-    TopicDetailModalComponent,
-    TopicConfigModalComponent,
-    NewTopicModelComponent,
     CreateDashboardComponent,
-    NewTemplateModalComponent,
-    EditTemplateModalComponent,
     ModalComponent,
     ModalDemoComponent,
     KafkaComponent,
-    NewKafkaModalComponent,
-    EditKafkaModalComponent,
-    ToolAddModalComponent,
-    ModalToolsComponent,
     TopicModalComponent,
     KafkaModalComponent,
     DbModalComponent,
-    ToolModalComponent
+    ToolModalComponent,
+    TemplateModalComponent
   ]
 })
 export class AppModule {}
diff --git a/components/datalake-handler/admin/src/src/app/core/models/template.model.ts b/components/datalake-handler/admin/src/src/app/core/models/template.model.ts
index 533068fd..b2401aa6 100644
--- a/components/datalake-handler/admin/src/src/app/core/models/template.model.ts
+++ b/components/datalake-handler/admin/src/src/app/core/models/template.model.ts
@@ -1,5 +1,5 @@
 /*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+    Copyright (C) 2019 - 2020 CMCC, Inc. and others. All rights reserved.
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
@@ -15,13 +15,13 @@
 */
 
 export class Template {
-  id: number;
-  name: string;
-  submitted: boolean;
-  body: string;
-  note: string;
-  topicName: string;
-  designType: string;
-  designTypeName: string;
-  dbs: any;
+  public id: number;
+  public name: string;
+  public submitted: boolean;
+  public body: string;
+  public note: string;
+  public topicName: string;
+  public designType: string;
+  public designTypeName: string;
+  public dbs: Array<string>;
 }
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 ec5e2dce..d1dcd63e 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
@@ -275,71 +275,55 @@ export class RestApiService {
   }
 
   /*
-  Template
+    Template
   */
-  getTemplateAll(): Observable<any> {
-    return this.http.get(prefix + "designs/").pipe(
-      //onlin
-      retry(1),
-      map(this.extractData),
-      catchError(this.handleError)
-    );
-  }
-
-  getTempDbList(id): Observable<any> {
+  public getAllTemplate(): Observable<Template[]> {
     return this.http
-      .get(prefix + "dbs/idAndName/" + id)
-      .pipe(retry(1), map(this.extractData), catchError(this.handleError));
+      .get<Template[]>(prefix + "designs/")
+      .pipe(retry(1), catchError(this.handleError));
   }
 
-  createNewTemplate(t: Template): Observable<any> {
-    return this.http.post(prefix + "designs", t).pipe(
+  public addTemplate(t: Template): Observable<Template> {
+    return this.http.post<Template>(prefix + "designs", t).pipe(
       retry(1),
-      tap(_ => this.extractData),
+      tap(_ => console.log(`add template name=${t.name}`)),
       catchError(this.handleError)
     );
   }
 
-  updateNewTemplate(t: Template): Observable<any> {
-    let id = t.id;
-    return this.http.put(prefix + "designs/" + id, t).pipe(
+  public updateTemplate(t: Template): Observable<Template> {
+    return this.http.put<Template>(prefix + "designs/" + t.id, t).pipe(
       retry(1),
       tap(_ => this.extractData),
       catchError(this.handleError)
     );
   }
 
-  // getTopicName(): Observable<any> {
-  //   return this.http.get(prefix + "topics").pipe( //onlin
-  //     retry(1),
-  //     map(this.extractData),
-  //     catchError(this.handleError)
-  //   );
-  // }
-
-  getTemplateTypeName(): Observable<any> {
-    return this.http.get(prefix + "designTypes").pipe(
-      //onlin
+  public deleteTemplate(id: number): Observable<Template> {
+    return this.http.delete<Template>(prefix + "designs/" + id).pipe(
       retry(1),
-      map(this.extractData),
+      tap(_ => console.log(`deleted template id=${id}`)),
       catchError(this.handleError)
     );
   }
 
-  DeleteTemplate(id): Observable<any> {
-    return this.http.delete(prefix + "designs/" + id).pipe(
-      //online
-      retry(1),
-      map(this.extractData2),
-      catchError(this.handleError)
-    );
+  getTempDbList(id): Observable<any> {
+    return this.http
+      .get(prefix + "dbs/idAndName/" + id)
+      .pipe(retry(1), map(this.extractData), catchError(this.handleError));
   }
-  deployTemplateKibana(id, body): Observable<any> {
-    body.submitted = true;
-    return this.http.post(prefix + "designs/deploy/" + id, body).pipe(
-      //online
+
+  public getTemplateDesignType(): Observable<any> {
+    return this.http
+      .get(prefix + "designTypes")
+      .pipe(retry(1), map(this.extractData), catchError(this.handleError));
+  }
+
+  public deployTemplateKibana(id: number, data: Template): Observable<any> {
+    data.submitted = true;
+    return this.http.post(prefix + "designs/deploy/" + id, data).pipe(
       retry(1),
-      map(this.extractData2),
+      tap(_ => console.log(`deploy template id=${data.id}`)),
       catchError(this.handleError)
     );
   }
diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.html b/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.html
index d4162ee6..5c19aa0d 100644
--- a/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.html
+++ b/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.html
@@ -51,7 +51,8 @@ limitations under the License.
 
           <!-- display button with text -->
           <span *ngIf="column.textButton && column.textButton.length !== 0">
-            <app-button [text]="column.textButton" [style]="'inline'" [color]="'dark'"></app-button>
+            <app-button [text]="column.textButton" [style]="'inline'" [color]="'dark'"
+              (click)="tableAction(column.action, row.id)"></app-button>
           </span>
 
           <!-- display button with icon -->
diff --git a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.html b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.html
deleted file mode 100644
index 9e2bde5e..00000000
--- a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.html
+++ /dev/null
@@ -1,139 +0,0 @@
-<!--
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
--->
-<div class="p-1">
-  <div class="modal-header pb-0 border-0">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-md-12">
-          <label class="dl-h3">{{ templateInputTitle }}</label>
-          <i class="fas fa-plus fa-2x close-btn-icon" (click)="activeModal.close('Close click')"></i>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-md-12">
-          <hr>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="modal-body border-0">
-    <div class="container-fluid">
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" for="inputtemplateName">{{ 'TEMPLATE_NAME' | translate }}</label>
-          </div>
-          <div>
-            <input #inputtemplateName [(ngModel)]="this.templateInput.name" class="form-control dl-input-text"
-              type="text" placeholder="Username" />
-          </div>
-        </div>
-        <div class="row-half-item upload-item">
-          <div>
-            <label class="dl-emphasis1">{{ 'FIELUPLOAD' | translate }}</label>
-          </div>
-          <div class="upload-item-button">
-            <input type="file" id="f-file" (change)="this.jsReadFiles()" />
-            <label for="f-file" class="upload-item-content-button">
-              <button type="button" class="btn dl-btn-dark btn-block" style="cursor: pointer">
-                {{ 'FIELUPLOAD' | translate }}
-              </button>
-            </label>
-            <span style="margin-left: 15px;">
-              <i class="fa fa-file" style="margin-right: 5px" *ngIf="this.fileName"></i>{{this.fileName}}</span>
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <div>
-          <label class="dl-emphasis1" for="templatebody">{{ 'TEMPLATE_BODY'| translate }}</label>
-        </div>
-        <div>
-          <textarea #templatebody [(ngModel)]="this.templateInput.body"
-            class="form-control dl-input-text upload-item-content-body" placeholder="Put the design here..."
-            rows="3"></textarea>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1">{{ 'TEMPLATE_TYPE' | translate }}</label>
-          </div>
-          <div>
-            <select #templatetype class="custom-select dl-input-text" id="selDataFormat" disabled>
-              <option *ngFor="let item of templatetypedata" [selected]="item.name === defaultDesigntype">
-                {{item.name}}</option>
-            </select>
-          </div>
-        </div>
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1">{{ 'TOPICS_NAME' | translate }}</label>
-          </div>
-          <div>
-            <select #topic class="custom-select dl-input-text" id="selDataFormat">
-              <option *ngFor="let item of topicname" [selected]="item === defaultTopicname">{{item}}</option>
-            </select>
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <div class="row-half-item">
-          <label class="dl-emphasis1">{{ 'SINK' | translate }}</label>
-        </div>
-
-        <div class="input-group row-quarter-item" *ngFor="let db of dbList">
-          <div class="input-group-prepend">
-            <label class="input-group-text dl-input-chk-label">
-              <input id="chk_{{ db }}" type="checkbox" [checked]="templateInput.dbs.includes(+db.key)"
-                (change)="this.updateSelectedDB($event, db)" />
-              <span class="dl-input-checkmark"></span>
-            </label>
-          </div>
-          <label class="form-control dl-input-chk" for="chk_{{ db }}">
-            {{ db.name }}
-          </label>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="modal-footer border-0 pt-0 pb-2">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-md-6 p-0">
-        </div>
-        <div class="col-md-3 p-1">
-          <span>
-            <button type="button" class="btn dl-btn-dark btn-block" (click)="this.passBack()">
-              Save
-            </button>
-          </span>
-        </div>
-        <div class="col-md-3 p-1">
-          <span>
-            <button type="button" class="btn dl-btn-light btn-block" (click)="activeModal.close('Close click')">
-              Cancel
-            </button>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.spec.ts
deleted file mode 100644
index de3dc540..00000000
--- a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.spec.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { EditTemplateModalComponent } from './edit-template-modal.component';
-
-describe('EditTemplateModalComponent', () => {
-  let component: EditTemplateModalComponent;
-  let fixture: ComponentFixture<EditTemplateModalComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ EditTemplateModalComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(EditTemplateModalComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.ts
deleted file mode 100644
index 6d89a372..00000000
--- a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.ts
+++ /dev/null
@@ -1,166 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-import {
-  Component,
-  OnInit,
-  Input,
-  Output,
-  EventEmitter,
-  ViewChild,
-  ElementRef
-} from "@angular/core";
-import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
-import { RestApiService } from "src/app/core/services/rest-api.service";
-import { Template } from "src/app/core/models/template.model";
-
-// Loading spinner
-import { NgxSpinnerService } from "ngx-spinner";
-
-@Component({
-  selector: 'app-edit-template-modal',
-  templateUrl: './edit-template-modal.component.html',
-  styleUrls: ['./edit-template-modal.component.css']
-})
-export class EditTemplateModalComponent implements OnInit {
-  @Input() edittemplate: Template;
-  templateInput: Template;
-  defaultDesigntype: String;
-  defaultTopicname: String;
-  templatetypedata: Array<any> = [];
-  topicname: Array<any> = [];
-  dbList: Array<any> = [];
-  dbId: string = "";
-  tempSeletedDbs: any = [];
-  @Output() passEntry: EventEmitter<any> = new EventEmitter();
-
-  @ViewChild("templatetype") templatetype: ElementRef;
-  @ViewChild("topic") topic: ElementRef;
-
-  constructor(
-    public activeModal: NgbActiveModal,
-    public dashboardApiService: RestApiService,
-    private spinner: NgxSpinnerService,
-  ) { }
-
-  inputtemplateName = null;
-  templateInputTitle = "";
-  fileName = null;
-
-  ngOnInit() {
-    // cache for display
-    this.templateInput = new Template();
-    const feed = {
-      id: this.edittemplate.id,
-      name: this.edittemplate.name,
-      submitted: this.edittemplate.submitted,
-      body: this.edittemplate.body,
-      note: this.edittemplate.note,
-      topicName: this.edittemplate.topicName,
-      designType: this.edittemplate.designType,
-      designTypeName: this.edittemplate.designTypeName,
-      dbs: this.edittemplate.dbs,
-    };
-    this.templateInput = feed;
-    this.templateInputTitle = "" + this.edittemplate.name;
-    this.tempSeletedDbs = this.templateInput.dbs.map(item => { return Number(item) });
-
-    this.getTopicName();
-    this.getTemplateTypeName();
-  }
-  getTopicName() {
-    this.dashboardApiService.getTopicsFromFeeder().subscribe(data => {
-      this.topicname = data;
-    });
-  }
-
-  getDbList() {
-    this.templatetypedata.map(item => {
-      if (item.name === this.defaultDesigntype) {
-        this.dbId = item.id;
-      }
-    })
-    this.dashboardApiService.getTempDbList(this.dbId).subscribe(data => {
-      Object.keys(data).map(item => {
-        this.dbList.push({ key: item, name: data[item] })
-      })
-    });
-  }
-
-  updateSelectedDB(event: any, name: any) {
-    if (event.target.checked) {
-      if (!this.tempSeletedDbs.find(db => db === name)) {
-        this.tempSeletedDbs.push(Number(name.key));
-      }
-    } else {
-      const index = this.tempSeletedDbs.indexOf(+name.key, 0);
-      if (index > -1) {
-        this.tempSeletedDbs.splice(index, 1);
-      }
-    }
-  }
-
-  getTemplateTypeName() {
-    this.dashboardApiService.getTemplateTypeName().subscribe(data => {
-      this.templatetypedata = data;
-      this.getDefaultOptions();
-    });
-  }
-
-  getDefaultOptions() {
-    this.templatetypedata.map(item => {
-      if (item.id === this.templateInput.designType) {
-        return this.defaultDesigntype = item.name;
-      }
-    });
-    this.defaultTopicname = this.templateInput.topicName;
-    this.getDbList();
-  }
-
-  jsReadFiles() {
-    var thiss = this;
-    var file = (<HTMLInputElement>document.querySelector("#f-file")).files[0];
-    this.fileName = file.name;
-    var reader = new FileReader();
-    reader.onload = function () {
-      thiss.templateInput.body = String(this.result);
-    }
-    reader.readAsText(file);
-  }
-
-  passBack() {
-    this.spinner.show();
-    if (this.templateInput.name == '' || this.templateInput.name == undefined) {
-      return false;
-    }
-    this.edittemplate = this.templateInput;
-    // this.templatetypedata.map(item => {
-    //   if (item.name === this.templatetype.nativeElement.value) {
-    //     return this.edittemplate.designType = item.id;
-    //   }
-    // });
-    this.edittemplate.designType = this.templatetypedata.filter(item => {
-      return item.name === this.templatetype.nativeElement.value;
-    })[0].id || "";
-
-    this.edittemplate.designTypeName = this.templatetype.nativeElement.value;
-    this.edittemplate.topicName = this.topic.nativeElement.value;
-    this.edittemplate.dbs = this.tempSeletedDbs;
-    this.passEntry.emit(this.edittemplate);
-    setTimeout(() => {
-      this.spinner.hide();
-    }, 500);
-  }
-}
diff --git a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.css b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.css
deleted file mode 100644
index 701fcff6..00000000
--- a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.css
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-.row-wrapper{
-  display: flex;
-}
-.row-quarter-item{
-  width: 20%;
-  margin-bottom: 15px;
-}
-.row-half-item{
-  width: 45%;
-}
-.usual-item{
-  margin-left: 2%;
-}
-.upload-item{
-  margin-left: 5%;
-}
-.upload-item-content-button{
-  width:35%;
-}
-.upload-item-content-body{
-  width: 95%;
-  min-height: 300px!important;
-}
-#f-file{
-  position: absolute;
-  /* width: 100%; */
-  /* height: 90%; */
-  opacity: 0;
-  cursor: pointer;
-}
diff --git a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.html b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.html
deleted file mode 100644
index f538d036..00000000
--- a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.html
+++ /dev/null
@@ -1,142 +0,0 @@
-<!--
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
--->
-<div class="p-1">
-  <div class="modal-header pb-0 border-0">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-md-12">
-          <label class="dl-h3">{{ "NEW_TEMPLATE" | translate }}</label>
-          <i class="fas fa-plus fa-2x close-btn-icon" (click)="activeModal.close('Close click')"></i>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-md-12">
-          <hr>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="modal-body border-0">
-    <div class="container-fluid">
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" for="inputtemplateName">{{ 'TEMPLATE_NAME' | translate }}</label>
-          </div>
-          <div>
-            <input #inputtemplateName [(ngModel)]="this.templateInput.name" class="form-control dl-input-text"
-              type="text" name="inputtemplateName" placeholder="Username" required="required" />
-          </div>
-        </div>
-        <div class="row-half-item upload-item">
-          <div>
-            <label class="dl-emphasis1">{{ 'FIELUPLOAD' | translate }}</label>
-          </div>
-          <div class="upload-item-button">
-            <input type="file" id="f-file" (change)="this.jsReadFiles()" />
-            <label for="f-file" class="upload-item-content-button">
-              <button type="button" class="btn dl-btn-dark btn-block" style="cursor: pointer">
-                {{ 'FIELUPLOAD' | translate }}
-              </button>
-            </label>
-            <span style="margin-left: 15px;">
-              <i class="fa fa-file" style="margin-right: 5px" *ngIf="this.fileName"></i>{{this.fileName}}</span>
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <div>
-          <label class="dl-emphasis1" for="templatebody">{{ 'TEMPLATE_BODY'| translate }}</label>
-        </div>
-        <div>
-          <textarea #templatebody [(ngModel)]="this.templateInput.body"
-            class="form-control dl-input-text upload-item-content-body" placeholder="Put the design here..."
-            rows="3"></textarea>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1">{{ 'TEMPLATE_TYPE' | translate }}</label>
-          </div>
-          <div>
-            <select #templatetype class="custom-select dl-input-text" (change)="this.selectType($event)">
-              <option *ngFor="let item of templatetypedata" [selected]="item==templatetypedata[0]"
-                [attr.designType]="[item.designType]">{{item.name}}</option>
-            </select>
-          </div>
-        </div>
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1">{{ 'TOPICS_NAME' | translate }}</label>
-          </div>
-          <div>
-            <select #topic class="custom-select dl-input-text">
-              <option *ngFor="let item of topicname" [selected]="item==topicname[0]">{{item}}</option>
-            </select>
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <div class="row-half-item">
-          <label class="dl-emphasis1">{{ 'SINK' | translate }}</label>
-        </div>
-
-        <div class="input-group row-quarter-item" *ngFor="let db of dbList">
-          <div class="input-group-prepend">
-            <label class="input-group-text dl-input-chk-label">
-              <input id="chk_{{ db }}" type="checkbox" [checked]="templateInput.dbs.includes(db)"
-                (change)="this.updateSelectedDB($event, db)" />
-              <span class="dl-input-checkmark"></span>
-            </label>
-          </div>
-          <label class="form-control dl-input-chk" for="chk_{{ db }}">
-            {{ db.name }}
-          </label>
-        </div>
-
-      </div>
-
-    </div>
-  </div>
-
-  <div class="modal-footer border-0 pt-0 pb-2">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-md-7 p-0">
-        </div>
-        <div class="col-md-2 p-1">
-          <span>
-            <button type="button" class="btn dl-btn-dark btn-block" (click)="this.passBack()">
-              Save
-            </button>
-          </span>
-        </div>
-        <div class="col-md-2 p-1">
-          <span>
-            <button type="button" class="btn dl-btn-light btn-block" (click)="activeModal.close('Close click')">
-              Cancel
-            </button>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.spec.ts
deleted file mode 100644
index 29df2b1a..00000000
--- a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.spec.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { NewTemplateModalComponent } from './new-template-modal.component';
-
-describe('NewTemplateModalComponent', () => {
-  let component: NewTemplateModalComponent;
-  let fixture: ComponentFixture<NewTemplateModalComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ NewTemplateModalComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(NewTemplateModalComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts
deleted file mode 100644
index 06b2ff84..00000000
--- a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts
+++ /dev/null
@@ -1,164 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-import {
-  Component,
-  OnInit,
-  Input,
-  Output,
-  EventEmitter,
-  ViewChild,
-  ElementRef
-} from "@angular/core";
-import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
-import { RestApiService } from "src/app/core/services/rest-api.service";
-// Loading spinner
-import { NgxSpinnerService } from "ngx-spinner";
-
-import { Template } from "src/app/core/models/template.model";
-
-@Component({
-  selector: 'app-new-template-modal',
-  templateUrl: './new-template-modal.component.html',
-  styleUrls: ['./new-template-modal.component.css']
-})
-export class NewTemplateModalComponent implements OnInit {
-  @Input() template: Template;
-  @Input() templatelist_length;
-  templateInput: Template
-  templatetypedata: Array<any> = [];
-  dbId: string = "";
-  topicname: Array<any> = [];
-  dbList: Array<any> = [];
-  tempSeletedDbs: any = [];
-  @Output() passEntry: EventEmitter<any> = new EventEmitter();
-  @ViewChild("templatetype") templatetype: ElementRef;
-  @ViewChild("topic") topic: ElementRef;
-
-  constructor(
-    public activeModal: NgbActiveModal,
-    public dashboardApiService: RestApiService,
-    private spinner: NgxSpinnerService,
-  ) { }
-  inputtemplateName = null;
-  templatebody = null;
-  fileName = null;
-
-  ngOnInit() {
-    this.getTopicName();
-    this.getTemplateTypeName();
-
-    // cache for display
-    this.templateInput = new Template();
-    const feed = {
-      id: null,
-      name: this.template.name,
-      submitted: this.template.submitted,
-      body: this.template.body,
-      note: this.template.note,
-      topicName: this.template.topicName,
-      designType: this.template.designType,
-      designTypeName: this.template.designTypeName,
-      dbs: [],
-    };
-    this.templateInput = feed;
-  }
-  getTopicName() {
-    this.dashboardApiService.getTopicsFromFeeder().subscribe(data => {
-      this.topicname = data;
-    });
-  }
-
-  getDbList() {
-    if (this.dbId === "") {
-      this.dbId = this.templatetypedata[0].id
-    }
-    this.dashboardApiService.getTempDbList(this.dbId).subscribe(data => {
-      Object.keys(data).map(item => {
-        this.dbList.push({ key: item, name: data[item] })
-      })
-    });
-  }
-
-  getTemplateTypeName() {
-    this.dashboardApiService.getTemplateTypeName().subscribe(data => {
-      this.templatetypedata = data;
-      this.getDbList();
-    });
-  }
-
-  updateSelectedDB(event: any, name: any) {
-    if (event.target.checked) {
-      if (!this.tempSeletedDbs.find(db => db === name)) {
-        this.tempSeletedDbs.push(name.key);
-      }
-    } else {
-      const index = this.tempSeletedDbs.indexOf(name.key, 0);
-      if (index > -1) {
-        this.tempSeletedDbs.splice(index, 1);
-      }
-    }
-  }
-
-  jsReadFiles() {
-    var thiss = this;
-    var file = (<HTMLInputElement>document.querySelector("#f-file")).files[0];
-    this.fileName = file.name;
-    var reader = new FileReader();
-    reader.onload = function () {
-      // console.log(this.result, "this.result");
-      thiss.templateInput.body = String(this.result);
-    }
-    reader.readAsText(file);
-  }
-
-  selectType(e) {
-    this.dbList = [];
-    this.templatetypedata.map(item => {
-      if (item.name === e.target.value) {
-        this.dbId = item.id;
-        this.getDbList();
-      }
-    })
-  }
-
-  passBack() {
-    this.spinner.show();
-    if (this.templateInput.name == '' || this.templateInput.name == undefined) {
-      return false;
-    }
-    this.template = this.templateInput;
-
-    // this.templatetypedata.map(item => {
-    //   if (item.name === this.templatetype.nativeElement.value) {
-    //     return this.template.designType = item.id;
-    //   }
-    // })
-
-    this.template.designType = this.templatetypedata.filter(item => {
-      return item.name === this.templatetype.nativeElement.value;
-    })[0].id || "";
-
-    this.template.designTypeName = this.templatetype.nativeElement.value;
-    this.template.topicName = this.topic.nativeElement.value;
-    this.template.dbs = this.tempSeletedDbs;
-    this.template.submitted = false;
-    this.template.note = "";
-    this.passEntry.emit(this.template);
-    setTimeout(() => {
-      this.spinner.hide();
-    }, 500);
-  }
-}
diff --git a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-list.component.html b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-list.component.html
index 4a93ec65..3ea7d883 100644
--- a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-list.component.html
+++ b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-list.component.html
@@ -1,5 +1,5 @@
 <!--
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+    Copyright (C) 2019 - 2020 CMCC, Inc. and others. All rights reserved.
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
@@ -13,7 +13,8 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 -->
-<div class="topic-list-panel">
+
+<div class="table-panel">
   <div class="row">
     <div class="col-md-12">
       <div class="d-flex justify-content-end p-2">
@@ -22,91 +23,21 @@
           <div class="input-group">
             <input #searchText type="text" class="form-control dl-input-text-search" placeholder="Search..."
               (keyup)="this.updateFilter($event.target.value)" />
-            <div class="input-group-append">
-              <button type="button" class="btn dl-btn-dark">
-                <i class="fa fa-search"></i>
-              </button>
-            </div>
           </div>
         </div>
-
         <!-- button -->
         <div class="p-1">
-          <button class="btn dl-btn-dark" (click)="newTemplateModal();">
-            {{ "NEW_TEMPLATE" | translate }}
-          </button>
+          <app-button [text]="'plus'" [style]="'inlineicon'" [color]="'dark'" (click)="openModal('new')">
+          </app-button>
         </div>
       </div>
     </div>
   </div>
+
   <!-- datatable -->
   <div class="row">
     <div class="col-md-12">
-      <ngx-datatable #mytemlate class="bootstrap" [rows]="template_list" [columnMode]="'force'" [headerHeight]="40"
-        [footerHeight]="40" [rowHeight]="50" [scrollbarV]="true" [scrollbarH]="true"
-        [loadingIndicator]="loadingIndicator" [messages]="mesgNoData" [limit]="10" (activate)="onActivate($event)">
-
-        <!--<ngx-datatable-column [width]="40" name="{{ 'No' | translate }}" prop="id"-->
-        <!--headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">-->
-        <!--<div>-->
-        <!--<ng-template let-row="row">-->
-        <!--<span>{{ row.id }}</span>-->
-        <!--</ng-template>-->
-        <!--</div>-->
-        <!--</ngx-datatable-column>-->
-
-        <ngx-datatable-column [width]="100" name="{{ 'TEMPLATE_NAME' | translate }}" prop="name"
-          headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">
-          <ng-template let-row="row" ngx-datatable-cell-template>
-            <span>{{ row.name }}</span>
-          </ng-template>
-        </ngx-datatable-column>
-
-        <ngx-datatable-column [width]="180" name="{{ 'TEMPLATE_TYPE' | translate }}" prop="type">
-          <ng-template let-row="row" ngx-datatable-cell-template>
-            <span>{{ row.designTypeName }}</span>
-          </ng-template>
-        </ngx-datatable-column>
-
-        <ngx-datatable-column [width]="220" name="{{ 'TOPICS_NAME' | translate }}" prop="topic">
-          <ng-template let-row="row" ngx-datatable-cell-template>
-            <span>{{ row.topicName }}</span>
-          </ng-template>
-        </ngx-datatable-column>
-
-        <ngx-datatable-column [width]="20" name="{{ 'DEPLOY_TO_DASHBOARD' | translate }}"
-          headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">
-          <div>
-            <ng-template let-row="row" ngx-datatable-cell-template>
-              <span (click)="this.deployTemplate(row.id);" class="dl-btn-dark"
-                style="cursor: pointer">&nbsp;&nbsp;{{ 'DEPLOY' | translate }}&nbsp;&nbsp;</span>
-            </ng-template>
-          </div>
-        </ngx-datatable-column>
-        <ngx-datatable-column [width]="10" name="" sortable="false" cellClass="d-flex justify-content-center">
-          <ng-template let-row="row" ngx-datatable-cell-template>
-            <span>
-              <button class="btn action-icon-setting" (click)="this.deleteTemplateModel(row.id);">
-                <i class="fas fa-trash-alt fa-xs"></i>
-              </button>
-            </span>
-          </ng-template>
-        </ngx-datatable-column>
-
-        <!-- <ngx-datatable-footer>
-            <ng-template ngx-datatable-footer-template let-rowCount="rowCount" let-pageSize="pageSize"
-              let-selectedCount="selectedCount" let-curPage="curPage" let-offset="offset" let-isVisible="isVisible">
-              <div class="page-count">
-                total: {{ rowCount.toLocaleString() }}
-              </div>
-              <datatable-pager [pagerLeftArrowIcon]="'datatable-icon-left'" [pagerRightArrowIcon]="'datatable-icon-right'"
-                [pagerPreviousIcon]="'datatable-icon-prev'" [pagerNextIcon]="'datatable-icon-skip'" [page]="curPage"
-                [size]="pageSize" [count]="rowCount" [hidden]="!(rowCount / pageSize > 1)"
-                (change)="topicTable.onFooterPage($event)">
-              </datatable-pager>
-            </ng-template>
-          </ngx-datatable-footer> -->
-      </ngx-datatable>
+      <app-table [data]="templates" [columns]="columns" (btnTableAction)="btnTableAction($event)"></app-table>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-list.component.ts b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-list.component.ts
index de76a9d6..552a0ccd 100644
--- a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-list.component.ts
+++ b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-list.component.ts
@@ -1,5 +1,5 @@
 /*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+    Copyright (C) 2019 - 2020 CMCC, Inc. and others. All rights reserved.
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
@@ -13,244 +13,265 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
-import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+
+/**
+ *
+ * @constructor Ekko Chang
+ */
+
+import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";
 import { RestApiService } from "src/app/core/services/rest-api.service";
-import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
 import { Template } from "src/app/core/models/template.model";
-// Loading spinner
-import { NgxSpinnerService } from "ngx-spinner";
 
-// modal
-import { NewTemplateModalComponent } from "./new-template-modal/new-template-modal.component";
-import { EditTemplateModalComponent } from "./edit-template-modal/edit-template-modal.component";
 import { AlertComponent } from "src/app/shared/components/alert/alert.component";
-// notify
+import { ModalComponent } from "src/app/shared/modules/modal/modal.component";
+import { ModalContentData } from "src/app/shared/modules/modal/modal.data";
+import { TemplateModalComponent } from "src/app/views/dashboard-setting/template/template-list/template-modal/template-modal.component";
 import { ToastrNotificationService } from "src/app/shared/components/toastr-notification/toastr-notification.service";
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+
+import { NgxSpinnerService } from "ngx-spinner";
+import { map, mergeMap } from "rxjs/operators";
+import { forkJoin, from } from "rxjs";
 
 @Component({
-  selector: 'app-template-list',
-  templateUrl: './template-list.component.html',
-  styleUrls: ['./template-list.component.css']
+  selector: "app-template-list",
+  templateUrl: "./template-list.component.html",
+  styleUrls: ["./template-list.component.css"]
 })
 export class TemplateListComponent {
-  template_list: any = [];
-  templates: Template[] = [];
-  temps: Template[] = [];
-  Template_New: Template;
-  Template_Newbody: Template;
-  dashboardDeteleModelShow = true;
-  loadingIndicator: boolean = true;
-  mesgNoData = {
-    emptyMessage: `
-      <div class="d-flex justify-content-center">
-        <div class="p-2">
-          <label class="dl-nodata">No Data</label>
-        </div>
-      </div>
-    `
-  };
+  columns: Array<any> = [];
+  templates: Array<Template> = [];
+  t_temp: Array<any> = []; // cache for templates
+
   @ViewChild("searchText") searchText: ElementRef;
+
   constructor(
-    private modalService: NgbModal,
-    private dashboardApiService: RestApiService,
-    private spinner: NgxSpinnerService,
     private notificationService: ToastrNotificationService,
-  ) {
-    setTimeout(() => {
-      this.loadingIndicator = false;
-    }, 5000);
-
-    this.initData().then(data => {
-      this.initTemplateList(this.template_list).then(
-        data => {
-          // for cache of datatable
-          this.temps = [...data];
-          this.templates = data;
-          setTimeout(() => {
-            this.spinner.hide();
-          }, 500);
-        }
-      );
-    });
-  }
+    private modalService: NgbModal,
+    private restApiService: RestApiService,
+    private spinner: NgxSpinnerService
+  ) {}
 
   ngOnInit() {
     this.spinner.show();
-  }
 
-  async initData() {
-    this.template_list = [];
-    this.template_list = await this.getTemplateList();
-    this.Template_New = new Template();
-    this.Template_Newbody = new Template();
-    return true;
-  }
+    let t_templates: Array<Template> = [];
 
+    const get_templates = this.restApiService.getAllTemplate().pipe(
+      mergeMap(templates => from(templates)),
+      map(template => {
+        t_templates.push(template);
+      })
+    );
 
-  getTemplateList() {
-    return this.dashboardApiService.getTemplateAll().toPromise();
+    forkJoin(get_templates).subscribe(data => {
+      this.columns = this.initColumn();
+      this.templates = t_templates;
+      this.t_temp = [...this.templates];
+      this.updateFilter(this.searchText.nativeElement.value);
+      setTimeout(() => {
+        this.spinner.hide();
+      }, 500);
+    });
   }
 
-  async initTemplateList(template_list: []) {
-    var t: Template[] = [];
-    for (var i = 0; i < template_list.length; i++) {
-      let data = template_list[i];
-      let feed = {
-        id: data["id"],
-        name: data["name"],
-        submitted: data["submitted"],
-        body: data["body"],
-        note: data["note"],
-        topicName: data["topicName"],
-        designType: data["designType"],
-        designTypeName: data["designTypeName"],
-        dbs: data["dbs"],
-      };
-      t.push(feed);
-    }
-    return t;
+  initColumn() {
+    let t_columns: Array<any> = [];
+
+    t_columns = [
+      {
+        headerName: "NAME",
+        width: "420",
+        sortable: true,
+        dataIndex: "name"
+      },
+      {
+        headerName: "Type",
+        width: "100",
+        sortable: true,
+        dataIndex: "designTypeName"
+      },
+      {
+        headerName: "Topics name",
+        width: "200",
+        sortable: true,
+        dataIndex: "topicName"
+      },
+      {
+        headerName: "Deploy to dashboard",
+        width: "80",
+        textButton: "DEPLOY",
+        action: "deploy"
+      },
+      {
+        width: "2",
+        iconButton: "cog",
+        action: "edit"
+      },
+      {
+        width: "2",
+        iconButton: "trash",
+        action: "delete"
+      }
+    ];
+
+    return t_columns;
   }
 
-  newTemplateModal() {
-    const modalRef = this.modalService.open(NewTemplateModalComponent, {
-      windowClass: "dl-md-modal templatess",
-      centered: true
-    });
-    this.Template_New = new Template();
-    this.Template_Newbody = new Template();
-    modalRef.componentInstance.template = this.Template_Newbody;
-    modalRef.componentInstance.templatelist_length = this.template_list.length;
-    modalRef.componentInstance.passEntry.subscribe(receivedEntry => {
-      this.Template_Newbody = receivedEntry;
-      this.dashboardApiService
-        .createNewTemplate(this.Template_Newbody)
-        .subscribe(
-          res => {
-            if (res.statusCode == 200) {
-              this.Template_New = res.returnBody;
-              this.template_list.push(this.Template_New);
-              this.template_list = [...this.template_list];
-              this.notificationService.success("SUCCESSFULLY_CREARED");
-            } else {
-              this.notificationService.error("FAILED_CREARED");
-            }
-            modalRef.close();
-          },
-          err => {
-            this.notificationService.error(err);
-            modalRef.close();
-          }
-        );
+  updateFilter(searchValue: string) {
+    const val = searchValue.toLowerCase();
+
+    // filter our data
+    const temp = this.t_temp.filter(t => {
+      return t.name.toLowerCase().indexOf(val) !== -1 || !val;
     });
+
+    // update the rows
+    this.templates = temp;
   }
 
-  onActivate(event) {
-    const emitType = event.type;
-    if (emitType == "dblclick") {
-      let id = event.row.id;
-      this.editTemplateModal(id);
-    }
+  btnTableAction(passValueArr: Array<any>) {
+    let action = passValueArr[0];
+    let id = passValueArr[1];
 
-  }
+    switch (action) {
+      case "edit":
+        this.openModal("edit", id);
+        break;
+      case "delete":
+        const modalRef = this.modalService.open(AlertComponent, {
+          size: "sm",
+          centered: true,
+          backdrop: "static"
+        });
+        modalRef.componentInstance.message = "ARE_YOU_SURE_DELETE";
+        modalRef.componentInstance.passEntry.subscribe(recevicedEntry => {
+          this.restApiService.deleteTemplate(id).subscribe(
+            res => {
+              this.ngOnInit();
+              setTimeout(() => {
+                this.notificationService.success("SUCCESSFULLY_DELETED");
+              }, 500);
+            },
+            err => {
+              this.notificationService.error(err);
+            }
+          );
+          modalRef.close();
+        });
+        break;
+      case "deploy":
+        this.spinner.show();
+        let index: number = this.templates.findIndex(d => d.id === id);
+        let data: Template = this.templates[index];
 
-  editTemplateModal(id) {
-    const index = this.template_list.findIndex(t => t.id === id);
-    const modalRef = this.modalService.open(EditTemplateModalComponent, {
-      windowClass: "dl-md-modal templatess",
-      centered: true
-    });
-    modalRef.componentInstance.edittemplate = this.template_list[index];
-    modalRef.componentInstance.passEntry.subscribe(receivedEntry => {
-      this.Template_New = receivedEntry;
-      this.dashboardApiService
-        .updateNewTemplate(this.Template_New)
-        .subscribe(
+        this.restApiService.deployTemplateKibana(id, data).subscribe(
           res => {
-            if (res.statusCode == 200) {
-              this.template_list[index] = this.Template_New;
-              this.template_list = [...this.template_list];
-              this.notificationService.success("SUCCESSFULLY_UPDATED");
+            setTimeout(() => {
+              this.spinner.hide();
+            }, 500);
+
+            let processArr = [];
+            Object.keys(res).map(item =>
+              processArr.push({ name: item, status: res[item] })
+            );
+
+            if (processArr.length > 0) {
+              processArr.map(item =>
+                item.status
+                  ? setTimeout(() => {
+                      this.notificationService.success("Deploy_SUCCESSFULLY");
+                    }, 600)
+                  : setTimeout(() => {
+                      this.notificationService.error("Deploy_FAILED");
+                    }, 600)
+              );
             } else {
-              this.notificationService.error("FAILED_UPDATED");
+              this.notificationService.error("Deploy_FAILED");
             }
-            modalRef.close();
           },
           err => {
+            setTimeout(() => {
+              this.spinner.hide();
+            }, 500);
             this.notificationService.error(err);
-            modalRef.close();
           }
         );
-    })
+        break;
+    }
   }
 
-  deleteTemplateModel(id: number) {
-    const index = this.template_list.findIndex(t => t.id === id);
-    const modalRef = this.modalService.open(AlertComponent, {
-      size: "sm",
-      centered: true
+  openModal(mode: string = "", id: number | string) {
+    const modalRef = this.modalService.open(ModalComponent, {
+      size: "lg",
+      centered: true,
+      backdrop: "static"
     });
-    // modalRef.componentInstance.dashboardDeteleModelShow = this.dashboardDeteleModelShow;
-    modalRef.componentInstance.message = "ARE_YOU_SURE_DELETE";
-    modalRef.componentInstance.passEntry.subscribe(receivedEntry => {
-      // Delete database
-      this.dashboardApiService.DeleteTemplate(id).subscribe(
-        res => {
-          if (JSON.stringify(res).length <= 2) {
-            this.template_list.splice(index, 1);
-            this.template_list = [...this.template_list];
-            this.notificationService.success("SUCCESSFULLY_DELETED");
-          } else {
-            this.notificationService.error("FAILED_DELETED");
-          }
 
-          modalRef.close();
-        },
-        err => {
-          this.notificationService.error(err);
-          modalRef.close();
-        }
-      );
-    });
+    switch (mode) {
+      case "new":
+        let newTemplate: Template = new Template();
+        newTemplate.submitted = false;
+        let componentNew = new ModalContentData(
+          TemplateModalComponent,
+          newTemplate
+        );
 
-  }
+        modalRef.componentInstance.title = "NEW_TEMPLATE";
+        modalRef.componentInstance.notice = "";
+        modalRef.componentInstance.mode = "new";
+        modalRef.componentInstance.component = componentNew;
 
-  deployTemplate(id: number) {
-    const index = this.template_list.findIndex(t => t.id === id);
-    const body = this.template_list[index];
-    this.spinner.show();
-    this.dashboardApiService.deployTemplateKibana(id, body).subscribe(
-      res => {
-        this.spinner.hide();
-        let processArr = []
-        Object.keys(res).map(item =>
-          processArr.push({ name: item, status: res[item] })
-        )
+        modalRef.componentInstance.passEntry.subscribe((data: Template) => {
+          newTemplate = Object.assign({}, data);
+          newTemplate.dbs = new Array();
+          newTemplate.dbs.push(data.dbs[0]);
+          this.restApiService.addTemplate(newTemplate).subscribe(
+            res => {
+              this.ngOnInit();
+              setTimeout(() => {
+                this.notificationService.success("SUCCESSFULLY_CREARED");
+              }, 500);
+            },
+            err => {
+              this.notificationService.error(err);
+            }
+          );
+          modalRef.close();
+        });
+        break;
+      case "edit":
+        let index: number = this.templates.findIndex(db => db.id === id);
+        let editTemplate: Template = this.templates[index];
+        let componentEdit = new ModalContentData(
+          TemplateModalComponent,
+          editTemplate
+        );
 
-        if (processArr.length !== 0) {
-          processArr.map(item =>
-            item.status ?
-              setTimeout(() => { this.notificationService.success("Deploy_SUCCESSFULLY") }, 1000) :
-              setTimeout(() => { this.notificationService.error("Deploy_FAILED") }, 2000))
-        } else {
-          this.notificationService.error("Deploy_FAILED");
-        }
-      },
-      err => {
-        this.spinner.hide();
-        this.notificationService.error(err);
-      }
-    );
-  }
+        modalRef.componentInstance.title = editTemplate.name;
+        modalRef.componentInstance.notice = "";
+        modalRef.componentInstance.mode = "edit";
+        modalRef.componentInstance.component = componentEdit;
 
-  updateFilter(searchValue) {
-    const val = searchValue.toLowerCase();
-    // filter our data
-    const temps = this.temps.filter(function (d) {
-      return d.name.toLowerCase().indexOf(val) !== -1 || !val;
-    });
-    // update the rows
-    this.template_list = temps;
+        modalRef.componentInstance.passEntry.subscribe((data: Template) => {
+          editTemplate = Object.assign({}, data);
+          editTemplate.dbs = new Array();
+          editTemplate.dbs.push(data.dbs[0]);
+          this.restApiService.updateTemplate(editTemplate).subscribe(
+            res => {
+              this.ngOnInit();
+              setTimeout(() => {
+                this.notificationService.success("SUCCESSFULLY_UPDATED");
+              }, 500);
+            },
+            err => {
+              this.notificationService.error(err);
+            }
+          );
+          modalRef.close();
+        });
+        break;
+    }
   }
-
-
 }
diff --git a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.css b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-modal/template-modal.component.css
index 5a9cb4ef..7b5396b3 100644
--- a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.css
+++ b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-modal/template-modal.component.css
@@ -1,5 +1,5 @@
 /*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+    Copyright (C) 2019 - 2020 CMCC, Inc. and others. All rights reserved.
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
@@ -13,30 +13,37 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
-.row-wrapper{
+.row-wrapper {
   display: flex;
 }
-.row-half-item{
-  width: 45%;
-}
-.row-quarter-item{
+
+.row-quarter-item {
   width: 20%;
   margin-bottom: 15px;
 }
-.usual-item{
+
+.row-half-item {
+  width: 45%;
+}
+
+.usual-item {
   margin-left: 2%;
 }
-.upload-item{
+
+.upload-item {
   margin-left: 5%;
 }
-.upload-item-content-button{
-  width:35%;
+
+.upload-item-content-button {
+  width: 35%;
 }
-.upload-item-content-body{
+
+.upload-item-content-body {
   width: 95%;
-  min-height: 300px!important;
+  min-height: 300px !important;
 }
-#f-file{
+
+#f-file {
   position: absolute;
   /* width: 100%; */
   /* height: 90%; */
diff --git a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-modal/template-modal.component.html b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-modal/template-modal.component.html
new file mode 100644
index 00000000..abd9d936
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-modal/template-modal.component.html
@@ -0,0 +1,146 @@
+<!--
+============LICENSE_START=======================================================
+ONAP : DataLake
+================================================================================
+Copyright 2019 - 2020 QCT
+=================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END=========================================================
+-->
+
+<div class="container p-4">
+  <div class="form-group">
+    <div class="row">
+      <div class="col-md-6">
+        <label class="dl-emphasis1">{{ "TEMPLATE_NAME" | translate }}</label>
+      </div>
+      <div class="col-md-6">
+        <label class="dl-emphasis1">{{ "FIELUPLOAD" | translate }}</label>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-6">
+        <input
+          [(ngModel)]="this.data.name"
+          class="form-control dl-input-text"
+          type="text"
+        />
+      </div>
+      <div class="col-md-6">
+        <div class="upload-item-button">
+          <input type="file" id="f-file" (change)="this.jsReadFiles()" />
+          <label for="f-file" class="upload-item-content-button">
+            <button
+              type="button"
+              class="btn dl-btn-dark btn-block"
+              style="cursor: pointer"
+            >
+              {{ "FIELUPLOAD" | translate }}
+            </button>
+          </label>
+          <span style="margin-left: 15px;">
+            <i
+              class="fa fa-file"
+              style="margin-right: 5px"
+              *ngIf="this.fileName"
+            ></i
+            >{{ this.fileName }}</span
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="row">
+      <div class="col-md-12">
+        <label class="dl-emphasis1">{{ "TEMPLATE_BODY" | translate }}</label>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-12">
+        <textarea
+          #templatebody
+          [(ngModel)]="this.data.body"
+          class="form-control dl-input-text upload-item-content-body"
+          placeholder="Put the design here..."
+          rows="3"
+        ></textarea>
+      </div>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="row">
+      <div class="col-md-6">
+        <label class="dl-emphasis1">{{ "TEMPLATE_TYPE" | translate }}</label>
+      </div>
+      <div class="col-md-6">
+        <label class="dl-emphasis1">{{ "TOPICS_NAME" | translate }}</label>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-6">
+        <select
+          [(ngModel)]="this.data.designType"
+          class="custom-select dl-input-text"
+        >
+          <option
+            *ngFor="let item of designTypes"
+            [value]="item.id"
+            [selected]="item.id == this.data.designType"
+          >
+            {{ item.name }}
+          </option>
+        </select>
+      </div>
+      <div class="col-md-6">
+        <select
+          [(ngModel)]="this.data.topicName"
+          class="custom-select dl-input-text"
+        >
+          <option
+            *ngFor="let item of topics"
+            [value]="item.name"
+            [selected]="item.name == this.data.topicName"
+          >
+            {{ item.name }}
+          </option>
+        </select>
+      </div>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="row">
+      <div class="col-md-6">
+        <label class="dl-emphasis1">{{ "SINK" | translate }}</label>
+      </div>
+      <div class="col-md-6"></div>
+    </div>
+    <div class="row">
+      <div class="col-md-6">
+        <select [(ngModel)]="this.data.dbs" class="custom-select dl-input-text">
+          <option
+            *ngFor="let item of tools"
+            [value]="item.id"
+            [selected]="item.id == this.data.dbs"
+          >
+            {{ item.name }}
+          </option>
+        </select>
+      </div>
+      <div class="col-md-6"></div>
+    </div>
+  </div>
+</div>
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-modal/template-modal.component.spec.ts
index e3de0b45..4b611d57 100644
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.spec.ts
+++ b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-modal/template-modal.component.spec.ts
@@ -2,7 +2,7 @@
  * ============LICENSE_START=======================================================
  * ONAP : DataLake
  * ================================================================================
- * Copyright 2019 QCT
+ * Copyright 2019 - 2020 QCT
  *=================================================================================
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20,20 +20,20 @@
 
 import { async, ComponentFixture, TestBed } from "@angular/core/testing";
 
-import { CouchbaseComponent } from "./couchbase.component";
+import { TemplateModalComponent } from "./template-modal.component";
 
-describe("CouchbaseComponent", () => {
-  let component: CouchbaseComponent;
-  let fixture: ComponentFixture<CouchbaseComponent>;
+describe("TemplateModalComponent", () => {
+  let component: TemplateModalComponent;
+  let fixture: ComponentFixture<TemplateModalComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [CouchbaseComponent]
+      declarations: [TemplateModalComponent]
     }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(CouchbaseComponent);
+    fixture = TestBed.createComponent(TemplateModalComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-modal/template-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-modal/template-modal.component.ts
new file mode 100644
index 00000000..20f9756c
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/dashboard-setting/template/template-list/template-modal/template-modal.component.ts
@@ -0,0 +1,101 @@
+/*
+ * ============LICENSE_START=======================================================
+ * ONAP : DataLake
+ * ================================================================================
+ * Copyright 2019 - 2020 QCT
+ *=================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+/**
+ *
+ * @author Ekko Chang
+ *
+ */
+
+import { Component, OnInit, Input } from "@angular/core";
+import { NgxSpinnerService } from "ngx-spinner";
+import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
+import { RestApiService } from "src/app/core/services/rest-api.service";
+import { AdminService } from "src/app/core/services/admin.service";
+import { Db } from "src/app/core/models/db.model";
+import { Template } from "src/app/core/models/template.model";
+import { Topic } from "src/app/core/models/topic.model";
+import { from, forkJoin } from "rxjs";
+import { mergeMap, map } from "rxjs/operators";
+
+@Component({
+  selector: "app-template-modal",
+  templateUrl: "./template-modal.component.html",
+  styleUrls: ["./template-modal.component.css"]
+})
+export class TemplateModalComponent implements OnInit {
+  @Input() data: Template;
+  @Input() mode: string;
+
+  designTypes: Array<any> = [];
+  topics: Array<Topic> = [];
+  tools: Array<Db> = [];
+  fileName: string = null;
+
+  constructor(
+    public activeModal: NgbActiveModal,
+    public adminService: AdminService,
+    private restApiService: RestApiService,
+    private spinner: NgxSpinnerService
+  ) {}
+
+  ngOnInit() {
+    this.spinner.show();
+
+    const get_designTypes = this.restApiService.getTemplateDesignType().pipe(
+      mergeMap(items => from(items)),
+      map(item => {
+        this.designTypes.push(item);
+      })
+    );
+
+    const get_topics = this.restApiService.getTopicList().pipe(
+      mergeMap(ids => from(ids)),
+      mergeMap(id => this.restApiService.getTopic(id)),
+      map(t => {
+        this.topics.push(t);
+      })
+    );
+
+    const get_tools = this.restApiService.getAllTools().pipe(
+      mergeMap(tools => from(tools)),
+      map(tool => {
+        this.tools.push(tool);
+      })
+    );
+
+    forkJoin(get_designTypes, get_topics, get_tools).subscribe(data => {
+      setTimeout(() => {
+        this.spinner.hide();
+      }, 500);
+    });
+  }
+
+  jsReadFiles() {
+    let thiss = this;
+    let file = (<HTMLInputElement>document.querySelector("#f-file")).files[0];
+    this.fileName = file.name;
+    let reader = new FileReader();
+    reader.onload = function() {
+      thiss.data.body = String(this.result);
+    };
+    reader.readAsText(file);
+  }
+}
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.css b/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.css
deleted file mode 100644
index ac205fe8..00000000
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.css
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
-* ============LICENSE_START=======================================================
-* ONAP : DataLake
-* ================================================================================
-* Copyright 2019 QCT
-*=================================================================================
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* ============LICENSE_END=========================================================
-*/
-
-
-
-.nav-pills .nav-link.active,
-.nav-pills .nav-link:hover {
-  color: #ffffff;
-  background-color: #5DBEBB;
-}
-
-.nav-link {
-  font-family: "Open Sans", sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  color: #313449;
-  text-align: left;
-  border-radius: 0px;
-}
-
-.nav-pills .show>.nav-link {
-  background-color: #FFFFFF;
-}
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.html b/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.html
deleted file mode 100644
index 21a06e98..00000000
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--
-============LICENSE_START=======================================================
-ONAP : DataLake
-================================================================================
-Copyright 2019 QCT
-=================================================================================
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-     http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-============LICENSE_END=========================================================
--->
-
-<div class="p-0">
-  <div class="modal-header pb-0 border-0">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-md-12">
-          <label class="dl-h3">{{ 'NEW_DB' | translate }}</label>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-md-12">
-          <hr/>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="modal-body p-0">
-    <div class="container-fluid">
-        <div class="tab-content mb-auto" id="v-pills-tabContent">
-          <!-- All -->
-          <div class="tab-pane fade show active" id="v-pills-all" role="tabpanel" aria-labelledby="v-pills-all-tab">
-            <div class="nav flex-column nav-pills" id="menu-tab2" role="tablist" aria-orientation="vertical">
-              <a class="nav-link" (click)="this.clickItem('Couchbase')" data-toggle="pill" role="tab"
-                aria-selected="true">Couchbase</a>
-              <a class="nav-link" (click)="this.clickItem('Druid')" data-toggle="pill" role="tab"
-                aria-selected="true">Druid</a>
-              <a class="nav-link" (click)="this.clickItem('Elasticsearch')" data-toggle="pill" role="tab"
-                aria-selected="true">Elasticsearch</a>
-              <a class="nav-link" (click)="this.clickItem('MongoDB')" data-toggle="pill" role="tab"
-                aria-selected="true">MongoDB</a>
-              <a class="nav-link" (click)="this.clickItem('HDFS')" data-toggle="pill" role="tab"
-                 aria-selected="true">HDFS</a>
-            </div>
-          </div>
-        </div>
-        <div class="d-flex mt-auto justify-content-end p-3">
-          <div class="p-1 col-sm-3">
-            <span>
-              <button type="button" class="btn dl-btn-dark btn-block" (click)="this.passBack()">
-                Next
-              </button>
-            </span>
-          </div>
-          <div class="p-1 col-sm-3">
-            <span>
-              <button type="button" class="btn dl-btn-light btn-block" (click)="activeModal.close('Close click')">
-                Cancel
-              </button>
-            </span>
-          </div>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.spec.ts
deleted file mode 100644
index bde10b2c..00000000
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.spec.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-/*
- * ============LICENSE_START=======================================================
- * ONAP : DataLake
- * ================================================================================
- * Copyright 2019 QCT
- *=================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import { async, ComponentFixture, TestBed } from "@angular/core/testing";
-
-import { DatabaseAddModalComponent } from "./database-add-modal.component";
-
-describe("DatabaseAddModalComponent", () => {
-  let component: DatabaseAddModalComponent;
-  let fixture: ComponentFixture<DatabaseAddModalComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [DatabaseAddModalComponent]
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(DatabaseAddModalComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it("should create", () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.ts
deleted file mode 100644
index 30665d87..00000000
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/database-add-modal/database-add-modal.component.ts
+++ /dev/null
@@ -1,153 +0,0 @@
-/*
- * ============LICENSE_START=======================================================
- * ONAP : DataLake
- * ================================================================================
- * Copyright 2019 QCT
- *=================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-/**
- *
- * @author Ekko Chang
- *
- * @contributor Chunmeng Guo
- *
- */
-
-import {Component, Output, EventEmitter, ViewChild, ElementRef} from "@angular/core";
-import {NgbActiveModal, NgbModal} from "@ng-bootstrap/ng-bootstrap";
-import {CouchbaseComponent} from "src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component";
-import {DruidComponent} from "src/app/views/database/database-list/dbs-modal/druid/druid.component";
-import {ElasticsearchComponent} from "src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component";
-import {MongodbComponent} from "src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component";
-import {HdfsComponent} from "src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component";
-import {Db} from "src/app/core/models/db.model";
-import {RestApiService} from "src/app/core/services/rest-api.service";
-import {ToastrNotificationService} from "src/app/shared/components/toastr-notification/toastr-notification.service";
-import {NgxSpinnerService} from "ngx-spinner";
-
-@Component({
-  selector: "app-database-add-modal",
-  templateUrl: "./database-add-modal.component.html",
-  styleUrls: ["./database-add-modal.component.css"]
-})
-export class DatabaseAddModalComponent {
-  @Output() passEntry: EventEmitter<any> = new EventEmitter();
-  seletedItem: string = "";
-  dbList: any = [];
-  dbs: Db[] = [];
-  loading: Boolean = true;
-  dbNew: Db;
-  db_NewBody: Db;
-  constructor(
-    public activeModal: NgbActiveModal,
-    private spinner: NgxSpinnerService,
-    private notificationService: ToastrNotificationService,
-    private modalService: NgbModal,
-    private dbApiService: RestApiService
-  ) {}
-
-  ngOnInit() {}
-
-  clickItem(name: string) {
-    this.seletedItem = name;
-  }
-
-  passBack() {
-    console.log(this.seletedItem, "next");
-    this.openNewModal(this.seletedItem);
-  }
-
-  newDb(modalRef) {
-    this.dbNew = new Db();
-    this.db_NewBody = new Db();
-    modalRef.componentInstance.db = this.db_NewBody;
-    modalRef.componentInstance.dbList_length = this.dbList.length;
-    modalRef.componentInstance.passEntry.subscribe(receivedEntry => {
-      this.db_NewBody = receivedEntry;
-      this.dbApiService
-        .createDb(this.db_NewBody)
-        .subscribe(
-          res => {
-            this.spinner.hide();
-            if (res.statusCode == 200) {
-              this.dbNew = res.returnBody;
-              this.dbList.push(this.dbNew);
-              this.dbList = [...this.dbList];
-              this.notificationService.success("SUCCESSFULLY_CREARED");
-            } else {
-              this.notificationService.error("FAILED_CREARED");
-            }
-            modalRef.close();
-          },
-          err => {
-            this.spinner.hide();
-            this.notificationService.error(err);
-            modalRef.close();
-          }
-        );
-    });
-  }
-
-  openNewModal(name: string) {
-    var modalRef;
-
-    switch (name) {
-      case "Couchbase": {
-        modalRef = this.modalService.open(CouchbaseComponent, {
-          size: "lg",
-          centered: true
-        });
-        this.newDb(modalRef);
-        break;
-      }
-      case "Druid": {
-        modalRef = this.modalService.open(DruidComponent, {
-          size: "lg",
-          centered: true
-        });
-        this.newDb(modalRef);
-        break;
-      }
-      case "Elasticsearch": {
-        modalRef = this.modalService.open(ElasticsearchComponent, {
-          size: "lg",
-          centered: true
-        });
-        this.newDb(modalRef);
-        break;
-      }
-      case "MongoDB": {
-        modalRef = this.modalService.open(MongodbComponent, {
-          size: "lg",
-          centered: true
-        });
-        this.newDb(modalRef);
-        break;
-      }
-      case "HDFS": {
-        modalRef = this.modalService.open(HdfsComponent, {
-          size: "lg",
-          centered: true
-        });
-        this.newDb(modalRef);
-        break;
-      }
-      default: {
-        break;
-      }
-    }
-  }
-}
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.css b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.css
deleted file mode 100644
index 7752355c..00000000
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.css
+++ /dev/null
@@ -1,57 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-.row-wrapper{
-  display: flex;
-}
-.row-quarter-item{
-  width: 20%;
-  margin-bottom: 15px;
-}
-.row-half-item{
-  width: 45%;
-}
-.row-half-item2{
-  width: 50%;
-}
-.usual-item{
-  margin-left: 2%;
-}
-.usual-item2{
-  margin-left: 6.5%;
-}
-input::-webkit-input-placeholder {
-  font-size: 12px;
-  color: #999999 !important;
-}
-input:-moz-placeholder {
-  /* Mozilla Firefox 4 to 18 */
-  font-size: 12px;
-  color: #999999 !important;
-}
-input::-moz-placeholder {
-  /* Mozilla Firefox 19+ */
-  font-size: 12px;
-  color: #999999 !important;
-}
-input::-ms-input-placeholder {
-  /* Internet Explorer 10+ */
-  font-size: 12px;
-  color: #999999 !important;
-}
-
-.input_style {
-  width: 200px;
-}
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.html b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.html
deleted file mode 100644
index 0eb67366..00000000
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.html
+++ /dev/null
@@ -1,164 +0,0 @@
-<!--
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
--->
-<div class="p-1">
-  <div class="modal-header pb-0 border-0">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-md-12">
-          <label class="dl-h3">{{ this.dbInputTitle }}</label>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-md-12">
-          <hr>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="modal-body border-0">
-    <div class="container">
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'NAME' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.dbInput.name" class="form-control dl-input-text input_style" placeholder="" type="text"/>
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'STATUS' | translate }}</label>
-          </div>
-          <div>
-            <label class="dl-switch">
-              <input [(ngModel)]="this.dbInput.enabled" id="switch" type="checkbox" />
-              <span class="dl-slider round"></span>
-            </label>
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'HOST' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.dbInput.host" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'PORT' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.dbInput.port" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'Username' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.dbInput.login" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'Password' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.dbInput.pass" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1">{{ 'SECURE_COMMUNICATION' | translate }}</label>
-          </div>
-          <div class="input-group" style="width: 120px">
-            <label class="input-group-text dl-input-chk-label">
-              <input [(ngModel)]="this.dbInput.encrypt" id="chkSaveRaw" type="checkbox" />
-              <span class="dl-input-checkmark"></span>
-            </label>
-            <label class="form-control dl-input-chk" for="chkSaveRaw">
-              Secure
-            </label>
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'DB_TYPE' | translate }}</label>
-          </div>
-          <div>
-            <select #d_dbTypeId class="custom-select dl-input-text input_style" disabled>
-              <option *ngFor="let item of this.dbTypeIdList" [selected]="item == this.defaultDbType">{{ item }}</option>
-            </select>
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'DATABASE' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.dbInput.database" class="form-control dl-input-text input_style" type="text" required="required" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-
-  <div class="modal-footer border-0 pt-0 pb-2">
-    <div class="container">
-      <div class="row">
-        <div class="col-md-6 p-0">
-
-        </div>
-        <div class="col-md-3 p-1">
-          <span>
-            <button type="button" class="btn dl-btn-dark btn-block" (click)="this.passBack()">
-              Save
-            </button>
-          </span>
-        </div>
-        <div class="col-md-3 p-1">
-          <span>
-            <button type="button" class="btn dl-btn-light btn-block" (click)="activeModal.close('Close click')">
-              Cancel
-            </button>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.ts
deleted file mode 100644
index 5c347ad0..00000000
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/couchbase/couchbase.component.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-/*
- * ============LICENSE_START=======================================================
- * ONAP : DataLake
- * ================================================================================
- * Copyright 2019 QCT
- *=================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-/**
- *
- * @author Ekko Chang
- *
- * @contributor Chunmeng Guo
- *
- */
-
-import {Component, Input, Output, EventEmitter, ViewChild, ElementRef} from "@angular/core";
-import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
-import { Db } from "src/app/core/models/db.model";
-import { AdminService } from "src/app/core/services/admin.service";
-import {NgxSpinnerService} from "ngx-spinner";
-
-@Component({
-  selector: "app-couchbase",
-  templateUrl: "./couchbase.component.html",
-  styleUrls: ["./couchbase.component.css"]
-})
-export class CouchbaseComponent {
-  @Output() passEntry: EventEmitter<any> = new EventEmitter();
-  @Input() editDb: Db;
-  @Input() db: Db;
-  @Input() dbList_length;
-  dbInput: Db;
-  dbTypeIdList: Array<string> = ["CB"];
-  @ViewChild("d_dbTypeId") d_dbTypeId: ElementRef;
-
-  defaultDbType: string;
-  dbInputTitle = "";
-  constructor(
-    public activeModal: NgbActiveModal,
-    public adminService: AdminService,
-    private spinner: NgxSpinnerService
-  ) { }
-
-  ngOnInit() {
-    if (this.editDb == null) {
-      this.dbInput = new Db();
-      const feed = {
-        id: null,
-        name: this.db.name,
-        enabled: this.db.enabled,
-        host: this.db.host,
-        port: this.db.port,
-        database: this.db.database,
-        encrypt: this.db.encrypt,
-        login: this.db.login,
-        pass: this.db.pass,
-        dbTypeId: this.db.dbTypeId
-      }
-      this.dbInput = feed;
-      this.dbInputTitle = "New Couchbase";
-      console.log("create db");
-
-    } else {
-      this.dbInput = this.editDb;
-      this.dbInputTitle = "Edit" + "-" + this.editDb.dbTypeId + "-" + this.editDb.name;
-      this.defaultDbType = this.dbInput.dbTypeId;
-      console.log("edit db");
-    }
-  }
-
-  passBack() {
-    this.spinner.show();
-    if (this.dbInput.name == '' || this.dbInput.name == undefined) {
-      return false;
-    }
-    this.editDb = this.dbInput;
-    this.editDb.dbTypeId = this.d_dbTypeId.nativeElement.value;
-    console.log(this.editDb, "db");
-    this.passEntry.emit(this.editDb);
-    setTimeout(() => {
-      this.spinner.hide();
-    }, 500);
-  }
-}
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.css b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.css
deleted file mode 100644
index 7752355c..00000000
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.css
+++ /dev/null
@@ -1,57 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-.row-wrapper{
-  display: flex;
-}
-.row-quarter-item{
-  width: 20%;
-  margin-bottom: 15px;
-}
-.row-half-item{
-  width: 45%;
-}
-.row-half-item2{
-  width: 50%;
-}
-.usual-item{
-  margin-left: 2%;
-}
-.usual-item2{
-  margin-left: 6.5%;
-}
-input::-webkit-input-placeholder {
-  font-size: 12px;
-  color: #999999 !important;
-}
-input:-moz-placeholder {
-  /* Mozilla Firefox 4 to 18 */
-  font-size: 12px;
-  color: #999999 !important;
-}
-input::-moz-placeholder {
-  /* Mozilla Firefox 19+ */
-  font-size: 12px;
-  color: #999999 !important;
-}
-input::-ms-input-placeholder {
-  /* Internet Explorer 10+ */
-  font-size: 12px;
-  color: #999999 !important;
-}
-
-.input_style {
-  width: 200px;
-}
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.html b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.html
deleted file mode 100644
index 0eb67366..00000000
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.html
+++ /dev/null
@@ -1,164 +0,0 @@
-<!--
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
--->
-<div class="p-1">
-  <div class="modal-header pb-0 border-0">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-md-12">
-          <label class="dl-h3">{{ this.dbInputTitle }}</label>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-md-12">
-          <hr>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="modal-body border-0">
-    <div class="container">
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'NAME' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.dbInput.name" class="form-control dl-input-text input_style" placeholder="" type="text"/>
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'STATUS' | translate }}</label>
-          </div>
-          <div>
-            <label class="dl-switch">
-              <input [(ngModel)]="this.dbInput.enabled" id="switch" type="checkbox" />
-              <span class="dl-slider round"></span>
-            </label>
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'HOST' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.dbInput.host" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'PORT' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.dbInput.port" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'Username' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.dbInput.login" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'Password' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.dbInput.pass" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1">{{ 'SECURE_COMMUNICATION' | translate }}</label>
-          </div>
-          <div class="input-group" style="width: 120px">
-            <label class="input-group-text dl-input-chk-label">
-              <input [(ngModel)]="this.dbInput.encrypt" id="chkSaveRaw" type="checkbox" />
-              <span class="dl-input-checkmark"></span>
-            </label>
-            <label class="form-control dl-input-chk" for="chkSaveRaw">
-              Secure
-            </label>
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'DB_TYPE' | translate }}</label>
-          </div>
-          <div>
-            <select #d_dbTypeId class="custom-select dl-input-text input_style" disabled>
-              <option *ngFor="let item of this.dbTypeIdList" [selected]="item == this.defaultDbType">{{ item }}</option>
-            </select>
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'DATABASE' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.dbInput.database" class="form-control dl-input-text input_style" type="text" required="required" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-
-  <div class="modal-footer border-0 pt-0 pb-2">
-    <div class="container">
-      <div class="row">
-        <div class="col-md-6 p-0">
-
-        </div>
-        <div class="col-md-3 p-1">
-          <span>
-            <button type="button" class="btn dl-btn-dark btn-block" (click)="this.passBack()">
-              Save
-            </button>
-          </span>
-        </div>
-        <div class="col-md-3 p-1">
-          <span>
-            <button type="button" class="btn dl-btn-light btn-block" (click)="activeModal.close('Close click')">
-              Cancel
-            </button>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.spec.ts
deleted file mode 100644
index 833fa410..00000000
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.spec.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-/*
- * ============LICENSE_START=======================================================
- * ONAP : DataLake
- * ================================================================================
- * Copyright 2019 QCT
- *=================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import { async, ComponentFixture, TestBed } from "@angular/core/testing";
-
-import { DruidComponent } from "./druid.component";
-
-describe("DruidComponent", () => {
-  let component: DruidComponent;
-  let fixture: ComponentFixture<DruidComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [DruidComponent]
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(DruidComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it("should create", () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.ts
deleted file mode 100644
index cf4027a6..00000000
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/druid/druid.component.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-/*
- * ============LICENSE_START=======================================================
- * ONAP : DataLake
- * ================================================================================
- * Copyright 2019 QCT
- *=================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-/**
- *
- * @author Ekko Chang
- *
- * @contributor Chunmeng Guo
- *
- */
-
-import {Component, Input, Output, EventEmitter, ViewChild, ElementRef} from "@angular/core";
-import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
-import { Db } from "src/app/core/models/db.model";
-import { AdminService } from "src/app/core/services/admin.service";
-import {NgxSpinnerService} from "ngx-spinner";
-
-@Component({
-  selector: "app-druid",
-  templateUrl: "./druid.component.html",
-  styleUrls: ["./druid.component.css"]
-})
-export class DruidComponent {
-  @Output() passEntry: EventEmitter<any> = new EventEmitter();
-  @Input() editDb: Db;
-  @Input() db: Db;
-  @Input() dbList_length;
-  dbInput: Db;
-  dbTypeIdList: Array<string> = ["DRUID"];
-  @ViewChild("d_dbTypeId") d_dbTypeId: ElementRef;
-
-  defaultDbType: string;
-  dbInputTitle = "";
-  constructor(
-    public activeModal: NgbActiveModal,
-    public adminService: AdminService,
-    private spinner: NgxSpinnerService
-  ) { }
-
-  ngOnInit() {
-    if (this.editDb == null) {
-      this.dbInput = new Db();
-      const feed = {
-        id: null,
-        name: this.db.name,
-        enabled: this.db.enabled,
-        host: this.db.host,
-        port: this.db.port,
-        database: this.db.database,
-        encrypt: this.db.encrypt,
-        login: this.db.login,
-        pass: this.db.pass,
-        dbTypeId: this.db.dbTypeId
-      }
-      this.dbInput = feed;
-      this.dbInputTitle = "New Druid";
-      console.log("create db");
-
-    } else {
-      this.dbInput = this.editDb;
-      this.dbInputTitle = "Edit" + "-" + this.editDb.dbTypeId + "-" + this.editDb.name;
-      this.defaultDbType = this.dbInput.dbTypeId;
-      console.log("edit db");
-    }
-  }
-
-  passBack() {
-    this.spinner.show();
-    if (this.dbInput.name == '' || this.dbInput.name == undefined) {
-      return false;
-    }
-    this.editDb = this.dbInput;
-    this.editDb.dbTypeId = this.d_dbTypeId.nativeElement.value;
-    console.log(this.editDb, "db");
-    this.passEntry.emit(this.editDb);
-    setTimeout(() => {
-      this.spinner.hide();
-    }, 500);
-  }
-}
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.css b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.css
deleted file mode 100644
index 7752355c..00000000
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.css
+++ /dev/null
@@ -1,57 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-.row-wrapper{
-  display: flex;
-}
-.row-quarter-item{
-  width: 20%;
-  margin-bottom: 15px;
-}
-.row-half-item{
-  width: 45%;
-}
-.row-half-item2{
-  width: 50%;
-}
-.usual-item{
-  margin-left: 2%;
-}
-.usual-item2{
-  margin-left: 6.5%;
-}
-input::-webkit-input-placeholder {
-  font-size: 12px;
-  color: #999999 !important;
-}
-input:-moz-placeholder {
-  /* Mozilla Firefox 4 to 18 */
-  font-size: 12px;
-  color: #999999 !important;
-}
-input::-moz-placeholder {
-  /* Mozilla Firefox 19+ */
-  font-size: 12px;
-  color: #999999 !important;
-}
-input::-ms-input-placeholder {
-  /* Internet Explorer 10+ */
-  font-size: 12px;
-  color: #999999 !important;
-}
-
-.input_style {
-  width: 200px;
-}
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.html b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.html
deleted file mode 100644
index 0eb67366..00000000
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.html
+++ /dev/null
@@ -1,164 +0,0 @@
-<!--
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
--->
-<div class="p-1">
-  <div class="modal-header pb-0 border-0">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-md-12">
-          <label class="dl-h3">{{ this.dbInputTitle }}</label>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-md-12">
-          <hr>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="modal-body border-0">
-    <div class="container">
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'NAME' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.dbInput.name" class="form-control dl-input-text input_style" placeholder="" type="text"/>
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'STATUS' | translate }}</label>
-          </div>
-          <div>
-            <label class="dl-switch">
-              <input [(ngModel)]="this.dbInput.enabled" id="switch" type="checkbox" />
-              <span class="dl-slider round"></span>
-            </label>
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'HOST' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.dbInput.host" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'PORT' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.dbInput.port" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'Username' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.dbInput.login" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'Password' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.dbInput.pass" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1">{{ 'SECURE_COMMUNICATION' | translate }}</label>
-          </div>
-          <div class="input-group" style="width: 120px">
-            <label class="input-group-text dl-input-chk-label">
-              <input [(ngModel)]="this.dbInput.encrypt" id="chkSaveRaw" type="checkbox" />
-              <span class="dl-input-checkmark"></span>
-            </label>
-            <label class="form-control dl-input-chk" for="chkSaveRaw">
-              Secure
-            </label>
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'DB_TYPE' | translate }}</label>
-          </div>
-          <div>
-            <select #d_dbTypeId class="custom-select dl-input-text input_style" disabled>
-              <option *ngFor="let item of this.dbTypeIdList" [selected]="item == this.defaultDbType">{{ item }}</option>
-            </select>
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'DATABASE' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.dbInput.database" class="form-control dl-input-text input_style" type="text" required="required" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-
-  <div class="modal-footer border-0 pt-0 pb-2">
-    <div class="container">
-      <div class="row">
-        <div class="col-md-6 p-0">
-
-        </div>
-        <div class="col-md-3 p-1">
-          <span>
-            <button type="button" class="btn dl-btn-dark btn-block" (click)="this.passBack()">
-              Save
-            </button>
-          </span>
-        </div>
-        <div class="col-md-3 p-1">
-          <span>
-            <button type="button" class="btn dl-btn-light btn-block" (click)="activeModal.close('Close click')">
-              Cancel
-            </button>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.spec.ts
deleted file mode 100644
index 57798da3..00000000
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.spec.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-/*
- * ============LICENSE_START=======================================================
- * ONAP : DataLake
- * ================================================================================
- * Copyright 2019 QCT
- *=================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import { async, ComponentFixture, TestBed } from "@angular/core/testing";
-
-import { ElasticsearchComponent } from "./elasticsearch.component";
-
-describe("ElasticsearchComponent", () => {
-  let component: ElasticsearchComponent;
-  let fixture: ComponentFixture<ElasticsearchComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ElasticsearchComponent]
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ElasticsearchComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it("should create", () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.ts
deleted file mode 100644
index 4331bc7e..00000000
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-/*
- * ============LICENSE_START=======================================================
- * ONAP : DataLake
- * ================================================================================
- * Copyright 2019 QCT
- *=================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-/**
- *
- * @author Ekko Chang
- *
- * @contributor Chunmeng Guo
- *
- */
-
-import {Component, Input, Output, EventEmitter, ViewChild, ElementRef} from "@angular/core";
-import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
-import { Db } from "src/app/core/models/db.model";
-import { AdminService } from "src/app/core/services/admin.service";
-import {NgxSpinnerService} from "ngx-spinner";
-
-@Component({
-  selector: "app-elasticsearch",
-  templateUrl: "./elasticsearch.component.html",
-  styleUrls: ["./elasticsearch.component.css"]
-})
-export class ElasticsearchComponent {
-  @Output() passEntry: EventEmitter<any> = new EventEmitter();
-  @Input() editDb: Db;
-  @Input() db: Db;
-  @Input() dbList_length;
-  dbInput: Db;
-  dbTypeIdList: Array<string> = ["ES"];
-  @ViewChild("d_dbTypeId") d_dbTypeId: ElementRef;
-
-  defaultDbType: string;
-  dbInputTitle = "";
-  constructor(
-    public activeModal: NgbActiveModal,
-    public adminService: AdminService,
-    private spinner: NgxSpinnerService
-  ) { }
-
-  ngOnInit() {
-    if (this.editDb == null) {
-      this.dbInput = new Db();
-      const feed = {
-        id: null,
-        name: this.db.name,
-        enabled: this.db.enabled,
-        host: this.db.host,
-        port: this.db.port,
-        database: this.db.database,
-        encrypt: this.db.encrypt,
-        login: this.db.login,
-        pass: this.db.pass,
-        dbTypeId: this.db.dbTypeId
-      }
-      this.dbInput = feed;
-      this.dbInputTitle = "New Elasticsearch";
-      console.log("create db");
-
-    } else {
-      this.dbInput = this.editDb;
-      this.dbInputTitle = "Edit" + "-" + this.editDb.dbTypeId + "-" + this.editDb.name;
-      this.defaultDbType = this.dbInput.dbTypeId;
-      console.log("edit db");
-    }
-  }
-
-  passBack() {
-    this.spinner.show();
-    if (this.dbInput.name == '' || this.dbInput.name == undefined) {
-      return false;
-    }
-    this.editDb = this.dbInput;
-    this.editDb.dbTypeId = this.d_dbTypeId.nativeElement.value;
-    console.log(this.editDb, "db");
-    this.passEntry.emit(this.editDb);
-    setTimeout(() => {
-      this.spinner.hide();
-    }, 500);
-  }
-}
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.css b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.css
deleted file mode 100644
index 7752355c..00000000
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.css
+++ /dev/null
@@ -1,57 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-.row-wrapper{
-  display: flex;
-}
-.row-quarter-item{
-  width: 20%;
-  margin-bottom: 15px;
-}
-.row-half-item{
-  width: 45%;
-}
-.row-half-item2{
-  width: 50%;
-}
-.usual-item{
-  margin-left: 2%;
-}
-.usual-item2{
-  margin-left: 6.5%;
-}
-input::-webkit-input-placeholder {
-  font-size: 12px;
-  color: #999999 !important;
-}
-input:-moz-placeholder {
-  /* Mozilla Firefox 4 to 18 */
-  font-size: 12px;
-  color: #999999 !important;
-}
-input::-moz-placeholder {
-  /* Mozilla Firefox 19+ */
-  font-size: 12px;
-  color: #999999 !important;
-}
-input::-ms-input-placeholder {
-  /* Internet Explorer 10+ */
-  font-size: 12px;
-  color: #999999 !important;
-}
-
-.input_style {
-  width: 200px;
-}
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.html b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.html
deleted file mode 100644
index a12165cd..00000000
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.html
+++ /dev/null
@@ -1,144 +0,0 @@
-<!--
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
--->
-<div class="p-1">
-  <div class="modal-header pb-0 border-0">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-md-12">
-          <label class="dl-h3">{{ this.dbInputTitle }}</label>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-md-12">
-          <hr>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="modal-body border-0">
-    <div class="container">
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'NAME' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.dbInput.name" class="form-control dl-input-text input_style" placeholder="" type="text"/>
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'STATUS' | translate }}</label>
-          </div>
-          <div>
-            <label class="dl-switch">
-              <input [(ngModel)]="this.dbInput.enabled" id="switch" type="checkbox" />
-              <span class="dl-slider round"></span>
-            </label>
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'HOST' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.dbInput.host" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'PORT' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.dbInput.port" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1">{{ 'SECURE_COMMUNICATION' | translate }}</label>
-          </div>
-          <div class="input-group" style="width: 120px">
-            <label class="input-group-text dl-input-chk-label">
-              <input [(ngModel)]="this.dbInput.encrypt" id="chkSaveRaw" type="checkbox" />
-              <span class="dl-input-checkmark"></span>
-            </label>
-            <label class="form-control dl-input-chk" for="chkSaveRaw">
-              Secure
-            </label>
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'DB_TYPE' | translate }}</label>
-          </div>
-          <div>
-            <select #d_dbTypeId class="custom-select dl-input-text input_style" disabled>
-              <option *ngFor="let item of this.dbTypeIdList" [selected]="item == this.defaultDbType">{{ item }}</option>
-            </select>
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'DATABASE' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.dbInput.database" class="form-control dl-input-text input_style" type="text" required="required" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-
-  <div class="modal-footer border-0 pt-0 pb-2">
-    <div class="container">
-      <div class="row">
-        <div class="col-md-6 p-0">
-
-        </div>
-        <div class="col-md-3 p-1">
-          <span>
-            <button type="button" class="btn dl-btn-dark btn-block" (click)="this.passBack()">
-              Save
-            </button>
-          </span>
-        </div>
-        <div class="col-md-3 p-1">
-          <span>
-            <button type="button" class="btn dl-btn-light btn-block" (click)="activeModal.close('Close click')">
-              Cancel
-            </button>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.spec.ts
deleted file mode 100644
index dafbdadc..00000000
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.spec.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-/*
- * ============LICENSE_START=======================================================
- * ONAP : DataLake
- * ================================================================================
- * Copyright 2019 QCT
- *=================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import { async, ComponentFixture, TestBed } from "@angular/core/testing";
-
-import { HdfsComponent } from "./H./hdfs.component
-
-describe("HdfsComponent", () => {
-  let component: HdfsComponent;
-  let fixture: ComponentFixture<HdfsComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [HdfsComponent]
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(HdfsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it("should create", () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.ts
deleted file mode 100644
index f471e828..00000000
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/hdfs/hdfs.component.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-/*
- * ============LICENSE_START=======================================================
- * ONAP : DataLake
- * ================================================================================
- * Copyright 2019 QCT
- *=================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-/**
- *
- * @author Ekko Chang
- *
- * @contributor Chunmeng Guo
- *
- */
-
-import {Component, Input, Output, EventEmitter, ViewChild, ElementRef} from "@angular/core";
-import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
-import { Db } from "src/app/core/models/db.model";
-import { AdminService } from "src/app/core/services/admin.service";
-import {NgxSpinnerService} from "ngx-spinner";
-
-@Component({
-  selector: "app-hdfs",
-  templateUrl: "./hdfs.component.html",
-  styleUrls: ["./hdfs.component.css"]
-})
-export class HdfsComponent {
-  @Output() passEntry: EventEmitter<any> = new EventEmitter();
-  @Input() editDb: Db;
-  @Input() db: Db;
-  @Input() dbList_length;
-  dbInput: Db;
-  dbTypeIdList: Array<string> = ["HDFS"];
-  @ViewChild("d_dbTypeId") d_dbTypeId: ElementRef;
-
-  defaultDbType: string;
-  dbInputTitle = "";
-  constructor(
-    public activeModal: NgbActiveModal,
-    public adminService: AdminService,
-    private spinner: NgxSpinnerService
-  ) { }
-
-  ngOnInit() {
-    if (this.editDb == null) {
-      this.dbInput = new Db();
-      const feed = {
-        id: null,
-        name: this.db.name,
-        enabled: this.db.enabled,
-        host: this.db.host,
-        port: this.db.port,
-        database: this.db.database,
-        encrypt: this.db.encrypt,
-        login: this.db.login,
-        pass: this.db.pass,
-        dbTypeId: this.db.dbTypeId
-      }
-      this.dbInput = feed;
-      this.dbInputTitle = "New Hdfs";
-      console.log("create db");
-
-    } else {
-      this.dbInput = this.editDb;
-      this.dbInputTitle = "Edit" + "-" + this.editDb.dbTypeId + "-" + this.editDb.name;
-      this.defaultDbType = this.dbInput.dbTypeId;
-      console.log("edit db");
-    }
-  }
-
-  passBack() {
-    this.spinner.show();
-    if (this.dbInput.name == '' || this.dbInput.name == undefined) {
-      return false;
-    }
-    this.editDb = this.dbInput;
-    this.editDb.dbTypeId = this.d_dbTypeId.nativeElement.value;
-    console.log(this.editDb, "db");
-    this.passEntry.emit(this.editDb);
-    setTimeout(() => {
-      this.spinner.hide();
-    }, 500);
-  }
-}
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.css b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.css
deleted file mode 100644
index 7752355c..00000000
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.css
+++ /dev/null
@@ -1,57 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-.row-wrapper{
-  display: flex;
-}
-.row-quarter-item{
-  width: 20%;
-  margin-bottom: 15px;
-}
-.row-half-item{
-  width: 45%;
-}
-.row-half-item2{
-  width: 50%;
-}
-.usual-item{
-  margin-left: 2%;
-}
-.usual-item2{
-  margin-left: 6.5%;
-}
-input::-webkit-input-placeholder {
-  font-size: 12px;
-  color: #999999 !important;
-}
-input:-moz-placeholder {
-  /* Mozilla Firefox 4 to 18 */
-  font-size: 12px;
-  color: #999999 !important;
-}
-input::-moz-placeholder {
-  /* Mozilla Firefox 19+ */
-  font-size: 12px;
-  color: #999999 !important;
-}
-input::-ms-input-placeholder {
-  /* Internet Explorer 10+ */
-  font-size: 12px;
-  color: #999999 !important;
-}
-
-.input_style {
-  width: 200px;
-}
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.html b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.html
deleted file mode 100644
index 0eb67366..00000000
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.html
+++ /dev/null
@@ -1,164 +0,0 @@
-<!--
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
--->
-<div class="p-1">
-  <div class="modal-header pb-0 border-0">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-md-12">
-          <label class="dl-h3">{{ this.dbInputTitle }}</label>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-md-12">
-          <hr>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="modal-body border-0">
-    <div class="container">
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'NAME' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.dbInput.name" class="form-control dl-input-text input_style" placeholder="" type="text"/>
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'STATUS' | translate }}</label>
-          </div>
-          <div>
-            <label class="dl-switch">
-              <input [(ngModel)]="this.dbInput.enabled" id="switch" type="checkbox" />
-              <span class="dl-slider round"></span>
-            </label>
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'HOST' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.dbInput.host" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'PORT' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.dbInput.port" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'Username' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.dbInput.login" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'Password' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.dbInput.pass" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1">{{ 'SECURE_COMMUNICATION' | translate }}</label>
-          </div>
-          <div class="input-group" style="width: 120px">
-            <label class="input-group-text dl-input-chk-label">
-              <input [(ngModel)]="this.dbInput.encrypt" id="chkSaveRaw" type="checkbox" />
-              <span class="dl-input-checkmark"></span>
-            </label>
-            <label class="form-control dl-input-chk" for="chkSaveRaw">
-              Secure
-            </label>
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'DB_TYPE' | translate }}</label>
-          </div>
-          <div>
-            <select #d_dbTypeId class="custom-select dl-input-text input_style" disabled>
-              <option *ngFor="let item of this.dbTypeIdList" [selected]="item == this.defaultDbType">{{ item }}</option>
-            </select>
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'DATABASE' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.dbInput.database" class="form-control dl-input-text input_style" type="text" required="required" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-
-  <div class="modal-footer border-0 pt-0 pb-2">
-    <div class="container">
-      <div class="row">
-        <div class="col-md-6 p-0">
-
-        </div>
-        <div class="col-md-3 p-1">
-          <span>
-            <button type="button" class="btn dl-btn-dark btn-block" (click)="this.passBack()">
-              Save
-            </button>
-          </span>
-        </div>
-        <div class="col-md-3 p-1">
-          <span>
-            <button type="button" class="btn dl-btn-light btn-block" (click)="activeModal.close('Close click')">
-              Cancel
-            </button>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.spec.ts
deleted file mode 100644
index a9ff1b8d..00000000
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.spec.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-/*
- * ============LICENSE_START=======================================================
- * ONAP : DataLake
- * ================================================================================
- * Copyright 2019 QCT
- *=================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import { async, ComponentFixture, TestBed } from "@angular/core/testing";
-
-import { MongodbComponent } from "./mongodb.component";
-
-describe("MongodbComponent", () => {
-  let component: MongodbComponent;
-  let fixture: ComponentFixture<MongodbComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [MongodbComponent]
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MongodbComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it("should create", () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.ts b/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.ts
deleted file mode 100644
index bcd2e880..00000000
--- a/components/datalake-handler/admin/src/src/app/views/database/database-list/dbs-modal/mongodb/mongodb.component.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-/*
- * ============LICENSE_START=======================================================
- * ONAP : DataLake
- * ================================================================================
- * Copyright 2019 QCT
- *=================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-/**
- *
- * @author Ekko Chang
- *
- * @contributor Chunmeng Guo
- *
- */
-
-import {Component, Input, Output, EventEmitter, ViewChild, ElementRef} from "@angular/core";
-import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
-import { Db } from "src/app/core/models/db.model";
-import { AdminService } from "src/app/core/services/admin.service";
-import {NgxSpinnerService} from "ngx-spinner";
-
-@Component({
-  selector: "app-mongodb",
-  templateUrl: "./mongodb.component.html",
-  styleUrls: ["./mongodb.component.css"]
-})
-export class MongodbComponent {
-  @Output() passEntry: EventEmitter<any> = new EventEmitter();
-  @Input() editDb: Db;
-  @Input() db: Db;
-  @Input() dbList_length;
-  dbInput: Db;
-  dbTypeIdList: Array<string> = ["MONGO"];
-  @ViewChild("d_dbTypeId") d_dbTypeId: ElementRef;
-
-  defaultDbType: string;
-  dbInputTitle = "";
-  constructor(
-    public activeModal: NgbActiveModal,
-    public adminService: AdminService,
-    private spinner: NgxSpinnerService
-  ) { }
-
-  ngOnInit() {
-    if (this.editDb == null) {
-      this.dbInput = new Db();
-      const feed = {
-        id: null,
-        name: this.db.name,
-        enabled: this.db.enabled,
-        host: this.db.host,
-        port: this.db.port,
-        database: this.db.database,
-        encrypt: this.db.encrypt,
-        login: this.db.login,
-        pass: this.db.pass,
-        dbTypeId: this.db.dbTypeId
-      }
-      this.dbInput = feed;
-      this.dbInputTitle = "New MongoDb";
-      console.log("create db");
-
-    } else {
-      this.dbInput = this.editDb;
-      this.dbInputTitle = "Edit" + "-" + this.editDb.dbTypeId + "-" + this.editDb.name;
-      this.defaultDbType = this.dbInput.dbTypeId;
-      console.log("edit db");
-    }
-  }
-
-  passBack() {
-    this.spinner.show();
-    if (this.dbInput.name == '' || this.dbInput.name == undefined) {
-      return false;
-    }
-    this.editDb = this.dbInput;
-    this.editDb.dbTypeId = this.d_dbTypeId.nativeElement.value;
-    console.log(this.editDb, "db");
-    this.passEntry.emit(this.editDb);
-    setTimeout(() => {
-      this.spinner.hide();
-    }, 500);
-  }
-}
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.css b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.css
deleted file mode 100644
index a34ed1eb..00000000
--- a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.css
+++ /dev/null
@@ -1,38 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-.row-wrapper{
-  display: flex;
-}
-.row-quarter-item{
-  width: 20%;
-  margin-bottom: 15px;
-}
-.row-half-item{
-  width: 45%;
-}
-.row-half-item2{
-  width: 50%;
-}
-.usual-item{
-  margin-left: 2%;
-}
-.usual-item2{
-  margin-left: 6.5%;
-}
-input::-webkit-input-placeholder {
-  font-size: 12px;
-  color: #0DA9E2;
-}
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.html b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.html
deleted file mode 100644
index 2a42b988..00000000
--- a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.html
+++ /dev/null
@@ -1,193 +0,0 @@
-<!--
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
--->
-<div class="p-1">
-  <div class="modal-header pb-0 border-0">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-md-12">
-          <label class="dl-h3">{{ 'EDIT_KAFKA' | translate }}-{{ this.kafkaInputTitle }}</label>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-md-12">
-          <hr>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="modal-body border-0">
-    <div class="container-fluid">
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'NAME' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.kafkaInput.name" class="form-control dl-input-text" type="text"/>
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item2">
-          <div>
-            <label class="dl-emphasis1" >{{ 'STATUS' | translate }}</label>
-          </div>
-          <div>
-            <label class="dl-switch">
-              <input id="switch" type="checkbox" [(ngModel)]="this.kafkaInput.enabled"/>
-              <span class="dl-slider round"></span>
-            </label>
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'BROKER_LIST' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.kafkaInput.brokerList" class="form-control dl-input-text" type="text" required="required" />
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item2">
-          <div>
-            <label class="dl-emphasis1" >{{ 'ZOOKEEPER' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.kafkaInput.zooKeeper" class="form-control dl-input-text" type="text" required="required" />
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'Username' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.kafkaInput.login" class="form-control dl-input-text" type="text" required="required" />
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item2">
-          <div>
-            <label class="dl-emphasis1" >{{ 'Password' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.kafkaInput.pass" class="form-control dl-input-text" type="text" required="required" />
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1">{{ 'AUTHENTICATION' | translate }}</label>
-          </div>
-          <div class="input-group row-half-item2">
-            <label class="input-group-text dl-input-chk-label">
-              <input id="chkSaveRaw" [(ngModel)]="this.kafkaInput.secure" type="checkbox"/>
-              <span class="dl-input-checkmark"></span>
-            </label>
-            <label class="form-control dl-input-chk" for="chkSaveRaw">
-              Secure
-            </label>
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item2">
-          <div>
-            <label class="dl-emphasis1" >{{ 'SECURITY_PROTOCOL' | translate }}</label>
-          </div>
-          <div>
-            <select class="custom-select dl-input-text" >
-              <option *ngFor="let item of protocols" [selected]="item == protocols[0]">{{ item }}</option>
-            </select>
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'GROUP' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.kafkaInput.group" class="form-control dl-input-text" type="text" required="required" />
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item2">
-          <div>
-            <label class="dl-emphasis1" >{{ 'TIME_OUT' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.kafkaInput.timeout" class="form-control dl-input-text" type="text" required="required" />
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'EXCLUDED_TOPICS' | translate }}</label>
-          </div>
-          <div>
-            <div class="d-flex row align-items-center" *ngFor="let field of exTopicFields; let i = index">
-              <div class="order-1 usual-item2">
-                <input [(ngModel)]="field.item" class="form-control dl-input-text" type="text"/>
-              </div>
-              <div class="order-2">
-                <button type="button" class="btn dl-icon-enable p-2" (click)="addExTopicField()">
-                  <i class="fa fa-plus fa-xs" aria-hidden="true"></i>
-                </button>
-              </div>
-              <div class="order-3">
-                <button type="button" class="btn dl-icon-enable p-2" (click)="deleteExTopicField(i)">
-                  <i class="fa fa-trash fa-xs" aria-hidden="true"></i>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="modal-footer border-0 pt-0 pb-2">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-md-7 p-0">
-        </div>
-        <div class="col-md-2 p-1">
-          <span>
-            <button type="button" class="btn dl-btn-dark btn-block" (click)="this.passBack()">
-              Save
-            </button>
-          </span>
-        </div>
-        <div class="col-md-2 p-1">
-          <span>
-            <button type="button" class="btn dl-btn-light btn-block" (click)="activeModal.close('Close click')">
-              Cancel
-            </button>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.spec.ts
deleted file mode 100644
index 4c24cb90..00000000
--- a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.spec.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { EditKafkaModalComponent } from './edit-kafka-modal.component';
-
-describe('EditKafkaModalComponent', () => {
-  let component: EditKafkaModalComponent;
-  let fixture: ComponentFixture<EditKafkaModalComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ EditKafkaModalComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(EditKafkaModalComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.ts
deleted file mode 100644
index 9f129b6e..00000000
--- a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-
-import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
-import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
-
-// Loading spinner
-import { NgxSpinnerService } from "ngx-spinner";
-import {Kafka} from "../../../../core/models/kafka.model";
-
-@Component({
-  selector: 'app-edit-kafka-modal',
-  templateUrl: './edit-kafka-modal.component.html',
-  styleUrls: ['./edit-kafka-modal.component.css']
-})
-export class EditKafkaModalComponent implements OnInit {
-  @Input() editKafka: Kafka;
-  @Output() passEntry: EventEmitter<any> = new EventEmitter();
-  kafkaInput: Kafka;
-  exTopicFields: Array<any> = [];
-  exTopicNewField: any = {};
-  protocols: Array<string> = ["SASL_PLAINTEXT"];
-
-  constructor(
-    public activeModal: NgbActiveModal,
-    private spinner: NgxSpinnerService,
-  ) { }
-
-  kafkaInputTitle = "";
-
-  ngOnInit() {
-    this.kafkaInput = this.editKafka;
-    if (this.kafkaInput.excludedTopic != null) {
-      var excludedTopics = this.kafkaInput.excludedTopic.split(",");
-      for (var i = 0; i < excludedTopics.length; i++) {
-        var data = { item: excludedTopics[i] };
-        this.exTopicFields.push(data);
-      }
-    } else {
-      this.exTopicFields.push([]);
-    }
-    this.kafkaInputTitle = this.editKafka.name;
-  }
-
-  passBack() {
-    this.spinner.show();
-    if (this.kafkaInput.name == '' || this.kafkaInput.name == undefined) {
-      return false;
-    }
-    this.editKafka = this.kafkaInput;
-    this.passEntry.emit(this.editKafka);
-    setTimeout(() => {
-      this.spinner.hide();
-    }, 500);
-  }
-
-  addExTopicField() {
-    this.exTopicFields.push(this.exTopicNewField);
-    this.exTopicNewField = {};
-  }
-
-  deleteExTopicField(index: number) {
-    if (this.exTopicFields.length > 1) {
-      this.exTopicFields.splice(index, 1);
-    }
-  }
-}
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.css b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.css
deleted file mode 100644
index 7b11d9e7..00000000
--- a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.css
+++ /dev/null
@@ -1,53 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-.row-wrapper{
-  display: flex;
-}
-.row-quarter-item{
-  width: 20%;
-  margin-bottom: 15px;
-}
-.row-half-item{
-  width: 45%;
-}
-.row-half-item2{
-  width: 50%;
-}
-.usual-item{
-  margin-left: 2%;
-}
-.usual-item2{
-  margin-left: 6.5%;
-}
-input::-webkit-input-placeholder {
-  font-size: 12px;
-  color: #999999 !important;
-}
-input:-moz-placeholder {
-  /* Mozilla Firefox 4 to 18 */
-  font-size: 12px;
-  color: #999999 !important;
-}
-input::-moz-placeholder {
-  /* Mozilla Firefox 19+ */
-  font-size: 12px;
-  color: #999999 !important;
-}
-input::-ms-input-placeholder {
-  /* Internet Explorer 10+ */
-  font-size: 12px;
-  color: #999999 !important;
-}
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.html b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.html
deleted file mode 100644
index 7bf81c45..00000000
--- a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.html
+++ /dev/null
@@ -1,193 +0,0 @@
-<!--
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
--->
-<div class="p-1">
-  <div class="modal-header pb-0 border-0">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-md-12">
-          <label class="dl-h3">{{ 'NEW_KAFKA' | translate }}</label>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-md-12">
-          <hr>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="modal-body border-0">
-    <div class="container-fluid">
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'NAME' | translate }}</label>
-          </div>
-          <div>
-            <input #k_name [(ngModel)]="this.kafkaInput.name" class="form-control dl-input-text" placeholder="" type="text"/>
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item2">
-          <div>
-            <label class="dl-emphasis1" >{{ 'STATUS' | translate }}</label>
-          </div>
-          <div>
-            <label class="dl-switch">
-              <input #k_enabled id="switch" type="checkbox" [(ngModel)]="this.kafkaInput.enabled"/>
-              <span class="dl-slider round"></span>
-            </label>
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'BROKER_LIST' | translate }}</label>
-          </div>
-          <div>
-            <input #k_brokerList [(ngModel)]="this.kafkaInput.brokerList" class="form-control dl-input-text" type="text" placeholder="0.0.0.0" required="required" />
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item2">
-          <div>
-            <label class="dl-emphasis1" >{{ 'ZOOKEEPER' | translate }}</label>
-          </div>
-          <div>
-            <input #k_zooKeeper [(ngModel)]="this.kafkaInput.zooKeeper" class="form-control dl-input-text" type="text" placeholder="0.0.0.0" required="required" />
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'Username' | translate }}</label>
-          </div>
-          <div>
-            <input #k_login [(ngModel)]="this.kafkaInput.login" class="form-control dl-input-text" type="text" placeholder="login" required="required" />
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item2">
-          <div>
-            <label class="dl-emphasis1" >{{ 'Password' | translate }}</label>
-          </div>
-          <div>
-            <input #k_pass [(ngModel)]="this.kafkaInput.pass" class="form-control dl-input-text" type="text" placeholder="pass" required="required" />
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1">{{ 'AUTHENTICATION' | translate }}</label>
-          </div>
-          <div class="input-group row-half-item2">
-            <label class="input-group-text dl-input-chk-label">
-              <input #k_secure id="chkSaveRaw" [(ngModel)]="this.kafkaInput.secure" type="checkbox" />
-              <span class="dl-input-checkmark"></span>
-            </label>
-            <label class="form-control dl-input-chk" for="chkSaveRaw">
-              Secure
-            </label>
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item2">
-          <div>
-            <label class="dl-emphasis1" >{{ 'SECURITY_PROTOCOL' | translate }}</label>
-          </div>
-          <div>
-            <select #k_securityProtocol class="custom-select dl-input-text" >
-              <option *ngFor="let item of protocols" [selected]="item == protocols[0]">{{ item }}</option>
-            </select>
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'GROUP' | translate }}</label>
-          </div>
-          <div>
-            <input #k_group [(ngModel)]="this.kafkaInput.group" class="form-control dl-input-text" type="text" placeholder="dlgroup" required="required" />
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item2">
-          <div>
-            <label class="dl-emphasis1" >{{ 'TIME_OUT' | translate }}</label>
-          </div>
-          <div>
-            <input #k_timeout [(ngModel)]="this.kafkaInput.timeout" class="form-control dl-input-text" type="text" placeholder="6" required="required" />
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'EXCLUDED_TOPICS' | translate }}</label>
-          </div>
-          <div>
-            <div class="d-flex row align-items-center" *ngFor="let field of exTopicFields; let i = index">
-              <div class="order-1 usual-item2">
-                <input [(ngModel)]="field.item" class="form-control dl-input-text" placeholder="__consumer_offsets" type="text"/>
-              </div>
-              <div class="order-2">
-                <button type="button" class="btn dl-icon-enable p-2" (click)="addExTopicField()">
-                  <i class="fa fa-plus fa-xs" aria-hidden="true"></i>
-                </button>
-              </div>
-              <div class="order-3">
-                <button type="button" class="btn dl-icon-enable p-2" (click)="deleteExTopicField(i)">
-                  <i class="fa fa-trash fa-xs" aria-hidden="true"></i>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="modal-footer border-0 pt-0 pb-2">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-md-7 p-0">
-        </div>
-        <div class="col-md-2 p-1">
-          <span>
-            <button type="button" class="btn dl-btn-dark btn-block" (click)="this.passBack()">
-              Save
-            </button>
-          </span>
-        </div>
-        <div class="col-md-2 p-1">
-          <span>
-            <button type="button" class="btn dl-btn-light btn-block" (click)="activeModal.close('Close click')">
-              Cancel
-            </button>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.spec.ts
deleted file mode 100644
index e222d70d..00000000
--- a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.spec.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { NewKafkaModalComponent } from './new-kafka-modal.component';
-
-describe('NewKafkaModalComponent', () => {
-  let component: NewKafkaModalComponent;
-  let fixture: ComponentFixture<NewKafkaModalComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ NewKafkaModalComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(NewKafkaModalComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.ts
deleted file mode 100644
index 843799df..00000000
--- a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-
-/**
- * @author Chunmeng Guo
- */
-
-import {Component, EventEmitter, Input, OnInit, Output, ElementRef, ViewChild} from '@angular/core';
-
-import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
-import { RestApiService } from "src/app/core/services/rest-api.service";
-import { NgxSpinnerService } from "ngx-spinner";
-
-import { Kafka } from "../../../../core/models/kafka.model";
-
-@Component({
-  selector: 'app-new-kafka-modal',
-  templateUrl: './new-kafka-modal.component.html',
-  styleUrls: ['./new-kafka-modal.component.css']
-})
-export class NewKafkaModalComponent implements OnInit {
-  @Input() kafka: Kafka;
-  @Input() kafkaList_length;
-  @Output() passEntry: EventEmitter<any> = new EventEmitter();
-  kafkaInput: Kafka;
-  exTopicFields: Array<any> = [];
-  exTopicNewField: any = {};
-  protocols: Array<string> = ["SASL_PLAINTEXT"];
-
-  @ViewChild("k_name") k_name: ElementRef;
-  @ViewChild("k_login") k_login: ElementRef;
-  @ViewChild("k_pass") k_pass: ElementRef;
-  @ViewChild("k_enabled") k_enabled: ElementRef;
-  @ViewChild("k_brokerList") k_brokerList: ElementRef;
-  @ViewChild("k_zooKeeper") k_zooKeeper: ElementRef;
-  @ViewChild("k_group") k_group: ElementRef;
-  @ViewChild("k_secure") k_secure: ElementRef;
-  @ViewChild("k_securityProtocol") k_securityProtocol: ElementRef;
-  @ViewChild("k_includedTopic") k_includedTopic: ElementRef;
-  @ViewChild("k_excludedTopic") k_excludedTopic: ElementRef;
-  @ViewChild("k_consumerCount") k_consumerCount: ElementRef;
-  @ViewChild("k_timeout") k_timeout: ElementRef;
-
-  constructor(
-    private activeModal: NgbActiveModal,
-    private kafkaApiService: RestApiService,
-    private spinner: NgxSpinnerService
-  ) { }
-
-  ngOnInit() {
-    // cache for display
-    this.kafkaInput = new Kafka();
-    const feed = {
-      id: null,
-      name: this.kafka.name,
-      enabled: this.kafka.enabled,
-      brokerList: this.kafka.brokerList,
-      zooKeeper: this.kafka.zooKeeper,
-      group: this.kafka.group,
-      secure: this.kafka.secure,
-      login: this.kafka.login,
-      pass: this.kafka.pass,
-      securityProtocol: this.kafka.securityProtocol,
-      includedTopic: this.kafka.includedTopic,
-      excludedTopic: this.kafka.excludedTopic,
-      consumerCount: this.kafka.consumerCount,
-      timeout: this.kafka.timeout
-    };
-    this.kafkaInput = feed;
-    this.exTopicFields = [];
-    if (this.kafkaInput.excludedTopic != null) {
-      var feeds = this.kafkaInput.excludedTopic.split(",");
-      for (var i = 0; i < feeds.length; i++) {
-        var data = { item: feed[i] };
-        this.exTopicFields.push(data);
-      }
-    } else {
-      this.exTopicFields.push([]);
-    }
-  }
-
-  passBack() {
-    this.spinner.show();
-    if (this.kafkaInput.name == '' || this.kafkaInput.name == undefined) {
-      return false;
-    }
-    this.kafka = this.kafkaInput;
-    this.kafka.securityProtocol = this.k_securityProtocol.nativeElement.value;
-    for (var i = 0; i < this.exTopicFields.length; i++) {
-      let item = this.exTopicFields[i].item;
-      if (i == 0) {
-        this.kafka.excludedTopic = item;
-      } else {
-        this.kafka.excludedTopic = this.kafka.excludedTopic + "," + item;
-      }
-    }
-    console.log(this.kafka);
-    this.passEntry.emit(this.kafka);
-
-  }
-
-  addExTopicField() {
-    this.exTopicFields.push(this.exTopicNewField);
-    this.exTopicNewField = {};
-  }
-
-  deleteExTopicField(index: number) {
-    if (this.exTopicFields.length > 1) {
-      this.exTopicFields.splice(index, 1);
-    }
-  }
-}
diff --git a/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.css b/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.css
deleted file mode 100644
index 1d234f73..00000000
--- a/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.css
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-
-.row-wrapper{
-  display: flex;
-}
-.row-quarter-item{
-  width: 20%;
-  margin-bottom: 15px;
-}
-.row-half-item{
-  width: 45%;
-}
-.row-half-item2{
-  width: 50%;
-}
-.usual-item{
-  margin-left: 2%;
-}
-.usual-item2{
-  margin-left: 6.5%;
-}
-input::-webkit-input-placeholder {
-  font-size: 12px;
-  color: #999999 !important;
-}
-input:-moz-placeholder {
-  /* Mozilla Firefox 4 to 18 */
-  font-size: 12px;
-  color: #999999 !important;
-}
-input::-moz-placeholder {
-  /* Mozilla Firefox 19+ */
-  font-size: 12px;
-  color: #999999 !important;
-}
-input::-ms-input-placeholder {
-  /* Internet Explorer 10+ */
-  font-size: 12px;
-  color: #999999 !important;
-}
-
-.input_style {
-  width: 200px;
-}
diff --git a/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.html b/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.html
deleted file mode 100644
index f4f9abad..00000000
--- a/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.html
+++ /dev/null
@@ -1,147 +0,0 @@
-<!--
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
--->
-
-<div class="p-1">
-  <div class="modal-header pb-0 border-0">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-md-12">
-          <label class="dl-h3">{{ this.toolInputTitle }}</label>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-md-12">
-          <hr>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="modal-body border-0">
-    <div class="container">
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'NAME' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.toolInput.name" class="form-control dl-input-text input_style" placeholder="" type="text"/>
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'STATUS' | translate }}</label>
-          </div>
-          <div>
-            <label class="dl-switch">
-              <input [(ngModel)]="this.toolInput.enabled" id="switch" type="checkbox" />
-              <span class="dl-slider round"></span>
-            </label>
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'HOST' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.toolInput.host" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'PORT' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.toolInput.port" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'Username' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.toolInput.login" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'Password' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.toolInput.pass" class="form-control dl-input-text input_style" type="text" placeholder="" required="required" />
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group row row-wrapper">
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'DATABASE' | translate }}</label>
-          </div>
-          <div>
-            <input [(ngModel)]="this.toolInput.database" class="form-control dl-input-text input_style" type="text" required="required" />
-          </div>
-        </div>
-
-        <div class="row-half-item usual-item">
-          <div>
-            <label class="dl-emphasis1" >{{ 'DB_TYPE' | translate }}</label>
-          </div>
-          <div>
-            <select #d_dbTypeId class="custom-select dl-input-text input_style" disabled>
-              <option *ngFor="let item of this.dbTypeIdList" [selected]="item == this.defaultDbType">{{ item }}</option>
-            </select>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-
-  <div class="modal-footer border-0 pt-0 pb-2">
-    <div class="container">
-      <div class="row">
-        <div class="col-md-6 p-0">
-
-        </div>
-        <div class="col-md-3 p-1">
-          <span>
-            <button type="button" class="btn dl-btn-dark btn-block" (click)="this.passBack()">
-              Save
-            </button>
-          </span>
-        </div>
-        <div class="col-md-3 p-1">
-          <span>
-            <button type="button" class="btn dl-btn-light btn-block" (click)="activeModal.close('Close click')">
-              Cancel
-            </button>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.spec.ts
deleted file mode 100644
index 44c6e2ce..00000000
--- a/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.spec.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-
-/**
- *
- * @author Chunmeng Guo
- *
- */
-
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ModalToolsComponent } from './modal-tools.component';
-
-describe('ModalToolsComponent', () => {
-  let component: ModalToolsComponent;
-  let fixture: ComponentFixture<ModalToolsComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ModalToolsComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ModalToolsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.ts b/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.ts
deleted file mode 100644
index 87071e6b..00000000
--- a/components/datalake-handler/admin/src/src/app/views/tools/modal-tools/modal-tools.component.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-
-/**
- *
- * @author Chunmeng Guo
- *
- */
-
-import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
-import {Db} from "src/app/core/models/db.model";
-import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";
-import {AdminService} from "src/app/core/services/admin.service";
-import {NgxSpinnerService} from "ngx-spinner";
-
-@Component({
-  selector: 'app-modal-tools',
-  templateUrl: './modal-tools.component.html',
-  styleUrls: ['./modal-tools.component.css']
-})
-export class ModalToolsComponent implements OnInit {
-
-  @Output() passEntry: EventEmitter<any> = new EventEmitter();
-  @Input() editTool: Db;
-  @Input() tool: Db;
-  @Input() toolList_length;
-  toolInput: Db;
-  @ViewChild("d_dbTypeId") d_dbTypeId: ElementRef;
-  dbTypeIdList: Array<string> = [];
-  defaultDbType: string;
-  toolInputTitle = "";
-  data: string;
-  constructor(
-    public activeModal: NgbActiveModal,
-    public adminService: AdminService,
-    private spinner: NgxSpinnerService
-  ) { }
-
-  ngOnInit() {
-    if (this.editTool == null) {
-      this.toolInput = new Db();
-      const feed = {
-        id: null,
-        name: this.tool.name,
-        enabled: this.tool.enabled,
-        host: this.tool.host,
-        port: this.tool.port,
-        database: this.tool.database,
-        encrypt: this.tool.encrypt,
-        login: this.tool.login,
-        pass: this.tool.pass,
-        dbTypeId: this.tool.dbTypeId
-      }
-      this.toolInput = feed;
-      this.toolInputTitle = this.data === "Kibana" ? "New Kibana" : "New Superset";
-      this.dbTypeIdList = this.data === "Kibana" ? ["KIBANA"] : ["SUPERSET"];
-      console.log("create db");
-
-    } else {
-      this.toolInput = this.editTool;
-      this.toolInputTitle = "Edit" + "-" + this.editTool.dbTypeId + "-" + this.editTool.name;
-      this.defaultDbType = this.editTool.dbTypeId;
-      this.dbTypeIdList = [this.editTool.dbTypeId];
-      console.log("edit db");
-    }
-  }
-
-  passBack() {
-    this.spinner.show();
-    if (this.toolInput.name == '' || this.toolInput.name == undefined) {
-      return false;
-    }
-    this.editTool = this.toolInput;
-    this.editTool.dbTypeId = this.d_dbTypeId.nativeElement.value;
-    this.editTool.encrypt = false;
-    console.log(this.editTool, "editTool");
-    this.passEntry.emit(this.editTool);
-    setTimeout(() => {
-      this.spinner.hide();
-    }, 500);
-  }
-
-}
diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.css b/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.css
deleted file mode 100644
index b55b3001..00000000
--- a/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.css
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-
-.nav-pills .nav-link.active,
-.nav-pills .nav-link:hover {
-  color: #ffffff;
-  background-color: #5DBEBB;
-}
-
-.nav-link {
-  font-family: "Open Sans", sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  color: #313449;
-  text-align: left;
-  border-radius: 0px;
-}
-
-.nav-pills .show>.nav-link {
-  background-color: #FFFFFF;
-}
diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.html b/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.html
deleted file mode 100644
index 2169325f..00000000
--- a/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.html
+++ /dev/null
@@ -1,63 +0,0 @@
-<!--
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
--->
-
-<div class="p-0">
-  <div class="modal-header pb-0 border-0">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-md-12">
-          <label class="dl-h3">{{ 'NEW_TOOL' | translate }}</label>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-md-12">
-          <hr/>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="modal-body p-0">
-    <div class="container-fluid">
-      <div class="tab-content mb-auto" id="v-pills-tabContent">
-        <!-- All -->
-        <div class="tab-pane fade show active" id="v-pills-all" role="tabpanel" aria-labelledby="v-pills-all-tab">
-          <div class="nav flex-column nav-pills" id="menu-tab2" role="tablist" aria-orientation="vertical">
-            <a class="nav-link" (click)="this.clickItem('Kibana')" data-toggle="pill" role="tab"
-               aria-selected="true">Kibana</a>
-            <a class="nav-link" (click)="this.clickItem('Superset')" data-toggle="pill" role="tab"
-               aria-selected="true">Superset</a>
-          </div>
-        </div>
-      </div>
-      <div class="d-flex mt-auto justify-content-end p-3">
-        <div class="p-1 col-sm-3">
-            <span>
-              <button type="button" class="btn dl-btn-dark btn-block" (click)="this.passBack()">
-                Next
-              </button>
-            </span>
-        </div>
-        <div class="p-1 col-sm-3">
-            <span>
-              <button type="button" class="btn dl-btn-light btn-block" (click)="activeModal.close('Close click')">
-                Cancel
-              </button>
-            </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.spec.ts
deleted file mode 100644
index cabc951e..00000000
--- a/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.spec.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-
-/**
- *
- * @author Chunmeng Guo
- *
- */
-
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ToolAddModalComponent } from './tool-add-modal.component';
-
-describe('ToolAddModalComponent', () => {
-  let component: ToolAddModalComponent;
-  let fixture: ComponentFixture<ToolAddModalComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ToolAddModalComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ToolAddModalComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.ts
deleted file mode 100644
index 25087d80..00000000
--- a/components/datalake-handler/admin/src/src/app/views/tools/tool-add-modal/tool-add-modal.component.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-
-/**
- *
- * @author Chunmeng Guo
- *
- */
-
-import {Component, EventEmitter, OnInit, Output} from '@angular/core';
-import {Db} from "src/app/core/models/db.model";
-import {NgbActiveModal, NgbModal} from "@ng-bootstrap/ng-bootstrap";
-import {NgxSpinnerService} from "ngx-spinner";
-import {ToastrNotificationService} from "src/app/shared/components/toastr-notification/toastr-notification.service";
-import {RestApiService} from "src/app/core/services/rest-api.service";
-import {ModalToolsComponent} from "src/app/views/tools/modal-tools/modal-tools.component";
-
-@Component({
-  selector: 'app-tool-add-modal',
-  templateUrl: './tool-add-modal.component.html',
-  styleUrls: ['./tool-add-modal.component.css']
-})
-export class ToolAddModalComponent implements OnInit {
-
-  @Output() passEntry: EventEmitter<any> = new EventEmitter();
-  seletedItem: string = "";
-  toolList: any = [];
-  loading: Boolean = true;
-  toolNew: Db;
-  tool_NewBody: Db;
-  constructor(
-    public activeModal: NgbActiveModal,
-    private spinner: NgxSpinnerService,
-    private notificationService: ToastrNotificationService,
-    private modalService: NgbModal,
-    private dbApiService: RestApiService
-  ) { }
-
-  ngOnInit() {
-  }
-
-  clickItem(name: string) {
-    this.seletedItem = name;
-  }
-
-  passBack() {
-    console.log(this.seletedItem, "next");
-    this.openNewModal(this.seletedItem);
-  }
-
-  newTool(modalRef) {
-    this.toolNew = new Db();
-    this.tool_NewBody = new Db();
-    modalRef.componentInstance.tool = this.tool_NewBody;
-    modalRef.componentInstance.toolList_length = this.toolList.length;
-    modalRef.componentInstance.passEntry.subscribe(receivedEntry => {
-      this.tool_NewBody = receivedEntry;
-      this.dbApiService
-        .createDb(this.tool_NewBody)
-        .subscribe(
-          res => {
-            this.spinner.hide();
-            if (res.statusCode == 200) {
-              this.toolNew = res.returnBody;
-              this.toolList.push(this.toolNew);
-              this.toolList = [...this.toolList];
-              this.notificationService.success("SUCCESSFULLY_CREARED");
-            } else {
-              this.notificationService.error("FAILED_CREARED");
-            }
-            modalRef.close();
-          },
-          err => {
-            this.spinner.hide();
-            this.notificationService.error(err);
-            modalRef.close();
-          }
-        );
-    });
-  }
-
-  openNewModal(name: string) {
-    let modalRef;
-
-    switch (name) {
-      case "Kibana": {
-        modalRef = this.modalService.open(ModalToolsComponent, {
-          size: "lg",
-          centered: true
-        });
-        modalRef.componentInstance.data = name;
-        this.newTool(modalRef);
-        break;
-      }
-      case "Superset": {
-        modalRef = this.modalService.open(ModalToolsComponent, {
-          size: "lg",
-          centered: true
-        });
-        modalRef.componentInstance.data = name;
-        this.newTool(modalRef);
-        break;
-      }
-      default: {
-        break;
-      }
-    }
-  }
-
-}
diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/new-topic-model/new-topic-model.component.css b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/new-topic-model/new-topic-model.component.css
deleted file mode 100644
index 424c839b..00000000
--- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/new-topic-model/new-topic-model.component.css
+++ /dev/null
@@ -1,15 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/new-topic-model/new-topic-model.component.html b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/new-topic-model/new-topic-model.component.html
deleted file mode 100644
index c45b8fdb..00000000
--- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/new-topic-model/new-topic-model.component.html
+++ /dev/null
@@ -1,229 +0,0 @@
-<!--
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
--->
-
-<div class="p-1">
-  <div class="modal-header pb-0 border-0 border-bottom">
-
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-md-12">
-          <label class="dl-h3">{{ "NEW_TOPIC" | translate}}</label>
-        </div>
-      </div>
-
-      <!--<div class="row">-->
-        <!--<div class="col-md-12">-->
-          <!--<hr>-->
-        <!--</div>-->
-
-        <!--<div *ngIf="!newTopic.type" class="col-md-12">-->
-          <!--<div class="dl-notice">-->
-            <!--{{ "TOPIC_DEFAULT_CONF_NOTICE" | translate}}-->
-          <!--</div>-->
-        <!--</div>-->
-
-      <!--</div>-->
-    </div>
-
-
-  </div>
-  <div class="modal-body border-0">
-    <div class="container-fluid">
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-4"><label class="dl-emphasis1">{{ 'STATUS' | translate }}</label></div>
-
-          <div class="col-md-8">
-            <label class="dl-switch">
-              <input #t_enable id="switch" type="checkbox" [(ngModel)]="TopicInput.enabled" />
-              <span class="dl-slider round"></span>
-            </label>
-          </div>
-        </div>
-      </div>
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-4">
-            <label class="dl-emphasis1" for="inputUserName">{{ 'NAME' | translate }}</label>
-          </div>
-          <div class="col-md-8">
-            <input #t_topicname [value]="TopicInput.name" class="form-control dl-input-text" id="inputTopicName" type="text"
-                   placeholder="Topic name" />
-          </div>
-        </div>
-      </div>
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-4">
-            <label class="dl-emphasis1" for="inputUserName">{{ 'AUTHENTICATION' | translate }}</label>
-          </div>
-          <div class="col-md-4">
-            <input #t_login [value]="TopicInput.login" class="form-control dl-input-text" id="inputUserName" type="text"
-                   placeholder="Username" />
-          </div>
-          <div class="col-md-4">
-            <input #t_password [value]="TopicInput.password" class="form-control dl-input-text" id="inputPass"
-                   type="password" placeholder="Password" />
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-4">
-            <label class="dl-emphasis1">{{ 'SINK' | translate }}</label>
-          </div>
-          <div class="col-md-8">
-            <div class="row d-flex flex-wrap">
-              <div *ngFor="let db of dbs" class="col-md-6 pb-1">
-                <div class="input-group">
-                  <div class="input-group-prepend">
-                    <label class="input-group-text dl-input-chk-label">
-                      <input id="chk_{{ db }}" type="checkbox" [checked]="TopicInput.sinkdbs.includes(db)"
-                             (change)="this.updateSelectedDB($event, db)" />
-                      <span class="dl-input-checkmark"></span>
-                    </label>
-                  </div>
-                  <label class="form-control dl-input-chk" for="chk_{{ db }}">
-                    {{ db }}
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-4">
-            <label class="dl-emphasis1">{{ 'DATA_FORMAT' | translate }}</label>
-          </div>
-          <div class="col-md-4">
-            <select #t_dataFormat class="custom-select dl-input-text" id="selDataFormat">
-              <option *ngFor="let item of dataFormats" [selected]="item == dataFormats[0]">
-                {{ item }}</option>
-            </select>
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-4">
-            <label class="dl-emphasis1">{{ 'TTL' | translate }} (days)</label>
-          </div>
-          <div class="col-md-4">
-            <input #t_ttl [value]="TopicInput.ttl" class="form-control dl-input-text" id="inputTtl" type="text"
-                   placeholder="3650" (input)="this.adminService.onKeyPressNumber($event)" />
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-4">
-            <label class="dl-emphasis1">{{ 'SAVE_RAW_DATA' | translate }}</label>
-          </div>
-          <div class="col-md-4">
-            <div class="input-group">
-              <div class="input-group-prepend">
-                <label class="input-group-text dl-input-chk-label">
-                  <input #t_saveRaw id="chkSaveRaw" [(ngModel)]="TopicInput.saveRaw" type="checkbox" />
-                  <span class="dl-input-checkmark"></span>
-                </label>
-              </div>
-              <label class="form-control dl-input-chk" for="chkSaveRaw">
-                Save
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-4">
-            <label class="dl-emphasis1">{{ 'CORRELATE_CLEARED_MESSAGE' | translate }}</label>
-          </div>
-          <div class="col-md-4">
-            <div class="input-group">
-              <div class="input-group-prepend">
-                <label class="input-group-text dl-input-chk-label">
-                  <input #t_msg id="chkMsg" [(ngModel)]="TopicInput.correlateClearedMessage" type="checkbox" />
-                  <span class="dl-input-checkmark"></span>
-                </label>
-              </div>
-              <label class="form-control dl-input-chk" for="chkMsg">
-                Correlate
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-4">
-            <label class="dl-emphasis1">{{ 'ID_EXTRACTION' | translate }}</label>
-          </div>
-          <div class="col-md-8">
-            <div class="d-flex row align-items-center" *ngFor="let field of idExFields; let i = index">
-              <div class="col-md-8 order-1">
-                <input [(ngModel)]="field.item" class="form-control dl-input-text" placeholder="/event-header/id"
-                       type="text" [value]="field.item" />
-              </div>
-              <div class="order-2">
-                <button type="button" class="btn dl-icon-enable p-2" (click)="addIdField(i)">
-                  <i class="fa fa-plus fa-xs" aria-hidden="true"></i>
-                </button>
-              </div>
-              <div class="order-3">
-                <button type="button" class="btn dl-icon-enable p-2" (click)="deleteIdField(i)">
-                  <i class="fa fa-trash fa-xs" aria-hidden="true"></i>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-    </div>
-  </div>
-
-  <div class="modal-footer border-0 pt-0 pb-2">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-md-6 p-0"></div>
-        <div class="col-md-3 p-1">
-          <span>
-            <button type="button" class="btn dl-btn-dark btn-block" (click)="passBack()">
-              Save
-            </button>
-          </span>
-        </div>
-        <div class="col-md-3 p-1">
-          <span>
-            <button type="button" class="btn dl-btn-light btn-block" (click)="activeModal.close('Close click')">
-              Cancel
-            </button>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-
-</div>
diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/new-topic-model/new-topic-model.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/new-topic-model/new-topic-model.component.spec.ts
deleted file mode 100644
index 536f3a9e..00000000
--- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/new-topic-model/new-topic-model.component.spec.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { NewTopicModelComponent } from './new-topic-model.component';
-
-describe('NewTopicModelComponent', () => {
-  let component: NewTopicModelComponent;
-  let fixture: ComponentFixture<NewTopicModelComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ NewTopicModelComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(NewTopicModelComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/new-topic-model/new-topic-model.component.ts b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/new-topic-model/new-topic-model.component.ts
deleted file mode 100644
index b1d782dc..00000000
--- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/new-topic-model/new-topic-model.component.ts
+++ /dev/null
@@ -1,157 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-import {
-  Component,
-  OnInit,
-  Input,
-  Output,
-  EventEmitter,
-  ViewChild,
-  ElementRef
-} from "@angular/core";
-import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
-import { RestApiService } from "src/app/core/services/rest-api.service";
-import { AdminService } from "src/app/core/services/admin.service";
-import { Topic } from "src/app/core/models/topic.model";
-
-@Component({
-  selector: "app-new-topic-model",
-  templateUrl: "./new-topic-model.component.html",
-  styleUrls: ["./new-topic-model.component.css"]
-})
-export class NewTopicModelComponent implements OnInit {
-  @Input() newTopic: Topic;
-  @Output() passEntry: EventEmitter<any> = new EventEmitter();
-  TopicInput: Topic;
-  // page elements
-  dbs: any = [];
-  dataFormats: Array<string> = ["JSON", "XML"];
-  tempSeletedDbs: any = [];
-  idExFields: Array<any> = [];
-  idExNewField: any = {};
-  @ViewChild("t_topicname") t_topicname: ElementRef;
-  @ViewChild("t_login") t_login: ElementRef;
-  @ViewChild("t_password") t_password: ElementRef;
-  @ViewChild("t_dataFormat") t_dataFormat: ElementRef;
-  @ViewChild("t_ttl") t_ttl: ElementRef;
-
-  constructor(
-    public activeModal: NgbActiveModal,
-    public adminService: AdminService,
-    private restApiService: RestApiService
-  ) {
-    this.getDbs();
-  }
-
-  ngOnInit() {
-    // this.newTopic = {
-    //   name: "",
-    //   login: "",
-    //   password: "",
-    //   sinkdbs: [],
-    //   enabledSinkdbs: [],
-    //   enabled: false,
-    //   saveRaw: false,
-    //   dataFormat: this.dataFormats[0],
-    //   ttl: null,
-    //   correlateClearedMessage: false,
-    //   messageIdPath: null,
-    //   type: null
-    // };
-    // this.TopicInput = new Topic();
-    // const feeds = {
-    //   name: this.newTopic.name,
-    //   login: this.newTopic.login,
-    //   password: this.newTopic.password,
-    //   sinkdbs: this.newTopic.sinkdbs,
-    //   enabledSinkdbs: this.newTopic.sinkdbs,
-    //   enabled: this.newTopic.enabled,
-    //   saveRaw: this.newTopic.saveRaw,
-    //   dataFormat: this.newTopic.dataFormat,
-    //   ttl: this.newTopic.ttl,
-    //   correlateClearedMessage: this.newTopic.correlateClearedMessage,
-    //   messageIdPath: this.newTopic.messageIdPath,
-    //   type: null
-    // };
-    // this.TopicInput = feeds;
-    // this.idExFields = [];
-    // if (this.TopicInput.messageIdPath != null) {
-    //   var feed = this.TopicInput.messageIdPath.split(",");
-    //   for (var i = 0; i < feed.length; i++) {
-    //     var data = { item: feed[i] };
-    //     this.idExFields.push(data);
-    //   }
-    // } else {
-    //   this.idExFields.push([]);
-    // }
-  }
-
-  getDbs() {
-    this.dbs = [];
-    this.restApiService.getDbList().subscribe((data: {}) => {
-      this.dbs = data;
-    });
-  }
-
-  updateSelectedDB(event: any, name: string) {
-    if (event.target.checked) {
-      if (!this.tempSeletedDbs.find(db => db === name)) {
-        this.tempSeletedDbs.push(name);
-      }
-    } else {
-      const index = this.tempSeletedDbs.indexOf(name, 0);
-      if (index > -1) {
-        this.tempSeletedDbs.splice(index, 1);
-      }
-    }
-  }
-
-  addIdField() {
-    this.idExFields.push(this.idExNewField);
-    this.idExNewField = {};
-  }
-
-  deleteIdField(index: number) {
-    if (this.idExFields.length > 1) {
-      this.idExFields.splice(index, 1);
-    }
-  }
-
-  passBack() {
-    this.newTopic = this.TopicInput;
-    this.newTopic.name = this.t_topicname.nativeElement.value;
-    this.newTopic.login = this.t_login.nativeElement.value;
-    this.newTopic.password = this.t_password.nativeElement.value;
-    this.newTopic.sinkdbs = this.tempSeletedDbs;
-    this.newTopic.dataFormat = this.t_dataFormat.nativeElement.value;
-    this.newTopic.ttl = this.t_ttl.nativeElement.value;
-    this.newTopic.messageIdPath = "";
-    for (var i = 0; i < this.idExFields.length; i++) {
-      let item = "/" + this.idExFields[i].item;
-      if (i == 0) {
-        this.newTopic.messageIdPath = item;
-      } else {
-        this.newTopic.messageIdPath = this.newTopic.messageIdPath + "," + item;
-      }
-    }
-    // Reset to default
-    if (this.newTopic.sinkdbs.length == 0) {
-      return false;
-    }
-    console.log(this.newTopic);
-    this.passEntry.emit(this.newTopic);
-  }
-}
diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-config-modal/topic-config-modal.component.css b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-config-modal/topic-config-modal.component.css
deleted file mode 100644
index e69de29b..00000000
--- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-config-modal/topic-config-modal.component.css
+++ /dev/null
diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-config-modal/topic-config-modal.component.html b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-config-modal/topic-config-modal.component.html
deleted file mode 100644
index bfa3f572..00000000
--- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-config-modal/topic-config-modal.component.html
+++ /dev/null
@@ -1,164 +0,0 @@
-<!--
-============LICENSE_START=======================================================
-ONAP : DataLake
-================================================================================
-Copyright 2019 QCT
-=================================================================================
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-     http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-============LICENSE_END=========================================================
--->
-
-<div class="p-1">
-  <div class="modal-header pb-0 border-0">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-md-12">
-          <label class="dl-h3">{{ "DEFAULT_CONFIGURATIONS" | translate }}</label>
-        </div>
-      </div>
-
-      <div class="row">
-        <div class="col-md-12">
-          <hr>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="modal-body border-0">
-    <div class="container-fluid">
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-4"><label class="dl-emphasis1">{{ 'STATUS' | translate }}</label></div>
-
-          <div class="col-md-8">
-            <label class="dl-switch">
-              <input id="switch" type="checkbox" [(ngModel)]="tempEnabled" />
-              <span class="dl-slider round"></span>
-            </label>
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-12">
-            <label class="dl-emphasis1" for="inputUserName">{{ 'AUTHENTICATION' | translate }}</label>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-md-6">
-            <input #t_login [value]="topic.login" class="form-control dl-input-text" id="inputUserName" type="text"
-              placeholder="Username" />
-          </div>
-          <div class="col-md-6">
-            <input #t_password [value]="topic.password" class="form-control dl-input-text" id="inputPass"
-              type="password" placeholder="Password" />
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-6">
-            <label class="dl-emphasis1">{{ 'DATA_FORMAT' | translate }}</label>
-          </div>
-          <div class="col-md-6">
-            <label class="dl-emphasis1">{{ 'TTL' | translate }} (days)</label>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-md-6">
-            <select #t_dataFormat class="custom-select dl-input-text" id="selDataFormat">
-              <option *ngFor="let item of dataFormats" [selected]="item == topic.dataFormat">
-                {{ item }}</option>
-            </select>
-          </div>
-          <div class="col-md-6">
-            <input #t_ttl [value]="topic.ttl" class="form-control dl-input-text" id="inputTtl" type="text"
-              placeholder="3650" (input)="this.adminService.onKeyPressNumber($event)" />
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-12"><label class="dl-emphasis1">{{ 'SINK' | translate }}</label></div>
-        </div>
-        <div class="row d-flex flex-wrap">
-          <div *ngFor="let db of dbs" class="col-md-6 pb-1">
-            <div class="input-group">
-              <div class="input-group-prepend">
-                <label class="input-group-text dl-input-chk-label">
-                  <input id="chk_{{ db }}" type="checkbox" [checked]="this.topic.sinkdbs.includes(db)"
-                    (click)="this.updateSelectedDB($event, db)" />
-                  <span class="dl-input-checkmark"></span>
-                </label>
-              </div>
-              <label class="form-control dl-input-chk" for="chk_{{ db }}">
-                {{ db }}
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-12">
-            <label class="dl-emphasis1">{{ 'SAVE_RAW_DATA' | translate }}</label>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-md-6">
-            <div class="input-group">
-              <div class="input-group-prepend">
-                <label class="input-group-text dl-input-chk-label">
-                  <input id="chkSaveRaw" [(ngModel)]="tempSaveRaw" type="checkbox" />
-                  <span class="dl-input-checkmark"></span>
-                </label>
-              </div>
-              <label class="form-control dl-input-chk" for="chkSaveRaw">
-                Save
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="modal-footer border-0 pt-0 pb-2">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-md-6 p-0">
-
-        </div>
-        <div class="col-md-3 p-1">
-          <span>
-            <button type="button" class="btn dl-btn-dark btn-block" (click)="this.passBack()">
-              Save
-            </button>
-          </span>
-        </div>
-        <div class="col-md-3 p-1">
-          <span>
-            <button type="button" class="btn dl-btn-light btn-block" (click)="activeModal.close('Close click')">
-              Cancel
-            </button>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-
-</div>
diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-config-modal/topic-config-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-config-modal/topic-config-modal.component.spec.ts
deleted file mode 100644
index 9c3ec518..00000000
--- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-config-modal/topic-config-modal.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { TopicConfigModalComponent } from './topic-config-modal.component';
-
-describe('TopicConfigModalComponent', () => {
-  let component: TopicConfigModalComponent;
-  let fixture: ComponentFixture<TopicConfigModalComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ TopicConfigModalComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(TopicConfigModalComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-config-modal/topic-config-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-config-modal/topic-config-modal.component.ts
deleted file mode 100644
index b67dff19..00000000
--- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-config-modal/topic-config-modal.component.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-/*
- * ============LICENSE_START=======================================================
- * ONAP : DataLake
- * ================================================================================
- * Copyright 2019 QCT
- *=================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-/**
- *
- * @author Ekko Chang
- *
- */
-
-import {
-  Component,
-  OnInit,
-  Input,
-  Output,
-  EventEmitter,
-  ViewChild,
-  ElementRef
-} from "@angular/core";
-import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
-import { RestApiService } from "src/app/core/services/rest-api.service";
-import { AdminService } from "src/app/core/services/admin.service";
-import { Topic } from "src/app/core/models/topic.model";
-
-@Component({
-  selector: "app-topic-config-modal",
-  templateUrl: "./topic-config-modal.component.html",
-  styleUrls: ["./topic-config-modal.component.css"]
-})
-export class TopicConfigModalComponent implements OnInit {
-  @Input() topic: Topic;
-  @Input() title: string;
-  @Output() passEntry: EventEmitter<any> = new EventEmitter();
-
-  // page elements
-  dbs: any = [];
-  dataFormats: Array<string> = ["JSON", "XML"];
-  tempSeletedDbs: any = [];
-  tempEnabled: boolean;
-  tempSaveRaw: boolean;
-  @ViewChild("t_login") t_login: ElementRef;
-  @ViewChild("t_password") t_password: ElementRef;
-  @ViewChild("t_dataFormat") t_dataFormat: ElementRef;
-  @ViewChild("t_ttl") t_ttl: ElementRef;
-
-  constructor(
-    public activeModal: NgbActiveModal,
-    public adminService: AdminService,
-    private restApiService: RestApiService
-  ) {
-    this.getDbs();
-  }
-
-  ngOnInit() {
-    // for display
-    this.topic.sinkdbs.forEach(item => {
-      this.tempSeletedDbs.push(item);
-    });
-    this.tempEnabled = this.topic.enabled;
-    this.tempSaveRaw = this.topic.saveRaw;
-  }
-
-  getDbs() {
-    this.dbs = [];
-    this.restApiService.getDbList().subscribe((data: {}) => {
-      this.dbs = data;
-    });
-  }
-
-  updateSelectedDB(event: any, name: string) {
-    if (event.target.checked) {
-      if (!this.tempSeletedDbs.find(db => db === name)) {
-        this.tempSeletedDbs.push(name);
-      }
-    } else {
-      const index = this.tempSeletedDbs.indexOf(name, 0);
-      if (index > -1) {
-        this.tempSeletedDbs.splice(index, 1);
-      }
-    }
-  }
-
-  passBack() {
-    this.topic.enabled = this.tempEnabled;
-    this.topic.login = this.t_login.nativeElement.value;
-    this.topic.password = this.t_password.nativeElement.value;
-    this.topic.sinkdbs = this.tempSeletedDbs;
-    this.topic.dataFormat = this.t_dataFormat.nativeElement.value;
-    this.topic.ttl = this.t_ttl.nativeElement.value;
-    this.topic.saveRaw = this.tempSaveRaw;
-
-    this.passEntry.emit(this.topic);
-  }
-}
diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-detail-modal/topic-detail-modal.component.css b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-detail-modal/topic-detail-modal.component.css
deleted file mode 100644
index e69de29b..00000000
--- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-detail-modal/topic-detail-modal.component.css
+++ /dev/null
diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-detail-modal/topic-detail-modal.component.html b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-detail-modal/topic-detail-modal.component.html
deleted file mode 100644
index fa07903b..00000000
--- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-detail-modal/topic-detail-modal.component.html
+++ /dev/null
@@ -1,223 +0,0 @@
-<!--
-============LICENSE_START=======================================================
-ONAP : DataLake
-================================================================================
-Copyright 2019 QCT
-=================================================================================
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-     http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-============LICENSE_END=========================================================
--->
-
-<div class="p-1">
-  <div class="modal-header pb-0 border-0 border-bottom">
-
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-md-12">
-          <label class="dl-h3">{{ topic.name }}</label>
-        </div>
-      </div>
-
-      <div class="row">
-        <div class="col-md-12">
-          <hr>
-        </div>
-
-        <div *ngIf="!topic.type" class="col-md-12">
-          <div class="dl-notice">
-            {{ "TOPIC_DEFAULT_CONF_NOTICE" | translate}}
-          </div>
-        </div>
-
-      </div>
-    </div>
-
-
-  </div>
-  <div class="modal-body border-0">
-    <div class="container-fluid">
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-4"><label class="dl-emphasis1">{{ 'STATUS' | translate }}</label></div>
-
-          <div class="col-md-8">
-            <label class="dl-switch">
-              <input #t_enable id="switch" type="checkbox" [(ngModel)]="tempEnabled" />
-              <span class="dl-slider round"></span>
-            </label>
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-4">
-            <label class="dl-emphasis1" for="inputUserName">{{ 'AUTHENTICATION' | translate }}</label>
-          </div>
-          <div class="col-md-4">
-            <input #t_login [value]="topic.login" class="form-control dl-input-text" id="inputUserName" type="text"
-              placeholder="Username" />
-          </div>
-          <div class="col-md-4">
-            <input #t_password [value]="topic.password" class="form-control dl-input-text" id="inputPass"
-              type="password" placeholder="Password" />
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-4">
-            <label class="dl-emphasis1">{{ 'SINK' | translate }}</label>
-          </div>
-          <div class="col-md-8">
-            <div class="row d-flex flex-wrap">
-              <div *ngFor="let db of dbs" class="col-md-6 pb-1">
-                <div class="input-group">
-                  <div class="input-group-prepend">
-                    <label class="input-group-text dl-input-chk-label">
-                      <input id="chk_{{ db }}" type="checkbox" [checked]="this.topic.sinkdbs.includes(db)"
-                        (change)="this.updateSelectedDB($event, db)" />
-                      <span class="dl-input-checkmark"></span>
-                    </label>
-                  </div>
-                  <label class="form-control dl-input-chk" for="chk_{{ db }}">
-                    {{ db }}
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-4">
-            <label class="dl-emphasis1">{{ 'DATA_FORMAT' | translate }}</label>
-          </div>
-          <div class="col-md-4">
-            <select #t_dataFormat class="custom-select dl-input-text" id="selDataFormat">
-              <option *ngFor="let item of dataFormats" [selected]="item == topic.dataFormat">
-                {{ item }}</option>
-            </select>
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-4">
-            <label class="dl-emphasis1">{{ 'TTL' | translate }} (days)</label>
-          </div>
-          <div class="col-md-4">
-            <input #t_ttl [value]="topic.ttl" class="form-control dl-input-text" id="inputTtl" type="text"
-              placeholder="3650" (input)="this.adminService.onKeyPressNumber($event)" />
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-4">
-            <label class="dl-emphasis1">{{ 'SAVE_RAW_DATA' | translate }}</label>
-          </div>
-          <div class="col-md-4">
-            <div class="input-group">
-              <div class="input-group-prepend">
-                <label class="input-group-text dl-input-chk-label">
-                  <input #t_saveRaw id="chkSaveRaw" [(ngModel)]="tempSaveRaw" type="checkbox" />
-                  <span class="dl-input-checkmark"></span>
-                </label>
-              </div>
-              <label class="form-control dl-input-chk" for="chkSaveRaw">
-                Save
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-4">
-            <label class="dl-emphasis1">{{ 'CORRELATE_CLEARED_MESSAGE' | translate }}</label>
-          </div>
-          <div class="col-md-4">
-            <div class="input-group">
-              <div class="input-group-prepend">
-                <label class="input-group-text dl-input-chk-label">
-                  <input #t_msg id="chkMsg" [(ngModel)]="tempMsg" type="checkbox" />
-                  <span class="dl-input-checkmark"></span>
-                </label>
-              </div>
-              <label class="form-control dl-input-chk" for="chkMsg">
-                Correlate
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <div class="row">
-          <div class="col-md-4">
-            <label class="dl-emphasis1">{{ 'ID_EXTRACTION' | translate }}</label>
-          </div>
-          <div class="col-md-8">
-            <div class="d-flex row align-items-center" *ngFor="let field of idExFields; let i = index">
-              <div class="col-md-8 order-1">
-                <input [(ngModel)]="field.item" class="form-control dl-input-text" placeholder="/event-header/id"
-                  type="text" [value]="field.item" />
-              </div>
-              <div class="order-2">
-                <button type="button" class="btn dl-icon-enable p-2" (click)="addIdField(i)">
-                  <i class="fa fa-plus fa-xs" aria-hidden="true"></i>
-                </button>
-              </div>
-              <div class="order-3">
-                <button type="button" class="btn dl-icon-enable p-2" (click)="deleteIdField(i)">
-                  <i class="fa fa-trash fa-xs" aria-hidden="true"></i>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-    </div>
-  </div>
-
-  <div class="modal-footer border-0 pt-0 pb-2">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-md-6 p-0"></div>
-        <div class="col-md-3 p-1">
-          <span>
-            <button type="button" class="btn dl-btn-dark btn-block" (click)="passBack()">
-              Save
-            </button>
-          </span>
-        </div>
-        <div class="col-md-3 p-1">
-          <span>
-            <button type="button" class="btn dl-btn-light btn-block" (click)="activeModal.close('Close click')">
-              Cancel
-            </button>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-
-</div>
diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-detail-modal/topic-detail-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-detail-modal/topic-detail-modal.component.spec.ts
deleted file mode 100644
index ee6fcad3..00000000
--- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-detail-modal/topic-detail-modal.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { TopicDetailModalComponent } from './topic-detail-modal.component';
-
-describe('TopicDetailModalComponent', () => {
-  let component: TopicDetailModalComponent;
-  let fixture: ComponentFixture<TopicDetailModalComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ TopicDetailModalComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(TopicDetailModalComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-detail-modal/topic-detail-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-detail-modal/topic-detail-modal.component.ts
deleted file mode 100644
index 17d0d036..00000000
--- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-detail-modal/topic-detail-modal.component.ts
+++ /dev/null
@@ -1,152 +0,0 @@
-/*
- * ============LICENSE_START=======================================================
- * ONAP : DataLake
- * ================================================================================
- * Copyright 2019 QCT
- *=================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-/**
- *
- * @author Ekko Chang
- *
- */
-
-import {
-  Component,
-  OnInit,
-  Input,
-  Output,
-  EventEmitter,
-  ViewChild,
-  ElementRef
-} from "@angular/core";
-import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
-import { RestApiService } from "src/app/core/services/rest-api.service";
-import { AdminService } from "src/app/core/services/admin.service";
-import { Topic } from "src/app/core/models/topic.model";
-
-@Component({
-  selector: "app-topic-detail-modal",
-  templateUrl: "./topic-detail-modal.component.html",
-  styleUrls: ["./topic-detail-modal.component.css"]
-})
-export class TopicDetailModalComponent implements OnInit {
-  @Input() topic: Topic;
-  @Output() passEntry: EventEmitter<any> = new EventEmitter();
-
-  // page elements
-  dbs: any = [];
-  dataFormats: Array<string> = ["JSON", "XML"];
-  tempSeletedDbs: any = [];
-  tempEnabled: boolean;
-  tempSaveRaw: boolean;
-  tempMsg: boolean;
-  idExFields: Array<any> = [];
-  idExNewField: any = {};
-  @ViewChild("t_login") t_login: ElementRef;
-  @ViewChild("t_password") t_password: ElementRef;
-  @ViewChild("t_dataFormat") t_dataFormat: ElementRef;
-  @ViewChild("t_ttl") t_ttl: ElementRef;
-
-  constructor(
-    public activeModal: NgbActiveModal,
-    public adminService: AdminService,
-    private restApiService: RestApiService
-  ) {
-    this.getDbs();
-  }
-  ngOnInit() {
-    // for display
-    this.topic.sinkdbs.forEach(item => {
-      this.tempSeletedDbs.push(item);
-    });
-    this.tempEnabled = this.topic.enabled;
-    this.tempSaveRaw = this.topic.saveRaw;
-    this.tempMsg = this.topic.correlateClearedMessage;
-    this.idExFields = [];
-
-    if (this.topic.messageIdPath != null) {
-      var feed = this.topic.messageIdPath.split(",");
-      for (var i = 0; i < feed.length; i++) {
-        var data = { item: feed[i] };
-        this.idExFields.push(data);
-      }
-    } else {
-      this.idExFields.push([]);
-    }
-  }
-
-  getDbs() {
-    this.dbs = [];
-    this.restApiService.getDbList().subscribe((data: {}) => {
-      this.dbs = data;
-    });
-  }
-
-  updateSelectedDB(event: any, name: string) {
-    if (event.target.checked) {
-      if (!this.tempSeletedDbs.find(db => db === name)) {
-        this.tempSeletedDbs.push(name);
-      }
-    } else {
-      const index = this.tempSeletedDbs.indexOf(name, 0);
-      if (index > -1) {
-        this.tempSeletedDbs.splice(index, 1);
-      }
-    }
-  }
-
-  addIdField() {
-    this.idExFields.push(this.idExNewField);
-    this.idExNewField = {};
-  }
-
-  deleteIdField(index: number) {
-    if (this.idExFields.length > 1) {
-      this.idExFields.splice(index, 1);
-    }
-  }
-
-  passBack() {
-    this.topic.enabled = this.tempEnabled;
-    this.topic.login = this.t_login.nativeElement.value;
-    this.topic.password = this.t_password.nativeElement.value;
-
-    this.topic.sinkdbs = this.tempSeletedDbs;
-
-    this.topic.dataFormat = this.t_dataFormat.nativeElement.value;
-    this.topic.ttl = this.t_ttl.nativeElement.value;
-    this.topic.saveRaw = this.tempSaveRaw;
-    this.topic.correlateClearedMessage = this.tempMsg;
-    this.topic.messageIdPath = "";
-    for (var i = 0; i < this.idExFields.length; i++) {
-      if (i == 0) {
-        this.topic.messageIdPath = this.idExFields[i].item;
-      } else {
-        this.topic.messageIdPath =
-          this.topic.messageIdPath + "," + this.idExFields[i].item;
-      }
-    }
-
-    // Reset to default
-    if (this.topic.sinkdbs.length == 0) {
-      this.topic.config = false;
-    } else {
-      this.topic.config = true;
-    }
-    this.passEntry.emit(this.topic);
-  }
-}