From 451a3400b76511393c62a444f588a4ed15f4a549 Mon Sep 17 00:00:00 2001 From: Michael Lando Date: Sun, 19 Feb 2017 10:28:42 +0200 Subject: Initial OpenECOMP SDC commit Change-Id: I0924d5a6ae9cdc161ae17c68d3689a30d10f407b Signed-off-by: Michael Lando --- .../workspace/tabs/activity-log/activity-log.html | 85 ++ .../workspace/tabs/activity-log/activity-log.less | 83 ++ .../workspace/tabs/activity-log/activity-log.ts | 122 +++ .../tabs/attributes/attributes-view-model.ts | 107 +++ .../workspace/tabs/attributes/attributes-view.html | 52 ++ .../workspace/tabs/attributes/attributes.less | 54 ++ .../tabs/composition/composition-view-model.ts | 232 ++++++ .../tabs/composition/composition-view.html | 99 +++ .../workspace/tabs/composition/composition.less | 864 +++++++++++++++++++++ .../tabs/artifacts/artifacts-view-model.ts | 255 ++++++ .../composition/tabs/artifacts/artifacts-view.html | 55 ++ .../tabs/composition/tabs/artifacts/artifacts.less | 172 ++++ .../composition/tabs/details/details-view-model.ts | 132 ++++ .../composition/tabs/details/details-view.html | 129 +++ .../tabs/composition/tabs/details/details.less | 68 ++ .../properties-view-model.ts | 228 ++++++ .../properties-and-attributes/properties-view.html | 81 ++ .../tabs/properties-and-attributes/properties.less | 16 + .../tabs/relations/relations-view-model.ts | 81 ++ .../composition/tabs/relations/relations-view.html | 57 ++ .../tabs/composition/tabs/relations/relations.less | 116 +++ .../composition/tabs/structure/structure-view.html | 13 + .../composition/tabs/structure/structure-view.ts | 34 + .../deployment-artifacts-view-model.ts | 253 ++++++ .../deployment-artifacts-view.html | 149 ++++ .../deployment-artifacts/deployment-artifacts.less | 102 +++ .../tabs/deployment/deployment-view-model.ts | 127 +++ .../workspace/tabs/deployment/deployment-view.html | 10 + .../workspace/tabs/deployment/deployment.less | 33 + .../disribution-status-modal-view-model.ts | 67 ++ .../disribution-status-modal-view.html | 126 +++ .../disribution-status-modal.less | 33 + .../tabs/distribution/distribution-view-model.ts | 135 ++++ .../tabs/distribution/distribution-view.html | 171 ++++ .../workspace/tabs/distribution/distribution.less | 361 +++++++++ .../workspace/tabs/general/general-view-model.ts | 379 +++++++++ .../workspace/tabs/general/general-view.html | 307 ++++++++ .../workspace/tabs/general/general.less | 64 ++ .../workspace/tabs/icons/icons-view-model.ts | 131 ++++ .../workspace/tabs/icons/icons-view.html | 26 + .../view-models/workspace/tabs/icons/icons.less | 65 ++ .../information-artifacts-view-model.ts | 150 ++++ .../information-artifacts-view.html | 57 ++ .../information-artifacts.less | 47 ++ .../view-models/workspace/tabs/inputs/inputs.less | 286 +++++++ .../resource-input/resource-inputs-view-model.ts | 145 ++++ .../resource-input/resource-inputs-view.html | 136 ++++ .../inputs/resource-input/resource-inputs.less | 9 + .../service-input/service-inputs-view-model.ts | 246 ++++++ .../inputs/service-input/service-inputs-view.html | 205 +++++ .../tabs/inputs/service-input/service-inputs.less | 54 ++ .../management-workflow-view-model.ts | 128 +++ .../management-workflow-view.html | 3 + .../network-call-flow-view-model.ts | 80 ++ .../network-call-flow/network-call-flow-view.html | 3 + .../product-hierarchy-view-model.ts | 134 ++++ .../product-hierarchy/product-hierarchy-view.html | 40 + .../tabs/product-hierarchy/product-hierarchy.less | 130 ++++ .../tabs/properties/properties-view-model.ts | 114 +++ .../workspace/tabs/properties/properties-view.html | 62 ++ .../workspace/tabs/properties/properties.less | 115 +++ .../req-and-capabilities-view-model.ts | 165 ++++ .../req-and-capabilities-view.html | 144 ++++ .../req-and-capabilities/req-and-capabilities.less | 196 +++++ .../tosca-artifacts/tosca-artifacts-view-model.ts | 87 +++ .../tabs/tosca-artifacts/tosca-artifacts-view.html | 45 ++ .../tabs/tosca-artifacts/tosca-artifacts.less | 74 ++ 67 files changed, 8529 insertions(+) create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/activity-log/activity-log.html create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/activity-log/activity-log.less create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/activity-log/activity-log.ts create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/attributes/attributes-view-model.ts create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/attributes/attributes-view.html create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/attributes/attributes.less create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/composition/composition-view-model.ts create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/composition/composition-view.html create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/composition/composition.less create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/artifacts/artifacts.less create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/details/details-view.html create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/details/details.less create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view-model.ts create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view.html create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties.less create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/relations/relations-view-model.ts create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/relations/relations-view.html create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/relations/relations.less create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/structure/structure-view.html create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/structure/structure-view.ts create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model.ts create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view.html create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/deployment/deployment-view-model.ts create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/deployment/deployment-view.html create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/deployment/deployment.less create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view-model.ts create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view.html create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal.less create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/distribution/distribution-view-model.ts create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/distribution/distribution-view.html create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/distribution/distribution.less create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/general/general-view-model.ts create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/general/general-view.html create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/general/general.less create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/icons/icons-view-model.ts create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/icons/icons-view.html create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/icons/icons.less create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/information-artifacts/information-artifacts-view-model.ts create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/information-artifacts/information-artifacts-view.html create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/information-artifacts/information-artifacts.less create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/inputs/inputs.less create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view-model.ts create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view.html create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/inputs/resource-input/resource-inputs.less create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/inputs/service-input/service-inputs-view-model.ts create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/inputs/service-input/service-inputs-view.html create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/inputs/service-input/service-inputs.less create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/management-workflow/management-workflow-view-model.ts create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/management-workflow/management-workflow-view.html create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/network-call-flow/network-call-flow-view-model.ts create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/network-call-flow/network-call-flow-view.html create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view-model.ts create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view.html create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/product-hierarchy/product-hierarchy.less create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/properties/properties-view-model.ts create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/properties/properties-view.html create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/properties/properties.less create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view-model.ts create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view.html create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities.less create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view-model.ts create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view.html create mode 100644 catalog-ui/app/scripts/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less (limited to 'catalog-ui/app/scripts/view-models/workspace/tabs') diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/activity-log/activity-log.html b/catalog-ui/app/scripts/view-models/workspace/tabs/activity-log/activity-log.html new file mode 100644 index 0000000000..23c08f6ec6 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/activity-log/activity-log.html @@ -0,0 +1,85 @@ +
+ +
+
+ + +
+
+ +
+
+ + +
+
{{header.title}} + +
+
+ + +
+ + + +
+ There are no logs to display +
+ + +
+ + +
+ {{item.dateFormat}} +
+ + +
+ {{item.ACTION}} +
+ + +
+ {{item.COMMENT}} +
+ + +
+ {{item.MODIFIER}} +
+ + +
+ {{item.STATUS}} + +
+ +
+ + +
+
+
+ +
+ + + + diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/activity-log/activity-log.less b/catalog-ui/app/scripts/view-models/workspace/tabs/activity-log/activity-log.less new file mode 100644 index 0000000000..61bb3e9f01 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/activity-log/activity-log.less @@ -0,0 +1,83 @@ +.activity-log { + + margin-top: 30px; + + .title-wrapper { + display: flex; + justify-content: flex-end; + } + + .table-container-flex .table .body .scrollbar-container { + max-height: 448px; + } + + .view-mode { + background-color: @main_color_p; + } + + .table{ + height: 490px; + margin-bottom: 0; + } + + .table-container-flex { + margin-top: 10px; + + .flex-item:nth-child(1) { width: 200px; } + .flex-item:nth-child(2) { flex-grow: 20; } + .flex-item:nth-child(3) { flex-grow: 30; } + .flex-item:nth-child(4) { flex-grow: 20; } + .flex-item:nth-child(5) { width: 80px; } + + .success { + position: absolute; + top: 11px; + right: 20px; + .sprite-new; + .sdc-success; + } + + .error { + position: absolute; + top: 11px; + right: 20px; + .sprite-new; + .sdc-error; + } + + } + + .data-row { + position: relative; + } + + .top-search { + float: right; + position: relative; + + input.search-text { + .border-radius(2px); + width: 245px; + height: 32px; + line-height: 32px; + border: 1px solid @main_color_o; + margin: 0; + outline: none; + text-indent: 10px; + + &::-webkit-input-placeholder { font-style: italic; } /* Safari, Chrome and Opera */ + &:-moz-placeholder { font-style: italic; } /* Firefox 18- */ + &::-moz-placeholder { font-style: italic; } /* Firefox 19+ */ + &:-ms-input-placeholder { font-style: italic; } /* IE 10+ */ + &:-ms-input-placeholder { font-style: italic; } /* Edge */ + } + + .magnification { + position: absolute; + top: 10px; + right: 10px; + } + + } + +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/activity-log/activity-log.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/activity-log/activity-log.ts new file mode 100644 index 0000000000..665d0c0ef6 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/activity-log/activity-log.ts @@ -0,0 +1,122 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +/// +module Sdc.ViewModels { + 'use strict'; + + export interface IActivityLogViewModelScope extends IWorkspaceViewModelScope { + activityDateArray: Array; //this is in order to sort the dates + activityLog: Array; + preVersion:string; + + tableHeadersList: Array; + reverse: boolean; + sortBy:string; + searchBind:string; + + getActivityLog(uniqueId:string):void; + onVersionChanged(version:any) : void; + parseAction(action:string):string; + sort(sortBy:string): void; + } + + export class ActivityLogViewModel { + + static '$inject' = [ + '$scope', + '$state', + 'Sdc.Services.ActivityLogService' + ]; + + constructor(private $scope:IActivityLogViewModelScope, + private $state:ng.ui.IStateService, + private activityLogService:Services.ActivityLogService + ) { + + this.initScope(); + this.$scope.setValidState(true); + this.initSortedTableScope(); + this.$scope.updateSelectedMenuItem(); + + // Set default sorting + this.$scope.sortBy = 'logDate'; + } + + private initScope():void { + + this.$scope.preVersion = this.$scope.component.version; + + this.$scope.onVersionChanged = (version:any):void => { + if (version.versionNumber != this.$scope.component.version) { + this.$scope.isLoading = true; + this.$scope.getActivityLog(version.versionId); + } + }; + + this.$scope.getActivityLog = (uniqueId:any):void => { + + let onError = (response) => { + this.$scope.isLoading = false; + console.info('onFaild', response); + + }; + + let onSuccess = (response:Array) => { + this.$scope.activityLog = _.sortBy(response, function(o) { return o.TIMESTAMP; }); //response; // + this.$scope.isLoading = false; + }; + + this.$scope.isLoading = true; + if (this.$scope.component.isResource()) { + this.activityLogService.getActivityLogService('resources', uniqueId).then(onSuccess, onError); + } + if (this.$scope.component.isService()) { + this.activityLogService.getActivityLogService('services', uniqueId).then(onSuccess, onError); + } + + }; + + if (!this.$scope.activityLog || this.$scope.preVersion != this.$scope.component.version) { + this.$scope.getActivityLog(this.$scope.component.uniqueId); + } + + this.$scope.parseAction = (action:string) => { + return action ? action.split(/(?=[A-Z])/).join(' ') : ''; + }; + + } + + private initSortedTableScope = ():void => { + this.$scope.tableHeadersList = [ + {title: 'Date', property: 'logDate'}, + {title: 'Action', property: 'logAction'}, + {title: 'Comment', property: 'logComment'}, + {title: 'Username', property: 'logUsername'}, + {title: 'Status', property: 'logStatus'} + ]; + + this.$scope.sort = (sortBy:string):void => { + this.$scope.reverse = (this.$scope.sortBy === sortBy) ? !this.$scope.reverse : false; + this.$scope.sortBy = sortBy; + }; + }; + + } +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/attributes/attributes-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/attributes/attributes-view-model.ts new file mode 100644 index 0000000000..469da6a2e1 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/attributes/attributes-view-model.ts @@ -0,0 +1,107 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +/// +module Sdc.ViewModels { + 'use strict'; + + interface IAttributesViewModelScope extends IWorkspaceViewModelScope { + tableHeadersList: Array; + reverse: boolean; + sortBy:string; + + addOrUpdateAttribute(attribute?:Models.AttributeModel): void; + delete(attribute:Models.AttributeModel): void; + sort(sortBy:string): void; + } + + export class AttributesViewModel { + + static '$inject' = [ + '$scope', + '$filter', + '$modal', + '$templateCache', + 'ModalsHandler' + ]; + + + constructor(private $scope:IAttributesViewModelScope, + private $filter:ng.IFilterService, + private $modal:ng.ui.bootstrap.IModalService, + private $templateCache:ng.ITemplateCacheService, + private ModalsHandler:Utils.ModalsHandler) { + this.initScope(); + this.$scope.updateSelectedMenuItem(); + } + + + private openEditAttributeModal = (attribute:Models.AttributeModel):void => { + let viewModelsHtmlBasePath:string = '/app/scripts/view-models/'; + + let modalOptions:ng.ui.bootstrap.IModalSettings = { + template: this.$templateCache.get(viewModelsHtmlBasePath + 'forms/attribute-form/attribute-form-view.html'), + controller: 'Sdc.ViewModels.AttributeFormViewModel', + size: 'sdc-md', + backdrop: 'static', + keyboard: false, + resolve: { + attribute: ():Models.AttributeModel => { + return attribute; + }, + component: ():Models.Components.Component => { + return this.$scope.component; + } + } + }; + this.$modal.open(modalOptions); + }; + + private initScope = ():void => { + + //let self = this; + this.$scope.sortBy = 'name'; + this.$scope.reverse = false; + this.$scope.setValidState(true); + this.$scope.tableHeadersList = [ + {title: 'Name', property: 'name'}, + {title: 'Type', property: 'type'}, + {title: 'Default Value', property: 'defaultValue'} + ]; + this.$scope.sort = (sortBy:string):void => { + this.$scope.reverse = (this.$scope.sortBy === sortBy) ? !this.$scope.reverse : false; + this.$scope.sortBy = sortBy; + }; + + this.$scope.addOrUpdateAttribute = (attribute?:Models.AttributeModel):void => { + this.openEditAttributeModal(attribute ? attribute : new Models.AttributeModel()); + }; + + this.$scope.delete = (attribute:Models.AttributeModel):void => { + + let onOk = ():void => { + this.$scope.component.deleteAttribute(attribute.uniqueId); + }; + let title:string = this.$filter('translate')("ATTRIBUTE_VIEW_DELETE_MODAL_TITLE"); + let message:string = this.$filter('translate')("ATTRIBUTE_VIEW_DELETE_MODAL_TEXT", "{'name': '" + attribute.name + "'}"); + this.ModalsHandler.openConfirmationModal(title, message, false).then(onOk); + }; + } + } +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/attributes/attributes-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/attributes/attributes-view.html new file mode 100644 index 0000000000..59ba933a0a --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/attributes/attributes-view.html @@ -0,0 +1,52 @@ +
+
Add
+
+
+
+
{{header.title}} + +
+
+ +
+ +
+ +
+ There are no attributes to display
+ click here to add one + +
+
+ +
+ + {{attribute.name}} + +
+ +
+ +
+ +
+ +
+ + +
+
+
+
+ +
+ +
+
+ +
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/attributes/attributes.less b/catalog-ui/app/scripts/view-models/workspace/tabs/attributes/attributes.less new file mode 100644 index 0000000000..ffd28afce4 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/attributes/attributes.less @@ -0,0 +1,54 @@ +.workspace-attributes { + + width: 93%; + display: inline-block; + .w-sdc-classic-btn { + float: right; + margin-bottom: 10px; + } + + .table{ + height:490px; + margin-bottom: 0; + } + + .table-container-flex { + margin-top: 27px; + + .text{ + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + } + + .flex-item:nth-child(1) { + flex-grow: 15; + + .hand; + span.table-arrow { + margin-right: 7px; + } + } + + .flex-item:nth-child(2) { + flex-grow: 6; + } + + .flex-item:nth-child(3) { + flex-grow: 9; + } + + .flex-item:nth-child(4) { + flex-grow: 3; + padding-top: 10px; + } + + .flex-item:nth-child(5) { + flex-grow: 1; + + } + + } + +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/composition-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/composition-view-model.ts new file mode 100644 index 0000000000..f8eeaf7f64 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/composition-view-model.ts @@ -0,0 +1,232 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/// +module Sdc.ViewModels { + 'use strict'; + + export interface ICompositionViewModelScope extends IWorkspaceViewModelScope { + + currentComponent: Models.Components.Component; + selectedComponent: Models.Components.Component; + isLoading: boolean; + graphApi:any; + sharingService:Sdc.Services.SharingService; + sdcMenu:Models.IAppMenu; + version:string; + isViewOnly:boolean; + isLoadingRightPanel:boolean; + setComponent(component: Models.Components.Component); + isComponentInstanceSelected():boolean; + updateSelectedComponent(): void + openUpdateModal(); + deleteSelectedComponentInstance():void; + onBackgroundClick():void; + setSelectedInstance(componentInstance: Models.ComponentsInstances.ComponentInstance): void; + printScreen():void; + + cacheComponentsInstancesFullData: Models.Components.Component; + } + + export class CompositionViewModel { + + static '$inject' = [ + '$scope', + '$log', + 'sdcMenu', + 'MenuHandler', + '$modal', + '$templateCache', + '$state', + 'Sdc.Services.SharingService', + '$filter', + 'Sdc.Services.CacheService', + 'ComponentFactory', + 'ChangeLifecycleStateHandler', + 'LeftPaletteLoaderService', + 'ModalsHandler', + 'EventListenerService' + ]; + + constructor(private $scope:ICompositionViewModelScope, + private $log: ng.ILogService, + private sdcMenu:Models.IAppMenu, + private MenuHandler: Utils.MenuHandler, + private $modal:ng.ui.bootstrap.IModalService, + private $templateCache:ng.ITemplateCacheService, + private $state:ng.ui.IStateService, + private sharingService:Services.SharingService, + private $filter:ng.IFilterService, + private cacheService:Services.CacheService, + private ComponentFactory: Utils.ComponentFactory, + private ChangeLifecycleStateHandler: Sdc.Utils.ChangeLifecycleStateHandler, + private LeftPaletteLoaderService: Services.Components.LeftPaletteLoaderService, + private ModalsHandler: Sdc.Utils.ModalsHandler, + private eventListenerService:Services.EventListenerService) { + + this.$scope.setValidState(true); + this.initScope(); + this.$scope.updateSelectedMenuItem(); + this.registerGraphEvents(this.$scope); + } + private cacheComponentsInstancesFullData: Array; + + private initComponent = ():void => { + + this.$scope.currentComponent = this.$scope.component; + this.$scope.selectedComponent = this.$scope.currentComponent; + this.updateUuidMap(); + this.$scope.isViewOnly = this.$scope.isViewMode(); + }; + private registerGraphEvents = (scope:ICompositionViewModelScope):void => { + + this.eventListenerService.registerObserverCallback(Utils.Constants.GRAPH_EVENTS.ON_NODE_SELECTED, scope.setSelectedInstance); + this.eventListenerService.registerObserverCallback(Utils.Constants.GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED, scope.onBackgroundClick); + + } + private openUpdateComponentInstanceNameModal = ():void => { + + let viewModelsHtmlBasePath:string = '/app/scripts/view-models/'; + let modalOptions:ng.ui.bootstrap.IModalSettings = { + template: this.$templateCache.get(viewModelsHtmlBasePath + 'forms/resource-instance-name-form/resource-instance-name-view.html'), + controller: 'Sdc.ViewModels.ResourceInstanceNameViewModel', + size: 'sdc-sm', + backdrop: 'static', + resolve: { + component: ():Models.Components.Component => { + return this.$scope.currentComponent; + + } + } + }; + + let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$modal.open(modalOptions); + modalInstance.result.then(():void => { + this.eventListenerService.notifyObservers(Utils.Constants.GRAPH_EVENTS.ON_COMPONENT_INSTANCE_NAME_CHANGED, this.$scope.currentComponent.selectedInstance); + //this.$scope.graphApi.updateNodeName(this.$scope.currentComponent.selectedInstance); + }); + }; + + private removeSelectedComponentInstance = ():void => { + this.eventListenerService.notifyObservers(Utils.Constants.GRAPH_EVENTS.ON_DELETE_MULTIPLE_COMPONENTS); + }; + + private updateUuidMap = ():void => { + /** + * In case user press F5, the page is refreshed and this.sharingService.currentEntity will be undefined, + * but after loadService or loadResource this.sharingService.currentEntity will be defined. + * Need to update the uuidMap with the new resource or service. + */ + this.sharingService.addUuidValue(this.$scope.currentComponent.uniqueId,this.$scope.currentComponent.uuid); + }; + + private initScope = ():void => { + + this.$scope.sharingService = this.sharingService; + this.$scope.sdcMenu = this.sdcMenu; + this.$scope.isLoading = false; + this.$scope.isLoadingRightPanel = false; + this.$scope.graphApi = {}; + this.$scope.version = this.cacheService.get('version'); + this.initComponent(); + + this.cacheComponentsInstancesFullData = new Array(); + + this.$scope.isComponentInstanceSelected = ():boolean => { + return this.$scope.currentComponent && this.$scope.currentComponent.selectedInstance != undefined && this.$scope.currentComponent.selectedInstance != null; + }; + + this.$scope.updateSelectedComponent = (): void => { + if(this.$scope.currentComponent.selectedInstance){ + + let componentParent = _.find(this.cacheComponentsInstancesFullData, (component) => { + return component.uniqueId === this.$scope.currentComponent.selectedInstance.componentUid; + }); + if(componentParent) { + this.$scope.selectedComponent = componentParent; + } + else { + try { + let onSuccess = (component:Models.Components.Component) => { + this.$scope.isLoadingRightPanel = false; + this.$scope.selectedComponent = component; + this.cacheComponentsInstancesFullData.push(component); + }; + let onError = (component:Models.Components.Component) => { + console.log("Error updating selected component"); + this.$scope.isLoadingRightPanel = false; + }; + this.ComponentFactory.getComponentFromServer(this.$scope.currentComponent.selectedInstance.originType, this.$scope.currentComponent.selectedInstance.componentUid).then(onSuccess, onError); + } catch(e){ + console.log("Error updating selected component", e); + this.$scope.isLoadingRightPanel = false; + } + } + } + else { + this.$scope.selectedComponent = this.$scope.currentComponent; + } + }; + + this.$scope.setSelectedInstance = (selectedComponent:Models.ComponentsInstances.ComponentInstance):void => { + + this.$log.debug('composition-view-model::onNodeSelected:: with id: '+ selectedComponent.uniqueId); + this.$scope.currentComponent.setSelectedInstance(selectedComponent); + this.$scope.updateSelectedComponent(); + + if (this.$state.current.name === 'workspace.composition.api') { + this.$state.go('workspace.composition.details'); + } + if (this.$state.current.name === 'workspace.composition.relations' && this.$scope.currentComponent.isProduct()) { + this.$state.go('workspace.composition.details'); + } + }; + + this.$scope.onBackgroundClick = ():void => { + this.$scope.currentComponent.selectedInstance = null; + this.$scope.selectedComponent = this.$scope.currentComponent; + + if (this.$state.current.name === 'workspace.composition.api') { + this.$state.go('workspace.composition.details'); + } + }; + + this.$scope.openUpdateModal = ():void => { + this.openUpdateComponentInstanceNameModal(); + }; + + this.$scope.deleteSelectedComponentInstance = ():void => { + let state = "deleteInstance"; + let onOk = ():void => { + this.removeSelectedComponentInstance(); + //this.$scope.graphApi.deleteSelectedNodes(); + }; + let title:string = this.$scope.sdcMenu.alertMessages[state].title; + let message:string = this.$scope.sdcMenu.alertMessages[state].message.format([this.$scope.currentComponent.selectedInstance.name]); + this.ModalsHandler.openAlertModal(title, message).then(onOk); + }; + + this.$scope.setComponent = (component: Models.Components.Product):void => { + this.$scope.currentComponent = component; + } + + } + } +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/composition-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/composition-view.html new file mode 100644 index 0000000000..4efc74c31b --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/composition-view.html @@ -0,0 +1,99 @@ +
+ +
+ + + + + + + + +
+ +
+
+
+ +
+ +
+
+
+
+
+
+ + +
+ +
+
+ +
+ + + + + + + + +
+ +
+ + + +
+
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/composition.less b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/composition.less new file mode 100644 index 0000000000..4c4c0a87a5 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/composition.less @@ -0,0 +1,864 @@ + +.composition{ + .sdc-workspace-container{ + .w-sdc-main-container{ + .w-sdc-main-right-container{ + left:0; + .sdc-workspace-top-bar { + padding-left: 295px; + .not-latest{ + left: 270px; + } + } + .w-sdc-main-container-body-content{ + padding: 0 0 0 247px; + } + + > div:first-child{ + padding: 0; + } + } + } + } +} + +.workspace-composition { + height:100%; + display: block; + text-align: left; + align-items: left; + padding: 0; + + + + // --------------------------------------------------------------------------------------------------- + // Sidebar + // --------------------------------------------------------------------------------------------------- + + + + .w-sdc-designer-sidebar-toggle { + background-color: @main_color_p; + border-left: 1px solid @main_color_o; + border-bottom: 1px solid @main_color_o; + height: 21px; + position: absolute; + right: 0; + top: 53px; + width: 17px; + transition: right 0.2s; + z-index: 10; + .box-shadow(-1px 1px 3px 0 @main_color_n); + + &.active { + right: 302px; + .w-sdc-designer-sidebar-toggle-icon{ + transform: rotate(180deg); + } + } + + } + + .w-sdc-designer-sidebar-toggle-icon { + margin-left: 6px; + margin-top: 6px; + } + + .w-sdc-designer-sidebar { + background-color:@main_color_p ; + .noselect; + bottom: 0; + position: fixed; + right: -302px; + width: 302px; + top: 102px; + transition: right 0.2s; + z-index: 9; + .box-shadow(-7px -3px 6px -8px @main_color_n); + + } + + .w-sdc-designer-sidebar-toggle.active + .w-sdc-designer-sidebar { + right: 0; + + } + + .w-sdc-designer-sidebar-head { + padding: 36px 30px 30px 30px; + height: 120px; + } + + .w-sdc-designer-sidebar-logo-ph { + display: inline-block; + vertical-align: middle; + line-height: 48px; + height: 48px; + } + + .w-sdc-designer-sidebar-logo { + .g_6; + display: inline-block; + margin-left: 10px; + font-weight: 500; + } + + .w-sdc-designer-sidebar-logo-title { + .s_16_r; + .selectable; + vertical-align: middle; + text-overflow: ellipsis; + max-width: 167px; + display: inline-block; + white-space: nowrap; + overflow: hidden; + } + + .w-sdc-designer-update-resource-icon { + .hand; + position: absolute; + right: 20px; + top: 10px; + } + + .w-sdc-designer-delete-resource-icon { + .hand; + position: absolute; + right: 40px; + top: 10px; + } + + .w-sdc-designer-sidebar-tabs { + .bg_e; + } + + .w-sdc-designer-sidebar-tabs::after { + clear: both; + content: ''; + display: table; + } + + .i-sdc-designer-sidebar-tab { + background-color: @main_color_p; + border: 1px solid @tlv_color_u;; + border-left: none; + display: inline-block; + float: left; + height: 36px; + padding-top: 9px; + text-align: center; + width: 50px; + .hand; + + &:focus { + outline: none; + } + &.tab-disabled { + /* .disabled; */ + } + &.active, &:hover:enabled { + background-color: @tlv_color_u; + .i-sdc-designer-sidebar-tab-icon { + opacity: 1; + + + } + + } + + div& { + padding-top: 0; + } + /*for tooltip on disabled buttons*/ + } + + .i-sdc-designer-sidebar-tab-icon { + margin-top: 5px ; + // opacity: .4; + } + + .w-sdc-designer-sidebar-tab-content { + .perfect-scrollbar; + height: 100%; + } + + .w-sdc-designer-sidebar-tab-content-view { + position: absolute; + top: 156px; + bottom: 0px; + width: 100%; + + } + + .w-sdc-designer-sidebar-section { + } + + .w-sdc-designer-sidebar-section-title { + .m_14_m; + background-color: @tlv_color_u; + .hand; + clear: both; + height: 32px; + line-height: 32px; + margin-top: 1px; + padding: 0 40px 0 20px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + position: relative; + width: 100%; + display: block; + + &.expanded { + .w-sdc-designer-sidebar-section-title-icon { + transform: rotate(180deg); + } + } + } + + .w-sdc-designer-sidebar-section-title-text { + max-width: 240px; + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + position: relative; + } + + .w-sdc-designer-sidebar-section-title-icon { + .hand; + .sprite-new; + .arrow-up; + right: 16px; + top: 10px; + transition: .3s all; + position: absolute; + } + + .w-sdc-designer-sidebar-section-content { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .w-sdc-designer-sidebar-section-title + .w-sdc-designer-sidebar-section-content { + margin: 0 auto; + } + + .w-sdc-designer-sidebar-section-title.expanded + .w-sdc-designer-sidebar-section-content { + margin: 0 auto 1px; + + } + + .i-sdc-designer-sidebar-section-content-item { + .b_7; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + //max-width: 250px; + + &.description { + margin-top: 28px; + white-space: normal; + word-wrap: break-word; + } + } + + .i-sdc-designer-sidebar-section-content-item-tag { + .g_7; + .bg_c; + border-radius: 4px; + display: inline-block; + line-height: 25px; + margin: 0 4px 6px 0; + min-width: 50px; + padding: 0 9px; + text-align: center; + max-width: 280px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .w-sdc-designer-sidebar-section-footer { + margin-top: 10px; + text-align: center; + width: 100%; + } + + + + .w-sdc-designer-sidebar-section-footer-action { + width: 180px; + margin-top: 10px; + } + + //////////////////////Relationship + .w-sdc-designer-sidebar-section-requirements { + border-bottom: 1px solid @color_e; + margin: 0 13px 20px 13px; + padding: 15px 0 0; + } + + .w-sdc-designer-sidebar-section-requirements-item { + margin-bottom: 20px; + } + + .w-sdc-designer-sidebar-section-requirements-label { + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: middle; + white-space: nowrap; + width: 102px; + } + + .w-sdc-designer-sidebar-section-requirements-select { + border: 1px solid @color_e; + min-height: 30px; + padding: 4px 13px; + width: 168px; + } + + //////////////////////Properties + .i-sdc-designer-sidebar-section-content-item-property-and-attribute { + .b_7; + border-bottom: 1px solid @color_e; + min-height: 72px; + padding: 15px 10px 10px 18px; + position: relative; + + &:first-child { + //margin-top: -18px; + } + + &:hover { + // .bg_c_hover; + .bg_c; + transition: all .3s; + + .i-sdc-designer-sidebar-section-content-item-button { + display: block; + } + } + } + + .i-sdc-designer-sidebar-section-content-item-property-and-attribute-label { + overflow: hidden; + text-overflow: ellipsis; + max-width: 200px; + white-space: nowrap; + display: inline-block; + &:hover { + .a_7; + } + } + + .i-sdc-designer-sidebar-section-content-item-property-value { + overflow: hidden; + text-overflow: ellipsis; + max-width: 200px; + display: inline-block; + white-space: nowrap; + + } + + .i-sdc-designer-sidebar-section-content-item-property-label-value { + } + + .i-sdc-designer-sidebar-section-content-item-button { + display: none; + position: absolute; + top: 25px; + + &.update { + background-color: transparent; + border: 0; + right: 60px; + } + + &.delete { + background-color: transparent; + border: 0; + right: 13px; + } + + &.download { + background-color: transparent; + border: 0; + right: 35px; + } + + &.download-env { + background-color: transparent; + border: 0; + right: 35px; + margin-top: 65px; + } + + &.attach { + background-color: transparent; + border: 0; + right: 15px; + } + } + + // --------------------------------------------------------------------------------------------------- + // Canvas + // --------------------------------------------------------------------------------------------------- + .w-sdc-designer-canvas { + height:100%; + .noselect; + .bg_c; + bottom: 0; + // position: fixed; + //right: 0; + //left: 240px; + //top: 94px; + .view-mode{ + background-color: #f8f8f8; + border:0; + } + } + + .w-sdc-designer-canvas.sidebaractive { + //right: 300px; + } + + .w-sdc-designer-element { + .hand; + width: 200px; + height: 100px; + position: absolute; + text-align: center; + top: 50%; + margin-top: -200px; + left: 50%; + margin-left: -50px; + } + + .w-sdc-designer-resource-label { + .q_7; + } + + .w-sdc-designer-resource-label-indicator { + .bg_q; + border-radius: 50%; + display: inline-block; + height: 10px; + margin-right: 6px; + vertical-align: middle; + width: 10px; + + &.valid { + .bg_l; + } + + &.invalid { + .bg_h; + } + } + + // --------------------------------------------------------------------------------------------------- + // Leftbar + // --------------------------------------------------------------------------------------------------- + .w-sdc-designer-leftbar { + background-color: @main_color_p; + bottom: 0; + left: 0; + overflow-y: scroll; + overflow-x: hidden; + position: absolute; + top: 0; + width: 244px; + .box-shadow(7px -3px 6px -8px @main_color_n); + + } + + .w-sdc-designer-leftbar-title { + + .p_16_m; + background-color: @main_color_n; + line-height: 40px; + padding: 0 17px; + } + + .w-sdc-designer-leftbar-title-count { + float: right; + } + + .w-scd-diagram-container { + // left: 240px; + //right: 300px; + } + + .w-sdc-designer-leftbar-search { + background-color: @tlv_color_u; + padding: 10px; + white-space: nowrap; + position: relative; + } + + .w-sdc-designer-leftbar-search-input { + border: 1px solid @color_e; + .border-radius(4px); + height: 30px; + margin: 0; + padding: 0px 28px 3px 10px; + vertical-align: 4px; + width: 100%; + outline: none; + font-style: italic; + } + + .w-sdc-designer-leftbar-search-filter { + + } + + .i-sdc-designer-leftbar-section { + .hand; + } + + .i-sdc-designer-leftbar-section-title { + .m_14_m; + background-color: @tlv_color_u; + .hand; + clear: both; + height: 40px; + line-height: 40px; + margin-top: 1px; + padding: 0 10px; + position: relative; + text-transform: uppercase; + font-weight: bold; + } + + .i-sdc-designer-leftbar-section-title-icon { + .hand; + .sprite-new; + .arrow-up; + width: 15px; + height: 9px; + position: absolute; + right: 13px; + top: 18px; + transition: .3s all; + } + + .i-sdc-designer-leftbar-section.expanded .i-sdc-designer-leftbar-section-title-icon { + transform: rotate(180deg); + margin-right: 2px; + } + + .i-sdc-designer-leftbar-section-content { + background-color: @main_color_o; + } + + .i-sdc-designer-leftbar-section-content-item { + background-color: @main_color_p; + overflow: hidden; + + &:hover { + background-color: @main_color_p; + } + + .cp{ + margin: 6px; + } + + .vl{ + margin: 6px; + } + } + + .i-sdc-designer-leftbar-section-content-subcat { + .m_14_m; + background-color: @tlv_color_t; + line-height: 35px; + padding: 0 10px; + cursor: default; + + + &:hover { + background-color: @func_color_r; + } + + + } + + .i-sdc-designer-leftbar-section .i-sdc-designer-leftbar-section-content .i-sdc-designer-leftbar-section-content-item { + max-height: 0px; + margin: 0 auto; + transition: all .3s; + } + + .i-sdc-designer-leftbar-section.expanded .i-sdc-designer-leftbar-section-content .i-sdc-designer-leftbar-section-content-item { + max-height: 64px; + margin: 0 auto 1px auto; + // padding: 4px 13px; + } + + .i-sdc-designer-leftbar-section.expanded .i-sdc-designer-leftbar-section-content .i-sdc-designer-leftbar-section-content-subcat { + margin: 0; + } + + .i-sdc-designer-leftbar-section-content-item-icon-ph { + display: inline-block; + margin: 12px 0 12px 10px; + pointer-events: auto; + + .non-certified { + position: relative; + left: 27px; + bottom: 6px; + .sprite; + .s-sdc-state-non-certified; + display: block; + + &.smaller-icon { + bottom: 6px; + left: 13px; + } + } + + + + } + + .non-certified { + position: relative; + left: 43px; + bottom: 3px; + .sprite; + .s-sdc-state-non-certified; + display: block; + + &.smaller-icon { + left: 35px; + bottom: -14px; + } + } + /* + .i-sdc-composition-leftbar-section-content-item-icon { + background-image: url('../../../styles/images/resource-icons/default.png'); + // position: absolute; + right: 20px; + top: 10px; + height: 40px; + width: 40px; + background-size: 40px; + } + */ + + .i-sdc-designer-leftbar-section-content-item-info { + display: inline-block; + // margin-left: 10px; + //overflow: hidden; + // vertical-align: middle; + width: 160px; + padding: 0 0 0 10px; + } + + .i-sdc-designer-leftbar-section-content-item-info-title { + .m_14_m; + line-height: 14px; + overflow: hidden; + text-overflow: ellipsis; + text-transform: uppercase; + max-width: 120px; + display: inline-block; + white-space: nowrap; + vertical-align: bottom; + } + + .i-sdc-designer-leftbar-section-content-item-info-text { + .p_3; + line-height: 15px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + //margin: -1px 0 2px 0; + } + + .i-sdc-designer-leftbar-section-content-item-info-text-link { + color: @color_s; + text-decoration: underline; + float: right; + position: absolute; + right: 17px; + // bottom: 5px; + } + + // --------------------------------------------------------------------------------------------------- + // Form actions + // --------------------------------------------------------------------------------------------------- + .w-sdc-form-actions-container.add-property { + text-align: center; + width: 100%; + margin-top: 2px; + margin-bottom: 12px; + + .w-sdc-form-action { + width: 245px; + } + .w-sdc-form-action.add-property-add-another { + .bg_a; + margin-left: 35px; + } + .w-sdc-form-action.add-property-done { + margin-left: 312px; + } + .w-sdc-form-action.save { + margin-left: 327px; + margin-bottom: 30px; + } + + } + + // --------------------------------------------------------------------------------------------------- + // Top menu + // --------------------------------------------------------------------------------------------------- + .w-sdc-header-menu { + padding: 25px 0; + text-align: center; + white-space: nowrap; + } + + .i-sdc-header-menu-item { + cursor: pointer; + display: inline-block; + height: 43px; + min-width: 93px; + padding: 0 38px; + position: relative; + vertical-align: middle; + + &::after { + border-right: 1px solid @color_m; + content: ''; + display: block; + height: 43px; + right: 0; + position: absolute; + top: 0; + width: 2px; + } + + &:first-child { + &::before { + border-right: 1px solid @color_m; + content: ''; + display: block; + height: 43px; + left: 0; + position: absolute; + top: 0; + width: 2px; + } + } + } + + .i-sdc-header-menu-item-icon { + display: inline-block; + height: 20px; + width: 28px; + } + + .i-sdc-header-menu-item-label { + .g_1; + line-height: 18px; + } + + // --------------------------------------------------------------------------------------------------- + // Canvas inline menu + // --------------------------------------------------------------------------------------------------- + .w-sdc-canvas-menu { + position: fixed; + z-index: 100; + + border-style: solid; + border-width: 1px; + border-color: #d8d8d8; + box-sizing: border-box; + background-color: #ffffff; + box-shadow: 0px 2px 2px 0px rgba(24, 24, 25, 0.1); + width: 91px; + +/* &.vl-type-select{ + width: 173px; + } +*/ + + h3 { + color: @func_color_s; + font-size: 14px; + font-weight: bold; + margin: 0; + padding: 7px 11px; + border-bottom: 1px solid #e5e5e5; + } + + .w-sdc-canvas-menu-content { + padding: 5px 5px; + + &.vl-select{ + border-bottom: #d8d8d8 solid 1px; + line-height: 15px; + + .tlv-radio { + padding: 3px 0px; + + .tlv-radio-label { + padding: 3px 0px; + + &::before { + margin-right: 10px; + } + } + } + } + + .w-sdc-canvas-menu-content-update-button { + .sprite; + .sprite.e-sdc-small-icon-delete; + .hand; + position: absolute; + top: 15px; + right: 10px; + } + .w-sdc-canvas-menu-content-delete-button { + .sprite; + .sprite.e-sdc-small-icon-delete; + .hand; + margin: 0 8px 0 6px; + } + } + + .w-sdc-canvas-menu-arrow { + //TODO: Missing image for small blue triangle. + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE1OTIzNDI1MENFQjExRTU4ODRERTI1MDM2REZCOUYzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE1OTIzNDI2MENFQjExRTU4ODRERTI1MDM2REZCOUYzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTU5MjM0MjMwQ0VCMTFFNTg4NERFMjUwMzZERkI5RjMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTU5MjM0MjQwQ0VCMTFFNTg4NERFMjUwMzZERkI5RjMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4gBXTlAAAAOElEQVR42mK0rp7NgASMgZgFiE/CBJjQJPcA8U4gNkdXAJMUAGJ+ZEVMaJIwAFfEhEUSRRFAgAEAVtgJyiLAPWAAAAAASUVORK5CYII='); + content: ''; + display: block; + height: 21px; + position: absolute; + right: 12px; + top: -24px; + width: 184px; + background-repeat: no-repeat; + background-position: 175px 16px; + } + + } +} +/*.right-tab-loader { + border: 16px solid #f3f3f3; !* Light grey *! + border-top: 16px solid #3498db; !* Blue *! + border-radius: 50%; + width: 120px; + height: 120px; + animation: spin 2s linear infinite; +}*/ + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts new file mode 100644 index 0000000000..5bb5d2cbbd --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts @@ -0,0 +1,255 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +/// +module Sdc.ViewModels { + 'use strict'; + import Resource = Sdc.Models.Components.Resource; + + export interface IArtifactsViewModelScope extends ICompositionViewModelScope { + artifacts: Array; + artifactType: string; + downloadFile:Models.IFileDownload; + isLoading:boolean; + + getTitle(): string; + addOrUpdate(artifact:Models.ArtifactModel): void; + delete(artifact:Models.ArtifactModel): void; + download(artifact:Models.ArtifactModel): void; + openEditEnvParametersModal(artifact:Models.ArtifactModel):void; + getEnvArtifact(heatArtifact:Models.ArtifactModel):any; + getEnvArtifactName(artifact:Models.ArtifactModel):string; + isLicenseArtifact(artifact:Models.ArtifactModel):boolean; + isVFiArtifact(artifact:Models.ArtifactModel):boolean; + } + + export class ResourceArtifactsViewModel { + + static '$inject' = [ + '$scope', + '$filter', + '$modal', + '$templateCache', + '$state', + 'sdcConfig', + 'ArtifactsUtils', + 'ModalsHandler', + 'Sdc.Services.CacheService' + ]; + + constructor(private $scope:IArtifactsViewModelScope, + private $filter:ng.IFilterService, + private $modal:ng.ui.bootstrap.IModalService, + private $templateCache:ng.ITemplateCacheService, + private $state:any, + private sdcConfig:Models.IAppConfigurtaion, + private artifactsUtils:Sdc.Utils.ArtifactsUtils, + private ModalsHandler: Utils.ModalsHandler, + private cacheService:Services.CacheService) { + + this.initScope(); + } + + + private initArtifactArr = (artifactType:string):void => { + let artifacts:Array = []; + + if (this.$scope.selectedComponent) { + if ('interface' == artifactType) { + let interfaces = this.$scope.selectedComponent.interfaces; + if (interfaces && interfaces.standard && interfaces.standard.operations) { + + angular.forEach(interfaces.standard.operations, (operation:any, interfaceName:string):void => { + let item:Sdc.Models.ArtifactModel = {}; + if (operation.implementation) { + item = operation.implementation; + } + item.artifactDisplayName = interfaceName; + item.artifactLabel = interfaceName; + item.mandatory = false; + artifacts.push(item); + }); + } + }else { + //init normal artifacts, deployment or api artifacts + let artifactsObj:Models.ArtifactGroupModel; + switch (artifactType) { + case "api": + artifactsObj = (this.$scope.selectedComponent).serviceApiArtifacts; + break; + case "deployment": + if (!this.$scope.isComponentInstanceSelected()) { + artifactsObj = this.$scope.selectedComponent.deploymentArtifacts; + } else { + artifactsObj = this.$scope.currentComponent.selectedInstance.deploymentArtifacts; + } + break; + default: + artifactsObj = this.$scope.selectedComponent.artifacts; + break; + } + _.forEach(artifactsObj, (artifact:Models.ArtifactModel, key) => { + artifacts.push(artifact); + }); + } + } + this.$scope.artifacts = artifacts; + }; + + private openEditArtifactModal = (artifact:Models.ArtifactModel):void => { + let viewModelsHtmlBasePath:string = '/app/scripts/view-models/'; + + let modalOptions:ng.ui.bootstrap.IModalSettings = { + template: this.$templateCache.get(viewModelsHtmlBasePath + 'forms/artifact-form/artifact-form-view.html'), + controller: 'Sdc.ViewModels.ArtifactResourceFormViewModel', + size: 'sdc-md', + backdrop: 'static', + keyboard: false, + resolve: { + artifact: ():Models.ArtifactModel => { + return artifact; + }, + component: (): Models.Components.Component => { + return this.$scope.currentComponent; + } + } + }; + + let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$modal.open(modalOptions); + modalInstance + .result + .then(():void => { + this.initArtifactArr(this.$scope.artifactType); + }); + }; + + private initScope = ():void => { + let self = this; + this.$scope.isLoading= false; + this.$scope.artifactType = this.artifactsUtils.getArtifactTypeByState(this.$state.current.name); + this.initArtifactArr(this.$scope.artifactType); + + this.$scope.getTitle = ():string => { + return this.artifactsUtils.getTitle(this.$scope.artifactType, this.$scope.selectedComponent); + }; + + let vfiArtifactTypes:any = this.cacheService.get('UIConfiguration').artifacts.deployment.resourceInstanceDeploymentArtifacts; + + this.$scope.isVFiArtifact=(artifact:Models.ArtifactModel):boolean=>{ + return vfiArtifactTypes[artifact.artifactType]; + } + + this.$scope.$watch('selectedComponent', (newResource:Models.Components.Component):void => { + if (newResource) { + this.initArtifactArr(this.$scope.artifactType); + } + }); + + + this.$scope.$watch('currentComponent.selectedInstance', (newInstance:Models.ComponentsInstances.ComponentInstance):void => { + if (newInstance) { + this.initArtifactArr(this.$scope.artifactType); + } + }); + + this.$scope.addOrUpdate = (artifact:Models.ArtifactModel):void => { + this.artifactsUtils.setArtifactType(artifact, this.$scope.artifactType); + let artifactCopy = new Models.ArtifactModel(artifact); + this.openEditArtifactModal(artifactCopy); + }; + + + this.$scope.delete = (artifact:Models.ArtifactModel):void => { + + let onOk = ():void => { + this.$scope.isLoading= true; + this.artifactsUtils.removeArtifact(artifact, this.$scope.artifacts); + + let success = (responseArtifact:Models.ArtifactModel):void => { + this.initArtifactArr(this.$scope.artifactType); + this.$scope.isLoading= false; + }; + + let error =(error:any):void =>{ + console.log('Delete artifact returned error:', error); + this.initArtifactArr(this.$scope.artifactType); + this.$scope.isLoading= false; + }; + if(this.$scope.isComponentInstanceSelected()){ + this.$scope.currentComponent.deleteInstanceArtifact(artifact.uniqueId, artifact.artifactLabel).then(success, error); + }else{ + this.$scope.currentComponent.deleteArtifact(artifact.uniqueId, artifact.artifactLabel).then(success, error);//TODO simulate error (make sure error returns) + } + }; + let title: string = this.$filter('translate')("ARTIFACT_VIEW_DELETE_MODAL_TITLE"); + let message: string = this.$filter('translate')("ARTIFACT_VIEW_DELETE_MODAL_TEXT", "{'name': '" + artifact.artifactDisplayName + "'}"); + this.ModalsHandler.openConfirmationModal(title, message, false).then(onOk); + }; + + + this.$scope.getEnvArtifact = (heatArtifact:Models.ArtifactModel):any=>{ + return _.find(this.$scope.artifacts, (item:Models.ArtifactModel)=>{ + return item.generatedFromId === heatArtifact.uniqueId; + }); + }; + + this.$scope.getEnvArtifactName = (artifact:Models.ArtifactModel):string =>{ + let envArtifact = this.$scope.getEnvArtifact(artifact); + if(envArtifact){ + return envArtifact.artifactDisplayName; + } + }; + + this.$scope.isLicenseArtifact = (artifact:Models.ArtifactModel) :boolean => { + let isLicense:boolean = false; + if(this.$scope.component.isResource() && (this.$scope.component).isCsarComponent()) { + isLicense = this.artifactsUtils.isLicenseType(artifact.artifactType); + } + + return isLicense; + }; + + this.$scope.openEditEnvParametersModal = (artifact:Models.ArtifactModel):void => { + + let modalOptions:ng.ui.bootstrap.IModalSettings = { + template: this.$templateCache.get('/app/scripts/view-models/forms/env-parameters-form/env-parameters-form.html'), + controller: 'Sdc.ViewModels.EnvParametersFormViewModel', + size: 'sdc-md', + backdrop: 'static', + resolve: { + artifact: ():Models.ArtifactModel => { + return artifact; + }, + component: (): Models.Components.Component => { + return this.$scope.currentComponent; + } + } + }; + + let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$modal.open(modalOptions); + modalInstance + .result + .then(():void => { + this.initArtifactArr(this.$scope.artifactType); + }); + }; + + } + } +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html new file mode 100644 index 0000000000..8c0138964f --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html @@ -0,0 +1,55 @@ + +
+ + +
+ + +
+
+
+ +
+
+
+ +
+ + +
+
+ +
+ Description:{{artifact.description}} +
+
+ + + + + +
+
+ +
+
+ +
+
+ diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/artifacts/artifacts.less b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/artifacts/artifacts.less new file mode 100644 index 0000000000..5726ca66fc --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/artifacts/artifacts.less @@ -0,0 +1,172 @@ +.w-sdc-designer-sidebar-tab-content.artifacts { + + .i-sdc-designer-sidebar-section-content-item-artifact.hand { + .hand; + } + + .w-sdc-designer-sidebar-section-content { + padding: 0; + } + .w-sdc-designer-sidebar-section-title { + &.expanded { + margin-bottom: 0; + } + } + + .i-sdc-designer-sidebar-section-content-item-artifact-details { + display: inline-block; + margin-left: 5px; + vertical-align: middle; + width: 180px; + &.heat { + line-height: 18px; + width: 250px; + } + } + + .i-sdc-designer-sidebar-section-content-item-artifact-details-name { + .g_7; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width:220px; + display: inline-block; + //text-transform: capitalize; + &.enabled { + &:hover { + .a_7; + } + } + + } + + .i-sdc-designer-sidebar-section-content-item-artifact-heat-env { + .g_7; + margin-top: 6px; + line-height: 42px; + padding-top: 10px; + border-top:1px solid #c8cdd1; + .enabled { + &:hover { + .hand; + .a_7; + } + } + } + + .i-sdc-designer-sidebar-section-content-item-artifact-filename { + .g_7; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 225px; + display: inline-block; + .bold; + &.enabled { + &:hover { + .a_7; + } + } + } + + + .i-sdc-designer-sidebar-section-content-item-file-link{ + border-left: 1px #848586 solid; + height: 58px; + margin-left: -11px; + margin-top: 11px; + border-top: 1px #848586 solid; + border-bottom: 1px #848586 solid; + width: 12px; + float: left; + } + + .i-sdc-designer-sidebar-section-content-item-artifact-details-desc { + display: none; + line-height: 16px; + word-wrap: break-word; + white-space: normal; + } + + .i-sdc-designer-sidebar-section-content-item-artifact-details-desc-label { + .b_3; + } + + + .i-sdc-designer-sidebar-section-content-item-artifact { + border-bottom: 1px solid #c8cdd1; + padding: 5px 10px 5px 18px; + position: relative; + // line-height: 36px; + min-height: 61px; + cursor: default; + display: flex; + align-items: center; + + + .i-sdc-designer-sidebar-section-content-item-button { + top: 20px; + line-height: 10px; + } + + &:hover { + //background-color: @color_c; + .bg_c; + transition: all .3s; + + .i-sdc-designer-sidebar-section-content-item-button { + display: block; + + } + + } + } + +} + +///////////////////Lifecycle Management +.i-sdc-designer-sidebar-section-content-item-lm { + .b_7; + border-bottom: 1px solid @color_e; + cursor: pointer; + height: 65px; + padding: 22px 0; + position: relative; + + &:hover { + .bg_c_hover; + margin-left: -10px; + margin-right: -10px; + padding: 22px 10px; + + .i-sdc-designer-sidebar-section-content-item-lm-icon { + right: 16px; + } + } +} + +.i-sdc-designer-sidebar-section-content-item-lm:first-child { + margin-top: -18px; +} + +.i-sdc-designer-sidebar-section-content-item-lm-icon { + position: absolute; + right: 6px; + + //TODO: Replace the icons. + &.icon-view { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAJCAYAAAACTR1pAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjdGMDNBRUJDMDkxNjExRTVCMjRBOEI5QzMxQTlBQjY4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjdGMDNBRUJEMDkxNjExRTVCMjRBOEI5QzMxQTlBQjY4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6N0YwM0FFQkEwOTE2MTFFNUIyNEE4QjlDMzFBOUFCNjgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6N0YwM0FFQkIwOTE2MTFFNUIyNEE4QjlDMzFBOUFCNjgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4U2decAAABRUlEQVR42pyRPUvDUBSG39t2UyyaBgvWQZMqKoFq4lBH0U0UqXSxKPaPieCoWPAPKIgdjG1ohaghOrSR1iaLKMXpmnMhQVfPcLmc8zxwPhjnHFE4rx3eMO/w4rr4+vwQuZHRMcwqClaMVeRnplnEskg8O7/g96YJSZLgBz5+R0bKIAgC6IaBvdKukBP0HJ+cctu2cVCtQsrIUFUVlcp+LE6EItWIIVaIV9c3/PnRRqlcxkJeYV2vi+/hEO/9QSx6b56oEUMsOal6/TacQcXinCpaGE+n0QnljufFIuUoiAlZTk6iWFyD6zpoWi3RwvrmBlLJZCzRn3IUxBBLjlgO9e06T9ja3sGyrqPX66NtWQLWCgVks5Owmg1c1mpQ8vM4OqywP1s1w1PkpnJY0jTIsizy/sDHQ7sFmt0ITxJtlf33jj8CDADhB52tEX6ifAAAAABJRU5ErkJggg=='); + height: 9px; + top: 29px; + width: 14px; + } + + //TODO: Replace the icons. + &.icon-alert { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAANCAYAAAB2HjRBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjhBM0YxQTBCMDkyMDExRTVBNzlCQUYxNEYwMDUwOTQ5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjhBM0YxQTBDMDkyMDExRTVBNzlCQUYxNEYwMDUwOTQ5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OEEzRjFBMDkwOTIwMTFFNUE3OUJBRjE0RjAwNTA5NDkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OEEzRjFBMEEwOTIwMTFFNUE3OUJBRjE0RjAwNTA5NDkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7exgceAAAB5klEQVR42oySy2tTQRTGfzN3cpvbpFTaUlzUjeCuVFyJf4DuCl34wL/CrbpUunLnwpUuFFy48IFiwYWhpYuW+gCLrbWKBQumaRIba5ub3MccJ5WECCV44MDMme873/lmBhGhnZulcn/3/sfrO7J/45R017pT0xUS2bC93vy2LAOLt5DfCeUn14RD4h/ysbHRDii/8pyo7DmFiP7VZ4Rbu9KT3I7i+qJklp7ibQt2J6HeNOhXV/gv8tDcbaLtXYLJKeTcZfxqSPPzvGu6ID3J1Q8z0ny/hIkM5swF8qenUFUfwixHCtd7Kwez04jOgEmc+hq6tuZ8N9E6xG5U+Pn2kRxKLs7eE7tRc0XlToRM2sD+2sGmDiY+kWsSFG528Kr1Xgfjfn0n5uElvFrrzVqVDHqkiTKjxCsV9LBx08QkgcY/eZH+89Oqo+x9eumkwQaQaoPEKWpsHHN8ArItgLt5UdiG6736mFLxixyQt+bviik8QPuaNFRIkjqQRZ2YJDo6QWydjTRtOcGPPdJKgnlxFfN9fVmGNhecR4U3mLrL6nPTRTQHXZO5+4jyyI4Iqs99GJvgBiKjcySlj3897y6/kbreI4w0QS7ASxrsa4/cXkxkIzK5PKmNqRMw7NfdeczA+Fn1R4ABAPnMAeCjkgf5AAAAAElFTkSuQmCC'); + height: 13px; + top: 27px; + width: 15px; + } + +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts new file mode 100644 index 0000000000..b28de8d331 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts @@ -0,0 +1,132 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +/// +module Sdc.ViewModels { + + 'use strict'; + + export interface IEditResourceVersion { + allVersions: any; + changeVersion: string; + } + + interface IDetailsViewModelScope extends ICompositionViewModelScope { + isLoading: boolean; + $parent: ICompositionViewModelScope; + expandedSection: Array; + editForm:ng.IFormController; + editResourceVersion: IEditResourceVersion; + + changeResourceVersion(): void; + } + + export class DetailsViewModel { + + static '$inject' = [ + '$scope', + 'LeftPaletteLoaderService', + 'EventListenerService' + + ]; + + constructor(private $scope:IDetailsViewModelScope, + private LeftPaletteLoaderService:Services.Components.LeftPaletteLoaderService, + private eventListenerService:Services.EventListenerService) { + this.initScope(); + } + + private clearSelectedVersion = ():void => { + this.$scope.editResourceVersion = { + allVersions: {}, + changeVersion: null + }; + }; + + private versioning:Function = (versionNumber:string):string => { + let version:Array = versionNumber.split('.'); + return '00000000'.slice(version[0].length) + version[0] + '.' + '00000000'.slice(version[1].length) + version[1]; + }; + + private initEditResourceVersion = ():void => { + this.clearSelectedVersion(); + this.$scope.editResourceVersion.allVersions[this.$scope.currentComponent.selectedInstance.componentVersion] = this.$scope.currentComponent.selectedInstance.componentUid; + _.merge(this.$scope.editResourceVersion.allVersions, angular.copy(this.$scope.selectedComponent.allVersions)); + let sorted:any= _.sortBy(_.toPairs(this.$scope.editResourceVersion.allVersions), (item)=>{ + return this.versioning(item[0]); + }); + this.clearSelectedVersion(); + _.forEach(sorted, (item)=> { + this.$scope.editResourceVersion.allVersions[item[0]]= item[1]; + }); + + let highestVersion = _.last(Object.keys(this.$scope.selectedComponent.allVersions)); + + //TODO - ask ronny - what happend if the parent is not in the leftPalette (instance of csar for example) + if (parseFloat(highestVersion) % 1) { //if highest is minor, make sure it is the latest checked in - + let latestVersionComponent:Models.Components.Component = _.find(this.LeftPaletteLoaderService.getFullDataComponentListWithVls(this.$scope.currentComponent.componentType), (component:Models.Components.Component) => { //latest checked in + return (component.systemName === this.$scope.selectedComponent.systemName + || component.uuid === this.$scope.selectedComponent.uuid); + }); + let latestVersion:string = latestVersionComponent ? latestVersionComponent.version : highestVersion; + + if (highestVersion != latestVersion) { //highest is checked out - remove from options + this.$scope.editResourceVersion.allVersions = _.omit(this.$scope.editResourceVersion.allVersions, highestVersion); + } + } + this.$scope.editResourceVersion.changeVersion = this.$scope.currentComponent.selectedInstance.componentVersion; + }; + + private initScope = ():void => { + this.$scope.isLoading = false; + this.$scope.$parent.isLoading = false; + this.$scope.expandedSection = ['general', 'tags']; + //this.clearSelectedVersion(); + + this.$scope.$watch('selectedComponent', (component:Models.Components.Component) => { + if (this.$scope.isComponentInstanceSelected()) { + this.initEditResourceVersion(); + } + }); + + this.$scope.changeResourceVersion = ():void => { + this.$scope.isLoading = true; + this.$scope.$parent.isLoading = true; + + let onSuccess = (component:Models.Components.Component)=> { + this.$scope.isLoading = false; + this.$scope.$parent.isLoading = false; + this.$scope.setComponent(component); + this.$scope.updateSelectedComponent(); + + this.eventListenerService.notifyObservers(Sdc.Utils.Constants.GRAPH_EVENTS.ON_VERSION_CHANGED, this.$scope.currentComponent); + }; + + let onFailed = (error:any)=> { + this.$scope.isLoading = false; + this.$scope.$parent.isLoading = false; + console.log(error); + }; + + let componentUid:string = this.$scope.editResourceVersion.allVersions[this.$scope.editResourceVersion.changeVersion]; + this.$scope.currentComponent.changeComponentInstanceVersion(componentUid).then(onSuccess, onFailed); + }; + } + } +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/details/details-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/details/details-view.html new file mode 100644 index 0000000000..6ae462760c --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/details/details-view.html @@ -0,0 +1,129 @@ + + +
+ + + + General Info +
+ + +
+
+ Type: + +
+
+ Resource Type: + +
+
+ + Version: + + + + +
+
+ Category: + +
+
+ Sub Category: + +
+
+ Creation Date: + +
+
+ Author: + + +
+
+ + +
+
+ Vendor Name: + + +
+
+ Vendor Release: + + +
+
+ + +
+
+ Description: + + + +
+ +
+
+ +
+ + Additional Information +
+ + +
+
+ + : + +
+
+
+ + +
+ + Tags +
+ + +
+
+ +
+
+
+ + + + diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/details/details.less b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/details/details.less new file mode 100644 index 0000000000..e88e130379 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/details/details.less @@ -0,0 +1,68 @@ +.w-sdc-designer-sidebar-tab-content.details { + + .w-sdc-designer-sidebar-section-title + .w-sdc-designer-sidebar-section-content { + padding: 0 10px 0 18px; + } + + .w-sdc-designer-sidebar-section-title.expanded + .w-sdc-designer-sidebar-section-content { + padding: 10px 10px 10px 18px; + } + + .i-sdc-designer-sidebar-section-content-item-label { + font-weight: bold; + &.additional-information{ + max-width:100px; + display: inline-block; + text-overflow: ellipsis; + overflow: hidden; + vertical-align: bottom; + } + + } + + + + .i-sdc-designer-sidebar-section-content-item-value { + // .hyphenate; + padding-left: 10px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: inline-block; + max-width: 160px; + vertical-align:bottom; + font-weight: normal; + &.additional-information{ + max-width:160px; + display: inline-block; + } + &.i-sdc-form-select { + .b_1; + border: 1px solid @border_color_f; + width: 210px; + max-width: 210px; + padding-left: 4px; + + .select-instance-version { + .b_1; + &.minor { + .h_1; + } + } + } + &.minor { + .h_1; + } + } + .i-sdc-designer-sidebar-section-content-description-item-value{ + max-width: none; + font-weight: normal; + } + + .w-sdc-designer-sidebar-section.tags { + .i-sdc-designer-sidebar-section-content-item { + white-space: normal; + } + } + +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view-model.ts new file mode 100644 index 0000000000..aef25c51ce --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view-model.ts @@ -0,0 +1,228 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +/// +module Sdc.ViewModels { + 'use strict'; + + interface IResourcePropertiesAndAttributesViewModelScope extends ICompositionViewModelScope { + properties: Models.PropertiesGroup; + attributes: Models.AttributesGroup; + propertiesMessage: string; + addProperty(): void; + updateProperty(property:Models.PropertyModel): void; + deleteProperty(property:Models.PropertyModel): void; + viewAttribute(attribute:Models.AttributeModel): void; + groupNameByKey(key:string): string; + isPropertyOwner():boolean; + } + + export class ResourcePropertiesViewModel { + + static '$inject' = [ + '$scope', + '$filter', + '$modal', + '$templateCache', + 'ModalsHandler' + ]; + + + constructor(private $scope:IResourcePropertiesAndAttributesViewModelScope, + private $filter:ng.IFilterService, + private $modal:ng.ui.bootstrap.IModalService, + private $templateCache:ng.ITemplateCacheService, + private ModalsHandler: Utils.ModalsHandler) { + + this.initScope(); + } + + private initComponentProperties = ():void => { + let result:Models.PropertiesGroup = {}; + + if(this.$scope.selectedComponent){ + this.$scope.propertiesMessage = undefined; + if(this.$scope.isComponentInstanceSelected()){ + if (this.$scope.currentComponent.selectedInstance.originType==='VF') { + // Temporally fix to hide properties for VF (UI stack when there are many properties) + this.$scope.propertiesMessage = "Note: properties for VF are disabled"; + } else { + result[this.$scope.currentComponent.selectedInstance.uniqueId] = this.$scope.currentComponent.componentInstancesProperties[this.$scope.currentComponent.selectedInstance.uniqueId]; + } + }else if(this.$scope.currentComponent.isService()){ + // Temporally fix to hide properties for service (UI stack when there are many properties) + //result = this.$scope.currentComponent.componentInstancesProperties; + this.$scope.propertiesMessage = "Note: properties for service are disabled"; + }else{ + let key = this.$scope.selectedComponent.uniqueId; + result[key]= Array(); + let derived = Array(); + _.forEach(this.$scope.selectedComponent.properties, (property:Models.PropertyModel) => { + if(key == property.parentUniqueId){ + result[key].push(property); + }else{ + property.readonly = true; + derived.push(property); + } + }); + if(derived.length){ + result['derived']= derived; + } + } + this.$scope.properties = result; + } + }; + + + private initComponentAttributes = ():void => { + let result:Models.AttributesGroup = {}; + + if(this.$scope.selectedComponent){ + if(this.$scope.isComponentInstanceSelected()){ + result[this.$scope.currentComponent.selectedInstance.uniqueId] = this.$scope.currentComponent.componentInstancesAttributes[this.$scope.currentComponent.selectedInstance.uniqueId]; + }else if(this.$scope.currentComponent.isService()){ + result = this.$scope.currentComponent.componentInstancesAttributes; + } + this.$scope.attributes = result; + } + }; + + private openEditPropertyModal = (property:Models.PropertyModel):void => { + let viewModelsHtmlBasePath:string = '/app/scripts/view-models/'; + + let modalOptions:ng.ui.bootstrap.IModalSettings = { + template: this.$templateCache.get(viewModelsHtmlBasePath + 'forms/property-form/property-form-view.html'), + controller: 'Sdc.ViewModels.PropertyFormViewModel', + size: 'sdc-l', + backdrop: 'static', + keyboard: false, + resolve: { + property: ():Models.PropertyModel => { + return property; + }, + component: ():Models.Components.Component => { + return this.$scope.currentComponent; + }, + filteredProperties: ():Array => { + return this.$scope.selectedComponent.properties + } + } + }; + + + let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$modal.open(modalOptions); + modalInstance + .result + .then(():void => { + // this.initComponentProperties(); + }); + }; + + private openAttributeModal = (atrribute:Models.AttributeModel):void => { + let viewModelsHtmlBasePath:string = '/app/scripts/view-models/'; + + let modalOptions:ng.ui.bootstrap.IModalSettings = { + template: this.$templateCache.get(viewModelsHtmlBasePath + 'forms/attribute-form/attribute-form-view.html'), + controller: 'Sdc.ViewModels.AttributeFormViewModel', + size: 'sdc-md', + backdrop: 'static', + keyboard: false, + resolve: { + attribute: ():Models.AttributeModel => { + return atrribute; + }, + component: ():Models.Components.Component => { + return this.$scope.currentComponent; + } + } + }; + this.$modal.open(modalOptions); + }; + + + + + private initScope = ():void => { + this.initComponentProperties(); + this.initComponentAttributes(); + + this.$scope.$watchCollection('currentComponent.componentInstancesProperties', (newData:any):void => { + this.initComponentProperties(); + }); + + this.$scope.$watchCollection('currentComponent.properties', (newData:any):void => { + this.initComponentProperties(); + }); + + this.$scope.$watch('currentComponent.selectedInstance', (newInstance:Models.ComponentsInstances.ComponentInstance):void => { + if (angular.isDefined(newInstance)) { + this.initComponentProperties(); + this.initComponentAttributes(); + } + }); + + this.$scope.$watchCollection('currentComponent.componentInstancesAttributes', (newData:any):void => { + this.initComponentAttributes(); + }); + + this.$scope.isPropertyOwner = ():boolean => { + return this.$scope.currentComponent && this.$scope.currentComponent.isResource() && + !this.$scope.isComponentInstanceSelected(); + }; + + this.$scope.addProperty = ():void => { + let property = new Models.PropertyModel(); + this.openEditPropertyModal(property); + }; + + this.$scope.updateProperty = (property:Models.PropertyModel):void => { + this.openEditPropertyModal(property); + }; + + this.$scope.deleteProperty = (property:Models.PropertyModel):void => { + + let onOk = ():void => { + this.$scope.currentComponent.deleteProperty(property.uniqueId); + }; + + let title:string = this.$filter('translate')("PROPERTY_VIEW_DELETE_MODAL_TITLE"); + let message:string = this.$filter('translate')("PROPERTY_VIEW_DELETE_MODAL_TEXT", "{'name': '" + property.name + "'}"); + this.ModalsHandler.openConfirmationModal(title, message, false).then(onOk); + }; + + this.$scope.viewAttribute = (attribute:Models.AttributeModel):void => { + this.openAttributeModal(attribute); + }; + + this.$scope.groupNameByKey = (key:string):string => { + switch (key){ + case 'derived': + return "Derived"; + + case this.$scope.currentComponent.uniqueId: + return this.$filter("resourceName")(this.$scope.currentComponent.name); + + default: + return this.$filter("resourceName")((_.find(this.$scope.currentComponent.componentInstances, {uniqueId:key})).name); + } + }; + + } + } +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view.html new file mode 100644 index 0000000000..3022ee6e90 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view.html @@ -0,0 +1,81 @@ + +
+ + + + + + + +
+ + +
+
+
+
+ {{property.name}} +
+
+ {{property.defaultValue}} + {{property.value}} +
+ +
+
+ +
+
+ +
+ + + + + +
+ + +
+
+
+
+ {{attribute.name}} +
+
+ {{attribute.defaultValue}} + {{attribute.value}} +
+
+
+ +
+ +
+ diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties.less b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties.less new file mode 100644 index 0000000000..2ad87b9fca --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties.less @@ -0,0 +1,16 @@ +.w-sdc-designer-sidebar-tab-content.properties { + .i-sdc-designer-sidebar-section-content-item-property-and-attribute-label{ + font-weight: bold; + } + .i-sdc-designer-sidebar-section-content-item-button.update{ + right: 17px; + } + .i-sdc-designer-sidebar-section-content-item-button.delete{ + right: 35px; + } + + .w-sdc-designer-sidebar-properties-disabled { + .s_14_m; + padding: 20px 20px; + } +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/relations/relations-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/relations/relations-view-model.ts new file mode 100644 index 0000000000..119a59d5af --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/relations/relations-view-model.ts @@ -0,0 +1,81 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +/// > +module Sdc.ViewModels { + 'use strict'; + + interface IRelationsViewModelScope extends ICompositionViewModelScope { + isLoading: boolean; + $parent: ICompositionViewModelScope; + getRelation(requirement:any): any; + } + + export class RelationsViewModel { + + static '$inject' = [ + '$scope', + '$filter' + ]; + + constructor(private $scope:IRelationsViewModelScope, + private $filter:ng.IFilterService) { + this.initScope(); + } + + + private updateRC = ():void =>{ + if(this.$scope.currentComponent) { + this.$scope.currentComponent.updateRequirementsCapabilities(); + } + }; + + private initScope = ():void => { + + this.$scope.isLoading = this.$scope.$parent.isLoading; + + this.$scope.getRelation = (requirement:any):any => { + + if(this.$scope.isComponentInstanceSelected() && this.$scope.currentComponent.componentInstancesRelations ) { + let relationItem = _.filter(this.$scope.currentComponent.componentInstancesRelations, (relation:any) => { + return relation.fromNode === this.$scope.currentComponent.selectedInstance.uniqueId && + _.some(relation.relationships, {'requirement': requirement.name, + 'requirementOwnerId': requirement.ownerId}); + }); + + if (relationItem && relationItem.length) { + return { + type: requirement.relationship.split('.').pop(), + requirementName: this.$filter('resourceName')(this.$scope.currentComponent.componentInstances[_.map + (this.$scope.currentComponent.componentInstances, "uniqueId").indexOf(relationItem[0].toNode)].name) + }; + } + } + return null; + }; + + if(!this.$scope.isComponentInstanceSelected()) { + this.$scope.$watch('currentComponent.componentInstances + currentComponent.componentInstancesRelations', ():void => { + this.updateRC(); + }); + + } + } + } +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/relations/relations-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/relations/relations-view.html new file mode 100644 index 0000000000..72eaae27cf --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/relations/relations-view.html @@ -0,0 +1,57 @@ + + +
+ + Capabilities +
+ + +
+
+
+
+
+
{{capability.name}}  +   {{capability.ownerName | resourceName}}
+
{{capability.type}}
+
+
+
+
+
+ +
+ + Requirements +
+ + +
+
+
+
+
+
{{requirement.name}}  +   {{requirement.ownerName | resourceName}}
+
{{requirement.node}} +
+
+
+ {{getRelation(requirement).type}}
+ {{getRelation(requirement).requirementName}} +
+
+
+
+
+
+
+
+ + diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/relations/relations.less b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/relations/relations.less new file mode 100644 index 0000000000..212b9785e9 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/relations/relations.less @@ -0,0 +1,116 @@ +.w-sdc-designer-sidebar-tab-content.relations { + + .w-sdc-designer-sidebar-section-content { + padding: 0; + } + + .w-sdc-designer-sidebar-section-title { + &.expanded { + margin-bottom: 0; + } + } + + .i-sdc-designer-sidebar-section-content-item-relations { + border-bottom: 1px solid @color_e; + padding: 10px 10px 10px 18px; + position: relative; + cursor: default; + + .i-sdc-designer-sidebar-section-content-item-button { + top: 15px; + line-height: 10px; + } + + &:hover { + background-color: @color_c; + + .i-sdc-designer-sidebar-section-content-item-button { + display: block; + + } + + } + + } + .w-sdc-designer-sidebar-section-relations:not(:last-child) .i-sdc-designer-sidebar-section-content-item-relations-group:last-child .i-sdc-designer-sidebar-section-content-item-relations:last-child { + border-bottom: none; + } + + + .i-sdc-designer-sidebar-section-content-item-relations.hand { + .hand; + } + + .i-sdc-designer-sidebar-section-content-item-relations-group { + //border-bottom: 1px solid @color_e; + } + + .i-sdc-designer-sidebar-section-content-item-relations-details { + display: inline-block; + margin-left: 5px; + vertical-align: middle; + } + + .i-sdc-designer-sidebar-section-content-item-relations-details-name { + .b_1; + .bold; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + //width: 100%; + text-transform: capitalize; + max-width: 240px; + display: inline-block; + } + + .i-sdc-designer-sidebar-section-content-item-relations-details-ownerName { + .b_13; + font-weight:400; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + &:before{ + .sprite; + .arrow-left; + content: ''; + } + } + + .i-sdc-designer-sidebar-section-content-item-relations-details-desc { + .p_1; + line-height: 14px; + word-wrap: break-word; + white-space: normal; + + .i-sdc-designer-sidebar-section-content-item-relations-details-indent-box{ + border-left: 1px #848586 solid; + height: 40px; + margin-left: 2px; + margin-top: 5px; + border-bottom: 1px #848586 solid; + width: 25px; + float: left; + } + .i-sdc-designer-sidebar-section-content-item-relations-details-child{ + margin-top: 30px; + float: left; + padding-left: 10px; + max-width: 230px; + } + } + + .i-sdc-designer-sidebar-section-content-item-relations-details-desc-label { + font-family: omnes-medium, sans-serif; + } + + .i-sdc-designer-sidebar-section-content-item-relations-view { + position: absolute; + right: 0; + top: 22px; + display: none; + } + +} + + diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/structure/structure-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/structure/structure-view.html new file mode 100644 index 0000000000..2070041990 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/structure/structure-view.html @@ -0,0 +1,13 @@ + + +
+ + Composition +
+ + +
+ +
+
+ diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/structure/structure-view.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/structure/structure-view.ts new file mode 100644 index 0000000000..daeab7f2f3 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/structure/structure-view.ts @@ -0,0 +1,34 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +/// +module Sdc.ViewModels { + 'use strict'; + + interface IStructureViewModel extends ICompositionViewModelScope {} + + export class StructureViewModel { + static '$inject' = [ + '$scope' + ]; + + constructor(private $scope:IStructureViewModel) { + } + } + } diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model.ts new file mode 100644 index 0000000000..43511e2deb --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model.ts @@ -0,0 +1,253 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +/// +module Sdc.ViewModels { + 'use strict'; + import Resource = Sdc.Models.Components.Resource; + import ArtifactModel = Sdc.Models.ArtifactModel; + + interface IDeploymentArtifactsViewModelScope extends IWorkspaceViewModelScope { + tableHeadersList: Array; + reverse: boolean; + sortBy:string; + artifacts: Array; + editForm:ng.IFormController; + isLoading:boolean; + artifactDescriptions:any; + updateInProgress:boolean; + + addOrUpdate(artifact:Models.ArtifactModel): void; + update(artifact:Models.ArtifactModel): void; + delete(artifact:Models.ArtifactModel): void; + sort(sortBy:string): void; + noArtifactsToShow():boolean; + getValidationPattern(validationType:string, parameterType?:string):RegExp; + validateJson(json:string):boolean; + resetValue(parameter:any):void; + viewModeOrCsarComponent():boolean; + isLicenseArtifact(artifact:Models.ArtifactModel): boolean; + + } + + export class DeploymentArtifactsViewModel { + + static '$inject' = [ + '$scope', + '$filter', + '$modal', + '$templateCache', + 'ValidationUtils', + 'ArtifactsUtils', + 'ModalsHandler' + ]; + + constructor(private $scope:IDeploymentArtifactsViewModelScope, + private $filter:ng.IFilterService, + private $modal:ng.ui.bootstrap.IModalService, + private $templateCache:ng.ITemplateCacheService, + private validationUtils:Sdc.Utils.ValidationUtils, + private artifactsUtils:Sdc.Utils.ArtifactsUtils, + private ModalsHandler:Utils.ModalsHandler) { + this.initScope(); + this.$scope.updateSelectedMenuItem(); + } + + private initDescriptions = ():void => { + this.$scope.artifactDescriptions = {}; + _.forEach(this.$scope.component.deploymentArtifacts, (artifact:Models.ArtifactModel):void => { + this.$scope.artifactDescriptions[artifact.artifactLabel] = artifact.description; + }); + }; + + + private setArtifact = (artifact:Models.ArtifactModel):void => { + if (artifact.heatParameters) { + artifact.heatParameters.forEach((parameter:any):void => { + if (!parameter.currentValue && parameter.defaultValue) { + parameter.currentValue = parameter.defaultValue; + } else if ("" === parameter.currentValue) { + parameter.currentValue = null; + } + }); + } + if (!artifact.description || !this.$scope.getValidationPattern('string').test(artifact.description)) { + artifact.description = this.$scope.artifactDescriptions[artifact.artifactLabel]; + } + }; + + private updateAll = ():void => { + let artifacts:Array = []; + _.forEach(this.$scope.component.deploymentArtifacts, (artifact:Models.ArtifactModel):void => { + if (artifact.selected) { + this.setArtifact(artifact); + artifacts.push(artifact); + } + }); + this.$scope.component.updateMultipleArtifacts(artifacts); + }; + + + private initScope = ():void => { + let self = this; + this.$scope.isLoading = false; + this.$scope.updateInProgress = false; + this.initDescriptions(); + this.$scope.artifacts = _.values(this.$scope.component.deploymentArtifacts); + this.$scope.setValidState(true); + + this.$scope.tableHeadersList = [ + {title: 'Name', property: 'artifactDisplayName'}, + {title: 'Type', property: 'artifactType'}, + {title: 'Deployment timeout', property: 'timeout'} + ]; + + this.$scope.isLicenseArtifact = (artifact:Models.ArtifactModel) :boolean => { + let isLicense:boolean = false; + if(this.$scope.component.isResource() && (this.$scope.component).isCsarComponent()) { + + isLicense = this.artifactsUtils.isLicenseType(artifact.artifactType); + } + + return isLicense; + }; + + this.$scope.sort = (sortBy:string):void => { + this.$scope.reverse = (this.$scope.sortBy === sortBy) ? !this.$scope.reverse : false; + this.$scope.sortBy = sortBy; + }; + + this.$scope.getValidationPattern = (validationType:string, parameterType?:string):RegExp => { + return this.validationUtils.getValidationPattern(validationType, parameterType); + }; + + this.$scope.validateJson = (json:string):boolean => { + if(!json){ + return true; + } + return this.validationUtils.validateJson(json); + }; + + this.$scope.viewModeOrCsarComponent = ():boolean => { + return this.$scope.isViewMode() || (this.$scope.component.isResource() && (this.$scope.component).isCsarComponent()); + }; + + + this.$scope.addOrUpdate = (artifact:Models.ArtifactModel):void => { + artifact.artifactGroupType = 'DEPLOYMENT'; + let artifactCopy = new Models.ArtifactModel(artifact); + + let success = (response:any):void => { + self.$scope.artifactDescriptions[artifactCopy.artifactLabel] = artifactCopy.description; + self.$scope.artifacts = _.values(self.$scope.component.deploymentArtifacts); + }; + + let error = (err:any):void =>{ + console.log(err); + self.$scope.artifacts = _.values(self.$scope.component.deploymentArtifacts); + }; + + + this.ModalsHandler.openWizardArtifactModal(artifactCopy, self.$scope.component).then(success, error); + }; + + this.$scope.noArtifactsToShow = ():boolean => { + return !_.some(this.$scope.artifacts, 'esId'); + }; + + + this.$scope.resetValue = (parameter:any):void => { + if (!parameter.currentValue && parameter.defaultValue) { + parameter.currentValue = parameter.defaultValue; + } + else if ('boolean' == parameter.type) { + parameter.currentValue = parameter.currentValue.toUpperCase(); + } + }; + + + this.$scope.$watch('editForm.$valid', ():void => { + if (this.$scope.editForm) { + // this.$scope.setValidState(this.$scope.editForm.$valid); + } + }); + + this.$scope.update = (artifact:Models.ArtifactModel):void => { + if (false == this.$scope.isLoading) { + if (artifact.selected && !this.$scope.isViewMode()) { + this.$scope.isLoading = true; + this.$scope.updateInProgress = true; + let onSuccess = (responseArtifact:Models.ArtifactModel):void => { + this.$scope.artifactDescriptions[responseArtifact.artifactLabel] = responseArtifact.description; + this.$scope.artifacts = _.values(this.$scope.component.deploymentArtifacts); + this.$scope.isLoading = false; + artifact.selected = !artifact.selected; + this.$scope.updateInProgress = false; + }; + + let onFailed = (error:any):void => { + console.log('Delete artifact returned error:', error); + this.$scope.isLoading = false; + artifact.selected = !artifact.selected; + this.$scope.updateInProgress = false; + }; + + this.setArtifact(artifact); + this.$scope.component.addOrUpdateArtifact(artifact).then(onSuccess, onFailed); + } else { + artifact.selected = !artifact.selected; + + } + } + }; + + this.$scope.delete = (artifact:Models.ArtifactModel):void => { + let onOk = ():void => { + this.$scope.isLoading = true; + let onSuccess = ():void => { + this.$scope.isLoading = false; + this.$scope.artifacts = _.values(this.$scope.component.deploymentArtifacts); + }; + + let onFailed = (error:any):void => { + this.$scope.isLoading = false; + console.log('Delete artifact returned error:', error); + }; + + this.$scope.component.deleteArtifact(artifact.uniqueId, artifact.artifactLabel).then(onSuccess, onFailed); + }; + + let title:string = self.$filter('translate')("ARTIFACT_VIEW_DELETE_MODAL_TITLE"); + let message:string = self.$filter('translate')("ARTIFACT_VIEW_DELETE_MODAL_TEXT", "{'name': '" + artifact.artifactDisplayName + "'}"); + this.ModalsHandler.openConfirmationModal(title, message, false).then(onOk); + }; + }; + + public save = (callback:Function):void => { + this.updateAll(); + this.$scope.setComponent(this.$scope.component); + callback(true); + }; + + public back = (callback:Function):void => { + this.$scope.setComponent(this.$scope.component); + callback(true); + } + } +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view.html new file mode 100644 index 0000000000..1547618134 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view.html @@ -0,0 +1,149 @@ +
+ +
Add
+ +
+ +
+ +
+
{{header.title}} + +
+
+
+ +
+ + + + +
+
+ +
+ + + {{artifact.artifactDisplayName}} +
+ +
+ {{artifact.artifactType}} +
+
+ {{artifact.timeout? artifact.timeout:''}} +
+ +
+ + + + + +
+
+
+ + + +
+ + + +
+ + + +
+ +
+ + +
+ +
+
+ + ? + + +
+ + + +
+
+
+ + +
+
+ + ? + + +
+ + + +
+
+
+ + +
+
+ + + + + + + +
+
+
+
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less b/catalog-ui/app/scripts/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less new file mode 100644 index 0000000000..9f90a47d5a --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less @@ -0,0 +1,102 @@ +.workspace-deployment-artifact { + width: 93%; + display: inline-block; + .table-container-flex .table .body .data-row + div.item-opened { + align-items: center; + padding: 10px 40px 10px 30px; + } + + .w-sdc-classic-btn { + float: right; + margin-bottom: 10px; + } + + .table { + height:490px; + margin-bottom: 0; + } + + .parameter-description { + .circle(18px, @color_p); + content: '?'; + line-height: 18px; + vertical-align: middle; + margin-left: 5px; + cursor: default; + display: inline-block; + position: absolute; + top: 16px; + } + + .table-container-flex { + + margin-top: 27px; + + .flex-item:nth-child(1) { + flex-grow: 15; + .hand; + span.table-arrow { + margin-right: 7px; + } + } + + .flex-item:nth-child(2) { + flex-grow: 6; + } + + .flex-item:nth-child(3) { + flex-grow: 9; + } + + .flex-item:nth-child(4) { + flex-grow: 3; + padding-top: 10px; + } + } + .w-sdc-form{ + text-align: left; + + .w-sdc-env-params{ + border-top: 1px solid #cdcdcd; + margin: 25px 0 10px 0; + } + + .i-sdc-form-textarea { + border: 1px solid @color_e; + min-height: 60px; + padding: 10px 13px; + width: 100%; + resize: none; + + } + + .w-sdc-form-item { + &.error { + .i-sdc-form-input, + .i-sdc-form-select, + .i-sdc-form-textarea { + border-color: @color_h; + outline: none; + box-sizing: border-box; + } + } + } + + .i-sdc-env-form-label{ + font-family: @font-omnes-medium; + color: @main_color_m; + overflow: hidden; + max-width: 450px; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + margin-top: 14px; + + &.required::before { + color: #f33; + content: '*'; + margin-right: 4px; + } + } + } +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/deployment/deployment-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/deployment/deployment-view-model.ts new file mode 100644 index 0000000000..f8afc0b758 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/deployment/deployment-view-model.ts @@ -0,0 +1,127 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +/// +module Sdc.ViewModels { + 'use strict'; + + export interface IDeploymentViewModelScope extends IWorkspaceViewModelScope { + + currentComponent: Models.Components.Component; + selectedComponent: Models.Components.Component; + isLoading: boolean; + sharingService:Sdc.Services.SharingService; + sdcMenu:Models.IAppMenu; + version:string; + isViewOnly:boolean; + tabs:Array; + + setComponent(component: Models.Components.Component); + isComponentInstanceSelected():boolean; + updateSelectedComponent(): void + openUpdateModal(); + deleteSelectedComponentInstance():void; + onBackgroundClick():void; + setSelectedInstance(componentInstance: Models.ComponentsInstances.ComponentInstance): void; + printScreen():void; + + } + + export class DeploymentViewModel { + + static '$inject' = [ + '$scope', + 'sdcMenu', + 'MenuHandler', + '$modal', + '$templateCache', + '$state', + 'Sdc.Services.SharingService', + '$filter', + 'Sdc.Services.CacheService', + 'ComponentFactory', + 'ChangeLifecycleStateHandler', + 'LeftPaletteLoaderService', + 'ModalsHandler' + ]; + + constructor(private $scope:IDeploymentViewModelScope, + private sdcMenu:Models.IAppMenu, + private MenuHandler: Utils.MenuHandler, + private $modal:ng.ui.bootstrap.IModalService, + private $templateCache:ng.ITemplateCacheService, + private $state:ng.ui.IStateService, + private sharingService:Services.SharingService, + private $filter:ng.IFilterService, + private cacheService:Services.CacheService, + private ComponentFactory: Utils.ComponentFactory, + private ChangeLifecycleStateHandler: Sdc.Utils.ChangeLifecycleStateHandler, + private LeftPaletteLoaderService: Services.Components.LeftPaletteLoaderService, + private ModalsHandler: Sdc.Utils.ModalsHandler) { + + this.$scope.setValidState(true); + this.initScope(); + this.$scope.updateSelectedMenuItem(); + } + + + private initComponent = ():void => { + + this.$scope.currentComponent = this.$scope.component; + this.$scope.selectedComponent = this.$scope.currentComponent; + this.updateUuidMap(); + this.$scope.isViewOnly = this.$scope.isViewMode(); + }; + + + private updateUuidMap = ():void => { + /** + * In case user press F5, the page is refreshed and this.sharingService.currentEntity will be undefined, + * but after loadService or loadResource this.sharingService.currentEntity will be defined. + * Need to update the uuidMap with the new resource or service. + */ + this.sharingService.addUuidValue(this.$scope.currentComponent.uniqueId,this.$scope.currentComponent.uuid); + }; + + private initRightTabs = ()=> { + if(this.$scope.currentComponent.groups){ + + let hierarchyTab = new Models.Tab('/app/scripts/view-models/tabs/hierarchy/hierarchy-view.html', 'Sdc.ViewModels.HierarchyViewModel', 'hierarchy', this.$scope.currentComponent, 'hierarchy'); + this.$scope.tabs = Array(); + this.$scope.tabs.push(hierarchyTab) + } + + } + private initScope = ():void => { + + this.$scope.sharingService = this.sharingService; + this.$scope.sdcMenu = this.sdcMenu; + this.$scope.isLoading = false; + + this.$scope.version = this.cacheService.get('version'); + this.initComponent(); + + this.$scope.setComponent = (component: Models.Components.Product):void => { + this.$scope.currentComponent = component; + } + + this.initRightTabs(); + } + } +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/deployment/deployment-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/deployment/deployment-view.html new file mode 100644 index 0000000000..9e26656f5f --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/deployment/deployment-view.html @@ -0,0 +1,10 @@ +
+
+ + +
+ +
+ +
+
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/deployment/deployment.less b/catalog-ui/app/scripts/view-models/workspace/tabs/deployment/deployment.less new file mode 100644 index 0000000000..0439ccd0fa --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/deployment/deployment.less @@ -0,0 +1,33 @@ +.deployment-view{ + + display: inline-block; + text-align: left; + align-items: left; + padding: 0; + width: 100%; + height: 100%; + + .w-sdc-deployment-canvas { + .noselect; + .bg_c; + bottom: 0; + width: 100%; + height: 100%; + + .view-mode{ + background-color: #f8f8f8; + border:0; + } + } + + .w-sdc-deployment-right-bar { + + .noselect; + bottom: 0; + position: absolute; + right: 0px; + transition: right 0.2s; + z-index: 10000; + top: @action_nav_height; + } +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view-model.ts new file mode 100644 index 0000000000..c0d6aba915 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view-model.ts @@ -0,0 +1,67 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +/// +module Sdc.ViewModels { + 'use strict'; + + interface IDistributionStatusModalViewModelScope { + distribution:Models.Distribution; + status:string; + getStatusCount(distributionComponent:Array):any; + getUrlName(url:string):string; + modalDitributionStatus:ng.ui.bootstrap.IModalServiceInstance; + footerButtons: Array; + close(): void; + } + + export class DistributionStatusModalViewModel { + + static '$inject' = ['$scope','$modalInstance', 'data']; + + constructor(private $scope:IDistributionStatusModalViewModelScope, + private $modalInstance:ng.ui.bootstrap.IModalServiceInstance, + private data:any + ) { + this.initScope(); + } + + private initScope = ():void => { + this.$scope.distribution = this.data.distribution; + this.$scope.status = this.data.status; + this.$scope.modalDitributionStatus = this.$modalInstance; + + this.$scope.getUrlName = (url:string):string =>{ + let urlName:string = _.last(url.split('/')); + return urlName; + }; + + this.$scope.close = ():void => { + this.$modalInstance.close(); + }; + + this.$scope.footerButtons = [ + {'name': 'Close', 'css': 'blue', 'callback': this.$scope.close } + ]; + + }; + + + } +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view.html new file mode 100644 index 0000000000..b3393e99e0 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view.html @@ -0,0 +1,126 @@ + + +
+
+ +
+ + + +
+
    +
  • +
    + +
    +
    +
    +
    Distribution ID
    +
    +
    +
    +
    +
    +
    +
    +
    Time[UTC]:
    +
    +
    +
    + + +
    +
    +
    +
    Status: {{status}}
    + +
    +
    +
    + +
      +
    • +
      +
      +
      +
      {{omfComponentID}} {{omfComponentList.length}} +
      +
      +
      +
      +
      +
      +
      +
      Component ID
      +
      Artifact Name
      +
      URL
      +
      Time(UTC)
      +
      Status
      +
      + +
      +
      +
      + {{urlList[0].omfComponentID}} +
      +
      + {{getUrlName(urlList[0].url)}} +
      +
      +
      {{urlList[0].url}}
      +
      +
      +
      +
      +
      {{urlList[0].status}}
      +
      + + +
      +
      +
        +
      • + + {{distributionComponent.status}} + Reason: Component has determined artifact is not needed. + Reason: {{distributionComponent.errorReason}} +
        • +
      +
      +
      +
      +
      +
      +
      • +
    +
    • +
+
+ + +
+ + + diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal.less b/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal.less new file mode 100644 index 0000000000..02321b6e2f --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal.less @@ -0,0 +1,33 @@ +.w-sdc-classic-top-line-modal { + + .w-sdc-modal-head { + // border-bottom: none; + } + .w-sdc-distribution-view { + + .w-sdc-distribution-view-content { + height: 500px; + } + + .w-sdc-distribution-view-content-section { + + .w-sdc-distribute-parent-block { + .w-sdc-distribute-components-block { + + .omf-component-row { + .w-sdc-distribute-status-block { + margin-left: 0; + } + + } + div { + padding-left: 0; + } + } + + } + + } + } +} + diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/distribution-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/distribution-view-model.ts new file mode 100644 index 0000000000..219585fc3d --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/distribution-view-model.ts @@ -0,0 +1,135 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +/// + +module Sdc.ViewModels { + 'use strict'; + + interface IDistributionViewModel extends IWorkspaceViewModelScope{ + modalDistribution:ng.ui.bootstrap.IModalServiceInstance; + service: Models.Components.Service; + distributions : Array; + showComponents(distribution:Models.Distribution): void; + markAsDeployed(distribution:Models.Distribution): void; + getStatusCount(distributionComponent:Array):any; + initDistributions():void; + getUrlName(url:string):string; + close(): void; + openDisributionStatusModal:Function; + } + + export class DistributionViewModel{ + + static '$inject' = [ + '$scope', + 'ModalsHandler' + + ]; + + constructor( + private $scope:IDistributionViewModel, + private ModalsHandler: Sdc.Utils.ModalsHandler + ){ + this.initScope(); + this.$scope.setValidState(true); + this.$scope.updateSelectedMenuItem(); + } + + private initScope = (): void => { + this.$scope.service = this.$scope.component; + + + // Open Distribution status modal + this.$scope.openDisributionStatusModal = (distribution: Models.Distribution,status:string):void => { + this.ModalsHandler.openDistributionStatusModal(distribution,status).then(()=>{ + // OK + }, ()=>{ + // ERROR + }); + }; + + + this.$scope.showComponents = (distribution: Models.Distribution): void => { + let onError = (response) => { + console.info('onError showComponents',response); + }; + let onSuccess = (distributionComponents: Array) => { + distribution.distributionComponents = distributionComponents; + distribution.statusCount = this.$scope.getStatusCount(distribution.distributionComponents); + // distribution.components = this.aggregateDistributionComponent(distributionComponents);; + }; + this.$scope.service.getDistributionsComponent(distribution.distributionID).then(onSuccess, onError); + }; + + this.$scope.getStatusCount = (distributionComponent:Array):any => { + return _.countBy(distributionComponent, 'status') + }; + + this.$scope.getUrlName = (url:string):string =>{ + let urlName:string = _.last(url.split('/')); + return urlName; + }; + + this.$scope.markAsDeployed = (distribution: Models.Distribution): void => { + let onError = (response) => { + console.info('onError markAsDeployed',response); + }; + let onSuccess = (result: any) => { + distribution.deployementStatus = 'Deployed'; + }; + this.$scope.service.markAsDeployed(distribution.distributionID).then(onSuccess, onError); + + }; + + this.$scope.initDistributions = (): void => { + let onError = (response) => { + console.info('onError initDistributions',response); + }; + let onSuccess = (distributions: Array) => { + this.$scope.distributions = distributions; + }; + this.$scope.service.getDistributionsList().then(onSuccess, onError); + }; + + this.$scope.initDistributions(); + + }; + + + private aggregateDistributionComponent = (distributionComponents:Array):any =>{ + let aggregateDistributions:Utils.Dictionary>> = new Utils.Dictionary>>(); + let tempAggregateDistributions:any= _.groupBy(distributionComponents,'omfComponentID'); + let aa = new Utils.Dictionary>(); + + let tempAggregate:any; + _.forEach(tempAggregateDistributions,(distributionComponents:Array,omfComponentID:string)=>{ + + let urls:any = _.groupBy(distributionComponents,'url'); + aggregateDistributions.setValue(omfComponentID,urls); + // aggregateDistributions[omfComponentID] = ; + + }); + console.log(aggregateDistributions); + return aggregateDistributions; + }; + + + } +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/distribution-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/distribution-view.html new file mode 100644 index 0000000000..1ab0f1e111 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/distribution-view.html @@ -0,0 +1,171 @@ +
+
+
DISTRIBUTION
+
+
+ + +
+
+
+ + + +
+
    +
  • +
    +
    +
    +
    +
    +
    Distribution ID
    +
    +
    +
    +
    +
    +
    +
    +
    Time[UTC]:
    +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    Total Artifacts:
    +
    Notified:
    +
    Downloaded:
    +
    Deployed:
    +
    Not Notified:
    +
    Errors:
    +
    +
    +
    + +
      + +
    • +
      +
      +
      +
      {{omfComponentID}} {{(statusCount.NOT_NOTIFIED || 0) + (statusCount.NOTIFIED || 0) }} +
      +
      Notified:
      +
      Downloaded:
      +
      Deployed:
      +
      Not Notified:
      +
      Errors:
      +
      +
      +
      +
      +
      +
      +
      Component ID
      +
      Artifact Name
      +
      URL
      +
      Time(UTC)
      +
      Status
      +
      + +
      +
      +
      + {{urlList[0].omfComponentID}} +
      +
      + {{getUrlName(urlList[0].url)}} +
      +
      +
      {{urlList[0].url}}
      +
      +
      +
      +
      +
      {{urlList[0].status}}
      +
      + + +
      +
      +
        +
      • + + {{distributionComponent.status}} + Reason: Component has determined artifact is not needed. + Reason: {{distributionComponent.errorReason}} +
        • +
      +
      +
      +
      +
      +
      +
      • +
    +
    • +
+
+ + +
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/distribution.less b/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/distribution.less new file mode 100644 index 0000000000..8ad8c1793e --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/distribution.less @@ -0,0 +1,361 @@ + +.w-sdc-distribution-view { + text-align: left; + + .g_1; + min-height: 500px; + + .w-sdc-distribution-view-distributed-green-text { + .l_9; + .bold; + } + .w-sdc-distribution-view-distributed-error-red-text { + .h_9; + .bold; + } + + .bg_c; + vertical-align: top; + padding: 30px 10px; + width: 100%; + + .w-sdc-distribution-view-header { + display: flex; + -webkit-justify-content: space-between; + margin: 0 25px 5px 40px; + + .header-spacer { + flex-grow: 5; + } + } + + .top-search { + position: relative; + input { + &.search-text { + height: 26px; + line-height: 26px; + margin: 0 18px 4px 20px; + padding-right: 25px; + } + + } + .magnification { + top: 8px; + right: 25px; + } + } + + .w-sdc-distribution-view-content { + .perfect-scrollbar; + padding: 0 25px 0 0px; + margin-bottom: 25px; + height: 700px; + overflow: hidden; + position: relative; + + } + + .w-sdc-distribution-view-title { + .s_14_r; + + line-height: 30px; + + span { + padding-left: 5px; + } + } + + .blue-font { + .a_14_m; + + } + + .red-font { + .q_14_m; + } + + .w-sdc-distribution-view-block { + div { + display: inline-block; + } + } + + .w-sdc-distribution-view-content-section { + ul { + list-style-type: none; + } + + .distribution-bth { + .hand; + &.disabled { + cursor: none; + } + } + + .copy-link { + padding-right: 19px; + margin-left: 8px; + cursor: pointer; + + } + + .w-sdc-distribute-row-extends { + border-Left: solid 4px transparent; + &.extends { + border-left: solid 4px @main_color_c; + border-bottom: 1px solid @border_color_f; + margin-bottom: 10px; + } + } + .w-sdc-distribute-parent-block { + border: 1px solid @main_color_o;; + width: 100%; + margin-bottom: 6px; + + .status-icon { + vertical-align: middle; + margin-bottom: 4px; + } + + &.extends { + background-color: @tlv_color_t; + } + + :not(.disable-hover):hover { + background-color: @tlv_color_u; + } + + .title-section { + display: inline-block; + margin-right: 10px; + flex-basis: 0; + } + + .title { + .l_12_m; + font-weight: bold; + } + .w-sdc-distribute-content { + display: flex; + align-items: center; + justify-content: space-between; + margin-left: 10px; + } + + .w-sdc-distribution-arrow-btn { + .sprite-new; + .arrow-up-small; + margin: 0 6px; + } + .extends.w-sdc-distribution-arrow-btn { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); + } + + .w-sdc-distribute-row { + display: flex; + align-items: center; + justify-content: space-between; + + .w-sdc-distribute-row-content { + margin: 15px 31px 10px 0; + width: 100%; + .w-sdc-distribute-status-block { + border-top: solid 1px @main_color_o; + } + .item-1 { + flex-grow: 2; + } + .item-2 { + flex-grow: 1; + } + .item-3 { + flex-grow: 1; + } + .item-4 { + flex-grow: 1; + } + .item-5 { + flex-grow: 1; + } + } + } + + .w-sdc-distribute-status-block { + display: flex; + align-items: center; + justify-content: space-between; + margin: 10px 5px 0 5px; + padding: 5px 5px 0 5px;; + width: 100%; + div { + border-left: 1px solid @main_color_o; + padding: 0 12px; + } + + .link { + .a_14_m; + cursor: pointer; + &:hover{ + text-decoration: underline; + .b_14_m; + } + } + + span { + padding: 2px; + } + + .deployed { + margin-left: 10px; + .sprite-new; + .success-circle-small; + } + + .error { + .q_14_m; + margin-left: 10px; + .sprite-new; + .error-icon; + } + + .status-item-1 { + border-left: 0; + } + + .status-item-6 { + flex-grow: 1; + border-left: none; + text-align: right; + } + } + + .w-sdc-distribute-components-block { + padding: 0; + padding-bottom: 5px; + list-style-type: none; + + li { + margin: 5px 2px; + } + + .omf-component-row { + border: 1px solid @border_color_f; + padding-left: 3px; + background-color: white; + margin: 0 30px; + &.extends { + padding-left: 0; + border-Left: solid 4px @main_color_c; + + } + + .w-sdc-distribute-status-block { + margin: 5px; + padding: 5px; + } + + .blue-font { + .a_16_m; + + } + + &:hover { + background-color: @tlv_color_u; + } + + } + + } + + .w-sdc-distribute-omfComponent-block { + background-color: white; + margin: 0 30px; + padding: 8px 10px; + border: 1px solid @border_color_f; + + .omfComponent-table-head { + margin-bottom: 5px; + background-color: @tlv_color_u; + .title { + padding: 6px 10px; + border-left: 1px solid @border_color_f; + &:first-child { + border: none; + } + } + } + + .omfComponent-table-row { + border-bottom: 1px solid @border_color_f; + &.row-0 { + border-top: 1px solid @border_color_f; + } + .w-sdc-distribute-cell { + padding: 10px; + border-left: 1px solid @border_color_f; + &:last-child { + border-right: 1px solid @border_color_f; + } + &.item-5 { + .m_14_m; + } + } + } + + .distribution-url { + + } + + .w-sdc-distribute-row.extends { + border-Left: solid 4px @main_color_c; + .item-1 { + border: none; + } + + } + + .item-1 { + width: 20%; + } + .item-2 { + width: 20%; + } + + .item-3 { + width: 24%; + display: flex; + } + + .item-4 { + width: 18%; + } + + .item-5 { + width: 18%; + } + } + + .w-sdc-distribute-url-block { + + padding: 10px 15px; + border: none; + border-right: 1px solid @border_color_f; + border-bottom: 1px solid @border_color_f; + width: 100%; + li { + border: none; + span { + padding-right: 30px; + .m_12_r; + } + } + + } + } + + } +} + diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/general/general-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/general/general-view-model.ts new file mode 100644 index 0000000000..f613648596 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/general/general-view-model.ts @@ -0,0 +1,379 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +/// +module Sdc.ViewModels { + + 'use strict'; + import Resource = Sdc.Models.Components.Resource; + import ISubCategory = Sdc.Models.ISubCategory; + import IMainCategory = Sdc.Models.IMainCategory; + import ResourceType = Sdc.Utils.Constants.ResourceType; + + export class Validation { + validationPattern:RegExp; + contactIdValidationPattern:RegExp; + tagValidationPattern:RegExp; + vendorValidationPattern:RegExp; + commentValidationPattern:RegExp; + projectCodeValidationPattern:RegExp; + } + + export interface IGeneralScope extends IWorkspaceViewModelScope { + validation:Validation; + editForm:ng.IFormController; + categories: Array; + latestCategoryId: string; + latestVendorName: string; + importedFileExtension:any; + isCreate:boolean; + isShowFileBrowse:boolean; + isShowOnboardingSelectionBrowse:boolean; + importedToscaBrowseFileText:string; + importCsarProgressKey:string; + browseFileLabel:string; + + + onToscaFileChange():void + validateField(field:any):boolean; + validateName(isInit:boolean): void; + calculateUnique(mainCategory:string, subCategory:string):string; // Build unique string from main and sub category + onVendorNameChange(oldVendorName:string): void; + convertCategoryStringToOneArray(category:string, subcategory:string):Array; + onCategoryChange():void; + openOnBoardingModal():void; + initCategoreis():void; + } + + export class GeneralViewModel { + + static '$inject' = [ + '$scope', + 'Sdc.Services.CacheService', + 'ValidationPattern', + 'ContactIdValidationPattern', + 'TagValidationPattern', + 'VendorValidationPattern', + 'CommentValidationPattern', + 'ValidationUtils', + 'sdcConfig', + 'ProjectCodeValidationPattern', + '$state', + 'ModalsHandler', + 'EventListenerService', + 'Notification', + 'Sdc.Services.ProgressService', + '$interval', + '$filter', + '$timeout' + ]; + + constructor(private $scope:IGeneralScope, + private cacheService:Services.CacheService, + private ValidationPattern:RegExp, + private ContactIdValidationPattern:RegExp, + private TagValidationPattern:RegExp, + private VendorValidationPattern:RegExp, + private CommentValidationPattern:RegExp, + private ValidationUtils:Sdc.Utils.ValidationUtils, + private sdcConfig:Models.IAppConfigurtaion, + private ProjectCodeValidationPattern:RegExp, + private $state:ng.ui.IStateService, + private ModalsHandler: Sdc.Utils.ModalsHandler, + private EventListenerService:Services.EventListenerService, + private Notification:any, + private progressService:Sdc.Services.ProgressService, + protected $interval:any, + private $filter:ng.IFilterService, + private $timeout:ng.ITimeoutService + ){ + + this.registerToSuccessSaveEvent(); + this.initScopeValidation(); + this.initScopeMethods(); + this.initScope(); + this.$scope.updateSelectedMenuItem(); + } + + private registerToSuccessSaveEvent = ():void => { + // Register to save success to show notification to user. + this.EventListenerService.registerObserverCallback(Utils.Constants.EVENTS.ON_WORKSPACE_SAVE_BUTTON_SUCCESS, this.showSuccessNotificationMessage); + + }; + + private showSuccessNotificationMessage = ():void => { + // In case we import CSAR. Notify user when import VF was finished. + this.Notification.success({ + message: this.$filter('translate')("IMPORT_VF_MESSAGE_CREATE_FINISHED_DESCRIPTION"), + title: this.$filter('translate')("IMPORT_VF_MESSAGE_CREATE_FINISHED_TITLE") + }); + + //set the form Pristine after save to reset the unsaved changes (whit for dom reload) + this.$timeout(()=> { + if(this.$scope.editForm) { + this.$scope.editForm.$setPristine(); + } + }, 500); + + }; + + + + private initScopeValidation = ():void => { + this.$scope.validation = new Validation(); + this.$scope.validation.validationPattern = this.ValidationPattern; + this.$scope.validation.contactIdValidationPattern = this.ContactIdValidationPattern; + this.$scope.validation.tagValidationPattern = this.TagValidationPattern; + this.$scope.validation.vendorValidationPattern = this.VendorValidationPattern; + this.$scope.validation.commentValidationPattern = this.CommentValidationPattern; + this.$scope.validation.projectCodeValidationPattern = this.ProjectCodeValidationPattern; + }; + + private initScope = ():void => { + + // Work around to change the csar version + if (this.cacheService.get(Utils.Constants.CHANGE_COMPONENT_CSAR_VERSION_FLAG)) { + (this.$scope.component).csarVersion = this.cacheService.get(Utils.Constants.CHANGE_COMPONENT_CSAR_VERSION_FLAG); + } + + this.$scope.importedToscaBrowseFileText = this.$scope.component.name + " (" + (this.$scope.component).csarVersion + ")"; + this.$scope.importCsarProgressKey = "importCsarProgressKey"; + this.$scope.browseFileLabel = this.$scope.component.isResource() && (this.$scope.component).resourceType===ResourceType.VF? "Upload file" : "Upload VFC"; + this.$scope.progressService = this.progressService; + + // Workaround to short vendor name to 25 chars + // onboarding send 27 chars, and the validation pattern is 25 chars. + if (this.$scope.component.vendorName){ + this.$scope.component.vendorName = this.$scope.component.vendorName.substr(0, 25); + } + + // Init UIModel + this.$scope.component.tags = _.without(this.$scope.component.tags, this.$scope.component.name); + + // Init categories + this.$scope.initCategoreis(); + + // Init the decision if to show file browse. + this.$scope.isShowFileBrowse = false; + if (this.$scope.component.isResource()){ + let resource:Sdc.Models.Components.Resource = this.$scope.component; + console.log(resource.name + ": " + resource.csarUUID); + if (resource.importedFile){ // Component has imported file. + this.$scope.isShowFileBrowse = true; + } + if (this.$scope.isEditMode() && resource.resourceType== ResourceType.VF && !resource.csarUUID){ + this.$scope.isShowFileBrowse = true; + } + }; + + // Init the decision if to show onboarding + this.$scope.isShowOnboardingSelectionBrowse = false; + if (this.$scope.component.isResource() && + this.$scope.isEditMode() && + (this.$scope.component).resourceType== ResourceType.VF && + (this.$scope.component).csarUUID) { + this.$scope.isShowOnboardingSelectionBrowse = true; + } + + //init file extensions based on the file that was imported. + if (this.$scope.component.isResource() && (this.$scope.component).importedFile){ + let fileName:string = (this.$scope.component).importedFile.filename; + let fileExtension:string = fileName.split(".").pop(); + if (this.sdcConfig.csarFileExtension.indexOf(fileExtension.toLowerCase()) !== -1){ + this.$scope.importedFileExtension = this.sdcConfig.csarFileExtension; + (this.$scope.component).importedFile.filetype="csar"; + } else if (this.sdcConfig.toscaFileExtension.indexOf(fileExtension.toLowerCase()) !== -1){ + (this.$scope.component).importedFile.filetype="yaml"; + this.$scope.importedFileExtension = this.sdcConfig.toscaFileExtension; + } + }else if(this.$scope.isEditMode()&& (this.$scope.component).resourceType === ResourceType.VF){ + this.$scope.importedFileExtension = this.sdcConfig.csarFileExtension; + //(this.$scope.component).importedFile.filetype="csar"; + } + + this.$scope.setValidState(true); + + this.$scope.calculateUnique = (mainCategory:string, subCategory:string):string => { + let uniqueId:string = mainCategory; + if (subCategory) { + uniqueId += "_#_" + subCategory; // Set the select category combobox to show the selected category. + } + return uniqueId; + }; + + //TODO remove this after handling contact in UI + if(this.$scope.component.isProduct() && this.$scope.isCreateMode()){ + (this.$scope.component).contacts = []; + (this.$scope.component).contacts.push(this.cacheService.get("user").userId); + }else if(this.$scope.isCreateMode()){ + this.$scope.component.contactId = this.cacheService.get("user").userId; + } + + }; + + // Convert category string MainCategory_#_SubCategory to Array with one item (like the server except) + private convertCategoryStringToOneArray = ():Array => { + let tmp = this.$scope.component.selectedCategory.split("_#_"); + let mainCategory = tmp[0]; + let subCategory = tmp[1]; + + // Find the selected category and add the relevant sub category. + let selectedMainCategory:IMainCategory = _.find(this.$scope.categories, function (item) { + return item["name"] === mainCategory; + + }); + + let mainCategoryClone = angular.copy(selectedMainCategory); + if (subCategory) { + let selectedSubcategory = _.find(selectedMainCategory.subcategories, function (item) { + return item["name"] === subCategory; + }); + mainCategoryClone['subcategories'] = [angular.copy(selectedSubcategory)]; + } + let tmpSelected = mainCategoryClone; + + let result:Array = []; + result.push(tmpSelected); + + return result; + }; + + private updateComponentNameInBreadcrumbs = ():void => { + //update breadcrum after changing name + this.$scope.breadcrumbsModel[1].updateSelectedMenuItemText(this.$scope.component.getComponentSubType() + ': ' + this.$scope.component.name); + this.$scope.updateMenuComponentName(this.$scope.component.name); + }; + + private initScopeMethods = ():void => { + + this.$scope.initCategoreis = ():void => { + if (this.$scope.componentType === Utils.Constants.ComponentType.RESOURCE) { + this.$scope.categories = this.cacheService.get('resourceCategories'); + + } + if (this.$scope.componentType === Utils.Constants.ComponentType.SERVICE) { + this.$scope.categories = this.cacheService.get('serviceCategories'); + } + } + + this.$scope.validateField = (field:any):boolean => { + if (field && field.$dirty && field.$invalid) { + return true; + } + return false; + }; + + this.$scope.openOnBoardingModal=():void => { + let csarUUID = (this.$scope.component).csarUUID; + this.ModalsHandler.openOnboadrdingModal('Update', csarUUID).then(()=>{ + // OK + this.$scope.uploadFileChangedInGeneralTab(); + }, ()=>{ + // ERROR + }); + }; + + this.$scope.validateName = (isInit:boolean):void => { + if (isInit === undefined) { + isInit = false; + } + + let name = this.$scope.component.name; + if (!name || name === "") { + if (this.$scope.editForm + && this.$scope.editForm["componentName"] + && this.$scope.editForm["componentName"].$error) { + + // Clear the error name already exists + this.$scope.editForm["componentName"].$setValidity('nameExist', true); + } + + return; + } + //????????????????????????? + let subtype:string = Utils.Constants.ComponentType.RESOURCE == this.$scope.componentType ? this.$scope.component.getComponentSubType() : undefined; + + let onFailed = (response) => { + //console.info('onFaild', response); + //this.$scope.isLoading = false; + }; + + let onSuccess = (validation:Models.IValidate) => { + this.$scope.editForm["componentName"].$setValidity('nameExist', validation.isValid); + if(validation.isValid){ + //update breadcrumb after changing name + this.updateComponentNameInBreadcrumbs(); + } + }; + + if (isInit) { + // When page is init after update + if (this.$scope.component.name !== this.$scope.originComponent.name) { + if (!(this.$scope.componentType===Utils.Constants.ComponentType.RESOURCE && (this.$scope.component).csarUUID!==undefined) + ){ + this.$scope.component.validateName(name, subtype).then(onSuccess, onFailed); + } + } + } else { + // Validating on change (has debounce) + if (this.$scope.editForm + && this.$scope.editForm["componentName"] + && this.$scope.editForm["componentName"].$error + && !this.$scope.editForm["componentName"].$error.pattern + && this.$scope.component.name !== this.$scope.originComponent.name + ) { + if (!(this.$scope.componentType===Utils.Constants.ComponentType.RESOURCE && (this.$scope.component).csarUUID!==undefined) + ){ + this.$scope.component.validateName(name, subtype).then(onSuccess, onFailed); + } + } else if (this.$scope.component.name === this.$scope.originComponent.name) { + // Clear the error + this.$scope.editForm["componentName"].$setValidity('nameExist', true); + } + } + }; + + this.$scope.$watchCollection('component.name', (newData:any):void => { + this.$scope.validateName(false); + }); + + // Notify the parent if this step valid or not. + this.$scope.$watch("editForm.$valid", (newVal, oldVal) => { + this.$scope.setValidState(newVal); + }); + + this.$scope.$watch("editForm.$dirty", (newVal, oldVal) => { + if (newVal!==oldVal) { + this.$state.current.data.unsavedChanges = newVal && !this.$scope.isCreateMode(); + } + }); + + this.$scope.onCategoryChange = ():void => { + this.$scope.component.categories = this.convertCategoryStringToOneArray(); + this.$scope.component.icon = Utils.Constants.DEFAULT_ICON; + }; + + this.$scope.onVendorNameChange = (oldVendorName:string):void => { + if (this.$scope.component.icon === oldVendorName) { + this.$scope.component.icon = Utils.Constants.DEFAULT_ICON; + } + }; + }; + } +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/general/general-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/general/general-view.html new file mode 100644 index 0000000000..1c1d4fedad --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/general/general-view.html @@ -0,0 +1,307 @@ +
+ +
+ +
+ + +
+ + +
+ + +
+ +
+ {{(fileModel && fileModel.filename) || importedToscaBrowseFileText}} +
+ +
Browse
+
+
+ +
+ + + + + +
+ + +
+ +
+ + +
+ + + +
+ + + + + +
+
+ + + +
+ + + +
+ + + + + +
+
+ + + +
+ + + + +
+ + + +
+
+ + + +
+ + + + +
+ +
+
+ + + +
+ + + +
+ + +
+
+ + +
+ + + +
+ + + +
+ +
+ + + + +
+ + + +
+ + + +
+
+ + + + +
+ +
+ + +
+ + + + +
+ + +
+
+ + + +
+ + + + +
+ + +
+
+ + + +
+
+ +
+ +
+ +
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/general/general.less b/catalog-ui/app/scripts/view-models/workspace/tabs/general/general.less new file mode 100644 index 0000000000..1861d02e98 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/general/general.less @@ -0,0 +1,64 @@ +.sdc-workspace-general-step { + + .w-sdc-form { + padding: 0; + + .i-sdc-form-file-upload{ + input[type="button"] { + cursor: pointer; + display: block; + filter: alpha(opacity=0); + width: 100px; + height: 30px; + opacity: 0; + position: absolute; + right: 0; + text-align: right; + top: 0; + } + + .file-upload-browse-btn { + .noselect; + .bg_n; + padding: 4px 6px; + cursor: pointer; + z-index: 999; + width: 100px; + height: 28px; + text-align: center; + + &.disabled { + cursor: default; + } + } + } + + .w-sdc-form-section-container { + text-align: center; + } + + .i-sdc-form-item { + &.upload { + margin-top: 0; + width: auto; + padding: 10px; + } + } + + .template-desc { + border: 1px dashed @border_color_f; + height: 130px; + overflow: hidden; + padding: 10px 6px 6px 6px; + margin-top: 10px; + } + + .sdc-tag .tag { + max-width: 225px; + } + + } + +} + + diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/icons/icons-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/icons/icons-view-model.ts new file mode 100644 index 0000000000..a591641d0a --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/icons/icons-view-model.ts @@ -0,0 +1,131 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +/** + * Created by obarda on 4/4/2016. + */ +/// +module Sdc.ViewModels { + 'use strict'; + + export interface IIconsScope extends IWorkspaceViewModelScope { + icons : Array; + iconSprite: string; + setComponentIcon(iconSrc:string): void; + } + + export class IconsViewModel { + + static '$inject' = [ + '$scope', + 'Sdc.Services.AvailableIconsService', + 'ComponentFactory', + '$state' + ]; + + constructor(private $scope:IIconsScope, + private availableIconsService:Services.AvailableIconsService, + private ComponentFactory:Sdc.Utils.ComponentFactory, + private $state:ng.ui.IStateService) { + + + this.initScope(); + this.initIcons(); + this.$scope.updateSelectedMenuItem(); + this.$scope.iconSprite = this.$scope.component.iconSprite; + + if (this.$scope.component.isResource()) { + this.initVendor(); + } + } + + private initialIcon:string = this.$scope.component.icon; + private initIcons = ():void => { + + // For subcategories that where created by admin, there is no icons + this.$scope.icons = new Array(); + if (this.$scope.component.categories && this.$scope.component.categories.length > 0) { + + _.forEach(this.$scope.component.categories, (category:Models.IMainCategory):void => { + if (category.icons) { + this.$scope.icons = this.$scope.icons.concat(category.icons); + } + if (category.subcategories) { + _.forEach(category.subcategories, (subcategory:Models.ISubCategory):void => { + if (subcategory.icons) { + this.$scope.icons = this.$scope.icons.concat(subcategory.icons); + } + }); + } + }); + } + + if (this.$scope.component.isResource()) { + let resourceType:string = this.$scope.component.getComponentSubType(); + if (resourceType === 'VL') { + this.$scope.icons = ['vl']; + } + if (resourceType === 'CP') { + this.$scope.icons = ['cp']; + } + } + + if (this.$scope.icons.length === 0) { + this.$scope.icons = this.availableIconsService.getIcons(this.$scope.component.componentType); + } + //we always add the defual icon to the list + this.$scope.icons.push('defaulticon'); + }; + + private initVendor = ():void => { + let vendors:Array = this.availableIconsService.getIcons(this.$scope.component.componentType).slice(5, 19); + let vendorName = this.$scope.component.vendorName.toLowerCase(); + if ('at&t' === vendorName) { + vendorName = 'att'; + } + if ('nokia' === vendorName) { + vendorName = 'nokiasiemens'; + } + + let vendor:string = _.find(vendors, (vendor:string)=> { + return vendor.replace(/[_]/g, '').toLowerCase() === vendorName; + }); + + if (vendor && this.$scope.icons.indexOf(vendor) === -1) { + this.$scope.icons.push(vendor); + } + }; + + private initScope():void { + this.$scope.icons = []; + this.$scope.setValidState(true); + //if(this.$scope.component.icon === Utils.Constants.DEFAULT_ICON){ + // //this.$scope.setValidState(false); + //} + + this.$scope.setComponentIcon = (iconSrc:string):void => { + this.$state.current.data.unsavedChanges = !this.$scope.isViewMode() && (iconSrc != this.initialIcon); + this.$scope.component.icon = iconSrc; + // this.$scope.setValidState(true); + }; + + } + + } +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/icons/icons-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/icons/icons-view.html new file mode 100644 index 0000000000..aac14e0e84 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/icons/icons-view.html @@ -0,0 +1,26 @@ +
+ +
+ +
+
+
+
+
Select one of the icons below for the asset
+
+
+
+
+
+
+
+
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/icons/icons.less b/catalog-ui/app/scripts/view-models/workspace/tabs/icons/icons.less new file mode 100644 index 0000000000..65f946f395 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/icons/icons.less @@ -0,0 +1,65 @@ +.workspace-icons { + + width: 89%; + display: inline-block; + text-align: center; + align-items: center; + + .w-sdc-form { + padding-top: 0px; + padding-bottom: 0px; + .selected-icon-container { + text-align: left; + border: 1px solid #cfcfcf; + clear: both; + margin-bottom: 30px; + padding: 2px 0px 5px 5px; + .selected-icon { + margin: 8px 5px 0px 6px; + } + } + + .suggested-icons-container { + text-align: left; + border: 1px solid #cfcfcf; + clear: both; + padding: 2px 0px 5px 5px; + height: 340px; + margin-bottom: 0px; + + .suggested-icon-wrapper { + margin: 8px 5px 0px 6px; + display: inline-block; + + &.selected { + border: 2px solid @main_color_a; + border-radius: 35px; + display: inline-block; + line-height: 0px; + padding: 3px; + } + + } + .suggested-icon { + // margin: 8px 5px 0px 6px; + display: inline-block; + &.disable{ + opacity: 0.4; + } + } + } + + .icons-label { + float: left; + } + + .icons-text { + text-align: left; + line-height: 32px; + padding-left: 10px; + width: 100%; + border: 1px solid #cfcfcf; + border-bottom: none; + } + } +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/information-artifacts/information-artifacts-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/information-artifacts/information-artifacts-view-model.ts new file mode 100644 index 0000000000..3a048c1879 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/information-artifacts/information-artifacts-view-model.ts @@ -0,0 +1,150 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +/// +module Sdc.ViewModels { + 'use strict'; + import ArtifactModel = Sdc.Models.ArtifactModel; + + export interface IInformationArtifactsScope extends IWorkspaceViewModelScope { + artifacts: Array; + tableHeadersList: Array; + artifactType: string; + isResourceInstance:boolean; + downloadFile:Models.IFileDownload; + isLoading:boolean; + sortBy:string; + reverse:boolean; + + getTitle(): string; + addOrUpdate(artifact:Models.ArtifactModel): void; + delete(artifact:Models.ArtifactModel): void; + download(artifact:Models.ArtifactModel): void; + clickArtifactName(artifact:any):void; + openEditEnvParametersModal(artifactResource:Models.ArtifactModel):void; + sort(sortBy:string): void; + showNoArtifactMessage():boolean; + } + + export class InformationArtifactsViewModel { + + static '$inject' = [ + '$scope', + '$filter', + '$modal', + '$templateCache', + 'Sdc.Services.SharingService', + '$state', + 'sdcConfig', + 'ModalsHandler' + ]; + + constructor(private $scope:IInformationArtifactsScope, + private $filter:ng.IFilterService, + private $modal:ng.ui.bootstrap.IModalService, + private $templateCache:ng.ITemplateCacheService, + private sharingService:Sdc.Services.SharingService, + private $state:any, + private sdcConfig:Models.IAppConfigurtaion, + private ModalsHandler:Utils.ModalsHandler) { + this.initScope(); + this.$scope.updateSelectedMenuItem(); + } + + + private getMappedObjects():any { + return { + normal: this.$scope.component.artifacts + }; + } + + private initScope = ():void => { + let self = this; + this.$scope.isLoading = false; + this.$scope.sortBy = 'artifactDisplayName'; + this.$scope.reverse = false; + this.$scope.setValidState(true); + this.$scope.artifactType = 'normal'; + this.$scope.getTitle = ():string => { + return this.$filter("resourceName")(this.$scope.component.name) + ' Artifacts'; + + }; + + this.$scope.tableHeadersList = [ + {title: 'Name', property: 'artifactDisplayName'}, + {title: 'Type', property: 'artifactType'} + ]; + + this.$scope.artifacts = _.values(this.$scope.component.artifacts); + this.$scope.sort = (sortBy:string):void => { + this.$scope.reverse = (this.$scope.sortBy === sortBy) ? !this.$scope.reverse : false; + this.$scope.sortBy = sortBy; + }; + + + this.$scope.addOrUpdate = (artifact:Models.ArtifactModel):void => { + artifact.artifactGroupType = 'INFORMATIONAL'; + this.ModalsHandler.openWizardArtifactModal(artifact, this.$scope.component).then(() => { + this.$scope.artifacts = _.values(this.$scope.component.artifacts); + }); + }; + + this.$scope.showNoArtifactMessage = ():boolean => { + let artifacts:any = []; + artifacts = _.filter(this.$scope.artifacts, (artifact:Models.ArtifactModel)=> { + return artifact.esId; + }); + + if (artifacts.length === 0) { + return true; + } + return false; + }; + + this.$scope.delete = (artifact:Models.ArtifactModel):void => { + + let onOk = ():void => { + this.$scope.isLoading = true; + let onSuccess = ():void => { + this.$scope.isLoading = false; + this.$scope.artifacts = _.values(this.$scope.component.artifacts); + }; + + let onFailed = (error:any):void => { + console.log('Delete artifact returned error:', error); + this.$scope.isLoading = false; + }; + + this.$scope.component.deleteArtifact(artifact.uniqueId, artifact.artifactLabel).then(onSuccess, onFailed); + }; + + let title:string = this.$filter('translate')("ARTIFACT_VIEW_DELETE_MODAL_TITLE"); + let message:string = this.$filter('translate')("ARTIFACT_VIEW_DELETE_MODAL_TEXT", "{'name': '" + artifact.artifactDisplayName + "'}"); + this.ModalsHandler.openConfirmationModal(title, message, false).then(onOk); + }; + + this.$scope.clickArtifactName = (artifact:any) => { + if (!artifact.esId) { + this.$scope.addOrUpdate(artifact); + } + + }; + } + } +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/information-artifacts/information-artifacts-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/information-artifacts/information-artifacts-view.html new file mode 100644 index 0000000000..790117b2fd --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/information-artifacts/information-artifacts-view.html @@ -0,0 +1,57 @@ +
+
Add
+
+
+
+
{{header.title}} + +
+
+
+
+ +
+ There are no information artifacts to display +
+
+ +
+ + {{artifact.artifactDisplayName}} +
+ +
+ {{artifact.artifactType}} +
+ +
+ + + +
+
+
+ + + +
+
+
+
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/information-artifacts/information-artifacts.less b/catalog-ui/app/scripts/view-models/workspace/tabs/information-artifacts/information-artifacts.less new file mode 100644 index 0000000000..d3fe14d945 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/information-artifacts/information-artifacts.less @@ -0,0 +1,47 @@ +.workspace-information-artifact { + width: 93%; + display: inline-block; + .w-sdc-classic-btn { + float: right; + margin-bottom: 10px; + } + + .table{ + height: 490px; + margin-bottom: 0; + } + + .table-container-flex { + margin-top: 27px; + + .item-opened{ + word-wrap: break-word; + } + + + .flex-item:nth-child(1) { + flex-grow: 15; + .hand; + span.table-arrow { + margin-right: 7px; + } + } + + .flex-item:nth-child(2) { + flex-grow: 6; + } + + .flex-item:nth-child(3) { + flex-grow: 3; + padding-top: 10px; + } + + .flex-item:nth-child(4) { + flex-grow: 1; + } + + } + +} + + diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/inputs.less b/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/inputs.less new file mode 100644 index 0000000000..76a82c69ee --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/inputs.less @@ -0,0 +1,286 @@ +.workspace-inputs { + + .sdc-workspace-container .w-sdc-main-right-container .w-sdc-main-container-body-content { + padding: 25px 8% 0px 8%; + } + + width: 100%; + display: flex; + + .text { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + padding-left: 15px; + } + + .title-text { + color: @main_color_m; + .f-type._13_m; + .bold; + } + + .title-blue-text { + color: @main_color_a; + .f-type._13_m; + + &.property-name-text { + padding-right: 13px; + border-right: 1px solid rgba(120, 136, 148, 0.26); + flex-grow: 1; + } + } + + .instance-name-text { + flex-grow: 1; + } + + ng-include { + width: 45%; + } + + .w-sdc-inputs-search { + padding: 10px 20px 20px 0; + white-space: nowrap; + position: relative; + width: 60%; + height: 64px; + + .inputs-search-icon { + top: 9px; + right: 11px; + } + + .magnification-white { + .sprite-new; + .search-white-icon; + .hand; + } + + .search-icon-container { + width: 35px; + height: 30px; + background-color: @main_color_a; + white-space: nowrap; + float: right; + position: relative; + bottom: 31px; + right: 1px; + border-radius: 0px 4px 4px 0px; + .hand + } + } + + .total-inputs-count { + width: 100%; + font-weight: bold; + text-align: left; + } + + .new-input-button { + margin: 9px 0 0 0; + } + + .w-sdc-inputs-search-input { + border: 1px solid @color_e; + .border-radius(4px); + height: 32px; + margin: 0; + padding: 0px 28px 3px 10px; + vertical-align: 4px; + width: 100%; + outline: none; + font-style: italic; + } + + .w-sdc-classic-btn { + float: right; + margin-bottom: 10px; + } + + .prop-to-input-button { + position: absolute; + top: 50%; + margin-right: -20px; + margin-bottom: -10px; + + } + + .property-row { + border-bottom: 1px solid @border_color_d; + padding-left: 10px; + .property-name-container { + display: flex; + flex-grow: 4; + } + + .type-schema-container { + flex-grow: 1; + border-left: 1px solid @border_color_d; + text-align: left; + line-height: 30px; + text-transform: capitalize; + width: 10px; + } + + } + + .table-container-flex { + + .flex-item { + line-height: 22px; + } + .expand-collapse-table-row { + + &.expanded { + .flex-container { + .expand-collapse-inputs-table-icon { + transform: rotate(180deg); + left: 0px; + } + } + } + + .data-row { + background: @tlv_color_u; + .hand; + align-items: center; + padding: 0 12px; + margin: 1px 0px 1px 0px; + min-height: 40px; + } + + .data-row:hover { + .bg_j; + } + + .input-row { + padding-left: 45px; + background: @tlv_color_t; + border: @main_color_o solid 1px; + align-items: center; + .hand; + margin: 1px 0px 1px 0px; + + &.service-input-row { + background: @tlv_color_u; + &.new-input { + background: @tlv_color_v; + } + } + &.selected { + background-color: @tlv_color_v; + } + .flex-item { + min-height: 60px; + padding: 0 15px; + } + .input-check-box { + padding-right: 10px; + margin-top: 9px; + } + &>.title-text{ + text-align: start; + padding: 4px 0 0 35px; + } + + .expand-collapse-inputs-table-icon{ + margin-top: 15px; + } + + } + + .input-row:hover { + .bg_j; + } + + + } + } + + .table { + height: 640px; + margin-bottom: 0; + clear: both; + + .empty-row { + padding: 3px; + } + + .flex-item { + line-height: 22px; + } + + .table-header { + + line-height: 14px; + background-color: @main_color_a; + color: @main_color_p; + text-align: left; + padding: 7px 5px 7px 10px; + .f-type._14_m; + } + .head { + background-color: #e6e6e6; + } + + .property-row:hover{ + background-color: @func_color_r; + } + + .body { + .scrollbar-container { + .perfect-scrollbar; + max-height: 610px; + } + + .expand-collapse-inputs-table-icon { + .hand; + .sprite-new; + .arrow-up; + transition: .3s all; + position: relative; + left: 8px; + border: none !important; + padding: 0px 10px 0px 10px; + } + + .table-col-text { + margin-left: 14px; + } + } + } + + .inputs-header { + width: 100%; + position: relative; + bottom: 31px; + } + + .inputs-tables-container { + width: 100%; + min-width: 100%; + display: flex; + } + + .inputs-button-container { + width: 8%; + min-width: 8%; + display: flex; + + .right-arrow-btn { + .sprite-new; + .blue-right-arrow-circle; + margin: auto; + cursor: pointer; + } + } + + .table-container-flex { + margin-top: 27px; + width: 46%; + min-width: 46%; + display: inline-block; + float: left; + } +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view-model.ts new file mode 100644 index 0000000000..2dc1b1d9ff --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view-model.ts @@ -0,0 +1,145 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +/// +module Sdc.ViewModels { + 'use strict'; + import Dictionary = Sdc.Utils.Dictionary; + import InputModel = Sdc.Models.InputModel; + + export interface IInputsViewModelScope extends IWorkspaceViewModelScope { + InstanceInputsProperties:Models.InstanceInputsPropertiesMapData; //this is tha map object that hold the selected inputs and the inputs we already used + vfInstancesList: Array; + component:Models.Components.Resource; + + onArrowPressed():void; + getInputPropertiesForInstance(instanceId:string, instance:Models.ComponentsInstances.ComponentInstance): ng.IPromise ; + loadInputPropertiesForInstance(instanceId:string, input:Models.InputModel): ng.IPromise ; + loadInputInputs(input:Models.InputModel): ng.IPromise; + } + + export class ResourceInputsViewModel { + + static '$inject' = [ + '$scope', + '$q' + ]; + + constructor(private $scope:IInputsViewModelScope, private $q: ng.IQService) { + this.initScope(); + } + + private initScope = (): void => { + + this.$scope.InstanceInputsProperties = new Models.InstanceInputsPropertiesMapData(); + this.$scope.vfInstancesList = this.$scope.component.componentInstances; + + // Need to cast all inputs to InputModel for the search to work + let tmpInputs:Array = new Array(); + _.each(this.$scope.component.inputs, (input):void => { + tmpInputs.push(new Models.InputModel(input)); + }); + this.$scope.component.inputs = tmpInputs; + // This function is not supported for resource + //this.$scope.component.getComponentInputs(); + + /* + * When clicking on instance input in the left or right table, this function will load all properties of the selected input + */ + this.$scope.getInputPropertiesForInstance = (instanceId:string, instance:Models.ComponentsInstances.ComponentInstance): ng.IPromise => { + let deferred = this.$q.defer(); + instance.properties = this.$scope.component.componentInstancesProperties[instanceId]; + deferred.resolve(true); + return deferred.promise; + }; + + /* + * When clicking on input in the right table, this function will load all inputs of the selected input + */ + this.$scope.loadInputInputs = (input:Models.InputModel): ng.IPromise => { + let deferred = this.$q.defer(); + + let onSuccess = () => { deferred.resolve(true); }; + let onError = () => { deferred.resolve(false); }; + + if(!input.inputs) { + this.$scope.component.getResourceInputInputs(input.uniqueId).then(onSuccess, onError); + } else { + deferred.resolve(true); + } + return deferred.promise; + }; + + /* + * When clicking on instance input in the left or right table, this function will load all properties of the selected input + */ + this.$scope.loadInputPropertiesForInstance = (instanceId:string, input:Models.InputModel): ng.IPromise => { + let deferred = this.$q.defer(); + + let onSuccess = (properties:Array) => { + input.properties = properties; + deferred.resolve(true); + }; + + let onError = () => { + deferred.resolve(false) + }; + + if(!input.properties) { + this.$scope.component.getComponentInstanceInputProperties(instanceId, input.uniqueId).then(onSuccess, onError); + } else { + deferred.resolve(true); + } + return deferred.promise; + }; + + /* + * When pressing the arrow, we create service inputs from the inputs selected + */ + this.$scope.onArrowPressed = ():void => { + let onSuccess = (inputsCreated: Array) => { + + //disabled all the inputs in the left table + _.forEach(this.$scope.InstanceInputsProperties, (properties:Array) => { + _.forEach(properties, (property:Models.PropertyModel) => { + property.isAlreadySelected = true; + }); + }); + + // Adding color to the new inputs (right table) + _.forEach(inputsCreated, (input) => { + input.isNew = true; + }); + + // Removing color to the new inputs (right table) + setTimeout(() => { + _.forEach(inputsCreated, (input) => { + input.isNew = false; + }); + this.$scope.$apply(); + }, 3000); + }; + + this.$scope.component.createInputsFormInstances(this.$scope.InstanceInputsProperties).then(onSuccess); + }; + + } + + } +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view.html new file mode 100644 index 0000000000..7cdf5a2fa4 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view.html @@ -0,0 +1,136 @@ +
+
+
+ +
+ +
+
+
+
VFC instances inputs
+
+
+ + + +
+
+
+ {{instance.name}} +
+
+ + + +
+ +
No properties to display
+ +
+
+
+ {{property.name}} + {{property.name}} +
+
+
+ {{property.type}} +
+
+
+
+ {{property.schema.property.type}} +
+
+ +
+
+ +
+ + +
+
+
+ +
+ +
+ +
+
+ +
+ +
+
+
+
+
Resource instance inputs
+ + +
+
{{resourceInput.name}}
+
+
+
+
+ Description: + {{resourceInput.description}} +
+
+
+
+ VF Instance: + {{resourceInput.name}} +
+
+ Type: + {{resourceInput.type}} +
+
+
+
+ + +
+
No properties to display
+
+
+
+ {{property.name}} + {{property.name}} +
+
+
+ {{property.type}} +
+
+
+
+ {{property.schema.property.type}} +
+
+
+
+
+ + +
+
+
+
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/resource-input/resource-inputs.less b/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/resource-input/resource-inputs.less new file mode 100644 index 0000000000..ebb32fbdb2 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/resource-input/resource-inputs.less @@ -0,0 +1,9 @@ +.workspace-inputs { + + .property-row { + .input-check-box { + text-align: center; + } + } + +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/service-input/service-inputs-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/service-input/service-inputs-view-model.ts new file mode 100644 index 0000000000..6c8391720a --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/service-input/service-inputs-view-model.ts @@ -0,0 +1,246 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +/// +module Sdc.ViewModels { + 'use strict'; + import IAngularEvent = angular.IAngularEvent; + import ComponentInstance = Sdc.Models.ComponentsInstances.ComponentInstance; + + + interface IServiceInputsViewModelScope extends IWorkspaceViewModelScope { + + vfInstancesList: Array; + selectedInputs:Array; + instanceInputsMap:Models.InstancesInputsMapData; //this is tha map object that hold the selected inputs and the inputs we already used + component:Models.Components.Service; + sdcMenu:Models.IAppMenu; + + onArrowPressed():void; + loadComponentInputs(): void; + loadInstanceInputs(instance:ComponentInstance): ng.IPromise ; + loadInputPropertiesForInstance(instanceId:string, input:Models.InputModel): ng.IPromise ; + loadInputInputs(input:Models.InputModel): ng.IPromise; + deleteInput(input:Models.InputModel):void + } + + export class ServiceInputsViewModel { + + static '$inject' = [ + '$scope', + '$q', + 'ModalsHandler' + ]; + + constructor(private $scope:IServiceInputsViewModelScope, + private $q: ng.IQService, + private ModalsHandler: Sdc.Utils.ModalsHandler) { + this.initScope(); + } + + /* + * When loading the screen again, we need to disabled the inputs that already created on the service, + * we do that by comparing the service input name, to the instance name + '_' + the resource instance input name. + */ + private disableEnableSelectedInputs = (instance: ComponentInstance): void => { + + let alreadySelectedInput = new Array(); + _.forEach(instance.inputs, (input:Models.InputModel) => { + let expectedServiceInputName = instance.normalizedName + '_' + input.name; + let inputAlreadyInService: Models.InputModel = _.find(this.$scope.component.inputs, (serviceInput: Models.InputModel) => { + return serviceInput.name === expectedServiceInputName; + }); + if(inputAlreadyInService) { + input.isAlreadySelected = true; + alreadySelectedInput.push(input); + } else { + input.isAlreadySelected = false; + } + }); + this.$scope.instanceInputsMap[instance.uniqueId] = alreadySelectedInput; + }; + + private initScope = (): void => { + + this.$scope.instanceInputsMap = new Models.InstancesInputsMapData(); + this.$scope.isLoading = true; + this.$scope.selectedInputs = new Array(); + + // Why do we need this? we call this later. + //this.$scope.component.getComponentInputs(); + + let onSuccess = (componentInstances:Array) => { + console.log("component instances loaded: ", componentInstances); + this.$scope.vfInstancesList = componentInstances; + this.$scope.isLoading = false; + }; + + //This function will get al component instance for the left table - in future the instances will be filter according to search text + this.$scope.component.getComponentInstancesFilteredByInputsAndProperties().then(onSuccess); + + // This function will get the service inputs for the right table + this.$scope.component.getComponentInputs(); + + + /* + * When clicking on instance in the left table, this function will load all instance inputs + */ + this.$scope.loadInstanceInputs = (instance:ComponentInstance): ng.IPromise => { + let deferred = this.$q.defer(); + + let onSuccess = (inputs:Array) => { + instance.inputs = inputs; + this.disableEnableSelectedInputs(instance); + deferred.resolve(true); + }; + + let onError = () => { + deferred.resolve(false); + }; + + if(!instance.inputs) { + this.$scope.component.getComponentInstanceInputs(instance.uniqueId, instance.componentUid).then(onSuccess, onError); + this.disableEnableSelectedInputs(instance); + } else { + deferred.resolve(true); + } + return deferred.promise; + }; + + /* + * When clicking on instance input in the left or right table, this function will load all properties of the selected input + */ + this.$scope.loadInputPropertiesForInstance = (instanceId:string, input:Models.InputModel): ng.IPromise => { + let deferred = this.$q.defer(); + + let onSuccess = (properties:Array) => { + input.properties = properties; + deferred.resolve(true); + }; + + let onError = () => { + deferred.resolve(false) + }; + + if(!input.properties) { + this.$scope.component.getComponentInstanceInputProperties(instanceId, input.uniqueId).then(onSuccess, onError); + } else { + deferred.resolve(true); + } + return deferred.promise; + }; + + /* + * When clicking on input in the right table, this function will load all inputs of the selected input + */ + this.$scope.loadInputInputs = (input:Models.InputModel): ng.IPromise => { + let deferred = this.$q.defer(); + + let onSuccess = () => { deferred.resolve(true); }; + let onError = () => { deferred.resolve(false); }; + + if(!input.inputs) { // Caching, if exists do not get it. + this.$scope.component.getServiceInputInputs(input.uniqueId).then(onSuccess, onError); + } else { + deferred.resolve(true); + } + return deferred.promise; + }; + + /* + * When pressing the arrow, we create service inputs from the inputs selected + */ + this.$scope.onArrowPressed = ():void => { + let onSuccess = (inputsCreated: Array) => { + + //disabled all the inputs in the left table + _.forEach(this.$scope.instanceInputsMap, (inputs:Array, instanceId:string) => { + _.forEach(inputs, (input:Models.InputModel) => { + input.isAlreadySelected = true; + }); + }); + + this.addColorToItems(inputsCreated); + }; + + this.$scope.component.createInputsFormInstances(this.$scope.instanceInputsMap).then(onSuccess); + }; + + this.$scope.deleteInput = (input: Models.InputModel):void => { + + var onDelete = ():void => { + var onSuccess = (deletedInput: Models.InputModel, componentInstanceId:string):void => { + // Remove from component.inputs the deleted input (service inputs) + var remainingServiceInputs:Array = _.filter(this.$scope.component.inputs, (input:Models.InputModel):boolean => { + return input.uniqueId !== deletedInput.uniqueId; + }); + this.$scope.component.inputs = remainingServiceInputs; + + // Find the instance that contains the deleted input, and set disable|enable the deleted input + var deletedInputComponentInstance:ComponentInstance = _.find(this.$scope.vfInstancesList, (instanceWithChildToDelete:ComponentInstance):boolean => { + return instanceWithChildToDelete.uniqueId === componentInstanceId; + }); + this.disableEnableSelectedInputs(deletedInputComponentInstance); + }; + + var onFailed = (error:any) : void => { + console.log("Error deleting input"); + }; + + this.addColorToItems([input]); + + // Get service inputs of input (so after delete we will know the component instance) + this.$scope.loadInputInputs(input).then((result:boolean):void=>{ + if (result && input.inputs.length>0) { + var componentInstanceId:string = input.inputs[0].componentInstanceId; + this.$scope.component.deleteServiceInput(input.uniqueId).then((deletedInput: Models.InputModel):void => { + onSuccess(deletedInput, componentInstanceId); + }, onFailed); + } + }); + }; + + // Get confirmation modal text from menu.json + var state = "deleteInput"; + var title:string = this.$scope.sdcMenu.alertMessages[state].title; + var message:string = this.$scope.sdcMenu.alertMessages[state].message.format([input.name]); + + // Open confirmation modal + this.ModalsHandler.openAlertModal(title, message).then(onDelete); + } + }; + + private addColorToItems = (inputsCreated:Array):void => { + + // Adding color to the new inputs (right table) + _.forEach(inputsCreated, (input) => { + input.isNew = true; + }); + + // Removing color to the new inputs (right table) + setTimeout(() => { + _.forEach(inputsCreated, (input) => { + input.isNew = false; + }); + this.$scope.$apply(); + }, 3000); + }; + + } +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/service-input/service-inputs-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/service-input/service-inputs-view.html new file mode 100644 index 0000000000..bf15a70322 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/service-input/service-inputs-view.html @@ -0,0 +1,205 @@ +
+
+
+ +
+ +
+
+
+
Resource instance inputs
+
+
+ + + +
+
+
+ {{instance.name}} +
+
+ + + +
+ + +
+
{{input.name}}
+
+
+
+ +
+ Description: + {{input.description}} +
+
+
+
+ VF Instance: + {{instance.name}} +
+
+ Type: + {{input.type}} +
+
+ +
+
+ + + + +
+
No properties to display
+ +
+
+
+ {{property.name}} + {{property.name}} +
+
+
+ {{property.type}} +
+
+
+
+ {{property.schema.property.type}} +
+
+
+
+
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+ +
+
+
+
+
Service Inputs
+ + +
+
{{serviceInput.name}}
+
+
+
+
+ Description: + {{serviceInput.description}} +
+
+
+
+ VF Instance: + {{serviceInput.name}} +
+
+ Type: + {{serviceInput.type}} +
+
+
+ +
+
+
+ + +
+ +
+
{{input.name}}
+
+
+
+
+ Description: + {{input.description}} +
+
+
+
+ VF Instance: + {{instance.componentInstanceName}} +
+
+ Type: + {{input.type}} +
+
+
+
+ + +
+
No properties to display
+
+
+
+ {{property.name}} + {{property.name}} +
+
+
+ {{property.type}} +
+
+
+
+ {{property.schema.property.type}} +
+
+
+
+
+
+ +
+
+
+
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/service-input/service-inputs.less b/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/service-input/service-inputs.less new file mode 100644 index 0000000000..11e613b56e --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/service-input/service-inputs.less @@ -0,0 +1,54 @@ +.workspace-inputs { + + .service-inputs-view { + + .table-container-flex { + width:100% !important; + } + + .table-loader { + position: relative; + top:215px; + } + + } + + .infinite-scroll { + + overflow-y: scroll; + overflow-x: hidden; + max-height: 400px; + } + + .class_with_css_props_leading_to_a_scroll { + height: 100%; + overflow-y: auto; + } + + .table-container-flex { + .expand-collapse-table-row { + .service-input-row { + padding-left: 15px; + border: none; + border-bottom: rgba(120, 136, 148, 0.26) solid 1px; + + .delete { + width: 50px; + padding: 0; + position: relative; + } + + .remove-input-icon { + position: absolute; + top: 12px; + right: 18px; + } + + .remove-input-icon:hover { + .delete-icon-hover; + } + } + } + } + +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/management-workflow/management-workflow-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/management-workflow/management-workflow-view-model.ts new file mode 100644 index 0000000000..2fab118378 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/management-workflow/management-workflow-view-model.ts @@ -0,0 +1,128 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +/// +module Sdc.ViewModels { + 'use strict'; + + export interface IManagementWorkflowViewModelScope extends IWorkspaceViewModelScope { + vendorModel:VendorModel; + } + + export class VendorModel { + artifacts: Models.ArtifactGroupModel; + serviceID: string; + readonly: boolean; + sessionID: string; + requestID: string; + diagramType: string; + participants:Array; + + constructor(artifacts: Models.ArtifactGroupModel, serviceID:string, readonly:boolean, sessionID:string, + requestID:string, diagramType:string, participants:Array){ + this.artifacts = artifacts; + this.serviceID = serviceID; + this.readonly = readonly; + this.sessionID = sessionID; + this.requestID = requestID; + this.diagramType = diagramType; + this.participants = participants; + } + } + + export class ManagementWorkflowViewModel { + + static '$inject' = [ + '$scope', + 'uuid4' + ]; + + constructor(private $scope:IManagementWorkflowViewModelScope, + private uuid4:any) { + + this.initScope(); + this.$scope.updateSelectedMenuItem(); + } + + + private static getParticipants():Array { + return [ + { + "id": "1", + "name": "Customer"}, + { + "id": "2", + "name": "CCD" + }, + { + "id": "3", + "name": "Infrastructure" + }, + { + "id": "4", + "name": "MSO" + }, + { + "id": "5", + "name": "SDN-C" + }, + { + "id": "6", + "name": "A&AI" + }, + { + "id": "7", + "name": "APP-C" + }, + { + "id": "8", + "name": "Cloud" + }, + { + "id": "9", + "name": "DCAE" + }, + { + "id": "10", + "name": "ALTS" + }, + { + "id": "11", + "name": "VF" + } + ] + } + + + private initScope():void { + this.$scope.vendorModel = new VendorModel( + this.$scope.component.artifacts.filteredByType(Utils.Constants.ArtifactType.THIRD_PARTY_RESERVED_TYPES.WORKFLOW), + this.$scope.component.uniqueId, + this.$scope.isViewMode(), + this.$scope.user.userId, + this.uuid4.generate(), + Utils.Constants.ArtifactType.THIRD_PARTY_RESERVED_TYPES.WORKFLOW, + ManagementWorkflowViewModel.getParticipants() + ); + + this.$scope.thirdParty = true; + this.$scope.setValidState(true); + } + } +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/management-workflow/management-workflow-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/management-workflow/management-workflow-view.html new file mode 100644 index 0000000000..bd196daec8 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/management-workflow/management-workflow-view.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/network-call-flow/network-call-flow-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/network-call-flow/network-call-flow-view-model.ts new file mode 100644 index 0000000000..064f1c5896 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/network-call-flow/network-call-flow-view-model.ts @@ -0,0 +1,80 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +/// +module Sdc.ViewModels { + 'use strict'; + + export interface INetworkCallFlowViewModelScope extends IWorkspaceViewModelScope { + vendorMessageModel:VendorModel; + } + + export class participant { + name:string; + id:string; + + constructor(instance:Models.ComponentsInstances.ComponentInstance){ + this.name = instance.name; + this.id = instance.uniqueId; + } + } + + + export class NetworkCallFlowViewModel { + + static '$inject' = [ + '$scope', + 'uuid4' + ]; + + constructor(private $scope:INetworkCallFlowViewModelScope, + private uuid4:any) { + + this.initScope(); + this.$scope.updateSelectedMenuItem(); + } + + private getVFParticipantsFromInstances(instances:Array):Array { + let participants = []; + _.forEach(instances,(instance)=> { + if(Utils.Constants.ResourceType.VF == instance.originType){ + participants.push(new participant(instance)); + } + }); + return participants; + } + + + private initScope():void { + this.$scope.vendorMessageModel = new VendorModel( + this.$scope.component.artifacts.filteredByType(Utils.Constants.ArtifactType.THIRD_PARTY_RESERVED_TYPES.NETWORK_CALL_FLOW), + this.$scope.component.uniqueId, + this.$scope.isViewMode(), + this.$scope.user.userId, + this.uuid4.generate(), + Utils.Constants.ArtifactType.THIRD_PARTY_RESERVED_TYPES.NETWORK_CALL_FLOW, + this.getVFParticipantsFromInstances(this.$scope.component.componentInstances) + ); + + this.$scope.thirdParty = true; + this.$scope.setValidState(true); + } + + } +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/network-call-flow/network-call-flow-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/network-call-flow/network-call-flow-view.html new file mode 100644 index 0000000000..6ce3e8e2b7 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/network-call-flow/network-call-flow-view.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view-model.ts new file mode 100644 index 0000000000..faf77a5215 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view-model.ts @@ -0,0 +1,134 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +/** + * Created by obarda on 4/7/2016. + */ +/// +module Sdc.ViewModels { + 'use strict'; + + export interface IProductHierarchyScope extends IWorkspaceViewModelScope { + + categoriesOptions: Array; + product:Models.Components.Product; + isLoading:boolean; + showDropDown:boolean; + + onInputTextClicked():void; + onGroupSelected(category: Models.IMainCategory, subcategory: Models.ISubCategory, group: Models.IGroup):void; + clickOutside():void; + deleteGroup(uniqueId:string):void; + } + + export class ProductHierarchyViewModel { + + static '$inject' = [ + '$scope', + 'Sdc.Services.CacheService', + 'ComponentFactory', + '$state' + ]; + + constructor(private $scope:IProductHierarchyScope, + private cacheService:Sdc.Services.CacheService, + private ComponentFactory: Sdc.Utils.ComponentFactory, + private $state:ng.ui.IStateService) { + + + this.$scope.product = this.$scope.getComponent(); + this.$scope.setValidState(true); + this.initScope(); + this.$scope.updateSelectedMenuItem(); + } + + private initCategories = () => { + this.$scope.categoriesOptions = angular.copy(this.cacheService.get('productCategories')); + let selectedGroup:Array = []; + _.forEach(this.$scope.product.categories, (category: Models.IMainCategory) => { + _.forEach(category.subcategories, (subcategory:Models.ISubCategory) => { + selectedGroup = selectedGroup.concat(subcategory.groupings); + }); + }); + _.forEach(this.$scope.categoriesOptions, (category: Models.IMainCategory) => { + _.forEach(category.subcategories, (subcategory:Models.ISubCategory) => { + _.forEach(subcategory.groupings, (group:Models.ISubCategory) => { + let componentGroup:Models.IGroup = _.find(selectedGroup, (componentGroupObj) => { + return componentGroupObj.uniqueId == group.uniqueId; + }); + if(componentGroup){ + group.isDisabled = true; + } + }); + }); + }); + }; + + private setFormValidation = ():void => { + //if(!this.$scope.product.categories || this.$scope.product.categories.length === 0){ + // this.$scope.setValidState(false); + //} + //else{ + this.$scope.setValidState(true); + // } + + }; + + private initScope = ():void => { + this.$scope.isLoading= false; + this.$scope.showDropDown =false; + this.initCategories(); + this.setFormValidation(); + + this.$scope.onGroupSelected = (category: Models.IMainCategory, subcategory: Models.ISubCategory, group: Models.IGroup):void => { + this.$scope.product.addGroup(category, subcategory, group); + this.$state.current.data.unsavedChanges = !this.$scope.isViewMode(); + group.isDisabled = true; + this.$scope.showDropDown = false; + this.setFormValidation(); + }; + + this.$scope.onInputTextClicked = ():void => {//just edit the component in place, no pop up nor server update ? + this.$scope.showDropDown = !this.$scope.showDropDown; + }; + + this.$scope.clickOutside = (): any => { + this.$scope.showDropDown = false; + }; + + this.$scope.deleteGroup = (uniqueId:string) : void => { + //delete group from component + this.$scope.product.deleteGroup(uniqueId); + this.$state.current.data.unsavedChanges = !this.$scope.isViewMode(); + this.setFormValidation(); + //enabled group + _.forEach(this.$scope.categoriesOptions, (category: Models.IMainCategory) => { + _.forEach(category.subcategories, (subcategory:Models.ISubCategory) => { + let groupObj:Models.IGroup = _.find (subcategory.groupings, (group) => { + return group.uniqueId === uniqueId; + }); + if(groupObj){ + groupObj.isDisabled = false; + } + }); + }); + } + }; + } +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view.html new file mode 100644 index 0000000000..2335ad7c74 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view.html @@ -0,0 +1,40 @@ +
+
+ +
+ +
+
+
+
+
{{category.name}}
+
{{subcategory.name}}
+
+
+
+
+ {{group.name}} +
+
+
+
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+ +
+
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/product-hierarchy/product-hierarchy.less b/catalog-ui/app/scripts/view-models/workspace/tabs/product-hierarchy/product-hierarchy.less new file mode 100644 index 0000000000..c992558ed2 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/product-hierarchy/product-hierarchy.less @@ -0,0 +1,130 @@ +.workspace-hierarchy { + display: inline-block; + width: 93%; + + .scrollbar-container{ + max-height:400px; + .perfect-scrollbar; + } + + .dropdown-container { + position: relative; + display: inline-block; + width: 100%; + + &:after{ + top: 47%; + right: 1%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-color: rgba(0, 0, 0, 0); + border-top-color: black; + border-width: 4px; + margin-left: -4px; + } + + .dropdown-input-text { + width: 100%; + padding: 4px 10px; + } + + .dropdown-content { + .perfect-scrollbar; + border: 1px solid #d8d8d8; + display: none; + position: absolute; + overflow: hidden; + width: 100%; + .bg_c; + max-height: 400px; + z-index: 999999; + + .dropdown-option { + border-bottom: 1px solid #d8d8d8; + display: inline-block; + width: 100%; + } + + .category-container{ + width: 250px; + float: left; + padding-left: 5px; + + .category { + .bold; + padding: 3px 3px 2px 3px; + &:after{ + .sprite; + .arrow-left; + content: ''; + margin-left: 5px; + transform: rotate(180deg); + } + } + .subcategory { + padding-left: 3px; + } + } + + .groupings-container{ + display: inline-block; + width: 424px; + border-left: 1px solid #d8d8d8; + min-height: 55px; + .group{ + padding: 3px 3px 3px 10px; + &:hover{ + .hand; + .bg_n; + } + &.disabled-group { + opacity: 0.5; + &:hover{ + cursor: auto; + .bg_c; + } + } + } + } + + .seperator { + height: 1px; + width: 100%; + .bg_j; + margin: 5px 0px; + } + } + .show { + display: block; + } + } + + .hierarchy-groups-container{ + .b_9; + width: 100%; + border: 1px solid #d8d8d8; + height: 425px; + padding: 15px; + text-align: center; + + .scrollbar-container { + z-index: 0; + } + + .no-group-text{ + text-align: center; + margin-top:25px; + a { + cursor: pointer; + } + } + .group-tag{ + display: inline-block; + float: left; + } + } +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/properties/properties-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/properties/properties-view-model.ts new file mode 100644 index 0000000000..9b824bfca9 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/properties/properties-view-model.ts @@ -0,0 +1,114 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +/// +module Sdc.ViewModels { + 'use strict'; + + interface IPropertiesViewModelScope extends IWorkspaceViewModelScope { + tableHeadersList: Array; + reverse: boolean; + sortBy:string; + filteredProperties:any; + + addOrUpdateProperty(property?:Models.PropertyModel): void; + delete(property:Models.PropertyModel): void; + sort(sortBy:string): void; + } + + export class PropertiesViewModel { + + static '$inject' = [ + '$scope', + '$filter', + '$modal', + '$templateCache', + 'ModalsHandler' + ]; + + + constructor(private $scope:IPropertiesViewModelScope, + private $filter:ng.IFilterService, + private $modal:ng.ui.bootstrap.IModalService, + private $templateCache:ng.ITemplateCacheService, + private ModalsHandler:Utils.ModalsHandler) { + this.initScope(); + this.$scope.updateSelectedMenuItem(); + } + + + private openEditPropertyModal = (property:Models.PropertyModel):void => { + let viewModelsHtmlBasePath:string = '/app/scripts/view-models/'; + + let modalOptions:ng.ui.bootstrap.IModalSettings = { + template: this.$templateCache.get(viewModelsHtmlBasePath + 'forms/property-form/property-form-view.html'), + controller: 'Sdc.ViewModels.PropertyFormViewModel', + size: 'sdc-l', + backdrop: 'static', + keyboard: false, + resolve: { + property: ():Models.PropertyModel => { + return property; + }, + component: ():Models.Components.Component => { + return this.$scope.component; + }, + filteredProperties: ():Array => { + return this.$scope.filteredProperties.properties; + } + } + }; + this.$modal.open(modalOptions); + }; + + private initScope = ():void => { + + //let self = this; + this.$scope.filteredProperties={properties:[]}; + this.$scope.sortBy = 'name'; + this.$scope.reverse = false; + this.$scope.setValidState(true); + this.$scope.tableHeadersList = [ + {title: 'Name', property: 'name'}, + {title: 'Type', property: 'type'}, + {title: 'Schema', property: 'schema.property.type'}, + {title: 'Description', property: 'description'}, + ]; + this.$scope.sort = (sortBy:string):void => { + this.$scope.reverse = (this.$scope.sortBy === sortBy) ? !this.$scope.reverse : false; + this.$scope.sortBy = sortBy; + }; + + + this.$scope.addOrUpdateProperty = (property?:Models.PropertyModel):void => { + this.openEditPropertyModal(property ? property : new Models.PropertyModel()); + }; + + this.$scope.delete = (property:Models.PropertyModel):void => { + + let onOk = ():void => { + this.$scope.component.deleteProperty(property.uniqueId); + }; + let title:string = this.$filter('translate')("PROPERTY_VIEW_DELETE_MODAL_TITLE"); + let message:string = this.$filter('translate')("PROPERTY_VIEW_DELETE_MODAL_TEXT", "{'name': '" + property.name + "'}"); + this.ModalsHandler.openConfirmationModal(title, message, false).then(onOk); + }; + } + } +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/properties/properties-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/properties/properties-view.html new file mode 100644 index 0000000000..e9a4c3879d --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/properties/properties-view.html @@ -0,0 +1,62 @@ +
+
+ Total Properties: {{component.properties.length}} + + +
+
Add Property
+
+
+
+
{{header.title}} + +
+
+ +
+ +
+ +
+ There are no properties to display
+ click here to add one + +
+
+ +
+ {{property.name}} + +
+ +
+
+
+
+
+ +
+
+ +
+
+ +
+ +
+
+ +
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/properties/properties.less b/catalog-ui/app/scripts/view-models/workspace/tabs/properties/properties.less new file mode 100644 index 0000000000..3e8d6c3fbd --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/properties/properties.less @@ -0,0 +1,115 @@ +.workspace-properties { + + width: 93%; + display: inline-block; + + #left-top-bar{ + float: left; + width: 155px; + ::-webkit-input-placeholder { + font-style: italic; + } + :-moz-placeholder { + font-style: italic; + } + ::-moz-placeholder { + font-style: italic; + } + :-ms-input-placeholder { + font-style: italic; + } + + #properties-count{ + font-weight: bold; + float: left; + } + + #search-by-name{ + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + width: 245px; + height: 32px; + line-height: 32px; + border: 1px solid @main_color_o; + text-indent: 10px; + } + + .search-button{ + .hand; + cursor: pointer; + float: right; + position: relative; + top: -22px; + right: -80px; + } + } + + .add-btn { + margin: 36px 0 0 0; + } + + .delete-col-header{ + .sprite; + .sprite.e-sdc-small-icon-delete; + } + + .w-sdc-classic-btn { + float: right; + margin-bottom: 10px; + } + + .table{ + height:490px; + margin-bottom: 0; + } + + .data-row{ + .table-delete-btn{ + display: none !important; + } + &:hover{ + .table-delete-btn{ + display: inline-block !important; + } + } + } + + .table-container-flex { + margin-top: 27px; + + .text{ + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + } + + .flex-item:nth-child(1) { + flex-grow: 15; + a{ + .hand + } + } + + .flex-item:nth-child(2) { + flex-grow: 6; + } + + .flex-item:nth-child(3) { + flex-grow: 6; + } + + .flex-item:nth-child(4) { + flex-grow: 20; + + } + .flex-item:nth-child(5) { + flex-grow: 3; + padding-top: 10px; + } + + + } + +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view-model.ts new file mode 100644 index 0000000000..97a117e8b7 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view-model.ts @@ -0,0 +1,165 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +/** + * Created by rcohen on 9/22/2016. + */ +/// +module Sdc.ViewModels { + 'use strict'; + import tree = d3.layout.tree; + + export class SortTableDefined { + reverse:boolean; + sortByField:string; + } + + interface IReqAndCapabilitiesViewModelScope extends IWorkspaceViewModelScope { + requirementsTableHeadersList: Array; + capabilitiesTableHeadersList: Array; + capabilityPropertiesTableHeadersList: Array; + requirementsSortTableDefined: SortTableDefined; + capabilitiesSortTableDefined: SortTableDefined; + propertiesSortTableDefined: SortTableDefined; + requirements:Array; + capabilities:Array; + mode:string; + filteredProperties:Array>; + searchText:string; + + sort(sortBy:string, sortByTableDefined:SortTableDefined):void; + updateProperty(property:Models.PropertyModel, indexInFilteredProperties:number):void; + allCapabilitiesSelected(selected:boolean):void; + } + + export class ReqAndCapabilitiesViewModel { + + static '$inject' = [ + '$scope', + '$filter', + '$modal', + '$templateCache', + 'ModalsHandler' + ]; + + + constructor(private $scope:IReqAndCapabilitiesViewModelScope, + private $filter:ng.IFilterService, + private $modal:ng.ui.bootstrap.IModalService, + private $templateCache:ng.ITemplateCacheService) { + this.initScope(); + this.$scope.updateSelectedMenuItem(); + } + + + private openEditPropertyModal = (property:Models.PropertyModel, indexInFilteredProperties:number):void => { + let viewModelsHtmlBasePath:string = '/app/scripts/view-models/'; + //...because there is not be api + _.forEach(this.$scope.filteredProperties[indexInFilteredProperties],(prop:Models.PropertyModel)=>{ + prop.readonly = true; + }); + let modalOptions:ng.ui.bootstrap.IModalSettings = { + template: this.$templateCache.get(viewModelsHtmlBasePath + 'forms/property-form/property-form-view.html'), + controller: 'Sdc.ViewModels.PropertyFormViewModel', + size: 'sdc-l', + backdrop: 'static', + keyboard: false, + resolve: { + property: ():Models.PropertyModel => { + return property; + }, + component: ():Models.Components.Component => { + return this.$scope.component; + }, + filteredProperties: ():Array => { + return this.$scope.filteredProperties[indexInFilteredProperties]; + } + } + }; + this.$modal.open(modalOptions); + }; + + private initScope = ():void => { + + this.$scope.requirementsSortTableDefined = { + reverse: false, + sortByField: 'name' + }; + this.$scope.capabilitiesSortTableDefined = { + reverse: false, + sortByField: 'name' + }; + this.$scope.propertiesSortTableDefined = { + reverse: false, + sortByField: 'name' + }; + + this.$scope.setValidState(true); + this.$scope.requirementsTableHeadersList = [ + {title: 'Name', property: 'name'}, + {title: 'Capability', property: 'capability'}, + {title: 'Node', property: 'node'}, + {title: 'Relationship', property: 'relationship'}, + {title: 'Connected To', property: ''}, + {title: 'Occurrences', property: ''} + ]; + this.$scope.capabilitiesTableHeadersList = [ + {title: 'Name', property: 'name'}, + {title: 'Type', property: 'type'}, + {title: 'Description', property: ''}, + {title: 'Valid Source', property: ''}, + {title: 'Occurrences', property: ''} + ]; + this.$scope.capabilityPropertiesTableHeadersList = [ + {title: 'Name', property: 'name'}, + {title: 'Type', property: 'type'}, + {title: 'Schema', property: 'schema.property.type'}, + {title: 'Description', property: 'description'}, + ]; + this.$scope.filteredProperties=[]; + + this.$scope.mode='requirements'; + this.$scope.requirements=[]; + _.forEach(this.$scope.component.requirements,(req:Array,capName)=>{ + this.$scope.requirements=this.$scope.requirements.concat(req); + }); + + this.$scope.capabilities=[]; + _.forEach(this.$scope.component.capabilities,(cap:Array,capName)=>{ + this.$scope.capabilities=this.$scope.capabilities.concat(cap); + }); + + this.$scope.sort = (sortBy:string, sortByTableDefined:SortTableDefined):void => { + sortByTableDefined.reverse = (sortByTableDefined.sortByField === sortBy) ? !sortByTableDefined.reverse : false; + sortByTableDefined.sortByField = sortBy; + }; + + this.$scope.updateProperty = (property:Models.PropertyModel, indexInFilteredProperties:number):void => { + this.openEditPropertyModal(property, indexInFilteredProperties); + }; + + this.$scope.allCapabilitiesSelected = (selected:boolean):void => { + _.forEach(this.$scope.capabilities,(cap:Models.Capability)=>{ + cap.selected = selected; + }); + }; + } + } +} + diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view.html new file mode 100644 index 0000000000..047768689a --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view.html @@ -0,0 +1,144 @@ +
+
+ + +
+
+ + +
+
+ +
+ +
+
+
+
+
+
{{header.title}} + +
+
+ +
+ +
+ There are no requirements to display + +
+
+ +
+ {{req.name}} +
+
+ {{req.capability.substring("tosca.capabilities.".length)}} +
+
+ {{req.node.substring("tosca.nodes.".length)}} +
+
+ {{req.relationship.substring("tosca.relationships.".length)}} +
+
+
+ {{req.minOccurrences}},{{req.maxOccurrences}} +
+
+ +
+ +
+
+
+
+
+
{{header.title}} + +
+
+ +
+ +
+ There are no capabilities to display + +
+
+ +
+ + {{capability.name}} +
+
+ {{capability.type.substring("tosca.capabilities.".length)}} +
+ +
+ {{capability.description}} +
+ +
+ {{capability.validSourceTypes.join(',')}} +
+ +
+ {{capability.minOccurrences}},{{capability.maxOccurrences}} +
+
+
+

Properties

+
+
+
+
{{header.title}} + +
+
+ +
+
+ There are no properties to display +
+
+ +
+ {{property.name}} + +
+ +
+
+
+
+
+ +
+
+
+ +
+
+
+ +
+ +
+
+
+ diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities.less b/catalog-ui/app/scripts/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities.less new file mode 100644 index 0000000000..9b52fad411 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities.less @@ -0,0 +1,196 @@ +.workspace-req-and-cap { + + width: 93%; + display: inline-block; + + .tabs{ + float: left; + position: relative; + top: 6px; + button{ + float: left; + width: 233px; + height: 38px; + background-color: @tlv_color_t; + border: 1px solid @main_color_o; + color: black; + &:nth-child(1){ + border-radius: 10px 0 0 0; + } + &:nth-child(2){ + border-radius: 0 10px 0 0; + } + &.selected{ + background-color: @main_color_a; + border: 1px solid @main_color_a; + color: white; + } + } + } + .search{ + margin-bottom: 12px; + float: right; + ::-webkit-input-placeholder { + font-style: italic; + } + :-moz-placeholder { + font-style: italic; + } + ::-moz-placeholder { + font-style: italic; + } + :-ms-input-placeholder { + font-style: italic; + } + #search-box{ + -webkit-border-radius: 2px 0 0 2px; + -moz-border-radius: 2px 0 0 2px; + border-radius: 2px 0 0 2px; + width: 213px; + height: 32px; + line-height: 32px; + border: 1px solid @main_color_o; + text-indent: 10px; + float: left; + } + .search-icon-container{ + background-color: @main_color_a; + height: 32px; + width: 32px; + border-radius: 0 2px 2px 0; + float: left; + .search-icon{ + position: relative; + top: 9px; + } + } + } + .expand-collapse-buttons{ + float: right; + width: 44px; + margin-left: 11px; + margin-top: 10px; + span{ + vertical-align: bottom; + .hand; + } + } + + + + .table{ + height:490px; + margin-bottom: 0; + } + + .arrow-up-small{ + &.opened{ + .arrow-up-small-hover; + } + } + + .item-opened{ + background-color: @tlv_color_t; + } + + .properties-title{ + margin:0; + font-weight: bold; + } + + .table-container-flex { + margin-top: 10px; + + .text{ + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + } + + &.requirements-table{ + border-top: 4px solid @main_color_a; + .flex-item:nth-child(1) { + flex-grow: 20; + } + + .flex-item:nth-child(2) { + flex-grow: 20; + } + + .flex-item:nth-child(3) { + flex-grow: 20; + } + + .flex-item:nth-child(4) { + flex-grow: 20; + } + + .flex-item:nth-child(5) { + flex-grow: 20; + } + + .flex-item:nth-child(6) { + flex-grow: 20; + } + } + + &.capabilities-table{ + border-top: 4px solid @main_color_a; + .selected{ + .flex-item:nth-child(1) { + border-left: 4px solid @main_color_a; + padding-right: 11px; + } + } + .flex-item:nth-child(1) { + flex-grow: 10; + } + + .flex-item:nth-child(2) { + flex-grow: 10; + } + + .flex-item:nth-child(3) { + flex-grow: 10; + } + + .flex-item:nth-child(4) { + flex-grow: 10; + } + + .flex-item:nth-child(5) { + flex-grow: 10; + } + + } + + &.properties-table{ + .table{ + height: auto; + } + + .flex-item:nth-child(1) { + flex-grow: 15; + a{ + .hand + } + } + + .flex-item:nth-child(2) { + flex-grow: 6; + } + + .flex-item:nth-child(3) { + flex-grow: 6; + } + + .flex-item:nth-child(4) { + flex-grow: 20; + + } + } + + } + +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view-model.ts new file mode 100644 index 0000000000..1e6bc04924 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view-model.ts @@ -0,0 +1,87 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +/// +module Sdc.ViewModels { + 'use strict'; + import ArtifactModel = Sdc.Models.ArtifactModel; + + export interface IToscaArtifactsScope extends IWorkspaceViewModelScope { + artifacts: Array; + tableHeadersList: Array; + artifactType: string; + downloadFile:Models.IFileDownload; + isLoading:boolean; + sortBy:string; + reverse:boolean; + + getTitle(): string; + download(artifact:Models.ArtifactModel): void; + sort(sortBy:string): void; + showNoArtifactMessage():boolean; + } + + export class ToscaArtifactsViewModel { + + static '$inject' = [ + '$scope', + '$filter' + ]; + + constructor(private $scope:IToscaArtifactsScope, + private $filter:ng.IFilterService) { + this.initScope(); + this.$scope.updateSelectedMenuItem(); + } + + private initScope = ():void => { + let self = this; + this.$scope.isLoading = false; + this.$scope.sortBy = 'artifactDisplayName'; + this.$scope.reverse = false; + this.$scope.setValidState(true); + this.$scope.artifactType = 'normal'; + this.$scope.getTitle = ():string => { + return this.$filter("resourceName")(this.$scope.component.name) + ' Artifacts'; + + }; + + this.$scope.tableHeadersList = [ + {title: 'Name', property: 'artifactDisplayName'}, + {title: 'Type', property: 'artifactType'} + ]; + + this.$scope.artifacts = _.values(this.$scope.component.toscaArtifacts); + this.$scope.sort = (sortBy:string):void => { + this.$scope.reverse = (this.$scope.sortBy === sortBy) ? !this.$scope.reverse : false; + this.$scope.sortBy = sortBy; + }; + + + + this.$scope.showNoArtifactMessage = ():boolean => { + if (this.$scope.artifacts.length === 0) { + return true; + } + return false; + }; + + } + } +} diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view.html new file mode 100644 index 0000000000..947b37db93 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view.html @@ -0,0 +1,45 @@ +
+
+
+
+
{{header.title}} + +
+
+
+
+ +
+ There are no TOSCA artifacts to display +
+
+ +
+ + {{artifact.artifactDisplayName}} +
+ +
+ {{artifact.artifactType}} +
+ +
+ +
+
+
+
Label: {{artifact.artifactLabel}}
+
UUID: {{artifact.uniqueId}}
+
Description: {{artifact.description}}
+ + +
+ + +
+
+
+
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less b/catalog-ui/app/scripts/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less new file mode 100644 index 0000000000..f792bb8c53 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less @@ -0,0 +1,74 @@ +.workspace-tosca-artifact { + width: 93%; + display: inline-block; + .w-sdc-classic-btn { + float: right; + margin-bottom: 10px; + } + + .details-title{ + font-weight: bold; + margin-right: 5px; + } + + .table{ + height: 490px; + margin-bottom: 0; + } + + + .table-container-flex { + margin-top: 27px; + + .item-opened{ + word-wrap: break-word; + } + + + .flex-item:nth-child(1) { + flex-grow: 15; + .hand; + span.table-arrow { + margin-right: 7px; + } + } + + .flex-item:nth-child(2) { + flex-grow: 6; + } + + .flex-item:nth-child(3) { + flex-grow: 1; + } + + + + + .table-download-btn{ + &.tosca{ + margin-left: 0; + margin-top: 8px; + } + } + + .download-icon-container{ + position: relative; + + .loader{ + left: 60%; + top: 45px; + border: none; + background-color: transparent; + height: 0px; + width: 63px; + outline: none; + + } + } + + + } + +} + + -- cgit 1.2.3-korg