Dashboard-list interface front-end development

Change-Id: I7328e0c26e927245ea20f99c7f780669c66e7557
Issue-ID: DCAEGEN2-1599
Signed-off-by: e <xuranyjy@chinamobile.com>

44 files changed, 1866 insertions, 12 deletions

diff --git a/components/datalake-handler/admin/src/src/app/app-routing.module.ts b/components/datalake-handler/admin/src/src/app/app-routing.module.ts
index 37436156..37ed0401 100644
--- a/components/datalake-handler/admin/src/src/app/app-routing.module.ts
+++ b/components/datalake-handler/admin/src/src/app/app-routing.module.ts
@@ -31,13 +31,18 @@ import { FeederComponent } from "./feeder/feeder.component";
 import { TopicsComponent } from "./topics/topics.component";
 import { DatabaseComponent } from "./database/database.component";
 import { AboutComponent } from "./about/about.component";
+import { DashboardSettingComponent } from './dashboard-setting/dashboard-setting.component';
+import { DashboardListComponent } from './dashboard-setting/dashboard-list/dashboard-list.component';
+import { TemplateComponent } from './dashboard-setting/template/template.component';
 
 const routes: Routes = [
   { path: "", redirectTo: "/feeder", pathMatch: "full" },
   { path: "feeder", component: FeederComponent },
   { path: "topics", component: TopicsComponent },
   { path: "database", component: DatabaseComponent },
-  { path: "about", component: AboutComponent }
+  { path: "about", component: AboutComponent },
+  { path: 'dashboard-setting/dashboard-list', component: DashboardListComponent},
+  { path: 'dashboard-setting/template', component: TemplateComponent},
 ];
 
 @NgModule({
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 7249e1dd..a5393d9a 100644
--- a/components/datalake-handler/admin/src/src/app/app.module.ts
+++ b/components/datalake-handler/admin/src/src/app/app.module.ts
@@ -74,6 +74,13 @@ import { AboutComponent } from "./about/about.component";
 
 // Loading spinner
 import { NgxSpinnerModule } from "ngx-spinner";
+import { DashboardSettingComponent } from './dashboard-setting/dashboard-setting.component';
+import { DashboardListComponent } from './dashboard-setting/dashboard-list/dashboard-list.component';
+import { TemplateComponent } from './dashboard-setting/template/template.component';
+import { CreateDashboardComponent } from './dashboard-setting/dashboard-list/create-dashboard/create-dashboard.component';
+import { TemplateListComponent } from './dashboard-setting/template/template-list/template-list.component';
+import { NewTemplateModalComponent } from './dashboard-setting/template/template-list/new-template-modal/new-template-modal.component';
+import { EditTemplateModalComponent } from './dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component';
 
 @NgModule({
   declarations: [
@@ -94,7 +101,15 @@ import { NgxSpinnerModule } from "ngx-spinner";
     TopicConfigModalComponent,
     ToastrNotificationComponent,
     AlertComponent,
-    AboutComponent
+    AboutComponent,
+    DashboardSettingComponent,
+    DashboardListComponent,
+    CreateDashboardComponent,
+    TemplateComponent, 
+    TemplateListComponent,
+    NewTemplateModalComponent,
+    EditTemplateModalComponent,
+
   ],
   imports: [
     BrowserModule,
@@ -122,7 +137,10 @@ import { NgxSpinnerModule } from "ngx-spinner";
     ElasticsearchComponent,
     MongodbComponent,
     TopicDetailModalComponent,
-    TopicConfigModalComponent
+    TopicConfigModalComponent,
+    CreateDashboardComponent,
+ 	NewTemplateModalComponent,
+    EditTemplateModalComponent
   ]
 })
 export class AppModule {}
diff --git a/components/datalake-handler/admin/src/src/app/core/alert/alert.component.html b/components/datalake-handler/admin/src/src/app/core/alert/alert.component.html
index 4819abb0..48d74721 100644
--- a/components/datalake-handler/admin/src/src/app/core/alert/alert.component.html
+++ b/components/datalake-handler/admin/src/src/app/core/alert/alert.component.html
@@ -18,12 +18,12 @@ limitations under the License.
 ============LICENSE_END=========================================================
 -->
 
-<div class="p-1">
+<div class="p-1" [ngClass]="{'alert-delete-model':this.dashboardDeteleModelShow == true}">
   <div class="modal-header border-0 p-2">
 
   </div>
 
-  <div class="modal-body border-0 p-1">
+  <div class="modal-body border-0 p-1 " [ngClass]="{'alert-delete-title':this.dashboardDeteleModelShow == true}">
 
     <div class="container">
 
@@ -41,13 +41,13 @@ limitations under the License.
     </div>
   </div>
 
-  <div class="modal-footer border-0 p-1">
+  <div class="modal-footer border-0 p-1 " [ngClass]="{'alert-delete-content':this.dashboardDeteleModelShow == true}">
     <div class="container align-content-center">
       <div class="row">
         <div class="col-md-6 p-1">
           <span>
             <button type="button" class="btn dl-btn-dark btn-block" (click)="this.passBack()">
-              OK
+              {{"OK" | translate}}
             </button>
           </span>
         </div>
@@ -55,7 +55,7 @@ limitations under the License.
           <span>
             <button type="button" ngbAutofocus class="btn dl-btn-light btn-block"
               (click)="activeModal.close('Close click')">
-              Cancel
+              {{"Cancel" | translate}}
             </button>
           </span>
         </div>
diff --git a/components/datalake-handler/admin/src/src/app/core/alert/alert.component.ts b/components/datalake-handler/admin/src/src/app/core/alert/alert.component.ts
index e4b4699f..6514ae80 100644
--- a/components/datalake-handler/admin/src/src/app/core/alert/alert.component.ts
+++ b/components/datalake-handler/admin/src/src/app/core/alert/alert.component.ts
@@ -35,11 +35,13 @@ import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
 })
 export class AlertComponent {
   @Input() message: string;
+  @Input() dashboardDeteleModelShow;
   @Output() passEntry: EventEmitter<any> = new EventEmitter();
 
   constructor(public activeModal: NgbActiveModal) {}
 
   passBack() {
+    console.log(this.dashboardDeteleModelShow,"dashboardDeteleModelShow");
     this.passEntry.emit(true);
   }
 }
