From 27861408fa784ac3aa153c489a30c49e150cad2f Mon Sep 17 00:00:00 2001 From: Ekko Chang Date: Thu, 2 Jan 2020 07:41:50 +0000 Subject: To optimize the shared module and apply it into the page Issue-ID: DCAEGEN2-1715 Signed-off-by: Ekko Chang Change-Id: I1a461ab6f2a5cc272dbdeacb9b5a480b269eed93 --- components/datalake-handler/admin/src/package.json | 4 +- .../admin/src/src/app/app-routing.module.ts | 14 +- .../admin/src/src/app/app.module.ts | 32 +- .../admin/src/src/app/core/models/db.model.ts | 4 +- .../admin/src/src/app/core/models/kafka.model.ts | 4 +- .../admin/src/src/app/core/models/topic.model.ts | 59 +-- .../src/src/app/core/services/rest-api.service.ts | 109 +++-- .../shared/components/Button/button.component.html | 28 +- .../app/shared/modules/modal/modal.component.html | 34 +- .../app/shared/modules/modal/modal.component.ts | 42 +- .../src/src/app/shared/modules/modal/modal.data.ts | 10 +- .../app/shared/modules/modal/modal.interface.ts | 5 +- .../app/shared/modules/table/table.component.html | 29 +- .../app/shared/modules/table/table.component.ts | 48 +- .../topics/topic-list/topic-list.component.html | 10 +- .../topics/topic-list/topic-list.component.ts | 520 +++++++-------------- .../topic-modal/topic-modal.component.css | 1 + .../topic-modal/topic-modal.component.html | 213 +++++++++ .../topic-modal/topic-modal.component.spec.ts | 50 ++ .../topic-modal/topic-modal.component.ts | 262 +++++++++++ .../admin/src/src/assets/i18n/en-us.json | 10 +- .../admin/src/src/assets/i18n/zh-hans.json | 39 +- .../admin/src/src/assets/i18n/zh-hant.json | 41 +- .../datalake-handler/admin/src/src/styles.css | 34 +- 24 files changed, 1017 insertions(+), 585 deletions(-) create mode 100644 components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.css create mode 100644 components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.html create mode 100644 components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.spec.ts create mode 100644 components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.ts diff --git a/components/datalake-handler/admin/src/package.json b/components/datalake-handler/admin/src/package.json index de89944b..d4e0444c 100644 --- a/components/datalake-handler/admin/src/package.json +++ b/components/datalake-handler/admin/src/package.json @@ -13,11 +13,13 @@ }, "private": true, "dependencies": { - "@angular/animations": "~7.2.0", + "@angular/animations": "^7.2.15", + "@angular/cdk": "^7.3.7", "@angular/common": "~7.2.0", "@angular/compiler": "~7.2.0", "@angular/core": "~7.2.0", "@angular/forms": "~7.2.0", + "@angular/material": "^7.3.7", "@angular/platform-browser": "~7.2.0", "@angular/platform-browser-dynamic": "~7.2.0", "@angular/router": "~7.2.0", diff --git a/components/datalake-handler/admin/src/src/app/app-routing.module.ts b/components/datalake-handler/admin/src/src/app/app-routing.module.ts index ae2f9b6e..e0484a4f 100644 --- a/components/datalake-handler/admin/src/src/app/app-routing.module.ts +++ b/components/datalake-handler/admin/src/src/app/app-routing.module.ts @@ -2,7 +2,7 @@ * ============LICENSE_START======================================================= * ONAP : DataLake * ================================================================================ - * Copyright 2019 QCT + * Copyright 2019 - 2020 QCT *================================================================================= * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -28,15 +28,15 @@ import { NgModule } from "@angular/core"; import { Routes, RouterModule } from "@angular/router"; //test components for module testing -import { TestComponent } from './views/test/test.component'; +import { TestComponent } from "./views/test/test.component"; import { FeederComponent } from "./views/feeder/feeder.component"; import { KafkaComponent } from "./views/kafka/kafka.component"; import { TopicsComponent } from "./views/topics/topics.component"; import { DatabaseComponent } from "./views/database/database.component"; import { AboutComponent } from "./views/about/about.component"; -import { TemplateComponent } from './views/dashboard-setting/template/template.component'; -import {ToolsComponent} from "./views/tools/tools.component"; +import { TemplateComponent } from "./views/dashboard-setting/template/template.component"; +import { ToolsComponent } from "./views/tools/tools.component"; const routes: Routes = [ { path: "", redirectTo: "/feeder", pathMatch: "full" }, @@ -46,8 +46,8 @@ const routes: Routes = [ { path: "topics", component: TopicsComponent }, { path: "database", component: DatabaseComponent }, { path: "about", component: AboutComponent }, - { path: 'tools', component: ToolsComponent }, - { path: 'dashboard-setting/template', component: TemplateComponent }, + { path: "tools", component: ToolsComponent }, + { path: "dashboard-setting/template", component: TemplateComponent } ]; @NgModule({ @@ -58,4 +58,4 @@ const routes: Routes = [ ], exports: [RouterModule] }) -export class AppRoutingModule { } +export class AppRoutingModule {} 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 2f968bfb..ddc0c10c 100644 --- a/components/datalake-handler/admin/src/src/app/app.module.ts +++ b/components/datalake-handler/admin/src/src/app/app.module.ts @@ -2,7 +2,7 @@ * ============LICENSE_START======================================================= * ONAP : DataLake * ================================================================================ - * Copyright 2019 QCT + * Copyright 2019 - 2020 QCT *================================================================================= * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -65,12 +65,12 @@ import { HdfsComponent } from "./views/database/database-list/dbs-modal/hdfs/hdf import { DatabaseAddModalComponent } from "./views/database/database-list/database-add-modal/database-add-modal.component"; import { ElasticsearchComponent } from "./views/database/database-list/dbs-modal/elasticsearch/elasticsearch.component"; import { DruidComponent } from "./views/database/database-list/dbs-modal/druid/druid.component"; -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'; -import { ToolsComponent } from './views/tools/tools.component'; -import { ModalToolsComponent } from './views/tools/modal-tools/modal-tools.component'; -import { ToolAddModalComponent } from './views/tools/tool-add-modal/tool-add-modal.component'; +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"; +import { ToolsComponent } from "./views/tools/tools.component"; +import { ModalToolsComponent } from "./views/tools/modal-tools/modal-tools.component"; +import { ToolAddModalComponent } from "./views/tools/tool-add-modal/tool-add-modal.component"; // Modals import { TopicDetailModalComponent } from "./views/topics/topic-list/topic-detail-modal/topic-detail-modal.component"; @@ -97,10 +97,14 @@ import { CardComponent } from "./shared/modules/card/card.component"; import { ButtonComponent } from "./shared/components/Button/button.component"; import { ModalDirective } from "./shared/modules/modal/modal.directive"; import { ModalDemoComponent } from "./views/test/modal-demo/modal-demo.component"; -import { KafkaComponent } from './views/kafka/kafka.component'; +import { KafkaComponent } from "./views/kafka/kafka.component"; // Angular SVG Icon import { AngularSvgIconModule } from "angular-svg-icon"; -import { IconComponent } from './shared/components/icon/icon.component'; +import { IconComponent } from "./shared/components/icon/icon.component"; + +import { MatTabsModule } from "@angular/material"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { TopicModalComponent } from "./views/topics/topic-list/topic-modal/topic-modal.component"; @NgModule({ declarations: [ @@ -146,7 +150,8 @@ import { IconComponent } from './shared/components/icon/icon.component'; ToolsComponent, ModalToolsComponent, ToolAddModalComponent, - IconComponent + IconComponent, + TopicModalComponent ], imports: [ BrowserModule, @@ -163,7 +168,9 @@ import { IconComponent } from './shared/components/icon/icon.component'; FormsModule, NgxDatatableModule, NgxSpinnerModule, - AngularSvgIconModule + AngularSvgIconModule, + MatTabsModule, + BrowserAnimationsModule ], providers: [AdminService, RestApiService, ToastrNotificationService], bootstrap: [AppComponent], @@ -187,7 +194,8 @@ import { IconComponent } from './shared/components/icon/icon.component'; NewKafkaModalComponent, EditKafkaModalComponent, ToolAddModalComponent, - ModalToolsComponent + ModalToolsComponent, + TopicModalComponent ] }) export class AppModule {} diff --git a/components/datalake-handler/admin/src/src/app/core/models/db.model.ts b/components/datalake-handler/admin/src/src/app/core/models/db.model.ts index ca7f379e..3de8f213 100644 --- a/components/datalake-handler/admin/src/src/app/core/models/db.model.ts +++ b/components/datalake-handler/admin/src/src/app/core/models/db.model.ts @@ -2,7 +2,7 @@ * ============LICENSE_START======================================================= * ONAP : DataLake * ================================================================================ - * Copyright 2019 QCT + * Copyright 2019 - 2020 QCT *================================================================================= * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -35,4 +35,6 @@ export class Db { login: string; pass: string; dbTypeId: string; + // for UI display + checkedToSave: boolean; } 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 40a7e26d..34f283fb 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 @@ -1,5 +1,5 @@ /* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + Copyright (C) 2019 - 2020 CMCC, Inc. and others. All rights reserved. Licensed under the Apache License, Version 2.0 (the License); you may not use this file except in compliance with the License. @@ -29,4 +29,6 @@ export class Kafka { excludedTopic: string; consumerCount: number; timeout: number; + // for UI display + checkedToSave: boolean; } diff --git a/components/datalake-handler/admin/src/src/app/core/models/topic.model.ts b/components/datalake-handler/admin/src/src/app/core/models/topic.model.ts index 18faa582..be225da9 100644 --- a/components/datalake-handler/admin/src/src/app/core/models/topic.model.ts +++ b/components/datalake-handler/admin/src/src/app/core/models/topic.model.ts @@ -2,7 +2,7 @@ * ============LICENSE_START======================================================= * ONAP : DataLake * ================================================================================ - * Copyright 2019 QCT + * Copyright 2019 - 2020 QCT *================================================================================= * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -41,50 +41,21 @@ export class Topic { public flattenArrayPath: string; public enbabledKafkas: Array; public kafkas: Array; + public countsDb: CountsDb; + public countsKafka: number; // properties only for UI public config: boolean; //true: Configure, otherwise false: Unconfiure - public kafkaName: string; - public countCouchbase: number; - public countDruid: number; - public countEs: number; - public countMongo: number; - public countHadoop: number; + public countsMONGO: number; + public countsDRUID: number; + public countsHDFS: number; + public countsES: number; + public countsCB: number; +} - constructor( - id: number, - name: string, - login: string, - password: string, - enabledSinkdbs: Array, - sinkdbs: Array, - enabled: boolean, - saveRaw: boolean, - dataFormat: string, - ttl: number, - correlateClearedMessage: boolean, - messageIdPath: string, - aggregateArrayPath: string, - flattenArrayPath: string, - enbabledKafkas: Array, - kafkas: Array, - config: boolean - ) { - this.id = id; - this.name = name; - this.login = login; - this.password = password; - this.enabledSinkdbs = enabledSinkdbs; - this.sinkdbs = sinkdbs; - this.enabled = enabled; - this.saveRaw = saveRaw; - this.dataFormat = dataFormat; - this.ttl = ttl; - this.correlateClearedMessage = correlateClearedMessage; - this.messageIdPath = messageIdPath; - this.aggregateArrayPath = aggregateArrayPath; - this.flattenArrayPath = flattenArrayPath; - this.enbabledKafkas = enbabledKafkas; - this.kafkas = kafkas; - this.config = config; - } +class CountsDb { + MONGO: number; + DRUID: number; + HDFS: number; + ES: number; + CB: 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 0c520895..b3ed616f 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 @@ -2,7 +2,7 @@ * ============LICENSE_START======================================================= * ONAP : DataLake * ================================================================================ - * Copyright 2019 QCT + * Copyright 2019 - 2020 QCT *================================================================================= * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -77,7 +77,7 @@ export class RestApiService { } /* - Topic default config + Topics */ public getTopicDefault(): Observable { return this.http @@ -85,19 +85,6 @@ export class RestApiService { .pipe(retry(1), catchError(this.handleError)); } - // updateTopicDefaultConfig(t: Topic): Observable { - // return this.http - // .put(prefix + "topics/_DL_DEFAULT_", JSON.stringify(t), httpOptions) - // .pipe( - // retry(1), - // tap(_ => this.extractData), - // catchError(this.handleError) - // ); - // } - - /* - Topics - */ public getTopicList(): Observable { return this.http .get(prefix + "topics") @@ -110,12 +97,43 @@ export class RestApiService { .pipe(retry(1), catchError(this.handleError)); } - public getTopic(id: string): Observable { + // Get topic names for adding + public getTopicNames(): Observable { + return this.http + .get(prefix + "topicNames") + .pipe(retry(1), catchError(this.handleError)); + } + + public getTopic(id: string | number): Observable { return this.http .get(prefix + "topics/" + id) .pipe(retry(1), catchError(this.handleError)); } + public updateTopic(t: Topic): Observable { + return this.http.put(prefix + "topics/" + t.id, t).pipe( + retry(1), + tap(_ => this.extractData), + catchError(this.handleError) + ); + } + + public addTopic(t: Topic): Observable { + return this.http.post(prefix + "topics", t).pipe( + retry(1), + tap(_ => console.log(`add topic name=${t.name}`)), + catchError(this.handleError) + ); + } + + public deleteTopic(id: number | string): Observable { + return this.http.delete(prefix + "topics/" + id).pipe( + retry(1), + tap(_ => console.log(`deleted topic name=${name}`)), + catchError(this.handleError) + ); + } + // TODO getTopicsFromFeeder(): Observable { return this.http @@ -123,41 +141,15 @@ export class RestApiService { .pipe(retry(1), map(this.extractData), catchError(this.handleError)); } - // addNewTopic(t: Topic): Observable { - // return this.http.post(prefix + "topics", t).pipe( - // retry(1), - // tap(_ => console.log(`add topic name=${t.name}`)), - // catchError(this.handleError) - // ); - // } - - // addTopic(t: Topic): Observable { - // return this.http.post(prefix + "topics", t).pipe( - // retry(1), - // tap(_ => console.log(`add topic name=${t.name}`)), - // catchError(this.handleError) - // ); - // } - - // upadteTopic(t: Topic): Observable { - // return this.http.put(prefix + "topics/" + t.name, t).pipe( - // retry(1), - // tap(_ => this.extractData), - // catchError(this.handleError) - // ); - // } - - // deleteTopic(name: string): Observable { - // return this.http.delete(prefix + "topics/" + name).pipe( - // retry(1), - // tap(_ => console.log(`deleted topic name=${name}`)), - // catchError(this.handleError) - // ); - // } - /* Database */ + public getAllDbs(): Observable { + return this.http + .get(prefix + "dbs/list?isDb=true") + .pipe(retry(1), catchError(this.handleError)); + } + getDbEncryptList(flag): Observable { return this.http .get(prefix + "dbs/list?tool=" + flag) @@ -201,6 +193,7 @@ export class RestApiService { ); } + // Deprecated getDbTypeList(): Observable { return this.http .get(prefix + "db_type") @@ -233,8 +226,8 @@ export class RestApiService { } /* -Dashboard -*/ + Dashboard + */ getDashboardList(): Observable { let url = prefix + "portals"; //onilne return this.http @@ -263,7 +256,7 @@ Dashboard /* Template -*/ + */ getTemplateAll(): Observable { return this.http.get(prefix + "designs/").pipe( //onlin @@ -332,11 +325,11 @@ Dashboard } /* - Kafka -*/ - public getAllKafkaList(): Observable { + Kafka + */ + public getAllKafka(): Observable { return this.http - .get(prefix + "kafkas") + .get(prefix + "kafkas") .pipe(retry(1), catchError(this.handleError)); } @@ -346,6 +339,12 @@ Dashboard .pipe(retry(1), catchError(this.handleError)); } + getAllKafkaList(): Observable { + return this.http + .get(prefix + "kafkas") + .pipe(retry(1), catchError(this.handleError)); + } + deleteKafka(id): Observable { return this.http.delete(prefix + "kafkas/" + id).pipe( //online diff --git a/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.html b/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.html index 7986886a..9a6f9f44 100644 --- a/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.html +++ b/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.html @@ -1,17 +1,37 @@ + + - + +
+ +
+ + + + + + + + +
+
+
+
+
+
+
+ +
+ +
+
+
+
+
+
+ + + +
+
+
+
+ +
+
+ +
+
+
+
+
+ +
+ +
+
+
+
+
+
+ + diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.spec.ts new file mode 100644 index 00000000..a856a757 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.spec.ts @@ -0,0 +1,50 @@ +/* + * ============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 { async, ComponentFixture, TestBed } from "@angular/core/testing"; + +import { TopicModalComponent } from "./topic-modal.component"; + +describe("TopicModalComponent", () => { + let component: TopicModalComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [TopicModalComponent] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TopicModalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it("should create", () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.ts new file mode 100644 index 00000000..3f0223eb --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-modal/topic-modal.component.ts @@ -0,0 +1,262 @@ +/* + * ============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, ViewChild } from "@angular/core"; + +import { NgbActiveModal, NgbTypeahead } from "@ng-bootstrap/ng-bootstrap"; +import { RestApiService } from "src/app/core/services/rest-api.service"; +import { AdminService } from "src/app/core/services/admin.service"; +import { Topic } from "src/app/core/models/topic.model"; +import { + debounceTime, + distinctUntilChanged, + filter, + map, + mergeMap +} from "rxjs/operators"; +import { from, Subject, Observable, merge } from "rxjs"; +import { Kafka } from "src/app/core/models/kafka.model"; +import { Db } from "src/app/core/models/db.model"; + +@Component({ + selector: "app-topic-modal", + templateUrl: "./topic-modal.component.html", + styleUrls: ["./topic-modal.component.css"] +}) +export class TopicModalComponent implements OnInit { + @Input() data: Topic; + @Input() mode: string; + @Input() selectedIndex: number; + + dataFormats: Array = ["JSON", "XML"]; + idExFields: Array = []; + idExNewField: any = {}; + + kafkas: Array = []; + dbs: Array = []; + dbTypeIds: Array = []; + + // Autocomplete input + @ViewChild("instance") instance: NgbTypeahead; + focus$ = new Subject(); + click$ = new Subject(); + newTopicList: Array; + + search = (text$: Observable) => { + const debouncedText$ = text$.pipe( + debounceTime(200), + distinctUntilChanged() + ); + const clicksWithClosedPopup$ = this.click$.pipe( + filter(() => !this.instance.isPopupOpen()) + ); + const inputFocus$ = this.focus$; + + return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$).pipe( + map(term => + (term === "" + ? this.newTopicList + : this.newTopicList.filter( + v => v.toLowerCase().indexOf(term.toLowerCase()) > -1 + ) + ).slice(0, 10) + ) + ); + }; + + constructor( + public activeModal: NgbActiveModal, + public adminService: AdminService, + private restApiService: RestApiService + ) {} + + ngOnInit() { + // Get ID extration field + this.idExFields = []; + if (this.data.messageIdPath != null) { + let feed = this.data.messageIdPath.split(","); + for (let i = 0; i < feed.length; i++) { + let data = { item: feed[i] }; + this.idExFields.push(data); + } + } else { + this.idExFields.push([]); + } + + // Init data + this.initData(); + } + + initData() { + this.getKafkas(); + this.getDbs(); + + if (this.mode === "new") { + this.getNewTopicList(); + } + } + + getKafkas() { + const get_kafkas = this.restApiService.getAllKafka().pipe( + mergeMap(ks => from(ks)), + map(k => { + if ( + this.data.kafkas && + this.data.kafkas.toString().includes(k.id.toString()) + ) { + k.checkedToSave = true; + } else { + k.checkedToSave = false; + } + this.kafkas.push(k); + }) + ); + + get_kafkas.subscribe(); + } + + getDbs() { + const get_dbs = this.restApiService.getAllDbs().pipe( + mergeMap(dbs => from(dbs)), + map(db => { + if (!this.dbTypeIds.includes(db.dbTypeId)) { + this.dbTypeIds.push(db.dbTypeId); + } + if ( + this.data.sinkdbs && + this.data.sinkdbs.toString().includes(db.id.toString()) + ) { + db.checkedToSave = true; + } else { + db.checkedToSave = false; + } + this.dbs.push(db); + }) + ); + + get_dbs.subscribe(); + } + + getNewTopicList() { + const get_topicName = this.restApiService.getTopicNames().pipe( + map(names => { + this.newTopicList = names; + }) + ); + + get_topicName.subscribe(); + } + + onChabgeSelKafka(checked: boolean, id: string | number) { + // Array initialize + if (!this.data.kafkas) this.data.kafkas = []; + + if (checked) { + // Add kafka_id into topic.kafkas + if ( + this.data.kafkas && + !this.data.kafkas.toString().includes(id.toString()) + ) { + this.data.kafkas.push(id.toString()); + } + } else { + // Remove kafka_id from topic.kafkas + if ( + this.data.kafkas && + this.data.kafkas.toString().includes(id.toString()) + ) { + this.data.kafkas.forEach((k_id, index) => { + if (k_id.toString() === id.toString()) { + this.data.kafkas.splice(index, 1); + return; + } + }); + } + } + } + + onChabgeSelDb(checked: boolean, id: string | number) { + // Array initialize + if (!this.data.sinkdbs) this.data.sinkdbs = []; + + if (checked) { + // Add db_id into topic.sinkdbs + if ( + this.data.sinkdbs && + !this.data.sinkdbs.toString().includes(id.toString()) + ) { + this.data.sinkdbs.push(id.toString()); + } + } else { + // Remove db_id from "topic.sinkdbs" + if ( + this.data.sinkdbs && + this.data.sinkdbs.toString().includes(id.toString()) + ) { + this.data.sinkdbs.forEach((db_id, index) => { + if (db_id.toString() === id.toString()) { + this.data.sinkdbs.splice(index, 1); + return; + } + }); + } + } + } + + onClickAddIdField() { + this.idExFields.push(this.idExNewField); + this.idExNewField = {}; + } + + onClickDelIdField(index: number) { + if (this.idExFields.length > 1) { + this.idExFields.splice(index, 1); + } + } + + onChangeSaveIdField() { + this.data.messageIdPath = ""; + for (let i = 0; i < this.idExFields.length; i++) { + if (i == 0) { + this.data.messageIdPath = this.idExFields[i].item; + } else { + this.data.messageIdPath += "," + this.idExFields[i].item; + } + } + } + + onClickMatTab(index: number) { + this.selectedIndex = index; + } + + isAddingMode() { + let flag: boolean = false; + + if (this.mode === "new") flag = true; + + return flag; + } +} 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 13872a41..11654612 100644 --- a/components/datalake-handler/admin/src/src/assets/i18n/en-us.json +++ b/components/datalake-handler/admin/src/src/assets/i18n/en-us.json @@ -1,6 +1,6 @@ { "SIDEBAR": { - "FEEDER": "DataLake Feeder", + "FEEDFER": "DataLake Feeder", "KAFKA": "Kafka", "TOPICS": "Topics", "DATABASE": "Database", @@ -11,7 +11,7 @@ }, "NAME": "Name", "STATUS": "Status", - "SINK": "Target", + "SINK": "Sink", "AUTHENTICATION": "Authentication", "DATA_FORMAT": "Data format", "TTL": "TTL", @@ -35,6 +35,7 @@ "ERROR_CODE": "Error Code", "SUCCESS_UPDATED": "Success updated", "TOPIC_DEFAULT_CONF_NOTICE": "Notice: This topic uses the default topics settings.", + "TOPIC_NEW_NOTICE": "Notice: A new topic will be created.", "HOME": "Home", "ConfigDashboard": "Config Portal", "EDIT": "Edit", @@ -56,7 +57,7 @@ "NODATA": "No Data", "NEW_TEMPLATE": "New design", "TEMPLATE_BODY": "Body", - "FIELUPLOAD": "Select File ...", + "FIELUPLOAD": "Import", "SUCCESSFULLY_CREARED": "Successfully created.", "FAILED_CREARED": "Failed updated.", "SUCCESSFULLY_UPDATED": "Successfully updated.", @@ -83,6 +84,5 @@ "NEW_HDFS": "New Hdfs", "SECURE_COMMUNICATION": "Secure Communication", "NEW_TOOL": "New Tool", - "NEW_KIBANA": "New Kibana", - "DATABASE": "Database" + "NEW_KIBANA": "New Kibana" } diff --git a/components/datalake-handler/admin/src/src/assets/i18n/zh-hans.json b/components/datalake-handler/admin/src/src/assets/i18n/zh-hans.json index 0ba8503f..cce513b2 100644 --- a/components/datalake-handler/admin/src/src/assets/i18n/zh-hans.json +++ b/components/datalake-handler/admin/src/src/assets/i18n/zh-hans.json @@ -1,40 +1,41 @@ { "SIDEBAR": { - "FEEDER": "DataLake Feeder", + "FEEDFER": "DataLake Feeder", "TOPICS": "Topics", - "KAFKA":"Kafka", + "KAFKA": "卡夫卡", "DATABASE": "Database", - "DASHBOARD": "工具设置", - "DASHBOARDLIST": "工具", + "DASHBOARD": "仪表板设置", + "DASHBOARDLIST": "仪表板", "TEMPLATE": "模板", "ABOUT": "About" }, "NAME": "名称", "STATUS": "状态", "SINK": "数据库", - "AUTHENTICATION": "身份验证​", + "AUTHENTICATION": "身份验证", "DATA_FORMAT": "数据格式", "TTL": "失效时间(天)", "SAVE_RAW_DATA": "保存原始数据", - "CORRELATE_CLEARED_MESSAGE": "关联已清除的消息​", - "DEFAULT_CONFIGURATIONS": "默认配置​", - "ID_EXTRACTION": "ID提取​", + "CORRELATE_CLEARED_MESSAGE": "关联已清除的消息", + "DEFAULT_CONFIGURATIONS": "默认配置", + "ID_EXTRACTION": "ID提取", "CONFIGURED": "已配置", - "UNCONFIGURED": "未配置​", + "UNCONFIGURED": "未配置", "NEW_TOPIC": "新建主题", - "DATABASE_CONNECTIONS": "数据库连接​", + "DATABASE_CONNECTIONS": "数据库连接", "BUCKET": "Bucket", - "HOST": "主机​", - "PORT": "端口​", - "ENABLE_SSL": "加密通信​", - "VERIFY": "验证​", + "HOST": "主机", + "PORT": "端口", + "ENABLE_SSL": "加密通信", + "VERIFY": "验证", "SETTING": "设置", "DOCUMENT_STORE": "文档存储", "SEARCH_ENGINE": "搜索引擎", "DELETE": "删除", - "ERROR_CODE": "错误代码​", - "SUCCESS_UPDATED": "更新成功​", - "TOPIC_DEFAULT_CONF_NOTICE": "注意: 本Topic使用默认Topic设置。​", + "ERROR_CODE": "错误代码", + "SUCCESS_UPDATED": "更新成功", + "TOPIC_DEFAULT_CONF_NOTICE": "注意: 本Topic使用默认Topic设置", + "TOPIC_NEW_NOTICE": "注意: 一个新Topic将会被创建", "HOME": "首页", "ConfigDashboard": "配置仪表板", "EDIT": "编辑", @@ -65,5 +66,5 @@ "FAILED_DELETED": "删除失败", "Deploy_SUCCESSFULLY": "部署成功", "Deploy_FAILED": "部署失败", - "ARE_YOU_SURE_DELETE": "您确定您要删除吗？" -} \ No newline at end of file + "ARE_YOU_SURE_DELETE": "您确定您要删除吗?" +} diff --git a/components/datalake-handler/admin/src/src/assets/i18n/zh-hant.json b/components/datalake-handler/admin/src/src/assets/i18n/zh-hant.json index a3649be0..88c2c8f6 100644 --- a/components/datalake-handler/admin/src/src/assets/i18n/zh-hant.json +++ b/components/datalake-handler/admin/src/src/assets/i18n/zh-hant.json @@ -1,40 +1,41 @@ { "SIDEBAR": { - "FEEDER": "DataLake Feeder", - "KAFKA":"Kafka", + "FEEDFER": "DataLake Feeder", + "KAFKA": "卡夫卡", "TOPICS": "Topics", "DATABASE": "Database", - "DASHBOARD": "工具設置", - "DASHBOARDLIST": "工具", + "DASHBOARD": "儀表板設置", + "DASHBOARDLIST": "儀表板", "TEMPLATE": "模板", "ABOUT": "About" }, "NAME": "名稱", - "STATUS": "狀態​", + "STATUS": "狀態", "SINK": "資料庫", - "AUTHENTICATION": "身份驗證​", - "DATA_FORMAT": "檔案格式​", - "TTL": "存活時間​(天)", - "SAVE_RAW_DATA": "保存原始資料​", - "CORRELATE_CLEARED_MESSAGE": "關聯已清除的訊息​", - "DEFAULT_CONFIGURATIONS": "預設配置​", - "ID_EXTRACTION": "ID提取​", + "AUTHENTICATION": "身份驗證", + "DATA_FORMAT": "檔案格式", + "TTL": "存活時間(天)", + "SAVE_RAW_DATA": "保存原始資料", + "CORRELATE_CLEARED_MESSAGE": "關聯已清除的訊息", + "DEFAULT_CONFIGURATIONS": "預設配置", + "ID_EXTRACTION": "ID提取", "CONFIGURED": "已配置", - "UNCONFIGURED": "未配置​", + "UNCONFIGURED": "未配置", "NEW_TOPIC": "新建主題", - "DATABASE_CONNECTIONS": "資料庫連線​", + "DATABASE_CONNECTIONS": "資料庫連線", "BUCKET": "Bucket", "HOST": "主機", "PORT": "埠", - "ENABLE_SSL": "加密通信​", - "VERIFY": "驗證​", + "ENABLE_SSL": "加密通信", + "VERIFY": "驗證", "SETTING": "設定", "DOCUMENT_STORE": "文檔儲存", "SEARCH_ENGINE": "搜尋引擎", "DELETE": "刪除", "ERROR_CODE": "錯誤代碼", - "SUCCESS_UPDATED": "更新成功​", - "TOPIC_DEFAULT_CONF_NOTICE": "注意：此Topic目前使用預設配置。​", + "SUCCESS_UPDATED": "更新成功", + "TOPIC_DEFAULT_CONF_NOTICE": "注意: 此Topic目前使用預設配置", + "TOPIC_NEW_NOTICE": "注意: 一個新Topic將會被新增", "HOME": "首頁", "ConfigDashboard": "配置儀表板", "EDIT": "編輯", @@ -65,5 +66,5 @@ "FAILED_DELETED": "删除失败", "Deploy_SUCCESSFULLY": "部署成功", "Deploy_FAILED": "部署失败", - "ARE_YOU_SURE_DELETE": "您確定您要刪除嗎？" -} \ No newline at end of file + "ARE_YOU_SURE_DELETE": "您確定您要刪除嗎?" +} diff --git a/components/datalake-handler/admin/src/src/styles.css b/components/datalake-handler/admin/src/src/styles.css index 096bd228..64cc8eae 100644 --- a/components/datalake-handler/admin/src/src/styles.css +++ b/components/datalake-handler/admin/src/src/styles.css @@ -2,7 +2,7 @@ * ============LICENSE_START======================================================= * ONAP : DataLake * ================================================================================ -* Copyright 2019 QCT +* Copyright 2019 - 2020 QCT *================================================================================= * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -25,6 +25,8 @@ * */ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; + html { height: 100%; } @@ -235,6 +237,16 @@ hr { line-height: 27px; } +/* override mat-tab active color*/ +.mat-tab-label-active { + color: #5dbebb; +} + +.mat-tab-group.mat-primary .mat-ink-bar, +.mat-tab-nav-bar.mat-primary .mat-ink-bar { + background: #5dbebb; +} + .dl-icon-enable { color: #5dbebb; } @@ -642,18 +654,30 @@ ngb-modal-window.templatess .modal-dialog-centered { color: #BDBEC0 } +/* placeholder */ input::-webkit-input-placeholder { - color: #313032 !important; + color: #c1bdc5 !important; + opacity: 1; } :-moz-placeholder { - color: #313032 !important; + color: #c1bdc5 !important; + opacity: 1; } ::-moz-placeholder { - color: #313032 !important; + color: #c1bdc5 !important; + opacity: 1; } :-ms-input-placeholder { - color: #313032 !important; + color: #c1bdc5 !important; + opacity: 1; +} + +::placeholder { + /* Chrome, Firefox, Opera, Safari 10.1+ */ + color: #c1bdc5; + opacity: 1; + /* Firefox */ } -- cgit 1.2.3-korg