diff options
Diffstat (limited to 'catalog-ui/src')
27 files changed, 1144 insertions, 117 deletions
diff --git a/catalog-ui/src/app/app.ts b/catalog-ui/src/app/app.ts index e7e2828eb5..ba9bd44e03 100644 --- a/catalog-ui/src/app/app.ts +++ b/catalog-ui/src/app/app.ts @@ -29,12 +29,7 @@ import './modules/directive-module.ts'; import './modules/service-module'; import './modules/view-model-module.ts'; import {SdcUiCommon, SdcUiComponents, SdcUiServices} from 'onap-ui-angular'; -import { - CookieService, - DataTypesService, - EcompHeaderService, - LeftPaletteLoaderService -} from "./services"; +import {CookieService, DataTypesService, EcompHeaderService, LeftPaletteLoaderService} from "./services"; import {CacheService, CatalogService, HomeService} from "./services-ng2"; import {AuthenticationService} from "app/ng2/services/authentication.service"; import {CHANGE_COMPONENT_CSAR_VERSION_FLAG, PREVIOUS_CSAR_COMPONENT, States} from "./utils"; @@ -216,7 +211,14 @@ ng1appModule.config([ ); $stateProvider.state( - 'workspace', { + States.TYPE_WORKSPACE, { + url: '/:previousState/type-workspace/:type/:id/:subPage', + template: '<app-type-workspace></app-type-workspace>', + } + ); + + $stateProvider.state( + States.WORKSPACE, { url: '/:previousState/workspace/:id/:type/', params: { 'importedFile': null, @@ -228,7 +230,6 @@ ng1appModule.config([ controller: viewModelsModuleName + '.WorkspaceViewModel', resolve: { injectComponent: ['$stateParams', 'ComponentFactory', 'workspaceService', 'Sdc.Services.CacheService', function ($stateParams, ComponentFactory: ComponentFactory, workspaceService: WorkspaceService, cacheService: CacheService) { - if ($stateParams.id && $stateParams.id.length) { //need to check length in case ID is an empty string return ComponentFactory.getComponentWithMetadataFromServer($stateParams.type.toUpperCase(), $stateParams.id).then( (component: Component) => { @@ -316,7 +317,6 @@ ng1appModule.config([ parent: 'workspace', resolve: { componentData: ['injectComponent', '$stateParams', function (injectComponent: Component, $stateParams) { - //injectComponent.componentService = null; // this is for not passing the service so no one will use old api and start using new api $stateParams.component = injectComponent; return injectComponent; }], @@ -401,7 +401,6 @@ ng1appModule.config([ template: '<composition-page></composition-page>', resolve: { componentData: ['injectComponent', '$stateParams', function (injectComponent: Component, $stateParams) { - //injectComponent.componentService = null; // this is for not passing the service so no one will use old api and start using new api $stateParams.component = injectComponent; return injectComponent; }], @@ -672,7 +671,6 @@ ng1appModule.run([ //handle http config $http.defaults.withCredentials = true; - // $http.defaults.headers.common.Authorization = 'Basic YmVlcDpib29w'; $http.defaults.headers.common[cookieService.getUserIdSuffix()] = cookieService.getUserId(); DataTypesService.loadDataTypesCache(null); @@ -723,15 +721,15 @@ ng1appModule.run([ }; let onStateChangeStart: Function = (event, toState, toParams, fromState, fromParams): void => { - console.info((new Date()).getTime()); - console.info('$stateChangeStart', toState.name); + console.debug((new Date()).getTime()); + console.debug('$stateChangeStart', toState.name); if (toState.name !== 'error-403' && !authService.getLoggedinUser()) { authService.authenticate().subscribe((userInfo: IUserProperties) => { if (!doesUserHasAccess(toState, userInfo)) { $state.go('error-403'); - console.info('User has no permissions'); + console.debug('User has no permissions'); return; } authService.setLoggedinUser(userInfo); @@ -740,7 +738,6 @@ ng1appModule.run([ removeLoader(); if (authService.getLoggedinUser().role === 'ADMIN') { - // toState.name = "adminDashboard"; $state.go("adminDashboard", toParams); return; } @@ -769,11 +766,10 @@ ng1appModule.run([ if (!doesUserHasAccess(toState, authService.getLoggedinUser())) { event.preventDefault(); $state.go('error-403'); - console.info('User has no permissions'); + console.debug('User has no permissions'); } if (authService.getLoggedinUser().role === 'ADMIN') { - // toState.name = "adminDashboard"; $state.go("adminDashboard", toParams); return; } @@ -798,7 +794,7 @@ ng1appModule.run([ }; let onStateChangeSuccess: Function = (event, toState, toParams, fromState, fromParams): void => { - console.info('$stateChangeSuccess', toState.name); + console.debug('$stateChangeSuccess', toState.name); // Workaround in case we are entering other state then workspace (user move to catalog) // remove the changeComponentCsarVersion, user should open again the VSP list and select one for update. @@ -831,7 +827,7 @@ ng1appModule.run([ let registerStateChangeStartWatcher: Function = (): void => { internalDeregisterStateChangeStartWatcher(); - console.info('registerStateChangeStartWatcher $stateChangeStart'); + console.debug('registerStateChangeStartWatcher $stateChangeStart'); deregisterStateChangeStartWatcher = $rootScope.$on('$stateChangeStart', (event, toState, toParams, fromState, fromParams): void => { onStateChangeStart(event, toState, toParams, fromState, fromParams); }); diff --git a/catalog-ui/src/app/models/data-types.ts b/catalog-ui/src/app/models/data-types.ts index 7fc788bf93..3b0833b5b4 100644 --- a/catalog-ui/src/app/models/data-types.ts +++ b/catalog-ui/src/app/models/data-types.ts @@ -29,36 +29,39 @@ import {PROPERTY_DATA} from "../utils/constants"; export class DataTypeModel { - //server data - name:string; - uniqueId:string; - derivedFromName:string; - derivedFrom:DataTypeModel; - creationTime:string; - modificationTime:string; + name: string; + uniqueId: string; + derivedFromName: string; + derivedFrom: DataTypeModel; + description: string; + creationTime: string; + modificationTime: string; properties: Array<PropertyBEModel>; attributes: Array<AttributeBEModel>; model: Model; - constructor(dataType: DataTypeModel) { - if (dataType) { - this.uniqueId = dataType.uniqueId; - this.name = dataType.name; - this.derivedFromName = dataType.derivedFromName; - if (dataType.derivedFrom) { - this.derivedFrom = new DataTypeModel(dataType.derivedFrom); - } - this.creationTime = dataType.creationTime; - this.modificationTime = dataType.modificationTime; - if (dataType.properties) { - this.properties = []; - dataType.properties.forEach(property => { - this.properties.push(new PropertyBEModel(property)); - }); - } - this.attributes = dataType.attributes; - this.model = dataType.model; + constructor(dataType?: DataTypeModel) { + if (!dataType) { + return; } + + this.uniqueId = dataType.uniqueId; + this.name = dataType.name; + this.description = dataType.description; + this.derivedFromName = dataType.derivedFromName; + if (dataType.derivedFrom) { + this.derivedFrom = new DataTypeModel(dataType.derivedFrom); + } + this.creationTime = dataType.creationTime; + this.modificationTime = dataType.modificationTime; + if (dataType.properties) { + this.properties = []; + dataType.properties.forEach(property => { + this.properties.push(new PropertyBEModel(property)); + }); + } + this.attributes = dataType.attributes; + this.model = dataType.model; } public toJSON = ():any => { diff --git a/catalog-ui/src/app/modules/directive-module.ts b/catalog-ui/src/app/modules/directive-module.ts index 25d8607b6b..70ceb0fed3 100644 --- a/catalog-ui/src/app/modules/directive-module.ts +++ b/catalog-ui/src/app/modules/directive-module.ts @@ -96,6 +96,8 @@ import {DistributionComponent} from '../ng2/pages/workspace/disribution/distribu import {AttributesOutputsComponent} from "../ng2/pages/attributes-outputs/attributes-outputs.page.component"; import {InterfaceDefinitionComponent} from "../ng2/pages/interface-definition/interface-definition.page.component"; import {ToscaFunctionComponent} from '../ng2/pages/properties-assignment/tosca-function/tosca-function.component'; +import {TypeWorkspaceComponent} from "../ng2/pages/type-workspace/type-workspace.component"; +import {TypeWorkspaceGeneralComponent} from "../ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component"; let moduleName: string = 'Sdc.Directives'; let directiveModule: ng.IModule = angular.module(moduleName, []); @@ -321,3 +323,15 @@ directiveModule.directive('toscaFunction', downgradeComponent({ inputs: ['componentInstanceMap', 'property'], outputs: [] }) as angular.IDirectiveFactory); + +directiveModule.directive('appTypeWorkspace', downgradeComponent({ + component: TypeWorkspaceComponent, + inputs: [], + outputs: [] +}) as angular.IDirectiveFactory); + +directiveModule.directive('appTypeWorkspaceGeneral', downgradeComponent({ + component: TypeWorkspaceGeneralComponent, + inputs: [], + outputs: [] +}) as angular.IDirectiveFactory); diff --git a/catalog-ui/src/app/modules/view-model-module.ts b/catalog-ui/src/app/modules/view-model-module.ts index dd08135f33..084219ab1a 100644 --- a/catalog-ui/src/app/modules/view-model-module.ts +++ b/catalog-ui/src/app/modules/view-model-module.ts @@ -37,6 +37,11 @@ import {ManagementWorkflowViewModel} from "../view-models/workspace/tabs/managem import {InterfaceOperationViewModel} from "../view-models/workspace/tabs/interface-operation/interface-operation-view-model"; import {NetworkCallFlowViewModel} from "../view-models/workspace/tabs/network-call-flow/network-call-flow-view-model"; import {InterfaceDefinitionViewModel} from "../view-models/workspace/tabs/interface-definition/interface-definition-view-model"; +import {TypeWorkspaceComponent} from "../ng2/pages/type-workspace/type-workspace.component"; +import {downgradeComponent} from "@angular/upgrade/static"; +import {WorkspaceMenuComponent} from "../ng2/pages/type-workspace/workspace-menu/workspace-menu.component"; +import {TypeWorkspaceGeneralComponent} from "../ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component"; + let moduleName:string = 'Sdc.ViewModels'; let viewModelModule:ng.IModule = angular.module(moduleName, []); @@ -61,4 +66,7 @@ viewModelModule .controller(moduleName + '.ManagementWorkflowViewModel', ManagementWorkflowViewModel) .controller(moduleName + '.InterfaceOperationViewModel', InterfaceOperationViewModel) .controller(moduleName + '.InterfaceDefinitionViewModel', InterfaceDefinitionViewModel) - .controller(moduleName + '.NetworkCallFlowViewModel', NetworkCallFlowViewModel); + .controller(moduleName + '.NetworkCallFlowViewModel', NetworkCallFlowViewModel) + .controller(moduleName + '.TypeWorkspaceComponent', downgradeComponent({ component: TypeWorkspaceComponent })) + .controller(moduleName + '.WorkspaceMenuComponent', downgradeComponent({ component: WorkspaceMenuComponent })) + .controller(moduleName + '.TypeWorkspaceGeneralComponent', downgradeComponent({ component: TypeWorkspaceGeneralComponent })); diff --git a/catalog-ui/src/app/ng2/app.module.ts b/catalog-ui/src/app/ng2/app.module.ts index 7153f0a841..801b663d69 100644 --- a/catalog-ui/src/app/ng2/app.module.ts +++ b/catalog-ui/src/app/ng2/app.module.ts @@ -108,6 +108,7 @@ import {ElementService} from "./services/element.service"; import {ModelService} from "./services/model.service"; import {ToscaArtifactService} from "./services/tosca-artifact.service"; import {InterfaceDefinitionModule} from "./pages/interface-definition/interface-definition.module"; +import {TypeWorkspaceModule} from "./pages/type-workspace/type-workspace.module"; declare const __ENV__: string; @@ -172,6 +173,7 @@ export function configServiceFactory(config: ConfigService, authService: Authent ServiceDependenciesModule, ServiceDependenciesEditorModule, WorkspaceModule, + TypeWorkspaceModule, ModalsModule, CatalogModule, HomeModule, diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts index 3bd2255488..2b7be9cdeb 100644 --- a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts +++ b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts @@ -19,17 +19,13 @@ */ import * as _ from "lodash"; -import {Component, Inject, Input, Output, EventEmitter, OnInit, OnDestroy, OnChanges} from "@angular/core"; -import {IHostedApplication, IUserProperties} from "app/models"; -import {MenuItemGroup, MenuItem} from "app/utils"; +import {Component, EventEmitter, Inject, Input, OnChanges, OnInit, Output} from "@angular/core"; +import {IHostedApplication, IUserProperties, Plugin, PluginsConfiguration} from "app/models"; +import {MenuItem, MenuItemGroup} from "app/utils"; import {AuthenticationService} from "../../../services/authentication.service"; -import {SdcConfigToken, ISdcConfig} from "../../../config/sdc-config.config"; +import {ISdcConfig, SdcConfigToken} from "../../../config/sdc-config.config"; import {TranslateService} from "../../../shared/translator/translate.service"; -import {PluginsConfiguration, Plugin} from "app/models"; -import { Subscription } from "rxjs"; -// import { Store } from "@ngrx/store"; -// import { AppState } from "app/ng2/store/app.state"; -// import * as unsavedChangesReducer from 'app/ng2/store/reducers/unsaved-changes.reducer'; +import {Subscription} from "rxjs"; declare const window:any; @Component({ @@ -111,13 +107,13 @@ export class TopNavComponent implements OnInit, OnChanges { ngOnChanges(changes) { if (changes['menuModel']) { - console.log('menuModel was changed!'); + console.debug('menuModel was changed!'); this.generateMenu(); } } ngOnInit() { - console.log('Nav is init!', this.menuModel); + console.debug('Nav is init!', this.menuModel); this.user = this.authService.getLoggedinUser(); this.topNavPlugins = _.filter(PluginsConfiguration.plugins, (plugin: Plugin) => { return plugin.pluginDisplayOptions["tab"] !== undefined; @@ -190,7 +186,7 @@ export class TopNavComponent implements OnInit, OnChanges { if (item.callback) { (item.callback.apply(undefined, item.params)).then(onSuccess, onFailed); - } else { + } else if (this[item.action]) { this[item.action](item.state, item.params).then(onSuccess, onFailed); } } diff --git a/catalog-ui/src/app/ng2/config/sdc-menu.config.factory.ts b/catalog-ui/src/app/ng2/config/sdc-menu.config.factory.ts index 0e2b93dd7c..d2dfc57843 100644 --- a/catalog-ui/src/app/ng2/config/sdc-menu.config.factory.ts +++ b/catalog-ui/src/app/ng2/config/sdc-menu.config.factory.ts @@ -13,10 +13,9 @@ ~ See the License for the specific language governing permissions and ~ limitations under the License. -- */ - + import {IAppMenu} from "app/models"; -export function getSdcMenu() : IAppMenu{ - const sdcMenu:IAppMenu = require('./../../../../configurations/menu.js'); - return sdcMenu; +export function getSdcMenu(): IAppMenu { + return require('./../../../../configurations/menu.js'); } diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.html b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.html new file mode 100644 index 0000000000..877c58bd58 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.html @@ -0,0 +1,79 @@ +<!-- + ~ - + ~ ============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========================================================= + --> + +<div class="sdc-workspace-general-step"> + <form class="w-sdc-form" [formGroup]="formGroup"> + <div class="w-sdc-form-section-container"> + <div class="w-sdc-form-columns-wrapper"> + <div class="w-sdc-form-column"> + <div class="upper-general-fields"> + <div class="name-and-category-fields"> + <div class="i-sdc-form-item" [ngClass]="{'error': false}"> + <label class="i-sdc-form-label" [ngClass]="{'required': !isViewOnly}">{{'TYPE_LABEL' | translate}}:</label> + <span>{{dataType.name}}</span> + </div> + + <div class="i-sdc-form-item"> + <label class="i-sdc-form-label" [ngClass]="{'required': !isViewOnly}">{{'MODEL_LABEL' | translate}}:</label> + <span>{{dataType.model ? dataType.model : DEFAULT_MODEL_NAME}}</span> + </div> + + <div class="i-sdc-form-item"> + <label class="i-sdc-form-label" [ngClass]="{'required': !isViewOnly}">{{'DERIVED_FROM_LABEL' | translate}}:</label> + <span>{{dataType.derivedFromName}}</span> + </div> + </div> + </div> + + <div class="i-sdc-form-item description-field"> + <label class="i-sdc-form-label" [ngClass]="{'required': !isViewOnly}">{{'DESCRIPTION_LABEL' | translate}}:</label> + <textarea class="description" + formControlName="description" + [ngClass]="{'view-mode': isViewOnly}" + [required]="true" + [attr.test-id]="description" + [value]="dataType.description"></textarea> + </div> + </div> + + <div class="w-sdc-form-column"> + <div class="meta-data" data-ng-if="component.creationDate"> + <div> + <strong>{{'CREATED_LABEL' | translate}}:</strong> + </div> + <div class="meta-data-item-value">{{dataType.creationTime | date:'MM/dd/yyyy'}}</div> + <div> + <strong>{{'MODIFIED_LABEL' | translate}}:</strong> + </div> + <div class="meta-data-item-value"> + {{dataType.modificationTime | date:'MM/dd/yyyy'}} + </div> + <div> + <strong>{{'UNIQUE_ID_LABEL' | translate}}:</strong> + </div> + <div class="meta-data-item-value">{{dataType.uniqueId}}</div> + </div> + </div> + + </div> + </div> + </form> +</div> diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.less b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.less new file mode 100644 index 0000000000..3d9e984809 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.less @@ -0,0 +1,20 @@ +/* + * - + * ============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========================================================= + */ diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.spec.ts b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.spec.ts new file mode 100644 index 0000000000..fe7b070354 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.spec.ts @@ -0,0 +1,59 @@ +/* + * - + * ============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 {TypeWorkspaceGeneralComponent} from './type-workspace-general.component'; +import {ReactiveFormsModule} from "@angular/forms"; +import {TranslateModule} from "../../../shared/translator/translate.module"; +import {TranslateService} from "../../../shared/translator/translate.service"; + +describe('TypeWorkspaceGeneralComponent', () => { + let component: TypeWorkspaceGeneralComponent; + let fixture: ComponentFixture<TypeWorkspaceGeneralComponent>; + let translateServiceMock: Partial<TranslateService> = { + 'translate': jest.fn() + }; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TypeWorkspaceGeneralComponent ], + imports: [ + ReactiveFormsModule, + TranslateModule + ], + providers: [ + {provide: TranslateService, useValue: translateServiceMock} + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TypeWorkspaceGeneralComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.ts b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.ts new file mode 100644 index 0000000000..8728c3020e --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.ts @@ -0,0 +1,62 @@ +/* + * - + * ============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 {FormControl, FormGroup, Validators} from "@angular/forms"; +import {DataTypeModel} from "../../../../models/data-types"; +import { DEFAULT_MODEL_NAME } from "app/utils/constants"; + +@Component({ + selector: 'app-type-workspace-general', + templateUrl: './type-workspace-general.component.html', + styleUrls: ['./type-workspace-general.component.less'] +}) +export class TypeWorkspaceGeneralComponent implements OnInit { + @Input() isViewOnly = true; + @Input() dataType: DataTypeModel = new DataTypeModel(); + + DEFAULT_MODEL_NAME = DEFAULT_MODEL_NAME; + + type: FormControl = new FormControl(undefined, [Validators.required, Validators.minLength(1), Validators.maxLength(300)]); + derivedFrom: FormControl = new FormControl(undefined, [Validators.required, Validators.minLength(1)]); + description: FormControl = new FormControl(undefined, [Validators.required, Validators.minLength(1)]); + model: FormControl = new FormControl(undefined, [Validators.required]); + formGroup: FormGroup = new FormGroup({ + 'type': this.type, + 'description': this.description, + 'model': this.model, + 'derivedFrom': this.derivedFrom + }); + + ngOnInit(): void { + this.initForm(); + } + + private initForm(): void { + if (!this.dataType) { + return; + } + this.type.setValue(this.dataType.name); + this.description.setValue(this.dataType.description); + this.model.setValue(this.dataType.model); + this.derivedFrom.setValue(this.dataType.derivedFrom); + } +} 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 new file mode 100644 index 0000000000..8d6ae02598 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.html @@ -0,0 +1,53 @@ +<!-- + ~ - + ~ ============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========================================================= + --> + +<div class="sdc-workspace-container"> + <loader [display]="isLoading"></loader> + <div class="w-sdc-main-container"> + <app-workspace-menu [menuHeader]="dataType.name" + (onMenuUpdate)="onMenuUpdate($event)" + (onClick)="onMenuClick($event)"> + </app-workspace-menu> + + <div class="w-sdc-main-right-container"> + <div class="sdc-workspace-top-bar"> + <div class="progress-container"> + </div> + <div class="sdc-workspace-top-bar-buttons"> + <span class="sprite-new x-btn" (click)="goToBreadcrumbHome()" sdc-smart-tooltip="Close" [title]="'CLOSE_LABEL' | translate"></span> + </div> + </div> + + <div class="w-sdc-main-container-body-content-wrapper"> + <div class="w-sdc-main-container-body-content-header"> + <div class="workspace-tab-title"> + {{currentMenu.text}} + </div> + </div> + <div class="w-sdc-main-container-body-content"> + <app-type-workspace-general *ngIf="currentMenu.state === 'general' && dataType" [dataType]="dataType"></app-type-workspace-general> + </div> + </div> + + </div> + </div> + <top-nav [hideSearch]="true" [menuModel]="breadcrumbsModel" [version]="sdcVersion" [unsavedChanges]="false"></top-nav> +</div> diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.less b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.less new file mode 100644 index 0000000000..4839b24f5e --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.less @@ -0,0 +1,149 @@ +/* + * - + * ============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/variables.less'; +@import '../../../../assets/styles/mixins.less'; +@import '../../../../assets/styles/mixins_old.less'; +@import '../../../../assets/styles/sprite.less'; + +.sdc-workspace-container { + .bg_p; + + .w-sdc-main-right-container { + + padding: 0; + background-color: @main_color_p; + + .sdc-workspace-top-bar { + height: @action_nav_height; + padding: 12px 10px 0 50px; + border-bottom: 1px solid @main_color_o; + display: flex; + justify-content: space-between; + white-space: nowrap; + overflow-x: auto; + overflow-y: hidden; + + .progress-container { + flex-grow: 4; + z-index: 1; + display: inline-block; + + .general-view-top-progress { + width: 30%; + margin: 0 auto; + min-width: 140px; + } + } + + .not-latest { + position: absolute; + left: 24px; + top: 20px; + .sprite-new; + .asdc-warning; + display: inline-block; + } + + .sdc-workspace-top-bar-buttons { + + > button, > span:not(.delimiter) { + margin-right: 10px; + vertical-align: middle; + .hand; + + &.sprite-new { + text-indent: 100%; + } + + &.disabled, &:hover.disabled { + pointer-events: none; + } + } + + .delimiter { + height: 32px; + width: 1px; + background-color: @main_color_o; + display: inline-block; + vertical-align: middle; + margin-right: 20px; + } + + display: inline-block; + + } + } + + .workspace-tab-title { + height: 110px; + padding-left: 100px; + line-height: 110px; + .f-type ._28; + } + + .w-sdc-main-container-body-content { + align-items: center; + padding: 0 100px 20px 100px; + + &.third-party { + text-align: left; + padding: 0; + position: absolute; + top: @action_nav_height + @tab_title; + left: 0; + right: 0; + bottom: 0; + } + } + + .w-sdc-main-container-body-content-wrapper { + overflow: auto; + height: calc(~'100% - @{action_nav_height}'); + + .w-sdc-main-container-body-content-header { + display: flex; + + .workspace-tab-title { + flex-grow: 1; + } + + .w-sdc-main-container-body-content-action-buttons { + margin: 72px 100px 0 0; + + > * { + display: inline-block; + vertical-align: middle; + } + + .revert-btn { + text-indent: 100%; + } + + .save-btn { + text-indent: 100%; + } + } + } + } + } +} + 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 new file mode 100644 index 0000000000..8450da829b --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.spec.ts @@ -0,0 +1,122 @@ +/* + * - + * ============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 {TypeWorkspaceComponent} from './type-workspace.component'; +import {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"; +import {TranslateService} from "../../shared/translator/translate.service"; +import {WorkspaceMenuComponent} from "./workspace-menu/workspace-menu.component"; +import {TypeWorkspaceGeneralComponent} from "./type-workspace-general/type-workspace-general.component"; +import {LayoutModule} from "../../components/layout/layout.module"; +import {CacheService} from "../../services/cache.service"; +import {IAppMenu, SdcMenuToken} from "../../config/sdc-menu.config"; +import {AuthenticationService} from "../../services/authentication.service"; +import {ISdcConfig, SdcConfigToken} from "../../config/sdc-config.config"; +import {States} from "../../../utils/constants"; +import {IUserProperties} from "../../../models/user"; +import {Observable} from "rxjs/Observable"; + +describe('TypeWorkspaceComponent', () => { + let component: TypeWorkspaceComponent; + let fixture: ComponentFixture<TypeWorkspaceComponent>; + let translateServiceMock: Partial<TranslateService> = { + 'languageChangedObservable': Observable.of(), + 'translate': jest.fn() + }; + let dataTypeServiceMock: Partial<DataTypeService>; + let cacheService: Partial<CacheService> = { + 'get': jest.fn(param => { + if (param === 'version') { + return 'version'; + } + if (param === 'user') { + return {}; + } + }) + }; + let stateMock: Partial<ng.ui.IStateService> = { + 'current': { + 'name': States.TYPE_WORKSPACE + } + }; + let stateParamsMock: Partial<ng.ui.IStateParamsService> = {}; + let injectorMock: Partial<ng.auto.IInjectorService> = { + 'get': jest.fn(param => { + if (param === '$state') { + return stateMock; + } + }) + }; + let sdcMenuMock: Partial<IAppMenu> = { + 'component_workspace_menu_option': { + "DataType": [ + {"text": "General", "action": "onMenuItemPressed", "state": "general"} + ] + } + }; + let sdcConfigMock: Partial<ISdcConfig>; + let user: Partial<IUserProperties> = { + 'role': 'DESIGNER' + } + let authenticationService: Partial<AuthenticationService> = { + 'getLoggedinUser': jest.fn(() => { + return user; + }) + }; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TypeWorkspaceComponent, WorkspaceMenuComponent, TypeWorkspaceGeneralComponent ], + imports: [ + ReactiveFormsModule, + TranslateModule, + UiElementsModule, + LayoutModule + ], + providers: [ + {provide: DataTypeService, useValue: dataTypeServiceMock}, + {provide: TranslateService, useValue: translateServiceMock}, + {provide: CacheService, useValue: cacheService}, + {provide: '$state', useValue: stateMock}, + {provide: '$stateParams', useValue: stateParamsMock}, + {provide: '$injector', useValue: injectorMock}, + {provide: SdcMenuToken, useValue: sdcMenuMock}, + {provide: SdcConfigToken, useValue: sdcConfigMock}, + {provide: AuthenticationService, useValue: authenticationService}, + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TypeWorkspaceComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.ts b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.ts new file mode 100644 index 0000000000..d0d5ae8c69 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.ts @@ -0,0 +1,91 @@ +/* + * - + * ============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, Inject, OnInit} from '@angular/core'; +import {MenuItem, MenuItemGroup} from "../../../utils/menu-handler"; +import {CacheService} from "../../services/cache.service"; +import {DataTypeModel} from "../../../models/data-types"; +import {DataTypeService} from "../../services/data-type.service"; + +@Component({ + selector: 'app-type-workspace', + templateUrl: './type-workspace.component.html', + styleUrls: ['./type-workspace.component.less'] +}) +export class TypeWorkspaceComponent implements OnInit { + + private typeMenuItemGroup: MenuItemGroup; + + isLoading: boolean; + disabled: boolean; + isViewOnly: boolean = true; + sdcVersion: string; + breadcrumbsModel: Array<MenuItemGroup> = []; + dataType: DataTypeModel = new DataTypeModel(); + currentMenu: MenuItem; + + constructor(private dataTypeService: DataTypeService, private cacheService: CacheService, + @Inject('$state') private $state: ng.ui.IStateService, + @Inject('$stateParams') private stateParams) { } + + ngOnInit(): void { + this.sdcVersion = this.cacheService.get('version'); + this.typeMenuItemGroup = this.createTypeBreadcrumb(); + this.loadDataType(); + } + + private loadDataType(): void { + if (this.stateParams.id) { + this.dataTypeService.findById(this.stateParams.id).subscribe(dataType => { + this.dataType = dataType; + this.updateTypeBreadcrumb(); + }, error => { + console.debug('Could not find data type %s', this.stateParams.id, error); + this.goToBreadcrumbHome(); + }); + } else { + this.dataType = new DataTypeModel(); + } + } + + private updateTypeBreadcrumb(): void { + this.typeMenuItemGroup.updateSelectedMenuItemText(`Data Type: ${this.dataType.name}`); + } + + private createTypeBreadcrumb(): MenuItemGroup { + const menuItem = new MenuItem(`Data Type: ${this.dataType ? this.dataType.name : ''}`, undefined, undefined, undefined, [], [], false); + return new MenuItemGroup(0, [menuItem]); + } + + goToBreadcrumbHome(): void { + const homeMenuItemGroup: MenuItemGroup = this.breadcrumbsModel[0]; + this.$state.go(homeMenuItemGroup.menuItems[homeMenuItemGroup.selectedIndex].state); + } + + onMenuUpdate(menuItemGroup: MenuItemGroup): void { + this.breadcrumbsModel.push(...[this.typeMenuItemGroup, menuItemGroup]); + } + + onMenuClick(menuItem: MenuItem): void { + this.currentMenu = menuItem; + } + +} 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 new file mode 100644 index 0000000000..d3f391db24 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.module.ts @@ -0,0 +1,58 @@ +/* + * - + * ============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 {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {TypeWorkspaceComponent} from "./type-workspace.component"; +import {WorkspaceMenuComponent} from "./workspace-menu/workspace-menu.component"; +import {CacheService} from "../../services/cache.service"; +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 {TranslateModule} from "../../shared/translator/translate.module"; +import {DataTypeService} from "../../services/data-type.service"; + +@NgModule({ + imports: [ + CommonModule, + UiElementsModule, + LayoutModule, + UpgradeModule, + ReactiveFormsModule, + TranslateModule, + ], + declarations: [ + TypeWorkspaceComponent, + WorkspaceMenuComponent, + TypeWorkspaceGeneralComponent + ], + providers: [ + CacheService, + WorkspaceMenuComponent, + DataTypeService + ], + entryComponents: [TypeWorkspaceComponent], + exports: [TypeWorkspaceComponent] +}) +export class TypeWorkspaceModule { +} diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.html b/catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.html new file mode 100644 index 0000000000..18c6949b46 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.html @@ -0,0 +1,34 @@ +<!-- + ~ - + ~ ============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========================================================= + --> + +<div class="w-sdc-left-sidebar"> + <div class="menu-header" tooltips [attr.tooltip-content]="menuHeader" [title]="menuHeader"> + {{menuHeader}} + </div> + <div class="i-sdc-designer-sidebar-section-content-item" + [ngClass]="{'selected': isSelected(menuItem)}" + *ngFor="let menuItem of leftBarTabs.menuItems"> + <div class="expand-collapse-menu-box-item-text" ng-class="{'disabled': menuItem.isDisabled }"> + <button [attr.data-tests-id]="menuItem.text + 'LeftSideMenu'" type="button" class="i-sdc-designer-sidebar-section-content-item-service-cat" + (click)="menuItem.callback()" [disabled]="menuItem.disabledCategory">{{menuItem.text}}</button> + </div> + </div> +</div>
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.less b/catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.less new file mode 100644 index 0000000000..2df6e6ac8b --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.less @@ -0,0 +1,75 @@ +/* + * - + * ============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/variables.less'; +@import '../../../../../assets/styles/mixins.less'; + +.w-sdc-left-sidebar { + padding: 0; + background-color: @tlv_color_t; + box-shadow: none; + z-index: 2; + border-right: 1px solid @main_color_o; + + .menu-header { + border-bottom: 1px solid @main_color_o; + height: 53px; + .f-type._16_m; + font-weight: 700; + line-height: 53px; + padding-left: 40px; + padding-right: 10px; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + } + + .i-sdc-designer-sidebar-section-content-item { + .f-type._13_m; + color: @main_color_m; + margin-left: 20px; + padding-left: 20px; + margin-top: 20px; + height: 17px; + .hand; + + &:hover { + color: @func_color_s; + font-weight: 600; + } + + &.selected { + border-left: 4px solid @main_color_a; + color: @main_color_a; + margin-left: 18px; + padding-left: 18px; + font-weight: 600; + + } + } + +} + +.hand { + cursor: pointer; +} diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.spec.ts b/catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.spec.ts new file mode 100644 index 0000000000..a91258c00e --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.spec.ts @@ -0,0 +1,84 @@ +/* + * - + * ============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 {WorkspaceMenuComponent} from './workspace-menu.component'; +import {CacheService} from "../../../services/cache.service"; +import {States} from "../../../../utils/constants"; +import {IAppMenu} from "../../../../models/app-config"; +import {SdcMenuToken} from "../../../config/sdc-menu.config"; + +describe('WorkspaceMenuComponent', () => { + let component: WorkspaceMenuComponent; + let fixture: ComponentFixture<WorkspaceMenuComponent>; + let cacheService: Partial<CacheService> = { + 'get': jest.fn(param => { + if (param === 'version') { + return 'version'; + } + if (param === 'user') { + return {}; + } + }) + }; + let sdcMenuMock: Partial<IAppMenu> = { + 'component_workspace_menu_option': { + "DataType": [ + {"text": "General", "action": "onMenuItemPressed", "state": "general"} + ] + } + }; + let stateMock: Partial<ng.ui.IStateService> = { + 'current': { + 'name': States.TYPE_WORKSPACE + } + }; + let injectorMock: Partial<ng.auto.IInjectorService> = { + 'get': jest.fn(param => { + if (param === '$state') { + return stateMock; + } + }) + }; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ WorkspaceMenuComponent ], + providers: [ + {provide: CacheService, useValue: cacheService}, + {provide: '$injector', useValue: injectorMock}, + {provide: SdcMenuToken, useValue: sdcMenuMock} + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(WorkspaceMenuComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.ts b/catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.ts new file mode 100644 index 0000000000..c5e49d4d7d --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.ts @@ -0,0 +1,110 @@ +/* + * - + * ============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, EventEmitter, Inject, Input, OnInit, Output} from '@angular/core'; +import {MenuItem, MenuItemGroup} from "../../../../utils/menu-handler"; +import {CacheService} from "../../../services/cache.service"; +import {IAppMenu} from "../../../../models/app-config"; +import {IUserProperties} from "../../../../models/user"; +import {SdcMenuToken} from "../../../config/sdc-menu.config"; + +@Component({ + selector: 'app-workspace-menu', + templateUrl: './workspace-menu.component.html', + styleUrls: ['./workspace-menu.component.less'] +}) +export class WorkspaceMenuComponent implements OnInit { + + @Input() menuHeader: string = ''; + @Output() onMenuUpdate: EventEmitter<MenuItemGroup> = new EventEmitter<MenuItemGroup>(); + @Output() onClick: EventEmitter<MenuItem> = new EventEmitter<MenuItem>(); + + private role: string; + private user: IUserProperties; + private $state: ng.ui.IStateService; + private $q: ng.IQService; + + leftBarTabs: MenuItemGroup = new MenuItemGroup(); + + constructor(private cacheService: CacheService, @Inject(SdcMenuToken) private sdcMenu: IAppMenu, @Inject('$injector') $injector) { + this.$state = $injector.get('$state'); + this.$q = $injector.get('$q'); + } + + ngOnInit(): void { + this.user = this.cacheService.get('user'); + this.role = this.user.role; + this.initMenuItems(); + } + + private initMenuItems(): void { + this.leftBarTabs = new MenuItemGroup(); + const menuItemsObjects: MenuItem[] = this.updateMenuItemByRole(this.sdcMenu.component_workspace_menu_option["DataType"], this.role); + + this.leftBarTabs.menuItems = menuItemsObjects.map((item: MenuItem) => { + const menuCallback = () => this[menuItem.action](menuItem); + const menuItem = new MenuItem(item.text, menuCallback, item.state, item.action, item.params, item.blockedForTypes, item.disabledCategory); + if (menuItem.params) { + menuItem.params.state = menuItem.state; + } else { + menuItem.params = {state: menuItem.state}; + } + return menuItem; + }); + this.updateSelectedMenuItem(); + this.onMenuUpdate.emit(this.leftBarTabs); + } + + isSelected(menuItem: MenuItem): boolean { + return this.leftBarTabs.selectedIndex === this.leftBarTabs.menuItems.indexOf(menuItem); + } + + private onMenuItemPressed(menuItem: MenuItem): angular.IPromise<boolean> { + this.leftBarTabs.selectedIndex = this.leftBarTabs.menuItems.indexOf(menuItem); + this.onClick.emit(this.leftBarTabs.menuItems[this.leftBarTabs.selectedIndex]); + const deferred: ng.IDeferred<boolean> = this.$q.defer(); + deferred.resolve(true); + return deferred.promise; + } + + private updateMenuItemByRole(menuItems: MenuItem[], role: string): MenuItem[] { + const filteredMenuItems: MenuItem[] = []; + menuItems.forEach((item: any) => { + if (!(item.disabledRoles && item.disabledRoles.indexOf(role) > -1)) { + filteredMenuItems.push(item); + } + }); + return filteredMenuItems; + } + + private updateSelectedMenuItem(): void { + const stateArray: Array<string> = this.$state.current.name.split('.', 2); + const stateWithoutInternalNavigate: string = stateArray[0] + '.' + stateArray[1]; + const selectedItem: MenuItem = this.leftBarTabs.menuItems.find((item: MenuItem) => { + let itemStateArray: Array<string> = item.state.split('.', 2); + let itemStateWithoutNavigation: string = itemStateArray[0] + '.' + itemStateArray[1]; + return (itemStateWithoutNavigation === stateWithoutInternalNavigate); + }); + this.leftBarTabs.selectedIndex = selectedItem ? this.leftBarTabs.menuItems.indexOf(selectedItem) : 0; + this.onClick.emit(this.leftBarTabs.menuItems[this.leftBarTabs.selectedIndex]); + } + +} diff --git a/catalog-ui/src/app/ng2/services/cookie.service.ts b/catalog-ui/src/app/ng2/services/cookie.service.ts index 61d13186fa..22c1dd310f 100644 --- a/catalog-ui/src/app/ng2/services/cookie.service.ts +++ b/catalog-ui/src/app/ng2/services/cookie.service.ts @@ -18,9 +18,9 @@ * ============LICENSE_END========================================================= */ -import {Injectable, Inject} from '@angular/core'; +import {Inject, Injectable} from '@angular/core'; import {ICookie} from "../../models/app-config"; -import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config"; +import {ISdcConfig, SdcConfigToken} from "../config/sdc-config.config"; @Injectable() export class Cookie2Service { @@ -36,7 +36,6 @@ export class Cookie2Service { if ((junctionName !== null) && (junctionName !== '')) { this.cookiePrefix = this.cookie.prefix + junctionName + '!'; } - console.log("junctionName:" + junctionName); } private getCookieByName = (cookieName:string):string => { 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 70555a5efd..bf500ec16e 100644 --- a/catalog-ui/src/app/ng2/services/data-type.service.ts +++ b/catalog-ui/src/app/ng2/services/data-type.service.ts @@ -19,11 +19,15 @@ */ import * as _ from "lodash"; -import { Injectable } from '@angular/core'; +import {Inject, Injectable} from '@angular/core'; import { DataTypeModel, DataTypesMap, PropertyFEModel, DerivedFEProperty} 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"; +import {ISdcConfig} from "../config/sdc-config.config.factory"; +import {SdcConfigToken} from "../config/sdc-config.config"; +import {HttpClient} from "@angular/common/http"; +import {Observable} from "rxjs/Observable"; /** This is a new service for NG2, to eventually replace app/services/data-types-service.ts * @@ -34,11 +38,16 @@ import {DerivedFEAttribute} from "../../models/attributes-outputs/derived-fe-att @Injectable() export class DataTypeService { public dataTypes: DataTypesMap; + private readonly baseUrl: string; + private readonly dataTypeUrl: string; - constructor(private dataTypeService: DataTypesService) { + constructor(private dataTypeService: DataTypesService, private httpClient: HttpClient, @Inject(SdcConfigToken) sdcConfig: ISdcConfig) { this.dataTypes = dataTypeService.getAllDataTypes(); //This should eventually be replaced by an NG2 call to the backend instead of utilizing Angular1 downgraded component. + this.baseUrl = sdcConfig.api.root + sdcConfig.api.component_api_root; + this.dataTypeUrl = `${this.baseUrl}data-types` } + public getDataTypeByModelAndTypeName(modelName: string, typeName: string): DataTypeModel { this.dataTypes = this.dataTypeService.getAllDataTypesFromModel(modelName); let dataTypeFound = this.dataTypes[typeName]; @@ -64,6 +73,11 @@ export class DataTypeService { return this.dataTypeService.findAllDataTypesByModel(modelName); } + public findById(id: string): Observable<DataTypeModel> { + const url = `${this.dataTypeUrl}/${id}` + return this.httpClient.get<DataTypeModel>(url); + } + public getConstraintsByParentTypeAndUniqueID(rootPropertyType, propertyName){ // const property = this.dataTypes[rootPropertyType].properties.filter(property => // property.name == propertyName); diff --git a/catalog-ui/src/app/ng2/utils/ng1-upgraded-provider.ts b/catalog-ui/src/app/ng2/utils/ng1-upgraded-provider.ts index aab531d205..a3c04bc87b 100644 --- a/catalog-ui/src/app/ng2/utils/ng1-upgraded-provider.ts +++ b/catalog-ui/src/app/ng2/utils/ng1-upgraded-provider.ts @@ -21,14 +21,13 @@ /** * Created by rc2122 on 4/6/2017. */ -import { DataTypesService } from "../../services/data-types-service"; -import ICacheObject = angular.ICacheObject; -import { CookieService } from "../../services/cookie-service"; +import {DataTypesService} from "../../services/data-types-service"; +import {CookieService} from "../../services/cookie-service"; import {ComponentFactory} from "../../utils/component-factory" -import { EventListenerService } from "app/services/event-listener-service"; -import { ModalsHandler } from "app/utils"; -import IScope = angular.IScope; -import { SharingService } from "../services/sharing.service"; +import {EventListenerService} from "app/services/event-listener-service"; +import {ModalsHandler} from "app/utils"; +import {SharingService} from "../services/sharing.service"; +import ICacheObject = angular.ICacheObject; /** Services we need to upgrade from angular1 to angular2 - in the future we need to rewrite them all to angular2 **/ @@ -115,12 +114,6 @@ export const StateParamsServiceFactory = { useFactory: stateParamsServiceFactory, deps: ['$injector'] }; -// -// export const EventListenerServiceProvider = { -// provide: EventListenerService, -// useFactory: eventListenerServiceServiceFactory, -// deps: ['$injector'] -// }; export const NotificationServiceProvider = { provide: 'Notification', diff --git a/catalog-ui/src/app/services/data-types-service.ts b/catalog-ui/src/app/services/data-types-service.ts index ad8dc59b8c..ca30259260 100644 --- a/catalog-ui/src/app/services/data-types-service.ts +++ b/catalog-ui/src/app/services/data-types-service.ts @@ -19,15 +19,16 @@ */ 'use strict'; -import { DataTypePropertyModel } from "../models/data-type-properties"; +import {DataTypePropertyModel} from "../models/data-type-properties"; import { ComponentInstance, - InputModel, + DataTypeModel, DataTypesMap, - PropertyModel, - InputPropertyBase, IAppConfigurtaion, - SchemaProperty, DataTypeModel + InputModel, + InputPropertyBase, + PropertyModel, + SchemaProperty } from "../models"; import {PROPERTY_DATA} from "../utils/constants"; diff --git a/catalog-ui/src/app/utils/constants.ts b/catalog-ui/src/app/utils/constants.ts index 4e268f7087..d6710ed767 100644 --- a/catalog-ui/src/app/utils/constants.ts +++ b/catalog-ui/src/app/utils/constants.ts @@ -281,6 +281,7 @@ export class GraphUIObjects { export class States { + public static WORKSPACE = 'workspace'; public static WORKSPACE_GENERAL = 'workspace.general'; public static WORKSPACE_ACTIVITY_LOG = 'workspace.activity_log'; public static WORKSPACE_DEPLOYMENT_ARTIFACTS = 'workspace.deployment_artifacts'; @@ -303,6 +304,7 @@ export class States { public static WORKSPACE_REQUIREMENTS_AND_CAPABILITIES_EDITABLE = 'workspace.reqAndCapEditable'; public static WORKSPACE_PLUGINS = 'workspace.plugins'; public static WORKSPACE_NG2 = 'workspace.ng2'; + public static TYPE_WORKSPACE = 'type-workspace'; } export class EVENTS { diff --git a/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts b/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts index 7bed071d7e..0778b2d803 100644 --- a/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts @@ -23,38 +23,34 @@ */ 'use strict'; import * as _ from 'lodash'; +import {Component, IAppMenu, IUserProperties, Plugin, PluginsConfiguration, Resource, Service} from 'app/models'; import { - IUserProperties, - IAppMenu, - Resource, - Service, - Component, - Plugin, - PluginsConfiguration, - PluginDisplayOptions -} from 'app/models'; -import { - MenuItem, ModalsHandler, States, EVENTS, CHANGE_COMPONENT_CSAR_VERSION_FLAG, ResourceType, PREVIOUS_CSAR_COMPONENT, - WorkspaceMode, ComponentFactory, ChangeLifecycleStateHandler, Role, ComponentState, MenuItemGroup, MenuHandler + CHANGE_COMPONENT_CSAR_VERSION_FLAG, + ChangeLifecycleStateHandler, + ComponentFactory, + ComponentState, + EVENTS, + MenuHandler, + MenuItem, + MenuItemGroup, + PREVIOUS_CSAR_COMPONENT, + ResourceType, + Role, + States, + WorkspaceMode } from 'app/utils'; -import { - EventListenerService, - LeftPaletteLoaderService, - ProgressService -} from 'app/services'; -import { - CacheService -} from 'app/services-ng2'; -import { SdcUiCommon, SdcUiComponents, SdcUiServices } from 'onap-ui-angular'; -import { AutomatedUpgradeService } from '../../ng2/pages/automated-upgrade/automated-upgrade.service'; -import { CatalogService } from '../../ng2/services/catalog.service'; -import { ComponentServiceNg2 } from '../../ng2/services/component-services/component.service'; -import { EventBusService } from '../../ng2/services/event-bus.service'; -import { HomeService } from '../../ng2/services/home.service'; -import { PluginsService } from '../../ng2/services/plugins.service'; -import { IDependenciesServerResponse } from '../../ng2/services/responses/dependencies-server-response'; -import { WorkspaceNg1BridgeService } from '../../ng2/pages/workspace/workspace-ng1-bridge-service'; -import { WorkspaceService } from '../../ng2/pages/workspace/workspace.service'; +import {EventListenerService, LeftPaletteLoaderService, ProgressService} from 'app/services'; +import {CacheService} from 'app/services-ng2'; +import {SdcUiCommon, SdcUiComponents, SdcUiServices} from 'onap-ui-angular'; +import {AutomatedUpgradeService} from '../../ng2/pages/automated-upgrade/automated-upgrade.service'; +import {CatalogService} from '../../ng2/services/catalog.service'; +import {ComponentServiceNg2} from '../../ng2/services/component-services/component.service'; +import {EventBusService} from '../../ng2/services/event-bus.service'; +import {HomeService} from '../../ng2/services/home.service'; +import {PluginsService} from '../../ng2/services/plugins.service'; +import {IDependenciesServerResponse} from '../../ng2/services/responses/dependencies-server-response'; +import {WorkspaceNg1BridgeService} from '../../ng2/pages/workspace/workspace-ng1-bridge-service'; +import {WorkspaceService} from '../../ng2/pages/workspace/workspace.service'; export interface IWorkspaceViewModelScope extends ng.IScope { @@ -87,7 +83,6 @@ export interface IWorkspaceViewModelScope extends ng.IScope { progressService: ProgressService; progressMessage: string; ComponentServiceNg2: ComponentServiceNg2; - // leftPanelComponents:Array<Models.Components.Component>; //this is in order to load the left panel once, and not wait long time when moving to composition unsavedChanges: boolean; unsavedChangesCallback: Function; unsavedFile: boolean; @@ -184,7 +179,6 @@ export class WorkspaceViewModel { private workspaceService: WorkspaceService) { this.initScope(); - // this.initAfterScope(); this.$scope.updateSelectedMenuItem(this.$state.current.name); } @@ -773,7 +767,7 @@ export class WorkspaceViewModel { }; this.$scope.reload = (component: Component): void => { - const isGeneralTab = this.$state.current.name === 'workspace.general'; + const isGeneralTab = this.$state.current.name === States.WORKSPACE_GENERAL; // nullify the componentCsar in case we are in general tab so we know we didnt came from updateVsp Modal if (isGeneralTab) { this.$state.go(this.$state.current.name, {id: component.uniqueId, componentCsar: null}, {reload: true}); diff --git a/catalog-ui/src/assets/languages/en_US.json b/catalog-ui/src/assets/languages/en_US.json index 71f2b05efd..3f5a10726c 100644 --- a/catalog-ui/src/assets/languages/en_US.json +++ b/catalog-ui/src/assets/languages/en_US.json @@ -567,6 +567,16 @@ "VALUE_EXPRESSION_LABEL": "Value Expression", "OPERATOR_LABEL": "Operator", "CAPABILITY_LABEL": "Capability", + "DATA_TYPE_LABEL": "Data Type", + "MODEL_LABEL": "Model", + "DESCRIPTION_LABEL": "Description", + "DERIVED_FROM_LABEL": "Derived From", + "TYPE_LABEL": "Type", + "CREATED_LABEL": "Created", + "CREATE_LABEL": "Create", + "CLOSE_LABEL": "Close", + "MODIFIED_LABEL": "Modified", + "UNIQUE_ID_LABEL": "Unique Id", "=========== SERVICE IMPORT ===========": "", "IMPORT_FAILURE_MESSAGE_TEXT": "Import Failure - error reading CSAR" } |