From 7c01aaac1625058e475cb1ba3eebdd1860a57972 Mon Sep 17 00:00:00 2001 From: Ekko Chang Date: Thu, 30 Jan 2020 06:47:12 +0000 Subject: To apply the shared module into the 3rd party tools management page Issue-ID: DCAEGEN2-1717 Signed-off-by: Ekko Chang Change-Id: Icc00785df9c516298327d8542bfb3c330d88513c --- .../admin/src/src/app/app.module.ts | 7 +- .../src/src/app/core/services/rest-api.service.ts | 8 +- .../tools/tool-modal/tool-modal.component.css | 25 ++ .../tools/tool-modal/tool-modal.component.html | 107 ++++++++ .../tools/tool-modal/tool-modal.component.spec.ts | 44 ++++ .../views/tools/tool-modal/tool-modal.component.ts | 74 ++++++ .../src/src/app/views/tools/tools.component.html | 22 +- .../src/src/app/views/tools/tools.component.ts | 286 +++++++++++++-------- .../admin/src/src/assets/i18n/en-us.json | 1 + .../datalake-handler/admin/src/src/styles.css | 6 + 10 files changed, 448 insertions(+), 132 deletions(-) create mode 100644 components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.css create mode 100644 components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.html create mode 100644 components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.spec.ts create mode 100644 components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.ts 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 eb7db267..53b4e064 100644 --- a/components/datalake-handler/admin/src/src/app/app.module.ts +++ b/components/datalake-handler/admin/src/src/app/app.module.ts @@ -107,6 +107,7 @@ import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { TopicModalComponent } from "./views/topics/topic-list/topic-modal/topic-modal.component"; import { KafkaModalComponent } from "./views/kafka/kafka-list/kafka-modal/kafka-modal.component"; import { DbModalComponent } from "./views/database/database-list/db-modal/db-modal.component"; +import { ToolModalComponent } from "./views/tools/tool-modal/tool-modal.component"; @NgModule({ declarations: [ @@ -155,7 +156,8 @@ import { DbModalComponent } from "./views/database/database-list/db-modal/db-mod IconComponent, TopicModalComponent, KafkaModalComponent, - DbModalComponent + DbModalComponent, + ToolModalComponent ], imports: [ BrowserModule, @@ -201,7 +203,8 @@ import { DbModalComponent } from "./views/database/database-list/db-modal/db-mod ModalToolsComponent, TopicModalComponent, KafkaModalComponent, - DbModalComponent + DbModalComponent, + ToolModalComponent ] }) export class AppModule {} 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 97421e42..ec5e2dce 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 @@ -142,7 +142,7 @@ export class RestApiService { } /* - Database + Database and tools */ public getAllDbs(): Observable { return this.http @@ -150,6 +150,12 @@ export class RestApiService { .pipe(retry(1), catchError(this.handleError)); } + public getAllTools(): Observable { + return this.http + .get(prefix + "dbs/list?isDb=false") + .pipe(retry(1), catchError(this.handleError)); + } + public getDbTypes(): Observable { return this.http .get(prefix + "dbs/dbtypes") diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.css b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.css new file mode 100644 index 00000000..0b713d55 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.css @@ -0,0 +1,25 @@ +/* +* ============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========================================================= +*/ + +/* + * For every Angular component you write, you may define not only an HTML template, + * but also the CSS styles that go with that template, specifying any selectors, + * rules, and media queries that you need. +*/ diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.html b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.html new file mode 100644 index 00000000..81e3b583 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.html @@ -0,0 +1,107 @@ + + +
+ +
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+ +
diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.spec.ts new file mode 100644 index 00000000..2f22cd68 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.spec.ts @@ -0,0 +1,44 @@ +/* + * ============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 { ToolModalComponent } from "./tool-modal.component"; + +describe("ToolModalComponent", () => { + let component: ToolModalComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ToolModalComponent] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ToolModalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it("should create", () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.ts new file mode 100644 index 00000000..038d7464 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/tools/tool-modal/tool-modal.component.ts @@ -0,0 +1,74 @@ +/* + * ============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 { NgxSpinnerService } from "ngx-spinner"; +import { NgbActiveModal } 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 { Db, DbType } from "src/app/core/models/db.model"; +import { from, forkJoin } from "rxjs"; +import { mergeMap, map } from "rxjs/operators"; + +@Component({ + selector: "app-tool-modal", + templateUrl: "./tool-modal.component.html", + styleUrls: ["./tool-modal.component.css"] +}) +export class ToolModalComponent implements OnInit { + @Input() data: Db; + @Input() mode: string; + + dbTypes: Array = []; + + constructor( + public activeModal: NgbActiveModal, + public adminService: AdminService, + private restApiService: RestApiService, + private spinner: NgxSpinnerService + ) {} + + ngOnInit() { + // this.spinner.show(); + + // get database types + const get_dbTypes = this.restApiService.getDbTypes().pipe( + mergeMap(dbTypes => from(dbTypes)), + map(dbType => { + if (dbType.tool) this.dbTypes.push(dbType); + }) + ); + + forkJoin(get_dbTypes).subscribe(data => { + if (this.mode === "new") { + // default value + if (this.dbTypes.length > 0) { + this.data.dbTypeId = this.dbTypes[0].id; + } + } + }); + } +} diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tools.component.html b/components/datalake-handler/admin/src/src/app/views/tools/tools.component.html index c55fa463..434846c7 100644 --- a/components/datalake-handler/admin/src/src/app/views/tools/tools.component.html +++ b/components/datalake-handler/admin/src/src/app/views/tools/tools.component.html @@ -1,5 +1,5 @@
- + +
+
- - +
- - - diff --git a/components/datalake-handler/admin/src/src/app/views/tools/tools.component.ts b/components/datalake-handler/admin/src/src/app/views/tools/tools.component.ts index 65de6ada..a7fe3019 100644 --- a/components/datalake-handler/admin/src/src/app/views/tools/tools.component.ts +++ b/components/datalake-handler/admin/src/src/app/views/tools/tools.component.ts @@ -1,5 +1,5 @@ /* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + Copyright (C) 2019 - 2020 CMCC, Inc. and others. All rights reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -18,31 +18,35 @@ * * @author Chunmeng Guo * + * @constructor Ekko Chang */ -import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; -import {AdminService} from "src/app/core/services/admin.service"; -import {Db} from "src/app/core/models/db.model"; -import {RestApiService} from "src/app/core/services/rest-api.service"; -import {AlertComponent} from "src/app/shared/components/alert/alert.component"; -import {ToastrNotificationService} from "src/app/shared/components/toastr-notification/toastr-notification.service"; -import {NgbModal} from "@ng-bootstrap/ng-bootstrap"; -import {ToolAddModalComponent} from "src/app/views/tools/tool-add-modal/tool-add-modal.component"; -import {ModalToolsComponent} from "src/app/views/tools/modal-tools/modal-tools.component"; +import { Component, ElementRef, OnInit, ViewChild } from "@angular/core"; +import { AdminService } from "src/app/core/services/admin.service"; +import { Db } from "src/app/core/models/db.model"; +import { RestApiService } from "src/app/core/services/rest-api.service"; + +// Modal +import { AlertComponent } from "src/app/shared/components/alert/alert.component"; +import { ModalComponent } from "src/app/shared/modules/modal/modal.component"; +import { ModalContentData } from "src/app/shared/modules/modal/modal.data"; +import { ToolModalComponent } from "src/app/views/tools/tool-modal/tool-modal.component"; +import { ToastrNotificationService } from "src/app/shared/components/toastr-notification/toastr-notification.service"; +import { NgbModal } from "@ng-bootstrap/ng-bootstrap"; + +import { NgxSpinnerService } from "ngx-spinner"; +import { map, mergeMap } from "rxjs/operators"; +import { forkJoin, from } from "rxjs"; @Component({ - selector: 'app-tools', - templateUrl: './tools.component.html', - styleUrls: ['./tools.component.css'] + selector: "app-tools", + templateUrl: "./tools.component.html", + styleUrls: ["./tools.component.css"] }) export class ToolsComponent implements OnInit { - - toolsColumns: Array = []; - toolsList: Array = []; - dbs: Db[] = []; - toolNew: Db; - loading: Boolean = true; - flag: Boolean = false; + columns: Array = []; + tools: Array = []; + t_temp: Array = []; // cache for tools @ViewChild("searchText") searchText: ElementRef; @@ -50,132 +54,186 @@ export class ToolsComponent implements OnInit { private adminService: AdminService, private notificationService: ToastrNotificationService, private modalService: NgbModal, - private dbApiService: RestApiService + private restApiService: RestApiService, + private spinner: NgxSpinnerService ) { this.adminService.setTitle("SIDEBAR.DASHBOARDLIST"); - this.initData().then(data => { }); + // this.initData().then(data => {}); } ngOnInit() { - this.toolsColumns = [ + this.spinner.show(); + + let t_tools: Array = []; + + const get_tools = this.restApiService.getAllTools().pipe( + mergeMap(tools => from(tools)), + map(tool => { + t_tools.push(tool); + }) + ); + + forkJoin(get_tools).subscribe(data => { + this.columns = this.initColumn(); + this.tools = t_tools; + this.t_temp = [...this.tools]; + this.updateFilter(this.searchText.nativeElement.value); + setTimeout(() => { + this.spinner.hide(); + }, 500); + }); + } + + initColumn() { + let t_columns: Array = []; + + t_columns = [ { - name: "STATUS", - width: "50", - dataIndex: "enabled" + headerName: "STATUS", + width: "15", + sortable: true, + dataIndex: "enabled", + icon: "status" }, { - name: "NAME", - width: "220", + headerName: "NAME", + width: "420", + sortable: true, dataIndex: "name" }, { - name: "DB_TYPE", - width: "220", + headerName: "Type", + width: "50", + sortable: true, dataIndex: "dbTypeId" }, { - name: "", - width: "5", - dataIndex: "", - icon: "trash" + headerName: "Host", + width: "100", + sortable: true, + dataIndex: "host" + }, + { + width: "2", + iconButton: "cog", + action: "edit" }, { - name: "", - width: "5", - dataIndex: "", - icon: "cog" + width: "2", + iconButton: "trash", + action: "delete" } ]; - } - async initData() { - this.toolsList = await this.dbApiService.getDbEncryptList(this.flag).toPromise(); + return t_columns; } - updateFilter(searchValue) { + updateFilter(searchValue: string) { const val = searchValue.toLowerCase(); - // filter our data - const temps = this.toolsList.filter(function (d) { - return d.name.toLowerCase().indexOf(val) != -1 || !val; - }); - // update the rows - this.toolsList = temps; - } - openModalDemo() { - this.modalService.open(ToolAddModalComponent, { - windowClass: "dl-md-modal dbs", - size: "sm", - centered: true + // filter our data + const temp = this.t_temp.filter(t => { + return t.name.toLowerCase().indexOf(val) !== -1 || !val; }); - } - dataAction($event) { - if($event[0] == "trash"){ - console.log($event, "tools delete"); - this.deleteToolModel($event[1]); - }else { - console.log($event, "tools update"); - this.updateToolModel($event[1]); - } + // update the rows + this.tools = temp; } - deleteToolModel(id: number) { - - const modalRef = this.modalService.open(AlertComponent, { - size: "sm", - centered: true - }); - modalRef.componentInstance.message = "ARE_YOU_SURE_DELETE"; - modalRef.componentInstance.passEntry.subscribe(receivedEntry => { - // Delete tool - this.dbApiService.deleteDb(id).subscribe( - res => { - if (JSON.stringify(res).length <= 2) { - this.toolsList = [...this.toolsList]; - this.notificationService.success("SUCCESSFULLY_DELETED"); - this.initData(); - } else { - this.notificationService.error("FAILED_DELETED"); - } - modalRef.close(); - }, - err => { - this.notificationService.error(err); + btnTableAction(passValueArr: Array) { + let action = passValueArr[0]; + let id = passValueArr[1]; + + switch (action) { + case "edit": + this.openModal("edit", id); + break; + case "delete": + const modalRef = this.modalService.open(AlertComponent, { + size: "sm", + centered: true, + backdrop: "static" + }); + modalRef.componentInstance.message = "ARE_YOU_SURE_DELETE"; + modalRef.componentInstance.passEntry.subscribe(recevicedEntry => { + this.restApiService.deleteDb(id).subscribe( + res => { + this.ngOnInit(); + setTimeout(() => { + this.notificationService.success("SUCCESSFULLY_DELETED"); + }, 500); + }, + err => { + this.notificationService.error(err); + } + ); modalRef.close(); - } - ); - }); + }); + break; + } } - updateToolModel(id: number) { - const modalRef = this.modalService.open(ModalToolsComponent, { + openModal(mode: string = "", id: number | string) { + const modalRef = this.modalService.open(ModalComponent, { size: "lg", - centered: true + centered: true, + backdrop: "static" }); - const index = this.toolsList.findIndex(t => t.id === id); - modalRef.componentInstance.editTool = this.toolsList[index]; - modalRef.componentInstance.passEntry.subscribe(receivedEntry => { - this.toolNew = receivedEntry; - this.dbApiService - .updateDb(this.toolNew) - .subscribe( - res => { - if (res.statusCode == 200) { - this.toolsList[index] = this.toolNew; - this.toolsList = [...this.toolsList]; - this.notificationService.success("SUCCESSFULLY_UPDATED"); - this.initData(); - } else { - this.notificationService.error("FAILED_UPDATED"); + + switch (mode) { + case "new": + let newTool: Db = new Db(); + let componentNew = new ModalContentData(ToolModalComponent, newTool); + + modalRef.componentInstance.title = "NEW_TOOL"; + modalRef.componentInstance.notice = ""; + modalRef.componentInstance.mode = "new"; + modalRef.componentInstance.component = componentNew; + + modalRef.componentInstance.passEntry.subscribe((data: Db) => { + newTool = Object.assign({}, data); + console.log(newTool.dbTypeId); + console.log(newTool); + this.restApiService.addDb(newTool).subscribe( + res => { + this.ngOnInit(); + setTimeout(() => { + this.notificationService.success("SUCCESSFULLY_CREARED"); + }, 500); + }, + err => { + this.notificationService.error(err); } - modalRef.close(); - }, - err => { - this.notificationService.error(err); - modalRef.close(); - } - ); - }); + ); + modalRef.close(); + }); + break; + case "edit": + let index: number = this.tools.findIndex(db => db.id === id); + let editTool: Db = this.tools[index]; + let componentEdit = new ModalContentData(ToolModalComponent, editTool); + + modalRef.componentInstance.title = editTool.name; + modalRef.componentInstance.notice = ""; + modalRef.componentInstance.mode = "edit"; + modalRef.componentInstance.component = componentEdit; + + modalRef.componentInstance.passEntry.subscribe((data: Db) => { + editTool = Object.assign({}, data); + this.restApiService.updateDb(editTool).subscribe( + res => { + this.ngOnInit(); + setTimeout(() => { + this.notificationService.success("SUCCESSFULLY_UPDATED"); + }, 500); + }, + err => { + this.notificationService.error(err); + } + ); + modalRef.close(); + }); + break; + } } } 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 b5e7d28a..3f4959bf 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 @@ -77,6 +77,7 @@ "EDIT_KAFKA": "Edit Kafka", "NEW_DB": "New Database", "DB_TYPE": "Db Type", + "TOOL_TYPE": "Tool Type", "NEW_DRUID": "New Druid", "NEW_ELASTICSEARCH": "New Elasticsearch", "NEW_COUCHBASE": "New Couchbase", diff --git a/components/datalake-handler/admin/src/src/styles.css b/components/datalake-handler/admin/src/src/styles.css index 64cc8eae..958bb669 100644 --- a/components/datalake-handler/admin/src/src/styles.css +++ b/components/datalake-handler/admin/src/src/styles.css @@ -135,6 +135,12 @@ hr { /* bootstrap table theme */ +.table-panel { + background: #FFFFFF; + box-shadow: 3px 3px 11px 0 #D2D3D5; + border-radius: 20px; +} + .ngx-datatable.bootstrap { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; -- cgit 1.2.3-korg