diff options
Diffstat (limited to 'components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.ts')
-rw-r--r-- | components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.ts | 303 |
1 files changed, 113 insertions, 190 deletions
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; + } } } |