kafka ui

Change-Id: Ie87c3ab9506230a8ef75cfbb33d1909f8b3b29c9
Issue-ID: DCAEGEN2-1631
Signed-off-by: ZhangZihao <zhangzihao@chinamobile.com>

21 files changed, 1175 insertions, 108 deletions

diff --git a/components/datalake-handler/admin/src/src/app/app.module.ts b/components/datalake-handler/admin/src/src/app/app.module.ts
index 8ed9fd83..3c52716c 100644
--- a/components/datalake-handler/admin/src/src/app/app.module.ts
+++ b/components/datalake-handler/admin/src/src/app/app.module.ts
@@ -94,6 +94,9 @@ import { ModalDemoComponent } from "./views/test/modal-demo/modal-demo.component
 import { KafkaComponent } from './views/kafka/kafka.component';
 // Angular SVG Icon
 import { AngularSvgIconModule } from "angular-svg-icon";
+import { KafkaListComponent } from './views/kafka/kafka-list/kafka-list.component';
+import { NewKafkaModalComponent } from './views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component';
+import { EditKafkaModalComponent } from './views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component';
 
 
 @NgModule({
@@ -133,7 +136,10 @@ import { AngularSvgIconModule } from "angular-svg-icon";
     ButtonComponent,
     ModalDirective,
     ModalDemoComponent,
-    KafkaComponent
+    KafkaComponent,
+    KafkaListComponent,
+    NewKafkaModalComponent,
+    EditKafkaModalComponent
   ],
   imports: [
     BrowserModule,
@@ -170,7 +176,9 @@ import { AngularSvgIconModule } from "angular-svg-icon";
     EditTemplateModalComponent,
     ModalComponent,
     ModalDemoComponent,
-    KafkaComponent
+    KafkaComponent,
+    NewKafkaModalComponent,
+    EditKafkaModalComponent
   ]
 })
 export class AppModule {}
diff --git a/components/datalake-handler/admin/src/src/app/core/models/kafka.model.ts b/components/datalake-handler/admin/src/src/app/core/models/kafka.model.ts
index 9901de46..40a7e26d 100644
--- a/components/datalake-handler/admin/src/src/app/core/models/kafka.model.ts
+++ b/components/datalake-handler/admin/src/src/app/core/models/kafka.model.ts
@@ -14,7 +14,7 @@
     limitations under the License.
 */
 
