diff options
18 files changed, 509 insertions, 320 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 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<any> { - return this.http - .get<any>(prefix + "kafkas") - .pipe(retry(1), catchError(this.handleError)); - } - - deleteKafka(id): Observable<any> { - return this.http.delete(prefix + "kafkas/" + id).pipe( - //online + public updateKafka(k: Kafka): Observable<Kafka> { + return this.http.put<Kafka>(prefix + "kafkas/" + k.id, k).pipe( retry(1), - map(this.extractData2), + tap(_ => this.extractData), catchError(this.handleError) ); } - createNewKafka(k: Kafka): Observable<any> { - return this.http.post(prefix + "kafkas", k).pipe( + public addKafka(k: Kafka): Observable<Kafka> { + return this.http.post<Kafka>(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( + public deleteKafka(id: string | number): Observable<Kafka> { + return this.http.delete<Kafka>(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========================================================= --> -<div class="card-panel d-flex flex-column" (click)="cardClick()"> - <div class="d-flex flex-row p-2"> +<div class="card-panel d-flex flex-column"> + <div class="d-flex flex-row"> <div class="dl-h4 title mr-auto ml-3 mt-2">{{ this.title }}</div> - <div *ngIf="this.modifiable" class="ml-auto dropdown action-icon-dropdown" data-boundary="window"> + <div *ngIf="this.modifiable" class="ml-auto dropdown action-icon-dropdown mr-1 mt-1" data-boundary="window"> + <a class="badge badge-light action-icon-dropdown" data-toggle="dropdown" style="cursor: pointer"> - <i class="fas fa-ellipsis-h fa-2x dl-icon-enable"></i> + <i class="m-2 fas fa-ellipsis-h fa-2x dl-icon-enable"></i> </a> + + <div class="dropdown-menu action-icon-btn"> - <button class="dropdown-item" type="button" (click)="cardMoreAction('edit')"> - {{ 'EDIT' | translate }} + <button class="dropdown-item" type="button" (click)="cardMoreClickAction('edit')"> + {{ "EDIT" | translate }} </button> - <button class="dropdown-item" type="button" (click)="cardMoreAction('delete')"> - {{ 'DELETE' | translate }} + <button class="dropdown-item" type="button" (click)="cardMoreClickAction('delete')"> + {{ "DELETE" | translate }} </button> </div> </div> </div> - <div class="mt-auto align-self-center p-2"> + <div class="mt-auto align-self-center"> <!-- show icon --> - <div *ngIf="this.iconPath"> - <span [ngSwitch]="this.iconSize"> - <span *ngSwitchCase="'sm'"> - <svg-icon [src]="this.iconPath" [svgStyle]="{ 'width.px':80 }"></svg-icon> - </span> - <span *ngSwitchCase="'lg'"> - <svg-icon [src]="this.iconPath" [svgStyle]="{ 'width.px':180 }"></svg-icon> - </span> - <span *ngSwitchDefault> - <svg-icon [src]="this.iconPath" [svgStyle]="{ 'width.px':150 }"></svg-icon> - </span> - </span> + <div *ngIf="this.iconPath" class="add-style" (click)="cardClickAction()"> + <div [ngSwitch]=" this.iconSize"> + <div *ngSwitchCase="'sm'"> + <img src="{{ this.iconPath }}" style="width: 60px; height:60px;"> + </div> + <div *ngSwitchCase="'md'"> + <img src="{{ this.iconPath }}" style="width: 100px; height:100px;"> + </div> + <div *ngSwitchCase="'lg'"> + <img src="{{ this.iconPath }}" style="width: 140px; height:140px;"> + </div> + </div> </div> + <!-- show string --> <div *ngIf="this.content" class="dl-h1"> {{ this.content }} </div> </div> - <div class="infoname align-self-center mt-auto p-2"> + <div class="infoname align-self-center mt-auto pb-2"> {{ this.subcontent }} </div> </div> 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<object>(); - @Output() edit = new EventEmitter<object>(); + @Output() cardClick = new EventEmitter<object>(); + @Output() cardMoreActionClick = new EventEmitter<object>(); - 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 @@ <!-- - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + Copyright (C) 2019 - 2020 CMCC, Inc. and others. All rights reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -13,18 +13,17 @@ 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> +<div class="d-flex flex-row flex-nowrap"> + <div class="col-md-3" *ngFor="let kafka of this.kafkas; let thisIndex = index"> + <app-card [iconPath]="kafka.iconPath" [iconSize]="'md'" [subcontent]="kafka.name" [modifiable]="this.cardModifiable" + (cardClick)="openModal('edit', kafka)" (cardMoreActionClick)="cardMoreClickAction($event, kafka)"> + </app-card> + </div> - <li class="col-md-3 kafka-li add-kafka"> - <app-card [iconPath]="this.cardAddicon" [iconSize]="'sm'" (click)="newKafkaModal()"> - </app-card> - </li> - </ul> + <div class="col-md-3"> + <app-card [iconPath]="this.cardAddiconPath" [iconSize]="'sm'" (click)="openModal('new')"> + </app-card> </div> + +</div> 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<Kafka> = []; - 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<Kafka> = []; + + 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 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal/kafka-modal.component.css 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 @@ +<!-- +============LICENSE_START======================================================= +ONAP : DataLake +================================================================================ +Copyright 2019 - 2020 QCT +================================================================================= +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +============LICENSE_END========================================================= +--> + + +<div class="container p-4"> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ "NAME" | translate }}</label> + </div> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'STATUS' | translate }}</label> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <input [(ngModel)]="this.data.name" class="form-control dl-input-text" type="text" /> + </div> + <div class="col-md-6"> + <label class="dl-switch"> + <input id="switch" type="checkbox" [(ngModel)]="this.data.enabled" /> + <span class="dl-slider round"></span> + </label> + </div> + </div> + </div> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'BROKER_LIST' | translate }}</label> + </div> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'ZOOKEEPER' | translate }}</label> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <input [(ngModel)]="this.data.brokerList" class="form-control dl-input-text" type="text" /> + </div> + <div class="col-md-6"> + <input [(ngModel)]="this.data.zooKeeper" class="form-control dl-input-text" type="text" /> + </div> + </div> + </div> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'Username' | translate }}</label> + </div> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'Password' | translate }}</label> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <input [(ngModel)]="this.data.login" class="form-control dl-input-text" type="text" /> + </div> + <div class="col-md-6"> + <input [(ngModel)]="this.data.pass" class="form-control dl-input-text" type="text" /> + </div> + </div> + </div> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'AUTHENTICATION' | translate }}</label> + </div> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'SECURITY_PROTOCOL' | translate }}</label> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <label class="dl-switch"> + <input id="switch" type="checkbox" [(ngModel)]="this.data.secure" /> + <span class="dl-slider round"></span> + </label> + </div> + <div class="col-md-6"> + <select [(ngModel)]="this.data.securityProtocol" class="custom-select dl-input-text"> + <option *ngFor="let item of securityProtocol" [selected]="item == this.data.securityProtocol"> + {{ item }} + </option> + </select> + </div> + </div> + </div> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'GROUP' | translate }}</label> + </div> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'TIME_OUT' | translate }}</label> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <input [(ngModel)]="this.data.group" class="form-control dl-input-text" type="text" /> + </div> + <div class="col-md-6"> + <input [(ngModel)]="this.data.timeout" class="form-control dl-input-text" type="text" + (input)="this.adminService.onKeyPressNumber($event)" /> + </div> + </div> + </div> + + <div class="form-group"> + <div class="row"> + <div class="col-md-6"> + <label class="dl-emphasis1">{{ 'EXCLUDED_TOPICS' | translate }}</label> + </div> + </div> + <div class="row"> + <div class="col-md-9"> + <div class="d-flex row align-items-center" *ngFor="let field of extenFields; let i = index"> + <div class="col-md-8 order-1"> + <input [(ngModel)]="field.item" class="form-control dl-input-text" placeholder="AAI-EVENT" type="text" + (change)="onChangeSaveIdField()" (input)="this.adminService.onKeyPressSymbol($event)" /> + </div> + <div class="order-2"> + <button type="button" class="btn dl-icon-enable p-2" (click)="onClickAddIdField(i)"> + <i class="fa fa-plus fa-xs" aria-hidden="true"></i> + </button> + </div> + <div class="order-3"> + <button type="button" class="btn dl-icon-enable p-2" (click)="onClickDelIdField(i)"> + <i class="fa fa-trash fa-xs" aria-hidden="true"></i> + </button> + </div> + </div> + </div> + </div> + </div> +</div> 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<KafkaModalComponent>; + + 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<string> = ["None", "SASL_PLAINTEXT"]; + extenFields: Array<any> = []; + 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 @@ <app-card [title]="this.cardTitle" [content]="this.cardContent"> </app-card> <br> - <app-card [iconPath]="this.cardAddicon" [iconSize]="'sm'" (cardAction)="cardClick()"> + <app-card [iconPath]="assets/icons/add.svg" [iconSize]="'sm'" (cardAction)="cardClick()"> </app-card> <br> </div> 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. <div class="d-flex row align-items-center" *ngFor="let field of idExFields; let i = index"> <div class="col-md-8 order-1"> <input [(ngModel)]="field.item" class="form-control dl-input-text" placeholder="/event-header/id" - type="text" [value]="field.item" (change)="onChangeSaveIdField()" /> + type="text" (change)="onChangeSaveIdField()" (input)="this.adminService.onKeyPressSymbol($event)" /> </div> <div class="order-2"> <button type="button" class="btn dl-icon-enable p-2" (click)="onClickAddIdField(i)"> diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.ts index 3f0223eb..9289861b 100644 --- a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.ts +++ b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.ts @@ -229,21 +229,26 @@ export class TopicModalComponent implements OnInit { onClickAddIdField() { this.idExFields.push(this.idExNewField); this.idExNewField = {}; + this.onChangeSaveIdField(); } onClickDelIdField(index: number) { if (this.idExFields.length > 1) { this.idExFields.splice(index, 1); + this.onChangeSaveIdField(); } } onChangeSaveIdField() { this.data.messageIdPath = ""; + for (let i = 0; i < this.idExFields.length; i++) { - if (i == 0) { - this.data.messageIdPath = this.idExFields[i].item; - } else { - this.data.messageIdPath += "," + this.idExFields[i].item; + if (this.idExFields[i].item) { + if (this.data.messageIdPath == "") { + this.data.messageIdPath = this.idExFields[i].item; + } else { + this.data.messageIdPath += "," + this.idExFields[i].item; + } } } } 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 11654612..2e0892fa 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 @@ -1,6 +1,6 @@ { "SIDEBAR": { - "FEEDFER": "DataLake Feeder", + "FEEDER": "DataLake Feeder", "KAFKA": "Kafka", "TOPICS": "Topics", "DATABASE": "Database", |