From cb1095edc294cd3e2958978ccc9e36304db418bb Mon Sep 17 00:00:00 2001 From: Idan Amit Date: Mon, 22 Jan 2018 20:55:42 +0200 Subject: Create designer-tab component Created designer-tab component for side-nav of resource context Updated configuration according to new design Change-Id: I3bbd3024318d48aa0c1560440877ecd3efbf8b89 Issue-ID: SDC-939 Signed-off-by: Idan Amit --- .../resources/config/designers-configuration.yaml | 8 +-- catalog-ui/src/app/app.ts | 9 +++ catalog-ui/src/app/models/designers-config.ts | 2 +- catalog-ui/src/app/modules/view-model-module.ts | 2 + catalog-ui/src/app/utils/constants.ts | 9 +-- .../tabs/designers/designers-tab-view-model.ts | 28 ++++++++ .../tabs/designers/designers-tab-view.html | 5 ++ .../workspace/tabs/designers/designers-tab.less | 3 + .../view-models/workspace/workspace-view-model.ts | 79 ++++++++++++++++------ .../app/view-models/workspace/workspace-view.html | 8 +-- .../sdc/fe/config/DesignersConfiguration.java | 17 ++--- .../default/FE-designers-configuration.yaml.erb | 15 ++-- 12 files changed, 136 insertions(+), 49 deletions(-) create mode 100644 catalog-ui/src/app/view-models/workspace/tabs/designers/designers-tab-view-model.ts create mode 100644 catalog-ui/src/app/view-models/workspace/tabs/designers/designers-tab-view.html create mode 100644 catalog-ui/src/app/view-models/workspace/tabs/designers/designers-tab.less diff --git a/catalog-fe/src/main/resources/config/designers-configuration.yaml b/catalog-fe/src/main/resources/config/designers-configuration.yaml index abdf9ea5cd..f62a355589 100644 --- a/catalog-fe/src/main/resources/config/designers-configuration.yaml +++ b/catalog-fe/src/main/resources/config/designers-configuration.yaml @@ -6,9 +6,9 @@ designersList: designerStateUrl: "dcae" designerProtocol: http designerDisplayOptions: - tab: - displayName: "monitor" - validResourceTypes: ["VF", "SERVICE"] + context: + displayName: "Monitor" + displayContext: ["VF", "SERVICE"] top: displayName: "DCAE" - designerId: WORKFLOW @@ -19,4 +19,4 @@ designersList: designerProtocol: http designerDisplayOptions: top: - displayName: "Workflow Designer" \ No newline at end of file + displayName: "WORKFLOW" \ No newline at end of file diff --git a/catalog-ui/src/app/app.ts b/catalog-ui/src/app/app.ts index a3a1ba9230..f3bfbb9c52 100644 --- a/catalog-ui/src/app/app.ts +++ b/catalog-ui/src/app/app.ts @@ -517,6 +517,15 @@ ng1appModule.config([ } ); + $stateProvider.state( + 'workspace.designers', { + url: 'designers/*path', + parent: 'workspace', + templateUrl: './view-models/workspace/tabs/designers/designers-tab-view.html', + controller: viewModelsModuleName + '.DesignersTabViewModel' + } + ); + $stateProvider.state( 'adminDashboard', { url: '/adminDashboard', diff --git a/catalog-ui/src/app/models/designers-config.ts b/catalog-ui/src/app/models/designers-config.ts index c218c89e7a..6b4233fc1b 100644 --- a/catalog-ui/src/app/models/designers-config.ts +++ b/catalog-ui/src/app/models/designers-config.ts @@ -11,7 +11,7 @@ export class Designer { export class DesignerDisplayOptions { displayName: string; - validResourceTypes: Array; + displayContext: Array; } export type Designers = Array; diff --git a/catalog-ui/src/app/modules/view-model-module.ts b/catalog-ui/src/app/modules/view-model-module.ts index 63ca9012d6..321d039d66 100644 --- a/catalog-ui/src/app/modules/view-model-module.ts +++ b/catalog-ui/src/app/modules/view-model-module.ts @@ -74,6 +74,7 @@ import {HierarchyViewModel} from "../view-models/tabs/hierarchy/hierarchy-view-m 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 {DesignersTabViewModel} from "../view-models/workspace/tabs/designers/designers-tab-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'; @@ -137,6 +138,7 @@ viewModelModule .controller(moduleName + '.ReqAndCapabilitiesViewModel', ReqAndCapabilitiesViewModel) .controller(moduleName + '.InputFormViewModel', InputFormViewModel) .controller(moduleName + '.DesignersViewModel', DesignersViewModel) + .controller(moduleName + '.DesignersTabViewModel', DesignersTabViewModel) // // //TABS .controller(moduleName + '.HierarchyViewModel', HierarchyViewModel); diff --git a/catalog-ui/src/app/utils/constants.ts b/catalog-ui/src/app/utils/constants.ts index 3ea652a7dd..c04da62380 100644 --- a/catalog-ui/src/app/utils/constants.ts +++ b/catalog-ui/src/app/utils/constants.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. @@ -198,8 +198,8 @@ export class GraphTransactionLogText { } export class GraphUIObjects { - public static HANDLE_SIZE = 18; - public static NODE_OVERLAP_MIN_SIZE = 30; + public static HANDLE_SIZE = 18; + public static NODE_OVERLAP_MIN_SIZE = 30; public static DEFAULT_RESOURCE_WIDTH = 65; public static SMALL_RESOURCE_WIDTH = 21; public static LINK_MENU_HEIGHT = 420; @@ -239,6 +239,7 @@ export class States { public static WORKSPACE_DISTRIBUTION = 'workspace.distribution'; public static WORKSPACE_PROPERTIES_ASSIGNMENT = 'workspace.properties_assignment'; public static WORKSPACE_REQUIREMENTS_AND_CAPABILITIES = 'workspace.reqAndCap'; + public static WORKSPACE_DESIGNERS = 'workspace.designers'; public static WORKSPACE_NG2 = 'workspace.ng2'; } diff --git a/catalog-ui/src/app/view-models/workspace/tabs/designers/designers-tab-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/designers/designers-tab-view-model.ts new file mode 100644 index 0000000000..03ce83ee18 --- /dev/null +++ b/catalog-ui/src/app/view-models/workspace/tabs/designers/designers-tab-view-model.ts @@ -0,0 +1,28 @@ +import {Designer, DesignersConfiguration} from "app/models"; + + +interface IDesignerTabViewModelScope extends ng.IScope { + designer: Designer; +} + +export class DesignersTabViewModel { + static '$inject' = [ + '$scope', + '$stateParams' + ]; + + constructor(private $scope:IDesignerTabViewModelScope, + private $stateParams:any) { + + 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]; + } +} diff --git a/catalog-ui/src/app/view-models/workspace/tabs/designers/designers-tab-view.html b/catalog-ui/src/app/view-models/workspace/tabs/designers/designers-tab-view.html new file mode 100644 index 0000000000..7abb81a694 --- /dev/null +++ b/catalog-ui/src/app/view-models/workspace/tabs/designers/designers-tab-view.html @@ -0,0 +1,5 @@ +
+ + + +
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/designers/designers-tab.less b/catalog-ui/src/app/view-models/workspace/tabs/designers/designers-tab.less new file mode 100644 index 0000000000..c8626dc031 --- /dev/null +++ b/catalog-ui/src/app/view-models/workspace/tabs/designers/designers-tab.less @@ -0,0 +1,3 @@ +.workspace-designers { + +} 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 226785e06f..3846cf075e 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 @@ -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. @@ -22,7 +22,7 @@ * Created by obarda on 3/30/2016. */ 'use strict'; -import {IUserProperties, IAppMenu, Resource, Component} from "app/models"; +import {IUserProperties, IAppMenu, Resource, Component, Designer, DesignersConfiguration, DesignerDisplayOptions} from "app/models"; import { WorkspaceMode, ComponentFactory, ChangeLifecycleStateHandler, Role, ComponentState, MenuItemGroup, MenuHandler, MenuItem, ModalsHandler, States, EVENTS, CHANGE_COMPONENT_CSAR_VERSION_FLAG, ResourceType @@ -58,6 +58,7 @@ export interface IWorkspaceViewModelScope extends ng.IScope { changeVersion:any; isComposition:boolean; isDeployment:boolean; + isDesigners:boolean; $state:ng.ui.IStateService; user:IUserProperties; thirdParty:boolean; @@ -70,7 +71,7 @@ export interface IWorkspaceViewModelScope extends ng.IScope { showChangeStateButton():boolean; getComponent():Component; setComponent(component:Component):void; - onMenuItemPressed(state:string):ng.IPromise; + onMenuItemPressed(state:string, params:any):ng.IPromise; save():ng.IPromise; setValidState(isValid:boolean):void; revert():void; @@ -88,6 +89,7 @@ export interface IWorkspaceViewModelScope extends ng.IScope { getStatus():string; showLifecycleIcon():boolean; updateSelectedMenuItem(state:string):void; + isSelected(menuItem:MenuItem):boolean; uploadFileChangedInGeneralTab():void; updateMenuComponentName(ComponentName:string):void; getTabTitle():string; @@ -214,14 +216,15 @@ export class WorkspaceViewModel { } }; - this.$scope.onMenuItemPressed = (state:string):ng.IPromise => { + this.$scope.onMenuItemPressed = (state:string, params:any):ng.IPromise => { let deferred = this.$q.defer(); let goToState = ():void => { - this.$scope.updateSelectedMenuItem(state); - this.$state.go(state, { + this.$state.go(state, Object.assign({ id: this.$scope.component.uniqueId, type: this.$scope.component.componentType.toLowerCase(), components: this.components + }, params)).then(() => { + this.$scope.updateSelectedMenuItem(state); }); deferred.resolve(true); }; @@ -616,18 +619,32 @@ export class WorkspaceViewModel { }; this.$scope.updateSelectedMenuItem = (state:string):void => { - let stateArray:Array = state.split('.'); + let stateArray:Array = state.split('.', 2); let stateWithoutInternalNavigate:string = stateArray[0] + '.' + stateArray[1]; let selectedItem:MenuItem = _.find(this.$scope.leftBarTabs.menuItems, (item:MenuItem) => { - return _.startsWith(item.state, stateWithoutInternalNavigate); + let itemStateArray: Array = item.state.split('.', 2); + let itemStateWithoutNavigation:string = itemStateArray[0] + '.' + itemStateArray[1]; + return (itemStateWithoutNavigation === stateWithoutInternalNavigate); }); - this.$scope.leftBarTabs.selectedIndex = selectedItem ? this.$scope.leftBarTabs.menuItems.indexOf(selectedItem) : 0; + + let selectedIndex = selectedItem ? this.$scope.leftBarTabs.menuItems.indexOf(selectedItem) : 0; + + if (stateArray[1] === 'designers') { + selectedIndex += _.findIndex(DesignersConfiguration.designers, (designer: Designer) => designer.designerStateUrl === this.$state.params.path); + } + + this.$scope.leftBarTabs.selectedIndex = selectedIndex; }; + this.$scope.isSelected = (menuItem:MenuItem): boolean => { + return this.$scope.leftBarTabs.selectedIndex === _.indexOf(this.$scope.leftBarTabs.menuItems, menuItem); + } + this.$scope.$watch('$state.current.name', (newVal:string):void => { if (newVal) { this.$scope.isComposition = (newVal.indexOf(States.WORKSPACE_COMPOSITION) > -1); this.$scope.isDeployment = newVal == States.WORKSPACE_DEPLOYMENT; + this.$scope.isDesigners = newVal == States.WORKSPACE_DESIGNERS; } }); @@ -669,9 +686,9 @@ export class WorkspaceViewModel { return new MenuItem(text, null, States.WORKSPACE_GENERAL, 'goToState', [this.$state.params]); }; - private updateMenuItemByRole = (menuItems:Array, role:string) => { - let tempMenuItems:Array = new Array(); - menuItems.forEach((item:MenuItem) => { + private updateMenuItemByRole = (menuItems:Array, role:string) : Array => { + let tempMenuItems:Array = new Array(); + menuItems.forEach((item:any) => { //remove item if role is disabled if (!(item.disabledRoles && item.disabledRoles.indexOf(role) > -1)) { tempMenuItems.push(item); @@ -700,13 +717,37 @@ export class WorkspaceViewModel { let inCreateMode = this.$scope.isCreateMode(); this.$scope.leftBarTabs = new MenuItemGroup(); - this.$scope.leftBarTabs.menuItems = this.updateMenuItemByRole(this.sdcMenu.component_workspace_menu_option[this.$scope.component.getComponentSubType()], this.role); + const menuItemsObjects:Array = this.updateMenuItemByRole(this.sdcMenu.component_workspace_menu_option[this.$scope.component.getComponentSubType()], this.role); + + // Only need to add designers to the menu if the current role is Designer + if (this.role === "DESIGNER") { + _.each(DesignersConfiguration.designers, (designer: Designer) => { + if (designer.designerDisplayOptions["context"]) { + let displayOptions : DesignerDisplayOptions = designer.designerDisplayOptions["context"]; + + if (displayOptions.displayContext.indexOf(this.$scope.component.getComponentSubType()) !== -1) { + menuItemsObjects.push({ + text: displayOptions.displayName, + action: 'onMenuItemPressed', + state: 'workspace.designers', + params: {path: designer.designerStateUrl} + }); + } + } + }); + } - this.$scope.leftBarTabs.menuItems.forEach((item:MenuItem) => { - item.params = [item.state]; - item.callback = this.$scope.onMenuItemPressed; + this.$scope.leftBarTabs.menuItems = menuItemsObjects.map((item:MenuItem) => { + if (item.params) { + item.params.state = item.state; + } + else { + item.params = {state: item.state}; + } + item.callback = () => this.$scope[item.action](item.state, item.params); item.isDisabled = (inCreateMode && States.WORKSPACE_GENERAL != item.state) || (States.WORKSPACE_DEPLOYMENT === item.state && this.$scope.component.groups && this.$scope.component.groups.length === 0 && this.$scope.component.isResource()); + return new MenuItem(item.text, item.callback, item.state, item.action, item.params, item.blockedForTypes); }); if (this.cacheService.get('breadcrumbsComponents')) { @@ -722,16 +763,12 @@ export class WorkspaceViewModel { private disableMenuItems() { this.$scope.leftBarTabs.menuItems.forEach((item:MenuItem) => { - item.params = [item.state]; - item.callback = this.$scope.onMenuItemPressed; item.isDisabled = (States.WORKSPACE_GENERAL != item.state); }); } private enableMenuItems() { this.$scope.leftBarTabs.menuItems.forEach((item:MenuItem) => { - item.params = [item.state]; - item.callback = this.$scope.onMenuItemPressed; item.isDisabled = false; }); } diff --git a/catalog-ui/src/app/view-models/workspace/workspace-view.html b/catalog-ui/src/app/view-models/workspace/workspace-view.html index 0663074dbc..f076ba0ced 100644 --- a/catalog-ui/src/app/view-models/workspace/workspace-view.html +++ b/catalog-ui/src/app/view-models/workspace/workspace-view.html @@ -6,8 +6,8 @@
{{menuComponentTitle}}
-
-
{{menuItem.text}}
+
+
{{menuItem.text}}
@@ -63,14 +63,14 @@ Revert - + Close
-
+
{{getTabTitle()}}
diff --git a/common-app-api/src/main/java/org/openecomp/sdc/fe/config/DesignersConfiguration.java b/common-app-api/src/main/java/org/openecomp/sdc/fe/config/DesignersConfiguration.java index 1b44d727cd..21a89628b5 100644 --- a/common-app-api/src/main/java/org/openecomp/sdc/fe/config/DesignersConfiguration.java +++ b/common-app-api/src/main/java/org/openecomp/sdc/fe/config/DesignersConfiguration.java @@ -93,7 +93,15 @@ public class DesignersConfiguration extends BasicConfiguration { public static class DesignerDisplayOptions { private String displayName; - private List validResourceTypes; + private List displayContext; + + public List getDisplayContext() { + return displayContext; + } + + public void setDisplayContext(List displayContext) { + this.displayContext = displayContext; + } public String getDisplayName() { return displayName; @@ -103,13 +111,6 @@ public class DesignersConfiguration extends BasicConfiguration { this.displayName = displayName; } - public List getValidResourceTypes() { - return validResourceTypes; - } - - public void setValidResourceTypes(List validResourceTypes) { - this.validResourceTypes = validResourceTypes; - } } } diff --git a/sdc-os-chef/sdc-frontend/chef-repo/cookbooks/sdc-catalog-fe/templates/default/FE-designers-configuration.yaml.erb b/sdc-os-chef/sdc-frontend/chef-repo/cookbooks/sdc-catalog-fe/templates/default/FE-designers-configuration.yaml.erb index fd8a81b0db..e5c170e55b 100644 --- a/sdc-os-chef/sdc-frontend/chef-repo/cookbooks/sdc-catalog-fe/templates/default/FE-designers-configuration.yaml.erb +++ b/sdc-os-chef/sdc-frontend/chef-repo/cookbooks/sdc-catalog-fe/templates/default/FE-designers-configuration.yaml.erb @@ -3,14 +3,12 @@ designersList: designerProtocol: <%= @dcae_protocol %> designerHost: <%= @dcae_host %> designerPort: <%= @dcae_port %> - designerPath: "/dace" + designerPath: "/openoui/vnfmarket/#!/marketplace" designerStateUrl: "dcae" designerDisplayOptions: - tab: - displayName: "monitor" - validResourceTypes: ["VF", "SERVICE"] - top: - displayName: "DCAE" + context: + displayName: "Monitor" + displayContext: ["RESOURCE", "SERVICE"] - designerId: WORKFLOW designerProtocol: <%= @workflow_protocol %> designerHost: <%= @workflow_host %> @@ -19,4 +17,7 @@ designersList: designerStateUrl: "workflowDesigner" designerDisplayOptions: top: - displayName: "Workflow Designer" \ No newline at end of file + displayName: "WORKFLOW" + context: + displayName: "Workflow Designer" + displayContext: ["RESOURCE"] \ No newline at end of file -- cgit 1.2.3-korg