-export class kafka {
+export class Kafka {
   id: number;
   name: string;
   enabled: boolean;
@@ -28,5 +28,5 @@ export class kafka {
   includedTopic: string;
   excludedTopic: string;
   consumerCount: number;
-  timeout: number
+  timeout: number;
 }
diff --git a/components/datalake-handler/admin/src/src/app/core/services/rest-api.service.ts b/components/datalake-handler/admin/src/src/app/core/services/rest-api.service.ts
index 589a4337..cb210086 100644
--- a/components/datalake-handler/admin/src/src/app/core/services/rest-api.service.ts
+++ b/components/datalake-handler/admin/src/src/app/core/services/rest-api.service.ts
@@ -35,6 +35,7 @@ import { Topic } from "src/app/core/models/topic.model";
 import { Db } from "src/app/core/models/db.model";
 import { Template } from "src/app/core/models/template.model";
 import { Dashboard } from "src/app/core/models/dashboard.model";
+import {Kafka} from "../models/kafka.model";
 
 const prefix = "/datalake/v1/";
 const httpOptions = {
@@ -336,13 +337,34 @@ Dashboard
       catchError(this.handleError)
     );
   }
-  DeleteKafka(id): Observable<any> {
+  deleteKafka(id): Observable<any> {
     return this.http.delete(prefix + "kafkas/" + id).pipe( //online
       retry(1),
       map(this.extractData2),
       catchError(this.handleError)
     );
   }
+
+  createNewKafka(k: Kafka): Observable<any> {
+    return this.http
+      .post(prefix + "kafkas", k)
+      .pipe(
+        retry(1),
+        tap(_ => this.extractData),
+        catchError(this.handleError)
+      );
+  }
+
+  updateKafka(k: Kafka): Observable<any> {
+    let id = k.id;
+    return this.http
+      .put(prefix + "kafkas/" + id, k)
+      .pipe(
+        retry(1),
+        tap(_ => this.extractData),
+        catchError(this.handleError)
+      );
+  }
 }
 
 
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.css b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.css
new file mode 100644
index 00000000..a34ed1eb
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.css
@@ -0,0 +1,38 @@
+/*
+    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+.row-wrapper{
+  display: flex;
+}
+.row-quarter-item{
+  width: 20%;
+  margin-bottom: 15px;
+}
+.row-half-item{
+  width: 45%;
+}
+.row-half-item2{
+  width: 50%;
+}
+.usual-item{
+  margin-left: 2%;
+}
+.usual-item2{
+  margin-left: 6.5%;
+}
+input::-webkit-input-placeholder {
+  font-size: 12px;
+  color: #0DA9E2;
+}
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.html b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.html
new file mode 100644
index 00000000..2a42b988
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.html
@@ -0,0 +1,193 @@
+<!--
+    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+-->
+<div class="p-1">
+  <div class="modal-header pb-0 border-0">
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-md-12">
+          <label class="dl-h3">{{ 'EDIT_KAFKA' | translate }}-{{ this.kafkaInputTitle }}</label>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-12">
+          <hr>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-body border-0">
+    <div class="container-fluid">
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'NAME' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.kafkaInput.name" class="form-control dl-input-text" type="text"/>
+          </div>
+        </div>
+
+        <div class="row-half-item usual-item2">
+          <div>
+            <label class="dl-emphasis1" >{{ 'STATUS' | translate }}</label>
+          </div>
+          <div>
+            <label class="dl-switch">
+              <input id="switch" type="checkbox" [(ngModel)]="this.kafkaInput.enabled"/>
+              <span class="dl-slider round"></span>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'BROKER_LIST' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.kafkaInput.brokerList" class="form-control dl-input-text" type="text" required="required" />
+          </div>
+        </div>
+
+        <div class="row-half-item usual-item2">
+          <div>
+            <label class="dl-emphasis1" >{{ 'ZOOKEEPER' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.kafkaInput.zooKeeper" class="form-control dl-input-text" type="text" required="required" />
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'Username' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.kafkaInput.login" class="form-control dl-input-text" type="text" required="required" />
+          </div>
+        </div>
+
+        <div class="row-half-item usual-item2">
+          <div>
+            <label class="dl-emphasis1" >{{ 'Password' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.kafkaInput.pass" class="form-control dl-input-text" type="text" required="required" />
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1">{{ 'AUTHENTICATION' | translate }}</label>
+          </div>
+          <div class="input-group row-half-item2">
+            <label class="input-group-text dl-input-chk-label">
+              <input id="chkSaveRaw" [(ngModel)]="this.kafkaInput.secure" type="checkbox"/>
+              <span class="dl-input-checkmark"></span>
+            </label>
+            <label class="form-control dl-input-chk" for="chkSaveRaw">
+              Secure
+            </label>
+          </div>
+        </div>
+
+        <div class="row-half-item usual-item2">
+          <div>
+            <label class="dl-emphasis1" >{{ 'SECURITY_PROTOCOL' | translate }}</label>
+          </div>
+          <div>
+            <select class="custom-select dl-input-text" >
+              <option *ngFor="let item of protocols" [selected]="item == protocols[0]">{{ item }}</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'GROUP' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.kafkaInput.group" class="form-control dl-input-text" type="text" required="required" />
+          </div>
+        </div>
+
+        <div class="row-half-item usual-item2">
+          <div>
+            <label class="dl-emphasis1" >{{ 'TIME_OUT' | translate }}</label>
+          </div>
+          <div>
+            <input [(ngModel)]="this.kafkaInput.timeout" class="form-control dl-input-text" type="text" required="required" />
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'EXCLUDED_TOPICS' | translate }}</label>
+          </div>
+          <div>
+            <div class="d-flex row align-items-center" *ngFor="let field of exTopicFields; let i = index">
+              <div class="order-1 usual-item2">
+                <input [(ngModel)]="field.item" class="form-control dl-input-text" type="text"/>
+              </div>
+              <div class="order-2">
+                <button type="button" class="btn dl-icon-enable p-2" (click)="addExTopicField()">
+                  <i class="fa fa-plus fa-xs" aria-hidden="true"></i>
+                </button>
+              </div>
+              <div class="order-3">
+                <button type="button" class="btn dl-icon-enable p-2" (click)="deleteExTopicField(i)">
+                  <i class="fa fa-trash fa-xs" aria-hidden="true"></i>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="modal-footer border-0 pt-0 pb-2">
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-md-7 p-0">
+        </div>
+        <div class="col-md-2 p-1">
+          <span>
+            <button type="button" class="btn dl-btn-dark btn-block" (click)="this.passBack()">
+              Save
+            </button>
+          </span>
+        </div>
+        <div class="col-md-2 p-1">
+          <span>
+            <button type="button" class="btn dl-btn-light btn-block" (click)="activeModal.close('Close click')">
+              Cancel
+            </button>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.spec.ts
new file mode 100644
index 00000000..4c24cb90
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.spec.ts
@@ -0,0 +1,41 @@
+/*
+    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditKafkaModalComponent } from './edit-kafka-modal.component';
+
+describe('EditKafkaModalComponent', () => {
+  let component: EditKafkaModalComponent;
+  let fixture: ComponentFixture<EditKafkaModalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditKafkaModalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditKafkaModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.ts
new file mode 100644
index 00000000..9f129b6e
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.ts
@@ -0,0 +1,80 @@
+/*
+    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+
+import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
+
+// Loading spinner
+import { NgxSpinnerService } from "ngx-spinner";
+import {Kafka} from "../../../../core/models/kafka.model";
+
+@Component({
+  selector: 'app-edit-kafka-modal',
+  templateUrl: './edit-kafka-modal.component.html',
+  styleUrls: ['./edit-kafka-modal.component.css']
+})
+export class EditKafkaModalComponent implements OnInit {
+  @Input() editKafka: Kafka;
+  @Output() passEntry: EventEmitter<any> = new EventEmitter();
+  kafkaInput: Kafka;
+  exTopicFields: Array<any> = [];
+  exTopicNewField: any = {};
+  protocols: Array<string> = ["SASL_PLAINTEXT"];
+
+  constructor(
+    public activeModal: NgbActiveModal,
+    private spinner: NgxSpinnerService,
+  ) { }
+
+  kafkaInputTitle = "";
+
+  ngOnInit() {
+    this.kafkaInput = this.editKafka;
+    if (this.kafkaInput.excludedTopic != null) {
+      var excludedTopics = this.kafkaInput.excludedTopic.split(",");
+      for (var i = 0; i < excludedTopics.length; i++) {
+        var data = { item: excludedTopics[i] };
+        this.exTopicFields.push(data);
+      }
+    } else {
+      this.exTopicFields.push([]);
+    }
+    this.kafkaInputTitle = this.editKafka.name;
+  }
+
+  passBack() {
+    this.spinner.show();
+    if (this.kafkaInput.name == '' || this.kafkaInput.name == undefined) {
+      return false;
+    }
+    this.editKafka = this.kafkaInput;
+    this.passEntry.emit(this.editKafka);
+    setTimeout(() => {
+      this.spinner.hide();
+    }, 500);
+  }
+
+  addExTopicField() {
+    this.exTopicFields.push(this.exTopicNewField);
+    this.exTopicNewField = {};
+  }
+
+  deleteExTopicField(index: number) {
+    if (this.exTopicFields.length > 1) {
+      this.exTopicFields.splice(index, 1);
+    }
+  }
+}
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.css b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.css
new file mode 100644
index 00000000..1c7a3867
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.css
@@ -0,0 +1,42 @@
+/*
+    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.
+*/
+.dashboard-kafka{
+  padding: 0;
+}
+.kafka-li{
+  float: left;
+  list-style: none;
+  padding: 0;
+  width: 23.5%;
+  hight: 23.5%;
+  margin-right: 2%;
+  margin-bottom: 2%;
+}
+li:nth-child(4n){
+  margin-right: 0;
+}
+.add-kafka{
+  cursor: pointer;
+}
+.kafka-list{
+  padding: 0;
+  width: 100%;
+  hight: 100%;
+}
+.add-style{
+
+}
+
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.html b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.html
new file mode 100644
index 00000000..ec611cc0
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.html
@@ -0,0 +1,30 @@
+<!--
+    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="col-md-12 dashboard-kafka">
+      <ul class="kafka-list clearfix">
+        <li class="add-style" *ngFor="let kafka of this.kafkas; let thisIndex=index;" class="col-md-3 kafka-li">
+          <app-card [iconPath]="cardIconPathList[thisIndex]" [iconSize]="'sm'" [subcontent]="kafka.name"
+                    [modifiable]="this.cardModifiable" (edit)="cardMoreAction($event, kafka.id)">
+          </app-card>
+        </li>
+
+
+        <li class="col-md-3 kafka-li add-kafka">
+          <app-card [iconPath]="this.cardAddicon" [iconSize]="'sm'" (click)="newKafkaModal()">
+          </app-card>
+        </li>
+      </ul>
+  </div>
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.spec.ts
new file mode 100644
index 00000000..11ca81ed
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.spec.ts
@@ -0,0 +1,41 @@
+/*
+    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 { KafkaListComponent } from './kafka-list.component';
+
+describe('KafkaListComponent', () => {
+  let component: KafkaListComponent;
+  let fixture: ComponentFixture<KafkaListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ KafkaListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(KafkaListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.ts
new file mode 100644
index 00000000..1acd6171
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.ts
@@ -0,0 +1,240 @@
+/*
+    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+
+/**
+ * @author Chunmeng Guo
+ */
+
+import { Component, OnInit, ElementRef } from '@angular/core';
+import { RestApiService } from "src/app/core/services/rest-api.service";
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+import { Kafka } from "../../../core/models/kafka.model";
+
+// Loading spinner
+import { NgxSpinnerService } from "ngx-spinner";
+
+// notify
+import { ToastrNotificationService } from "src/app/shared/components/toastr-notification/toastr-notification.service";
+import {AlertComponent} from "../../../shared/components/alert/alert.component";
+import {NewKafkaModalComponent} from "./new-kafka-modal/new-kafka-modal.component";
+import {ModalContentData} from "../../../shared/modules/modal/modal.data";
+import {ModalDemoComponent} from "../../test/modal-demo/modal-demo.component";
+import {ModalComponent} from "../../../shared/modules/modal/modal.component";
+import {EditKafkaModalComponent} from "./edit-kafka-modal/edit-kafka-modal.component";
+import {el} from "@angular/platform-browser/testing/src/browser_util";
+
+@Component({
+  selector: 'app-kafka-list',
+  templateUrl: './kafka-list.component.html',
+  styleUrls: ['./kafka-list.component.css']
+})
+export class KafkaListComponent implements OnInit {
+
+  kafkaList: any = [];
+  kafkas: Kafka[] = [];
+  cardIconPath: string;
+  cardModifiable: boolean;
+  cardAddicon: string;
+  Kafka_New: Kafka;
+  Kafka_Newbody: Kafka;
+  cardIconPathList: any = [];
+
+  constructor(
+    private kafkaApiService: RestApiService,
+    private notificationService: ToastrNotificationService,
+    private modalService: NgbModal,
+    private spinner: NgxSpinnerService
+  ) {
+    this.initList();
+  }
+
+  ngOnInit() {
+    this.spinner.show();
+    this.cardModifiable = true;
+    this.cardAddicon = "assets/icons/add.svg";
+  }
+
+  initList() {
+    this.initData().then(data => {
+      this.initKafkasList(this.kafkaList).then(data => {
+        this.kafkas = data;
+        if (this.kafkas.length > 0) {
+          let a = "assets/icons/kafka_able.svg";
+          let b = "assets/icons/kafka_disable.svg";
+          for (let i = 0; i < this.kafkas.length; i++) {
+            this.cardIconPath = (this.kafkas[i].enabled == true) ? a : b;
+            this.cardIconPathList.push(this.cardIconPath);
+          }
+        }
+        console.log(this.cardIconPathList, "kafkas[]");
+      });
+    });
+  }
+
+  async initData() {
+    this.kafkaList = [];
+    this.kafkaList = await this.getKafkaList();
+    setTimeout(() => {
+      this.spinner.hide();
+    }, 500);
+  }
+
+  getKafkaList() {
+    let data: any;
+    data = this.kafkaApiService.getAllKafkaList().toPromise();
+    return data;
+  }
+
+  async initKafkasList(kafkaList: []) {
+    let k: Kafka[] = [];
+    if (kafkaList.length > 0) {
+      for (let i = 0; i < kafkaList.length; i++) {
+        let data = kafkaList[i];
+        let feed = {
+          id: data["id"],
+          name: data["name"],
+          enabled: data["enabled"],
+          brokerList: data["brokerList"],
+          zooKeeper: data["zooKeeper"],
+          group: data["group"],
+          secure: data["secure"],
+          login: data["login"],
+          pass: data["pass"],
+          securityProtocol: data["securityProtocol"],
+          includedTopic: data["includedTopic"],
+          excludedTopic: data["excludedTopic"],
+          consumerCount: data["consumerCount"],
+          timeout: data["timeout"]
+        };
+        k.push(feed);
+      }
+    }
+    return k;
+  }
+
+  deleteKafkaModel(id: number) {
+    const index = this.kafkaList.findIndex(t => t.id === id);
+    const modalRef = this.modalService.open(AlertComponent, {
+      size: "sm",
+      centered: true
+    });
+    modalRef.componentInstance.message = "ARE_YOU_SURE_DELETE";
+    modalRef.componentInstance.passEntry.subscribe(receivedEntry => {
+      // Delete kafka
+      this.kafkaApiService.deleteKafka(id).subscribe(
+        res => {
+          console.log(res);
+          if (JSON.stringify(res).length <= 2) {
+            this.kafkaList.splice(index, 1);
+            this.kafkaList = [...this.kafkaList];
+            this.initList();
+            this.notificationService.success("SUCCESSFULLY_DELETED");
+
+          } else {
+            this.initList();
+            this.notificationService.error("FAILED_DELETED");
+          }
+
+          modalRef.close();
+        },
+        err => {
+          this.notificationService.error(err);
+          modalRef.close();
+        }
+      );
+    });
+
+  }
+
+  newKafkaModal() {
+    const modalRef = this.modalService.open(NewKafkaModalComponent, {
+      windowClass: "dl-md-modal kafkas",
+      centered: true
+    });
+
+    this.Kafka_New = new Kafka();
+    this.Kafka_Newbody = new Kafka();
+    modalRef.componentInstance.kafka = this.Kafka_Newbody;
+    modalRef.componentInstance.kafkaList_length = this.kafkaList.length;
+    modalRef.componentInstance.passEntry.subscribe(receivedEntry => {
+      this.Kafka_Newbody = receivedEntry;
+      this.kafkaApiService
+        .createNewKafka(this.Kafka_Newbody)
+        .subscribe(
+          res => {
+            this.spinner.hide();
+            if (res.statusCode == 200) {
+              this.Kafka_New = res.returnBody;
+              this.kafkaList.push(this.Kafka_New);
+              this.kafkaList = [...this.kafkaList];
+              this.initList();
+              this.notificationService.success("SUCCESSFULLY_CREARED");
+            } else {
+              this.initList();
+              this.notificationService.error("FAILED_CREARED");
+            }
+            modalRef.close();
+          },
+          err => {
+            this.spinner.hide();
+            this.notificationService.error(err);
+            modalRef.close();
+          }
+        );
+    });
+  }
+
+  cardMoreAction($event, id) {
+
+    if($event == "edit"){
+      this.editKafkaModal(id);
+    }else {
+      console.log($event,id);
+      this.deleteKafkaModel(id);
+    }
+  }
+
+  editKafkaModal(id: number) {
+    console.log("id", id)
+    const index = this.kafkaList.findIndex(t => t.id === id);
+    const modalRef = this.modalService.open(EditKafkaModalComponent, {
+      windowClass: "dl-md-modal kafkas",
+      centered: true
+    });
+    modalRef.componentInstance.editKafka = this.kafkaList[index];
+    modalRef.componentInstance.passEntry.subscribe(receivedEntry => {
+      this.Kafka_New = receivedEntry;
+      this.kafkaApiService
+        .updateKafka(this.Kafka_New)
+        .subscribe(
+          res => {
+            if (res.statusCode == 200) {
+              this.kafkaList[index] = this.Kafka_New;
+              this.kafkaList = [...this.kafkaList];
+              this.notificationService.success("SUCCESSFULLY_UPDATED");
+            } else {
+              this.notificationService.error("FAILED_UPDATED");
+            }
+            modalRef.close();
+          },
+          err => {
+            this.notificationService.error(err);
+            modalRef.close();
+          }
+        );
+    })
+  }
+}
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.css b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.css
new file mode 100644
index 00000000..7b11d9e7
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.css
@@ -0,0 +1,53 @@
+/*
+    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+.row-wrapper{
+  display: flex;
+}
+.row-quarter-item{
+  width: 20%;
+  margin-bottom: 15px;
+}
+.row-half-item{
+  width: 45%;
+}
+.row-half-item2{
+  width: 50%;
+}
+.usual-item{
+  margin-left: 2%;
+}
+.usual-item2{
+  margin-left: 6.5%;
+}
+input::-webkit-input-placeholder {
+  font-size: 12px;
+  color: #999999 !important;
+}
+input:-moz-placeholder {
+  /* Mozilla Firefox 4 to 18 */
+  font-size: 12px;
+  color: #999999 !important;
+}
+input::-moz-placeholder {
+  /* Mozilla Firefox 19+ */
+  font-size: 12px;
+  color: #999999 !important;
+}
+input::-ms-input-placeholder {
+  /* Internet Explorer 10+ */
+  font-size: 12px;
+  color: #999999 !important;
+}
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.html b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.html
new file mode 100644
index 00000000..7bf81c45
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.html
@@ -0,0 +1,193 @@
+<!--
+    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+-->
+<div class="p-1">
+  <div class="modal-header pb-0 border-0">
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-md-12">
+          <label class="dl-h3">{{ 'NEW_KAFKA' | translate }}</label>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-12">
+          <hr>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-body border-0">
+    <div class="container-fluid">
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'NAME' | translate }}</label>
+          </div>
+          <div>
+            <input #k_name [(ngModel)]="this.kafkaInput.name" class="form-control dl-input-text" placeholder="" type="text"/>
+          </div>
+        </div>
+
+        <div class="row-half-item usual-item2">
+          <div>
+            <label class="dl-emphasis1" >{{ 'STATUS' | translate }}</label>
+          </div>
+          <div>
+            <label class="dl-switch">
+              <input #k_enabled id="switch" type="checkbox" [(ngModel)]="this.kafkaInput.enabled"/>
+              <span class="dl-slider round"></span>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'BROKER_LIST' | translate }}</label>
+          </div>
+          <div>
+            <input #k_brokerList [(ngModel)]="this.kafkaInput.brokerList" class="form-control dl-input-text" type="text" placeholder="0.0.0.0" required="required" />
+          </div>
+        </div>
+
+        <div class="row-half-item usual-item2">
+          <div>
+            <label class="dl-emphasis1" >{{ 'ZOOKEEPER' | translate }}</label>
+          </div>
+          <div>
+            <input #k_zooKeeper [(ngModel)]="this.kafkaInput.zooKeeper" class="form-control dl-input-text" type="text" placeholder="0.0.0.0" required="required" />
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'Username' | translate }}</label>
+          </div>
+          <div>
+            <input #k_login [(ngModel)]="this.kafkaInput.login" class="form-control dl-input-text" type="text" placeholder="login" required="required" />
+          </div>
+        </div>
+
+        <div class="row-half-item usual-item2">
+          <div>
+            <label class="dl-emphasis1" >{{ 'Password' | translate }}</label>
+          </div>
+          <div>
+            <input #k_pass [(ngModel)]="this.kafkaInput.pass" class="form-control dl-input-text" type="text" placeholder="pass" required="required" />
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1">{{ 'AUTHENTICATION' | translate }}</label>
+          </div>
+          <div class="input-group row-half-item2">
+            <label class="input-group-text dl-input-chk-label">
+              <input #k_secure id="chkSaveRaw" [(ngModel)]="this.kafkaInput.secure" type="checkbox" />
+              <span class="dl-input-checkmark"></span>
+            </label>
+            <label class="form-control dl-input-chk" for="chkSaveRaw">
+              Secure
+            </label>
+          </div>
+        </div>
+
+        <div class="row-half-item usual-item2">
+          <div>
+            <label class="dl-emphasis1" >{{ 'SECURITY_PROTOCOL' | translate }}</label>
+          </div>
+          <div>
+            <select #k_securityProtocol class="custom-select dl-input-text" >
+              <option *ngFor="let item of protocols" [selected]="item == protocols[0]">{{ item }}</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'GROUP' | translate }}</label>
+          </div>
+          <div>
+            <input #k_group [(ngModel)]="this.kafkaInput.group" class="form-control dl-input-text" type="text" placeholder="dlgroup" required="required" />
+          </div>
+        </div>
+
+        <div class="row-half-item usual-item2">
+          <div>
+            <label class="dl-emphasis1" >{{ 'TIME_OUT' | translate }}</label>
+          </div>
+          <div>
+            <input #k_timeout [(ngModel)]="this.kafkaInput.timeout" class="form-control dl-input-text" type="text" placeholder="6" required="required" />
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group row row-wrapper">
+        <div class="row-half-item usual-item">
+          <div>
+            <label class="dl-emphasis1" >{{ 'EXCLUDED_TOPICS' | translate }}</label>
+          </div>
+          <div>
+            <div class="d-flex row align-items-center" *ngFor="let field of exTopicFields; let i = index">
+              <div class="order-1 usual-item2">
+                <input [(ngModel)]="field.item" class="form-control dl-input-text" placeholder="__consumer_offsets" type="text"/>
+              </div>
+              <div class="order-2">
+                <button type="button" class="btn dl-icon-enable p-2" (click)="addExTopicField()">
+                  <i class="fa fa-plus fa-xs" aria-hidden="true"></i>
+                </button>
+              </div>
+              <div class="order-3">
+                <button type="button" class="btn dl-icon-enable p-2" (click)="deleteExTopicField(i)">
+                  <i class="fa fa-trash fa-xs" aria-hidden="true"></i>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="modal-footer border-0 pt-0 pb-2">
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-md-7 p-0">
+        </div>
+        <div class="col-md-2 p-1">
+          <span>
+            <button type="button" class="btn dl-btn-dark btn-block" (click)="this.passBack()">
+              Save
+            </button>
+          </span>
+        </div>
+        <div class="col-md-2 p-1">
+          <span>
+            <button type="button" class="btn dl-btn-light btn-block" (click)="activeModal.close('Close click')">
+              Cancel
+            </button>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.spec.ts
new file mode 100644
index 00000000..e222d70d
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.spec.ts
@@ -0,0 +1,41 @@
+/*
+    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewKafkaModalComponent } from './new-kafka-modal.component';
+
+describe('NewKafkaModalComponent', () => {
+  let component: NewKafkaModalComponent;
+  let fixture: ComponentFixture<NewKafkaModalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NewKafkaModalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NewKafkaModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.ts
new file mode 100644
index 00000000..843799df
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.ts
@@ -0,0 +1,125 @@
+/*
+    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+
+/**
+ * @author Chunmeng Guo
+ */
+
+import {Component, EventEmitter, Input, OnInit, Output, ElementRef, ViewChild} from '@angular/core';
+
+import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
+import { RestApiService } from "src/app/core/services/rest-api.service";
+import { NgxSpinnerService } from "ngx-spinner";
+
+import { Kafka } from "../../../../core/models/kafka.model";
+
+@Component({
+  selector: 'app-new-kafka-modal',
+  templateUrl: './new-kafka-modal.component.html',
+  styleUrls: ['./new-kafka-modal.component.css']
+})
+export class NewKafkaModalComponent implements OnInit {
+  @Input() kafka: Kafka;
+  @Input() kafkaList_length;
+  @Output() passEntry: EventEmitter<any> = new EventEmitter();
+  kafkaInput: Kafka;
+  exTopicFields: Array<any> = [];
+  exTopicNewField: any = {};
+  protocols: Array<string> = ["SASL_PLAINTEXT"];
+
+  @ViewChild("k_name") k_name: ElementRef;
+  @ViewChild("k_login") k_login: ElementRef;
+  @ViewChild("k_pass") k_pass: ElementRef;
+  @ViewChild("k_enabled") k_enabled: ElementRef;
+  @ViewChild("k_brokerList") k_brokerList: ElementRef;
+  @ViewChild("k_zooKeeper") k_zooKeeper: ElementRef;
+  @ViewChild("k_group") k_group: ElementRef;
+  @ViewChild("k_secure") k_secure: ElementRef;
+  @ViewChild("k_securityProtocol") k_securityProtocol: ElementRef;
+  @ViewChild("k_includedTopic") k_includedTopic: ElementRef;
+  @ViewChild("k_excludedTopic") k_excludedTopic: ElementRef;
+  @ViewChild("k_consumerCount") k_consumerCount: ElementRef;
+  @ViewChild("k_timeout") k_timeout: ElementRef;
+
+  constructor(
+    private activeModal: NgbActiveModal,
+    private kafkaApiService: RestApiService,
+    private spinner: NgxSpinnerService
+  ) { }
+
+  ngOnInit() {
+    // cache for display
+    this.kafkaInput = new Kafka();
+    const feed = {
+      id: null,
+      name: this.kafka.name,
+      enabled: this.kafka.enabled,
+      brokerList: this.kafka.brokerList,
+      zooKeeper: this.kafka.zooKeeper,
+      group: this.kafka.group,
+      secure: this.kafka.secure,
+      login: this.kafka.login,
+      pass: this.kafka.pass,
+      securityProtocol: this.kafka.securityProtocol,
+      includedTopic: this.kafka.includedTopic,
+      excludedTopic: this.kafka.excludedTopic,
+      consumerCount: this.kafka.consumerCount,
+      timeout: this.kafka.timeout
+    };
+    this.kafkaInput = feed;
+    this.exTopicFields = [];
+    if (this.kafkaInput.excludedTopic != null) {
+      var feeds = this.kafkaInput.excludedTopic.split(",");
+      for (var i = 0; i < feeds.length; i++) {
+        var data = { item: feed[i] };
+        this.exTopicFields.push(data);
+      }
+    } else {
+      this.exTopicFields.push([]);
+    }
+  }
+
+  passBack() {
+    this.spinner.show();
+    if (this.kafkaInput.name == '' || this.kafkaInput.name == undefined) {
+      return false;
+    }
+    this.kafka = this.kafkaInput;
+    this.kafka.securityProtocol = this.k_securityProtocol.nativeElement.value;
+    for (var i = 0; i < this.exTopicFields.length; i++) {
+      let item = this.exTopicFields[i].item;
+      if (i == 0) {
+        this.kafka.excludedTopic = item;
+      } else {
+        this.kafka.excludedTopic = this.kafka.excludedTopic + "," + item;
+      }
+    }
+    console.log(this.kafka);
+    this.passEntry.emit(this.kafka);
+
+  }
+
+  addExTopicField() {
+    this.exTopicFields.push(this.exTopicNewField);
+    this.exTopicNewField = {};
+  }
+
+  deleteExTopicField(index: number) {
+    if (this.exTopicFields.length > 1) {
+      this.exTopicFields.splice(index, 1);
+    }
+  }
+}
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.css b/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.css
index ed7832ae..7541afa0 100644
--- a/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.css
+++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.css
@@ -13,11 +13,4 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
-.kafka-li{
-  float: left;
-  list-style: none;
-  margin:15px 0;
-}
-.add-kafka{
-  cursor: pointer;
-}
+
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.html b/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.html
index 63a2c1fe..357e53fa 100644
--- a/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.html
+++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.html
@@ -17,18 +17,7 @@
   <div class="col-md-12 pb-2 path">
     Home > Kafka
   </div>