diff --git a/components/datalake-handler/admin/src/src/app/core/models/dashboard.model.ts b/components/datalake-handler/admin/src/src/app/core/models/dashboard.model.ts
new file mode 100644
index 00000000..33998b28
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/core/models/dashboard.model.ts
@@ -0,0 +1,24 @@
+/*
+    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.
+*/
+
+export class Dashboard {
+  name: string;
+  host: string;
+  port: number;
+  login: string;
+  pass: string;
+  enabled: boolean;
+}
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
new file mode 100644
index 00000000..5df69721
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/core/models/template.model.ts
@@ -0,0 +1,51 @@
+/*
+    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.
+*/
+// export class TemplateList {
+//   id:number;
+//   name:string;
+//   submitted:true;
+//   body: string;
+//   note:string;
+//   portalDesignConfig:{
+//     id:number;
+//     name:string;
+//     submitted:true;
+//     body: string;
+//     note:string;
+//     topic: string;
+//     designType: string;
+//   }
+//
+// }
+
+export class Template {
+    id:number;
+    name:string;
+    submitted:true;
+    body: string;
+    note:string;
+    topic: string;
+    designType: string;
+  }
+
+export class newTemplate {
+  name:string;
+  submitted:true;
+  body: string;
+  note:string;
+  topic: string;
+  designType: string;
+}
diff --git a/components/datalake-handler/admin/src/src/app/core/services/dashboard-api.service.spec.ts b/components/datalake-handler/admin/src/src/app/core/services/dashboard-api.service.spec.ts
new file mode 100644
index 00000000..ee5bd913
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/core/services/dashboard-api.service.spec.ts
@@ -0,0 +1,27 @@
+/*
+    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 { TestBed } from '@angular/core/testing';
+
+import { DashboardApiService } from './dashboard-api.service';
+
+describe('DashboardApiService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: DashboardApiService = TestBed.get(DashboardApiService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/components/datalake-handler/admin/src/src/app/core/services/dashboard-api.service.ts b/components/datalake-handler/admin/src/src/app/core/services/dashboard-api.service.ts
new file mode 100644
index 00000000..d20f71ac
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/core/services/dashboard-api.service.ts
@@ -0,0 +1,186 @@
+/*
+    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 {Injectable} from "@angular/core";
+import {HttpClient, HttpHeaders} from "@angular/common/http";
+import {Observable, of} from "rxjs";
+import {map, catchError, tap, retry} from "rxjs/operators";
+import {throwError} from "rxjs";
+
+import {Template,newTemplate} from "src/app/core/models/template.model";
+import { Dashboard } from "src/app/core/models/dashboard.model";
+
+const prefix = "/datalake/v1/";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DashboardApiService {
+
+  constructor(private http: HttpClient) {
+  }
+
+  private extractData(res: Response) {
+    if (res.status < 200 || res.status >= 300) {
+      throw new Error("Bad response status: " + res.status);
+    }
+    let body = res;
+    return body || {};
+  }
+
+  private handleError(error) {
+    let errorMessage = "";
+    if (error.error instanceof ErrorEvent) {
+      // Get client-side error
+      errorMessage = error.error.message;
+    } else {
+      // Get server-side error
+      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
+      console.log(errorMessage);
+    }
+    return throwError(errorMessage);
+  }
+
+  private extractData2(res: Response) {
+    console.log(res,"detele/deploy template");
+    let body = res;
+    return body || {};
+  }
+
+
+  /*
+  Dashboard
+*/
+  getDashboardList(): Observable<any> {
+    let url = prefix + "portals/true"; //onilne
+    return this.http.get(url).pipe(
+      retry(1),
+      map(this.extractData),
+      catchError(this.handleError)
+    );
+  }
+
+  addDashboard(d: Dashboard): Observable<any> {
+    console.log(d,"add dashboard body");
+    let url = prefix + "portals"; //onilne
+    return this.http
+      .put<any>(url, d)
+      .pipe(
+        retry(1),
+        tap(_ => console.log(`add db name=${d.name}`)),
+        catchError(this.handleError)
+      );
+  }
+
+  upadteDashboard(d: Dashboard): Observable<any> {
+    console.log(d,"add dashboard body");
+    let url = prefix + "portals";//onilne
+    return this.http
+      .put(url, d)
+      .pipe(
+        retry(1),
+        tap(_ => this.extractData),
+        catchError(this.handleError)
+      );
+  }
+
+  deleteDashboard(d: Dashboard): Observable<any> {
+    console.log(d,"add dashboard body");
+    let url = prefix + "portals"; //onilne
+    return this.http
+      .put(url,d)
+      .pipe(
+        retry(1),
+        tap(_ => console.log(`deleted db name=${d.name}`)),
+        catchError(this.handleError)
+      );
+  }
+
+  getDashboardName(): Observable<any> {
+    let url = prefix + "portals/getNames/false"; //onilne
+    return this.http.get(url).pipe(
+      retry(1),
+      map(this.extractData),
+      catchError(this.handleError)
+    );
+  }
+
+  /*
+    Template
+  */
+  getTemplateAll(): Observable<any> {
+      return this.http.get(prefix + "portalDesigns/").pipe( //onlin
+      retry(1),
+      map(this.extractData),
+      catchError(this.handleError)
+    );
+  }
+
+  createNewTemplate(t: newTemplate): Observable<any> {
+    console.log(t,"createNewTemplate");
+    return this.http
+    .post(prefix + "portalDesigns", t)
+      .pipe(
+        retry(1),
+        tap(_ => this.extractData),
+        catchError(this.handleError)
+      );
+  }
+
+  updateNewTemplate(t: Template): Observable<any> {
+    let id = t.id;
+    console.log(id,t,"updateNewTemplate");
+    return this.http
+    .put(prefix + "portalDesigns/"+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
+      retry(1),
+      map(this.extractData),
+      catchError(this.handleError)
+    );
+  }
+
+  DeleteTemplate(id): Observable<any> {
+      return this.http.delete(prefix + "portalDesigns/" + id ).pipe( //online
+      retry(1),
+      map(this.extractData2),
+      catchError(this.handleError)
+    );
+  }
+  deployTemplateKibana(id, body): Observable<any> {
+    body.submitted = true;
+    console.log(id,body,'this.deployTemplateKibana()');
+    return this.http.post(prefix+"portalDesigns/" + id, body).pipe(   //online
+      retry(1),
+      map(this.extractData2),
+      catchError(this.handleError)
+    );
+  }
+}
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/create-dashboard/create-dashboard.component.css b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/create-dashboard/create-dashboard.component.css
new file mode 100644
index 00000000..7af4051a
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/create-dashboard/create-dashboard.component.css
@@ -0,0 +1,18 @@
+/*
+    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.
+*/
+input::-webkit-input-placeholder{
+  color:  #A8A9AC;
+}
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/create-dashboard/create-dashboard.component.html b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/create-dashboard/create-dashboard.component.html
new file mode 100644
index 00000000..eb355d19
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/create-dashboard/create-dashboard.component.html
@@ -0,0 +1,115 @@
+<!--
+    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">
+      <div class="row">
+        <div class="col-md-12">
+          <label class="dl-h3" *ngIf="this.tempDb.name==undefined">{{ "NewDashboard" | translate}}</label>
+          <label class="dl-h3" style="letter-spacing: 0" *ngIf="this.tempDb.name!=undefined">{{this.tempDb.name}}&nbsp;&nbsp;|&nbsp;&nbsp;{{tempDbNameTitle}}</label>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-md-12">
+          <hr>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-body border-0 ml-4 mr-4">
+    <div class="container">
+
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-3"><label class="dl-emphasis1" for="inputBucket">{{ "DestinationType" | translate}}</label></div>
+          <div class="col-md-4">
+            <select #t_dataDashboardName  class="custom-select dl-input-text" id="inputBucket" *ngIf="this.tempDb.name ==undefined" >
+              <option *ngFor="let item of nameArr" [selected]="item==this.tempDb.name">
+                {{ item }}</option>
+            </select>
+            <select #t_dataDashboardName  class="custom-select dl-input-text select-disabled"  *ngIf="this.tempDb.name !=undefined" disabled >
+              <option [selected]="this.tempDb.name==this.tempDb.name">
+                {{ this.tempDb.name }}</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-3"><label class="dl-emphasis1" for="inputHost">{{ "HOST" | translate}}</label></div>
+          <div class="col-md-4">
+            <input [(ngModel)]="this.tempDb.host" class="form-control dl-input-text" id="inputHost" type="text"
+                   placeholder="{{ 'InputValue' | translate}}">
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-3"><label class="dl-emphasis1" for="inputPort">{{ "PORT" | translate}}</label></div>
+          <div class="col-md-3">
+            <input [(ngModel)]="this.tempDb.port" class="form-control dl-input-text" id="inputPort" type="text"
+                   placeholder="{{ 'InputValue' | translate}}" (input)="this.adminService.onKeyPressNumber($event)">
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-3"><label class="dl-emphasis1"
+                                       for="inputUserName">{{ "AUTHENTICATION" | translate}}</label></div>
+          <div class="col-sm-4">
+            <input [(ngModel)]="this.tempDb.login" class="form-control dl-input-text" id="inputUserName" type="text"
+                   placeholder="{{ 'Username' | translate}}">
+          </div>
+          <div class="col-sm-4">
+            <input [(ngModel)]="this.tempDb.pass" class="form-control dl-input-text" id="inputPass" type="password"
+                   placeholder=" {{ 'Password' | translate}}">
+          </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" | translate}}
+            </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" | translate}}
+            </button>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/create-dashboard/create-dashboard.component.spec.ts b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/create-dashboard/create-dashboard.component.spec.ts
new file mode 100644
index 00000000..6fa809d5
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/create-dashboard/create-dashboard.component.spec.ts
@@ -0,0 +1,40 @@
+/*
+    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 { CreateDashboardComponent } from './create-dashboard.component';
+
+describe('CreateDashboardComponent', () => {
+  let component: CreateDashboardComponent;
+  let fixture: ComponentFixture<CreateDashboardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CreateDashboardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateDashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/create-dashboard/create-dashboard.component.ts b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/create-dashboard/create-dashboard.component.ts
new file mode 100644
index 00000000..4a865f21
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/create-dashboard/create-dashboard.component.ts
@@ -0,0 +1,77 @@
+/*
+    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, ViewChild, EventEmitter, ElementRef} from '@angular/core';
+import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
+import { Dashboard } from "src/app/core/models/dashboard.model";
+import { AdminService } from "src/app/core/services/admin.service";
+import { RestApiService } from "src/app/core/services/rest-api.service";
+@Component({
+  selector: 'app-create-dashboard',
+  templateUrl: './create-dashboard.component.html',
+  styleUrls: ['./create-dashboard.component.css']
+})
+export class CreateDashboardComponent implements OnInit {
+
+  constructor(
+    public activeModal: NgbActiveModal,
+    public adminService: AdminService,
+    public restApiService: RestApiService,
+  ) {}
+
+  @Output() passEntry: EventEmitter<any> = new EventEmitter();
+  @Input() dashboard: Dashboard;
+  @Input() nameArr;
+  tempDb: Dashboard;
+
+  selectshow = false;
+  tempDbNameTitle = null;
+
+  @ViewChild("t_dataDashboardName") t_dataDashboardName: ElementRef;
+
+  ngOnInit() {
+    // cache for display
+
+    console.log(this.dashboard);
+    this.tempDb = new Dashboard();
+    if(this.dashboard.enabled==undefined){
+      this.dashboard.enabled = true;
+    }
+    const feeds = {
+      name: this.dashboard.name,
+      host: this.dashboard.host,
+      port: this.dashboard.port,
+      login: this.dashboard.login,
+      pass: this.dashboard.pass,
+      enabled: this.dashboard.enabled,
+    };
+    console.log(feeds);
+    this.tempDb = feeds;
+    this.tempDbNameTitle = this.dashboard.host
+  }
+
+
+
+  passBack() {
+    if(this.tempDb.host == '' || this.tempDb.host == undefined){
+      return false;
+    }
+    this.dashboard = this.tempDb;
+    this.dashboard.name = this.t_dataDashboardName.nativeElement.value;
+    console.log(this.dashboard,"this.dashboard output");
+    this.passEntry.emit(this.dashboard);
+  }
+
+}
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/dashboard-list.component.css b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/dashboard-list.component.css
new file mode 100644
index 00000000..5dab0c0c
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/dashboard-list.component.css
@@ -0,0 +1,64 @@
+/*
+    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.
+*/
+.db-block {
+  min-width: 180px;
+  min-height: 180px;
+  padding: 10px;
+}
+.db-panel {
+  background: #FFFFFF;
+  box-shadow: 3px 3px 11px 0 #D2D3D5;
+  border-radius: 20px;
+  position: relative;
+  font-family: "Open Sans", sans-serif;
+  font-weight: 600;
+  font-size: 18px;
+  color: #313032;
+  text-align: center;
+  padding: 10px;
+}
+.db-dropdown {
+  background-color: #ffffff;
+}
+
+.db-dropdown:hover {
+  background-color: #ffffff;
+}
+
+.db-config-icon {
+  color: #5DBEBB;
+  background-color: #ffffff;
+}
+
+.db-config-icon:hover {
+  background-color: #D2D3D5;
+}
+
+.dropdown-item {
+  font-family: "Open Sans", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+}
+.dropdown-menu.action-btn{
+  min-width: 2rem!important;
+  left: -70px!important;
+}
+.truecheck{
+  color:#5DBEBB
+}
+.falsecheck{
+  color:#BDBEC0
+}
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/dashboard-list.component.html b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/dashboard-list.component.html
new file mode 100644
index 00000000..8205158e
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/dashboard-list.component.html
@@ -0,0 +1,242 @@
+<!--
+    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="row">
+  <div class="col-md-12 path">
+    {{"HOME" | translate}} > {{"ConfigDashboard" | translate}} > {{"SIDEBAR.DASHBOARDLIST" | translate}}
+  </div>
+</div>
+
+<div class="d-flex flex-wrap">
+
+  <!-- Database list -->
+  <div *ngFor="let db of this.dbs;let thisIndex=index" class="col-sm-2 db-block">
+    <div class="db-panel" style="height: 100%">
+      <div class="d-flex flex-column align-content-center">
+        <div class="ml-auto dropdown db-dropdown mr-2" data-boundary="window">
+          <a class="badge badge-light db-dropdown" data-toggle="dropdown" style="cursor: pointer">
+            <i class="fas fa-ellipsis-h fa-2x db-config-icon"></i>
+          </a>
+          <div class="dropdown-menu action-btn">
+            <button class="dropdown-item" type="button" (click)="this.openDashboardModal(thisIndex)">
+              {{ 'EDIT' | translate }}
+            </button>
+            <button class="dropdown-item" type="button" (click)="this.deleteDashboard(thisIndex)">
+              {{ 'DELETE' | translate }}
+            </button>
+          </div>
+        </div>
+
+        <div>
+          <div class="align-self-center" style="height: 130px;">
+            <!-- Kibana -->
+            <div class="p-0" *ngIf="db.name == 'Kibana'">
+                <span data-toggle="tooltip" title="Kibana">
+                  <svg version="1.1" id="kibana_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="45%" height="20%" viewBox="0 0 612 750" enable-background="new 0 0 612 792" xml:space="preserve">
+<image overflow="visible" width="85%" height="100%" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAACECAIAAADtMcm8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ
+bWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp
+bj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6
+eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0
+NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJo
+dHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlw
+dGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAv
+IiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RS
+ZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpD
+cmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNl
+SUQ9InhtcC5paWQ6RTRFRTFCRTE4MUJCMTFFOUI2RTlCMEM4NDRDMkQwRDEiIHhtcE1NOkRvY3Vt
+ZW50SUQ9InhtcC5kaWQ6RTRFRTFCRTI4MUJCMTFFOUI2RTlCMEM4NDRDMkQwRDEiPiA8eG1wTU06
+RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFNEVFMUJERjgxQkIxMUU5QjZF
+OUIwQzg0NEMyRDBEMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFNEVFMUJFMDgxQkIxMUU5
+QjZFOUIwQzg0NEMyRDBEMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1w
+bWV0YT4gPD94cGFja2V0IGVuZD0iciI/Plz7FhIAAAe9SURBVHja7JxfTFNXHMfL7f8W0KpjMhRQ
+By3OBxMzHIvOPbrpsy4YtsQ9zBcX/+Bk6gZE3dwUlYJ7cQOJcy/iROeYOEVqAkwLmIBIMidTrDba
+lraAFCkt+0EnqdDeP+25t7fn3m9Ic9velttPzjmf87v3tAkOh6O3t1cihl4MBoPs5s2be/fsE1nQ
+SV7eOxWVFYQIgmbS09MPHzlMQEQWdJKUlHTih0qNRgPbIjLqyGSycuPxtLS0wF0RGXWKS4qXL18+
+dVdERpFNm/LXrfsw+BERGYUit+/YPu1BERm1IkVkjBUpImOsSBEZY0WKyBgrUkTGWJEiMsaKFJEx
+VqSIjLEiRWSMFSkiY6xIERljRYrIGCtSRMZYkSIyxooUkTFWpIiMsSKFjiwCRQoaWWSKFC6yiBUp
+UGTRKFKgyKJRpBCR5UenSMEhA0XuiE6RwkKGRJECQoZKkUJBhlCRQkGGUJGCQIZWkfgjQ65IzJGx
+oUickbGkSGyRsadIbJGxp0g8kbGqSAyRsa1I3JBxoEiskHGjSHyQcaZIfJBxpkhMkHGpyOmt2+fz
+ZS7KnIAHI+j4xEPj4+P+cd+4XzLm8w1Dnj8fHR3lmSLzCgt3xmxAcLsHrl69RrlfSkpKcnLyrFnJ
+MOIq5AqA6HK5hoaGuD/iRYsyv/v+UCzHUGhTdPZ7NplpD+p0ugULFmi1Wq931G5zQAOVy+WsHm5i
+UqKxwpiYmBhLZNG82DmZwLZUKtXrs1NTU2Hb8sgC/Z2Nwz127Cj3ikSJLDjA6O7dHviDbYVCsWzZ
+W/PmznO6nM5+J6p/sf/A/hUrVsR+csPGm8JI19Fx++XQA8n0DA8/e2ZLSEiIR0VygSw4/04GNqBD
+6bOzPZ5hm83O8yoyxsim8ngysLF48WJoeI8tlrGxMZqK5LiK5AuyqfRORq1W5+bmjng8DoeDvIoE
+RXJcRfIOWSAej8dkMsFGbu7bGo3a8ugxf6pIniKbyq1bZrgFw6akvN738CEfqsj4qDHv3OlubGxU
+qVUL0xfyTZHTW1k04mcDHNwuXZqzMndlDKtIilZGs2DiMi6X+9Lvl1avfu/GjRt8RMa3A9LpZvt8
+Y9D2rVbr5s2fbtiwYWZtKyJ7RZFajTa44UMVsWrV6tLSUv70Bn4hy8zIHPVOPzfn9/tPn/4ZwLW3
+t4vIXonBoB8YdId79unTpxs3flRYWBjz5sYXZNnZ2eRlQCB1dRfy8t69/899oSNLS3vD6eynOd2x
+2+3r1q+vrT0nXGRarRbqc0bTQ9i/qKjo44JPXrx4IThkoMg5c3SRDU8trS1r1rxvsViEhQwUGU1L
+gU66du0HZrNZKMj0ejJF0szIyEh+/qbyciP+yECR/f0OJG8F/frkyR/r6//AGRkjRdIZEBVy+b69
++4zlRg5mbTFAFoEiyT4AQahV6sD2qVM1335ziOb58bhBBqQiVmTId9OoNcH0a2trdxV+weqKCK6R
+LVmyBOFkCnjNvIxiMpm2bv3c4/HggGyiihxwo3o36I9SqTTkU+Zb5i2fbRkcHIxvZNC+6FSRNKNQ
+KMnXf3R13dm2bTsb5QFHyECRg4MDCBWpUiopd7vdcbtw5y7kNuACWUCRyI44SJGUaW5uhsmH3++P
+J2RsK5IyV678efDAQYTUWEfGgSIpc/58XWVFZXwg40yRlIFZ7pkzv/AdGVpFyuWKKJdIHi07amoy
+8RdZSspr3CuSsnrfvbsosJ6Bd8hAkRH3oHCKREIfCqnSktIop7jokQUUiWqtbASKJI/Vav36q2J+
+IcvKehOhItVqNfLFeFCERqMCxEeTk5PjcrkQKlImZWU5V/nx8u7u7tgjA0Xa7Tb+KJIkUI18WbQn
+srMdyJDxUJHksVgsMO2IGTLeKpI858792tLSGgNkPFckeUqKS2w2G9fI+K9IktjtdqDGKTKDwRAX
+iiRJa+tfzc0tHCGbrCLtqA6dVUWSp+xIGf0rLJEjQ6tIsAfbiiTJgwcPqqqq2UWmVCrRKpLLIT9k
+qquqA9+1YgUZfLbU1NQ4VWS4eL3eI4fL2EIGihwefh6niiT1QGtbWxt6ZGgVqVKquFckSSorTiBG
+hlyREAmf0tnZ2XC5ARkynBRJEqOxgnxmThcZfooMF6vVSr52mS4y/BRJkpqaGpJr1bSQ6fV6LBUZ
+tvC02evr6yNHBop0OvtxVWS4VP1UHe4KPwWyjIwMvBUZLn19fU1NTYyRgSJHRjzYKzJcwl1SIcgV
+iWr5CZFA8HzIn5mO9g7rEysDZGgVqdao44tXIGfPnqWLDLkipYRUEoepq7sA5To1MtSKVMaFIkMG
+qunGa40UyFArEhyplMRzLl78jQyZTjcbtSJVkjiP2WyetuSLCFYkSE3IigwZqJyuN14PjQwU6R3z
+ClyRIXO5oSEEMlGR5BO04L5JBBSJ6nt+8a7IsA0t6Lwj4Xa7QZGoOhEGigyZ4GsChNX6RFQkZdrb
+2qeuDSM7b4WNIkNmaGios7MTMTKcFBkyLS/XbRBIPie0L5wUGRpZ6/8r0RD8ftmEImUyCe659/e9
+wE81R9sxZTI8FTkz0LYCv80cFTJQpFqlkggmXV1dUSHDW5GhkXVGhwx7Rc5MT0+P3++XFRQUZGVl
+M33x3Llz5s+fLxFeCIL4T4ABAKZ9PUaesuDFAAAAAElFTkSuQmCC" transform="matrix(1 0 0 1 70 0)">
+</image>
+</svg>
+
+                </span>
+            </div>
+            <!-- Couchbase -->
+            <div class="p-0" *ngIf="db.name == 'Couchbase'">
+                <span data-toggle="tooltip" title="Couchbase">
+                  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                    x="0px" y="0px" width="100" height="100" viewBox="-408 285.3 25 25"
+                    style="enable-background:new -408 285.3 25 25;" xml:space="preserve">
+                    <path style="fill: #313032"
+                      d="M-395.5,285.3c-6.9,0-12.5,5.6-12.5,12.5s5.6,12.5,12.5,12.5s12.5-5.6,12.5-12.5S-388.6,285.3-395.5,285.3z
+                                            M-387.1,300c0,0.8-0.4,1.4-1.3,1.6c-1.5,0.3-4.6,0.4-7.2,0.4s-5.7-0.2-7.2-0.4c-0.8-0.2-1.3-0.8-1.3-1.6v-4.9
+                                          c0-0.8,0.6-1.5,1.3-1.6c0.4-0.1,1.5-0.2,2.2-0.2c0.3,0,0.5,0.2,0.5,0.6v3.4l4.4-0.1l4.4,0.1v-3.4c0-0.4,0.2-0.6,0.5-0.6
+                                          c0.8,0,1.8,0.1,2.2,0.2c0.7,0.1,1.3,0.8,1.3,1.6C-387.1,296.7-387.1,298.3-387.1,300L-387.1,300z" />
+                  </svg>
+                </span>
+            </div>
+            <!-- Druid -->
+            <div class="p-0" *ngIf="db.name == 'Druid'">
+                <span class="pr-1" data-toggle="tooltip" title="Druid">
+                  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                    x="0px" y="0px" width="100" height="100" viewBox="-403 285.3 34 25"
+                    style="enable-background:new -403 285.3 34 25;" xml:space="preserve">
+                    <g>
+                      <path style="fill: #313032"
+                        d="M-385.5,285.3c2.2,0,4.3,0,6.5,0c4.2,0,8,2.7,9.4,6.6c0.6,1.7,0.8,3.4,0.6,5.2c-0.3,2.6-1,5-2.5,7.2
+                                       c-2.3,3.4-5.5,5.2-9.5,5.8c-1.4,0.2-2.7,0.2-4.1,0.2c-0.6,0-0.9-0.3-0.9-0.7c0-0.5,0.3-0.9,0.8-0.9c0.6,0,1.2,0,1.9,0
+                                       c3.7-0.1,7-1.4,9.6-4.2c1.8-1.9,2.7-4.3,3-6.9c0.2-1.8,0.2-3.6-0.5-5.3c-1.1-2.6-3.1-4.2-5.8-5c-1.1-0.3-2.1-0.3-3.2-0.4
+                                       c-4,0-8.1,0-12.1,0c-0.2,0-0.3,0-0.5,0c-0.4,0-0.7-0.4-0.7-0.8s0.3-0.7,0.6-0.8c0.2,0,0.4,0,0.6,0L-385.5,285.3L-385.5,285.3z" />
+                      <path style="fill: #313032" d="M-389.7,304.6h-7.2c-0.2,0-0.3,0-0.5,0c-0.4-0.1-0.7-0.3-0.7-0.7c0-0.4,0.2-0.7,0.6-0.9
+                                       c0.2-0.1,0.5-0.1,0.8-0.1c4.7,0,9.5,0,14.2,0c1.7,0,3.1-0.6,4.2-1.8c1-1,1.5-2.3,1.6-3.7c0.1-1.1,0-2.1-0.7-3.1
+                                       c-0.8-1-1.8-1.5-3.1-1.5c-4.5,0-9,0-13.5,0c-0.5,0-1,0-1.4-0.1c-0.4,0-0.6-0.3-0.7-0.7c0-0.5,0.2-0.8,0.6-0.9c0.1,0,0.3,0,0.4,0
+                                       h14.4c2.4,0,4.5,1.5,5.3,3.8c0.5,1.6,0.4,3.3-0.3,4.8c-1.2,3-3.9,4.9-7.2,4.9C-385,304.6-387.3,304.6-389.7,304.6L-389.7,304.6z
+                                        M-400.4,292.6c-0.6,0-1.1,0-1.7,0c-0.5,0-0.8-0.3-0.9-0.7s0.2-0.8,0.7-0.9c0.3,0,0.5-0.1,0.8-0.1c0.8,0,1.5,0,2.3,0
+                                       c0.2,0,0.5,0,0.7,0.1c0.4,0.1,0.6,0.5,0.6,0.9s-0.3,0.7-0.7,0.7C-399.2,292.7-399.8,292.6-400.4,292.6L-400.4,292.6z M-390.3,310.3
+                                       c-0.5,0-1,0-1.6,0c-0.5,0-0.8-0.3-0.9-0.7c0-0.5,0.3-0.9,0.7-0.9c1.1-0.1,2.2-0.1,3.4,0c0.4,0,0.8,0.4,0.7,0.8l0,0
+                                       c0,0.5-0.4,0.7-0.9,0.8L-390.3,310.3L-390.3,310.3z" />
+                    </g>
+                  </svg>
+                </span>
+            </div>
+
+            <!-- Elasticsearch -->
+            <div class="p-0" *ngIf="db.name == 'Elasticsearch'">
+                <span class="pr-1" data-toggle="tooltip" title="Elasticsearch">
+                  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                    x="0px" y="0px" width="100" height="100" viewBox="2066.4 284.8 25.1 25"
+                    style="enable-background:new 2066.4 284.8 25.1 25;" xml:space="preserve">
+                    <g>
+                      <path style="fill: #FFFFFF" d="M2091.6,297.9c0-2.1-1.3-3.9-3.3-4.7c0.1-0.4,0.1-0.9,0.1-1.4c0-3.9-3.2-7.1-7.1-7.1c-2.3,0-4.4,1.1-5.7,3
+                                   c-0.7-0.5-1.5-0.8-2.3-0.8c-2.1,0-3.8,1.7-3.8,3.8c0,0.5,0.1,0.9,0.2,1.3c-2,0.7-3.3,2.6-3.3,4.7c0,2.1,1.3,4,3.3,4.7
+                                   c-0.1,0.4-0.1,0.9-0.1,1.4c0,3.9,3.2,7.1,7.1,7.1c2.3,0,4.4-1.1,5.7-3c0.7,0.5,1.5,0.8,2.3,0.8c2.1,0,3.8-1.7,3.8-3.8
+                                   c0-0.5-0.1-0.9-0.2-1.3C2090.2,301.8,2091.6,300,2091.6,297.9L2091.6,297.9z" />
+                      <path style="fill: #313032" d="M2076.3,295.5l5.6,2.6l5.7-5c0.1-0.4,0.1-0.8,0.1-1.3c0-3.5-2.8-6.3-6.3-6.3c-2.1,0-4,1-5.2,2.7l-0.9,4.9
+                                   L2076.3,295.5L2076.3,295.5z" />
+                      <path style="fill: #313032" d="M2070.5,301.4c-0.1,0.4-0.1,0.8-0.1,1.3c0,3.5,2.8,6.3,6.3,6.3c2.1,0,4.1-1,5.2-2.8l0.9-4.9l-1.3-2.4l-5.6-2.6
+                                   L2070.5,301.4L2070.5,301.4z" />
+                      <path style="fill: #313032" d="M2070.4,291.7l3.8,0.9l0.9-4.4c-0.5-0.4-1.2-0.6-1.8-0.6c-1.7,0-3,1.4-3,3
+                                   C2070.2,291.1,2070.3,291.4,2070.4,291.7L2070.4,291.7z" />
+                      <path style="fill: #313032"
+                        d="M2070.1,292.7c-1.7,0.6-2.9,2.2-2.9,4c0,1.8,1.1,3.3,2.7,4l5.4-4.9l-1-2.1L2070.1,292.7L2070.1,292.7z" />
+                      <path style="fill: #313032" d="M2082.9,306.3c0.5,0.4,1.2,0.6,1.8,0.6c1.7,0,3-1.4,3-3c0-0.4-0.1-0.7-0.2-1l-3.8-0.9L2082.9,306.3
+                                   L2082.9,306.3z" />
+                      <path style="fill: #313032"
+                        d="M2083.7,300.9l4.2,1c1.7-0.6,2.9-2.2,2.9-4c0-1.8-1.1-3.3-2.7-4l-5.5,4.8L2083.7,300.9L2083.7,300.9z" />
+                    </g>
+                  </svg>
+                </span>
+            </div>
+
+            <!-- MongoDB -->
+            <div class="p-0" *ngIf="db.name == 'MongoDB'">
+                <span class="pr-1" data-toggle="tooltip" title="MongoDB">
+                  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                    x="0px" y="0px" width="100" height="100" viewBox="-397.2 285.8 11.2 25"
+                    style="enable-background:new -397.2 285.8 11.2 25;" xml:space="preserve">
+                    <g transform="matrix(1.2754196 0 0 1.2754196 -16.030009 -21.83192)">
+                      <path style="fill: #313032"
+                        d="M-294.5,241.2c0.2,0.3,0.4,0.7,0.5,1c0.1,0.2,0.2,0.4,0.4,0.5c0.4,0.4,0.9,0.9,1.2,1.4
+                                     c0.9,1.2,1.5,2.5,1.9,3.9c0.3,0.9,0.4,1.7,0.4,2.6c0,2.7-0.9,4.9-2.7,6.8c-0.3,0.3-0.6,0.6-1,0.8c-0.2,0-0.3-0.2-0.4-0.3
+                                     c-0.2-0.2-0.2-0.5-0.3-0.8c-0.1-0.3-0.1-0.6-0.1-1c0,0,0-0.1,0-0.2C-294.4,256.1-294.6,241.3-294.5,241.2z" />
+                      <path style="fill: #313032"
+                        d="M-294.5,241.2C-294.5,241.2-294.5,241.2-294.5,241.2c-0.1,0.2-0.2,0.4-0.3,0.6c-0.1,0.2-0.3,0.3-0.5,0.5
+                                     c-0.9,0.8-1.7,1.8-2.3,2.9c-0.8,1.5-1.2,3.1-1.3,4.8c0,0.6,0.2,2.8,0.4,3.4c0.5,1.6,1.4,3,2.7,4.2c0.3,0.3,0.6,0.5,0.9,0.8
+                                     c0.1,0,0.1-0.1,0.1-0.2c0-0.2,0.1-0.3,0.1-0.4c0.1-0.5,0.2-1.1,0.2-1.6C-294.4,256.2-294.4,241.3-294.5,241.2L-294.5,241.2z" />
+                      <path style="fill: #313032" d="M-294,258.9c0-0.2,0.2-0.4,0.3-0.7c-0.1,0-0.2-0.2-0.3-0.3c-0.1-0.1-0.1-0.2-0.2-0.4c-0.2-0.4-0.2-0.9-0.2-1.4
+                                     c0,0,0-0.1,0-0.2s0-0.1,0-0.2c0,0-0.1,0.4-0.1,0.5c0,0.5-0.1,1-0.2,1.4c0,0.2,0,0.4-0.2,0.5c0,0,0,0,0,0.1c0.2,0.5,0.2,1.1,0.3,1.7
+                                     v0.2c0,0.3,0,0.2,0.2,0.3c0.1,0,0.2,0,0.3,0.1c0.1,0,0.1,0,0.1-0.1c0-0.1,0-0.2,0-0.4c0-0.3,0-0.7,0-1
+                                     C-294,259.3-294,259.1-294,258.9z" />
+                    </g>
+                  </svg>
+                </span>
+            </div>
+          </div>
+
+          <div class="mt-auto">
+            <i class="fa fa-check-circle" aria-hidden="true"
+               [ngClass]="{'truecheck':db.enabled == true,'falsecheck':db.enabled == false}"></i>
+            {{ db.host }}
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+
+  <!-- Add -->
+  <div class="col-sm-2 db-block">
+    <div class="db-panel">
+      <div class="d-flex flex-column align-content-center">
+        <div class="ml-auto dropdown db-dropdown mr-2" style="visibility: hidden;" data-boundary="window">
+          <a class="badge badge-light db-dropdown" data-toggle="dropdown">
+            <i class="fas fa-ellipsis-h fa-2x db-config-icon"></i>
+          </a>
+          <div class="dropdown-menu">
+            <button class="dropdown-item" type="button">
+              <i class="fas fa-times db-config-icon"></i> Delete
+            </button>
+          </div>
+        </div>
+
+        <div>
+          <button type="button" class="btn" (click)="this.openCreateModal()">
+            <div class="align-self-center" style="height: 130px;">
+              <div style="width:100px; height:100px;">
+                <i class="fas fa-plus fa-3x pt-4 dl-icon-enable"></i>
+              </div>
+            </div>
+
+            <div class="mt-auto" style="visibility: hidden;">
+              add
+            </div>
+          </button>
+        </div>
+
+      </div>
+    </div>
+  </div>
+
+</div>
+
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/dashboard-list.component.spec.ts b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/dashboard-list.component.spec.ts
new file mode 100644
index 00000000..d0e59ce4
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/dashboard-list.component.spec.ts
@@ -0,0 +1,40 @@
+/*
+    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 { DashboardListComponent } from './dashboard-list.component';
+
+describe('DashboardListComponent', () => {
+  let component: DashboardListComponent;
+  let fixture: ComponentFixture<DashboardListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/dashboard-list.component.ts b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/dashboard-list.component.ts
new file mode 100644
index 00000000..a2966a4e
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/dashboard-list.component.ts
@@ -0,0 +1,283 @@
+/*
+    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, EventEmitter, OnInit, Output} from '@angular/core';
+import {Dashboard} from "../../core/models/dashboard.model";
+import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
+import {CreateDashboardComponent} from "./create-dashboard/create-dashboard.component";
+
+import {AdminService} from "../../core/services/admin.service";
+
+// DB modal components
+import {DashboardApiService} from "src/app/core/services/dashboard-api.service";
+
+import {AlertComponent} from "src/app/core/alert/alert.component";
+
+// Notify
+import {ToastrNotificationService} from "src/app/core/services/toastr-notification.service";
+// Loading spinner
+import {NgxSpinnerService} from "ngx-spinner";
+
+@Component({
+  selector: 'app-dashboard-list',
+  templateUrl: './dashboard-list.component.html',
+  styleUrls: ['./dashboard-list.component.css']
+})
+export class DashboardListComponent implements OnInit {
+  @Output() passEntry: EventEmitter<any> = new EventEmitter();
+  dbList: any = [];
+  dbs: Dashboard[] = [];
+
+  loading: Boolean = true;
+
+  tempDbDetail: Dashboard;
+  selectedLangs = sessionStorage.getItem("selectedLang");
+  dashboardDeteleModelShow = true;
+  nameArr = [];
+
+  constructor(
+    private adminService: AdminService,
+    private dashboardApiService: DashboardApiService,
+    private notificationService: ToastrNotificationService,
+    private modalService: NgbModal,
+    private spinner: NgxSpinnerService
+  ) {
+    // Set page title
+    this.adminService.setTitle("SIDEBAR.DASHBOARDLIST");
+    this.getName();
+    this.initData().then(data => {
+      this.initDbsList(this.dbList).then(data => {
+        this.dbs = data;
+        console.log(this.dbs, "dasboard-dbs[]")
+      });
+    });
+  }
+
+  ngOnInit() {
+    this.spinner.show();
+  }
+
+
+  async initData() {
+    this.dbList = [];
+    this.dbList = await this.getDbList();
+    setTimeout(() => {
+      this.spinner.hide();
+    }, 500);
+  }
+
+  getDbList() {
+    var data: any;
+    data = this.dashboardApiService.getDashboardList().toPromise();
+
+    return data;
+  }
+
+  async initDbsList(dbList: []) {
+    var d: Dashboard[] = [];
+
+    if (dbList.length > 0) {
+      for (var i = 0; i < dbList.length; i++) {
+        let data = dbList[i];
+        let feed = {
+          name: data["name"],
+          host: data["host"],
+          port: data["port"],
+          login: data["login"],
+          pass: data["pass"],
+          enabled: data["enabled"]
+        };
+        d.push(feed);
+      }
+    }
+    return d;
+  }
+
+
+  openCreateModal() {
+    let thisIndex = -1;
+    this.openDashboardModal(thisIndex);
+  }
+
+  openDashboardModal(thisIndex: number) {
+    var modalRef, index;
+    this.selectedLangs = sessionStorage.getItem("selectedLang");
+    let tips = "";
+
+
+    index = thisIndex;
+    console.log(index, "index,add or edit");
+    this.tempDbDetail = new Dashboard();
+    if (index != -1) {
+      modalRef = this.modalService.open(CreateDashboardComponent, {
+        size: "lg",
+        centered: true
+      });
+      modalRef.componentInstance.dashboard = this.dbs[index];
+    } else {
+      if(this.nameArr.length == 0 && this.dbs.length>0){
+        console.log("All types have been created, you cannot create existing types again.");
+         return false;
+      }else {
+        modalRef = this.modalService.open(CreateDashboardComponent, {
+          size: "lg",
+          centered: true
+        });
+        modalRef.componentInstance.dashboard = this.tempDbDetail;
+      }
+
+    }
+    modalRef.componentInstance.nameArr = this.nameArr;
+    modalRef.componentInstance.passEntry.subscribe(receiveEntry => {
+      this.tempDbDetail = receiveEntry;
+      let host = this.tempDbDetail.host;
+      console.log(receiveEntry);
+      if (index != -1) {
+        // Db name found, to update db
+        this.dashboardApiService.upadteDashboard(this.tempDbDetail).subscribe(
+          res => {
+            console.log(res);
+            if (res.statusCode == 200) {
+              this.dbs[index] = this.tempDbDetail;
+              if (this.selectedLangs == "en-us") {
+                tips = "Success updated."
+              } else if (this.selectedLangs == "zh-hans") {
+                tips = "更新成功。"
+              } else if (this.selectedLangs == "zh-hant") {
+                tips = "更新成功。"
+              }
+              this.notificationService.success('"' + host + '"' + tips);
+            } else {
+              if (this.selectedLangs == "en-us") {
+                tips = "Fail updated."
+              } else if (this.selectedLangs == "zh-hans") {
+                tips = "更新失败。"
+              } else if (this.selectedLangs == "zh-hant") {
+                tips = "更新失敗。"
+              }
+              this.notificationService.error('"' + host + '"' + tips);
+            }
+            modalRef.close();
+          },
+          err => {
+            this.notificationService.error(err);
+            modalRef.close();
+          }
+        );
+      } else {
+        // Db name not found, to insert db
+        this.dashboardApiService.addDashboard(this.tempDbDetail).subscribe(
+          res => {
+            console.log(res);
+            let tips = "";
+            if (res.statusCode == 200) {
+              this.dbs.push(this.tempDbDetail);
+              this.dbs = [...this.dbs];
+              this.getName();
+              if (this.selectedLangs == "en-us") {
+                tips = "Success inserted."
+              } else if (this.selectedLangs == "zh-hans") {
+                tips = "新增成功。"
+              } else if (this.selectedLangs == "zh-hant") {
+                tips = "新增成功。"
+              }
+              this.notificationService.success('"' + host + '"' + tips);
+            }else {
+              if (this.selectedLangs == "en-us") {
+                tips = "Fail inserted."
+              } else if (this.selectedLangs == "zh-hans") {
+                tips = "新增失败。"
+              } else if (this.selectedLangs == "zh-hant") {
+                tips = "新增失敗。"
+              }
+              this.notificationService.error('"' + host + '"' + tips);
+            }
+            modalRef.close();
+          },
+          err => {
+            this.notificationService.error(err);
+            modalRef.close();
+          }
+        );
+      }
+    });
+  }
+
+  deleteDashboard(thisIndex: number) {
+    this.selectedLangs = sessionStorage.getItem("selectedLang");
+    const index = thisIndex, host = this.dbs[thisIndex]["host"];
+    let tips = "";
+    if (this.selectedLangs == "en-us") {
+      tips = "Are you sure you want to delete ";
+    } else if (this.selectedLangs == "zh-hans") {
+      tips = "您确定您要删除";
+    } else if (this.selectedLangs == "zh-hant") {
+      tips = "您確定您要刪除";
+    }
+    const modalRef = this.modalService.open(AlertComponent, {
+      // size: "sm",
+      centered: true
+    });
+    modalRef.componentInstance.dashboardDeteleModelShow = this.dashboardDeteleModelShow;
+    modalRef.componentInstance.message =
+      tips + '"'+host + '"' + ' ?';
+    modalRef.componentInstance.passEntry.subscribe(receivedEntry => {
+      // Delete database
+      this.dbs[thisIndex].enabled = false;
+      this.dashboardApiService.deleteDashboard(this.dbs[thisIndex]).subscribe(
+        res => {
+          console.log(res);
+          if (res.statusCode == 200) {
+            // this.dbs[index].enabled = false;
+            this.dbs.splice(index, 1);
+            this.getName();
+            if (this.selectedLangs == "en-us") {
+              tips = "Success deleted."
+            } else if (this.selectedLangs == "zh-hans") {
+              tips = "删除成功。"
+            } else if (this.selectedLangs == "zh-hant") {
+              tips = "刪除成功。"
+            }
+            this.notificationService.success('"' + host + '"' + tips);
+          } else {
+            this.dbs[thisIndex].enabled = true;
+            if (this.selectedLangs == "en-us") {
+              tips = "Fail deleted."
+            } else if (this.selectedLangs == "zh-hans") {
+              tips = "删除失败。"
+            } else if (this.selectedLangs == "zh-hant") {
+              tips = "刪除失敗。"
+            }
+            this.notificationService.error('"' + host + '"' + tips);
+          }
+          modalRef.close();
+        },
+        err => {
+          this.notificationService.error(err);
+          modalRef.close();
+        }
+      );
+    });
+  }
+
+  getName(){
+    this.dashboardApiService.getDashboardName().subscribe(data => {
+      this.nameArr = data;
+      console.log(this.nameArr,"this.nameArr111");
+    });
+    console.log(this.nameArr,"this.nameArr222");
+  }
+
+}
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-setting.component.css b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-setting.component.css
new file mode 100644
index 00000000..424c839b
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-setting.component.css
@@ -0,0 +1,15 @@
+/*
+    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/dashboard-setting/dashboard-setting.component.html b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-setting.component.html
new file mode 100644
index 00000000..134e2fc1
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-setting.component.html
@@ -0,0 +1,24 @@
+<!--
+    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="row">
+  <div class="col-md-12 path">
+    Home > Dashboard List
+  </div>
+</div>
+
+<app-dashboard-list></app-dashboard-list>
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-setting.component.spec.ts b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-setting.component.spec.ts
new file mode 100644
index 00000000..10886c12
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-setting.component.spec.ts
@@ -0,0 +1,40 @@
+/*
+    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 { DashboardSettingComponent } from './dashboard-setting.component';
+
+describe('DashboardSettingComponent', () => {
+  let component: DashboardSettingComponent;
+  let fixture: ComponentFixture<DashboardSettingComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardSettingComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardSettingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-setting.component.ts b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-setting.component.ts
new file mode 100644
index 00000000..26efe645
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-setting.component.ts
@@ -0,0 +1,29 @@
+/*
+    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 } from '@angular/core';
+@Component({
+  selector: 'app-dashboard-setting',
+  templateUrl: './dashboard-setting.component.html',
+  styleUrls: ['./dashboard-setting.component.css']
+})
+export class DashboardSettingComponent implements OnInit {
+
+  constructor() {}
+
+  ngOnInit() {
+  }
+
+}
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.css b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.css
new file mode 100644
index 00000000..424c839b
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.css
@@ -0,0 +1,15 @@
+/*
+    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/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.html b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.html
new file mode 100644
index 00000000..7c75b6b7
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.html
@@ -0,0 +1,15 @@
+<!--
+    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/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.spec.ts
new file mode 100644
index 00000000..de3dc540
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.spec.ts
@@ -0,0 +1,40 @@
+/*
+    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/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.ts b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.ts
new file mode 100644
index 00000000..3c37c58b
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component.ts
@@ -0,0 +1,43 @@
+/*
+    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";
+
+
+@Component({
+  selector: 'app-edit-template-modal',
+  templateUrl: './edit-template-modal.component.html',
+  styleUrls: ['./edit-template-modal.component.css']
+})
+export class EditTemplateModalComponent implements OnInit {
+
+
+  constructor() {
+  }
+
+
+  ngOnInit() {
+
+
+  }
+}
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.css b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.css
new file mode 100644
index 00000000..424c839b
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.css
@@ -0,0 +1,15 @@
+/*
+    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/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.html b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.html
new file mode 100644
index 00000000..7c75b6b7
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.html
@@ -0,0 +1,15 @@
+<!--
+    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/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.spec.ts
new file mode 100644
index 00000000..29df2b1a
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.spec.ts
@@ -0,0 +1,40 @@
+/*
+    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/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts
new file mode 100644
index 00000000..398560bd
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component.ts
@@ -0,0 +1,44 @@
+/*
+    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";
+
+
+@Component({
+  selector: 'app-new-template-modal',
+  templateUrl: './new-template-modal.component.html',
+  styleUrls: ['./new-template-modal.component.css']
+})
+export class NewTemplateModalComponent implements OnInit {
+
+
+  constructor(
+
+
+  ) { }
+
+
+  ngOnInit() {
+
+  }
+}
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.css b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.css
new file mode 100644
index 00000000..424c839b
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.css
@@ -0,0 +1,15 @@
+/*
+    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/dashboard-setting/template/template-list/template-list.component.html b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.html
new file mode 100644
index 00000000..7c75b6b7
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.html
@@ -0,0 +1,15 @@
+<!--
+    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/dashboard-setting/template/template-list/template-list.component.spec.ts b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.spec.ts
new file mode 100644
index 00000000..10a43a46
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.spec.ts
@@ -0,0 +1,40 @@
+/*
+    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 { TemplateListComponent } from './template-list.component';
+
+describe('TemplateListComponent', () => {
+  let component: TemplateListComponent;
+  let fixture: ComponentFixture<TemplateListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TemplateListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TemplateListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.ts b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.ts
new file mode 100644
index 00000000..acfe4d37
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template-list/template-list.component.ts
@@ -0,0 +1,27 @@
+/*
+    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, ViewChild, ElementRef} from '@angular/core';
+
+@Component({
+  selector: 'app-template-list',
+  templateUrl: './template-list.component.html',
+  styleUrls: ['./template-list.component.css']
+})
+export class TemplateListComponent {
+  ngOnInit() {
+  }
+
+}
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template.component.css b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template.component.css
new file mode 100644
index 00000000..424c839b
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template.component.css
@@ -0,0 +1,15 @@
+/*
+    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/dashboard-setting/template/template.component.html b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template.component.html
new file mode 100644
index 00000000..2aede51d
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template.component.html
@@ -0,0 +1,23 @@
+<!--
+    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="row">
+  <div class="col-md-12 path">
+    {{"HOME" | translate}} > {{"ConfigDashboard" | translate}} > {{"SIDEBAR.TEMPLATE" | translate}}
+  </div>
+  <div class="col-md-12">
+    <app-template-list></app-template-list>
+  </div>
+</div>
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template.component.spec.ts b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template.component.spec.ts
new file mode 100644
index 00000000..21428a84
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template.component.spec.ts
@@ -0,0 +1,40 @@
+/*
+    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 { TemplateComponent } from './template.component';
+
+describe('TemplateComponent', () => {
+  let component: TemplateComponent;
+  let fixture: ComponentFixture<TemplateComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TemplateComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TemplateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template.component.ts b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template.component.ts
new file mode 100644
index 00000000..cb761deb
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/template/template.component.ts
@@ -0,0 +1,34 @@
+/*
+    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 } from '@angular/core';
+import {AdminService} from "../../core/services/admin.service";
+
+@Component({
+  selector: 'app-template',
+  templateUrl: './template.component.html',
+  styleUrls: ['./template.component.css']
+})
+export class TemplateComponent implements OnInit {
+
+  constructor(private adminService: AdminService) {
+    // Set page title
+    this.adminService.setTitle("SIDEBAR.TEMPLATE");
+  }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/components/datalake-handler/admin/src/src/app/header/header.component.ts b/components/datalake-handler/admin/src/src/app/header/header.component.ts
index 629c19e5..7551157d 100644
--- a/components/datalake-handler/admin/src/src/app/header/header.component.ts
+++ b/components/datalake-handler/admin/src/src/app/header/header.component.ts
@@ -56,6 +56,7 @@ export class HeaderComponent {
     private translateService: TranslateService
   ) {
     this.translateService.setDefaultLang("en-us");
+    sessionStorage.setItem("selectedLang","en-us");
   }
 
   ngOnInit() {
@@ -74,6 +75,7 @@ export class HeaderComponent {
 
   changeLanguage(lang: string) {
     this.translateService.use(lang);
+    sessionStorage.setItem("selectedLang",lang);
   }
 
   changeFeederStatus() {
diff --git a/components/datalake-handler/admin/src/src/app/sidebar/sidebar.component.css b/components/datalake-handler/admin/src/src/app/sidebar/sidebar.component.css
index d6d32ca4..21d4bf74 100644
--- a/components/datalake-handler/admin/src/src/app/sidebar/sidebar.component.css
+++ b/components/datalake-handler/admin/src/src/app/sidebar/sidebar.component.css
@@ -17,3 +17,9 @@
 * limitations under the License.
 * ============LICENSE_END=========================================================
 */
