From 6d28fc1cf92116eb513eef783face6abcea1170b Mon Sep 17 00:00:00 2001 From: Ekko Chang Date: Tue, 21 Jan 2020 06:28:12 +0000 Subject: To apply the shared module into the kafka page Issue-ID: DCAEGEN2-2010 Signed-off-by: Ekko Chang Change-Id: I830dcc1094d8e70045e0c0744f13f6a7b83d7cc1 --- .../admin/src/src/app/app.module.ts | 7 +- .../admin/src/src/app/core/models/kafka.model.ts | 31 ++- .../src/src/app/core/services/admin.service.ts | 9 +- .../src/src/app/core/services/rest-api.service.ts | 24 +- .../src/app/shared/modules/card/card.component.css | 6 +- .../app/shared/modules/card/card.component.html | 50 ++-- .../src/app/shared/modules/card/card.component.ts | 21 +- .../kafka/kafka-list/kafka-list.component.css | 41 --- .../kafka/kafka-list/kafka-list.component.html | 25 +- .../views/kafka/kafka-list/kafka-list.component.ts | 303 ++++++++------------- .../kafka-modal/kafka-modal.component.css | 0 .../kafka-modal/kafka-modal.component.html | 157 +++++++++++ .../kafka-modal/kafka-modal.component.spec.ts | 45 +++ .../kafka-modal/kafka-modal.component.ts | 91 +++++++ .../src/src/app/views/test/test.component.html | 2 +- .../topic-modal/topic-modal.component.html | 2 +- .../topic-modal/topic-modal.component.ts | 13 +- .../admin/src/src/assets/i18n/en-us.json | 2 +- 18 files changed, 509 insertions(+), 320 deletions(-) create mode 100644 components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.css create mode 100644 components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.html create mode 100644 components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.spec.ts create mode 100644 components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.ts 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 ddc0c10c..e15876a8 100644 --- a/components/datalake-handler/admin/src/src/app/app.module.ts +++ b/components/datalake-handler/admin/src/src/app/app.module.ts @@ -105,6 +105,7 @@ import { IconComponent } from "./shared/components/icon/icon.component"; import { MatTabsModule } from "@angular/material"; import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { TopicModalComponent } from "./views/topics/topic-list/topic-modal/topic-modal.component"; +import { KafkaModalComponent } from './views/kafka/kafka-list/kafka-modal/kafka-modal.component'; @NgModule({ declarations: [ @@ -151,7 +152,8 @@ import { TopicModalComponent } from "./views/topics/topic-list/topic-modal/topic ModalToolsComponent, ToolAddModalComponent, IconComponent, - TopicModalComponent + TopicModalComponent, + KafkaModalComponent ], imports: [ BrowserModule, @@ -195,7 +197,8 @@ import { TopicModalComponent } from "./views/topics/topic-list/topic-modal/topic EditKafkaModalComponent, ToolAddModalComponent, ModalToolsComponent, - TopicModalComponent + TopicModalComponent, + KafkaModalComponent ] }) 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 34f283fb..2b1803f3 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 @@ -15,20 +15,21 @@ */ export class Kafka { - id: number; - name: string; - enabled: boolean; - brokerList: string; - zooKeeper: string; - group: string; - secure: boolean; - login: string; - pass: string; - securityProtocol: string; - includedTopic: string; - excludedTopic: string; - consumerCount: number; - timeout: number; + public id: number; + public name: string; + public enabled: boolean; + public brokerList: string; + public zooKeeper: string; + public group: string; + public secure: boolean; + public login: string; + public pass: string; + public securityProtocol: string; + public includedTopic: string; + public excludedTopic: string; + public consumerCount: number; + public timeout: number; // for UI display - checkedToSave: boolean; + public checkedToSave: boolean; + public iconPath: string; } diff --git a/components/datalake-handler/admin/src/src/app/core/services/admin.service.ts b/components/datalake-handler/admin/src/src/app/core/services/admin.service.ts index 8e126a0d..307f51e9 100644 --- a/components/datalake-handler/admin/src/src/app/core/services/admin.service.ts +++ b/components/datalake-handler/admin/src/src/app/core/services/admin.service.ts @@ -2,7 +2,7 @@ * ============LICENSE_START======================================================= * ONAP : DataLake * ================================================================================ - * Copyright 2019 QCT + * Copyright 2019 - 2020 QCT *================================================================================= * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -47,4 +47,11 @@ export class AdminService { onKeyPressNumber(data: any) { return (data.target.value = data.target.value.replace(/[^0-9.]/g, "")); } + + onKeyPressSymbol(data: any) { + return (data.target.value = data.target.value.replace( + /[~`!#$%\^&*+=\-\[\]\\';,/{}()|\\":<>\?@.]/g, + "" + )); + } } 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 98eef9ab..83d814e3 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 @@ -339,34 +339,26 @@ export class RestApiService { .pipe(retry(1), catchError(this.handleError)); } - getAllKafkaList(): Observable { - return this.http - .get(prefix + "kafkas") - .pipe(retry(1), catchError(this.handleError)); - } - - deleteKafka(id): Observable { - return this.http.delete(prefix + "kafkas/" + id).pipe( - //online + public updateKafka(k: Kafka): Observable { + return this.http.put(prefix + "kafkas/" + k.id, k).pipe( retry(1), - map(this.extractData2), + tap(_ => this.extractData), catchError(this.handleError) ); } - createNewKafka(k: Kafka): Observable { - return this.http.post(prefix + "kafkas", k).pipe( + public addKafka(k: Kafka): Observable { + return this.http.post(prefix + "kafkas", k).pipe( retry(1), tap(_ => this.extractData), catchError(this.handleError) ); } - updateKafka(k: Kafka): Observable { - let id = k.id; - return this.http.put(prefix + "kafkas/" + id, k).pipe( + public deleteKafka(id: string | number): Observable { + return this.http.delete(prefix + "kafkas/" + id).pipe( retry(1), - tap(_ => this.extractData), + tap(_ => console.log(`deleted kafka id=${id}`)), catchError(this.handleError) ); } diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.css b/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.css index 4b76e13c..7340ac85 100644 --- a/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.css +++ b/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.css @@ -2,7 +2,7 @@ * ============LICENSE_START======================================================= * ONAP : DataLake * ================================================================================ -* Copyright 2019 QCT +* Copyright 2019 - 2020 QCT *================================================================================= * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -36,3 +36,7 @@ font-weight: 600; font-size: 16px; } + +.card-panel .add-style { + cursor: pointer; +} diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.html b/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.html index 7b8d865b..101b7fc5 100644 --- a/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.html +++ b/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.html @@ -2,7 +2,7 @@ ============LICENSE_START======================================================= ONAP : DataLake ================================================================================ -Copyright 2019 QCT +Copyright 2019 - 2020 QCT ================================================================================= Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -17,47 +17,51 @@ See the License for the specific language governing permissions and limitations under the License. ============LICENSE_END========================================================= --> -
-
+
+
{{ this.title }}
-
+
+ - + + +
- -
-
+
-
- - - - - - - - - - - +
+
+
+ +
+
+ +
+
+ +
+
+
{{ this.content }}
-
+
{{ this.subcontent }}
diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.ts b/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.ts index 9be0b84a..792aa8cc 100644 --- a/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.ts +++ b/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.ts @@ -2,7 +2,7 @@ * ============LICENSE_START======================================================= * ONAP : DataLake * ================================================================================ - * Copyright 2019 QCT + * Copyright 2019 - 2020 QCT *================================================================================= * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -23,7 +23,7 @@ * @author Ekko Chang * */ -import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core"; +import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core"; @Component({ selector: "app-card", @@ -38,19 +38,18 @@ export class CardComponent implements OnInit { @Input() modifiable: boolean; @Input() iconSize: string[] = ["sm", "md", "lg"]; - @Output() cardAction = new EventEmitter(); - @Output() edit = new EventEmitter(); + @Output() cardClick = new EventEmitter(); + @Output() cardMoreActionClick = new EventEmitter(); - constructor() {} + constructor() { } - ngOnInit() {} + ngOnInit() { } - cardClick() { - this.cardAction.emit(); + cardClickAction() { + this.cardClick.emit(); } - cardMoreAction(type) { - this.edit.emit(type); + cardMoreClickAction(action: any) { + this.cardMoreActionClick.emit(action); } - } 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 index 1c7a3867..8b137891 100644 --- 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 @@ -1,42 +1 @@ -/* - 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 index ec611cc0..b0390d7d 100644 --- 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 @@ -1,5 +1,5 @@ -
-
    -
  • - - -
    • +
    +
    + + +
    -
  • - - -
    • -
+
+ +
+ +
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 index b8dbb0e0..46a46a02 100644 --- 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 @@ -1,5 +1,5 @@ /* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + Copyright (C) 2019 - 2020 CMCC, Inc. and others. All rights reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -16,238 +16,161 @@ /** * @author Chunmeng Guo + * @contributor Ekko Chang */ -import { Component, OnInit, ElementRef } from '@angular/core'; +import { Component, OnInit } 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"; +import { Kafka } from "src/app/core/models/kafka.model"; // Loading spinner import { NgxSpinnerService } from "ngx-spinner"; -// notify +import { map, mergeMap } from "rxjs/operators"; +import { from, forkJoin } from "rxjs"; + +// 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 {EditKafkaModalComponent} from "./edit-kafka-modal/edit-kafka-modal.component"; +import { AlertComponent } from "src/app/shared/components/alert/alert.component"; +import { ModalContentData } from "src/app/shared/modules/modal/modal.data"; +import { ModalComponent } from "src/app/shared/modules/modal/modal.component"; +import { KafkaModalComponent } from "src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component"; @Component({ - selector: 'app-kafka-list', - templateUrl: './kafka-list.component.html', - styleUrls: ['./kafka-list.component.css'] + selector: "app-kafka-list", + templateUrl: "./kafka-list.component.html", + styleUrls: ["./kafka-list.component.css"] }) export class KafkaListComponent implements OnInit { + kafkas: Array = []; - kafkaList: any = []; - kafkas: Kafka[] = []; - cardIconPath: string; - cardModifiable: boolean; - cardAddicon: string; - Kafka_New: Kafka; - Kafka_Newbody: Kafka; - cardIconPathList: any = []; - kafkaData: any = []; + // app-card parameters + cardModifiable: boolean = true; + cardAddiconPath: string = "assets/icons/add.svg"; constructor( - private kafkaApiService: RestApiService, + private restApiService: 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"; - this.cardIconPathList.splice(0,this.cardIconPathList.length); - for (let i = 0; i < this.kafkas.length; i++) { - this.cardIconPath = (this.kafkas[i].enabled == true) ? a : b; - this.cardIconPathList.push(this.cardIconPath); - } + let t_kafkas: Array = []; + + const get_kafkas = this.restApiService.getAllKafka().pipe( + mergeMap(ks => from(ks)), + map(k => { + if (k.enabled == true) { + k.iconPath = "assets/icons/kafka_able.svg"; + } else { + k.iconPath = "assets/icons/kafka_disable.svg"; } - console.log(this.cardIconPathList, "kafkas[]"); - }); + t_kafkas.push(k); + }) + ); + + forkJoin(get_kafkas).subscribe(data => { + this.kafkas = t_kafkas; + setTimeout(() => { + this.spinner.hide(); + }, 500); }); } - 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 getKafkaDetailModal(id: number) { - this.kafkaData = []; - this.kafkaData = await this.getKafkaModal(id); - return this.kafkaData; - } - - getKafkaModal(id: number) { - return this.kafkaApiService.getKafka(id).toPromise(); - } - - 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); - } + cardMoreClickAction(mode: string, k: Kafka) { + switch (mode) { + case "edit": + this.openModal("edit", k); + break; + case "delete": + const modalRef = this.modalService.open(AlertComponent, { + size: "sm", + centered: true, + backdrop: "static" + }); + modalRef.componentInstance.message = "ARE_YOU_SURE_DELETE"; + modalRef.componentInstance.passEntry.subscribe(recevicedEntry => { + this.restApiService.deleteKafka(k.id).subscribe( + res => { + this.ngOnInit(); + setTimeout(() => { + this.notificationService.success("SUCCESSFULLY_DELETED"); + }, 500); + }, + err => { + this.notificationService.error(err); + } + ); + modalRef.close(); + }); + break; } - return k; } - deleteKafkaModel(id: number) { - const index = this.kafkaList.findIndex(t => t.id === id); - const modalRef = this.modalService.open(AlertComponent, { - size: "sm", - centered: true + openModal(mode: string, k: Kafka) { + const modalRef = this.modalService.open(ModalComponent, { + size: "lg", + centered: true, + backdrop: "static" }); - 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(); - } - ); - }); + switch (mode) { + case "new": + let newKafka: Kafka; + let componentNew = new ModalContentData(KafkaModalComponent, newKafka); - } - - newKafkaModal() { - const modalRef = this.modalService.open(NewKafkaModalComponent, { - windowClass: "dl-md-modal kafkas", - centered: true - }); + modalRef.componentInstance.title = "NEW_KAFKA"; + modalRef.componentInstance.notice = ""; + modalRef.componentInstance.mode = "new"; + modalRef.componentInstance.component = componentNew; - 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.componentInstance.passEntry.subscribe((data: Kafka) => { + newKafka = Object.assign({}, data); + this.restApiService.addKafka(newKafka).subscribe( + res => { + this.ngOnInit(); + setTimeout(() => { + this.notificationService.success("SUCCESSFULLY_CREARED"); + }, 500); + }, + err => { + this.notificationService.error(err); } - modalRef.close(); - }, - err => { - this.spinner.hide(); - this.notificationService.error(err); - modalRef.close(); - } + ); + modalRef.close(); + }); + break; + case "edit": + let editKafka: Kafka = k; + let componentEdit = new ModalContentData( + KafkaModalComponent, + editKafka ); - }); - } - cardMoreAction($event, id) { - - if($event == "edit"){ - this.editKafkaModal(id); - }else { - console.log($event,id); - this.deleteKafkaModel(id); - } - } + modalRef.componentInstance.title = editKafka.name; + modalRef.componentInstance.notice = ""; + modalRef.componentInstance.mode = "edit"; + modalRef.componentInstance.component = componentEdit; - editKafkaModal(id: number) { - this.getKafkaDetailModal(id).then(data => { - 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 = data; - modalRef.componentInstance.passEntry.subscribe(receivedEntry => { - this.Kafka_New = receivedEntry; - this.kafkaApiService - .updateKafka(this.Kafka_New) - .subscribe( + modalRef.componentInstance.passEntry.subscribe((data: Kafka) => { + editKafka = Object.assign({}, data); + this.restApiService.updateKafka(editKafka).subscribe( res => { - this.spinner.hide(); - if (res.statusCode == 200) { - this.kafkaList[index] = this.Kafka_New; - this.kafkaList = [...this.kafkaList]; + this.ngOnInit(); + setTimeout(() => { this.notificationService.success("SUCCESSFULLY_UPDATED"); - this.initList(); - } else { - this.notificationService.error("FAILED_UPDATED"); - } - modalRef.close(); + }, 500); }, err => { this.notificationService.error(err); - modalRef.close(); } ); - }); - }); - + modalRef.close(); + }); + break; + } } } diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.css b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.css new file mode 100644 index 00000000..e69de29b diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.html b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.html new file mode 100644 index 00000000..a0930958 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.html @@ -0,0 +1,157 @@ + + + +
+ +
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+ +
+
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.spec.ts new file mode 100644 index 00000000..c6da2218 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.spec.ts @@ -0,0 +1,45 @@ +/* + * ============LICENSE_START======================================================= + * ONAP : DataLake + * ================================================================================ + * Copyright 2019 - 2020 QCT + *================================================================================= + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { KafkaModalComponent } from './kafka-modal.component'; + +describe('KafkaModalComponent', () => { + let component: KafkaModalComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ KafkaModalComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(KafkaModalComponent); + 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-modal/kafka-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.ts new file mode 100644 index 00000000..0c747d99 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.ts @@ -0,0 +1,91 @@ +/* + * ============LICENSE_START======================================================= + * ONAP : DataLake + * ================================================================================ + * Copyright 2019 - 2020 QCT + *================================================================================= + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * + * @author Ekko Chang + * + */ + +import { Component, OnInit, Input } from "@angular/core"; + +import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; +import { AdminService } from "src/app/core/services/admin.service"; +import { Kafka } from "src/app/core/models/kafka.model"; + +@Component({ + selector: "app-kafka-modal", + templateUrl: "./kafka-modal.component.html", + styleUrls: ["./kafka-modal.component.css"] +}) +export class KafkaModalComponent implements OnInit { + @Input() data: Kafka; + @Input() mode: string; + + securityProtocol: Array = ["None", "SASL_PLAINTEXT"]; + extenFields: Array = []; + newField: any = {}; + + constructor( + public activeModal: NgbActiveModal, + public adminService: AdminService + ) {} + + ngOnInit() { + // Get excludedTopic field + this.extenFields = []; + if (this.data.excludedTopic != null) { + let feed = this.data.excludedTopic.split(","); + for (let i = 0; i < feed.length; i++) { + let data = { item: feed[i] }; + this.extenFields.push(data); + } + } else { + this.extenFields.push([]); + } + } + + onClickAddIdField() { + this.extenFields.push(this.newField); + this.newField = {}; + this.onChangeSaveIdField(); + } + + onClickDelIdField(index: number) { + if (this.extenFields.length > 1) { + this.extenFields.splice(index, 1); + this.onChangeSaveIdField(); + } + } + + onChangeSaveIdField() { + this.data.excludedTopic = ""; + + for (let i = 0; i < this.extenFields.length; i++) { + if (this.extenFields[i].item) { + if (this.data.excludedTopic == "") { + this.data.excludedTopic = this.extenFields[i].item; + } else { + this.data.excludedTopic += "," + this.extenFields[i].item; + } + } + } + } +} diff --git a/components/datalake-handler/admin/src/src/app/views/test/test.component.html b/components/datalake-handler/admin/src/src/app/views/test/test.component.html index 549fa545..75d0e1fb 100644 --- a/components/datalake-handler/admin/src/src/app/views/test/test.component.html +++ b/components/datalake-handler/admin/src/src/app/views/test/test.component.html @@ -9,7 +9,7 @@
- +
diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.html b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.html index f5f3a7ed..849c145a 100644 --- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.html +++ b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.html @@ -134,7 +134,7 @@ limitations under the License.
+ type="text" (change)="onChangeSaveIdField()" (input)="this.adminService.onKeyPressSymbol($event)" />