-
   <div class="col-md-12">
-    <ul class="kafka-list clearfix">
-      <li *ngFor="let kafka of this.kafkas;let thisIndex=index" class="col-md-3 kafka-li">
-        <app-card [iconPath]="this.cardIconPath" [iconSize]="'sm'" [subcontent]="kafka.name"
-                  [modifiable]="this.cardModifiable">
-        </app-card>
-      </li>
-      <li class="col-md-3 kafka-li add-kafka">
-        <app-card [iconPath]="this.cardAddicon" [iconSize]="'sm'">
-        </app-card>
-      </li>
-    </ul>
+    <app-kafka-list></app-kafka-list>
   </div>
 </div>
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.ts
index 281a9b16..adeb3c8e 100644
--- a/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.ts
+++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.ts
@@ -13,97 +13,27 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
-import { kafka } from "../../core/models/kafka.model";
-import { AdminService } from "../../core/services/admin.service";
-import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
 
-import { RestApiService } from "src/app/core/services/rest-api.service";
+/**
+ * @author Chunmeng Guo
+ */
+
+import { Component, OnInit } from '@angular/core';
+import { AdminService } from "../../core/services/admin.service";
 
-// Loading spinner
-import { NgxSpinnerService } from "ngx-spinner";
-import { ToastrNotificationService } from "../../shared/components/toastr-notification/toastr-notification.service";
 @Component({
   selector: 'app-kafka',
   templateUrl: './kafka.component.html',
   styleUrls: ['./kafka.component.css']
 })
 export class KafkaComponent implements OnInit {
-  kafkaList: any = [];
-  kafkas: kafka[] = [];
-
-  cardIconPath: string;
-  cardModifiable: boolean;
-  cardAddicon: string;
 
-  constructor(
-    private adminService: AdminService,
-    private kafkaApiService: RestApiService,
-    private notificationService: ToastrNotificationService,
-    private modalService: NgbModal,
-    private spinner: NgxSpinnerService
-  ) {
+  constructor(private adminService: AdminService) {
     // Set page title
     this.adminService.setTitle("SIDEBAR.KAFKA");
-    this.initList();
   }
 
   ngOnInit() {
-    this.spinner.show();
-    this.cardIconPath = "assets/icons/kafka_able.svg";
-    this.cardModifiable = true;
-    this.cardAddicon = "assets/icons/add.svg";
-  }
-  initList() {
-    this.initData().then(data => {
-      this.initDbsList(this.kafkaList).then(data => {
-        this.kafkas = data;
-        console.log(this.kafkas, "kafkas[]")
-      });
-    });
-  }
-
-  async initData() {
-    this.kafkaList = [];
-    this.kafkaList = await this.getKafkaList();
-    setTimeout(() => {
-      this.spinner.hide();
-    }, 500);
   }
 
-  getKafkaList() {
-    let data: any;
-    data = this.kafkaApiService.getAllKafkaList().toPromise();
-    return data;
-  }
-
-  async initDbsList(kafkaList: []) {
-    let k: kafka[] = [];
-
-    if (kafkaList.length > 0) {
-      for (let i = 0; i < kafkaList.length; i++) {
-        let data = kafkaList[i];
-        let feed = {
-          id: data["id"],
-          name: data["name"],
-          enabled: data["enabled"],
-          brokerList: data["brokerList"],
-          zooKeeper: data["zooKeeper"],
-          group: data["group"],
-          secure: data["secure"],
-          login: data["login"],
-          pass: data["pass"],
-          securityProtocol: data["securityProtocol"],
-          includedTopic: data["includedTopic"],
-          excludedTopic: data["excludedTopic"],
-          consumerCount: data["consumerCount"],
-          timeout: data["timeout"]
-        };
-        k.push(feed);
-      }
-    }
-    return k;
-  }
-
-
 }
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 e484b3f7..436fcc22 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
@@ -65,5 +65,13 @@
   "FAILED_DELETED": "Failed deleted.",
   "Deploy_SUCCESSFULLY": "Deploy successfully.",
   "Deploy_FAILED": "Deploy failed.",
-  "ARE_YOU_SURE_DELETE": "Are you sure you want to delete it?"
-}
\ No newline at end of file
+  "ARE_YOU_SURE_DELETE": "Are you sure you want to delete it?",
+  "NEW_KAFKA": "New Kafka",
+  "BROKER_LIST": "Broker list",
+  "ZOOKEEPER": "Zookeeper",
+  "SECURITY_PROTOCOL": "Security Protocol",
+  "GROUP": "Group",
+  "EXCLUDED_TOPICS": "Excluded topics",
+  "TIME_OUT": "Time out(sec)",
+  "EDIT_KAFKA": "Edit Kafka"
+}
diff --git a/components/datalake-handler/admin/src/src/assets/icons/kafka_able.svg b/components/datalake-handler/admin/src/src/assets/icons/kafka_able.svg
index 3bb663c2..a4b094de 100755
--- a/components/datalake-handler/admin/src/src/assets/icons/kafka_able.svg
+++ b/components/datalake-handler/admin/src/src/assets/icons/kafka_able.svg
@@ -3,9 +3,9 @@
 <svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

 	 viewBox="348 -952.7 1538 2500" style="enable-background:new 348 -952.7 1538 2500;" xml:space="preserve">

 <style type="text/css">