+.navbar-nav-nohover:hover{
+  background: transparent!important;
+}
+.navbar-nav-nohover:hover li{
+  background: transparent!important;
+}
diff --git a/components/datalake-handler/admin/src/src/app/sidebar/sidebar.component.html b/components/datalake-handler/admin/src/src/app/sidebar/sidebar.component.html
index 238437a0..c8c72b03 100644
--- a/components/datalake-handler/admin/src/src/app/sidebar/sidebar.component.html
+++ b/components/datalake-handler/admin/src/src/app/sidebar/sidebar.component.html
@@ -34,7 +34,7 @@ limitations under the License.
         </a>
       </li>
 
-      <li class="nav-item">
+      <li class="nav-item ">
         <a class="nav-link" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"
           routerLink="/topics">
           <i class="fas fa-cube">&nbsp;</i>
@@ -50,6 +50,32 @@ limitations under the License.
         </a>
       </li>
 
+      <li class="nav-item " >
+        <a  (click)="this.dashboard = !this.dashboard"
+            class="nav-link"
+            style="color: #ffffff!important;background: transparent!important;cursor: pointer"
+            [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"
+            routerLink="{{dashboard==true?'/dashboard-setting/dashboard-list':'javascript:void(0)'}}"
+        >
+          <i class="fas fa-chart-line" aria-hidden="true">&nbsp;</i>
+          {{"SIDEBAR.DASHBOARD" | translate}}
+        </a>
+        <ul class="navbar-nav flex-column navbar-nav-nohover"  [ngbCollapse]="this.dashboard">
+          <li class="nav-item">
+            <a class="nav-link" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"
+               routerLink="/dashboard-setting/dashboard-list">
+              {{"SIDEBAR.DASHBOARDLIST" | translate}}
+            </a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"
+               routerLink="dashboard-setting/template">
+              {{"SIDEBAR.TEMPLATE" | translate}}
+            </a>
+          </li>
+        </ul>
+      </li>
+
       <li class="nav-item">
         <a class="nav-link" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"
           routerLink="/about">
diff --git a/components/datalake-handler/admin/src/src/app/sidebar/sidebar.component.ts b/components/datalake-handler/admin/src/src/app/sidebar/sidebar.component.ts
index f8b68a63..11065d3d 100644
--- a/components/datalake-handler/admin/src/src/app/sidebar/sidebar.component.ts
+++ b/components/datalake-handler/admin/src/src/app/sidebar/sidebar.component.ts
@@ -35,4 +35,6 @@ export class SidebarComponent implements OnInit {
   constructor() {}
 
   ngOnInit() {}
+
+  dashboard = true;
 }
diff --git a/components/datalake-handler/admin/src/src/assets/i18n/en-us.json b/components/datalake-handler/admin/src/src/assets/i18n/en-us.json
index e928ccc2..b9a26f6a 100644
--- a/components/datalake-handler/admin/src/src/assets/i18n/en-us.json
+++ b/components/datalake-handler/admin/src/src/assets/i18n/en-us.json
@@ -3,6 +3,9 @@
     "FEDDFER": "DataLake Feeder",
     "TOPICS": "Topics",
     "DATABASE": "Database",
+    "DASHBOARD":"Dashboard Setting",
+    "DASHBOARDLIST":"Dashboard List",
+    "TEMPLATE":"Template",
     "ABOUT": "About"
   },
 
