diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components/logic')
4 files changed, 264 insertions, 0 deletions
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 @@ +<!-- + ~ 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. + --> + +<div> + <ngx-datatable + class="material" + *ngIf="ready" + [rows]="rows" + [columns]="columns" + [columnMode]="'force'" + [headerHeight]="50" + [scrollbarV]="true" + [scrollbarH]="true" + [footerHeight]="0" + [loadingIndicator]="isLoading" + [rowHeight]="200" + [reorderable]="false" + [selected]="selectedRows" + [selectionType]="'cell'" + > + Loading... + </ngx-datatable> +</div>
\ 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 = <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<string,string>(); + 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<string,string>) { + 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<string,string>) { + 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 |