-	.st0{fill:#5DBEBB;}

+	.st2{fill:#5DBEBB;}

 </style>

-<path class="st0" d="M1560.5,430.7c-97.2,0-184.4,43.1-244.1,110.9l-153-108.3c16.2-44.7,25.6-92.7,25.6-143

+<path class="st2" d="M1560.5,430.7c-97.2,0-184.4,43.1-244.1,110.9l-153-108.3c16.2-44.7,25.6-92.7,25.6-143

 	c0-49.4-9-96.6-24.7-140.6l152.6-107.1c59.7,67.5,146.6,110.3,243.6,110.3c179.5,0,325.5-146,325.5-325.5s-146-325.5-325.5-325.5

 	s-325.5,146-325.5,325.5c0,32.1,4.9,63.1,13.6,92.5L1095.8,27.1C1032-52.1,940.1-107.3,835.4-124.2v-184.1

 	c147.5-31,258.6-162,258.6-318.5c0-179.5-146-325.5-325.5-325.5s-325.5,146-325.5,325.5c0,154.4,108.2,283.8,252.7,317v186.5

diff --git a/components/datalake-handler/admin/src/src/assets/icons/kafka_disable.svg b/components/datalake-handler/admin/src/src/assets/icons/kafka_disable.svg
index 27d290fa..61b558fa 100755
--- a/components/datalake-handler/admin/src/src/assets/icons/kafka_disable.svg
+++ b/components/datalake-handler/admin/src/src/assets/icons/kafka_disable.svg
@@ -3,9 +3,9 @@
 <svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

 	 viewBox="348 -952.7 1538 2500" style="enable-background:new 348 -952.7 1538 2500;" xml:space="preserve">

 <style type="text/css">

-	.st0{fill:#D2D3D5;}

+  .st1{fill:#D2D3D5;}

 </style>

-<path class="st0" d="M1560.5,430.7c-97.2,0-184.4,43.1-244.1,110.9l-153-108.3c16.2-44.7,25.6-92.7,25.6-143

+<path class="st1" d="M1560.5,430.7c-97.2,0-184.4,43.1-244.1,110.9l-153-108.3c16.2-44.7,25.6-92.7,25.6-143

 	c0-49.4-9-96.6-24.7-140.6l152.6-107.1c59.7,67.5,146.6,110.3,243.6,110.3c179.5,0,325.5-146,325.5-325.5s-146-325.5-325.5-325.5

 	s-325.5,146-325.5,325.5c0,32.1,4.9,63.1,13.6,92.5L1095.8,27.1C1032-52.1,940.1-107.3,835.4-124.2v-184.1

 	c147.5-31,258.6-162,258.6-318.5c0-179.5-146-325.5-325.5-325.5s-325.5,146-325.5,325.5c0,154.4,108.2,283.8,252.7,317v186.5