@@ -33,5 +36,27 @@
   "DELETE": "Delete",
   "ERROR_CODE": "Error Code",
   "SUCCESS_UPDATED": "Success updated",
-  "TOPIC_DEFAULT_CONF_NOTICE": "Notice: This topic uses the default topics settings."
+  "TOPIC_DEFAULT_CONF_NOTICE": "Notice: This topic uses the default topics settings.",
+
+  "HOME":"Home",
+  "ConfigDashboard":"Config Dashboard",
+  "EDIT":"Edit",
+  "OK":"OK",
+  "Save":"Save",
+  "Cancel":"Cancel",
+  "NewDashboard":"New dashboard",
+  "DestinationType":"Destination type",
+  "InputValue":"input value",
+  "Username":"Username",
+  "Password":"Password",
+
+
+  "No":"No",
+  "TEMPLATE_NAME":"Template name",
+  "TEMPLATE_TYPE":"Template type",
+  "TOPICS_NAME":"Topics name",
+  "DEPLOY_TO_DASHBOARD":"Deploy to dashboard",
+  "DEPLOY":"Deploy",
+  "NEW_TEMPLATE":"New template",
+  "TEMPLATE_BODY":"Template Body"
 }
diff --git a/components/datalake-handler/admin/src/src/assets/i18n/zh-hans.json b/components/datalake-handler/admin/src/src/assets/i18n/zh-hans.json
index 964e028d..0319443b 100644
--- a/components/datalake-handler/admin/src/src/assets/i18n/zh-hans.json
+++ b/components/datalake-handler/admin/src/src/assets/i18n/zh-hans.json
@@ -3,6 +3,9 @@
     "FEDDFER": "DataLake Feeder",
     "TOPICS": "Topics",
     "DATABASE": "Database",
