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({
ButtonComponent,
ModalDirective,
ModalDemoComponent,
- KafkaComponent
+ KafkaComponent,
+ KafkaListComponent,
+ NewKafkaModalComponent,
+ EditKafkaModalComponent
],
imports: [
BrowserModule,
EditTemplateModalComponent,
ModalComponent,
ModalDemoComponent,
- KafkaComponent
+ KafkaComponent,
+ NewKafkaModalComponent,
+ EditKafkaModalComponent
]
})
export class AppModule {}
limitations under the License.
*/
-export class kafka {
+export class Kafka {
id: number;
name: string;
enabled: boolean;
includedTopic: string;
excludedTopic: string;
consumerCount: number;
- timeout: number
+ timeout: number;
}
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 = {
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)
+ );
+ }
}
--- /dev/null
+/*
+ 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;
+}
--- /dev/null
+<!--
+ 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>
--- /dev/null
+/*
+ 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();
+ });
+});
--- /dev/null
+/*
+ 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);
+ }
+ }
+}
--- /dev/null
+/*
+ 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{
+
+}
+
--- /dev/null
+<!--
+ 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>
--- /dev/null
+/*
+ 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();
+ });
+});
--- /dev/null
+/*
+ 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();
+ }
+ );
+ })
+ }
+}
--- /dev/null
+/*
+ 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;
+}
--- /dev/null
+<!--
+ 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>
--- /dev/null
+/*
+ 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();
+ });
+});
--- /dev/null
+/*
+ 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);
+ }
+ }
+}
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;
-}
+
<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>
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;
- }
-
-
}
"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"
+}
<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"\r
viewBox="348 -952.7 1538 2500" style="enable-background:new 348 -952.7 1538 2500;" xml:space="preserve">\r
<style type="text/css">\r
- .st0{fill:#5DBEBB;}\r
+ .st2{fill:#5DBEBB;}\r
</style>\r
-<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\r
+<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\r
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\r
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\r
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\r
<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"\r
viewBox="348 -952.7 1538 2500" style="enable-background:new 348 -952.7 1538 2500;" xml:space="preserve">\r
<style type="text/css">\r
- .st0{fill:#D2D3D5;}\r
+ .st1{fill:#D2D3D5;}\r
</style>\r
-<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\r
+<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\r
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\r
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\r
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\r
Code Review / dcaegen2 / services.git / commitdiff
