diff options
Diffstat (limited to 'components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-modal')
4 files changed, 293 insertions, 0 deletions
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; + } + } + } + } +} |