From 2c25cbab17de51f9b9a688644be92d0afdb2fa42 Mon Sep 17 00:00:00 2001 From: Piotr Darosz Date: Wed, 27 Mar 2019 15:25:50 +0100 Subject: Generic Artifact Browser SDC UI Introduce Generic Artifact Browser SDC UI in VF -> Deployment Artifacts view. Change-Id: I312c6c9d77f42ad2d073a8ad21c983ede39dfd0b Issue-ID: SDC-2211 Signed-off-by: Piotr Darosz --- catalog-ui/src/app/ng2/app.module.ts | 7 +- .../generic-artifact-browser.component.html | 36 ++++++ .../generic-artifact-browser.component.less | 62 ++++++++++ .../generic-artifact-browser.component.ts | 125 +++++++++++++++++++++ .../generic-artifact-browser.module.ts | 41 +++++++ catalog-ui/src/app/ng2/services/gab.service.ts | 59 ++++++++++ 6 files changed, 329 insertions(+), 1 deletion(-) create mode 100644 catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html create mode 100644 catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.less create mode 100644 catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.module.ts create mode 100644 catalog-ui/src/app/ng2/services/gab.service.ts (limited to 'catalog-ui/src/app/ng2') diff --git a/catalog-ui/src/app/ng2/app.module.ts b/catalog-ui/src/app/ng2/app.module.ts index 22c6624348..cd488d9cd1 100644 --- a/catalog-ui/src/app/ng2/app.module.ts +++ b/catalog-ui/src/app/ng2/app.module.ts @@ -3,6 +3,7 @@ * SDC * ================================================================================ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * Modifications Copyright (C) 2019 Nokia. 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. @@ -78,6 +79,8 @@ import {AutomatedUpgradeService} from "./pages/automated-upgrade/automated-upgra import {AutomatedUpgradeModule} from "./pages/automated-upgrade/automated-upgrade.module"; import {RequirementsEditorModule} from "./pages/req-and-capabilities-editor/requirements-editor/requirements-editor.module" import {CapabilitiesEditorModule} from "./pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.module" +import {GenericArtifactBrowserModule} from "./components/logic/generic-artifact-browser/generic-artifact-browser.module"; +import {GabService} from "./services/gab.service"; export const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule)); @@ -123,7 +126,8 @@ export function configServiceFactory(config: ConfigService) { ServiceDependenciesModule, ServiceDependenciesEditorModule, RequirementsEditorModule, - CapabilitiesEditorModule + CapabilitiesEditorModule, + GenericArtifactBrowserModule ], exports: [], entryComponents: [ @@ -163,6 +167,7 @@ export function configServiceFactory(config: ConfigService) { ComponentInstanceServiceNg2, TranslationServiceConfig, PluginsService, + GabService, ArchiveService, EventBusService, { diff --git a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html new file mode 100644 index 0000000000..a94f0cafa0 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html @@ -0,0 +1,36 @@ + + +
+ + Loading... + +
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.less b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.less new file mode 100644 index 0000000000..288cfd9619 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.less @@ -0,0 +1,62 @@ +@import '../../../../../assets/styles/mixins'; + +.ngx-datatable.material { + .datatable-body { + .datatable-body-row { + .datatable-body-cell { + background-clip: padding-box; + background-color: rgb(233, 236, 239); + flex-direction: column; + font-family: monospace; + font-size: 16px; + font-stretch: 100%; + font-weight: 400; + line-height:5px; + margin-right: 6px; + overflow: auto !important; + padding: 3px; + border-bottom: 6px solid white; + + .selectable(); + + span { + display: inline-block; + line-height: 15pt; + .break-all-words(); + } + } + } + } +} + +.datatable-row-group { + padding-bottom: 6px; + padding-top: 6px; +} + +.datatable-body-cell-label { + :focus { + border-color: white; + -webkit-box-shadow: none; + box-shadow: none; + } + :hover { + cursor: default; + } +} + +.datatable-header span.datatable-header-cell-label { + .break-all-words(); +} + +.datatable-header-cell { + color: rgb(51, 51, 51); + font-weight: bold; + font-size: 14px; + text-align: center; +} + +.break-all-words { + word-break: break-all; + white-space: normal; +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts new file mode 100644 index 0000000000..c87fb51162 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts @@ -0,0 +1,125 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2019 Nokia. 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. + * ============LICENSE_END========================================================= + */ + +import {Component, Input, ViewEncapsulation} from "@angular/core"; +import {GabService, IServerResponse} from "../../../services/gab.service"; +import {PathsAndNamesDefinition} from "../../../../models/paths-and-names"; + +const COLUMN_PREFIX: string = 'col'; + +@Component({ + selector: 'gab', + templateUrl: './generic-artifact-browser.component.html', + styleUrls:['./generic-artifact-browser.component.less'], + encapsulation: ViewEncapsulation.None +}) +export class GenericArtifactBrowserComponent { + @Input() + pathsandnames: PathsAndNamesDefinition[]; + @Input() + artifactid: string; + @Input() + resourceid: string; + + columns: ColumnDefinition[]; + rows: any[]; + selectedRows: any[]; + isLoading: boolean; + ready: boolean; + + constructor(private gabService: GabService) { + } + + ngOnInit() { + this.ready = false; + this.isLoading = true; + this.columns = []; + let paths: string[] = this.pathsandnames.map(item => item.path); + this.gabService.getArtifact(this.artifactid, this.resourceid, paths) + .subscribe( + response => { + let typedServerResponse:IServerResponse = response.json(); + this.normalizeDataForNgxDatatable(typedServerResponse.data); + }, + err => console.log(err), + () => { + this.ready = true; + this.isLoading = false; + } + ); + } + + private normalizeDataForNgxDatatable(data: [{ [key: string]: string }]) { + let result: NormalizationResult = this.getNormalizationResult(data, this.pathsandnames); + this.rows = result.rows; + this.columns = result.columns; + } + + private getNormalizationResult(data: [{ [key: string]: string }], + pathsAndNames: PathsAndNamesDefinition[]): NormalizationResult { + //Prepare column names and column data property names + let mappingsPathToProp = new Map(); + let columnsDefinitions = this.normalizeColumns(pathsAndNames, mappingsPathToProp); + + //Convert rows from { "string": "string" } to { prop : "string" } format + //This is required by NgxDatatable component + let arrayOfRows = this.normalizeRows(data, mappingsPathToProp); + + return new NormalizationResult(arrayOfRows, columnsDefinitions); + } + + private normalizeColumns(pathsAndNames: PathsAndNamesDefinition[], mappingsPathToProp: Map) { + let columnsDefinitions: ColumnDefinition[] = []; + let index: number = 1; + + pathsAndNames.forEach(function (col) { + let columnDataPropertyName: string = COLUMN_PREFIX + index; + mappingsPathToProp.set(col.path, columnDataPropertyName); + let cell: ColumnDefinition = new ColumnDefinition(col.friendlyName, columnDataPropertyName); + columnsDefinitions.push(cell); + index += 1; + }); + return columnsDefinitions; + } + + private normalizeRows(data: [{ [key: string]: string }], mappingsPathToProp: Map) { + let arrayOfRows = []; + data.forEach(function (col) { + let row = {}; + for (let key in col) { + if (col.hasOwnProperty(key)) { + let columnNameAsProp = mappingsPathToProp.get(key); + row[columnNameAsProp] = col[key]; + } + } + arrayOfRows.push(row); + }); + return arrayOfRows; + } +} + +class NormalizationResult { + constructor(public rows: any[], public columns: ColumnDefinition[]) {} +} + +export class ColumnDefinition { + constructor(public name: string, public prop: string) {} +} + diff --git a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.module.ts b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.module.ts new file mode 100644 index 0000000000..afb20472f1 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.module.ts @@ -0,0 +1,41 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2019 Nokia. 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. + * ============LICENSE_END========================================================= + */ +import {NgModule} from "@angular/core"; +import {GenericArtifactBrowserComponent} from "./generic-artifact-browser.component"; +import {NgxDatatableModule} from "@swimlane/ngx-datatable"; +import {GabService} from "../../../services/gab.service"; +import {BrowserModule} from "@angular/platform-browser"; + +@NgModule({ + declarations: [ + GenericArtifactBrowserComponent + ], + imports: [ + BrowserModule, + NgxDatatableModule + ], + entryComponents: [ //need to add anything that will be dynamically created + GenericArtifactBrowserComponent + ], + exports: [], + providers: [GabService] +}) +export class GenericArtifactBrowserModule { +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/services/gab.service.ts b/catalog-ui/src/app/ng2/services/gab.service.ts new file mode 100644 index 0000000000..d903d20ade --- /dev/null +++ b/catalog-ui/src/app/ng2/services/gab.service.ts @@ -0,0 +1,59 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2019 Nokia. 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. + * ============LICENSE_END========================================================= + */ + +import {Injectable, Inject} from "@angular/core"; +import {Response} from '@angular/http'; +import {HttpService} from "./http.service"; +import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config"; +import {Observable} from "rxjs"; + +export interface IServerResponse { + data: [{ [key: string]: string }]; +} + +export class GabRequest { + constructor(public fields: string[], + public parentId: string, + public artifactUniqueId: string) { + + } +} + +@Injectable() +export class GabService { + baseUrl: string; + gabUrl: string; + + constructor(@Inject(SdcConfigToken) sdcConfig: ISdcConfig, private http: HttpService) { + this.baseUrl = sdcConfig.api.root; + this.gabUrl = sdcConfig.api.POST_GAB_Search; + } + + public getArtifact(artifactUniqueId: string, resourceId: string, columns: string[]): Observable { + let finalUrl: string = this.baseUrl + this.gabUrl; + let request: GabRequest = { + fields: columns, + parentId: resourceId, + artifactUniqueId: artifactUniqueId + }; + + return this.http.post(finalUrl, request); + } +} \ No newline at end of file -- cgit 1.2.3-korg