+    "DASHBOARD":"仪表板设置",
+    "DASHBOARDLIST":"仪表板列表",
+    "TEMPLATE":"模板",
     "ABOUT": "About"
   },
 
@@ -33,5 +36,26 @@
   "DELETE": "删除",
   "ERROR_CODE": "错误代码​",
   "SUCCESS_UPDATED": "更新成功​",
-  "TOPIC_DEFAULT_CONF_NOTICE": "注意: 本Topic使用默认Topic设置。​"
+  "TOPIC_DEFAULT_CONF_NOTICE": "注意: 本Topic使用默认Topic设置。​",
+
+  "HOME":"首页",
+  "ConfigDashboard":"配置仪表板",
+  "EDIT":"编辑",
+  "OK":"确认",
+  "Save":"保存",
+  "Cancel":"取消",
+  "NewDashboard":"新建仪表板",
+  "DestinationType":"目标类型",
+  "InputValue":"输入值",
+  "Username":"用户名",
+  "Password":"密码",
+  
+    "No":"No",
+  "TEMPLATE_NAME":"模板名称",
+  "TEMPLATE_TYPE":"模板类型",
+  "TOPICS_NAME":"Topics名称",
+  "DEPLOY_TO_DASHBOARD":"部署到仪表盘",
+  "DEPLOY":"部署",
+  "NEW_TEMPLATE":"新建模板",
+  "TEMPLATE_BODY":"模板体"
 }
