diff options
Diffstat (limited to 'components')
21 files changed, 1175 insertions, 108 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 8ed9fd83..3c52716c 100644 --- a/components/datalake-handler/admin/src/src/app/app.module.ts +++ b/components/datalake-handler/admin/src/src/app/app.module.ts @@ -94,6 +94,9 @@ import { ModalDemoComponent } from "./views/test/modal-demo/modal-demo.component 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({ @@ -133,7 +136,10 @@ import { AngularSvgIconModule } from "angular-svg-icon"; ButtonComponent, ModalDirective, ModalDemoComponent, - KafkaComponent + KafkaComponent, + KafkaListComponent, + NewKafkaModalComponent, + EditKafkaModalComponent ], imports: [ BrowserModule, @@ -170,7 +176,9 @@ import { AngularSvgIconModule } from "angular-svg-icon"; EditTemplateModalComponent, ModalComponent, ModalDemoComponent, - KafkaComponent + KafkaComponent, + NewKafkaModalComponent, + EditKafkaModalComponent ] }) 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 9901de46..40a7e26d 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 @@ -14,7 +14,7 @@ limitations under the License. */ -export class kafka { +export class Kafka { id: number; name: string; enabled: boolean; @@ -28,5 +28,5 @@ export class kafka { includedTopic: string; excludedTopic: string; consumerCount: number; - timeout: number + timeout: number; } 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 589a4337..cb210086 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 @@ -35,6 +35,7 @@ import { Topic } from "src/app/core/models/topic.model"; 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 = { @@ -336,13 +337,34 @@ Dashboard 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) + ); + } } diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.css b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.css new file mode 100644 index 00000000..a34ed1eb --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.css @@ -0,0 +1,38 @@ +/* + 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; +} diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.html b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.html new file mode 100644 index 00000000..2a42b988 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.html @@ -0,0 +1,193 @@ +<!-- + 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> diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.spec.ts new file mode 100644 index 00000000..4c24cb90 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.spec.ts @@ -0,0 +1,41 @@ +/* + 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(); + }); +}); diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.ts new file mode 100644 index 00000000..9f129b6e --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/edit-kafka-modal/edit-kafka-modal.component.ts @@ -0,0 +1,80 @@ +/* + 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); + } + } +} 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 new file mode 100644 index 00000000..1c7a3867 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.css @@ -0,0 +1,42 @@ +/* + 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 new file mode 100644 index 00000000..ec611cc0 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.html @@ -0,0 +1,30 @@ +<!-- + 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> diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.spec.ts new file mode 100644 index 00000000..11ca81ed --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.spec.ts @@ -0,0 +1,41 @@ +/* + 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(); + }); +}); 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 new file mode 100644 index 00000000..1acd6171 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/kafka-list.component.ts @@ -0,0 +1,240 @@ +/* + 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(); + } + ); + }) + } +} diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.css b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.css new file mode 100644 index 00000000..7b11d9e7 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.css @@ -0,0 +1,53 @@ +/* + 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; +} diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.html b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.html new file mode 100644 index 00000000..7bf81c45 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.html @@ -0,0 +1,193 @@ +<!-- + 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> diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.spec.ts new file mode 100644 index 00000000..e222d70d --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.spec.ts @@ -0,0 +1,41 @@ +/* + 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(); + }); +}); diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.ts new file mode 100644 index 00000000..843799df --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka-list/new-kafka-modal/new-kafka-modal.component.ts @@ -0,0 +1,125 @@ +/* + 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); + } + } +} diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.css b/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.css index ed7832ae..7541afa0 100644 --- a/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.css +++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.css @@ -13,11 +13,4 @@ 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; -} + diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.html b/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.html index 63a2c1fe..357e53fa 100644 --- a/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.html +++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.html @@ -17,18 +17,7 @@ <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> diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.ts index 281a9b16..adeb3c8e 100644 --- a/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.ts +++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.ts @@ -13,97 +13,27 @@ 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; - } - - } 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 e484b3f7..436fcc22 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 @@ -65,5 +65,13 @@ "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" +} diff --git a/components/datalake-handler/admin/src/src/assets/icons/kafka_able.svg b/components/datalake-handler/admin/src/src/assets/icons/kafka_able.svg index 3bb663c2..a4b094de 100755 --- a/components/datalake-handler/admin/src/src/assets/icons/kafka_able.svg +++ b/components/datalake-handler/admin/src/src/assets/icons/kafka_able.svg @@ -3,9 +3,9 @@ <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"
viewBox="348 -952.7 1538 2500" style="enable-background:new 348 -952.7 1538 2500;" xml:space="preserve">
<style type="text/css">
- .st0{fill:#5DBEBB;}
+ .st2{fill:#5DBEBB;}
</style>
-<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
+<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
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
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
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
diff --git a/components/datalake-handler/admin/src/src/assets/icons/kafka_disable.svg b/components/datalake-handler/admin/src/src/assets/icons/kafka_disable.svg index 27d290fa..61b558fa 100755 --- a/components/datalake-handler/admin/src/src/assets/icons/kafka_disable.svg +++ b/components/datalake-handler/admin/src/src/assets/icons/kafka_disable.svg @@ -3,9 +3,9 @@ <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"
viewBox="348 -952.7 1538 2500" style="enable-background:new 348 -952.7 1538 2500;" xml:space="preserve">
<style type="text/css">
- .st0{fill:#D2D3D5;}
+ .st1{fill:#D2D3D5;}
</style>
-<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
+<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
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
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
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
|
