From: Ekko Chang Date: Thu, 6 Feb 2020 08:53:39 +0000 (+0000) Subject: Data exposure service management pages X-Git-Url: https://gerrit.onap.org/r/gitweb?a=commitdiff_plain;h=refs%2Fchanges%2F20%2F101220%2F1;p=dcaegen2%2Fservices.git Data exposure service management pages Issue-ID: DCAEGEN2-1960 Signed-off-by: Ekko Chang Change-Id: I8f03f775210576cb3d8e9729b1154bc16149fae6 --- 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 e0484a4f..01e1ff4e 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 @@ -37,6 +37,7 @@ 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 { DataExposureComponent } from "./views/data-exposure/data-exposure.component"; const routes: Routes = [ { path: "", redirectTo: "/feeder", pathMatch: "full" }, @@ -47,7 +48,8 @@ const routes: Routes = [ { path: "database", component: DatabaseComponent }, { path: "about", component: AboutComponent }, { path: "tools", component: ToolsComponent }, - { path: "dashboard-setting/template", component: TemplateComponent } + { path: "dashboard-setting/template", component: TemplateComponent }, + { path: "data-exposure", component: DataExposureComponent } ]; @NgModule({ 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 94ce52e0..39db98cc 100644 --- a/components/datalake-handler/admin/src/src/app/app.module.ts +++ b/components/datalake-handler/admin/src/src/app/app.module.ts @@ -86,6 +86,8 @@ import { ModalComponent } from "./shared/modules/modal/modal.component"; import { ModalDirective } from "./shared/modules/modal/modal.directive"; import { ToastrNotificationComponent } from "./shared/components/toastr-notification/toastr-notification.component"; import { AlertComponent } from "./shared/components/alert/alert.component"; +import { DataExposureComponent } from "./views/data-exposure/data-exposure.component"; +import { DeModalComponent } from "./views/data-exposure/de-modal/de-modal.component"; // Others @@ -123,7 +125,9 @@ import { AlertComponent } from "./shared/components/alert/alert.component"; KafkaModalComponent, DbModalComponent, ToolModalComponent, - TemplateModalComponent + TemplateModalComponent, + DataExposureComponent, + DeModalComponent ], imports: [ BrowserModule, @@ -156,7 +160,8 @@ import { AlertComponent } from "./shared/components/alert/alert.component"; KafkaModalComponent, DbModalComponent, ToolModalComponent, - TemplateModalComponent + TemplateModalComponent, + DeModalComponent ] }) export class AppModule {} diff --git a/components/datalake-handler/admin/src/src/app/core/models/data-service.model.ts b/components/datalake-handler/admin/src/src/app/core/models/data-service.model.ts new file mode 100644 index 00000000..106a4226 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/core/models/data-service.model.ts @@ -0,0 +1,32 @@ +/* + * ============LICENSE_START======================================================= + * ONAP : DataLake + * ================================================================================ + * Copyright 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 + * + */ + +export class DataService { + public id: string; + public note: string; + public sqlTemplate: string; + public dbId: 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 d1dcd63e..6548c07f 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 @@ -36,6 +36,7 @@ import { Db, DbType } 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"; +import { DataService } from "src/app/core/models/data-service.model"; const prefix = "/datalake/v1/"; const httpOptions = { @@ -366,4 +367,45 @@ export class RestApiService { catchError(this.handleError) ); } + + /* + Dataexposure service + */ + public getAllDataService(): Observable { + return this.http + .get(prefix + "exposure") + .pipe(retry(1), catchError(this.handleError)); + } + + public getDataService(id: string): Observable { + return this.http + .get(prefix + "exposure/" + id) + .pipe(retry(1), catchError(this.handleError)); + } + + public updateDataService(ds: DataService): Observable { + return this.http + .put(prefix + "exposure/" + ds.id, ds) + .pipe( + retry(1), + tap(_ => this.extractData), + catchError(this.handleError) + ); + } + + public addDataService(ds: DataService): Observable { + return this.http.post(prefix + "exposure", ds).pipe( + retry(1), + tap(_ => console.log(`add service =${ds.id}`)), + catchError(this.handleError) + ); + } + + public deleteDataService(id: string): Observable { + return this.http.delete(prefix + "exposure/" + id).pipe( + retry(1), + tap(_ => console.log(`deleted service=${id}`)), + catchError(this.handleError) + ); + } } diff --git a/components/datalake-handler/admin/src/src/app/shared/layout/sidebar/sidebar.component.html b/components/datalake-handler/admin/src/src/app/shared/layout/sidebar/sidebar.component.html index a0ed00c4..e4cf9620 100644 --- a/components/datalake-handler/admin/src/src/app/shared/layout/sidebar/sidebar.component.html +++ b/components/datalake-handler/admin/src/src/app/shared/layout/sidebar/sidebar.component.html @@ -36,7 +36,7 @@ limitations under the License.
  • + routerLink="/kafka">   {{"SIDEBAR.KAFKA" | translate}} @@ -59,20 +59,26 @@ limitations under the License.
  • + routerLink="/tools"> {{"SIDEBAR.DASHBOARDLIST" | translate}}
  • + routerLink="dashboard-setting/template"> {{"SIDEBAR.TEMPLATE" | translate}}
    • +
  • + +   + {{"SIDEBAR.DATAEXPOSURE" | translate}} + +
  • + + +
    +
    + Home > DataExposure Service +
    + +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    + + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    + +
    + +
    diff --git a/components/datalake-handler/admin/src/src/app/views/data-exposure/data-exposure.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/data-exposure/data-exposure.component.spec.ts new file mode 100644 index 00000000..03edd24a --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/data-exposure/data-exposure.component.spec.ts @@ -0,0 +1,44 @@ +/* + * ============LICENSE_START======================================================= + * ONAP : DataLake + * ================================================================================ + * Copyright 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 { DataExposureComponent } from "./data-exposure.component"; + +describe("DataExposureComponent", () => { + let component: DataExposureComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [DataExposureComponent] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DataExposureComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it("should create", () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/components/datalake-handler/admin/src/src/app/views/data-exposure/data-exposure.component.ts b/components/datalake-handler/admin/src/src/app/views/data-exposure/data-exposure.component.ts new file mode 100644 index 00000000..348c791d --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/data-exposure/data-exposure.component.ts @@ -0,0 +1,229 @@ +/* + * ============LICENSE_START======================================================= + * ONAP : DataLake + * ================================================================================ + * Copyright 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, ViewChild, ElementRef, OnInit } from "@angular/core"; +import { RestApiService } from "src/app/core/services/rest-api.service"; +import { AdminService } from "src/app/core/services/admin.service"; +import { DataService } from "src/app/core/models/data-service.model"; +import { NgbModal } from "@ng-bootstrap/ng-bootstrap"; + +// Notify +import { ToastrNotificationService } from "src/app/shared/components/toastr-notification/toastr-notification.service"; + +// Loading spinner +import { NgxSpinnerService } from "ngx-spinner"; + +import { AlertComponent } from "src/app/shared/components/alert/alert.component"; +import { map, mergeMap } from "rxjs/operators"; +import { forkJoin, from } from "rxjs"; + +// Modal +import { ModalComponent } from "src/app/shared/modules/modal/modal.component"; +import { ModalContentData } from "src/app/shared/modules/modal/modal.data"; +import { DeModalComponent } from "src/app/views/data-exposure/de-modal/de-modal.component"; + +@Component({ + selector: "app-data-exposure", + templateUrl: "./data-exposure.component.html", + styleUrls: ["./data-exposure.component.css"] +}) +export class DataExposureComponent implements OnInit { + datas: Array = []; + t_temp: Array = []; + columns: Array = []; // column of table + + @ViewChild("searchText") searchText: ElementRef; + constructor( + private restApiService: RestApiService, + private modalService: NgbModal, + private notificationService: ToastrNotificationService, + private spinner: NgxSpinnerService, + private adminService: AdminService + ) { + // Set page title + this.adminService.setTitle("SIDEBAR.DATAEXPOSURE"); + } + + ngOnInit() { + this.spinner.show(); + let t_data: Array = []; + + const get_ds = this.restApiService.getAllDataService().pipe( + mergeMap(dss => from(dss)), + map(data => { + t_data.push(data); + }) + ); + + forkJoin(get_ds).subscribe(data => { + this.columns = this.initColumn(); + this.datas = t_data; + this.t_temp = [...this.datas]; + this.updateFilter(this.searchText.nativeElement.value); + setTimeout(() => { + this.spinner.hide(); + }, 500); + }); + } + + initColumn() { + let t_columns: Array = []; + + t_columns = [ + { + headerName: "NAME", + width: "420", + sortable: true, + dataIndex: "id" + }, + { + headerName: "DESCRIPTION", + width: "420", + sortable: true, + dataIndex: "note" + }, + { + width: "2", + iconButton: "cog", + action: "edit" + }, + { + width: "2", + iconButton: "trash", + action: "delete" + } + ]; + + return t_columns; + } + + updateFilter(searchValue: string) { + const val = searchValue.toLowerCase(); + + // filter our data + const temp = this.t_temp.filter(data => { + return data.id.toLowerCase().indexOf(val) !== -1 || !val; + }); + + // update the rows + this.datas = temp; + } + + 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.deleteDataService(id).subscribe( + res => { + this.ngOnInit(); + setTimeout(() => { + this.notificationService.success("SUCCESSFULLY_DELETED"); + }, 500); + }, + err => { + this.notificationService.error(err); + } + ); + modalRef.close(); + }); + break; + } + } + + openModal(mode: string = "", id: number | string) { + const modalRef = this.modalService.open(ModalComponent, { + size: "lg", + centered: true, + backdrop: "static" + }); + + switch (mode) { + case "new": + let newDS: DataService; + let componentNew = new ModalContentData(DeModalComponent, newDS); + + modalRef.componentInstance.title = "NEW_DATASERVICE"; + modalRef.componentInstance.notice = ""; + modalRef.componentInstance.mode = "new"; + modalRef.componentInstance.component = componentNew; + + modalRef.componentInstance.passEntry.subscribe((data: DataService) => { + newDS = Object.assign({}, data); + this.restApiService.addDataService(newDS).subscribe( + res => { + this.ngOnInit(); + setTimeout(() => { + this.notificationService.success("SUCCESSFULLY_CREARED"); + }, 500); + }, + err => { + this.notificationService.error(err); + } + ); + modalRef.close(); + }); + break; + case "edit": + let index: number = this.datas.findIndex(data => data.id === id); + let editDS: DataService = this.datas[index]; + let componentEdit = new ModalContentData(DeModalComponent, editDS); + + modalRef.componentInstance.title = editDS.id; + modalRef.componentInstance.notice = ""; + modalRef.componentInstance.mode = "edit"; + modalRef.componentInstance.component = componentEdit; + + modalRef.componentInstance.passEntry.subscribe((data: DataService) => { + editDS = Object.assign({}, data); + this.restApiService.updateDataService(editDS).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/app/views/data-exposure/de-modal/de-modal.component.css b/components/datalake-handler/admin/src/src/app/views/data-exposure/de-modal/de-modal.component.css new file mode 100644 index 00000000..0b713d55 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/data-exposure/de-modal/de-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/data-exposure/de-modal/de-modal.component.html b/components/datalake-handler/admin/src/src/app/views/data-exposure/de-modal/de-modal.component.html new file mode 100644 index 00000000..9b7747be --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/data-exposure/de-modal/de-modal.component.html @@ -0,0 +1,84 @@ + + + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    + +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    + +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    + +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    + +
    diff --git a/components/datalake-handler/admin/src/src/app/views/data-exposure/de-modal/de-modal.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/data-exposure/de-modal/de-modal.component.spec.ts new file mode 100644 index 00000000..6bda972e --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/data-exposure/de-modal/de-modal.component.spec.ts @@ -0,0 +1,44 @@ +/* + * ============LICENSE_START======================================================= + * ONAP : DataLake + * ================================================================================ + * Copyright 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 { DeModalComponent } from "./de-modal.component"; + +describe("DeModalComponent", () => { + let component: DeModalComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [DeModalComponent] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DeModalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it("should create", () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/components/datalake-handler/admin/src/src/app/views/data-exposure/de-modal/de-modal.component.ts b/components/datalake-handler/admin/src/src/app/views/data-exposure/de-modal/de-modal.component.ts new file mode 100644 index 00000000..de10e2e9 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/data-exposure/de-modal/de-modal.component.ts @@ -0,0 +1,98 @@ +/* + * ============LICENSE_START======================================================= + * ONAP : DataLake + * ================================================================================ + * Copyright 2020 QCT + *================================================================================= + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * + * @author Ekko Chang + * + */ + +import { Component, OnInit, Input } from "@angular/core"; + +import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; +import { RestApiService } from "src/app/core/services/rest-api.service"; +import { AdminService } from "src/app/core/services/admin.service"; +import { map, mergeMap } from "rxjs/operators"; +import { from } from "rxjs"; +import { Db } from "src/app/core/models/db.model"; +import { DataService } from "src/app/core/models/data-service.model"; + +@Component({ + selector: "app-de-modal", + templateUrl: "./de-modal.component.html", + styleUrls: ["./de-modal.component.css"] +}) +export class DeModalComponent implements OnInit { + @Input() data: DataService; + @Input() mode: string; + @Input() selectedIndex: number; + + dbs: Array = []; + dbTypeIds: Array = []; + + constructor( + public activeModal: NgbActiveModal, + public adminService: AdminService, + private restApiService: RestApiService + ) {} + + ngOnInit() { + // Init data + this.initData(); + } + + initData() { + this.getDbs(); + } + + 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.dbId && + this.data.dbId.toString().includes(db.id.toString()) + ) { + db.checkedToSave = true; + } else { + db.checkedToSave = false; + } + this.dbs.push(db); + }) + ); + + get_dbs.subscribe(); + } + + 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 3f4959bf..138042a7 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 @@ -7,6 +7,7 @@ "DASHBOARD": "Portal Setting", "DASHBOARDLIST": "Tools", "TEMPLATE": "Design", + "DATAEXPOSURE": "Data Exposure Service", "ABOUT": "About" }, "NAME": "Name", diff --git a/components/datalake-handler/admin/src/src/styles.css b/components/datalake-handler/admin/src/src/styles.css index 958bb669..7adea342 100644 --- a/components/datalake-handler/admin/src/src/styles.css +++ b/components/datalake-handler/admin/src/src/styles.css @@ -74,7 +74,7 @@ body { .menu .nav { justify-content: center; - min-width: 220px; + min-width: 250px; } .menu .nav-item {