diff --git a/components/datalake-handler/admin/src/src/assets/i18n/zh-hant.json b/components/datalake-handler/admin/src/src/assets/i18n/zh-hant.json
index f91ba785..a52739ff 100644
--- a/components/datalake-handler/admin/src/src/assets/i18n/zh-hant.json
+++ b/components/datalake-handler/admin/src/src/assets/i18n/zh-hant.json
@@ -3,6 +3,9 @@
     "FEDDFER": "DataLake Feeder",
     "TOPICS": "Topics",
     "DATABASE": "Database",
+    "DASHBOARD":"儀表板設置",
+    "DASHBOARDLIST":"儀表板列表",
+    "TEMPLATE":"模板",
     "ABOUT": "About"
   },
 
@@ -34,5 +37,26 @@
   "DELETE": "刪除",
   "ERROR_CODE": "錯誤代碼",
   "SUCCESS_UPDATED": "更新成功​",
-  "TOPIC_DEFAULT_CONF_NOTICE": "注意：此Topic目前使用預設配置。​"
+  "TOPIC_DEFAULT_CONF_NOTICE": "注意：此Topic目前使用預設配置。​",
+
+  "HOME":"首頁",
+  "ConfigDashboard":"配置儀表板",
+  "EDIT":"編輯",
+  "OK":"確認",
+  "Save":"保存",
+  "Cancel":"取消",
+  "NewDashboard":"新建儀表板",
+  "DestinationType":"目標類型",
+  "InputValue":"輸入值",
+  "Username":"用戶名",
+  "Password":"密碼",
+  
+    "No":"No",
+  "TEMPLATE_NAME":"模板名稱",
+  "TEMPLATE_TYPE":"模板類型",
+  "TOPICS_NAME":"Topics名稱",
+  "DEPLOY_TO_DASHBOARD":"部署到儀表板",
+  "DEPLOY":"部署",
+  "NEW_TEMPLATE":"新建模板",
+  "TEMPLATE_BODY":"模板體"
 }
diff --git a/components/datalake-handler/admin/src/src/styles.css b/components/datalake-handler/admin/src/src/styles.css
index 04479213..5087697b 100644
--- a/components/datalake-handler/admin/src/src/styles.css
+++ b/components/datalake-handler/admin/src/src/styles.css
@@ -585,3 +585,12 @@ input#switch:checked+.dl-slider:before {
   border-radius: 6px;
   padding: 4px 4px 4px 10px;
 }
+.p-1.alert-delete-model{
+  padding: 0.25rem 0.5rem;
+}
+.p-1 .alert-delete-title{
+  padding: 1.25rem 1.5rem!important;
+}
+.p-1 .alert-delete-content{
+  padding: 1.25rem 4.5rem!important;
+}