From aa72781388f3e6408bb43f1b024d88ec1c9d2c10 Mon Sep 17 00:00:00 2001 From: "andre.schmid" Date: Tue, 4 Oct 2022 20:29:28 +0100 Subject: Add data type properties workspace MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implements the properties workspace for a data type, with the list and filter feature. Change-Id: I2ec337a0481bddd5fe32e45644abdc88e197fa49 Issue-ID: SDC-4214 Signed-off-by: André Schmid --- catalog-ui/configurations/menu.js | 1 + .../models/properties-inputs/property-be-model.ts | 12 ++ .../type-workspace-properties.component.html | 62 +++++++++ .../type-workspace-properties.component.less | 141 +++++++++++++++++++++ .../type-workspace-properties.component.spec.ts | 111 ++++++++++++++++ .../type-workspace-properties.component.ts | 115 +++++++++++++++++ .../type-workspace/type-workspace.component.html | 6 +- .../type-workspace.component.spec.ts | 6 +- .../pages/type-workspace/type-workspace.module.ts | 7 +- .../src/app/ng2/services/data-type.service.ts | 7 +- catalog-ui/src/assets/languages/en_US.json | 6 +- 11 files changed, 466 insertions(+), 8 deletions(-) create mode 100644 catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.html create mode 100644 catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.less create mode 100644 catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.spec.ts create mode 100644 catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.ts (limited to 'catalog-ui') diff --git a/catalog-ui/configurations/menu.js b/catalog-ui/configurations/menu.js index 4b462b752a..5a7e165a9a 100644 --- a/catalog-ui/configurations/menu.js +++ b/catalog-ui/configurations/menu.js @@ -302,6 +302,7 @@ const SDC_MENU_CONFIG = { ], "DataType": [ {"text": "General", "action": "onMenuItemPressed", "state": "general"}, + {"text": "Properties", "action": "onMenuItemPressed", "state": "properties"}, ] } diff --git a/catalog-ui/src/app/models/properties-inputs/property-be-model.ts b/catalog-ui/src/app/models/properties-inputs/property-be-model.ts index 097bbb2c54..b8cccdd213 100644 --- a/catalog-ui/src/app/models/properties-inputs/property-be-model.ts +++ b/catalog-ui/src/app/models/properties-inputs/property-be-model.ts @@ -197,5 +197,17 @@ export class PropertyBEModel { public isToscaFunction(): boolean { return this.toscaFunction != null; } + + /** + * Gets the schema type, if there is a schema. Otherwise, returns undefined. + * + * @return the schema type. + */ + public getSchemaType(): string { + if (this.schema && this.schema.property) { + return this.schema.property.type; + } + return undefined; + } } diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.html b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.html new file mode 100644 index 0000000000..61c319eb6f --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.html @@ -0,0 +1,62 @@ + + +
+
+ {{'PROPERTY_SHOWING_LABEL' | translate}}: {{filteredProperties.length}} of {{properties.length}} + + +
+
+
+
+
{{header.title}} + +
+
+
+ +
+
+ {{'PROPERTY_LIST_EMPTY_MESSAGE' | translate}} +
+
+
+ {{property.name}} +
+ +
+ {{property.type}} +
+
+ {{property.getSchemaType() || ''}} +
+
+ {{property.description}} +
+
+
+
+ +
+
+ +
diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.less b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.less new file mode 100644 index 0000000000..9c101e8ce3 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.less @@ -0,0 +1,141 @@ +/* + * - + * ============LICENSE_START======================================================= + * Copyright (C) 2022 Nordix Foundation. + * ================================================================================ + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +@import "../../../../../assets/styles/sprite-old"; +@import "../../../../../assets/styles/mixins_old"; + +.workspace-properties { + + width: 93%; + display: inline-block; + + #left-top-bar { + float: left; + width: 186px; + + ::-webkit-input-placeholder { + font-style: italic; + } + + :-moz-placeholder { + font-style: italic; + } + + ::-moz-placeholder { + font-style: italic; + } + + :-ms-input-placeholder { + font-style: italic; + } + + #properties-count { + font-weight: bold; + float: left; + } + + #search-by-name { + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + width: 270px; + height: 32px; + line-height: 32px; + border: 1px solid @main_color_o; + text-indent: 10px; + } + + .search-button { + .hand; + cursor: pointer; + float: right; + position: relative; + top: -22px; + right: -80px; + } + } + + .delete-col-header { + .sprite(); + .sprite.e-sdc-small-icon-delete(); + } + + .table { + height: 100%; + min-height: 500px; + margin-bottom: 0; + } + + .data-row { + .table-delete-btn { + display: none !important; + } + + &:hover { + .table-delete-btn { + display: inline-block !important; + } + } + } + + .table-container-flex { + margin-top: 0; + overflow: scroll; + &::-webkit-scrollbar-track { + border: 0; + } + + .text { + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + } + + .flex-item:nth-child(1) { + flex-grow: 15; + + a { + .hand + } + } + + .flex-item:nth-child(2) { + flex-grow: 6; + } + + .flex-item:nth-child(3) { + flex-grow: 6; + } + + .flex-item:nth-child(4) { + flex-grow: 20; + white-space: normal; + } + + .flex-item:nth-child(5) { + flex-grow: 3; + padding-top: 10px; + } + + } + +} diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.spec.ts b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.spec.ts new file mode 100644 index 0000000000..6be572d16a --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.spec.ts @@ -0,0 +1,111 @@ +/* + * - + * ============LICENSE_START======================================================= + * Copyright (C) 2022 Nordix Foundation. + * ================================================================================ + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; + +import {TypeWorkspacePropertiesComponent} from './type-workspace-properties.component'; +import {FormsModule} from "@angular/forms"; +import {TranslateModule} from "../../../shared/translator/translate.module"; +import {TranslateService} from "../../../shared/translator/translate.service"; +import {DataTypeService} from "../../../services/data-type.service"; +import {Observable} from "rxjs/Observable"; +import {DataTypeModel} from "../../../../models/data-types"; +import {Component, ViewChild} from "@angular/core"; +import {PropertyBEModel} from "../../../../models/properties-inputs/property-be-model"; + +describe('TypeWorkspacePropertiesComponent', () => { + const messages = require("../../../../../assets/languages/en_US.json"); + let testHostComponent: TestHostComponent; + let testHostFixture: ComponentFixture; + let dataTypeServiceMock: Partial = { + findAllProperties: jest.fn( (dataTypeId) => { + if (dataTypeId === 'dataTypeId') { + const property1 = new PropertyBEModel(); + property1.name = 'property1' + property1.type = 'string' + return Observable.of([property1]); + } + return Observable.of([]); + }) + }; + + let translateServiceMock: Partial = { + 'translate': jest.fn( (translateKey: string) => { + return messages[translateKey]; + }) + }; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [TypeWorkspacePropertiesComponent, TestHostComponent], + imports: [ + TranslateModule, + FormsModule + ], + providers: [ + {provide: DataTypeService, useValue: dataTypeServiceMock}, + {provide: TranslateService, useValue: translateServiceMock} + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + testHostFixture = TestBed.createComponent(TestHostComponent); + testHostComponent = testHostFixture.componentInstance; + testHostFixture.detectChanges(); + }); + + it('should create', () => { + expect(testHostComponent).toBeTruthy(); + }); + + it('empty property list', () => { + const element = testHostFixture.nativeElement; + const div: HTMLDivElement = element.querySelector('.no-row-text'); + expect(div.textContent).toContain(messages.PROPERTY_LIST_EMPTY_MESSAGE); + }); + + it('test property list', () => { + testHostFixture = TestBed.createComponent(TestHostComponent); + testHostComponent = testHostFixture.componentInstance; + const dataType = new DataTypeModel(); + dataType.uniqueId = 'dataTypeId'; + testHostComponent.typeWorkspacePropertiesComponent.dataType = dataType; + testHostFixture.detectChanges(); + + const element = testHostFixture.nativeElement; + expect(element.querySelector('.no-row-text')).toBeFalsy(); + const expectedPropertyName = 'property1'; + const propertyNameLink: HTMLAnchorElement = element.querySelector(`a[data-tests-id^="property-name-${expectedPropertyName}"]`); + expect(propertyNameLink.textContent).toContain(expectedPropertyName); + }); + + @Component({ + selector: 'host-component', + template: `` + }) + class TestHostComponent { + @ViewChild(TypeWorkspacePropertiesComponent) + public typeWorkspacePropertiesComponent: TypeWorkspacePropertiesComponent; + } + +}); diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.ts b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.ts new file mode 100644 index 0000000000..931fd3d97c --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.ts @@ -0,0 +1,115 @@ +/* + * - + * ============LICENSE_START======================================================= + * Copyright (C) 2022 Nordix Foundation. + * ================================================================================ + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +import {Component, Input, OnInit} from '@angular/core'; +import {DataTypeModel} from "../../../../models/data-types"; +import {DataTypeService} from "../../../services/data-type.service"; +import {PropertyBEModel} from "../../../../models/properties-inputs/property-be-model"; +import { Subject } from "rxjs"; +import {debounceTime, distinctUntilChanged} from "rxjs/operators"; + +@Component({ + selector: 'app-type-workspace-properties', + templateUrl: './type-workspace-properties.component.html', + styleUrls: ['./type-workspace-properties.component.less'] +}) +export class TypeWorkspacePropertiesComponent implements OnInit { + @Input() isViewOnly = true; + @Input() dataType: DataTypeModel = new DataTypeModel(); + + properties: Array = []; + filteredProperties: Array = []; + tableHeadersList: Array = []; + tableSortBy: string = 'name'; + tableColumnReverse: boolean = false; + tableFilterTerm: string = undefined; + tableSearchTermUpdate = new Subject(); + + constructor(private dataTypeService: DataTypeService) { } + + ngOnInit(): void { + this.initTable(); + this.initProperties(); + this.tableSearchTermUpdate.pipe( + debounceTime(400), + distinctUntilChanged()) + .subscribe(searchTerm => { + this.filter(searchTerm); + }); + } + + private initTable(): void { + this.tableHeadersList = [ + {title: 'Name', property: 'name'}, + {title: 'Type', property: 'type'}, + {title: 'Schema', property: 'schema.property.type'}, + {title: 'Description', property: 'description'}, + ]; + + this.tableSortBy = this.tableHeadersList[0].property; + } + + private initProperties(): void { + this.dataTypeService.findAllProperties(this.dataType.uniqueId).subscribe(properties => { + this.properties = properties.map(value => new PropertyBEModel(value)); + this.filteredProperties = Array.from(this.properties); + this.sort(); + }); + } + + onUpdateSort(property: string): void { + if (this.tableSortBy === property) { + this.tableColumnReverse = !this.tableColumnReverse; + } else { + this.tableColumnReverse = false; + this.tableSortBy = property; + } + this.sort(); + } + + private sort(): void { + const field = this.tableSortBy; + this.filteredProperties = this.filteredProperties.sort((property1, property2) => { + const result = property1[field] > property2[field] ? 1 : property1[field] < property2[field] ? -1 : 0; + return this.tableColumnReverse ? result * -1 : result; + }); + } + + private filter(searchTerm: string): void { + if (searchTerm) { + searchTerm = searchTerm.toLowerCase(); + this.filteredProperties = this.properties.filter(property => + property.name.toLowerCase().includes(searchTerm) + || property.type.toLowerCase().includes(searchTerm) + || (property.getSchemaType() && property.getSchemaType().toLowerCase().includes(searchTerm)) + || (property.description && property.description.toLowerCase().includes(searchTerm)) + ); + } else { + this.filteredProperties = Array.from(this.properties); + } + this.sort(); + } +} + +interface TableHeader { + title: string; + property: string; +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.html b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.html index 8d6ae02598..193c94e6ad 100644 --- a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.html +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.html @@ -42,9 +42,11 @@ {{currentMenu.text}} -
- +
+ +
+
diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.spec.ts b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.spec.ts index 8450da829b..fcad472890 100644 --- a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.spec.ts +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.spec.ts @@ -22,7 +22,7 @@ import {async, ComponentFixture, TestBed} from '@angular/core/testing'; import {TypeWorkspaceComponent} from './type-workspace.component'; -import {ReactiveFormsModule} from "@angular/forms"; +import {FormsModule, ReactiveFormsModule} from "@angular/forms"; import {TranslateModule} from "../../shared/translator/translate.module"; import {UiElementsModule} from "../../components/ui/ui-elements.module"; import {DataTypeService} from "../../services/data-type.service"; @@ -37,6 +37,7 @@ import {ISdcConfig, SdcConfigToken} from "../../config/sdc-config.config"; import {States} from "../../../utils/constants"; import {IUserProperties} from "../../../models/user"; import {Observable} from "rxjs/Observable"; +import {TypeWorkspacePropertiesComponent} from "./type-workspace-properties/type-workspace-properties.component"; describe('TypeWorkspaceComponent', () => { let component: TypeWorkspaceComponent; @@ -88,9 +89,10 @@ describe('TypeWorkspaceComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ TypeWorkspaceComponent, WorkspaceMenuComponent, TypeWorkspaceGeneralComponent ], + declarations: [ TypeWorkspaceComponent, WorkspaceMenuComponent, TypeWorkspaceGeneralComponent, TypeWorkspacePropertiesComponent ], imports: [ ReactiveFormsModule, + FormsModule, TranslateModule, UiElementsModule, LayoutModule diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.module.ts b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.module.ts index d3f391db24..021f84af09 100644 --- a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.module.ts +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.module.ts @@ -28,9 +28,10 @@ import {UiElementsModule} from "../../components/ui/ui-elements.module"; import {LayoutModule} from "../../components/layout/layout.module"; import {TypeWorkspaceGeneralComponent} from './type-workspace-general/type-workspace-general.component'; import {UpgradeModule} from "@angular/upgrade/static"; -import {ReactiveFormsModule} from "@angular/forms"; +import {FormsModule, ReactiveFormsModule} from "@angular/forms"; import {TranslateModule} from "../../shared/translator/translate.module"; import {DataTypeService} from "../../services/data-type.service"; +import { TypeWorkspacePropertiesComponent } from './type-workspace-properties/type-workspace-properties.component'; @NgModule({ imports: [ @@ -40,11 +41,13 @@ import {DataTypeService} from "../../services/data-type.service"; UpgradeModule, ReactiveFormsModule, TranslateModule, + FormsModule, ], declarations: [ TypeWorkspaceComponent, WorkspaceMenuComponent, - TypeWorkspaceGeneralComponent + TypeWorkspaceGeneralComponent, + TypeWorkspacePropertiesComponent ], providers: [ CacheService, diff --git a/catalog-ui/src/app/ng2/services/data-type.service.ts b/catalog-ui/src/app/ng2/services/data-type.service.ts index bf500ec16e..74d48d35de 100644 --- a/catalog-ui/src/app/ng2/services/data-type.service.ts +++ b/catalog-ui/src/app/ng2/services/data-type.service.ts @@ -20,7 +20,7 @@ import * as _ from "lodash"; import {Inject, Injectable} from '@angular/core'; -import { DataTypeModel, DataTypesMap, PropertyFEModel, DerivedFEProperty} from "app/models"; +import {DataTypeModel, DataTypesMap, PropertyFEModel, DerivedFEProperty, PropertyBEModel} from "app/models"; import { DataTypesService } from "app/services/data-types-service"; import { PROPERTY_DATA } from "app/utils"; import {DerivedFEAttribute} from "../../models/attributes-outputs/derived-fe-attribute"; @@ -78,6 +78,11 @@ export class DataTypeService { return this.httpClient.get(url); } + public findAllProperties(id: string): Observable> { + const url = `${this.dataTypeUrl}/${id}/properties` + return this.httpClient.get>(url); + } + public getConstraintsByParentTypeAndUniqueID(rootPropertyType, propertyName){ // const property = this.dataTypes[rootPropertyType].properties.filter(property => // property.name == propertyName); diff --git a/catalog-ui/src/assets/languages/en_US.json b/catalog-ui/src/assets/languages/en_US.json index 3f5a10726c..c3a6bc9a4c 100644 --- a/catalog-ui/src/assets/languages/en_US.json +++ b/catalog-ui/src/assets/languages/en_US.json @@ -41,6 +41,7 @@ "GENERAL_LABEL_SYSTEM_NAME": "System Name:", "GENERAL_LABEL_SOURCE_SERVICE_NAME": "Source Service Name:", "GENERAL_LABEL_RESOURCE_CUSTOMIZATION_UUID": "Resource Customization UUID:", + "SEARCH_LABEL": "Search", "=========== GENERAL_TAB ===========": "", "GENERAL_TAB_LABEL_RESOURCE_MODEL_NUMBER": "Vendor Model Number", "GENERAL_TAB_LABEL_SERVICE_TYPE": "Service Type", @@ -578,5 +579,8 @@ "MODIFIED_LABEL": "Modified", "UNIQUE_ID_LABEL": "Unique Id", "=========== SERVICE IMPORT ===========": "", - "IMPORT_FAILURE_MESSAGE_TEXT": "Import Failure - error reading CSAR" + "IMPORT_FAILURE_MESSAGE_TEXT": "Import Failure - error reading CSAR", + "=========== PROPERTIES ===========": "", + "PROPERTY_LIST_EMPTY_MESSAGE": "There are no properties to display", + "PROPERTY_SHOWING_LABEL": "Showing Properties" } -- cgit 1.2.3-korg