diff options
Diffstat (limited to 'catalog-ui')
16 files changed, 201 insertions, 28 deletions
diff --git a/catalog-ui/src/app/app.ts b/catalog-ui/src/app/app.ts index 609ed48f3e..a3a1ba9230 100644 --- a/catalog-ui/src/app/app.ts +++ b/catalog-ui/src/app/app.ts @@ -7,9 +7,9 @@ * 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. @@ -58,6 +58,7 @@ import {ComponentMetadata} from "./models/component-metadata"; import {Categories} from "./models/categories"; import {IUserProperties} from "./models/user"; import {SearchWithAutoCompleteComponent} from "./ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component"; +import {DesignerFrameComponent} from "./ng2/components/ui/designer/designer-frame.component"; let moduleName:string = 'sdcApp'; @@ -152,7 +153,7 @@ angular.module('sdcApp').directive('ng2SearchWithAutocomplete', inputs: ['searchPlaceholder', 'searchBarClass', 'autoCompleteValues'], outputs: ['searchChanged', 'searchButtonClicked'] }) as angular.IDirectiveFactory); - +angular.module('sdcApp').directive('designerFrame', downgradeComponent( {component: DesignerFrameComponent, inputs: ['designer']} ) as angular.IDirectiveFactory); ng1appModule.config([ '$stateProvider', @@ -533,6 +534,14 @@ ng1appModule.config([ } ); + $stateProvider.state( + 'designers', { + url: '/designers/*path', + templateUrl: './view-models/designers/designers-view.html', + controller: viewModelsModuleName + '.DesignersViewModel' + } + ); + // Build the states for all hosted apps dynamically _.each(hostedApplications, (hostedApp)=> { if (hostedApp.exists) { diff --git a/catalog-ui/src/app/models.ts b/catalog-ui/src/app/models.ts index 014525367d..4848fb5da2 100644 --- a/catalog-ui/src/app/models.ts +++ b/catalog-ui/src/app/models.ts @@ -7,9 +7,9 @@ * 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. @@ -26,6 +26,7 @@ export * from './models/activity'; export * from './models/additional-information'; export * from './models/app-config'; export * from './models/validation-config'; +export * from './models/designers-config'; export * from './models/artifacts'; export * from './models/aschema-property'; export * from './models/schema-attribute'; diff --git a/catalog-ui/src/app/models/designers-config.ts b/catalog-ui/src/app/models/designers-config.ts new file mode 100644 index 0000000000..c784be2707 --- /dev/null +++ b/catalog-ui/src/app/models/designers-config.ts @@ -0,0 +1,17 @@ + +export class Designer { + displayName: string; + designerHost: string; + designerPort: number; + designerPath: string; + designerStateUrl: string; + designerProtocol: string; + designerButtonLocation: Array<string>; + designerTabPresentation: Array<string>; +} + +export type Designers = Array<Designer>; + +export class DesignersConfiguration { + static designers: Designers; +} diff --git a/catalog-ui/src/app/modules/view-model-module.ts b/catalog-ui/src/app/modules/view-model-module.ts index f94bfc3218..63ca9012d6 100644 --- a/catalog-ui/src/app/modules/view-model-module.ts +++ b/catalog-ui/src/app/modules/view-model-module.ts @@ -7,9 +7,9 @@ * 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. @@ -73,6 +73,7 @@ import {InputFormViewModel} from "../view-models/forms/input-form/input-form-vie import {HierarchyViewModel} from "../view-models/tabs/hierarchy/hierarchy-view-model"; import {downgradeComponent} from "@angular/upgrade/static"; import {ConformanceLevelModalViewModel} from "../view-models/modals/conformance-level-modal/conformance-level-modal-view-model"; +import {DesignersViewModel} from "../view-models/designers/designers-view-model"; // import {NG2ExampleComponent} from "../ng2/view-ng2/ng2.example.component/ng2.example.component"; // import {upgradeAdapter} from "../ng2/app.module"; // import { UpgradeAdapter } from '@angular/upgrade'; @@ -135,9 +136,10 @@ viewModelModule .controller(moduleName + '.ServiceInputsViewModel', ServiceInputsViewModel) .controller(moduleName + '.ReqAndCapabilitiesViewModel', ReqAndCapabilitiesViewModel) .controller(moduleName + '.InputFormViewModel', InputFormViewModel) + .controller(moduleName + '.DesignersViewModel', DesignersViewModel) // // //TABS - .controller(moduleName + '.HierarchyViewModel', HierarchyViewModel) + .controller(moduleName + '.HierarchyViewModel', HierarchyViewModel); // NG2 //.controller(moduleName + '.NG2Example', downgradeComponent({component: NG2Example2Component}) ); diff --git a/catalog-ui/src/app/ng2/app.module.ts b/catalog-ui/src/app/ng2/app.module.ts index 7108be93f9..ecaa26e1ce 100644 --- a/catalog-ui/src/app/ng2/app.module.ts +++ b/catalog-ui/src/app/ng2/app.module.ts @@ -46,6 +46,7 @@ import {UserService} from "./services/user.service"; import {SdcConfig} from "./config/sdc-config.config"; import { TranslateModule } from "./shared/translator/translate.module"; import { TranslationServiceConfig } from "./config/translation.service.config"; +import {DesignerFrameModule} from "./components/ui/designer/designer-frame.module"; export const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule)); @@ -72,7 +73,8 @@ export function configServiceFactory(config:ConfigService) { //We need to import them here since we use them in angular1 ConnectionWizardModule, - PropertiesAssignmentModule + PropertiesAssignmentModule, + DesignerFrameModule ], exports: [], entryComponents: [], 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 f48aa4801f..846b84c69f 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 @@ -24,6 +24,7 @@ import {MenuItemGroup, MenuItem} from "app/utils"; import {UserService} from "../../../services/user.service"; import {SdcConfigToken, ISdcConfig} from "../../../config/sdc-config.config"; import {TranslateService} from "../../../shared/translator/translate.service"; +import {DesignersConfiguration, Designer} from "app/models"; declare const window:any; @@ -62,10 +63,20 @@ export class TopNavComponent { let result = -1; //set result to current state - this.topLvlMenu.menuItems.forEach((item:MenuItem, index:number)=> { + this.topLvlMenu.menuItems.every((item:MenuItem, index:number)=> { if (item.state === this.$state.current.name) { - result = index; + if (this.$state.current.name === 'designers') { + const designerIdx = _.findIndex(DesignersConfiguration.designers, (designer: Designer) => designer.designerStateUrl === this.$state.params.path); + if (designerIdx !== -1) { + result = index + designerIdx; + return false; + } + } else { + result = index; + return false; + } } + return true; }); //if it's a different state , checking previous state param @@ -109,6 +120,10 @@ export class TopNavComponent { tmpArray.push(new MenuItem(hostedApp.navTitle, null, hostedApp.defaultState, "goToState", null, null)); } }); + + _.each(DesignersConfiguration.designers, (designer: Designer) => { + tmpArray.push(new MenuItem(designer.displayName, null, "designers", "goToState", {path: designer.designerStateUrl}, null)); + }) } this.topLvlMenu = new MenuItemGroup(0, tmpArray, true); @@ -124,9 +139,9 @@ export class TopNavComponent { } } - goToState(state:string, params:Array<any>):Promise<boolean> { + goToState(state:string, params:any):Promise<boolean> { return new Promise((resolve, reject) => { - this.$state.go(state, params && params.length > 0 ? [0] : undefined); + this.$state.go(state, params || undefined); resolve(true); }); } diff --git a/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.component.html b/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.component.html new file mode 100644 index 0000000000..752e49e218 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.component.html @@ -0,0 +1,5 @@ +<div class="designer-frame"> + <div class="w-sdc-main-container"> + <iframe class="designer-iframe" [src]="designerUrl | safeUrlSanitizer"></iframe> + </div> +</div> diff --git a/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.component.less b/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.component.less new file mode 100644 index 0000000000..4b9456b5b1 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.component.less @@ -0,0 +1,8 @@ +.designer-frame { + + .designer-iframe { + width: 100%; + height: 100%; + border: none; + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.component.ts b/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.component.ts new file mode 100644 index 0000000000..b66008f022 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.component.ts @@ -0,0 +1,25 @@ +import {Component, OnInit, Input} from "@angular/core"; +import {Designer} from "app/models"; + +@Component({ + selector: 'designer-frame', + templateUrl: './designer-frame.component.html', + styleUrls:['designer-frame.component.less'] +}) + +export class DesignerFrameComponent implements OnInit { + + @Input() designer: Designer; + designerUrl: string; + + constructor() { + } + + ngOnInit(): void { + + this.designerUrl = this.designer.designerProtocol + "://" + + this.designer.designerHost + ":" + + this.designer.designerPort + + this.designer.designerPath; + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.module.ts b/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.module.ts new file mode 100644 index 0000000000..1edf195230 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.module.ts @@ -0,0 +1,25 @@ +import {NgModule} from "@angular/core"; +import { CommonModule } from '@angular/common'; +import {DesignerFrameComponent} from "./designer-frame.component"; +import {LayoutModule} from "../../layout/layout.module"; +import {GlobalPipesModule} from "../../../pipes/global-pipes.module"; + + +@NgModule({ + declarations: [ + DesignerFrameComponent + ], + imports: [ + CommonModule, + LayoutModule, + GlobalPipesModule + ], + entryComponents: [DesignerFrameComponent], + exports: [ + DesignerFrameComponent + ], + providers: [] +}) +export class DesignerFrameModule { + +} diff --git a/catalog-ui/src/app/ng2/pipes/global-pipes.module.ts b/catalog-ui/src/app/ng2/pipes/global-pipes.module.ts index 1d81a1a4bf..e89a816e95 100644 --- a/catalog-ui/src/app/ng2/pipes/global-pipes.module.ts +++ b/catalog-ui/src/app/ng2/pipes/global-pipes.module.ts @@ -3,21 +3,23 @@ import {SearchFilterPipe} from "./searchFilter.pipe"; import {KeysPipe} from "./keys.pipe"; import {GroupByPipe} from "./groupBy.pipe"; import {NgModule} from "@angular/core"; +import {SafeUrlSanitizerPipe} from "./safeUrlSanitizer.pipe"; @NgModule({ declarations: [ ContentAfterLastDotPipe, GroupByPipe, KeysPipe, - SearchFilterPipe - + SearchFilterPipe, + SafeUrlSanitizerPipe ], - + exports: [ ContentAfterLastDotPipe, GroupByPipe, KeysPipe, - SearchFilterPipe + SearchFilterPipe, + SafeUrlSanitizerPipe ] }) diff --git a/catalog-ui/src/app/ng2/pipes/safeUrlSanitizer.pipe.ts b/catalog-ui/src/app/ng2/pipes/safeUrlSanitizer.pipe.ts new file mode 100644 index 0000000000..9d8588030e --- /dev/null +++ b/catalog-ui/src/app/ng2/pipes/safeUrlSanitizer.pipe.ts @@ -0,0 +1,10 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import { DomSanitizer } from '@angular/platform-browser'; + +@Pipe({ name: 'safeUrlSanitizer' }) +export class SafeUrlSanitizerPipe implements PipeTransform { + constructor(private sanitizer: DomSanitizer) {} + transform(url) { + return this.sanitizer.bypassSecurityTrustResourceUrl(url); + } +} diff --git a/catalog-ui/src/app/ng2/services/config.service.ts b/catalog-ui/src/app/ng2/services/config.service.ts index 1c0ee18d33..8675ea7d3d 100644 --- a/catalog-ui/src/app/ng2/services/config.service.ts +++ b/catalog-ui/src/app/ng2/services/config.service.ts @@ -25,7 +25,7 @@ import { Injectable, Inject } from '@angular/core'; import { Http, Response } from '@angular/http'; import 'rxjs/add/operator/toPromise'; -import {IAppConfigurtaion, ValidationConfiguration, Validations} from "app/models"; +import {IAppConfigurtaion, ValidationConfiguration, Validations, Designers, DesignersConfiguration} from "app/models"; import {IApi} from "app/models/app-config"; import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config"; @@ -69,15 +69,18 @@ export class ConfigService { return promise; } - loadDesignersConfiguration(): void { + loadDesignersConfiguration(): Promise<DesignersConfiguration> { let url:string = this.api.no_proxy_root + this.api.GET_designers_configuration; let promise: Promise<any> = this.http.get(url).map((res: Response) => res.json()).toPromise(); - - promise.then((config:any) => { - console.log(config); + promise.then((designersData: Designers) => { + DesignersConfiguration.designers = designersData; }).catch((ex) => { - console.error('Error was:', ex); - }) + console.error("Error loading designers configuration from BE", ex); + + DesignersConfiguration.designers = [] as Designers; + }); + + return promise; } } diff --git a/catalog-ui/src/app/utils/menu-handler.ts b/catalog-ui/src/app/utils/menu-handler.ts index 1a3215bf80..d48412a6ed 100644 --- a/catalog-ui/src/app/utils/menu-handler.ts +++ b/catalog-ui/src/app/utils/menu-handler.ts @@ -7,9 +7,9 @@ * 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. @@ -29,7 +29,7 @@ export class MenuItem { callback:(...args:Array<any>) => ng.IPromise<boolean>; state:string; action:string; - params:Array<any>; + params:any; isDisabled:boolean; disabledRoles:Array<string>; blockedForTypes:Array<string>; // This item will not be shown for specific components types. @@ -42,7 +42,7 @@ export class MenuItem { url:string; // Data added to menu item, in case the function need to use it, example: for function "changeLifecycleState", I need to pass also the state "CHECKOUT" that I want the state to change to. - constructor(text:string, callback:(...args:Array<any>) => ng.IPromise<boolean>, state:string, action:string, params?:Array<any>, blockedForTypes?:Array<string>) { + constructor(text:string, callback:(...args:Array<any>) => ng.IPromise<boolean>, state:string, action:string, params?:any, blockedForTypes?:Array<string>) { this.text = text; this.callback = callback; this.state = state; diff --git a/catalog-ui/src/app/view-models/designers/designers-view-model.ts b/catalog-ui/src/app/view-models/designers/designers-view-model.ts new file mode 100644 index 0000000000..42c1194258 --- /dev/null +++ b/catalog-ui/src/app/view-models/designers/designers-view-model.ts @@ -0,0 +1,42 @@ +import {Designer, IUserProperties, DesignersConfiguration} from "app/models"; +import {CacheService} from "app/services"; +import {MenuItemGroup} from "app/utils"; + + +interface IDesignerViewModelScope extends ng.IScope { + designer: Designer + topNavMenuModel:Array<MenuItemGroup>; + user:IUserProperties; + version:string; +} + +export class DesignersViewModel { + static '$inject' = [ + '$scope', + '$stateParams', + '$sce', + 'Sdc.Services.CacheService' + ]; + + constructor(private $scope:IDesignerViewModelScope, + private $stateParams:any, + private $sce:any, + private cacheService:CacheService) { + + this.initScope(); + } + + private initScope = ():void => { + // get the designer object by using the path parameter + let designerKey: any = _.findKey(DesignersConfiguration.designers, (designerConfig: Designer) =>{ + return designerConfig.designerStateUrl === this.$stateParams.path; + }); + + this.$scope.designer = DesignersConfiguration.designers[designerKey]; + + this.$scope.version = this.cacheService.get('version'); + this.$scope.topNavMenuModel = []; + + this.$scope.user = this.cacheService.get('user'); + } +} diff --git a/catalog-ui/src/app/view-models/designers/designers-view.html b/catalog-ui/src/app/view-models/designers/designers-view.html new file mode 100644 index 0000000000..3ae980589d --- /dev/null +++ b/catalog-ui/src/app/view-models/designers/designers-view.html @@ -0,0 +1,7 @@ +<div class="sdc-catalog-container"> + + <top-nav [menuModel]="topNavMenuModel" [version]="version" [hideSearch]="true"></top-nav> + + <designer-frame [designer]="designer"></designer-frame> + +</div> |