diff options
| author |   ys9693 <ys9693@att.com> | 2020-01-19 13:50:02 +0200 |
|---|---|---|
| committer |   Ofir Sonsino <ofir.sonsino@intl.att.com> | 2020-01-22 12:33:31 +0000 |
| commit | 16a9fce0e104a38371a9e5a567ec611ae3fc7f33 (patch) | |
| tree | 03a2aff3060ddb5bc26a90115805a04becbaffc9 /catalog-ui/src/app/view-models | |
| parent | aa83a2da4f911c3ac89318b8e9e8403b072942e1 (diff) | |
Catalog alignment
Issue-ID: SDC-2724
Signed-off-by: ys9693 <ys9693@att.com>
Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe
Diffstat (limited to 'catalog-ui/src/app/view-models')
143 files changed, 722 insertions, 15799 deletions
diff --git a/catalog-ui/src/app/view-models/admin-dashboard/admin-dashboard-view-model.ts b/catalog-ui/src/app/view-models/admin-dashboard/admin-dashboard-view-model.ts index c9ffe470f0..40a9e8fde1 100644 --- a/catalog-ui/src/app/view-models/admin-dashboard/admin-dashboard-view-model.ts +++ b/catalog-ui/src/app/view-models/admin-dashboard/admin-dashboard-view-model.ts @@ -19,7 +19,7 @@ */ 'use strict'; -import {CacheService} from "app/services"; +import {CacheService} from "app/services-ng2"; import {IAppConfigurtaion} from "app/models"; interface IAdminDashboardViewModelScope extends ng.IScope { diff --git a/catalog-ui/src/app/view-models/admin-dashboard/category-management/category-management-view-model.ts b/catalog-ui/src/app/view-models/admin-dashboard/category-management/category-management-view-model.ts index c99f9e874d..bb4c44d8da 100644 --- a/catalog-ui/src/app/view-models/admin-dashboard/category-management/category-management-view-model.ts +++ b/catalog-ui/src/app/view-models/admin-dashboard/category-management/category-management-view-model.ts @@ -20,7 +20,8 @@ 'use strict'; import {ModalsHandler, ValidationUtils} from "app/utils"; -import {CacheService, ICategoryResource} from "app/services"; +import {ICategoryResource} from "app/services"; +import {CacheService} from "app/services-ng2"; import {IAppConfigurtaion} from "app/models"; import {ComponentType} from "../../../utils/constants"; @@ -138,58 +139,6 @@ export class CategoryManagementViewModel { }; - scope.deleteCategory = (category:ICategoryResource, subCategory:ICategoryResource):void => { - - let onOk = ():void => { - - scope.isLoading = true; - let type:string = scope.type; - - let onError = (response):void => { - scope.isLoading = false; - console.info('onFaild', response); - }; - - let onSuccess = (response:any):void => { - let arr:Array<ICategoryResource>; - - if (!subCategory) { - arr = this.$scope[type + 'Categories']; - arr.splice(arr.indexOf(category), 1); - if (category === scope.selectedCategory) { - scope.selectedCategory = null; - scope.selectedSubCategory = null; - } - } else { - arr = category.subcategories; - arr.splice(arr.indexOf(subCategory), 1); - } - - scope.isLoading = false; - }; - - if (!subCategory) { - category.$delete({ - types: type + "s", - categoryId: category.uniqueId - } - , onSuccess, onError); - } else { - category.$deleteSubCategory({ - types: type + "s", - categoryId: category.uniqueId, - subCategoryId: subCategory.uniqueId, - } - , onSuccess, onError); - } - }; - let modelType:string = subCategory ? 'sub category' : 'category'; - let title:string = this.$filter('translate')("DELETE_CATEGORY_MODAL_HEADER", "{'modelType': '" + modelType + "' }"); - let message:string = this.$filter('translate')("DELETE_CATEGORY_MODAL_CATEGORY_NAME", "{'modelType': '" + modelType + "' }"); - - this.ModalsHandler.openConfirmationModal(title, message, false, 'sdc-xsm').then(onOk); - }; - this.$scope.serviceCategories = this.cacheService.get('serviceCategories'); this.$scope.resourceCategories = this.cacheService.get('resourceCategories'); } diff --git a/catalog-ui/src/app/view-models/admin-dashboard/category-management/category-management-view.html b/catalog-ui/src/app/view-models/admin-dashboard/category-management/category-management-view.html index d7ee87e2e7..30b71f28e2 100644 --- a/catalog-ui/src/app/view-models/admin-dashboard/category-management/category-management-view.html +++ b/catalog-ui/src/app/view-models/admin-dashboard/category-management/category-management-view.html @@ -36,9 +36,6 @@ data-ng-click="selectCategory(category)" data-tests-id="{{ type === SERVICE ? 'servicecategory' : 'resourcecategory' }}"> {{category.name}} - - <!--<button class="sprite e-sdc-small-icons-delete" data-ng-click="deleteCategory(category, null)" type="button"></button>--> - <!--button class="sprite e-sdc-small-icons-pad" data-ng-click="" type="button"></button--> </li> </ul> </perfect-scrollbar> @@ -56,9 +53,6 @@ data-ng-click="selectSubCategory(subcategory)" data-tests-id="subcategory"> {{subcategory.name}} - - <!--<button class="sprite e-sdc-small-icons-delete" data-ng-click="deleteCategory(selectedCategory, subcategory)" type="button"></button>--> - <!--button class="sprite e-sdc-small-icon-pad" data-ng-click="" type="button"></button--> </li> </ul> </perfect-scrollbar> diff --git a/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view-model.ts b/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view-model.ts index 45232b7a61..43ae75e048 100644 --- a/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view-model.ts +++ b/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view-model.ts @@ -20,55 +20,40 @@ 'use strict'; import * as _ from "lodash"; -import {ModalsHandler} from "app/utils"; -import {User, IUserProperties, IUser, IAppConfigurtaion} from "app/models"; -import {UserService} from "../../../ng2/services/user.service"; +import { User, IUserProperties, IUser, IAppConfigurtaion } from "app/models"; +import { UserService } from "../../../ng2/services/user.service"; +import { SdcUiCommon, SdcUiServices, SdcUiComponents } from "onap-ui-angular"; +import { AuthenticationService } from "app/ng2/services/authentication.service"; interface IUserManagementViewModelScope extends ng.IScope { - sdcConfig:IAppConfigurtaion; usersList:Array<IUserProperties>; isLoading:boolean; - isNewUser:boolean; sortBy:string; reverse:boolean; tableHeadersList:any; - roles:Array<string>; - newUser:IUser; - currentUser:IUserProperties; - userIdValidationPattern:RegExp; - editForm:ng.IFormController; getAllUsers():void; - editUserRole(user:IUserProperties); sort(sortBy:string):void; - createUser():void; - deleteUser(userId:string):void; - onEditUserPressed(user:IUserProperties):void; - saveUserChanges(user:IUserProperties):void; getTitle(role:string):string; - clearForm():void; - } export class UserManagementViewModel { static '$inject' = [ '$scope', - 'sdcConfig', 'UserServiceNg2', - 'UserIdValidationPattern', + 'AuthenticationServiceNg2', '$filter', - 'ModalsHandler' + 'ModalServiceSdcUI' ]; constructor(private $scope:IUserManagementViewModelScope, - private sdcConfig:IAppConfigurtaion, private userService:UserService, - private UserIdValidationPattern:RegExp, + private authService:AuthenticationService, private $filter:ng.IFilterService, - private ModalsHandler:ModalsHandler) { + private modalService:SdcUiServices.ModalService) { - this.initScope(); + setTimeout(this.initScope, 1000); } @@ -89,13 +74,8 @@ export class UserManagementViewModel { this.userService.getAllUsers().subscribe(onSuccess, onError); }; - private updateUserFilterTerm = (user:IUserProperties):void => { - user.filterTerm = user.firstName + ' ' + user.lastName + ' ' + user.userId + ' ' + user.email + ' ' + user.role + ' ' + this.$filter('date')(user.lastLoginTime, "MM/dd/yyyy"); - }; - private initScope = ():void => { let self = this; - this.$scope.tableHeadersList = [{title: "First Name", property: 'firstName'}, { title: "Last Name", property: 'lastName' @@ -107,116 +87,18 @@ export class UserManagementViewModel { title: "Last Active", property: 'lastLoginTime' }]; - this.$scope.userIdValidationPattern = this.UserIdValidationPattern; this.$scope.sortBy = 'lastLoginTime'; this.$scope.reverse = false; - this.$scope.roles = this.sdcConfig.roles; - this.$scope.isNewUser = false; - this.$scope.currentUser = this.userService.getLoggedinUser(); this.getAllUsers(); - let userInfo:IUserProperties = <IUserProperties>{}; - this.$scope.newUser = new User(userInfo); - this.$scope.sort = (sortBy:string):void => {//default sort by descending last update. default for alphabetical = ascending - this.$scope.isNewUser = false; this.$scope.reverse = (this.$scope.sortBy === sortBy) ? ( !this.$scope.reverse) : this.$scope.reverse = false; this.$scope.sortBy = sortBy; }; - this.$scope.createUser = ():void => { - - let onError = (response) => { - this.$scope.isLoading = false; - console.info('onFaild', response); - }; - - let onSuccess = (response:IUserProperties) => { - this.$scope.newUser.userInfo.lastLoginTime = "0"; - this.$scope.newUser.userInfo.status = response.status; - this.updateUserFilterTerm(this.$scope.newUser.userInfo); - this.$scope.usersList.push(this.$scope.newUser.userInfo); - this.$scope.isNewUser = true; - this.$scope.sortBy = null; - this.$scope.reverse = true; - this.$scope.isLoading = false; - this.$scope.newUser = new User(null); - this.$scope.editForm.$setPristine(); - let _self = this; - setTimeout(function () { - _self.$scope.isNewUser = false; - }, 7000); - }; - this.userService.createUser({ - userId: this.$scope.newUser.userInfo.userId, - role: this.$scope.newUser.userInfo.role - }).subscribe(onSuccess, onError); - }; - - - this.$scope.onEditUserPressed = (user:IUserProperties):void => { - user.isInEditMode = true; - user.tempRole = user.role; - }; - - this.$scope.editUserRole = (user:IUserProperties):void => { - let roleBeforeUpdate:string = user.role; - user.role = user.tempRole; - - let onError = (response) => { - this.$scope.isLoading = false; - user.role = roleBeforeUpdate; - console.info('onFaild', response); - }; - let onSuccess = (response:any) => { - this.$scope.isLoading = false; - user.tempRole = user.role; - this.updateUserFilterTerm(user); - }; - - this.userService.editUserRole(user.userId, user.role).subscribe(onSuccess, onError); - }; - - this.$scope.saveUserChanges = (user:IUserProperties):void => { - if (user.tempRole != user.role) { - this.$scope.editUserRole(user) - } - user.isInEditMode = false; - }; - - this.$scope.deleteUser = (userId:string):void => { - - let onOk = ():void => { - this.$scope.isLoading = true; - - let onError = (response):void => { - this.$scope.isLoading = false; - console.info('onFaild', response); - }; - - let onSuccess = (response:any):void => { - _.remove(this.$scope.usersList, {userId: userId}); - this.$scope.isLoading = false; - }; - this.userService.deleteUser(userId).subscribe(onSuccess, onError); - }; - - let title:string = this.$filter('translate')("USER_MANAGEMENT_VIEW_DELETE_MODAL_TITLE"); - let message:string = this.$filter('translate')("USER_MANAGEMENT_VIEW_DELETE_MODAL_TEXT"); - this.ModalsHandler.openConfirmationModal(title, message, false).then(onOk); - }; - this.$scope.getTitle = (role:string):string => { return role.toLowerCase().replace('governor', 'governance_Rep').replace('_', ' '); }; - this.$scope.clearForm = ():void => { - if (!this.$scope.editForm['contactId'].$viewValue && !this.$scope.editForm['role'].$viewValue) { - this.$scope.editForm.$setPristine(); - } - //if(this.$scope.editForm['contactId'].$viewValue === '' && this.$scope.editForm['role'].$viewValue){ - // this.$scope.editForm.$setPristine(); - //} - }; } } diff --git a/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view.html b/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view.html index 9322ab00aa..89fd280205 100644 --- a/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view.html +++ b/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view.html @@ -13,7 +13,6 @@ ~ See the License for the specific language governing permissions and ~ limitations under the License. --> - <div ng-controller="Sdc.ViewModels.UserManagementViewModel"> <loader data-display="isLoading"></loader> <div class="sdc-user-management-top-bar"> @@ -22,48 +21,6 @@ <input type="text" class="sdc-user-management-top-bar-form-input" placeholder="Search user by name, userId, email or role" data-ng-model="search.filterTerm" ng-model-options="{ debounce: 500 }" data-tests-id="searchbox" /> <span class="w-sdc-search-icon" data-ng-class="{'cancel':search.filterTerm, 'magnification':!search.filterTerm}" data-ng-click="search.filterTerm=''" ></span> </div> - <div class="vertical-border-container"> - <div class="vertical-border"></div> - </div> - <form class="sdc-user-management-top-bar-create-user-container w-sdc-form" name="editForm"> - <label class="sdc-user-management-top-bar-title">Create New User</label> - <div class="sdc-user-management-top-bar-wrapper"> - <div class="i-sdc-form-item sdc-user-management-top-bar-form-container" data-ng-class="{error:(editForm.contactId.$dirty && editForm.contactId.$invalid)}"> - <input ng-focus="search.filterTerm=''" type="text" - data-ng-model="newUser.userInfo.userId" - class="i-sdc-form-input" - placeholder="{{ USER_MANAGEMENT_SEARCH_TEXT | translate}}" - data-ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 750, 'blur': 0 } }" - name="contactId" - data-ng-pattern="userIdValidationPattern" - data-ng-change="clearForm()" - data-ng-blur="clearForm()" - data-required - data-tests-id="newuserId" /> - - <div class="input-error" data-ng-show="editForm.contactId.$dirty && editForm.contactId.$invalid"> - <span ng-show="editForm.contactId.$error.required" translate="NEW_USER_ERROR_USER_ID_REQUIRED"></span> - <span ng-show="editForm.contactId.$error.pattern" translate="NEW_USER_ERROR_USER_ID_NOT_VALID"></span> - </div> - </div> - <div class="i-sdc-form-item sdc-user-management-top-bar-form-container" data-ng-class="{error:(editForm.role.$dirty && editForm.role.$invalid - && editForm.contactId.$viewValue)}"> - <select class="i-sdc-form-select capitalize" - data-required - name="role" - data-tests-id="selectrole" - data-ng-model = "newUser.userInfo.role" - data-ng-options="role as (getTitle(role)) for role in roles | orderBy:'role'" - ng-focus="search.filterTerm=''"> - <option value="">Select Role</option> - </select> - <div class="input-error" data-ng-show="editForm.role.$dirty && editForm.role.$invalid && editForm.contactId.$viewValue"> - <span ng-show="editForm.role.$error.required" translate="NEW_USER_ERROR_ROLE_REQUIRED"></span> - </div> - </div> - <button data-tests-id="creategreen" data-ng-disabled="editForm.$invalid" class="sdc-user-management-top-bar-create-btn" ng-click="search.filterTerm = '' ; createUser()">Create</button> - </div> - </form> </div> @@ -74,15 +31,13 @@ <div class="sdc-user-management-table-header head-row hand sdc-user-management-flex-item" data-tests-id="th{{header.title}}" ng-repeat="header in tableHeadersList" ng-click="sort(header.property)">{{header.title}} <span ng-if="sortBy === header.property" class="sdc-user-management-table-header-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"> </span> </div> - <div class="sdc-user-management-table-no-text-header head-row sdc-user-management-flex-item"></div> - <div class="sdc-user-management-table-no-text-header head-row sdc-user-management-flex-item"></div> </div> <div class="body"> <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container"> <div ng-init="user.filterTerm = user.firstName + ' ' + user.lastName + ' ' + user.userId + ' ' + user.email + ' ' + user.role + ' ' + (user.lastLoginTime | date: 'MM/dd/yyyy')" ng-repeat="user in usersList | filter: search | orderBy:sortBy:reverse" - data-ng-class="{'sdc-user-management-table-new-user-row': (isNewUser && $first), 'sdc-user-management-table-row-edit-mode': user.isInEditMode}" + data-ng-class="{'sdc-user-management-table-new-user-row': $first}" class="sdc-user-management-flex-container data-row" data-tests-id="row_{{$index}}"> <div sdc-smart-tooltip class="sdc-user-management-table-col-general sdc-user-management-flex-item" data-tests-id="firstName_{{$index}}">{{user.firstName || '---'}}</div> @@ -91,25 +46,10 @@ <div sdc-smart-tooltip class="sdc-user-management-table-col-general sdc-user-management-flex-item" data-tests-id="email_{{$index}}">{{user.email || '---'}}</div> <div class="sdc-user-management-table-col-general sdc-user-management-flex-item"> <div class="sdc-user-management-table-role-select capitalize sdc-user-management-table-role-label" - data-ng-if="!user.isInEditMode" data-tests-id="role_{{$index}}" data-ng-bind="getTitle(user.role)"></div> - <select class="sdc-user-management-table-role-select capitalize" - data-tests-id="selectRole_{{$index}}" - data-ng-if="user.isInEditMode" - data-ng-model="user.tempRole" - data-ng-options="role as (getTitle(role)) for role in roles | orderBy:'role'"> - </select> </div> <div class="sdc-user-management-table-col-general sdc-user-management-flex-item" data-tests-id="lastActive_{{$index}}">{{user.lastLoginTime == 0 ? 'Waiting' : (user.lastLoginTime | date:'MM/dd/yyyy')}}</div> - <div class="sdc-user-management-table-btn-col sdc-user-management-flex-item"> - <button data-ng-disabled="user.isInEditMode" data-ng-hide="user.isInEditMode || currentUser.userId === user.userId" class="sdc-user-management-table-edit-btn" ng-click="onEditUserPressed(user)" data-tests-id="updateUser_{{$index}}"> </button> - <button data-ng-show="user.isInEditMode" class="sdc-user-management-table-save-btn" ng-click="saveUserChanges(user)" data-tests-id="save_{{$index}}"> </button> - </div> - <div class="sdc-user-management-table-btn-col sdc-user-management-flex-item"> - <button data-ng-hide="currentUser.userId === user.userId" class="sdc-user-management-table-delete-btn" ng-click="deleteUser(user.userId)" data-tests-id="delete_{{$index}}"> </button> - </div> - </div> </perfect-scrollbar> </div> diff --git a/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management.less b/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management.less index 934faab9e7..d1528492de 100644 --- a/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management.less +++ b/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management.less @@ -4,8 +4,7 @@ label { .i_17; } - .sdc-user-management-top-bar-form-input, - .sdc-user-management-top-bar-form-select { + .sdc-user-management-top-bar-form-input { .b_9; color: @color_b; height: 28px; @@ -29,57 +28,6 @@ top: 49px; } } - .vertical-border-container { - min-width: 50px; - margin: 0px auto; - - .vertical-border { - - width: 1px; - height: 70px; - background-color: @color_e; - display: table; - margin: 0 auto; - } - } - - .sdc-user-management-top-bar-wrapper { - display: flex; - } - - .sdc-user-management-top-bar-title { - .i_17; - font-weight: bold; - } - - .sdc-user-management-top-bar-create-user-container { - - display: flex; - flex-direction: column; - position: relative; - float: right; - padding-top: 0px; - text-align: left; - width: 650px; - - label { - margin-bottom: 20px; - } - - .sdc-user-management-top-bar-form-container { - width: 233px; - margin-right: 35px; - } - - .sdc-user-management-top-bar-create-btn { - .w-sdc-btn-light-green; - height: 30px; - width: 100px; - line-height: 0px; - padding-bottom: 3px; - margin-right: 0px; - } - } } @@ -147,9 +95,6 @@ } } } - &.sdc-user-management-table-row-edit-mode { - .bg_j; - } div { border-right: 1px solid @border_color_d; @@ -176,33 +121,6 @@ } } - - .sdc-user-management-table-btn-col { - - line-height: 0px; - text-align: center; - .sdc-user-management-table-delete-btn { - background-color: transparent; - border: none; - .sprite; - .sprite.e-sdc-small-icon-delete; - opacity: 0.7; - } - .sdc-user-management-table-edit-btn { - background-color: transparent; - border: none; - .sprite; - .e-sdc-small-icon-pencil; - opacity: 0.7; - } - .sdc-user-management-table-save-btn { - background-color: transparent; - border: none; - .sprite; - .sprite.e-sdc-green-save; - } - } - } .sdc-user-management-flex-container { diff --git a/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts b/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts deleted file mode 100644 index 8840afd79d..0000000000 --- a/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts +++ /dev/null @@ -1,680 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; -import * as _ from "lodash"; -import {Component, IMainCategory, IGroup, IConfigStatuses, IAppMenu, IAppConfigurtaion, IUserProperties, ISubCategory, ICategoryBase} from "app/models"; -import {EntityService, CacheService} from "app/services"; -import {ComponentFactory, ResourceType, MenuHandler, ChangeLifecycleStateHandler} from "app/utils"; -import {UserService} from "../../ng2/services/user.service"; -import {ArchiveService} from "../../ng2/services/archive.service"; -import { ICatalogSelector, CatalogSelectorTypes } from "../../models/catalogSelector"; -import {IConfigStatus} from "../../models/app-config"; - -interface Checkboxes { - componentTypes:Array<string>; - resourceSubTypes:Array<string>; -} - -interface CheckboxesFilter { - // Types - selectedComponentTypes:Array<string>; - selectedResourceSubTypes:Array<string>; - // Categories - selectedCategoriesModel:Array<string>; - // Statuses - selectedStatuses:Array<Array<string>>; -} - -interface Gui { - isLoading:boolean; - onComponentSubTypesClick:Function; - onComponentTypeClick:Function; - onCategoryClick:Function; - onStatusClick:Function; - changeFilterTerm:Function; -} - -interface IFilterParams { - components: string[]; - categories: string[]; - statuses: (string)[]; - order: [string, boolean]; - term: string; - active: boolean; -} - -interface ICategoriesMap { - [key: string]: { - category: ICategoryBase, - parent: ICategoryBase - } -} - -export interface ICatalogViewModelScope extends ng.IScope { - checkboxes:Checkboxes; - checkboxesFilter:CheckboxesFilter; - gui:Gui; - - categories:Array<IMainCategory>; - confStatus:IConfigStatuses; - sdcMenu:IAppMenu; - catalogFilterdItems:Array<Component>; - expandedSection:Array<string>; - actionStrategy:any; - user:IUserProperties; - catalogMenuItem:any; - version:string; - sortBy:string; - reverse:boolean; - vfcmtType:string; - - //this is for UI paging - numberOfItemToDisplay:number; - isAllItemDisplay:boolean; - catalogFilteredItemsNum:number; - changeLifecycleState(entity:any, state:string):void; - sectionClick (section:string):void; - order(sortBy:string):void; - getElementFoundTitle(num:number):string; - goToComponent(component:Component):void; - raiseNumberOfElementToDisplay():void; - - selectedCatalogItem: ICatalogSelector; - catalogSelectorItems: Array<ICatalogSelector>; - showCatalogSelector: boolean; - catalogAllItems:Array<Component>; /* fake data */ - elementFoundTitle: string; - elementTypeTitle: string; - - selectLeftSwitchItem (item: ICatalogSelector): void; -} - -export class CatalogViewModel { - static '$inject' = [ - '$scope', - '$filter', - 'Sdc.Services.EntityService', - 'sdcConfig', - 'sdcMenu', - '$state', - '$q', - 'UserServiceNg2', - 'Sdc.Services.CacheService', - 'ComponentFactory', - 'ChangeLifecycleStateHandler', - 'MenuHandler', - 'ArchiveServiceNg2' - ]; - - private defaultFilterParams:IFilterParams = { - components: [], - categories: [], - statuses: [], - order: ['lastUpdateDate', true], - term: '', - active: true - }; - private categoriesMap:ICategoriesMap; - - constructor(private $scope:ICatalogViewModelScope, - private $filter:ng.IFilterService, - private EntityService:EntityService, - private sdcConfig:IAppConfigurtaion, - private sdcMenu:IAppMenu, - private $state:ng.ui.IStateService, - private $q:ng.IQService, - private userService:UserService, - private cacheService:CacheService, - private ComponentFactory:ComponentFactory, - private ChangeLifecycleStateHandler:ChangeLifecycleStateHandler, - private MenuHandler:MenuHandler, - private ArchiveService:ArchiveService - ) { - - - this.initLeftSwitch(); - this.initScopeMembers(); - this.loadFilterParams(); - this.initCatalogData(); // Async task to get catalog from server. - this.initScopeMethods(); - } - - - private initLeftSwitch = ():void => { - this.$scope.showCatalogSelector = false; - - this.$scope.catalogSelectorItems = [ - {value: CatalogSelectorTypes.Active, title: "Active Items", header: "Active"}, - {value: CatalogSelectorTypes.Archive, title: "Archive", header: "Archived"} - ]; - // set active items is default - this.$scope.selectedCatalogItem = this.$scope.catalogSelectorItems[0]; - }; - - private initCatalogData = ():void => { - if(this.$scope.selectedCatalogItem.value === CatalogSelectorTypes.Archive){ - this.getArchiveCatalogItems(); - } else { - this.getActiveCatalogItems(); - } - }; - - private initScopeMembers = ():void => { - // Gui init - this.$scope.gui = <Gui>{}; - this.$scope.numberOfItemToDisplay = 0; - this.$scope.categories = this.cacheService.get('serviceCategories').concat(this.cacheService.get('resourceCategories')).map((cat) => <IMainCategory>cat); - this.$scope.sdcMenu = this.sdcMenu; - this.$scope.confStatus = this.sdcMenu.statuses; - this.$scope.expandedSection = ["type", "category", "status"]; - this.$scope.user = this.userService.getLoggedinUser(); - this.$scope.catalogMenuItem = this.sdcMenu.catalogMenuItem; - - // Checklist init - this.$scope.checkboxes = <Checkboxes>{}; - this.$scope.checkboxes.componentTypes = ['Resource', 'Service']; - this.$scope.checkboxes.resourceSubTypes = ['VF', 'VFC', 'CR', 'PNF', 'CP', 'VL']; - this.categoriesMap = this.initCategoriesMap(); - - this.initCheckboxesFilter(); - this.$scope.version = this.cacheService.get('version'); - this.$scope.sortBy = 'lastUpdateDate'; - this.$scope.reverse = true; - - }; - - private initCheckboxesFilter() { - // Checkboxes filter init - this.$scope.checkboxesFilter = <CheckboxesFilter>{}; - this.$scope.checkboxesFilter.selectedComponentTypes = []; - this.$scope.checkboxesFilter.selectedResourceSubTypes = []; - this.$scope.checkboxesFilter.selectedCategoriesModel = []; - this.$scope.checkboxesFilter.selectedStatuses = []; - } - - private initCategoriesMap(categoriesList?:(ICategoryBase)[], parentCategory:ICategoryBase=null): ICategoriesMap { - categoriesList = (categoriesList) ? categoriesList : this.$scope.categories; - - // Init categories map - return categoriesList.reduce((acc, cat) => { - acc[cat.uniqueId] = { - category: cat, - parent: parentCategory - }; - const catChildren = ((<IMainCategory>cat).subcategories) - ? (<IMainCategory>cat).subcategories - : (((<ISubCategory>cat).groupings) - ? (<ISubCategory>cat).groupings - : null); - if (catChildren) { - Object.assign(acc, this.initCategoriesMap(catChildren, cat)); - } - return acc; - }, <ICategoriesMap>{}); - } - - private initScopeMethods = ():void => { - this.$scope.selectLeftSwitchItem = (item: ICatalogSelector): void => { - - if (this.$scope.selectedCatalogItem.value !== item.value) { - this.$scope.selectedCatalogItem = item; - switch (item.value) { - case CatalogSelectorTypes.Active: - this.getActiveCatalogItems(true); - break; - - case CatalogSelectorTypes.Archive: - this.getArchiveCatalogItems(true); - break; - } - this.changeFilterParams({active: (item.value === CatalogSelectorTypes.Active)}) - } - }; - - this.$scope.sectionClick = (section: string): void => { - let index: number = this.$scope.expandedSection.indexOf(section); - if (index !== -1) { - this.$scope.expandedSection.splice(index, 1); - } else { - this.$scope.expandedSection.push(section); - } - }; - - - this.$scope.order = (sortBy: string): void => {//default sort by descending last update. default for alphabetical = ascending - this.changeFilterParams({ - order: (this.$scope.filterParams.order[0] === sortBy) - ? [sortBy, !this.$scope.filterParams.order[1]] - : [sortBy, sortBy === 'lastUpdateDate'] - }); - }; - - - this.$scope.goToComponent = (component: Component): void => { - this.$scope.gui.isLoading = true; - this.$state.go('workspace.general', {id: component.uniqueId, type: component.componentType.toLowerCase()}); - }; - - - // Will print the number of elements found in catalog - this.$scope.getNumOfElements = (num:number):string => { - if (!num || num === 0) { - return `No <b>${this.$scope.selectedCatalogItem.header}</b> Elements found`; - } else if (num === 1) { - return `1 <b>${this.$scope.selectedCatalogItem.header}</b> Element found`; - } else { - return num + ` <b>${this.$scope.selectedCatalogItem.header}</b> Elements found`; - } - }; - - /** - * Select | unselect sub resource when resource is clicked | unclicked. - * @param type - */ - this.$scope.gui.onComponentTypeClick = (compType: string, checked?: boolean): void => { - let components = angular.copy(this.$scope.filterParams.components); - const compIdx = components.indexOf(compType); - checked = (checked !== undefined) ? checked : compIdx === -1; - if (checked && compIdx === -1) { - components.push(compType); - components = this.cleanSubsFromList(components); - } else if (!checked && compIdx !== -1) { - components.splice(compIdx, 1); - } - this.changeFilterParams({ - components: components - }); - }; - - /** - * Selecting | unselect resources when sub resource is clicked | unclicked. - */ - this.$scope.gui.onComponentSubTypesClick = (compSubType: string, compType: string, checked?: boolean): void => { - const componentSubTypesCheckboxes = this.$scope.checkboxes[compType.toLowerCase() + 'SubTypes']; - if (componentSubTypesCheckboxes) { - let components = angular.copy(this.$scope.filterParams.components); - let componentSubTypes = components.filter((st) => st.startsWith(compType + '.')); - - const compSubTypeValue = compType + '.' + compSubType; - const compSubTypeValueIdx = components.indexOf(compSubTypeValue); - checked = (checked !== undefined) ? checked : compSubTypeValueIdx === -1; - if (checked && compSubTypeValueIdx === -1) { - components.push(compSubTypeValue); - componentSubTypes.push(compSubTypeValue); - - // if all sub types are checked, then check the main component type - if (componentSubTypes.length === componentSubTypesCheckboxes.length) { - this.$scope.gui.onComponentTypeClick(compType, true); - return; - } - } else if (!checked) { - const compIdx = components.indexOf(compType); - // if sub type exists, then remove it - if (compSubTypeValueIdx !== -1) { - components.splice(compSubTypeValueIdx, 1); - } - // else, if sub type doesn't exists, but its parent main component type exists, - // then remove the main type and push all sub types except the current - else if (compIdx !== -1) { - components.splice(compIdx, 1); - componentSubTypesCheckboxes.forEach((st) => { - if (st !== compSubType) { - components.push(compType + '.' + st); - } - }); - } - } - - this.changeFilterParams({ - components - }); - } - }; - - this.$scope.gui.onCategoryClick = (category: ICategoryBase, checked?: boolean): void => { - let categories: string[] = angular.copy(this.$scope.filterParams.categories); - let parentCategory: ICategoryBase = this.categoriesMap[category.uniqueId].parent; - - // add the category to selected categories list - const categoryIdx = categories.indexOf(category.uniqueId); - checked = (checked !== undefined) ? checked : categoryIdx === -1; - if (checked && categoryIdx === -1) { - categories.push(category.uniqueId); - - // check if all parent category children are checked, then check the parent category - if (parentCategory) { - if (this.getParentCategoryChildren(parentCategory).every((ch) => categories.indexOf(ch.uniqueId) !== -1)) { - this.$scope.gui.onCategoryClick(parentCategory, true); - return; - } - } - - categories = this.cleanSubsFromList(categories); - } else if (!checked) { - // if category exists, then remove it - if (categoryIdx !== -1) { - categories.splice(categoryIdx, 1); - } - // else, if category doesn't exists, but one of its parent categories exists, - // then remove that parent category and push all its children categories except the current - else { - let prevParentCategory: ICategoryBase = category; - let additionalCategories: string[] = []; - while (parentCategory) { - // add parent category children to list for replacing the parent category (if will be found later) - additionalCategories = additionalCategories.concat( - this.getParentCategoryChildren(parentCategory) - .filter((ch) => ch.uniqueId !== prevParentCategory.uniqueId) - .map((ch) => ch.uniqueId)); - - const parentCategoryIdx = categories.indexOf(parentCategory.uniqueId); - if (parentCategoryIdx !== -1) { - categories.splice(parentCategoryIdx, 1); - categories = categories.concat(additionalCategories); - break; - } else { - prevParentCategory = parentCategory; - parentCategory = this.categoriesMap[parentCategory.uniqueId].parent; - } - } - } - } - - this.changeFilterParams({ - categories - }); - }; - - this.$scope.gui.onStatusClick = (statusKey: string, status: IConfigStatus, checked?: boolean) => { - const statuses = angular.copy(this.$scope.filterParams.statuses); - - // add the status key to selected statuses list - const statusIdx = statuses.indexOf(statusKey); - checked = (checked !== undefined) ? checked : statusIdx === -1; - if (checked && statusIdx === -1) { - statuses.push(statusKey); - } else if (!checked && statusIdx !== -1) { - statuses.splice(statusIdx, 1); - } - - this.changeFilterParams({ - statuses - }); - }; - - this.$scope.gui.changeFilterTerm = (filterTerm: string) => { - this.changeFilterParams({ - term: filterTerm - }); - }; - - this.$scope.raiseNumberOfElementToDisplay = (): void => { - this.$scope.numberOfItemToDisplay = this.$scope.numberOfItemToDisplay + 35; - if (this.$scope.catalogFilterdItems) { - this.$scope.isAllItemDisplay = this.$scope.numberOfItemToDisplay >= this.$scope.catalogFilterdItems.length; - } - }; - - } - - private getAllCategoryChildrenIdsFlat(category:ICategoryBase) { - let catChildrenIds = []; - if ((<IMainCategory>category).subcategories) { - catChildrenIds = (<IMainCategory>category).subcategories.reduce((acc, scat) => { - return acc.concat(this.getAllCategoryChildrenIdsFlat(scat)); - }, (<IMainCategory>category).subcategories.map((scat) => scat.uniqueId)); - } - else if ((<ISubCategory>category).groupings) { - catChildrenIds = (<ISubCategory>category).groupings.map((g) => g.uniqueId); - } - return catChildrenIds; - } - - private getParentCategoryChildren(parentCategory:ICategoryBase): ICategoryBase[] { - if ((<IMainCategory>parentCategory).subcategories) { - return (<IMainCategory>parentCategory).subcategories; - } else if ((<ISubCategory>parentCategory).groupings) { - return (<ISubCategory>parentCategory).groupings; - } - return []; - } - - private cleanSubsFromList(list:Array<string>, delimiter:string='.', removeSubsList?:Array<string>) { - let curRemoveSubsList = (removeSubsList || list).slice().sort(); // by default remove any children of any item in list - while (curRemoveSubsList.length) { - const curRemoveSubItem = curRemoveSubsList.shift(); - const removeSubListFilter = (x) => !x.startsWith(curRemoveSubItem + delimiter); - list = list.filter(removeSubListFilter); - curRemoveSubsList = curRemoveSubsList.filter(removeSubListFilter); - } - return list; - } - - private applyFilterParamsToView(filterParams:IFilterParams) { - // reset checkboxes filter - this.initCheckboxesFilter(); - - this.applyFilterParamsComponents(filterParams); - this.applyFilterParamsCategories(filterParams); - this.applyFilterParamsStatuses(filterParams); - this.applyFilterParamsOrder(filterParams); - this.applyFilterParamsTerm(filterParams); - } - - private applyFilterParamsComponents(filterParams:IFilterParams) { - const componentList = []; - const componentSubTypesLists = {}; - filterParams.components.forEach((compStr) => { - const compWithSub = compStr.split('.', 2); - const mainComp = compWithSub[0]; - const subComp = compWithSub[1]; - if (!subComp) { // main component type - componentList.push(mainComp); - - // if component type has sub types list, then add all component sub types - const checkboxesSubTypeKey = mainComp.toLowerCase() + 'SubTypes'; - if (this.$scope.checkboxes.hasOwnProperty(checkboxesSubTypeKey)) { - componentSubTypesLists[mainComp] = angular.copy(this.$scope.checkboxes[checkboxesSubTypeKey]); - } - } else { // sub component type - // init component sub types list - if (!componentSubTypesLists.hasOwnProperty(mainComp)) { - componentSubTypesLists[mainComp] = []; - } - // add sub type to list if not exist - if (componentSubTypesLists[mainComp].indexOf(subComp) === -1) { - componentSubTypesLists[mainComp].push(subComp); - } - } - }); - this.$scope.checkboxesFilter.selectedComponentTypes = componentList; - Object.keys(componentSubTypesLists).forEach((tKey) => { - const compSelectedSubTypeKey = 'selected' + tKey + 'SubTypes'; - if (this.$scope.checkboxesFilter.hasOwnProperty(compSelectedSubTypeKey)) { - this.$scope.checkboxesFilter[compSelectedSubTypeKey] = componentSubTypesLists[tKey]; - } - }); - - let selectedCatalogIndex = filterParams.active ? CatalogSelectorTypes.Active : CatalogSelectorTypes.Archive; - this.$scope.selectedCatalogItem = this.$scope.catalogSelectorItems[selectedCatalogIndex]; - - } - - private applyFilterParamsCategories(filterParams:IFilterParams) { - this.$scope.checkboxesFilter.selectedCategoriesModel = filterParams.categories.reduce((acc, c) => { - acc.push(c); - const cat = this.categoriesMap[c].category; - if (cat) { - acc = acc.concat(this.getAllCategoryChildrenIdsFlat(cat)); - } - return acc; - }, []); - } - - private getActiveCatalogItems(forceReload?: boolean): void { - - if (forceReload || this.componentShouldReload()) { - this.$scope.gui.isLoading = true; - let onSuccess = (followedResponse:Array<Component>):void => { - this.updateCatalogItems(followedResponse); - this.$scope.gui.isLoading = false; - this.cacheService.set('breadcrumbsComponentsState', this.$state.current.name); //catalog - this.cacheService.set('breadcrumbsComponents', followedResponse); - }; - - let onError = ():void => { - console.info('Failed to load catalog CatalogViewModel::getActiveCatalogItems'); - this.$scope.gui.isLoading = false; - }; - this.EntityService.getCatalog().then(onSuccess, onError); - } else { - let cachedComponents = this.cacheService.get('breadcrumbsComponents'); - this.updateCatalogItems(cachedComponents); - } - } - - private getArchiveCatalogItems(forceReload?: boolean): void { - if(forceReload || !this.cacheService.contains("archiveComponents")) { - this.$scope.gui.isLoading = true; - let onSuccess = (followedResponse:Array<Component>):void => { - this.cacheService.set("archiveComponents", followedResponse); - this.updateCatalogItems(followedResponse); - this.$scope.gui.isLoading = false; - }; - - let onError = ():void => { - console.info('Failed to load catalog CatalogViewModel::getArchiveCatalogItems'); - this.$scope.gui.isLoading = false; - }; - - this.ArchiveService.getArchiveCatalog().subscribe(onSuccess, onError); - } else { - let archiveCache = this.cacheService.get("archiveComponents"); - this.updateCatalogItems(archiveCache); - } - - } - - private updateCatalogItems = (items:Array<Component>):void => { - this.$scope.catalogFilterdItems = items; - this.$scope.isAllItemDisplay = this.$scope.numberOfItemToDisplay >= this.$scope.catalogFilterdItems.length; - this.$scope.categories = this.cacheService.get('serviceCategories').concat(this.cacheService.get('resourceCategories')); - } - - private componentShouldReload = ():boolean => { - let breadcrumbsValid: boolean = (this.$state.current.name === this.cacheService.get('breadcrumbsComponentsState') && this.cacheService.contains('breadcrumbsComponents')); - return !breadcrumbsValid || this.isDefaultFilter(); - } - - private isDefaultFilter = (): boolean => { - return angular.equals(this.defaultFilterParams, this.$scope.filterParams); - } - - private applyFilterParamsStatuses(filterParams: IFilterParams) { - this.$scope.checkboxesFilter.selectedStatuses = filterParams.statuses.reduce((acc, stKey:string) => { - const status = this.$scope.confStatus[stKey]; - if (status) { - acc.push(status.values); - } - return acc; - }, []); - } - - private applyFilterParamsOrder(filterParams: IFilterParams) { - this.$scope.sortBy = filterParams.order[0]; - this.$scope.reverse = filterParams.order[1]; - } - - private applyFilterParamsTerm(filterParams: IFilterParams) { - this.$scope.search = { - filterTerm: filterParams.term - }; - } - - private loadFilterParams() { - const params = this.$state.params; - this.$scope.filterParams = angular.copy(this.defaultFilterParams); - Object.keys(params).forEach((k) => { - if (!angular.isUndefined(params[k])) { - let newVal; - let filterKey = k.substr('filter.'.length); - switch (k) { - case 'filter.components': - case 'filter.categories': - newVal = _.uniq(params[k].split(',')); - newVal = this.cleanSubsFromList(newVal); - break; - case 'filter.statuses': - newVal = _.uniq(params[k].split(',')); - break; - case 'filter.order': - newVal = params[k].startsWith('-') ? [params[k].substr(1), true] : [params[k], false]; - break; - case 'filter.term': - newVal = params[k]; - break; - case 'filter.active': - newVal = (params[k] === "true" || params[k] === true); - break; - default: - // unknown filter key - filterKey = null; - } - if (filterKey) { - this.$scope.filterParams[filterKey] = newVal; - } - } - }); - // re-set filter params with valid values - this.applyFilterParamsToView(this.$scope.filterParams); - - } - - private changeFilterParams(changedFilterParams) { - const newParams = {}; - Object.keys(changedFilterParams).forEach((k) => { - let newVal; - switch (k) { - case 'components': - case 'categories': - case 'statuses': - newVal = changedFilterParams[k] && changedFilterParams[k].length ? changedFilterParams[k].join(',') : null; - break; - case 'order': - newVal = (changedFilterParams[k][1] ? '-' : '') + changedFilterParams[k][0]; - break; - case 'term': - newVal = changedFilterParams[k] ? changedFilterParams[k] : null; - break; - case 'active': - newVal = changedFilterParams[k]; - break; - default: - return; - } - this.$scope.filterParams[k] = changedFilterParams[k]; - newParams['filter.' + k] = newVal; - }); - this.$state.go('.', newParams, {location: 'replace', notify: false}).then(() => { - this.applyFilterParamsToView(this.$scope.filterParams); - }); - } -} diff --git a/catalog-ui/src/app/view-models/catalog/catalog-view.html b/catalog-ui/src/app/view-models/catalog/catalog-view.html deleted file mode 100644 index 25fa561155..0000000000 --- a/catalog-ui/src/app/view-models/catalog/catalog-view.html +++ /dev/null @@ -1,209 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<div class="sdc-catalog-container"> - - <loader data-display="gui.isLoading"></loader> -<!-- - <ecomp-header menu-data="menuItems" version="{{version}}"></ecomp-header> ---> - - <div class="w-sdc-main-container"> - - <div - class="i-sdc-designer-leftbar-section-left-switch-header" - data-tests-id="catalog-selector-button" - data-ng-click="showCatalogSelector=!showCatalogSelector"> - <div class="i-sdc-designer-leftbar-section-left-switch-header-text"> - {{selectedCatalogItem.title}} - </div> - <div class="i-sdc-designer-leftbar-section-left-switch-header-icon sprite-new arrow-up-small"> </div> - - <div - class="sdc-catalog-selector-wrapper" - data-ng-show="showCatalogSelector"> - <div - class="sdc-catalog-selector-item" - data-ng-repeat="leftSwitchItem in catalogSelectorItems track by $index" - data-tests-id="catalog-selector-{{leftSwitchItem.value}}" - data-ng-click="selectLeftSwitchItem(leftSwitchItem)"> - <span>{{leftSwitchItem.title}}</span> - </div> - </div> - </div> - - <!-- LEFT SIDE --> - <perfect-scrollbar scroll-y-margin-offset="0" class="sdc-catalog-body-container w-sdc-left-sidebar i-sdc-designer-left-sidebar" include-padding="true"> - <div class="sdc-catalog-leftbar-container"> - <div class="sdc-catalog-type-filter-container"> - <div - class="i-sdc-designer-leftbar-section-title pointer" - data-ng-click="sectionClick('type')" - data-ng-class="{'expanded': expandedSection.indexOf('type') !== -1}"> - <span class="i-sdc-designer-leftbar-section-title-icon"></span> - <span class="i-sdc-designer-leftbar-section-title-text" data-tests-id="typeFilterTitle">Type</span> - </div> - <div class="i-sdc-designer-leftbar-section-content"> - <ul class="list-unstyled i-sdc-designer-leftbar-section-content-ul"> - <li class="i-sdc-designer-leftbar-section-content-ul-li" data-ng-repeat="type in checkboxes.componentTypes"> - - <ng1-checkbox elem-id="checkbox-{{type | lowercase | clearWhiteSpaces}}" - sdc-checklist-model="checkboxesFilter.selectedComponentTypes" - sdc-checklist-value="type" - sdc-checked-change="gui.onComponentTypeClick(type, checked)" - text="{{type}}"></ng1-checkbox> - - <ul class="list-unstyled i-sdc-catalog-subcategories-checkbox" data-ng-if="type==='Resource'"> - <li data-ng-repeat="subType in checkboxes.resourceSubTypes"> - - <ng1-checkbox elem-id="checkbox-{{subType | lowercase | clearWhiteSpaces}}" - sdc-checklist-model="checkboxesFilter.selectedResourceSubTypes" - sdc-checklist-value="subType" - sdc-checked-change="gui.onComponentSubTypesClick(subType, type, checked)" - text="{{subType}}"></ng1-checkbox> - - </li> - </ul> - </li> - </ul> - </div> - </div> - - <div class="sdc-catalog-categories-filter-container"> - <div - class="i-sdc-designer-leftbar-section-title pointer" - data-ng-click="sectionClick('category')" - data-ng-class="{'expanded': expandedSection.indexOf('category') !== -1}"> - <span class="i-sdc-designer-leftbar-section-title-icon"></span> - <span class="i-sdc-designer-leftbar-section-title-text" data-tests-id="categoriesFilterTitle">Categories</span> - </div> - <div class="i-sdc-designer-leftbar-section-content"> - <!-- CATEGORY CHECKBOX --> - <ul class="list-unstyled i-sdc-designer-leftbar-section-content-ul"> - <li class="i-sdc-designer-leftbar-section-content-ul-li" - data-ng-repeat="category in categories | categoryTypeFilter:checkboxesFilter.selectedComponentTypes:checkboxesFilter.selectedResourceSubTypes | orderBy: category"> - - <ng1-checkbox elem-id="checkbox-{{category.uniqueId | lowercase | clearWhiteSpaces}}" - sdc-checklist-model="checkboxesFilter.selectedCategoriesModel" - sdc-checklist-value="category.uniqueId" - sdc-checked-change="gui.onCategoryClick(category, checked)" - data-tests-id="{{category.uniqueId}}" - text="{{category.name}}"></ng1-checkbox> - - <!-- SUB CATEGORY CHECKBOX --> - <ul class="list-unstyled i-sdc-catalog-subcategories-checkbox" data-ng-if="category.subcategories && category.subcategories.length>0"> - <li ng-repeat="subcategory in category.subcategories track by subcategory.uniqueId | orderBy:'name'"> - - <ng1-checkbox elem-id="checkbox-{{subcategory.uniqueId | lowercase | clearWhiteSpaces}}" - sdc-checklist-model="checkboxesFilter.selectedCategoriesModel" - sdc-checklist-value="subcategory.uniqueId" - sdc-checked-change="gui.onCategoryClick(subcategory, checked)" - data-tests-id="{{subcategory.uniqueId}}" - text="{{subcategory.name}}"></ng1-checkbox> - - <!-- GROUPING CHECKBOX --> - <ul class=" list-unstyled i-sdc-catalog-grouping-checkbox" data-ng-if="subcategory.groupings && subcategory.groupings.length>0"> - <li ng-repeat="grouping in subcategory.groupings track by grouping.uniqueId | orderBy:'name'"> - - <ng1-checkbox elem-id="checkbox-{{grouping.uniqueId | lowercase | clearWhiteSpaces}}" - sdc-checklist-model="checkboxesFilter.selectedCategoriesModel" - sdc-checklist-value="grouping.uniqueId" - sdc-checked-change="gui.onCategoryClick(grouping, checked)" - text="{{grouping.name}}"></ng1-checkbox> - - </li> - </ul> - </li><!-- Close subcategory --> - </ul><!-- Close subcategories --> - </li><!-- Close main category --> - </ul><!-- Close main categories --> - - </div> - </div> - - <!-- STATUS --> - <div class="sdc-catalog-status-filter-container"> - <div - class="i-sdc-designer-leftbar-section-title pointer" - data-ng-click="sectionClick('status')" - data-ng-class="{'expanded': expandedSection.indexOf('status') !== -1}"> - <span class="i-sdc-designer-leftbar-section-title-icon"></span> - <span class="i-sdc-designer-leftbar-section-title-text" data-tests-id="statusFilterTitle">Status</span> - </div> - - <div class="i-sdc-designer-leftbar-section-content"> - <ul class="list-unstyled i-sdc-designer-leftbar-section-content-ul"> - <!--li data-ng-repeat="(key, value) in confStatus" --> - - <li class="i-sdc-designer-leftbar-section-content-ul-li" - data-ng-repeat="(key, state) in confStatus"> - - <ng1-checkbox elem-id="checkbox-{{key | lowercase | clearWhiteSpaces}}" - sdc-checklist-model="checkboxesFilter.selectedStatuses" - sdc-checklist-value="state.values" - sdc-checked-change="gui.onStatusClick(key, state, checked)" - text="{{state.name}}"></ng1-checkbox> - - <div class="i-sdc-categories-list-item-icon"></div> - </li> - </ul> - </div> - </div> - - </div> - </perfect-scrollbar> - - <!-- RIGHT SIDE --> - <perfect-scrollbar id="catalog-main-scroll" include-padding="true" class="w-sdc-main-right-container w-sdc-catalog-main"> - - <!-- HEADER --> - <div> - <div class="w-sdc-dashboard-catalog-items-header" - ng-bind-html="getNumOfElements((catalogFilterdItems| entityFilter:checkboxesFilter | filter:search).length)" - ></div> - <div class="w-sdc-dashboard-catalog-header-right"> - <span class="w-sdc-dashboard-catalog-header-order1" translate="SORT_CAPTION"></span> - <a class="w-sdc-dashboard-catalog-sort" data-tests-id="sort-by-last-update" data-ng-class="{'blue' : sortBy==='lastUpdateDate'}" - ng-click="order('lastUpdateDate')" translate="SORT_BY_UPDATE_DATE"></a> - <span data-ng-show="sortBy === 'lastUpdateDate'" class="w-sdc-catalog-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"></span> - | - <a class="w-sdc-dashboard-catalog-sort" data-tests-id="sort-by-alphabetical" data-ng-class="{'blue' : sortBy!=='lastUpdateDate'}" - ng-click="order('name|resourceName')" translate="SORT_ALPHABETICAL"></a> - <span data-ng-show="sortBy !== 'lastUpdateDate'" class="w-sdc-catalog-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"></span> - </div> - </div> - - <div infinite-scroll-disabled='isAllItemDisplay' infinite-scroll="raiseNumberOfElementToDisplay()" infinite-scroll-container="'#catalog-main-scroll'" infinite-scroll-distance="'0.2'" infinite-scroll-parent> - - <div class='w-sdc-row-flex-items'> - - <!-- Tile new --> - <ng2-ui-tile data-ng-repeat="component in catalogFilterdItems| entityFilter:checkboxesFilter | filter:search | orderBy:sortBy:reverse | limitTo:numberOfItemToDisplay" - data-ng-init="component.filterTerm = component.name + ' ' + component.description + ' ' + component.tags.toString() + ' ' + component.version;" - [component]="component" (on-tile-click)="gui.isLoading || goToComponent(component)"></ng2-ui-tile> - <!-- Tile new --> - - </div> - - </div> - </perfect-scrollbar> - - </div> - - <top-nav [top-lvl-selected-index]="1" [search-term]="search.filterTerm" (search-term-change)="gui.changeFilterTerm($event)" [version]="version"></top-nav> - - -</div> diff --git a/catalog-ui/src/app/view-models/catalog/catalog.less b/catalog-ui/src/app/view-models/catalog/catalog.less deleted file mode 100644 index 45556030e3..0000000000 --- a/catalog-ui/src/app/view-models/catalog/catalog.less +++ /dev/null @@ -1,362 +0,0 @@ -.sdc-catalog-container { - - .i-sdc-categories-list-item { - font-weight: normal; - } - - // Checkboxes - .i-sdc-designer-leftbar-section-content-ul { - padding: 0; - margin: 0; - - .i-sdc-designer-leftbar-section-content-ul-li { - margin-top: 5px; - - .tlv-checkbox { - font-size: 13px; - font-family: @font-opensans-medium; - color: @func_color_s; - } - } - - .i-sdc-catalog-subcategories-checkbox { - padding: 0 0 0 20px; - margin: 0; - - > li { - margin-top: 5px; - - .tlv-checkbox { - font-size:13px; - font-family: @font-opensans-regular; - } - } - - .i-sdc-catalog-grouping-checkbox { - padding: 0 0 0 20px; - margin: 0; - } - - } - - } - - .i-sdc-designer-leftbar-section-content-li { - &:last-child { - .i-sdc-categories-list-item { - margin: 0; - } - } - } - - .i-sdc-categories-list-item { - display: block; - //margin-bottom: 5px; - //padding-left: 15px; - //text-indent: -24px; - vertical-align: top; - font-weight: bold; - } - - .i-sdc-subcategories-list-item { - display: block; - //padding-left: 20px; - vertical-align: top; - font-weight: normal; - margin: 0; - //text-indent: -10px; - } - - .i-sdc-categories-list-item-icon { - display: inline-block; - float: right; - position: relative; - right: -8px; - top: 6px; - } - - .i-sdc-categories-list-item { - margin-top: 7px; - &.NOT_CERTIFIED_CHECKOUT, - &.NOT_CERTIFIED_CHECKIN { - .i-sdc-categories-list-item-icon { - background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -2889px; - width: 14px; - height: 14px; - - } - } - - &.CERTIFIED { - .i-sdc-categories-list-item-icon { - background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -3034px; - width: 14px; - height: 16px; - } - } - - &.READY_FOR_CERTIFICATION { - .i-sdc-categories-list-item-icon { - background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -2985px; - width: 14px; - height: 16px; - } - } - - &.CERTIFICATION_IN_PROGRESS { - .i-sdc-categories-list-item-icon { - background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -2934px; - width: 14px; - height: 16px; - } - } - - &.DISTRIBUTED, - &.TBD { - .i-sdc-categories-list-item-icon { - background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -43px -3087px; - width: 24px; - height: 14px; - - } - } - } - - .i-sdc-categories-list-input { - margin: 8px; - - } - - .i-sdc-subcategories-list-input { - - margin: 8px; - } - .i-sdc-subcategories-list-input-container { - margin: 0px 0px 0px 20px; - padding: 2px; - } - - .w-sdc-header-catalog-search-container { - display: table; - padding: 21px 0; - position: relative; - - .w-sdc-designer-leftbar-search-input { - color: #000; - width: 300px; - } - } - - .w-sdc-catalog-main { - padding: 10px 12px; - } - .w-sdc-dashboard-catalog-items-header { - .b_3; - color: @main_color_m; - font-family: OpenSans-Regular, sans-serif; - font-size: 14px; - display: inline-block; - font-style: normal; - margin-left: 11px; - b { - font-family: OpenSans-Bold, sans-serif; - color: @main_color_l; - font-weight: bold; - } - font-weight: normal; - /* padding-left: 10px; */ - } - - .w-sdc-dashboard-catalog-header-order1 { - .b_3; - font-weight: 800; - } - - .w-sdc-dashboard-catalog-sort { - .b_3; - font-weight: bold; - white-space:pre; - &:hover{ - .hand; - text-decoration: none; - .a_3; - } - &.blue { - .a_3; - } - } - - .w-sdc-catalog-sort-arrow{ - display: inline-block; - &.up{ - .b_3; - width: 0; - height: 0; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 5px solid ; - } - &.down{ - .b_3; - width: 0; - height: 0; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 5px solid; - } - } - - - .w-sdc-dashboard-catalog-header-right{ - float: right; - display: inline-block; - padding-right:34px; - } - - .w-sdc-header-catalog-search-input { - width: 420px; - display: table-cell; - padding: 0 25px 1px 10px; - border: 1px solid #bcbcbc; - .border-radius(10px); - height: 30px; - margin: 10px 30px; - outline: none; - } - - .sdc-catalog-type-filter-container { - margin-top: -1px; - } - - .i-sdc-designer-leftbar-section-title { - text-transform: uppercase; - .l_14_m; - line-height: 30px; - } - - .i-sdc-designer-leftbar-section-title-icon { - .hand; - .tlv-sprite; - .footer-close; - transition: .3s all; - margin-top: -4px; - } - - .i-sdc-designer-leftbar-section-title-text { - margin-left: 20px; - } - - /* added Michael */ - .i-sdc-designer-left-sidebar { - margin-top: 43px; - } - .i-sdc-designer-leftbar-section-left-switch-header { - text-transform: uppercase; - .l_14_m; - line-height: 40px; - width: 243px; - - font-family: OpenSans-Bold, sans-serif; - font-size: 14px; - - color: @main_color_a; - background-color: @tlv_color_t; - border: solid 1px fade(@main_color_t, 40%); - cursor: pointer; - opacity: 1; - z-index: 9999; - position: relative; - //box-shadow: 1px 0 2px #00000036; - } - .i-sdc-designer-leftbar-section-left-switch-header-text { - display: inline-block; - width: 180px; - margin-left: 20px; - } - .i-sdc-designer-leftbar-section-left-switch-header-icon { - display: inline-block; - vertical-align: middle; - } - - - .seperator-left, - .seperator-right { - border-right: solid 1px @color_m; - display: table-cell; - width: 2px; - } - - // Rotate catalog left side arrows - .i-sdc-designer-leftbar-section-title.expanded .i-sdc-designer-leftbar-section-title-icon { - transform: rotate(180deg); - } - - // Transform catalog left side sections - .i-sdc-designer-leftbar-section-title + .i-sdc-designer-leftbar-section-content { - max-height: 0px; - margin: 0 auto; - transition: all .3s; - overflow: hidden; - padding: 0 10px 0 18px; - } - - .i-sdc-designer-leftbar-section-title.expanded + .i-sdc-designer-leftbar-section-content { - max-height: 9999px; - margin: 0 auto 1px; - transition: all .3s; - padding: 10px 18px 10px 18px; - overflow: hidden; - } - -} - -.w-sdc-search-icon{ - position: absolute; - right: 40px; - top: 40px; - &.leftbar{ - top: 19px; - right: 18px; - } - &.magnification { - .sprite; - .sprite.magnification-glass; - .hand; - } - - &.cancel { - .sprite; - .sprite.clear-text; - .hand; - } -} - -/* added Michael */ -.sdc-catalog-selector-wrapper { - position: absolute; - left: 0px; - top: 42px; - width: 241px; - height: auto; - cursor: pointer; - opacity: 1; - z-index: 1000; - box-shadow: 1px 2px 3px #b1b1b1; -} - -.sdc-catalog-selector-item { - text-transform: none; - line-height: 40px; - font-family: OpenSans-Bold, sans-serif; - font-size: 14px; - color: @main_color_l; - background-color: @main_color_p; - padding-left: 20px; -} - -.sdc-catalog-selector-item:hover { - color: @main_color_a; - background-color: @tlv_color_v; -} - - diff --git a/catalog-ui/src/app/view-models/dashboard/dashboard-view-model.ts b/catalog-ui/src/app/view-models/dashboard/dashboard-view-model.ts deleted file mode 100644 index 4d084045f7..0000000000 --- a/catalog-ui/src/app/view-models/dashboard/dashboard-view-model.ts +++ /dev/null @@ -1,497 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; -import {IConfigRoles, IAppConfigurtaion, IAppMenu, IUserProperties, Component} from "app/models"; -import {EntityService, SharingService, CacheService} from "app/services"; -import {ComponentType, ResourceType, MenuHandler, ModalsHandler, ChangeLifecycleStateHandler, SEVERITY, ComponentFactory, CHANGE_COMPONENT_CSAR_VERSION_FLAG} from "app/utils"; -import {IClientMessageModalModel} from "../modals/message-modal/message-client-modal/client-message-modal-view-model"; -import {UserService} from "../../ng2/services/user.service"; - - -export interface IDashboardViewModelScope extends ng.IScope { - - isLoading:boolean; - numberOfItemToDisplay:number; - components:Array<Component>; - folders:FoldersMenu; - roles:IConfigRoles; - user:IUserProperties; - sdcConfig:IAppConfigurtaion; - sdcMenu:IAppMenu; - sharingService:SharingService; - showTutorial:boolean; - isFirstTime:boolean; - version:string; - filterParams:DashboardFilter; - vfcmtType:string; - - changeFilterParams():void; - updateSearchTerm(newTerm:string):void; - onImportVfc(file:any):void; - onImportVf(file:any):void; - openCreateModal(componentType:ComponentType, importedFile:any):void; - openWhatsNewModal(version:string):void; - openDesignerModal(isResource:boolean, uniqueId:string):void; - setSelectedFolder(folderItem:FoldersItemsMenu):void; - entitiesCount(folderItem:FoldersItemsMenu):number; - getCurrentFolderDistributed():Array<Component>; - changeLifecycleState(entity:any, data:any):void; - goToComponent(component:Component):void; - raiseNumberOfElementToDisplay():void; - wizardDebugEdit:Function; - notificationIconCallback:Function; -} - -interface ICheckboxesFilter { - // Statuses - selectedStatuses:Array<string>; - // distributed - distributed:Array<string>; -} - -export interface IItemMenu { - -} - -export interface IMenuItemProperties { - text:string; - group:string; - state:string; - dist:string; - groupname:string; - states:Array<any>; -} - -export interface IQueryFilterParams { - 'filter.term': string; - 'filter.distributed': string; - 'filter.status': string -} - - -export class DashboardFilter { - searchTerm: string; - checkboxes: ICheckboxesFilter; - - constructor(params = {}) { - this.searchTerm = params['filter.term'] || ""; - this.checkboxes = { - selectedStatuses : params['filter.status']? params['filter.status'].split(',') : [], - distributed : params['filter.distributed']? params['filter.distributed'].split(',') : [] - }; - } - - public toParam = ():IQueryFilterParams => { - return { - 'filter.term': this.searchTerm, - 'filter.distributed': this.checkboxes && this.checkboxes.distributed.join(',') || null, - 'filter.status': this.checkboxes && this.checkboxes.selectedStatuses.join(',') || null - }; - } - -} - -export class FoldersMenu { - - private _folders:Array<FoldersItemsMenu> = []; - - constructor(folders:Array<IMenuItemProperties>) { - let self = this; - folders.forEach(function (folder:IMenuItemProperties) { - if (folder.groupname) { - self._folders.push(new FoldersItemsMenuGroup(folder)); - } else { - self._folders.push(new FoldersItemsMenu(folder)); - } - }); - self._folders[0].setSelected(true); - } - - public getFolders = ():Array<FoldersItemsMenu> => { - return this._folders; - }; - - public getCurrentFolder = ():FoldersItemsMenu => { - let menuItem:FoldersItemsMenu = undefined; - this.getFolders().forEach(function (tmpFolder:FoldersItemsMenu) { - if (tmpFolder.isSelected()) { - menuItem = tmpFolder; - } - }); - return menuItem; - }; - - public setSelected = (folder:FoldersItemsMenu):void => { - this.getFolders().forEach(function (tmpFolder:FoldersItemsMenu) { - tmpFolder.setSelected(false); - }); - folder.setSelected(true); - } - -} - -export class FoldersItemsMenu implements IItemMenu { - - public text:string; - public group:string; - public state:string; - public dist:string; - public states:Array<any>; - - private selected:boolean = false; - - constructor(menuProperties:IMenuItemProperties) { - this.text = menuProperties.text; - this.group = menuProperties.group; - this.state = menuProperties.state; - this.states = menuProperties.states; - this.dist = menuProperties.dist; - } - - public isSelected = ():boolean => { - return this.selected; - }; - - public setSelected = (value:boolean):void => { - this.selected = value; - }; - - public isGroup = ():boolean => { - return false; - } - -} - -export class FoldersItemsMenuGroup extends FoldersItemsMenu { - - public groupname:string; - - constructor(menuProperties:IMenuItemProperties) { - super(menuProperties); - this.groupname = menuProperties.groupname; - } - - public isGroup = ():boolean => { - return true; - } - -} - -export class DashboardViewModel { - static '$inject' = [ - '$scope', - '$filter', - 'Sdc.Services.EntityService', - '$http', - 'sdcConfig', - 'sdcMenu', - '$state', - '$stateParams', - 'UserServiceNg2', - 'Sdc.Services.SharingService', - 'Sdc.Services.CacheService', - '$q', - 'ComponentFactory', - 'ChangeLifecycleStateHandler', - 'ModalsHandler', - 'MenuHandler' - ]; - - private components:Array<Component>; - - constructor(private $scope:IDashboardViewModelScope, - private $filter:ng.IFilterService, - private entityService:EntityService, - private $http:ng.IHttpService, - private sdcConfig:IAppConfigurtaion, - private sdcMenu:IAppMenu, - private $state:ng.ui.IStateService, - private $stateParams:any, - private userService:UserService, - private sharingService:SharingService, - private cacheService:CacheService, - private $q:ng.IQService, - private ComponentFactory:ComponentFactory, - private ChangeLifecycleStateHandler:ChangeLifecycleStateHandler, - private ModalsHandler:ModalsHandler, - private MenuHandler:MenuHandler) { - this.initScope(); - this.initFolders(); - this.initEntities(); - - if (this.$stateParams) { - - if (this.$state.params.folder) { - let self = this; - let folderName = this.$state.params.folder.replaceAll("_", " "); - - this.$scope.folders.getFolders().forEach(function (tmpFolder:FoldersItemsMenu) { - if (tmpFolder.text === folderName) { - self.$scope.setSelectedFolder(tmpFolder); - } - }); - } - - // Show the tutorial if needed when the dashboard page is opened.<script src="bower_components/angular-filter/dist/angular-filter.min.js"></script> - // This is called from the welcome page. - else if (this.$stateParams.show === 'tutorial') { - this.$scope.showTutorial = true; - this.$scope.isFirstTime = true; - } - } - } - - private initFolders = ():void => { - if (this.$scope.user) { - this.$scope.folders = new FoldersMenu(this.$scope.roles[this.$scope.user.role].folder); - } - }; - - private initScope = ():void => { - let self = this; - - this.$scope.version = this.cacheService.get('version'); - this.$scope.sharingService = this.sharingService; - this.$scope.numberOfItemToDisplay = 0; - this.$scope.isLoading = false; - this.$scope.sdcConfig = this.sdcConfig; - this.$scope.sdcMenu = this.sdcMenu; - this.$scope.user = this.userService.getLoggedinUser(); - this.$scope.roles = this.sdcMenu.roles; - this.$scope.showTutorial = false; - this.$scope.isFirstTime = false; - this.$scope.vfcmtType = ResourceType.VFCMT; - this.$scope.filterParams = new DashboardFilter(this.$state.params); - - // Open onboarding modal - this.$scope.notificationIconCallback = ():void => { - this.ModalsHandler.openOnboadrdingModal('Import').then((result)=> { - //OK - if(!result.previousComponent || result.previousComponent.csarVersion != result.componentCsar.csarVersion) { - this.cacheService.set(CHANGE_COMPONENT_CSAR_VERSION_FLAG, result.componentCsar.csarVersion); - } - - this.$state.go('workspace.general', { - id: result.previousComponent && result.previousComponent.uniqueId, - componentCsar: result.componentCsar, - type: result.type - }); - }, ()=> { - // ERROR - }); - }; - - this.$scope.onImportVf = (file:any):void => { - if (file && file.filename) { - // Check that the file has valid extension. - let fileExtension:string = file.filename.split(".").pop(); - if (this.sdcConfig.csarFileExtension.indexOf(fileExtension.toLowerCase()) !== -1) { - this.$state.go('workspace.general', { - type: ComponentType.RESOURCE.toLowerCase(), - importedFile: file, - resourceType: ResourceType.VF - }); - } else { - let data:IClientMessageModalModel = { - title: self.$filter('translate')("NEW_SERVICE_RESOURCE_ERROR_VALID_CSAR_EXTENSIONS_TITLE"), - message: self.$filter('translate')("NEW_SERVICE_RESOURCE_ERROR_VALID_CSAR_EXTENSIONS", "{'extensions': '" + this.sdcConfig.csarFileExtension + "'}"), - severity: SEVERITY.ERROR - }; - this.ModalsHandler.openClientMessageModal(data); - } - } - }; - - this.$scope.onImportVfc = (file:any):void => { - if (file && file.filename) { - // Check that the file has valid extension. - let fileExtension:string = file.filename.split(".").pop(); - if (this.sdcConfig.toscaFileExtension.indexOf(fileExtension.toLowerCase()) !== -1) { - this.$state.go('workspace.general', { - type: ComponentType.RESOURCE.toLowerCase(), - importedFile: file, - resourceType: ResourceType.VFC - }); - } else { - let data:IClientMessageModalModel = { - title: self.$filter('translate')("NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS_TITLE"), - message: self.$filter('translate')("NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS", "{'extensions': '" + this.sdcConfig.toscaFileExtension + "'}"), - severity: SEVERITY.ERROR - }; - this.ModalsHandler.openClientMessageModal(data); - } - } - }; - - this.$scope.openCreateModal = (componentType:string, importedFile:any):void => { - if (importedFile) { - this.initEntities(true); // Return from import - } else { - this.$state.go('workspace.general', {type: componentType.toLowerCase()}); - } - - }; - - this.$scope.createPNF = ():void => { - this.$state.go('workspace.general', { - type: ComponentType.RESOURCE.toLowerCase(), - resourceType: ResourceType.PNF - }); - }; - - this.$scope.createCR = ():void => { - this.$state.go('workspace.general', { - type: ComponentType.RESOURCE.toLowerCase(), - resourceType: ResourceType.CR - }); - }; - - this.$scope.entitiesCount = (folderItem:FoldersItemsMenu):any => { - let self = this; - let total:number = 0; - if (folderItem.isGroup()) { - this.$scope.folders.getFolders().forEach(function (tmpFolder:FoldersItemsMenu) { - if (tmpFolder.group && tmpFolder.group === (<FoldersItemsMenuGroup>folderItem).groupname) { - total = total + self._getTotalCounts(tmpFolder, self); - } - }); - } else { - total = total + self._getTotalCounts(folderItem, self); - } - return total; - }; - - this.$scope.getCurrentFolderDistributed = ():Array<any> => { - let self = this; - let states = []; - if (this.$scope.folders) { - let folderItem:FoldersItemsMenu = this.$scope.folders.getCurrentFolder(); - if (folderItem.isGroup()) { - this.$scope.folders.getFolders().forEach(function (tmpFolder:FoldersItemsMenu) { - if (tmpFolder.group && tmpFolder.group === (<FoldersItemsMenuGroup>folderItem).groupname) { - self._setStates(tmpFolder, states); - } - }); - } else { - self._setStates(folderItem, states); - } - } - return states; - }; - - this.$scope.setSelectedFolder = (folderItem:FoldersItemsMenu):void => { - this.$scope.folders.setSelected(folderItem); - }; - - this.$scope.goToComponent = (component:Component):void => { - this.$scope.isLoading = true; - this.$state.go('workspace.general', {id: component.uniqueId, type: component.componentType.toLowerCase()}); - }; - - this.$scope.raiseNumberOfElementToDisplay = ():void => { - this.$scope.numberOfItemToDisplay = this.$scope.numberOfItemToDisplay + 35; - if (this.$scope.components) { - this.$scope.isAllItemDisplay = this.$scope.numberOfItemToDisplay >= this.$scope.components.length; - } - }; - - this.$scope.updateSearchTerm = (newTerm: string):void => { - this.$scope.filterParams.searchTerm = newTerm; - }; - - this.$scope.changeFilterParams = ():void => { - this.$state.go('.', this.$scope.filterParams.toParam(), {location: 'replace', notify: false}); - }; - }; - - private _getTotalCounts(tmpFolder, self):number { - let total:number = 0; - if (tmpFolder.dist !== undefined) { - let distributions = tmpFolder.dist.split(','); - distributions.forEach((item:any) => { - total = total + self.getEntitiesByStateDist(tmpFolder.state, item).length; - }); - } - else { - total = total + self.getEntitiesByStateDist(tmpFolder.state, tmpFolder.dist).length; - } - return total; - } - - private _setStates(tmpFolder, states) { - if (tmpFolder.states !== undefined) { - tmpFolder.states.forEach(function (item:any) { - states.push({"state": item.state, "dist": item.dist}); - }); - } else { - states.push({"state": tmpFolder.state, "dist": tmpFolder.dist}); - } - } - - private initEntities = (forceReload?:boolean):void => { - - if(forceReload || this.componentShouldReload()){ - this.$scope.isLoading = true; - this.entityService.getAllComponents(true).then( - (components:Array<Component>) => { - this.cacheService.set('breadcrumbsComponentsState', this.$state.current.name); //dashboard - this.cacheService.set('breadcrumbsComponents', components); - this.components = components; - this.$scope.components = components; - this.$scope.isAllItemDisplay = this.$scope.numberOfItemToDisplay >= this.$scope.components.length; - this.$scope.isLoading = false; - }); - } else { - this.components = this.cacheService.get('breadcrumbsComponents'); - this.$scope.components = this.components; - this.$scope.isAllItemDisplay = this.$scope.numberOfItemToDisplay >= this.$scope.components.length; - - } - - }; - - private isDefaultFilter = (): boolean => { - let defaultFilter = new DashboardFilter(); - return angular.equals(defaultFilter, this.$scope.filterParams); - } - - private componentShouldReload = ():boolean => { - let breadcrumbsValid: boolean = (this.$state.current.name === this.cacheService.get('breadcrumbsComponentsState') && this.cacheService.contains('breadcrumbsComponents')); - return !breadcrumbsValid || this.isDefaultFilter(); - } - - private getEntitiesByStateDist = (state:string, dist:string):Array<Component> => { - let gObj:Array<Component>; - if (this.components && (state || dist)) { - gObj = this.components.filter(function (obj:Component) { - if (dist !== undefined && obj.distributionStatus === dist && obj.lifecycleState === state) { - return true; - } else if (dist === undefined && obj.lifecycleState === state) { - return true; - } - return false; - }); - } else { - gObj = []; - } - return gObj; - } -} diff --git a/catalog-ui/src/app/view-models/dashboard/dashboard-view.html b/catalog-ui/src/app/view-models/dashboard/dashboard-view.html deleted file mode 100644 index 240a74d292..0000000000 --- a/catalog-ui/src/app/view-models/dashboard/dashboard-view.html +++ /dev/null @@ -1,109 +0,0 @@ - -<!-- - ~ Copyright (C) 2018 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. ---> -<div class="sdc-catalog-container"> - <loader data-display="isLoading"></loader> - <!-- HEADER --> -<!-- - <ecomp-header menu-data="menuItems" version="{{version}}"></ecomp-header> ---> - - <div class="w-sdc-main-container"> - - <perfect-scrollbar id="dashboard-main-scroll" include-padding="true" class="w-sdc-main-right-container"> - - <div infinite-scroll-disabled='isAllItemDisplay' infinite-scroll="raiseNumberOfElementToDisplay()" infinite-scroll-container="'#dashboard-main-scroll'" infinite-scroll-distance="'0.2'" infinite-scroll-parent> - - <div class='w-sdc-row-flex-items'> - - <!-- ADD Component --> - <div ng-if="user.role === 'DESIGNER'" class="w-sdc-dashboard-card-new" - data-ng-mouseleave="displayActions = false" - data-ng-mouseover="displayActions = true" - data-ng-init="displayActions = false"> - <div class="w-sdc-dashboard-card-new-content" data-tests-id="AddButtonsArea"> - <div class="w-sdc-dashboard-card-new-content-plus" data-ng-show="!displayActions"></div> - <div class="sdc-dashboard-create-element-container" data-ng-show="displayActions"> - <button data-ng-if="roles[user.role].dashboard.showCreateNew" data-tests-id="createResourceButton" class="tlv-btn outline blue" data-ng-click="openCreateModal('RESOURCE')">Add VF</button> - <button data-ng-if="roles[user.role].dashboard.showCreateNew" data-tests-id="createCRButton" class="tlv-btn outline blue" data-ng-click="createCR()">Add CR</button> - <button data-ng-if="roles[user.role].dashboard.showCreateNew" data-tests-id="createPNFButton" class="tlv-btn outline blue" data-ng-click="createPNF()">Add PNF</button> - <button data-ng-if="roles[user.role].dashboard.showCreateNew" data-tests-id="createServiceButton" class="tlv-btn outline blue" data-ng-click="openCreateModal('SERVICE')">Add Service</button> - </div> - </div> - </div> - - <!-- Import Component --> - <div ng-if="user.role === 'DESIGNER'" class="w-sdc-dashboard-card-new" - data-ng-mouseleave="displayActions = false" - data-ng-mouseover="displayActions = true" - data-ng-init="displayActions = false"> - <div class="w-sdc-dashboard-card-new-content" data-tests-id="importButtonsArea" > - <div class="w-sdc-dashboard-card-import-content-plus" data-ng-show="!displayActions"></div> - <div class="sdc-dashboard-import-element-container" data-ng-show="displayActions"> - <div data-ng-if="roles[user.role].dashboard.showCreateNew" class="tlv-btn outline blue">Import VFC - <file-opener on-file-upload="onImportVfc(file)" data-tests-id="importVFCbutton" extensions="{{sdcConfig.toscaFileExtension}}" data-ng-click="displayActions=false"></file-opener> - </div> - <div data-ng-if="roles[user.role].dashboard.showCreateNew" class="tlv-btn outline blue" data-ng-click="notificationIconCallback()">Import VSP</div> - <div data-ng-if="roles[user.role].dashboard.showCreateNew" class="tlv-btn outline blue import-dcae">Import DCAE asset - <file-opener on-file-upload="onImportVf(file)" data-tests-id="importVFbutton" extensions="{{sdcConfig.csarFileExtension}}" data-ng-click="displayActions=false"></file-opener> - </div> - </div> - </div> - </div> - - <!-- Tile new --> - <ng2-ui-tile data-ng-repeat="component in components | filter:{resourceType:('!'+vfcmtType)} | entityFilter:filterParams.checkboxes | filter:filterParams.searchTerm | limitTo:numberOfItemToDisplay" - [component]="component" (on-tile-click)="goToComponent(component)"></ng2-ui-tile> - <!-- Tile new --> - - </div> - - </div> - - </perfect-scrollbar> - - <div class="w-sdc-left-sidebar"> - <div class="i-sdc-left-sidebar-item " - data-ng-repeat="folder in folders.getFolders()" - data-ng-class="{'category-title': folder.isGroup(), 'selectedLink': folder.isSelected()}" - > - <span data-ng-if="folder.isGroup()">{{folder.text}}</span> - - <ng1-checkbox data-ng-if="!folder.isGroup() && !folder.dist" - elem-id="checkbox-{{folder.text | lowercase | clearWhiteSpaces}}" - sdc-checklist-model="filterParams.checkboxes.selectedStatuses" - sdc-checklist-value="folder.state" - sdc-checklist-change="changeFilterParams()" - text="{{folder.text}}"></ng1-checkbox> - - <ng1-checkbox data-ng-if="!folder.isGroup() && folder.dist" - elem-id="checkbox-{{folder.text | lowercase | clearWhiteSpaces}}" - sdc-checklist-model="filterParams.checkboxes.distributed" - sdc-checklist-value="folder.dist" - sdc-checklist-change="changeFilterParams()" - text="{{folder.text}}"></ng1-checkbox> - <span class="i-sdc-left-sidebar-item-state-count">{{entitiesCount(folder)}}</span> - </div> - </div> - - </div> - - <top-nav [top-lvl-selected-index]="0" [version]="version" [search-term]="filterParams.searchTerm" (search-term-change)="updateSearchTerm($event);changeFilterParams()" [notification-icon-callback]="notificationIconCallback"></top-nav> - -</div> -<div data-ui-view=""></div> - - diff --git a/catalog-ui/src/app/view-models/dashboard/dashboard.less b/catalog-ui/src/app/view-models/dashboard/dashboard.less deleted file mode 100644 index 02280cdb42..0000000000 --- a/catalog-ui/src/app/view-models/dashboard/dashboard.less +++ /dev/null @@ -1,413 +0,0 @@ -.sdc-dashboard-container { - .tlv-loader { - top: -110px; - left: 80px; - } - .sdc-hide-popover { - .popover { - display: none !important; - } - } -} - -.w-sdc-left-sidebar-nav { - margin-top: 46px; -} - -.w-sdc-main-right-container-element { - float: left; - height: 217px; - width: 217px; - margin: 10px; - position: relative; -} - -.w-sdc-main-right-container-element-details-container { - position: absolute; - top: 165px; - left: 50px; -} - -.w-sdc-main-right-container-element-name { - font-weight: bold; -} - -.w-sdc-main-right-container-element-owner { - -} - -//////////////////////////////Cards//////////////////// -.w-sdc-dashboard-card-new { - border: 2px dashed @color_m; - .border-radius(2px); - cursor: pointer; - display: inline-block; - height: 198px; - margin: 11px; - position: relative; - vertical-align: middle; - width: 202px; -} - -.w-sdc-dashboard-card-new-content { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - height: 100%; -} - -.w-sdc-dashboard-card-new-content-plus { - .sprite-new; - .add-icon; - position: relative; - margin-bottom: 20px; - - &:after { - .n_14_m; - content: 'ADD'; - position: absolute; - top: 25px; - left: -3px; - vertical-align: -50%; - } -} - -.w-sdc-dashboard-card-import-content-plus { - .sprite-new; - .import-icon; - position: relative; - margin-bottom: 20px; - - &:after { - .n_14_m; - content: 'IMPORT'; - position: absolute; - top: 25px; - left: -16px; - vertical-align: -50%; - } -} - -.sdc-dashboard-create-element-container, -.sdc-dashboard-import-element-container { - - width: 140px; - - .tlv-btn.import-dcae { - padding: 0; - } - - .tlv-btn { - position: relative; - width: 100%; - margin-bottom: 10px; - - &:last-child { - margin-bottom: 0; - } - } - - input[type="file"] { - cursor: inherit; - filter: alpha(opacity=0); - opacity: 0; - position: absolute; - top: 0; - left: 0; - width: 138px; - height: 30px; - } -} - -.w-sdc-dashboard-card { - width: 204px; - height: 200px; - background-color: @main_color_p; - .border-radius(2px); - .box-shadow(0px 2px 2px 0px rgba(24, 24, 25, 0.05)); - display: inline-block; - margin: 10px; - position: relative; - vertical-align: middle; - border: solid 1px @main_color_p; - - &:hover { - border: solid 1px @main_color_o; - .box-shadow(3px 3px 2px 0px rgba(24, 24, 25, 0.05)); - } - - &:active { - border: solid 1px @main_color_c; - .box-shadow(3px 3px 2px 0px rgba(24, 24, 25, 0.05)); - } -} - -.w-sdc-dashboard-card-body { - .hand; - border-bottom: 1px solid @color_j; - height: 155px; - position: relative; - text-align: center; -} - -.w-sdc-dashboard-card-description { - .c_3; - .hand; - background-color: rgba(57, 73, 84, 0.9); - border-radius: 4px 4px 0 0; - bottom: 0; - left: 0; - opacity: 0; - padding: 10px; - position: absolute; - right: 0; - text-align: left; - top: 0; - word-wrap: break-word; - z-index: 4; - min-height: 100px; - overflow: hidden; -} - - -.w-sdc-dashboard-card-schema { - margin-top: 30px; -} - -.w-sdc-dashboard-card-edit { - .hand; - position: absolute; - right: 13px; - top: 15px; - z-index: 2; -} - -.w-sdc-dashboard-card-footer { - padding: 3px 12px 10px 12px; - position: relative; -} - -.w-sdc-dashboard-card-avatar { - .uppercase; - border-radius: 50%; - display: inline-block; - position: absolute; - left: -6px; - text-align: center; - top: -6px; - - span { - - background-color: @main_color_p; - .border-radius(15px); - color: @color_c; - content: ''; - height: 30px; - text-align: center; - display: block; - border: solid 2px #ECEFF3; - padding: 3px 10px 2px 10px; - - &.VF { - .j_14_m; - &::before { - content: 'VF'; - } - } - - &.VFC { - .j_14_m; - &::before { - content: 'VFC'; - } - } - - &.CP { - .j_14_m; - &::before { - content: 'CP'; - } - } - - &.VL { - .j_14_m; - &::before { - content: 'VL'; - } - } - - &.SERVICE { - .c_14_m; - &::before { - content: 'S'; - } - } - - &.green { - .d_12; - &::before { - content: 'R'; - } - } - &.red { - .r_12; - &::before { - content: 'S'; - } - } - &.dblack { - .s_12; - &::before { - content: 'P'; - } - } - } -} - -.w-sdc-dashboard-card-info { - display: inline-block; - vertical-align: middle; - max-width: 165px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.w-sdc-dashboard-card-info-name-container{ - position: absolute; - bottom: 0; - left: 0; - margin: 0 0 2px 10px; -} -.w-sdc-dashboard-card-info-name { - .m_14_m; - display: inline-block; - vertical-align: middle; - max-width: 165px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.w-sdc-dashboard-card-info-lifecycleState { - .m_13_m; - display: inline-block; - vertical-align: middle; - max-width: 165px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.w-sdc-dashboard-card-info-user { - .n_13_r; - line-height: 18px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 100%; -} - -.w-sdc-dashboard-card-menu-button { - display: inline-block; - padding: 12px 0 0 10px; - position: absolute; - right: 12px; - top: 8px; - border-left: solid 1px @color_k; - height: 42px; - - &:hover { - .w-sdc-dashboard-card-menu { - display: block; - } - } -} - -.w-sdc-dashboard-card-menu { - .bg_c; - border-radius: 0 0 4px 4px; - border-top: 3px solid @color_a; - box-shadow: 0 2px 2px 0px rgba(0, 0, 0, 0.2); - color: @color_s; - display: none; - min-height: 30px; - padding: 9px 0; - position: absolute; - right: -27px; - width: 208px; - z-index: 9; - max-height: 164px; - - &::before { - //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: 24px; - top: -24px; - width: 184px; - background-repeat: no-repeat; - background-position: 175px 16px; - } -} - -.i-sdc-dashboard-card-menu-item { - .hand; - line-height: 24px; - padding: 0 10px; - &:hover { .a_7; } -} - -.w-sdc-dashboard-card-info-lifecycleState-icon{ - position:absolute; - bottom:18px; - right:10px; -} - -// Same for dashboard and catalog view. -.w-sdc-dashboard-card-schema-image { - position: absolute; - top: 41%; - - //TODO: Israel - remove this after getting the services sprite. - height: 45px; - width: 53px; - background-repeat: no-repeat; - - // Center the icon vertical and horizontal. - margin: auto; - left: 0; - right: 0; - top: -10px; - bottom: 0; -} - -/* dashboard card main icons */ -.w-sdc-dashboard-card-schema-image.service { .s-sdc-service } -.w-sdc-dashboard-card-schema-image.resource { .s-sdc-resource } - -/* dashboard card statuses icons */ -.w-sdc-dashboard-card-edit.NOT_CERTIFIED_CHECKIN { .sprite; .s-sdc-state.NOT_CERTIFIED_CHECKIN; } -.w-sdc-dashboard-card-edit.NOT_CERTIFIED_CHECKOUT { .sprite; .s-sdc-state.NOT_CERTIFIED_CHECKOUT; } -.w-sdc-dashboard-card-edit.CERTIFIED { .sprite; .s-sdc-state.CERTIFIED; } -.w-sdc-dashboard-card-edit.READY_FOR_CERTIFICATION { .sprite; .s-sdc-state.READY_FOR_CERTIFICATION; } -.w-sdc-dashboard-card-edit.CERTIFICATION_IN_PROGRESS { .sprite; .s-sdc-state.CERTIFICATION_IN_PROGRESS; } -.w-sdc-dashboard-card-edit.DISTRIBUTED { .sprite; .s-sdc-state.DISTRIBUTED; } - -.w-sdc-dashboard-card-avatar.green + .w-sdc-dashboard-card-edit.NOT_CERTIFIED_CHECKIN { .sprite; .s-sdc-state.NOT_CERTIFIED_CHECKIN.green; } -.w-sdc-dashboard-card-avatar.green + .w-sdc-dashboard-card-edit.NOT_CERTIFIED_CHECKOUT { .sprite; .s-sdc-state.NOT_CERTIFIED_CHECKOUT.green; } -.w-sdc-dashboard-card-avatar.green + .w-sdc-dashboard-card-edit.CERTIFIED { .sprite; .s-sdc-state.CERTIFIED.green; } -.w-sdc-dashboard-card-avatar.green + .w-sdc-dashboard-card-edit.READY_FOR_CERTIFICATION { .sprite; .s-sdc-state.READY_FOR_CERTIFICATION.green; } -.w-sdc-dashboard-card-avatar.green + .w-sdc-dashboard-card-edit.CERTIFICATION_IN_PROGRESS { .sprite; .s-sdc-state.CERTIFICATION_IN_PROGRESS.green; } -.w-sdc-dashboard-card-avatar.green + .w-sdc-dashboard-card-edit.DISTRIBUTED { .sprite; .s-sdc-state.DISTRIBUTED.green; } - -.w-sdc-dashboard-card-avatar.red + .w-sdc-dashboard-card-edit.NOT_CERTIFIED_CHECKIN { .sprite; .s-sdc-state.NOT_CERTIFIED_CHECKIN.red; } -.w-sdc-dashboard-card-avatar.red + .w-sdc-dashboard-card-edit.NOT_CERTIFIED_CHECKOUT { .sprite; .s-sdc-state.NOT_CERTIFIED_CHECKOUT.red; } -.w-sdc-dashboard-card-avatar.red + .w-sdc-dashboard-card-edit.CERTIFIED { .sprite; .s-sdc-state.CERTIFIED.red; } -.w-sdc-dashboard-card-avatar.red + .w-sdc-dashboard-card-edit.READY_FOR_CERTIFICATION { .sprite; .s-sdc-state.READY_FOR_CERTIFICATION.red; } -.w-sdc-dashboard-card-avatar.red + .w-sdc-dashboard-card-edit.CERTIFICATION_IN_PROGRESS { .sprite; .s-sdc-state.CERTIFICATION_IN_PROGRESS.red; } -.w-sdc-dashboard-card-avatar.red + .w-sdc-dashboard-card-edit.DISTRIBUTED { .sprite; .s-sdc-state.DISTRIBUTED.red; } diff --git a/catalog-ui/src/app/view-models/dcae-app/dcae-app-view-model.ts b/catalog-ui/src/app/view-models/dcae-app/dcae-app-view-model.ts index 19bc548e74..e6ac97085a 100644 --- a/catalog-ui/src/app/view-models/dcae-app/dcae-app-view-model.ts +++ b/catalog-ui/src/app/view-models/dcae-app/dcae-app-view-model.ts @@ -22,7 +22,7 @@ import * as _ from "lodash"; import {MenuItemGroup, MenuItem} from "app/utils"; import {BreadcrumbsPath, BreadcrumbsMenu} from "../onboard-vendor/onboard-vendor-view-model"; -import {CacheService} from "app/services"; +import {CacheService} from "app/services-ng2"; import {IUserProperties} from "app/models"; export class TestData { diff --git a/catalog-ui/src/app/view-models/dcae-app/dcae-app-view.html b/catalog-ui/src/app/view-models/dcae-app/dcae-app-view.html index 9dbe289ba2..a1e084108a 100644 --- a/catalog-ui/src/app/view-models/dcae-app/dcae-app-view.html +++ b/catalog-ui/src/app/view-models/dcae-app/dcae-app-view.html @@ -13,7 +13,6 @@ ~ See the License for the specific language governing permissions and ~ limitations under the License. --> - <div class="sdc-catalog-container"> <loader data-display="gui.isLoading"></loader> diff --git a/catalog-ui/src/app/view-models/dcae-app/dcae-app.less b/catalog-ui/src/app/view-models/dcae-app/dcae-app.less index 71a3101412..1e091e957d 100644 --- a/catalog-ui/src/app/view-models/dcae-app/dcae-app.less +++ b/catalog-ui/src/app/view-models/dcae-app/dcae-app.less @@ -76,22 +76,6 @@ } } - &.READY_FOR_CERTIFICATION { - .i-sdc-categories-list-item-icon { - background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -2985px; - width: 14px; - height: 16px; - } - } - - &.CERTIFICATION_IN_PROGRESS { - .i-sdc-categories-list-item-icon { - background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -2934px; - width: 14px; - height: 16px; - } - } - &.DISTRIBUTED, &.TBD { .i-sdc-categories-list-item-icon { diff --git a/catalog-ui/src/app/view-models/forms/artifact-form/artifact-form-view-model.ts b/catalog-ui/src/app/view-models/forms/artifact-form/artifact-form-view-model.ts deleted file mode 100644 index 45ebb12351..0000000000 --- a/catalog-ui/src/app/view-models/forms/artifact-form/artifact-form-view-model.ts +++ /dev/null @@ -1,379 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; -import * as _ from "lodash"; -import {ArtifactModel, Resource, Component} from "app/models"; -import {ArtifactsUtils, FormState, ValidationUtils, ArtifactType} from "app/utils"; -import {CacheService} from "app/services"; - -export interface IEditArtifactModel { - artifactResource:ArtifactModel; - artifactTypes:Array<string>; - artifactFile:any; -} - -export interface IArtifactResourceFormViewModelScope extends ng.IScope { - forms:any; - $$childTail:any; - isNew:boolean; - isLoading:boolean; - validationPattern:RegExp; - urlValidationPattern:RegExp; - labelValidationPattern:RegExp; - integerValidationPattern:RegExp; - commentValidationPattern:RegExp; - artifactType:string; - editArtifactResourceModel:IEditArtifactModel; - defaultHeatTimeout:number; - validExtensions:any; - originalArtifactName:string; - editForm:ng.IFormController; - footerButtons:Array<any>; - modalInstanceArtifact:ng.ui.bootstrap.IModalServiceInstance; - - fileExtensions():string; - save(doNotCloseModal?:boolean):void; - saveAndAnother():void; - close():void; - getOptions():Array<string>; - isDeploymentHeat():boolean; - onFileChange():void; - setDefaultTimeout():void; - openEditEnvParametersModal(artifact:ArtifactModel):void; - getFormTitle():string; - fileUploadRequired():string; - isArtifactOwner():boolean; -} - -export class ArtifactResourceFormViewModel { - - static '$inject' = [ - '$scope', - '$uibModalInstance', - 'artifact', - 'Sdc.Services.CacheService', - 'ValidationPattern', - 'UrlValidationPattern', - 'LabelValidationPattern', - 'IntegerValidationPattern', - 'CommentValidationPattern', - 'ValidationUtils', - '$base64', - '$state', - 'ArtifactsUtils', - '$uibModal', - 'component' - ]; - - private formState:FormState; - private entityId:string; - - constructor(private $scope:IArtifactResourceFormViewModelScope, - private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance, - private artifact:ArtifactModel, - private cacheService:CacheService, - private ValidationPattern:RegExp, - private UrlValidationPattern:RegExp, - private LabelValidationPattern:RegExp, - private IntegerValidationPattern:RegExp, - private CommentValidationPattern:RegExp, - private ValidationUtils:ValidationUtils, - private $base64:any, - private $state:any, - private artifactsUtils:ArtifactsUtils, - private $uibModal:ng.ui.bootstrap.IModalService, - private component:Component) { - - - this.entityId = this.component.uniqueId; - this.formState = angular.isDefined(artifact.artifactLabel) ? FormState.UPDATE : FormState.CREATE; - this.initScope(); - } - - private initEntity = ():void => { - this.$scope.editArtifactResourceModel.artifactResource = this.artifact; - this.$scope.originalArtifactName = this.artifact.artifactName; - }; - - - private initFooterButtons = ():void => { - - this.$scope.footerButtons = [ - {'name': 'Done', 'css': 'blue', 'callback': this.$scope.save} - ]; - if (this.$scope.isNew) { - this.$scope.footerButtons.push({ - 'name': 'Add Another', - 'css': 'grey', - 'disabled': !this.$scope.isNew && 'deployment' === this.$scope.artifactType, - 'callback': this.$scope.saveAndAnother - }); - } - }; - - private filterDeploymentArtifactTypeByResourceType = (resourceType:string):any => { - let result = {}; - _.each(this.$scope.validExtensions, function (typeSettings:any, typeName:string) { - if (!typeSettings.validForResourceTypes || typeSettings.validForResourceTypes.indexOf(resourceType) > -1) { - result[typeName] = typeSettings; - } - }); - - return result; - }; - - private initArtifactTypes = ():void => { - - let artifactTypes:any = this.cacheService.get('UIConfiguration'); - - if ('deployment' === this.$scope.artifactType) { - - - if ('HEAT_ENV' == this.artifact.artifactType || this.component.selectedInstance) { - this.$scope.validExtensions = artifactTypes.artifacts.deployment.resourceInstanceDeploymentArtifacts; - } else if (this.component.isResource()) { - this.$scope.validExtensions = artifactTypes.artifacts.deployment.resourceDeploymentArtifacts; - this.$scope.validExtensions = this.filterDeploymentArtifactTypeByResourceType((<Resource>this.component).resourceType); - } else { - this.$scope.validExtensions = artifactTypes.artifacts.deployment.serviceDeploymentArtifacts; - } - - if (this.$scope.validExtensions) { - this.$scope.editArtifactResourceModel.artifactTypes = Object.keys(this.$scope.validExtensions); - } - this.$scope.defaultHeatTimeout = artifactTypes.defaultHeatTimeout; - if (this.$scope.isNew) { - let isHeat = 'HEAT_ENV' == this.artifact.artifactType; - _.remove(this.$scope.editArtifactResourceModel.artifactTypes, (item:string)=> { - return 'HEAT' == item.substring(0, 4) || (!isHeat && item == "VF_MODULES_METADATA") || - _.has(ArtifactType.THIRD_PARTY_RESERVED_TYPES, item); - }); - } - - } - if (this.$scope.artifactType === 'informational') { - this.$scope.editArtifactResourceModel.artifactTypes = artifactTypes.artifacts.other.map((element:any)=> { - return element.name; - }); - _.remove(this.$scope.editArtifactResourceModel.artifactTypes, (item:string)=> { - return _.has(ArtifactType.THIRD_PARTY_RESERVED_TYPES, item) || - _.has(ArtifactType.TOSCA, item); - }) - } - - if (this.component.isResource() && (<Resource>this.component).isCsarComponent()) { - _.remove(this.$scope.editArtifactResourceModel.artifactTypes, (item:string) => { - return this.artifactsUtils.isLicenseType(item); - }) - } - - }; - - private initEditArtifactResourceModel = ():void => { - this.$scope.editArtifactResourceModel = { - artifactResource: null, - artifactTypes: null, - artifactFile: {} - }; - - this.initEntity(); - }; - - private initScope = ():void => { - - this.$scope.validationPattern = this.ValidationPattern; - this.$scope.urlValidationPattern = this.UrlValidationPattern; - this.$scope.labelValidationPattern = this.LabelValidationPattern; - this.$scope.integerValidationPattern = this.IntegerValidationPattern; - this.$scope.commentValidationPattern = this.CommentValidationPattern; - this.$scope.isLoading = false; - this.$scope.isNew = (this.formState === FormState.CREATE); - this.$scope.artifactType = this.artifactsUtils.getArtifactTypeByState(this.$state.current.name); - this.$scope.modalInstanceArtifact = this.$uibModalInstance; - - this.initEditArtifactResourceModel(); - this.initArtifactTypes(); - - // In case of edit, show the file name in browse. - if (this.artifact.artifactName !== "" && 'HEAT_ENV' !== this.artifact.artifactType) { - this.$scope.editArtifactResourceModel.artifactFile = {}; - this.$scope.editArtifactResourceModel.artifactFile.filename = this.artifact.artifactName; - } - - //scope methods - this.$scope.isDeploymentHeat = ():boolean => { - return !this.$scope.isNew && this.$scope.artifactType === 'deployment' - && this.$scope.editArtifactResourceModel.artifactResource.isHEAT(); - - }; - this.$scope.onFileChange = ():void => { - if (this.$scope.editArtifactResourceModel.artifactFile && this.$scope.editArtifactResourceModel.artifactFile.filename) { - this.$scope.editArtifactResourceModel.artifactResource.artifactName = this.$scope.editArtifactResourceModel.artifactFile.filename; - } else { - this.$scope.editArtifactResourceModel.artifactResource.artifactName = this.$scope.originalArtifactName; - } - }; - this.$scope.setDefaultTimeout = ():void => { - if (this.$scope.isDeploymentHeat() && !this.$scope.editArtifactResourceModel.artifactResource.timeout) { - this.$scope.editArtifactResourceModel.artifactResource.timeout = this.$scope.defaultHeatTimeout; - } - - if (this.$scope.editArtifactResourceModel.artifactFile && this.$scope.editArtifactResourceModel.artifactFile.filename) { - this.$scope.editArtifactResourceModel.artifactFile = {}; - this.$scope.forms.editForm.myArtifactFile.$setValidity('required', false); - } - }; - - this.$scope.fileExtensions = ():string => { - let type:string = this.$scope.editArtifactResourceModel.artifactResource.artifactType; - return type && this.$scope.validExtensions && this.$scope.validExtensions[type].acceptedTypes ? - this.$scope.validExtensions[type].acceptedTypes.join(',') : ""; - }; - - this.$scope.save = (doNotCloseModal?:boolean):void => { - this.$scope.isLoading = true; - this.$scope.editArtifactResourceModel.artifactResource.description = this.ValidationUtils.stripAndSanitize(this.$scope.editArtifactResourceModel.artifactResource.description); - - if (!this.$scope.isDeploymentHeat()) { - this.$scope.editArtifactResourceModel.artifactResource.timeout = null; - } - - if (this.$scope.editArtifactResourceModel.artifactFile) { - this.$scope.editArtifactResourceModel.artifactResource.payloadData = this.$scope.editArtifactResourceModel.artifactFile.base64; - this.$scope.editArtifactResourceModel.artifactResource.artifactName = this.$scope.editArtifactResourceModel.artifactFile.filename; - } - - let onFaild = (response):void => { - this.$scope.isLoading = false; - console.info('onFaild', response); - }; - - let onSuccess = (artifactResource:ArtifactModel):void => { - this.$scope.isLoading = false; - this.$scope.originalArtifactName = ""; - - if (this.$scope.isDeploymentHeat()) { - if (artifactResource.heatParameters) { - this.$scope.openEditEnvParametersModal(artifactResource); - } - } - - if (!doNotCloseModal) { - this.$uibModalInstance.close(); - } else { - this.$scope.editArtifactResourceModel.artifactFile = null; - angular.element("input[type='file']").val(null); // for support chrome when upload the same file - this.artifactsUtils.addAnotherAfterSave(this.$scope); - } - - }; - - if ('HEAT_ENV' == this.artifact.artifactType) { - if (this.component.selectedInstance) { - this.component.uploadInstanceEnvFile(this.$scope.editArtifactResourceModel.artifactResource).then(onSuccess, onFaild); - } else { - this.component.addOrUpdateArtifact(this.$scope.editArtifactResourceModel.artifactResource).then(onSuccess, onFaild); - - } - } else if (this.$scope.isArtifactOwner()) { - this.component.addOrUpdateInstanceArtifact(this.$scope.editArtifactResourceModel.artifactResource).then(onSuccess, onFaild); - } else { - this.component.addOrUpdateArtifact(this.$scope.editArtifactResourceModel.artifactResource).then(onSuccess, onFaild); - } - }; - - this.$scope.isArtifactOwner = ():boolean=> { - return this.component.isService() && !!this.component.selectedInstance; - }; - - this.$scope.saveAndAnother = ():void => { - this.$scope.save(true); - }; - - this.$scope.close = ():void => { - this.$uibModalInstance.close(); - }; - - this.$scope.fileUploadRequired = ():string => { - if (this.$scope.editArtifactResourceModel.artifactFile.filename) { - // This is edit mode - return 'false'; - } else { - return 'true'; - } - }; - - this.$scope.getFormTitle = ():string => { - if ('HEAT_ENV' == this.artifact.artifactType) { - return 'Update HEAT ENV'; - } - if (this.$scope.isDeploymentHeat()) { - if (!this.$scope.editArtifactResourceModel.artifactResource.artifactChecksum) { - return 'Add HEAT Template'; - } - return 'Update HEAT Template'; - } - if (this.$scope.isNew) { - return 'Add Artifact'; - } - return 'Update Artifact'; - }; - - this.$scope.openEditEnvParametersModal = (artifactResource:ArtifactModel):void => { - - let modalOptions:ng.ui.bootstrap.IModalSettings = { - templateUrl: '../env-parameters-form/env-parameters-form.html', - controller: 'Sdc.ViewModels.EnvParametersFormViewModel', - size: 'sdc-md', - backdrop: 'static', - resolve: { - artifact: ():ArtifactModel => { - return artifactResource; - }, - component: ():Component => { - return this.component; - } - } - }; - - let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions); - modalInstance - .result - .then(():void => { - }); - }; - - this.$scope.forms = {}; - - this.initFooterButtons(); - - - this.$scope.$watch("forms.editForm.$invalid", (newVal, oldVal) => { - if(this.$scope.forms.editForm) { - this.$scope.footerButtons[0].disabled = this.$scope.forms.editForm.$invalid; - if (this.$scope.isNew) { - this.$scope.footerButtons[1].disabled = this.$scope.forms.editForm.$invalid; - } - } - }); - - } -} diff --git a/catalog-ui/src/app/view-models/forms/artifact-form/artifact-form-view.html b/catalog-ui/src/app/view-models/forms/artifact-form/artifact-form-view.html deleted file mode 100644 index 61ebcc8a28..0000000000 --- a/catalog-ui/src/app/view-models/forms/artifact-form/artifact-form-view.html +++ /dev/null @@ -1,185 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<ng1-modal modal="modalInstanceArtifact" type="classic" class="sdc-add-artifact" buttons="footerButtons" header="{{getFormTitle()}}" show-close-button="true" get-close-modal-response="close" data-tests-id="sdc-add-artifact"> - - <loader data-display="isLoading"></loader> - - <div class="sdc-edit-artifact-form-container" - data-ng-class="{'mandatory-artifact': (editArtifactResourceModel.artifactResource.mandatory && artifactType !=='deployment') || artifactType === 'api'}"> - <form novalidate class="w-sdc-form" name="forms.editForm"> - - <!--------------------- ARTIFACT FILE START--------------------> - <div class="i-sdc-form-item"> - <label class="required">Upload File</label> - <file-upload id="fileUploadElement" - form-element="forms.editForm" - element-required="{{::fileUploadRequired()}}" - element-name="myArtifactFile" - file-model="editArtifactResourceModel.artifactFile" - extensions="{{fileExtensions()}}" - element-disabled="{{!editArtifactResourceModel.artifactResource.artifactType}}" - data-ng-class="{'error': forms.editForm.myArtifactFile.$dirty && forms.editForm.myArtifactFile.$invalid}"></file-upload> - - <div class="input-error-file-upload" data-ng-show="forms.editForm.myArtifactFile.$dirty && forms.editForm.myArtifactFile.$invalid"> - <span ng-show="forms.editForm.myArtifactFile.$error.required || forms.editForm.myArtifactFile.$error.emptyFile" translate="ADD_ARTIFACT_ERROR_FILE_REQUIRED"></span> - <span ng-show="forms.editForm.myArtifactFile.$error.maxsize" translate="VALIDATION_ERROR_MAX_FILE_SIZE"></span> - <span ng-if="artifactType === 'deployment'" ng-show="forms.editForm.myArtifactFile.$error.filetype" translate="ADD_ARTIFACT_ERROR_VALID_EXTENSIONS" translate-values="{'extensions': '{{fileExtensions()}}' }"></span> - <span ng-show="forms.editForm.myArtifactFile.$error.emptyFile" translate="VALIDATION_ERROR_EMPTY_FILE"></span> - </div> - </div> - <!--------------------- ARTIFACT FILE END --------------------> - - <div class="w-sdc-form-columns-wrapper"> - - <div class="w-sdc-form-column" data-ng-if="artifactType === 'deployment' || (!editArtifactResourceModel.artifactResource.mandatory && artifactType !== 'api')"> - - <div class="i-sdc-form-item" - data-ng-class="{error:(forms.editForm.artifactLabel.$dirty && forms.editForm.artifactLabel.$invalid)}" - data-ng-if="!isDeploymentHeat()"> - <label class="i-sdc-form-label required">Artifact Label</label> - <input class="i-sdc-form-input" - data-ng-maxlength="25" - data-ng-model="editArtifactResourceModel.artifactResource.artifactLabel" - type="text" - name="artifactLabel" - data-required - data-ng-model-options="{ debounce: 200 }" - data-ng-pattern="labelValidationPattern" - maxlength="25" - data-ng-disabled="!isNew" - data-tests-id="artifactLabel" - autofocus/> - - <div class="input-error" data-ng-show="forms.editForm.artifactLabel.$dirty && forms.editForm.artifactLabel.$invalid"> - <span ng-show="forms.editForm.artifactLabel.$error.required" translate="ADD_ARTIFACT_ERROR_LABEL_REQUIRED"></span> - <span ng-show="forms.editForm.artifactLabel.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span> - <span ng-show="forms.editForm.artifactLabel.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> - </div> - - </div> - - <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.type.$dirty && forms.editForm.type.$invalid)}"> - <label class="i-sdc-form-label required">Type</label> - <select class="i-sdc-form-select" - data-required - name="type" - data-ng-disabled="!isNew" - data-ng-change="setDefaultTimeout()" - data-ng-model="editArtifactResourceModel.artifactResource.artifactType" - data-ng-options="type as type for type in editArtifactResourceModel.artifactTypes track by type | uppercase" - data-tests-id="artifacttype"> - <option value="">Choose Type</option> - </select> - - <div class="input-error" data-ng-show="forms.editForm.type.$dirty && forms.editForm.type.$invalid"> - <span ng-show="forms.editForm.type.$error.required" translate="ADD_ARTIFACT_ERROR_TYPE_REQUIRED"></span> - </div> - - </div> - - <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.timeout.$dirty && forms.editForm.timeout.$invalid)}" data-ng-if="isDeploymentHeat()"> - <label class="i-sdc-form-label">Deployment Timeout (minutes)</label> - <input class="i-sdc-form-input" - data-ng-maxlength="25" - data-ng-model="editArtifactResourceModel.artifactResource.timeout" - type="number" - name="timeout" - min="1" - max="2147483647" - data-ng-disabled="'HEAT_ENV'==editArtifactResourceModel.artifactResource.artifactType" - data-ng-model-options="{ debounce: 200 }" - data-ng-pattern="integerValidationPattern" - data-ng-init="setDefaultTimeout()" - data-ng-change="setDefaultTimeout()" - maxlength="25" - data-tests-id="timeout" /> - - <div class="input-error" data-ng-show="forms.editForm.timeout.$dirty && forms.editForm.timeout.$invalid"> - <span ng-show="forms.editForm.timeout.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span> - <span ng-show="forms.editForm.timeout.$error.pattern" translate="ADD_ARTIFACT_ERROR_TIMEOUT_PATTERN"></span> - <span ng-show="forms.editForm.timeout.$error.min" translate="ADD_ARTIFACT_ERROR_TIMEOUT_MIN"></span> - </div> - - </div> - - </div><!-- w-sdc-form-column --> - - <div class="w-sdc-form-column i-sdc-form-url" data-ng-if="artifactType==='api'"> - - <div class="i-sdc-form-item" - data-ng-class="{error:(forms.editForm.apiUrl.$dirty && forms.editForm.apiUrl.$invalid)}"> - <label class="i-sdc-form-label required">URL</label> - <input class="i-sdc-form-input" - data-ng-maxlength="100" - data-ng-model="editArtifactResourceModel.artifactResource.apiUrl" - data-ng-model-options="{ debounce: 200 }" - type="url" - name="apiUrl" - data-required - ng-pattern="urlValidationPattern" - maxlength="100" - autofocus - invalid-characters=',#?&@$<>~^`\[]{}|")(*!+=;%' /> - - <div class="input-error" data-ng-show="forms.editForm.apiUrl.$dirty && forms.editForm.apiUrl.$invalid"> - <span ng-show="forms.editForm.apiUrl.$error.required" translate="ADD_ARTIFACT_ERROR_APIURL_REQUIRED"></span> - <span ng-show="forms.editForm.apiUrl.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span> - <span ng-show="forms.editForm.apiUrl.$error.url || forms.editForm.apiUrl.$error.pattern || forms.editForm.apiUrl.$error.invalidCharacters" translate="ADD_ARTIFACT_ERROR_APIURL_URL"></span> - </div> - - </div> - - </div><!-- w-sdc-form-column --> - - <div class="w-sdc-form-column"> - - <div class="i-sdc-form-item" - data-ng-class="{error:(forms.editForm.description.$dirty && forms.editForm.description.$invalid)}"> - <label class="i-sdc-form-label required">Description</label> - <textarea class="i-sdc-form-textarea" - data-ng-maxlength="256" - maxlength="256" - data-required - name="description" - data-ng-model="editArtifactResourceModel.artifactResource.description" - data-ng-model-options="{ debounce: 200 }" - data-ng-pattern="commentValidationPattern" - data-tests-id="description"></textarea> - - <div class="input-error" data-ng-show="forms.editForm.description.$dirty && forms.editForm.description.$invalid"> - <span ng-show="forms.editForm.description.$error.required" translate="ADD_ARTIFACT_ERROR_DESCRIPTION_REQUIRED"></span> - <span ng-show="forms.editForm.description.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span> - <span ng-show="forms.editForm.description.$error.pattern" translate="ADD_ARTIFACT_ERROR_DESCRIPTION_PATTERN"></span> - </div> - - <div class="w-sdc-form-column artifact-info" data-ng-show="!isNew && editArtifactResourceModel.artifactResource.esId"> - UUID <span data-ng-bind="editArtifactResourceModel.artifactResource.artifactUUID"></span> - <br /> - Version <span data-ng-bind="editArtifactResourceModel.artifactResource.artifactVersion"></span> - </div> - </div> - - </div><!-- w-sdc-form-column --> - - </div><!-- w-sdc-form-columns-wrapper --> - - <span class="w-sdc-form-note" data-ng-show="forms.editForm.$invalid && false" translate="LABEL_ALL_FIELDS_ARE_MANDATORY"></span> - - </form> - </div> -</ng1-modal> - diff --git a/catalog-ui/src/app/view-models/forms/artifact-form/artifact-form.less b/catalog-ui/src/app/view-models/forms/artifact-form/artifact-form.less deleted file mode 100644 index 1f77958c88..0000000000 --- a/catalog-ui/src/app/view-models/forms/artifact-form/artifact-form.less +++ /dev/null @@ -1,44 +0,0 @@ -.sdc-edit-artifact-form-container { - - .w-sdc-form-note { - .h_9; - display: block; - position: relative; - top: 13px; - } - - .i-sdc-form-textarea{ - min-height: 95px; - } - - .i-sdc-form-url { - padding-bottom: 0px; - } - - &.mandatory-artifact { - .w-sdc-form-column { - width: 100%; - padding: 0; - min-height: initial; - } - } - .w-sdc-form .i-sdc-form-item.upload input[type="file"] { - display: none - } - - .artifact-info { - text-align: left; - color: rgb(140, 140, 140); - font-size: 13px; - margin-top: -10px; - margin-bottom: 5px; - width: 100%; - min-height: initial; - - span { - color: #666666; - padding-left: 4px; - } - } - -} diff --git a/catalog-ui/src/app/view-models/forms/attribute-form/attribute-form-view.html b/catalog-ui/src/app/view-models/forms/attribute-form/attribute-form-view.html deleted file mode 100644 index 902d564935..0000000000 --- a/catalog-ui/src/app/view-models/forms/attribute-form/attribute-form-view.html +++ /dev/null @@ -1,168 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<ng1-modal modal="modalInstanceAttribute" type="classic" class="sdc-edit-attribute-container" buttons="footerButtons" header="{{isNew ? 'Add' : 'Update' }} Attribute" show-close-button="true"> - - <div class="sdc-edit-attribute-form-container" > - <form novalidate class="w-sdc-form two-columns" name="forms.editForm" > - - <div class="w-sdc-form-columns-wrapper"> - - <div class="w-sdc-form-column"> - - <!-- Name --> - <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.attributeName.$dirty && forms.editForm.attributeName.$invalid)}"> - <label class="i-sdc-form-label required">Name</label> - <input class="i-sdc-form-input" - data-tests-id="attributeName" - data-ng-maxlength="50" - data-ng-disabled="!isNew" - maxlength="50" - data-ng-model="editAttributeModel.attribute.name" - type="text" - name="attributeName" - data-ng-pattern="propertyNameValidationPattern" - data-required - data-ng-model-options="{ debounce: 200 }" - data-ng-change="validateName()" - autofocus /> - <div class="input-error" data-ng-show="forms.editForm.attributeName.$dirty && forms.editForm.attributeName.$invalid"> - <span ng-show="forms.editForm.attributeName.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Attribute name' }"></span> - <span ng-show="forms.editForm.attributeName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '128' }"></span> - <span ng-show="forms.editForm.attributeName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> - <span ng-show="forms.editForm.attributeName.$error.nameExist" translate="NEW_ATTRIBUTE_ERROR_NAME_EXISTS"></span> - </div> - </div> - - <!-- Description --> - <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.description.$dirty && forms.editForm.description.$invalid)}"> - <label class="i-sdc-form-label">Description</label> - <textarea class="i-sdc-form-textarea" - data-ng-maxlength="256" - data-ng-disabled="editAttributeModel.attribute.readonly" - maxlength="256" - data-ng-pattern="commentValidationPattern" - name="description" - data-ng-model="editAttributeModel.attribute.description" - data-ng-model-options="{ debounce: 200 }" - data-tests-id="description"></textarea> - <div class="input-error" data-ng-show="forms.editForm.description.$dirty && forms.editForm.description.$invalid"> - <span ng-show="forms.editForm.description.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span> - <span ng-show="forms.editForm.description.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> - <span ng-show="forms.editForm.description.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Description' }"></span> - </div> - </div> - - - </div> - - <div class="w-sdc-form-column"> - <!-- Type --> - <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.type.$dirty && forms.editForm.type.$invalid)}"> - <label class="i-sdc-form-label required">Type</label> - <select class="i-sdc-form-select" - data-tests-id="type-field" - data-required - data-ng-disabled="editAttributeModel.attribute.readonly" - name="type" - data-ng-change="onTypeChange()" - data-ng-model="editAttributeModel.attribute.type" - data-ng-options="type for type in editAttributeModel.types"> - <option value="">Choose Type</option> - </select> - <div class="input-error" data-ng-show="forms.editForm.type.$dirty && forms.editForm.type.$invalid"> - <span ng-show="forms.editForm.type.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Type' }"></span> - </div> - </div> - - <!-- schema --> - <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.schema.$dirty && forms.editForm.schema.$invalid)}" - data-ng-if="showSchema()"> - <label class="i-sdc-form-label required">Entry Schema</label> - <select class="i-sdc-form-select" ng-if="isSchemaEditable()" - data-required - name="schema" - data-ng-disabled="editAttributeModel.attribute.readonly" - data-ng-change="onTypeChange(false)" - data-ng-model="editAttributeModel.attribute.schema.property.type" - data-ng-options="type for type in editAttributeModel.simpleTypes"> - <option value="">Choose Schema Type</option> - </select> - <input class="i-sdc-form-input" - ng-if="!isSchemaEditable()" - data-tests-id="schema" - data-ng-disabled="true" - data-ng-model="editAttributeModel.attribute.schema.property.type" - type="text" - name="schema"/> - <div class="input-error" data-ng-show="forms.editForm.schema.$dirty && forms.editForm.schema.$invalid"> - <span ng-show="forms.editForm.schema.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Entry schema' }"></span> - </div> - </div> - - <!-- Default value --> - <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.value.$dirty && forms.editForm.value.$invalid)}"> - <label class="i-sdc-form-label">Default Value</label> - <input class="i-sdc-form-input" - data-tests-id="defaultvalue" - ng-if="!(editAttributeModel.attribute.type == 'boolean')" - data-ng-maxlength="2500" - data-ng-disabled="editAttributeModel.attribute.readonly && !isAttributeValueOwner()" - maxlength="2500" - data-ng-model="attributeValue.value" - type="text" - name="value" - data-custom-validation="" data-validation-func="validateUniqueKeys" - data-ng-pattern="validationPattern" - data-ng-model-options="{ debounce: 200 }" - data-ng-change="!forms.editForm.value.$error.pattern && ('integer'==editAttributeModel.attribute.type && forms.editForm.value.$setValidity('pattern', validateIntRange(editAttributeModel.attribute.value)) || onValueChange())" - autofocus /> - <select class="i-sdc-form-select" - data-tests-id="booleantype" - ng-if="editAttributeModel.attribute.type == 'boolean'" - data-ng-disabled="editAttributeModel.attribute.readonly && !isAttributeValueOwner()" - name="value" - data-ng-change="onValueChange()" - data-ng-model="attributeValue.value"> - <option value="true">true</option> - <option value="false">false</option> - </select> - <div class="input-error" data-ng-show="forms.editForm.value.$dirty && forms.editForm.value.$invalid"> - <span ng-show="forms.editForm.value.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Default value' }"></span> - <span ng-show="forms.editForm.value.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span> - <span ng-show="forms.editForm.value.$error.pattern" translate="{{getValidationTranslate()}}"></span> - <span ng-show="forms.editForm.value.$error.customValidation" translate="ATTRIBUTE_EDIT_MAP_UNIQUE_KEYS"></span> - </div> - </div> - - <!-- hidden --> - <div class="i-sdc-form-item" data-ng-if="isAttributeValueOwner()"> - <label class="i-sdc-form-label">Hidden</label> - <input class="i-sdc-form-input" - data-tests-id="hidden" - data-ng-disabled="editAttributeModel.attribute.readonly && !isAttributeValueOwner()" - data-ng-model="editAttributeModel.attribute.hidden" - type="checkbox" - name="hidden"/> - </div> - </div> - - </div> - - </form> - </div> - -</ng1-modal> diff --git a/catalog-ui/src/app/view-models/forms/attribute-form/attribute-from-view-model.ts b/catalog-ui/src/app/view-models/forms/attribute-form/attribute-from-view-model.ts deleted file mode 100644 index 0e4a851aa6..0000000000 --- a/catalog-ui/src/app/view-models/forms/attribute-form/attribute-from-view-model.ts +++ /dev/null @@ -1,262 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; -import * as _ from "lodash"; -import {AttributeModel, Component} from "app/models"; -import {IMapRegex, ValidationUtils, FormState, PROPERTY_TYPES} from "app/utils"; - -export interface IEditAttributeModel { - attribute:AttributeModel; - types:Array<string>; - simpleTypes:Array<string>; -} - -export class attributeValue {//in order to solve DE226783, we update the value on another obj - value:string; -} - -interface IAttributeFormViewModelScope extends ng.IScope { - $$childTail:any; - forms:any; - editForm:ng.IFormController; - footerButtons:Array<any>; - isService:boolean; - editAttributeModel:IEditAttributeModel; - modalInstanceAttribute:ng.ui.bootstrap.IModalServiceInstance; - isNew:boolean; - listRegex:IMapRegex; - mapRegex:IMapRegex; - propertyNameValidationPattern:RegExp; - commentValidationPattern:RegExp; - isLoading:boolean; - validationPattern:RegExp; - attributeValue:attributeValue; - - save():void; - close():void; - onTypeChange():void; - onValueChange():void; - isAttributeValueOwner():boolean; - validateIntRange(value:string):boolean; - validateUniqueKeys(viewValue:string):boolean; - getValidationTranslate():string; - showSchema():boolean; - isSchemaEditable():boolean; - validateName():void; -} - -export class AttributeFormViewModel { - - static '$inject' = [ - '$scope', - '$uibModalInstance', - 'attribute', - 'ValidationUtils', - 'CommentValidationPattern', - 'PropertyNameValidationPattern', - 'component' - ]; - - private formState:FormState; - - - constructor(private $scope:IAttributeFormViewModelScope, - private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance, - private attribute:AttributeModel, - private ValidationUtils:ValidationUtils, - private CommentValidationPattern:RegExp, - private PropertyNameValidationPattern:RegExp, - private component:Component) { - this.formState = angular.isDefined(attribute.name) ? FormState.UPDATE : FormState.CREATE; - this.initScope(); - } - - private initResource = ():void => { - this.$scope.editAttributeModel.attribute = new AttributeModel(this.attribute); - if (this.$scope.editAttributeModel.types.indexOf(this.attribute.type) === -1) {//attribute defaulte type is string too? - this.attribute.type = "string"; - } - }; - - private initEditAttributeModel = ():void => { - this.$scope.editAttributeModel = { - attribute: null, - types: ['integer', 'string', 'float', 'boolean', 'list', 'map'], - simpleTypes: ['integer', 'string', 'float', 'boolean'] - }; - - this.initResource(); - }; - - private initScope = ():void => { - - //scope attributes - this.$scope.forms = {}; - this.$scope.propertyNameValidationPattern = this.PropertyNameValidationPattern; - this.$scope.commentValidationPattern = this.CommentValidationPattern; - - this.$scope.modalInstanceAttribute = this.$uibModalInstance; - this.$scope.listRegex = this.ValidationUtils.getPropertyListPatterns(); - this.$scope.mapRegex = this.ValidationUtils.getPropertyMapPatterns(); - - this.$scope.isNew = (this.formState === FormState.CREATE); - this.$scope.isLoading = false; - this.$scope.attributeValue = new attributeValue(); - - this.initEditAttributeModel(); - this.setValidationPattern(); - - //scope methods - this.$scope.save = ():void => { - if (!this.$scope.forms.editForm.$invalid) { - let attribute:AttributeModel = this.$scope.editAttributeModel.attribute; - this.$scope.editAttributeModel.attribute.description = this.ValidationUtils.stripAndSanitize(this.$scope.editAttributeModel.attribute.description); - ////if read only - just closes the modal - if (this.$scope.editAttributeModel.attribute.readonly && !this.$scope.isAttributeValueOwner()) { - this.$uibModalInstance.close(); - return; - } - this.$scope.isLoading = true; - let onAttributeFaild = (response):void => { - console.info('onFaild', response); - this.$scope.isLoading = false; - }; - - let onAttributeSuccess = (attributeFromBE:AttributeModel):void => { - console.info('onAttributeResourceSuccess : ', attributeFromBE); - this.$scope.isLoading = false; - this.$uibModalInstance.close(); - }; - - //in case we have uniqueId we call update method - if (this.$scope.isAttributeValueOwner()) { - attribute.value = this.$scope.attributeValue.value; - this.component.updateInstanceAttribute(attribute).then(onAttributeSuccess, onAttributeFaild); - } else { - attribute.defaultValue = this.$scope.attributeValue.value; - this.component.addOrUpdateAttribute(attribute).then(onAttributeSuccess, onAttributeFaild); - } - } - }; - - this.$scope.close = ():void => { - this.$uibModalInstance.close(); - }; - - this.$scope.validateName = ():void => { - let existsAttr:AttributeModel = _.find(this.component.attributes, (attribute:AttributeModel) => { - return attribute.name === this.$scope.editAttributeModel.attribute.name; - }); - if (existsAttr) { - this.$scope.forms.editForm["attributeName"].$setValidity('nameExist', false); - } else { - this.$scope.forms.editForm["attributeName"].$setValidity('nameExist', true); - } - - }; - - this.$scope.onTypeChange = ():void => { - this.$scope.editAttributeModel.attribute.value = ''; - this.$scope.editAttributeModel.attribute.defaultValue = ''; - this.setValidationPattern(); - }; - - this.$scope.isAttributeValueOwner = ():boolean=> { - return this.component.isService() || !!this.component.selectedInstance; - }; - - this.$scope.onValueChange = ():void => { - if (!this.$scope.editAttributeModel.attribute.value) { - if (this.$scope.isAttributeValueOwner()) { - this.$scope.editAttributeModel.attribute.value = this.$scope.editAttributeModel.attribute.defaultValue; - } - } - }; - - - this.$scope.validateUniqueKeys = (viewValue:string):boolean => { - if (this.$scope.editAttributeModel.attribute.type === 'map') { - return this.ValidationUtils.validateUniqueKeys(viewValue); - } - else { - return true; //always valid if not a map - } - }; - - this.$scope.validateIntRange = (value:string):boolean => { - return !value || this.ValidationUtils.validateIntRange(value); - }; - - this.$scope.isSchemaEditable = ():boolean => { - let schemaType = this.$scope.editAttributeModel.attribute.schema.property.type; - return this.$scope.editAttributeModel.simpleTypes.indexOf(schemaType) > -1 || !schemaType; - }; - - this.$scope.showSchema = ():boolean => { - return ['list', 'map'].indexOf(this.$scope.editAttributeModel.attribute.type) > -1; - }; - - this.$scope.getValidationTranslate = ():string => { - let result = "ATTRIBUTE_EDIT_PATTERN"; - if (this.$scope.showSchema()) { - - result = "ATTRIBUTE_EDIT_" + this.$scope.editAttributeModel.attribute.type.toUpperCase(); - - if (this.$scope.editAttributeModel.attribute.schema.property.type === PROPERTY_TYPES.STRING) { - result += "_STRING"; - } else if (this.$scope.editAttributeModel.attribute.schema.property.type === PROPERTY_TYPES.BOOLEAN) { - result += "_BOOLEAN"; - } else { - result += "_GENERIC"; - } - } - - return result; - }; - - // Add the done button at the footer. - this.$scope.footerButtons = [ - {'name': 'Done', 'css': 'blue', 'callback': this.$scope.save}, - {'name': 'Cancel', 'css': 'grey', 'callback': this.$scope.close} - ]; - - this.$scope.$watchCollection("forms.editForm.$invalid", (newVal, oldVal) => { - this.$scope.footerButtons[0].disabled = this.$scope.forms.editForm.$invalid; - }); - - this.$scope.attributeValue.value = this.$scope.isAttributeValueOwner() ? this.$scope.editAttributeModel.attribute.value : this.$scope.editAttributeModel.attribute.defaultValue; - }; - - - private setValidationPattern = ():void => { - - if (this.$scope.editAttributeModel.attribute.type === 'list') { - this.$scope.validationPattern = this.$scope.listRegex[this.$scope.editAttributeModel.attribute.schema.property.type]; - } - else if (this.$scope.editAttributeModel.attribute.type === 'map') { - this.$scope.validationPattern = this.$scope.mapRegex[this.$scope.editAttributeModel.attribute.schema.property.type]; - } - else { - this.$scope.validationPattern = this.ValidationUtils.getValidationPattern(this.$scope.editAttributeModel.attribute.type); - } - - }; -} diff --git a/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.html b/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.html deleted file mode 100644 index b3d64818ba..0000000000 --- a/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.html +++ /dev/null @@ -1,108 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<ng1-modal modal="envParametersModal" type="classic" class="sdc-env-form-container" buttons="buttons" header="{{artifactResource.artifactDisplayName}}" show-close-button="true"> - <div class="w-sdc-env-form-container"> - <div class="w-sdc-env-search pull-left"> - <input type="text" class="w-sdc-env-search-input" placeholder="Search" data-ng-model="searchText" data-tests-id="search-env-param-name"/> - <div class="search-icon-container"> - <span class="w-sdc-search-icon env-search-icon magnification-white"></span> - </div> - </div> - <div class="table-container-flex"> - <div class="table"> - <div class="head flex-container"> - <div class="table-header head-row flex-item" ng-repeat="header in tableHeadersList track by $index"> - <info-tooltip class="header-info" data-ng-if="header.info" class="info-button" info-message-translate="{{header.info}}" direction="left"></info-tooltip> - {{header.title}} - </div> - </div> - <div class="body"> - <perfect-scrollbar suppress-scroll-x="true" scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container"> - <ng-form name="forms.editForm" class="w-sdc-form"> - <div data-ng-repeat="parameter in heatParameters| filter:{filterTerm:searchText} track by $index " - class="flex-container data-row" - data-ng-init="parameter.filterTerm=parameter.name + ' ' + parameter.currentValue + ' ' + parameter.defaultValue + ' ' +parameter.description"> - <div class="table-col-general flex-item" data-tests-id="heatParameterName_{{parameter.name}}"> - {{parameter.name}} - <span class="sprite-new show-desc hand" - uib-popover-template="templatePopover" - popover-class="parameter-description-popover top" - popover-title="Parameter Description" - popover-placement="top-left" - popover-is-open="selectedParameter.name == parameter.name" - popover-trigger="'none'" - popover-append-to-body="true" - data-ng-click="openDescPopover(parameter)"></span> - </div> - - <div class="table-col-general flex-item text"> - <span data-tests-id="default-value-of-{{parameter.name}}" tooltips tooltip-content="{{parameter.defaultValue}}">{{parameter.defaultValue}}</span> - </div> - - <!--<div class="table-col-general flex-item">--> - <!--<input type="text" value="{{parameter.currentValue}}"/>--> - <!--</div>--> - - <div class="table-col-general flex-item left-column-container"> - - <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm[parameter.name].$dirty && forms.editForm[parameter.name].$invalid), required: (parameter.defaultValue)}"> - <span class="required-symbol">*</span> - <div class="input-parameter"> - <input class="i-sdc-form-input" data-ng-class="{error: (forms.editForm[parameter.name].$invalid)}" - data-ng-model-options="{ debounce: 200 }" - data-ng-model="parameter.currentValue" - value="{{parameter.currentValue}}" - type="text" - name="{{parameter.name}}" - data-ng-pattern="getValidationPattern(parameter.type, 'heat')" - data-ng-required="parameter.defaultValue" - data-ng-change="onValueChanged(parameter)" - data-ng-blur="(forms.editForm[parameter.name].$error.required && (parameter.currentValue=parameter.defaultValue))" - data-tests-id="value-field-of-{{parameter.name}}"/> - - <div class="action-button"> - <div class="sprite-new revert-param" data-ng-if="parameter.defaultValue" data-ng-click="parameter.currentValue = parameter.defaultValue" - data-tests-id="revert-{{parameter.name}}"> - </div> - <div class="sprite-new delete-param" - data-ng-if="!parameter.defaultValue" - data-ng-disabled="!parameter.currentValue" - data-ng-class="{disabled:!parameter.currentValue}" - data-ng-click="parameter.currentValue = ''" - data-tests-id="delete-{{parameter.name}}"> - </div> - </div> - </div> - <div class="input-error" data-ng-show="forms.editForm[parameter.name].$invalid"> - <span ng-show="forms.editForm[parameter.name].$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Value'}"></span> - <span ng-show="forms.editForm[parameter.name].$error.pattern && parameter.type==='string'" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> - <span ng-show="forms.editForm[parameter.name].$error.pattern && !(parameter.type==='string')" translate="VALIDATION_ERROR_TYPE" translate-values="{'type': '{{parameter.type}}'}"></span> - </div> - </div> - - </div> - - </div> - </ng-form> - - </perfect-scrollbar> - </div> - </div> - </div> - </div> - </div> -</ng1-modal> diff --git a/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.less b/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.less deleted file mode 100644 index d89ab37030..0000000000 --- a/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.less +++ /dev/null @@ -1,177 +0,0 @@ -.sdc-env-form-container{ - .w-sdc-modal-body{ - padding: 20px 10px 2px 10px; - } - .w-sdc-modal-body-content{ - .b_6; - display: block; - } - - .env-file-generation-label{ - .p_9; - .bold; - margin-bottom: 20px; - } -} - -.w-sdc-env-form-container { - height: 650px; - - .w-sdc-env-search { - padding: 10px 20px 20px 0; - white-space: nowrap; - position: relative; - width: 60%; - height: 64px; - - .env-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 - } - - .w-sdc-env-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; - } - } - - .table-container-flex { - height: 570px; - - .table { - height: 100%; - .flex-item:nth-child(1) { - flex-grow: 20; - .show-desc{ - float: right; - top: 10px; - position: relative; - } - } - - .flex-item:nth-child(2) { - flex-grow: 10; - } - - .flex-item:nth-child(3) { - flex-grow: 10; - } - .scrollbar-container{ - max-height: 527px; - } - .left-column-container{ - .required-symbol { - .m_14_m; - color: #f33; - display: none; - position: relative; - left: -4px; - top: 3px; - } - - .i-sdc-form-item{ - border-right: none; - margin: 0px; - - .input-parameter{ - border: none; - height: 30px; - width: 254px; - float: right; - input{ - .m_13_m; - width: 100%; - display: inline-flex; - padding-right: 33px; - } - .action-button{ - border-left: solid 1px @main_color_o; - position: relative; - height: 20px; - width: 25px; - top: -25px; - left: 228px; - padding-left: 6px; - background-color: @main_color_p; - div:not(.disable){ - .hand; - } - } - } - - &.required{ - .required-symbol { - display: inline-flex; - } - .input-parameter { - width: 250px; - } - .action-button{ - left: 224px; - } - } - } - - - - } - } - - .text{ - overflow: hidden; - text-overflow: ellipsis; - display: inline-block; - white-space: nowrap; - } - } - - - .parameter-description{ - background-color: @func_color_r; - border-left: 4px solid @main_color_a; - padding: 10px 30px; - } -} - -.header-info{ - float: right; -} - -.parameter-description-popover{ - z-index: 1100; - min-width: 210px; - .arrow{ - left: 20px !important; - border-width: 7px; - bottom: -8px !important; - } - .popover-content{ - .f-type._13_m;; - } -} diff --git a/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.ts b/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.ts deleted file mode 100644 index a30fd15c63..0000000000 --- a/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.ts +++ /dev/null @@ -1,184 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; -import {ValidationUtils} from "app/utils"; -import {ArtifactModel, HeatParameterModel, Component} from "app/models"; - -export interface IEnvParametersFormViewModelScope extends ng.IScope { - isLoading:boolean; - type:string; - heatParameters:Array<HeatParameterModel>; - forms:any; - artifactResource:ArtifactModel; - buttons:Array<any>; - envParametersModal:ng.ui.bootstrap.IModalServiceInstance; - tableHeadersList:Array<any>; - selectedParameter:HeatParameterModel; - templatePopover:string; - - getValidationPattern(type:string):RegExp; - isInstance():boolean; - validateJson(json:string):boolean; - onValueChanged(parameter: HeatParameterModel):void; - close():void; - save():void; - openDescPopover(selectedParam:HeatParameterModel):void; - closeDescriptionPopover():void; -} - -export class EnvParametersFormViewModel { - - static '$inject' = [ - '$scope', - '$templateCache', - '$state', - '$uibModalInstance', - 'artifact', - 'ValidationUtils', - 'component' - ]; - - constructor(private $scope:IEnvParametersFormViewModelScope, - private $templateCache:ng.ITemplateCacheService, - private $state:any, - private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance, - private artifact:ArtifactModel, - private ValidationUtils:ValidationUtils, - private component:Component) { - - - this.initScope(); - } - - private updateInstanceHeat = ():void => { - let success = (responseArtifact:ArtifactModel):void => { - this.$scope.isLoading = false; - this.$uibModalInstance.close(); - }; - - let error = ():void => { - this.$scope.isLoading = false; - console.info('Failed to load save artifact'); - }; - - this.component.addOrUpdateInstanceArtifact(this.$scope.artifactResource).then(success, error); - }; - - private initScope = ():void => { - this.$scope.forms = {}; - this.$scope.envParametersModal = this.$uibModalInstance; - this.$scope.artifactResource = this.artifact; - this.$scope.heatParameters = angular.copy(this.artifact.heatParameters); - //if param does not have a value - display the default - this.$scope.heatParameters.forEach((heatParam) => { - heatParam.currentValue = heatParam.currentValue || heatParam.defaultValue; - }); - this.$scope.tableHeadersList = [ - {title: "Parameter", property: "name"}, - {title: "Default Value", property: "defaultValue", info: "DEFAULT_VALUE_INFO"}, - {title: "Current Value", property: "currentValue", info: "CURRENT_VALUE_INFO"} - ]; - - this.$templateCache.put("env-parametr-description-popover.html", require('app/view-models/forms/env-parameters-form/env-parametr-description-popover.html')); - this.$scope.templatePopover = "env-parametr-description-popover.html"; - - 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.isInstance = ():boolean => { - return !!this.component.selectedInstance; - }; - - this.$scope.save = ():void => { - this.$scope.buttons[0].disabled = true;//prevent double click (DE246266) - this.$scope.isLoading = true; - this.artifact.heatParameters = angular.copy(this.$scope.heatParameters); - this.artifact.heatParameters.forEach((parameter:any):void => { - if ("" === parameter.currentValue) { - //[Bug 154465] - Update and erase current value field in Env parameters form return empty String ("") instead of null. - parameter.currentValue = null; - } else if (parameter.defaultValue && parameter.defaultValue == parameter.currentValue) { - parameter.currentValue = undefined; - } - }); - - if (this.$scope.isInstance()) { - this.updateInstanceHeat(); - return; - } - - let success = (responseArtifact:ArtifactModel):void => { - this.$scope.isLoading = false; - this.$uibModalInstance.close(); - - }; - - let error = ():void => { - this.$scope.isLoading = false; - console.info('Failed to load save artifact'); - }; - - this.component.addOrUpdateArtifact(this.$scope.artifactResource).then(success, error); - }; - - this.$scope.onValueChanged = (parameter: HeatParameterModel):void => { - parameter.filterTerm = parameter.name + ' ' + parameter.currentValue + ' ' + parameter.defaultValue + ' ' +parameter.description - if('json'==parameter.type){ - this.$scope.forms.editForm[parameter.name].$setValidity('pattern', this.$scope.validateJson(parameter.currentValue)); - } - } - - this.$scope.close = ():void => { - //this.artifact.heatParameters.forEach((parameter:any):void => { - // if (!parameter.currentValue && parameter.defaultValue) { - // parameter.currentValue = parameter.defaultValue; - // } - //}); - this.$uibModalInstance.dismiss(); - }; - - this.$scope.openDescPopover = (selectedParam:HeatParameterModel):void => { - this.$scope.selectedParameter = selectedParam; - }; - - this.$scope.closeDescriptionPopover = ():void => { - this.$scope.selectedParameter = null; - }; - - this.$scope.buttons = [ - {'name': 'Save', 'css': 'blue', 'callback': this.$scope.save}, - {'name': 'Cancel', 'css': 'grey', 'callback': this.$scope.close} - ]; - - this.$scope.$watch("forms.editForm.$invalid", (newVal, oldVal) => { - this.$scope.buttons[0].disabled = this.$scope.forms.editForm.$invalid; - }); - - }; -} diff --git a/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parametr-description-popover.html b/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parametr-description-popover.html deleted file mode 100644 index 6db354a072..0000000000 --- a/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parametr-description-popover.html +++ /dev/null @@ -1,20 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. - --> - -<div> - <span data-tests-id='popover-x-button' data-ng-click='closeDescriptionPopover()' class='tlv-sprite tlv-x-btn close-popover-btn'></span> - {{selectedParameter.description}} -</div> diff --git a/catalog-ui/src/app/view-models/forms/input-form/input-form-view-modal.ts b/catalog-ui/src/app/view-models/forms/input-form/input-form-view-modal.ts deleted file mode 100644 index 56542b9694..0000000000 --- a/catalog-ui/src/app/view-models/forms/input-form/input-form-view-modal.ts +++ /dev/null @@ -1,146 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; -import {FormState, PROPERTY_TYPES, ValidationUtils, PROPERTY_VALUE_CONSTRAINTS} from "app/utils"; -import {InputModel} from "app/models"; - -export interface IInputEditModel { - editInput:InputModel; -} - -export interface IInputFormViewModelScope extends ng.IScope { - forms:any; - editForm:ng.IFormController; - footerButtons:Array<any>; - isService:boolean; - modalInstanceInput:ng.ui.bootstrap.IModalServiceInstance; - isLoading:boolean; - inputEditModel:IInputEditModel; - myValue:any; - maxLength:number; - - save():void; - close():void; - validateIntRange(value:string):boolean; - validateJson(json:string):boolean; - getValidationPattern(type:string):RegExp; - showSchema():boolean; -} - -export class InputFormViewModel { - - static '$inject' = [ - '$scope', - '$uibModalInstance', - 'ValidationUtils', - 'input' - ]; - - private formState:FormState; - - - constructor(private $scope:IInputFormViewModelScope, - private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance, - private ValidationUtils:ValidationUtils, - private input:InputModel) { - this.initScope(); - this.initMyValue(); - } - - private initMyValue = ():void => { - switch (this.$scope.inputEditModel.editInput.type) { - case PROPERTY_TYPES.MAP: - this.$scope.myValue = this.$scope.inputEditModel.editInput.defaultValue ? JSON.parse(this.$scope.inputEditModel.editInput.defaultValue) : {'': null}; - break; - case PROPERTY_TYPES.LIST: - this.$scope.myValue = this.$scope.inputEditModel.editInput.defaultValue ? JSON.parse(this.$scope.inputEditModel.editInput.defaultValue) : []; - break; - } - }; - - private initDefaultValueMaxLength = ():void => { - switch (this.$scope.inputEditModel.editInput.type) { - case PROPERTY_TYPES.MAP: - case PROPERTY_TYPES.LIST: - this.$scope.maxLength = this.$scope.inputEditModel.editInput.schema.property.type == PROPERTY_TYPES.JSON ? - PROPERTY_VALUE_CONSTRAINTS.JSON_MAX_LENGTH : - PROPERTY_VALUE_CONSTRAINTS.MAX_LENGTH; - break; - case PROPERTY_TYPES.JSON: - this.$scope.maxLength = PROPERTY_VALUE_CONSTRAINTS.JSON_MAX_LENGTH; - break; - default: - this.$scope.maxLength = PROPERTY_VALUE_CONSTRAINTS.MAX_LENGTH; - } - }; - - private initScope = ():void => { - this.$scope.forms = {}; - this.$scope.modalInstanceInput = this.$uibModalInstance; - this.$scope.inputEditModel = { - editInput: null - }; - this.$scope.inputEditModel.editInput = this.input; - this.initDefaultValueMaxLength(); - - //scope methods - this.$scope.save = ():void => { - if (this.$scope.showSchema()) { - this.$scope.inputEditModel.editInput.defaultValue = JSON.stringify(this.$scope.myValue); - } - }; - - this.$scope.close = ():void => { - this.$uibModalInstance.close(); - }; - - this.$scope.validateIntRange = (value:string):boolean => { - return !value || this.ValidationUtils.validateIntRange(value); - }; - - this.$scope.validateJson = (json:string):boolean => { - if (!json) { - return true; - } - return this.ValidationUtils.validateJson(json); - }; - - this.$scope.showSchema = ():boolean => { - return ['list', 'map'].indexOf(this.$scope.inputEditModel.editInput.type) > -1; - }; - - this.$scope.getValidationPattern = (type:string):RegExp => { - return this.ValidationUtils.getValidationPattern(type); - }; - - // Add the done button at the footer. - this.$scope.footerButtons = [ - {'name': 'Done', 'css': 'blue', 'callback': this.$scope.save}, - {'name': 'Cancel', 'css': 'grey', 'callback': this.$scope.close} - ]; - - this.$scope.$watchCollection("forms.editForm.$invalid", (newVal, oldVal) => { - this.$scope.footerButtons[0].disabled = this.$scope.forms.editForm.$invalid; - }); - - }; -} - diff --git a/catalog-ui/src/app/view-models/forms/input-form/input-form-view.html b/catalog-ui/src/app/view-models/forms/input-form/input-form-view.html deleted file mode 100644 index 446a926ed4..0000000000 --- a/catalog-ui/src/app/view-models/forms/input-form/input-form-view.html +++ /dev/null @@ -1,141 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<ng1-modal modal="modalInstanceInput" type="classic" class="sdc-edit-input-container" buttons="footerButtons" header="Update Input" show-close-button="true"> - - <div class="sdc-edit-input-form-container" > - <form novalidate class="w-sdc-form two-columns" name="forms.editForm" > - - <div class="w-sdc-form-columns-wrapper"> - - <div class="w-sdc-form-column"> - - <!-- Name --> - <div class="i-sdc-form-item"> - <label class="i-sdc-form-label">Name</label> - <input class="i-sdc-form-input" - data-tests-id="inputName" - data-ng-maxlength="50" - data-ng-disabled="true" - maxlength="50" - data-ng-model="inputEditModel.editInput.name" - type="text" - name="inputName" - autofocus /> - </div> - - <!-- Description --> - <div class="i-sdc-form-item"> - <label class="i-sdc-form-label">Description</label> - <textarea class="i-sdc-form-textarea" - data-ng-disabled="true" - name="description" - data-ng-model="inputEditModel.editInput.description" - data-tests-id="description"></textarea> - </div> - - - </div> - - <div class="w-sdc-form-column"> - <!-- Type --> - <div class="i-sdc-form-item"> - <label class="i-sdc-form-label">Type</label> - <input class="i-sdc-form-input" - data-tests-id="type" - data-ng-disabled="true" - data-ng-model="inputEditModel.editInput.type" - type="text" - name="type"/> - </div> - <!-- schema --> - <div class="i-sdc-form-item" - data-ng-if="showSchema()"> - <label class="i-sdc-form-label">Entry Schema</label> - <input class="i-sdc-form-input" - data-tests-id="schema" - data-ng-disabled="true" - data-ng-model="inputEditModel.editInput.schema.property.type" - type="text" - name="schema"/> - </div> - <!-- Default value --> - <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.value.$dirty && forms.editForm.value.$invalid)}"> - <label class="i-sdc-form-label">Default Value</label> - <div data-ng-switch="inputEditModel.editInput.type"> - <div ng-switch-when="map"> - <type-map value-obj-ref="myValue" - schema-property="inputEditModel.editInput.schema.property" - parent-form-obj="forms.editForm" - fields-prefix-name="'input-value-'" - read-only="true" - default-value="" - types="[]" - max-length="maxLength"></type-map> - </div> - <div ng-switch-when="list"> - <type-list value-obj-ref="myValue" - schema-property="inputEditModel.editInput.schema.property" - parent-form-obj="forms.editForm" - fields-prefix-name="'input-value-'" - read-only="true" - default-value="" - types="[]" - max-length="maxLength"></type-list> - </div> - <div ng-switch-default> - <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.value.$dirty && forms.editForm.value.$invalid)}"> - <input class="i-sdc-form-input" - data-tests-id="defaultvalue" - ng-if="inputEditModel.editInput.type != 'boolean'" - data-ng-maxlength="maxLength" - data-ng-disabled="true" - maxlength="{{maxLength}}" - data-ng-model="inputEditModel.editInput.defaultValue" - type="text" - name="value" - data-ng-pattern="getValidationPattern(input.type)" - data-ng-model-options="{ debounce: 200 }" - data-ng-change="('json'==inputEditModel.editInput.type && forms.editForm.value.$setValidity('pattern', validateJson(inputEditModel.editInput.defaultValue))) - ||(!forms.editForm.value.$error.pattern && ('integer'==inputEditModel.editInput.type && forms.editForm.value.$setValidity('pattern', validateIntRange(inputEditModel.editInput.defaultValue)) || onValueChange()))" - autofocus /> - <select class="i-sdc-form-select" - data-tests-id="booleantype" - ng-if="inputEditModel.editInput.type == 'boolean'" - data-ng-disabled="true" - name="value" - data-ng-model="inputEditModel.editInput.defaultValue"> - <option value="true">true</option> - <option value="false">false</option> - </select> - - <div class="input-error" data-ng-show="forms.editForm.value.$dirty && forms.editForm.value.$invalid"> - <span ng-show="forms.editForm.value.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '{{maxLength}}' }"></span> - <span ng-show="forms.editForm.value.$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span> - </div> - </div> - </div> - </div> - </div> - - </div> - - </div> - - </form> - </div> - -</ng1-modal> diff --git a/catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base-view.html b/catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base-view.html index e2594bc727..ae96b66641 100644 --- a/catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base-view.html +++ b/catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base-view.html @@ -13,7 +13,6 @@ ~ See the License for the specific language governing permissions and ~ limitations under the License. --> - <ng1-modal modal="modalPropertyFormBase" type="classic" class="sdc-edit-property-container" buttons="footerButtons" header="{{isNew ? 'Add' : 'Update' }} Property" show-close-button="true" data-tests-id="sdc-edit-property-container"> <loader data-display="isLoading" relative="false" size="medium"></loader> <div class="sdc-modal-top-bar" data-ng-if="!isNew"> diff --git a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts index f5c057e41e..37b1ce75a8 100644 --- a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts +++ b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts @@ -20,12 +20,16 @@ 'use strict'; import * as _ from "lodash"; -import { - PROPERTY_TYPES, ModalsHandler, ValidationUtils, PROPERTY_VALUE_CONSTRAINTS, FormState, PROPERTY_DATA} from "app/utils"; -import {DataTypesService} from "app/services"; -import {PropertyModel, DataTypesMap, Component, GroupInstance, PolicyInstance, PropertyBEModel} from "app/models"; -import {ComponentInstance} from "../../../../models/componentsInstances/componentInstance"; +import { PROPERTY_TYPES, ValidationUtils, PROPERTY_VALUE_CONSTRAINTS, FormState, PROPERTY_DATA } from "app/utils"; +import { DataTypesService } from "app/services"; +import { PropertyModel, DataTypesMap, Component, GroupInstance, PolicyInstance, PropertyBEModel, ComponentMetadata } from "app/models"; +import { ComponentInstance } from "../../../../models/componentsInstances/componentInstance"; import { ComponentInstanceServiceNg2 } from "app/ng2/services/component-instance-services/component-instance.service"; +import { SdcUiCommon, SdcUiServices, SdcUiComponents } from "onap-ui-angular"; +import { CompositionService } from "app/ng2/pages/composition/composition.service"; +import { WorkspaceService } from "app/ng2/pages/workspace/workspace.service"; +import { Observable } from "rxjs"; +import { TopologyTemplateService } from "app/ng2/services/component-services/topology-template.service"; export interface IEditPropertyModel { property:PropertyModel; @@ -44,7 +48,7 @@ interface IPropertyFormViewModelScope extends ng.IScope { propertyNameValidationPattern:RegExp; commentValidationPattern:RegExp; editPropertyModel:IEditPropertyModel; - modalInstanceProperty:ng.ui.bootstrap.IModalServiceInstance; + modalInstanceProperty:ng.ui.bootstrap.IModalServiceInstance; currentPropertyIndex:number; isLastProperty:boolean; myValue:any; @@ -54,6 +58,7 @@ interface IPropertyFormViewModelScope extends ng.IScope { maxLength:number; isPropertyValueOwner:boolean; isVnfConfiguration:boolean; + constraints:string[]; validateJson(json:string):boolean; save(doNotCloseModal?:boolean):void; @@ -82,17 +87,20 @@ export class PropertyFormViewModel { 'PropertyNameValidationPattern', 'CommentValidationPattern', 'ValidationUtils', - 'component', + // 'component', '$filter', - 'ModalsHandler', + 'ModalServiceSdcUI', 'filteredProperties', '$timeout', 'isPropertyValueOwner', 'propertyOwnerType', 'propertyOwnerId', - 'ComponentInstanceServiceNg2' + 'ComponentInstanceServiceNg2', + 'TopologyTemplateService', + 'CompositionService', + 'workspaceService' ]; - + private formState:FormState; constructor(private $scope:IPropertyFormViewModelScope, @@ -103,17 +111,21 @@ export class PropertyFormViewModel { private PropertyNameValidationPattern:RegExp, private CommentValidationPattern:RegExp, private ValidationUtils:ValidationUtils, - private component:Component, + // private component:Component, private $filter:ng.IFilterService, - private ModalsHandler:ModalsHandler, + private modalService:SdcUiServices.ModalService, private filteredProperties:Array<PropertyModel>, private $timeout:ng.ITimeoutService, private isPropertyValueOwner:boolean, private propertyOwnerType:string, private propertyOwnerId:string, - private ComponentInstanceServiceNg2: ComponentInstanceServiceNg2) { + private ComponentInstanceServiceNg2: ComponentInstanceServiceNg2, + private topologyTemplateService: TopologyTemplateService, + private compositionService: CompositionService, + private workspaceService: WorkspaceService) { this.formState = angular.isDefined(property.name) ? FormState.UPDATE : FormState.CREATE; + this.initScope(); } @@ -121,8 +133,10 @@ export class PropertyFormViewModel { this.$scope.editPropertyModel.property = new PropertyModel(this.property); this.$scope.editPropertyModel.property.type = this.property.type ? this.property.type : null; this.$scope.editPropertyModel.property.value = this.$scope.editPropertyModel.property.value || this.$scope.editPropertyModel.property.defaultValue; + this.$scope.constraints = this.property.constraints && this.property.constraints[0] ? this.property.constraints[0]["validValues"] : null; + this.setMaxLength(); - this.initAddOnLabels(); + }; //init property add-ons labels that show up at the left side of the input. @@ -131,23 +145,13 @@ export class PropertyFormViewModel { //the server sends back the normalized name. Remove it (to prevent interference with validation) and set the addon label to the component name directly. //Note: this cant be done in properties.ts because we dont have access to the component if (this.$scope.editPropertyModel.property.value) { - let splitProp = this.$scope.editPropertyModel.property.value.split(new RegExp(this.component.normalizedName + '.', "gi")); + let splitProp = this.$scope.editPropertyModel.property.value.split(new RegExp(this.workspaceService.metadata.normalizedName + '.', "gi")); this.$scope.editPropertyModel.property.value = splitProp.pop(); } - this.$scope.editPropertyModel.property.addOn = this.component.name; + this.$scope.editPropertyModel.property.addOn = this.workspaceService.metadata.name; } } - private initEditPropertyModel = ():void => { - this.$scope.editPropertyModel = { - property: null, - types: PROPERTY_DATA.TYPES, - simpleTypes: PROPERTY_DATA.SIMPLE_TYPES - }; - - this.initResource(); - }; - private initForNotSimpleType = ():void => { let property = this.$scope.editPropertyModel.property; this.$scope.isTypeDataType = this.DataTypesService.isDataTypeForPropertyType(this.$scope.editPropertyModel.property); @@ -195,20 +199,25 @@ export class PropertyFormViewModel { this.$scope.commentValidationPattern = this.CommentValidationPattern; this.$scope.isLoading = false; this.$scope.isNew = (this.formState === FormState.CREATE); - this.$scope.isService = this.component.isService(); + this.$scope.isService = this.workspaceService.metadata.isService(); this.$scope.modalInstanceProperty = this.$uibModalInstance; this.$scope.currentPropertyIndex = _.findIndex(this.filteredProperties, i=> i.name == this.property.name); this.$scope.isLastProperty = this.$scope.currentPropertyIndex == (this.filteredProperties.length - 1); this.$scope.dataTypes = this.DataTypesService.getAllDataTypes(); this.$scope.isPropertyValueOwner = this.isPropertyValueOwner; this.$scope.propertyOwnerType = this.propertyOwnerType; - this.initEditPropertyModel(); + + this.$scope.editPropertyModel = { + property : new PropertyModel(this.property), + types : PROPERTY_DATA.TYPES, + simpleTypes : PROPERTY_DATA.SIMPLE_TYPES}; //All simple types + //check if property of VnfConfiguration this.$scope.isVnfConfiguration = false; - if(this.propertyOwnerType == "component" && angular.isArray(this.component.componentInstances)) { + if(this.propertyOwnerType == "component" && angular.isArray(this.compositionService.componentInstances)) { - var componentPropertyOwner:ComponentInstance = this.component.componentInstances.find((ci:ComponentInstance) => { + var componentPropertyOwner:ComponentInstance = this.compositionService.componentInstances.find((ci:ComponentInstance) => { return ci.uniqueId === this.property.resourceInstanceUniqueId; }); if (componentPropertyOwner && componentPropertyOwner.componentName === 'vnfConfiguration') { @@ -219,6 +228,7 @@ export class PropertyFormViewModel { this.$scope.nonPrimitiveTypes = _.filter(Object.keys(this.$scope.dataTypes), (type:string)=> { return this.$scope.editPropertyModel.types.indexOf(type) == -1; }); + this.initResource(); this.initForNotSimpleType(); @@ -263,10 +273,10 @@ export class PropertyFormViewModel { //Not clean, but doing this as a temporary fix until we update the property right panel modals if(this.propertyOwnerType == "group"){ - this.ComponentInstanceServiceNg2.updateComponentGroupInstanceProperties(this.component, this.propertyOwnerId, [property]) + this.ComponentInstanceServiceNg2.updateComponentGroupInstanceProperties(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.propertyOwnerId, [property]) .subscribe((propertiesFromBE) => { onPropertySuccess(<PropertyModel>propertiesFromBE[0])}, error => onPropertyFaild); } else if(this.propertyOwnerType == "policy"){ - this.ComponentInstanceServiceNg2.updateComponentPolicyInstanceProperties(this.component, this.propertyOwnerId, [property]) + this.ComponentInstanceServiceNg2.updateComponentPolicyInstanceProperties(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.propertyOwnerId, [property]) .subscribe((propertiesFromBE) => { onPropertySuccess(<PropertyModel>propertiesFromBE[0])}, error => onPropertyFaild); } else { //in case we have uniqueId we call update method @@ -275,7 +285,7 @@ export class PropertyFormViewModel { let myValueString:string = JSON.stringify(this.$scope.myValue); property.value = myValueString; } - this.component.updateInstanceProperties(property.resourceInstanceUniqueId, [property]).then((propertiesFromBE) => onPropertySuccess(propertiesFromBE[0]), onPropertyFaild); + this.updateInstanceProperties(property.resourceInstanceUniqueId, [property]).subscribe((propertiesFromBE) => onPropertySuccess(propertiesFromBE[0]), onPropertyFaild); } else { if (!this.$scope.editPropertyModel.property.simpleType && !this.$scope.isSimpleType(property.type)) { let myValueString:string = JSON.stringify(this.$scope.myValue); @@ -283,7 +293,7 @@ export class PropertyFormViewModel { } else { this.$scope.editPropertyModel.property.defaultValue = this.$scope.editPropertyModel.property.value; } - this.component.addOrUpdateProperty(property).then(onPropertySuccess, onPropertyFaild); + this.addOrUpdateProperty(property).subscribe(onPropertySuccess, onPropertyFaild); } } }; @@ -362,14 +372,65 @@ export class PropertyFormViewModel { }; this.$scope.delete = (property:PropertyModel):void => { - let onOk = ():void => { - this.component.deleteProperty(property.uniqueId).then( + let onOk: Function = ():void => { + this.deleteProperty(property.uniqueId).subscribe( this.$scope.close ); }; 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); + const okButton = {testId: "OK", text: "OK", type: SdcUiCommon.ButtonType.info, callback: onOk, closeModal: true} as SdcUiComponents.ModalButtonComponent; + this.modalService.openInfoModal(title, message, 'delete-modal', [okButton]); }; } + + private updateInstanceProperties = (componentInstanceId:string, properties:PropertyModel[]):Observable<PropertyModel[]> => { + + return this.ComponentInstanceServiceNg2.updateInstanceProperties(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, componentInstanceId, properties) + .map(newProperties => { + newProperties.forEach((newProperty) => { + if(newProperty.path[0] === newProperty.resourceInstanceUniqueId) newProperty.path.shift(); + // find exist instance property in parent component for update the new value ( find bu uniqueId & path) + let existProperty: PropertyModel = <PropertyModel>_.find(this.compositionService.componentInstancesProperties[newProperty.resourceInstanceUniqueId], { + uniqueId: newProperty.uniqueId, + path: newProperty.path + }); + let index = this.compositionService.componentInstancesProperties[newProperty.resourceInstanceUniqueId].indexOf(existProperty); + this.compositionService.componentInstancesProperties[newProperty.resourceInstanceUniqueId][index] = newProperty; + }); + return newProperties; + }); + }; + + private addOrUpdateProperty = (property:PropertyModel):Observable<PropertyModel> => { + if (!property.uniqueId) { + let onSuccess = (property:PropertyModel):PropertyModel => { + let newProperty = new PropertyModel(property); + this.filteredProperties.push(newProperty); + return newProperty; + }; + return this.topologyTemplateService.addProperty(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, property).map(onSuccess); + } + else { + let onSuccess = (newProperty:PropertyModel):PropertyModel => { + // find exist instance property in parent component for update the new value ( find bu uniqueId ) + let existProperty:PropertyModel = <PropertyModel>_.find(this.filteredProperties, {uniqueId: newProperty.uniqueId}); + let propertyIndex = this.filteredProperties.indexOf(existProperty); + this.filteredProperties[propertyIndex] = newProperty; + return newProperty; + }; + return this.topologyTemplateService.updateProperty(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, property).map(onSuccess); + } + }; + + public deleteProperty = (propertyId:string):Observable<void> => { + let onSuccess = ():void => { + console.log("Property deleted"); + delete _.remove(this.filteredProperties, {uniqueId: propertyId})[0]; + }; + let onFailed = ():void => { + console.log("Failed to delete property"); + }; + return this.topologyTemplateService.deleteProperty(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, propertyId).map(onSuccess, onFailed); + }; } diff --git a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html index 1f484160da..7c29d98641 100644 --- a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html +++ b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html @@ -13,7 +13,6 @@ ~ See the License for the specific language governing permissions and ~ limitations under the License. --> - <ng1-modal modal="modalInstanceProperty" type="classic" class="sdc-edit-property-container" buttons="footerButtons" header="{{isNew ? 'Add' : 'Update' }} Property" show-close-button="true" data-tests-id="sdc-edit-property-container"> <loader data-display="isLoading" relative="false" size="medium"></loader> <div class="sdc-modal-top-bar" data-ng-if="!isNew"> @@ -160,8 +159,11 @@ fields-prefix-name="currentPropertyIndex" read-only="(editPropertyModel.property.readonly && !isPropertyValueOwner) || isVnfConfiguration" default-value="{{getDefaultValue()}}" - max-length="maxLength"></type-map> + max-length="maxLength" + constraints = "editPropertyModel.property.constraints && editPropertyModel.property.constraints[0].validValues"> + </type-map> </div> + <div ng-switch-when="list"> <type-list value-obj-ref="myValue" schema-property="editPropertyModel.property.schema.property" @@ -169,14 +171,36 @@ fields-prefix-name="currentPropertyIndex" read-only="editPropertyModel.property.readonly && !isPropertyValueOwner" default-value="{{getDefaultValue()}}" - max-length="maxLength"></type-list> + max-length="maxLength" + constraints = "editPropertyModel.property.constraints && editPropertyModel.property.constraints[0].validValues"></type-list> </div> + <div ng-switch-default> <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.value.$dirty && forms.editForm.value.$invalid), 'input-group' : editPropertyModel.property.addOn}"> <span ng-if="editPropertyModel.property.addOn" class="input-group-addon">{{editPropertyModel.property.addOn}}</span> + <!-- Has Constraints --> + <select class="i-sdc-form-select" + data-tests-id="constraints" + ng-if="(editPropertyModel.property.constraints)" + data-ng-disabled="editPropertyModel.property.readonly && !isPropertyValueOwner" + + data-ng-change="onValueChange()" + data-ng-model="editPropertyModel.property.value"> + <!-- Get the default value in case exist --> + <option value = "{{editPropertyModel.property.value}}" name = "{{editPropertyModel.property.value}}" hidden selected> + {{editPropertyModel.property.value}} + </option> + <!-- add all constratint to Select list --> + <option ng-repeat='value in constraints' value="{{value}}" name="{{value}}"> + {{value}} + </option> + </select> + + + <!-- No Constraints --> <input class="i-sdc-form-input" data-tests-id="defaultvalue" - ng-if="!((editPropertyModel.property.simpleType||editPropertyModel.property.type) == 'boolean')" + ng-if="!(editPropertyModel.property.constraints) && !((editPropertyModel.property.simpleType||editPropertyModel.property.type) == 'boolean')" data-ng-maxlength="maxLength" data-ng-disabled="editPropertyModel.property.readonly && !isPropertyValueOwner" maxlength="{{maxLength}}" @@ -189,6 +213,7 @@ ||(!forms.editForm.value.$error.pattern && ('integer'==editPropertyModel.property.type && forms.editForm.value.$setValidity('pattern', validateIntRange(editPropertyModel.property.value)) || onValueChange()))" data-ng-change="" autofocus /> + <!-- Boolean --> <select class="i-sdc-form-select" data-tests-id="booleantype" ng-if="(editPropertyModel.property.simpleType||editPropertyModel.property.type) == 'boolean'" diff --git a/catalog-ui/src/app/view-models/forms/property-forms/module-property-modal/module-property-view.html b/catalog-ui/src/app/view-models/forms/property-forms/module-property-modal/module-property-view.html index 57e70db698..7f47b3e63e 100644 --- a/catalog-ui/src/app/view-models/forms/property-forms/module-property-modal/module-property-view.html +++ b/catalog-ui/src/app/view-models/forms/property-forms/module-property-modal/module-property-view.html @@ -13,7 +13,6 @@ ~ See the License for the specific language governing permissions and ~ limitations under the License. --> - <div class="default-value-section i-sdc-form-item"> <label class="i-sdc-form-label">Default Value</label> <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.value.$dirty && forms.editForm.value.$invalid)}"> diff --git a/catalog-ui/src/app/view-models/forms/property-forms/select-datatype-modal/select-datatype-modal-view.html b/catalog-ui/src/app/view-models/forms/property-forms/select-datatype-modal/select-datatype-modal-view.html index 33fef0351e..d22741f81a 100644 --- a/catalog-ui/src/app/view-models/forms/property-forms/select-datatype-modal/select-datatype-modal-view.html +++ b/catalog-ui/src/app/view-models/forms/property-forms/select-datatype-modal/select-datatype-modal-view.html @@ -13,7 +13,6 @@ ~ See the License for the specific language governing permissions and ~ limitations under the License. --> - <div data-ng-if="dataTypes" class="default-value-section i-sdc-form-item"> <label class="i-sdc-form-label">Default Value</label> <div data-ng-if="isTypeDataType"> diff --git a/catalog-ui/src/app/view-models/forms/resource-instance-name-form/resource-instance-name-model.ts b/catalog-ui/src/app/view-models/forms/resource-instance-name-form/resource-instance-name-model.ts deleted file mode 100644 index 67d135c575..0000000000 --- a/catalog-ui/src/app/view-models/forms/resource-instance-name-form/resource-instance-name-model.ts +++ /dev/null @@ -1,117 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; -import * as _ from "lodash"; -import {ComponentInstanceFactory} from "app/utils"; -import {ComponentInstance} from "app/models"; -import {Requirement, Component, Capability} from "app/models"; - -interface IResourceInstanceViewModelScope extends ng.IScope { - - componentInstanceModel:ComponentInstance; - validationPattern:RegExp; - oldName:string; - isAlreadyPressed:boolean; - footerButtons:Array<any>; - forms:any; - modalInstanceName:ng.ui.bootstrap.IModalServiceInstance; - - save():void; - close():void; -} - -export class ResourceInstanceNameViewModel { - - static '$inject' = [ - '$scope', - 'ValidationPattern', - '$uibModalInstance', - 'component' - ]; - - - constructor(private $scope:IResourceInstanceViewModelScope, - private ValidationPattern:RegExp, - private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance, - private component:Component) { - - this.initScope(); - } - - - private initScope = ():void => { - this.$scope.forms = {}; - this.$scope.validationPattern = this.ValidationPattern; - this.$scope.componentInstanceModel = ComponentInstanceFactory.createComponentInstance(this.component.selectedInstance); - this.$scope.oldName = this.component.selectedInstance.name; - this.$scope.modalInstanceName = this.$uibModalInstance; - - this.$scope.isAlreadyPressed = false; - - - this.$scope.close = ():void => { - this.$uibModalInstance.dismiss(); - }; - - this.$scope.save = ():void => { - - let onFailed = () => { - this.$scope.isAlreadyPressed = true; - }; - - let onSuccess = (componentInstance:ComponentInstance) => { - this.$uibModalInstance.close(); - this.$scope.isAlreadyPressed = false; - this.$scope.componentInstanceModel = componentInstance; - //this.component.name = componentInstance.name;//DE219124 - this.component.selectedInstance.name = componentInstance.name; - //update requirements and capabilities owner name - _.forEach(this.component.selectedInstance.requirements, (requirementsArray:Array<Requirement>) => { - _.forEach(requirementsArray, (requirement:Requirement):void => { - requirement.ownerName = componentInstance.name; - }); - }); - - _.forEach(this.component.selectedInstance.capabilities, (capabilitiesArray:Array<Capability>) => { - _.forEach(capabilitiesArray, (capability:Capability):void => { - capability.ownerName = componentInstance.name; - }); - }); - - }; - - this.$scope.isAlreadyPressed = true; - if (this.$scope.oldName != this.$scope.componentInstanceModel.name) { - this.component.updateComponentInstance(this.$scope.componentInstanceModel).then(onSuccess, onFailed); - } - }; - - this.$scope.footerButtons = [ - {'name': 'OK', 'css': 'blue', 'callback': this.$scope.save}, - {'name': 'Cancel', 'css': 'grey', 'callback': this.$scope.close} - ]; - - this.$scope.$watch("[forms.editNameForm.$invalid,componentInstanceModel.name,isAlreadyPressed]", (newVal, oldVal) => { - //if the name is invalid or if user pressed ok and didn't try to change name again or the new name = source name - this.$scope.footerButtons[0].disabled = this.$scope.forms.editNameForm.$invalid || (this.$scope.isAlreadyPressed && newVal[1] === oldVal[1]) || this.$scope.componentInstanceModel.name === this.$scope.oldName; - }); - } -} diff --git a/catalog-ui/src/app/view-models/forms/resource-instance-name-form/resource-instance-name-view.html b/catalog-ui/src/app/view-models/forms/resource-instance-name-form/resource-instance-name-view.html deleted file mode 100644 index ec726d040b..0000000000 --- a/catalog-ui/src/app/view-models/forms/resource-instance-name-form/resource-instance-name-view.html +++ /dev/null @@ -1,88 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<ng1-modal modal="modalInstanceName" type="classic" class="w-sdc-modal-resource-instance-name modal-type-confirmation" buttons="footerButtons" header="Instance Name" show-close-button="true"> - - <form novalidate class="w-sdc-form" name="forms.editNameForm"> - <div class="i-sdc-form-item" data-ng-class="{error:(editNameForm.componentInstanceName.$dirty && editNameForm.resourceInstanceName.$invalid)}"> - <label class="i-sdc-form-label required">Instance Name</label> - <input class="w-sdc-modal-resource-instance-input i-sdc-form-input" - name="componentInstanceName" - data-ng-maxlength="50" - data-ng-model="componentInstanceModel.name" - type="text" - data-required - data-ng-pattern="validationPattern" - maxlength="50" - autofocus - placeholder="Enter instance name..." - data-tests-id="instanceName" - /> - - <div class="input-error" data-ng-show="forms.editNameForm.componentInstanceName.$dirty && forms.editNameForm.componentInstanceName.$invalid"> - <span ng-show="forms.editNameForm.componentInstanceName.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Resource name' }"></span> - <span ng-show="forms.editNameForm.componentInstanceName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span> - <span ng-show="forms.editNameForm.componentInstanceName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> - </div> - - </div> - </form> - -</ng1-modal> - - - -<!-- - -<div class="w-sdc-modal w-sdc-modal-resource-instance-name"> - <header> - <div class="w-sdc-modal-head"> - Instance Name - </div> - </header> - <div> - <form novalidate class="w-sdc-modal-body w-sdc-form" name="editNameForm"> - <div class="i-sdc-form-item" data-ng-class="{error:(editNameForm.componentInstanceName.$dirty && editNameForm.resourceInstanceName.$invalid)}"> - <label class="i-sdc-form-label required">Instance Name</label> - <input class="w-sdc-modal-resource-instance-input i-sdc-form-input" - name="componentInstanceName" - data-ng-maxlength="50" - data-ng-model="componentInstanceModel.name" - type="text" - data-required - data-ng-pattern="validationPattern" - maxlength="50" - autofocus - placeholder="Enter instance name..." - data-tests-id="instanceName" - /> - - <div class="input-error" data-ng-show="editNameForm.componentInstanceName.$dirty && editNameForm.componentInstanceName.$invalid"> - <span ng-show="editNameForm.componentInstanceName.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Resource name' }"></span> - <span ng-show="editNameForm.componentInstanceName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span> - <span ng-show="editNameForm.componentInstanceName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> - </div> - - </div> - </form> - - <div class="w-sdc-modal-action"> - <button class="w-sdc-btn-blue" data-ng-click="save()" type="button" data-ng-disabled="(!componentInstanceModel.name || componentInstanceModel.name === oldName) || isAlreadyPressed">Ok</button> - <button class="w-sdc-btn-dark-gray" data-ng-click="close()" type="button">Cancel</button> - </div> - </div> -</div> ---> diff --git a/catalog-ui/src/app/view-models/forms/resource-instance-name-form/resource-instance-name.less b/catalog-ui/src/app/view-models/forms/resource-instance-name-form/resource-instance-name.less deleted file mode 100644 index 57698bef17..0000000000 --- a/catalog-ui/src/app/view-models/forms/resource-instance-name-form/resource-instance-name.less +++ /dev/null @@ -1,29 +0,0 @@ -.w-sdc-modal-resource-instance-name { - - .w-sdc-modal-body { - overflow: visible; - } - - .w-sdc-modal-action { - display: flex; - align-items: center; - justify-content: center; - } - - .w-sdc-modal-resource-instance-input { - .p_1; - border: solid 1px @color_p; - height: 45px; - padding: 0 20px; - margin: 0 auto 0 auto; - display: block; - } - .w-sdc-modal-body { - border-bottom: none; - } - - .w-sdc-form .i-sdc-form-item.error::after { - top: 13px; - } - -} diff --git a/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal-view-model.ts b/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal-view-model.ts deleted file mode 100644 index 7998d10623..0000000000 --- a/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal-view-model.ts +++ /dev/null @@ -1,93 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; -import {ValidationUtils, ModalType} from "app/utils"; - -export interface IConfirmationModalModel { - title:string; - message:string; - showComment:boolean; - type:ModalType; -} - -interface IConfirmationModalViewModelScope { - modalInstanceConfirmation:ng.ui.bootstrap.IModalServiceInstance; - confirmationModalModel:IConfirmationModalModel; - comment:any; - commentValidationPattern:RegExp; - editForm:ng.IFormController; - okButtonColor:string; - hideCancelButton:boolean; - ok():any; - cancel():void; -} - -export class ConfirmationModalViewModel { - - static '$inject' = ['$scope', '$uibModalInstance', 'confirmationModalModel', 'CommentValidationPattern', 'ValidationUtils']; - - constructor(private $scope:IConfirmationModalViewModelScope, - private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance, - confirmationModalModel:IConfirmationModalModel, - private CommentValidationPattern:RegExp, - private ValidationUtils:ValidationUtils) { - - this.initScope(confirmationModalModel); - } - - private initScope = (confirmationModalModel:IConfirmationModalModel):void => { - let self = this; - this.$scope.hideCancelButton = false; - this.$scope.modalInstanceConfirmation = this.$uibModalInstance; - this.$scope.confirmationModalModel = confirmationModalModel; - this.$scope.comment = {"text": ''}; - this.$scope.commentValidationPattern = this.CommentValidationPattern; - - this.$scope.ok = ():any => { - self.$uibModalInstance.close(this.ValidationUtils.stripAndSanitize(self.$scope.comment.text)); - }; - - this.$scope.cancel = ():void => { - console.info('Cancel pressed on: ' + this.$scope.confirmationModalModel.title); - self.$uibModalInstance.dismiss(); - }; - - // Set the OK button color according to modal type (standard, error, alert) - let _okButtonColor = 'blue'; // Default - switch (confirmationModalModel.type) { - case ModalType.STANDARD: - _okButtonColor = 'blue'; - break; - case ModalType.ERROR: - _okButtonColor = 'red'; - break; - case ModalType.ALERT: - this.$scope.hideCancelButton = true; - _okButtonColor = 'grey'; - break; - default: - _okButtonColor = 'blue'; - break; - } - this.$scope.okButtonColor = _okButtonColor; - - } -} diff --git a/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal-view.html b/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal-view.html deleted file mode 100644 index cb9b159e51..0000000000 --- a/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal-view.html +++ /dev/null @@ -1,45 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<ng1-modal modal="modalInstanceConfirmation" type="classic" class="w-sdc-modal-confirmation modal-type-{{confirmationModalModel.type}}" header="{{confirmationModalModel.title}}" show-close-button="true"> - <form novalidate class="w-sdc-form" name="editForm"> - <label class="i-sdc-form-label required w-sdc-modal-label" data-ng-bind-html="confirmationModalModel.message"></label> - - <div class="i-sdc-form-item"> - <textarea class="w-sdc-modal-body-comment" - data-tests-id="checkindialog" - autofocus="autofocus" - data-ng-show="confirmationModalModel.showComment===true" - data-ng-model="comment.text" - placeholder="Comment..." - maxlength="256" - data-required - name="comment1" - data-ng-pattern="commentValidationPattern" - data-ng-maxlength="256"></textarea> - - <div class="input-error" data-ng-show="editForm.comment1.$dirty && editForm.comment1.$invalid"> - <span ng-show="editForm.comment1.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> - <span ng-show="editForm.comment1.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Comment' }"></span> - </div> - </div> - </form> - <div class="w-sdc-modal-footer classic"> - <button class="tlv-btn {{okButtonColor}}" data-tests-id="OK" data-ng-click="ok()" data-ng-disabled="confirmationModalModel.showComment===true && (!comment.text || comment.text && comment.text.length===0)">OK</button> - <button class="tlv-btn grey" data-ng-if="hideCancelButton===false" data-tests-id="Cancel" data-ng-click="cancel()" >Cancel</button> - <!--<button class="tlv-btn blue add-property-add-another" data-ng-if="isNew" data-ng-click="saveAndAnother()" type="reset" data-ng-disabled="editForm.$invalid">Add Another</button>--> - </div> -</ng1-modal> diff --git a/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal.less b/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal.less deleted file mode 100644 index 666c41d5ed..0000000000 --- a/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal.less +++ /dev/null @@ -1,30 +0,0 @@ -.w-sdc-modal-confirmation { - form.w-sdc-form{ - padding: 0; - } - - .w-sdc-modal-body-content { - .b_6; - word-break: break-word; - - } - .w-sdc-modal-body { - height: auto; - /* padding: 47px 60px 20px 60px; */ - border-bottom: none; - } - .w-sdc-modal-body-content { - padding: 0; - } - .w-sdc-modal-body-comment { - width: 430px; - height: 127px; - border: solid 1px @color_e; - margin: 20px 0 0 0; - padding: 15px; - } - .w-sdc-modal-label { - .m_14_r; - text-align: left; - } -} diff --git a/catalog-ui/src/app/view-models/modals/conformance-level-modal/conformance-level-modal-view-model.ts b/catalog-ui/src/app/view-models/modals/conformance-level-modal/conformance-level-modal-view-model.ts deleted file mode 100644 index 45696568b4..0000000000 --- a/catalog-ui/src/app/view-models/modals/conformance-level-modal/conformance-level-modal-view-model.ts +++ /dev/null @@ -1,49 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; - -export interface IConformanceLevelModalModelScope { - footerButtons:Array<any>; - modalInstance:ng.ui.bootstrap.IModalServiceInstance; -} - -export class ConformanceLevelModalViewModel { - - static '$inject' = ['$scope', '$uibModalInstance']; - - constructor(private $scope:IConformanceLevelModalModelScope, - private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance) { - - this.initScope(); - } - - private initScope = ():void => { - - this.$scope.modalInstance = this.$uibModalInstance; - - this.$scope.footerButtons = [ - {'name': 'Continue', 'css': 'grey', 'callback': this.$uibModalInstance.close}, - {'name': 'Reject', 'css': 'blue', 'callback': this.$uibModalInstance.dismiss} - ]; - - }; - -} diff --git a/catalog-ui/src/app/view-models/modals/conformance-level-modal/conformance-level-modal-view.html b/catalog-ui/src/app/view-models/modals/conformance-level-modal/conformance-level-modal-view.html deleted file mode 100644 index 5ba0425ea2..0000000000 --- a/catalog-ui/src/app/view-models/modals/conformance-level-modal/conformance-level-modal-view.html +++ /dev/null @@ -1,38 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<ng1-modal modal="modalInstance" - type="classic" - class="w-sdc-modal modal-type-alert conformance-level-modal" - header="Warning" - buttons="footerButtons" - show-close-button="false"> - - <perfect-scrollbar include-padding="true"> - <div class="w-sdc-modal-body-content" data-tests-id="message"> - <p> - You are about to distribute a service with models and artifacts created with an <b>older version of the platform</b>. - For such service, new properties, metadata and requirements needed by ECOMP components will not be available. - </p><p> - It is highly recommended that you upgrade the service models and artifacts. - </p><p> - Click "Continue" if you need to distribute the current service version.<br /> - Click "Reject" if you need to stop the distribution and manually upgrade the service. - </p> - </div> - </perfect-scrollbar> - -</ng1-modal> diff --git a/catalog-ui/src/app/view-models/modals/conformance-level-modal/conformance-level-modal.less b/catalog-ui/src/app/view-models/modals/conformance-level-modal/conformance-level-modal.less deleted file mode 100644 index 7f195ade83..0000000000 --- a/catalog-ui/src/app/view-models/modals/conformance-level-modal/conformance-level-modal.less +++ /dev/null @@ -1,3 +0,0 @@ -.conformance-level-modal{ - -} diff --git a/catalog-ui/src/app/view-models/modals/email-modal/email-modal-view-model.ts b/catalog-ui/src/app/view-models/modals/email-modal/email-modal-view-model.ts deleted file mode 100644 index 095d1438b2..0000000000 --- a/catalog-ui/src/app/view-models/modals/email-modal/email-modal-view-model.ts +++ /dev/null @@ -1,116 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; -import {IAppConfigurtaion, Component, AsdcComment} from "app/models"; -import {ValidationUtils} from "app/utils"; - -export interface IEmailModalModel_Email { - to:string; - subject:string; - message:string; -} - -export interface IEmailModalModel_Data { - component:Component; - stateUrl:string; -} - -export interface IEmailModalModel { - title:string; - email:IEmailModalModel_Email; - data:IEmailModalModel_Data; -} - -interface IEmailModalViewModelScope { - modalInstanceEmail:ng.ui.bootstrap.IModalServiceInstance; - emailModalModel:IEmailModalModel; - submitInProgress:boolean; - commentValidationPattern:RegExp; - isLoading:boolean; - submit():any; - cancel():void; - validateField(field:any):boolean; -} - -export class EmailModalViewModel { - - static '$inject' = ['$scope', '$filter', 'sdcConfig', '$uibModalInstance', 'emailModalModel', 'ValidationUtils', 'CommentValidationPattern']; - - constructor(private $scope:IEmailModalViewModelScope, - private $filter:ng.IFilterService, - private sdcConfig:IAppConfigurtaion, - private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance, - private emailModalModel:IEmailModalModel, - private ValidationUtils:ValidationUtils, - private CommentValidationPattern:RegExp) { - - this.initScope(emailModalModel); - } - - private initScope = (emailModalModel:IEmailModalModel):void => { - this.$scope.emailModalModel = emailModalModel; - this.$scope.submitInProgress = false; - this.$scope.commentValidationPattern = this.CommentValidationPattern; - this.$scope.modalInstanceEmail = this.$uibModalInstance; - - this.$scope.submit = ():any => { - - let onSuccess = (component:Component) => { - this.$scope.isLoading = false; - this.$scope.submitInProgress = false; - // showing the outlook modal according to the config json - if (this.sdcConfig.showOutlook) { - let link:string = encodeURI(this.sdcConfig.api.baseUrl + "?folder=Ready_For_Testing"); - let outlook:string = this.$filter('translate')("EMAIL_OUTLOOK_MESSAGE", "{'to': '" + emailModalModel.email.to + "','subject': '" + emailModalModel.email.subject + "','message': '" + emailModalModel.email.message + "', 'entityNameAndVersion': '" + emailModalModel.email.subject + "','link': '" + link + "'}"); - window.location.href = outlook; // Open outlook with the email to send - } - this.$uibModalInstance.close(component); // Close the dialog - }; - - let onError = () => { - this.$scope.isLoading = false; - this.$scope.submitInProgress = false; - this.$uibModalInstance.close(); // Close the dialog - }; - - // Submit to server - // Prevent from user pressing multiple times on submit. - if (this.$scope.submitInProgress === false) { - this.$scope.isLoading = true; - this.$scope.submitInProgress = true; - let comment:AsdcComment = new AsdcComment(); - comment.userRemarks = emailModalModel.email.message; - emailModalModel.data.component.changeLifecycleState(emailModalModel.data.stateUrl, comment).then(onSuccess, onError); - } - }; - - this.$scope.cancel = ():void => { - this.$uibModalInstance.dismiss(); - }; - - this.$scope.validateField = (field:any):boolean => { - if (field && field.$dirty && field.$invalid) { - return true; - } - return false; - }; - } -} diff --git a/catalog-ui/src/app/view-models/modals/email-modal/email-modal-view.html b/catalog-ui/src/app/view-models/modals/email-modal/email-modal-view.html deleted file mode 100644 index 612fe226aa..0000000000 --- a/catalog-ui/src/app/view-models/modals/email-modal/email-modal-view.html +++ /dev/null @@ -1,93 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<ng1-modal modal="modalInstanceEmail" type="classic" class="w-sdc-modal-email modal-type-standard" header="{{emailModalModel.title}}" show-close-button="true"> - <loader data-display="isLoading"></loader> - <form novalidate class="w-sdc-form" name="editForm"> - - <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.to)}"> - <label class="i-sdc-form-label col-sm-2">To</label> - <div class="col-sm-10"> - <input class="i-sdc-form-input" type="text" - data-ng-model="emailModalModel.email.to" - data-ng-model-options="{ debounce: 500 }" - data-ng-maxlength="255" - data-required - name="to" - id="to" - data-ng-disabled="true" - /> - </div> - - <div class="input-error" data-ng-show="validateField(editForm.to)" alignToSelector="#to"> - <span ng-show="editForm.to.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'To' }"></span> - <span ng-show="editForm.to.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '255' }"></span> - <span ng-show="editForm.to.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> - </div> - - </div> - - <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.subject)}"> - <label class="i-sdc-form-label col-sm-2">Subject</label> - <div class="col-sm-10"> - <input class="i-sdc-form-input" type="text" - data-ng-model="emailModalModel.email.subject" - data-ng-model-options="{ debounce: 500 }" - data-ng-maxlength="255" - data-required - name="subject" - data-ng-disabled="true" - /> - </div> - - <div class="input-error" data-ng-show="validateField(editForm.subject)"> - <span ng-show="editForm.subject.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Subject' }"></span> - <span ng-show="editForm.subject.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '255' }"></span> - <span ng-show="editForm.subject.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> - </div> - - </div> - - <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.message)}"> - <label class="i-sdc-form-label required col-sm-2">Message</label> - <div class="col-sm-10"> - <textarea class="w-sdc-modal-body-email" - data-ng-model="emailModalModel.email.message" - placeholder="{{'EMAIL_MODAL_MESSAGE' | translate }}" - data-required - name="message" - data-ng-pattern="commentValidationPattern" - maxlength="255" - data-tests-id="changeLifeCycleMessage" - data-ng-maxlength="255"> - </textarea> - - <div class="input-error" data-ng-show="validateField(editForm.message)"> - <span ng-show="editForm.message.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Message' }"></span> - <span ng-show="editForm.message.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '255' }"></span> - <span ng-show="editForm.message.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> - </div> - </div> - - </div> - - </form> - - <div class="w-sdc-modal-footer classic"> - <button class="tlv-btn blue" data-tests-id="OK" data-ng-click="submit()" data-ng-disabled="editForm.$invalid">OK</button> - <button class="tlv-btn grey" data-tests-id="Cancel" data-ng-click="cancel()" >Cancel</button> - </div> -</ng1-modal> diff --git a/catalog-ui/src/app/view-models/modals/email-modal/email-modal.less b/catalog-ui/src/app/view-models/modals/email-modal/email-modal.less deleted file mode 100644 index 471089fa1a..0000000000 --- a/catalog-ui/src/app/view-models/modals/email-modal/email-modal.less +++ /dev/null @@ -1,57 +0,0 @@ -.w-sdc-modal-email { - - .w-sdc-modal-body { - border-bottom: none; - } - - form.w-sdc-form{ - padding: 0; - - .i-sdc-form-item { - clear: both; - label { - min-height: 30px; - padding-top: 4px; - } - - .col-sm-10 { - padding-right: 0; - } - - } - - .w-sdc-modal-body-email { - border-style: solid; - border-width: 1px; - border-color: @color_e; - box-sizing: border-box; - width: 100%; - height: 127px; - margin-bottom: 20px; - } - - label {.m_14_m; text-align: left;} - input {.m_14_r;} - textarea {.m_14_r;} - /* I made the subject and to fields as input (for future use), but for now they look like labels: */ - input:disabled { - .bg_c; - border: none; - } - } - - .w-sdc-modal-action { - background-color: @main_color_p; - padding: 0 13px 0 0; - height: 90px; - line-height: 65px; - - button {width: 174px;} - } - - .w-sdc-form .i-sdc-form-item label.required::before { - position: absolute; - left: -13px; - } - -} diff --git a/catalog-ui/src/app/view-models/modals/error-modal/error-403-view.html b/catalog-ui/src/app/view-models/modals/error-modal/error-403-view.html index ba08b51fa3..1cab8adb3b 100644 --- a/catalog-ui/src/app/view-models/modals/error-modal/error-403-view.html +++ b/catalog-ui/src/app/view-models/modals/error-modal/error-403-view.html @@ -13,7 +13,6 @@ ~ See the License for the specific language governing permissions and ~ limitations under the License. --> - <div class="sdc-error-403-container" > <div class="sdc-error-403-container-title" translate="GENERAL_ERROR_403_TITLE"></div> <div class="w-sdc-error-403-text w-sdc-form" translate="GENERAL_ERROR_403_DESCRIPTION" translate-values="{'mailto': mailto }"></div> diff --git a/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.html b/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.html index 75bc82dcfd..86c776a7ee 100644 --- a/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.html +++ b/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.html @@ -13,7 +13,6 @@ ~ See the License for the specific language governing permissions and ~ limitations under the License. --> - <ng1-modal modal="modalIcons" type="classic" class="w-sdc-modal-icons" buttons="footerButtons" header="Choose Icon" show-close-button="true"> <div class="suggested-icons-container"> diff --git a/catalog-ui/src/app/view-models/modals/message-modal/message-base-modal-model.ts b/catalog-ui/src/app/view-models/modals/message-modal/message-base-modal-model.ts deleted file mode 100644 index b987f1088e..0000000000 --- a/catalog-ui/src/app/view-models/modals/message-modal/message-base-modal-model.ts +++ /dev/null @@ -1,63 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; -import {SEVERITY} from "app/utils"; - -export interface IMessageModalModel { - title:string; - message:string; - severity:SEVERITY; -} - -export interface IMessageModalViewModelScope extends ng.IScope { - footerButtons:Array<any>; - messageModalModel:IMessageModalModel; - modalInstanceError:ng.ui.bootstrap.IModalServiceInstance; - ok():void; -} - -export class MessageModalViewModel { - - constructor(private $baseScope:IMessageModalViewModelScope, - private $baseModalInstance:ng.ui.bootstrap.IModalServiceInstance, - private baseMessageModalModel:IMessageModalModel) { - - this.initScope(baseMessageModalModel); - } - - private initScope = (messageModalViewModel:IMessageModalModel):void => { - - this.$baseScope.messageModalModel = messageModalViewModel; - this.$baseScope.modalInstanceError = this.$baseModalInstance; - - this.$baseScope.ok = ():void => { - this.$baseModalInstance.close(); - }; - - this.$baseScope.footerButtons = [ - { - 'name': 'OK', - 'css': 'grey', - 'callback': this.$baseScope.ok - } - ]; - } -} diff --git a/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal-view-model.ts b/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal-view-model.ts deleted file mode 100644 index f2b2217645..0000000000 --- a/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal-view-model.ts +++ /dev/null @@ -1,42 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; -import {IMessageModalModel, MessageModalViewModel, IMessageModalViewModelScope} from "../message-base-modal-model"; - -export interface IClientMessageModalModel extends IMessageModalModel { -} - -export interface IClientMessageModalViewModelScope extends IMessageModalViewModelScope { - clientMessageModalModel:IClientMessageModalModel; -} - -export class ClientMessageModalViewModel extends MessageModalViewModel { - - static '$inject' = ['$scope', '$uibModalInstance', 'clientMessageModalModel']; - - constructor(private $scope:IClientMessageModalViewModelScope, - private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance, - private clientMessageModalModel:IClientMessageModalModel) { - - super($scope, $uibModalInstance, clientMessageModalModel); - } - -} diff --git a/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal-view.html b/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal-view.html deleted file mode 100644 index f0a4f9a8db..0000000000 --- a/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal-view.html +++ /dev/null @@ -1,32 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<ng1-modal modal="modalInstanceError" - type="classic" - class="w-sdc-modal modal-type-alert" - header="{{messageModalModel.title}}" - buttons="footerButtons" - show-close-button="true"> - - <perfect-scrollbar include-padding="true"> - <div class="w-sdc-modal-icon w-sdc-modal-icon-{{messageModalModel.severity}}"></div> - <div class="w-sdc-modal-caption"> - <div ng-bind-html="messageModalModel.message" data-tests-id="message"></div> - </div> - <!--<div class="w-sdc-modal-body-content" data-ng-bind-html="messageModalModel.message"></div>--> - </perfect-scrollbar> - -</ng1-modal> diff --git a/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal.less b/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal.less deleted file mode 100644 index e69de29bb2..0000000000 --- a/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal.less +++ /dev/null diff --git a/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal-view-model.ts b/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal-view-model.ts deleted file mode 100644 index b92069fce2..0000000000 --- a/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal-view-model.ts +++ /dev/null @@ -1,46 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; -import {IMessageModalModel, IMessageModalViewModelScope, MessageModalViewModel} from "../message-base-modal-model"; - -export interface IServerMessageModalModel extends IMessageModalModel { - status:string; - messageId:string; - - -} - -export interface IServerMessageModalViewModelScope extends IMessageModalViewModelScope { - serverMessageModalModel:IServerMessageModalModel; -} - -export class ServerMessageModalViewModel extends MessageModalViewModel { - - static '$inject' = ['$scope', '$uibModalInstance', 'serverMessageModalModel']; - - constructor(private $scope:IServerMessageModalViewModelScope, - private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance, - private serverMessageModalModel:IServerMessageModalModel) { - - super($scope, $uibModalInstance, serverMessageModalModel); - } - -} diff --git a/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal-view.html b/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal-view.html deleted file mode 100644 index 7d3204c095..0000000000 --- a/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal-view.html +++ /dev/null @@ -1,33 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<ng1-modal modal="modalInstanceError" - type="classic" - class="w-sdc-modal modal-type-error" - header="{{messageModalModel.title}}" - buttons="footerButtons" - show-close-button="true"> - - <perfect-scrollbar include-padding="true"> - <div class="w-sdc-modal-icon w-sdc-modal-icon-{{messageModalModel.severity}}"></div> - <div class="w-sdc-modal-caption"> - <div>Error code: {{messageModalModel.messageId}}</div> - <div>Status code: {{messageModalModel.status}}</div> - </div> - <div class="w-sdc-modal-body-content" data-ng-bind-html="messageModalModel.message" data-tests-id="message"></div> - </perfect-scrollbar> - -</ng1-modal> diff --git a/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal.less b/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal.less deleted file mode 100644 index e69de29bb2..0000000000 --- a/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal.less +++ /dev/null diff --git a/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view-model.ts b/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view-model.ts deleted file mode 100644 index 01394a3c33..0000000000 --- a/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view-model.ts +++ /dev/null @@ -1,272 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; -import {ComponentType, SEVERITY, FileUtils, ModalsHandler, ComponentFactory} from "app/utils"; -import {OnboardingService, CacheService} from "app/services"; -import {Component, IComponent, IUser, IAppConfigurtaion, Resource} from "app/models"; -import {IServerMessageModalModel} from "../message-modal/message-server-modal/server-message-modal-view-model"; -import {Dictionary} from "app/utils"; -import * as _ from 'underscore'; - -interface IOnboardingModalViewModelScope { - modalOnboarding:ng.ui.bootstrap.IModalServiceInstance; - componentsList:Array<IComponent>; - tableHeadersList:Array<any>; - selectedComponent:Component; - componentFromServer:Component; - reverse:boolean; - sortBy:string; - searchBind:string; - okButtonText:string; - isCsarComponentExists:boolean; - user:IUser; - isLoading:boolean; - - //this is for UI paging - numberOfItemsToDisplay:number; - allItemsDisplayed:boolean; - - doSelectComponent(component:Component):void; - doUpdateCsar():void; - doImportCsar():void; - sort(sortBy:string):void; - downloadCsar(packageId:string):void; - increaseNumItemsToDisplay():void; -} - -export class OnboardingModalViewModel { - - static '$inject' = [ - '$scope', - '$filter', - '$state', - 'sdcConfig', - '$uibModalInstance', - 'Sdc.Services.OnboardingService', - 'okButtonText', - 'currentCsarUUID', - 'currentCsarVersion', - 'Sdc.Services.CacheService', - 'FileUtils', - 'ComponentFactory', - 'ModalsHandler' - ]; - - constructor(private $scope:IOnboardingModalViewModelScope, - private $filter:ng.IFilterService, - private $state:any, - private sdcConfig:IAppConfigurtaion, - private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance, - private onBoardingService:OnboardingService, - private okButtonText:string, - private currentCsarUUID:string, - private currentCsarVersion:string, - private cacheService:CacheService, - private fileUtils:FileUtils, - private componentFactory:ComponentFactory, - private modalsHandler:ModalsHandler) { - - this.init(); - } - - /** - * Called from controller constructor, this will call onboarding service to get list - * of "mini" components (empty components created from CSAR). - * The list is inserted to componentsList on $scope. - * And then call initScope method. - */ - private init = ():void => { - this.initOnboardingComponentsList(); - }; - - private initScope = ():void => { - - this.initSortedTableScope(); - this.initModalScope(); - this.$scope.sortBy = "name"; // Default sort by - this.$scope.user = this.cacheService.get('user'); - this.$scope.okButtonText = this.okButtonText; - this.$scope.numberOfItemsToDisplay = 0; - this.$scope.allItemsDisplayed = false; - - // Dismiss the modal and pass the "mini" component to workspace general page - this.$scope.doImportCsar = ():void => { - - this.$uibModalInstance.close({ - componentCsar: this.$scope.selectedComponent, - type: ComponentType.RESOURCE.toLowerCase() - }); - }; - - this.$scope.doUpdateCsar = ():void => { - - // Change the component version to the CSAR version we want to update. - if(!this.currentCsarVersion || this.currentCsarVersion != (<Resource>this.$scope.selectedComponent).csarVersion) { - this.$uibModalInstance.close({ - componentCsar: this.$scope.selectedComponent, - previousComponent: this.$scope.componentFromServer, - type: this.$scope.componentFromServer.componentType.toLowerCase() - - }); - - } else { - this.$uibModalInstance.close(); - } - }; - - this.$scope.downloadCsar = (packageId:string):void => { - this.$scope.isLoading = true; - this.onBoardingService.downloadOnboardingCsar(packageId).then( - (file:any):void => { - this.$scope.isLoading = false; - if (file) { - this.fileUtils.downloadFile(file, packageId + '.csar'); - } - }, ():void => { - this.$scope.isLoading = false; - var data:IServerMessageModalModel = { - title: 'Download error', - message: "Error downloading file", - severity: SEVERITY.ERROR, - messageId: "", - status: "" - }; - this.modalsHandler.openServerMessageModal(data); - } - ); - }; - - this.$scope.increaseNumItemsToDisplay = ():void => { - this.$scope.numberOfItemsToDisplay = this.$scope.numberOfItemsToDisplay + 40; - if (this.$scope.componentsList) { - this.$scope.allItemsDisplayed = this.$scope.numberOfItemsToDisplay >= this.$scope.componentsList.length; - } - }; - - // When the user select a row, set the component as selectedComponent - this.$scope.doSelectComponent = (component:Component):void => { - - if (this.$scope.selectedComponent === component) { - // Collapse the item - this.$scope.selectedComponent = undefined; - return; - } - - this.$scope.isLoading = true; - this.$scope.componentFromServer = undefined; - this.$scope.selectedComponent = component; - - let onSuccess = (componentFromServer:Component):void => { - this.$scope.isLoading = false; - if (componentFromServer) { - this.$scope.componentFromServer = componentFromServer; - this.$scope.isCsarComponentExists = true; - } else { - this.$scope.componentFromServer = component; - this.$scope.isCsarComponentExists = false; - } - }; - - let onError = ():void => { - this.$scope.isLoading = false; - this.$scope.componentFromServer = component; - this.$scope.isCsarComponentExists = false; - }; - - this.onBoardingService.getComponentFromCsarUuid((<Resource>component).csarUUID).then(onSuccess, onError); - }; - - }; - - private initSortedTableScope = ():void => { - this.$scope.tableHeadersList = [ - {title: 'Name', property: 'name'}, - {title: 'Vendor', property: 'vendorName'}, - {title: 'Category', property: 'categories'}, - {title: 'Version', property: 'csarVersion'}, - {title: 'Type', property: 'resourceType'}, - {title: '#', property: 'importAndUpdate'} - //{title: 'Date', property: 'componentDate'} - ]; - - this.$scope.sort = (sortBy:string):void => { - this.$scope.reverse = (this.$scope.sortBy === sortBy) ? !this.$scope.reverse : false; - this.$scope.sortBy = sortBy; - }; - }; - - private initModalScope = ():void => { - // Enable the modal directive to close - this.$scope.modalOnboarding = this.$uibModalInstance; - }; - - private initOnboardingComponentsList = ():void => { - let onSuccess = (onboardingResponse:Array<IComponent>):void => { - initMaxVersionOfItemsInList(onboardingResponse); - - if (this.currentCsarUUID) { - //this.$scope.componentsList = this.$filter('filter')(this.$scope.componentsList, {csarUUID: this.currentCsarUUID}); - this.$scope.componentsList = this.$filter('filter')(this.$scope.componentsList, - (input):boolean => { - return input.csarUUID === this.currentCsarUUID; - } - ); - } - this.initScope(); - }; - - let onError = ():void => { - console.log("Error getting onboarding list"); - this.initScope(); - }; - - let initMaxVersionOfItemsInList = (onboardingResponse:Array<IComponent>):void => { - // Get only the latest version of each item - this.$scope.componentsList = []; - - // Get all unique items from the list - let uniqueItems:Array<any> = _.uniq(onboardingResponse, false, (item:any):void=>{ - return item.packageId; - }); - - // Loop on all the items with unique packageId - _.each(uniqueItems, (item:any):void=> { - // Find all the items that has same packageId - let ItemsFound:Array<IComponent> = _.filter(onboardingResponse, (inListItem:any):any => { - return inListItem.packageId === item.packageId; - }); - - // Loop on all the items with same packageId and find the max version. - let maxItem:any; - _.each(ItemsFound, (ItemFound:any):void=> { - if (!maxItem) { - maxItem = ItemFound; - } else if (maxItem && parseInt(maxItem.csarVersion) < parseInt(ItemFound.csarVersion)) { - maxItem = ItemFound; - } - }); - this.$scope.componentsList.push(maxItem); - }); - }; - - this.onBoardingService.getOnboardingComponents().then(onSuccess, onError); - }; -} diff --git a/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view.html b/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view.html deleted file mode 100644 index 7f19389bdf..0000000000 --- a/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view.html +++ /dev/null @@ -1,165 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<ng1-modal modal="modalOnboarding" class="w-sdc-modal-onboarding w-sdc-classic-top-line-modal" buttons="footerButtons" header="Import VSP" show-close-button="true"> - <info-tooltip class="general-info-button" info-message-translate="ON_BOARDING_GENERAL_INFO "></info-tooltip> - <div class="title-wrapper"> - <div> - <p class="sub-title">Select one of the software product component below:</p> - </div> - - <div class="top-search"> - <input type="text" - class="search-text" - placeholder="Search" - data-ng-model="search.filterTerm" - data-tests-id="onboarding-search" - ng-model-options="{ debounce: 300 }" /> - <span class="w-sdc-search-icon magnification"></span> - </div> - </div> - - <div class="table-container-flex"> - <div class="table" data-ng-class="{'view-mode': isViewMode()}"> - - <!-- Table headers --> - <div class="head flex-container"> - <div class="table-header head-row hand flex-item" ng-repeat="header in tableHeadersList track by $index" data-ng-click="sort(header.property)" data-tests-id="{{header.title}}">{{header.title}} - <span data-ng-show="sortBy === header.property" class="table-header-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"> </span> - </div> - </div> - - <!-- Table body --> - <div class="body"> - <perfect-scrollbar suppress-scroll-x="true" scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container" id="onboarding-modal-scrollbar-container"> - - <!-- In case the component list is empty --> - <div data-ng-if="!componentsList || componentsList.length===0" class="no-row-text"> - There are no software product component to display - </div> - - <div infinite-scroll-disabled='allItemsDisplayed' infinite-scroll="increaseNumItemsToDisplay()" infinite-scroll-container="'#onboarding-modal-scrollbar-container'"> - - <!-- Loop on components list --> - <div data-ng-repeat-start="component in componentsList | filter: search | orderBy:sortBy:reverse | limitTo:numberOfItemsToDisplay track by $index" - class="flex-container data-row" - data-ng-class="{'selected': component.packageId === selectedComponent.packageId}" - data-ng-click="doSelectComponent(component);" - data-tests-id="csar-row" - > - - <!-- Name --> - <div class="table-col-general flex-item" sdc-smart-tooltip> - <span class="sprite table-arrow" data-ng-class="{'opened': component.packageId === selectedComponent.packageId}" data-tests-id="{{component.name}}"></span> - {{component.name}} - </div> - - <!-- Vendor --> - <div class="table-col-general flex-item" data-tests-id="{{component.vendorName}}" sdc-smart-tooltip> - {{component.vendorName}} - </div> - - <!-- Category --> - <div class="table-col-general flex-item" sdc-smart-tooltip> - {{component.categories[0].name}} {{component.categories[0].subcategories[0].name}} - </div> - - <!-- Version --> - <div class="table-col-general flex-item" sdc-smart-tooltip> - {{component.csarVersion}} - </div> - - <!-- Type --> - <div class="table-col-general flex-item" sdc-smart-tooltip> - {{component.resourceType}} - </div> - - <!-- Import And Update --> - <div class="table-col-general flex-item" sdc-smart-tooltip></div> - - </div> - - <div data-ng-repeat-end="" data-ng-if="component.packageId === selectedComponent.packageId" class="item-opened"> - - <div class="item-opened-description"> - <div class="item-opened-description-title">VSP Description:</div> - {{component.description}} - </div> - - <div class="item-opened-metadata1"> - <div data-ng-if="isCsarComponentExists===true"> - <div class="item-opened-metadata-title">VF'S Meta Data:</div> - <div><span class="th">Name:</span> {{componentFromServer.name}}</div> - <div><span class="th">Lifecycle:</span> {{componentFromServer.lifecycleState}}</div> - <div><span class="th">Creator:</span> {{componentFromServer.creatorFullName}}</div> - </div> - </div> - - <div class="item-opened-metadata2"> - <div data-ng-if="isCsarComponentExists===true"> - <div class="item-opened-metadata-title"> </div> - <div><span class="th">UUID:</span> {{componentFromServer.uuid}}</div> - <div><span class="th">Version:</span> {{componentFromServer.version}}</div> - <div><span class="th">Modifier:</span> {{componentFromServer.lastUpdaterFullName}}</div> - <div data-ng-if="componentFromServer.lifecycleState==='NOT_CERTIFIED_CHECKOUT' && componentFromServer.lastUpdaterUserId !== user.userId"> - <span class="note">Designers cannot update a VSP if the VF is checked out by another user.</span> - </div> - <div data-ng-if="componentFromServer.lifecycleState==='READY_FOR_CERTIFICATION'"> - <span class="note">Designers cannot update a VSP if the VF is in Ready for testing state.</span> - </div> - </div> - </div> - - <div class="item-opened-metadata3"> - <info-tooltip class="info-button" info-message-translate="{{isCsarComponentExists?'ON_BOARDING_UPDATE_INFO':'ON_BOARDING_IMPORT_INFO'}}" direction="left"></info-tooltip> - </div> - - <div class="item-opened-icon"> - <span data-ng-if="isCsarComponentExists!==true" - class="sprite-new import-file-btn" - data-ng-click="doImportCsar()" - uib-tooltip="Import VSP" - tooltip-class="uib-custom-tooltip" - tooltip-placement="bottom" - data-tests-id="import-csar"></span> - - <span data-ng-if="isCsarComponentExists===true" - class="sprite-new refresh-file-btn" - uib-tooltip="Update VSP" - tooltip-class="uib-custom-tooltip" - tooltip-placement="bottom" - data-ng-class="{'disabled': (componentFromServer.lifecycleState==='NOT_CERTIFIED_CHECKOUT' && componentFromServer.lastUpdaterUserId!==user.userId) || componentFromServer.lifecycleState==='READY_FOR_CERTIFICATION'}" - data-ng-click="doUpdateCsar()" - data-tests-id="update-csar"></span> - - <span data-ng-click="downloadCsar(component.packageId)" - class="sprite-new download-file-btn hand" - uib-tooltip="Download VSP" - tooltip-class="uib-custom-tooltip" - tooltip-placement="bottom" - data-tests-id="download-csar"></span> - </div> - <loader data-display="isLoading" relative="true" size="small"></loader> - </div> - </div> - - </perfect-scrollbar> - </div><!-- End table body --> - </div><!-- End table --> - </div><!-- End table-container-flex --> - <div class="w-sdc-modal-footer classic"></div> - -</ng1-modal> diff --git a/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal.less b/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal.less deleted file mode 100644 index ccf4fb00b5..0000000000 --- a/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal.less +++ /dev/null @@ -1,149 +0,0 @@ -.w-sdc-modal-onboarding { - - width: 100%; - display: inline-block; - - .general-info-button{ - position: relative; - top: -40px; - left: 95px; - float: left; - } - - .title-wrapper { - display: flex; - justify-content: space-between; - align-items: flex-end; - - .sub-title { - .m_14_r; - float:left; - } - } - - .w-sdc-classic-btn { - float: right; - margin-bottom: 10px; - } - - .table{ - height: 472px; - margin-bottom: 0; - } - - .table-container-flex { - margin-top: 10px; - - .table { - .body { - .data-row + div.item-opened { - word-wrap: break-word; - display: flex; - justify-content: space-between; - padding: 10px 0; - - .item-opened-description-title, - .item-opened-metadata-title { - .m_14_m; - } - - .item-opened-description, - .item-opened-metadata1, - .item-opened-metadata2, - .item-opened-metadata3 { - .th { .m_14_m; } - flex-basis: 0; - overflow: hidden; - padding: 5px 15px; - } - - .item-opened-description, - .item-opened-metadata3 { - border-right: 1px solid @main_color_o; - } - - .item-opened-metadata2 { - word-break: break-word; - .note { - color: @func_color_q; - } - } - - .item-opened-icon { - flex-basis: 0; - overflow: hidden; - padding: 5px 15px; - align-self: center; - } - - .item-opened-description {flex-grow: 25.3;} - .item-opened-metadata1 {flex-grow: 25;} - .item-opened-metadata2 {flex-grow: 45;} - .item-opened-metadata3 { - flex-grow: 10; - .info-button{ - float: right; - } - } - .item-opened-icon {flex-grow: 10.1;} - } - } - } - - .flex-item:nth-child(1) { - flex-grow: 25; - .hand; - span.table-arrow { - margin-right: 7px; - } - } - - .flex-item:nth-child(2) {flex-grow: 25;} - .flex-item:nth-child(3) {flex-grow: 30;} - .flex-item:nth-child(4) {flex-grow: 10; text-align: center; } - .flex-item:nth-child(5) {flex-grow: 10; text-align: center; } - .flex-item:nth-child(6) {flex-grow: 10; } - - } - - .download-file-btn { - cursor: pointer; - margin-left: 4px; - } - - .refresh-file-btn, - .import-file-btn { - cursor: pointer; - margin-left: 20px; - } - - .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/src/app/view-models/onboard-vendor/onboard-vendor-view-model.ts b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view-model.ts index 10f41f6b61..fc3672cc50 100644 --- a/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view-model.ts +++ b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view-model.ts @@ -22,7 +22,7 @@ import * as _ from "underscore"; import {IUserProperties} from "app/models"; import {MenuItemGroup, MenuItem} from "app/utils"; -import {CacheService} from "app/services"; +import {CacheService} from "app/services-ng2"; declare var PunchOutRegistry; export class BreadcrumbsMenuItem { diff --git a/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view.html b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view.html index fc1140ebf0..2d8010bd37 100644 --- a/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view.html +++ b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view.html @@ -13,7 +13,6 @@ ~ See the License for the specific language governing permissions and ~ limitations under the License. --> - <div class="sdc-catalog-container"> <loader data-display="isLoading"></loader> diff --git a/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor.less b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor.less index 71a3101412..1e091e957d 100644 --- a/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor.less +++ b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor.less @@ -76,22 +76,6 @@ } } - &.READY_FOR_CERTIFICATION { - .i-sdc-categories-list-item-icon { - background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -2985px; - width: 14px; - height: 16px; - } - } - - &.CERTIFICATION_IN_PROGRESS { - .i-sdc-categories-list-item-icon { - background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -2934px; - width: 14px; - height: 16px; - } - } - &.DISTRIBUTED, &.TBD { .i-sdc-categories-list-item-icon { diff --git a/catalog-ui/src/app/view-models/plugins/plugins-tab-view-model.ts b/catalog-ui/src/app/view-models/plugins/plugins-tab-view-model.ts deleted file mode 100644 index d25cd19bff..0000000000 --- a/catalog-ui/src/app/view-models/plugins/plugins-tab-view-model.ts +++ /dev/null @@ -1,83 +0,0 @@ -/* - -* Copyright (c) 2018 AT&T Intellectual Property. - -* - -* 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. - -*/ - -import {IUserProperties, Plugin} from "app/models"; -import {CacheService} from "app/services"; -import {PluginsService} from "../../ng2/services/plugins.service"; - - -interface IPluginsTabViewModelScope extends ng.IScope { - plugin: Plugin - user: IUserProperties; - version: string; - queryParams: Object; - isLoading: boolean; - - onLoadingDone(plugin: Plugin): void; -} - -export class PluginsTabViewModel { - static '$inject' = [ - '$scope', - '$stateParams', - 'Sdc.Services.CacheService', - 'PluginsService' - ]; - - constructor(private $scope: IPluginsTabViewModelScope, - private $stateParams: any, - private cacheService: CacheService, - private pluginsService: PluginsService) { - - this.initScope(); - } - - private initScope = (): void => { - this.$scope.plugin = this.pluginsService.getPluginByStateUrl(this.$stateParams.path); - this.$scope.version = this.cacheService.get('version'); - this.$scope.user = this.cacheService.get('user'); - - this.$scope.isLoading = true; - - this.$scope.queryParams = { - userId: this.$scope.user.userId, - userRole: this.$scope.user.role, - displayType: "tab", - parentUrl: window.location.origin, - eventsClientId: this.$scope.plugin.pluginId - }; - - this.$scope.onLoadingDone = (plugin: Plugin) => { - if (plugin.pluginId == this.$scope.plugin.pluginId) { - this.$scope.isLoading = false; - } - }; - } -} diff --git a/catalog-ui/src/app/view-models/plugins/plugins-tab-view.html b/catalog-ui/src/app/view-models/plugins/plugins-tab-view.html deleted file mode 100644 index 50c5766625..0000000000 --- a/catalog-ui/src/app/view-models/plugins/plugins-tab-view.html +++ /dev/null @@ -1,21 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<div class="sdc-catalog-container plugins-tab-container"> - <loader display="isLoading"></loader> - <top-nav [version]="version" [hide-search]="true"></top-nav> - <plugin-frame (on-loading-done)="onLoadingDone(plugin)" [plugin]="plugin" [query-params]="queryParams"></plugin-frame> -</div> diff --git a/catalog-ui/src/app/view-models/plugins/plugins-tab.less b/catalog-ui/src/app/view-models/plugins/plugins-tab.less deleted file mode 100644 index 3cb5d1b421..0000000000 --- a/catalog-ui/src/app/view-models/plugins/plugins-tab.less +++ /dev/null @@ -1,2 +0,0 @@ -.plugins-tab-container { -} diff --git a/catalog-ui/src/app/view-models/preloading/preloading-view.html b/catalog-ui/src/app/view-models/preloading/preloading-view.html deleted file mode 100644 index e894587fdc..0000000000 --- a/catalog-ui/src/app/view-models/preloading/preloading-view.html +++ /dev/null @@ -1,25 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<div class="sdc-loading-page"> - <h1 class="caption1" translate="SIGN_IN_CAPTION"></h1> - <p class="caption2" translate="SIGN_IN_DESCRIPTION"></p> - - <div class="load-container-wrapper"> - <div class="load-container load2 animated fadeIn"><div class="loader">Loading...</div></div> - </div> - -</div> diff --git a/catalog-ui/src/app/view-models/preloading/preloading-view.ts b/catalog-ui/src/app/view-models/preloading/preloading-view.ts deleted file mode 100644 index d629d298f2..0000000000 --- a/catalog-ui/src/app/view-models/preloading/preloading-view.ts +++ /dev/null @@ -1,47 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; - -interface IPreLoadingViewScope { - startZoomIn:boolean; -} - -export class PreLoadingViewModel { - - static '$inject' = ['$scope']; - - constructor(private $scope:IPreLoadingViewScope) { - this.init($scope); - } - - private init = ($scope:IPreLoadingViewScope):void => { - this.animate($('.caption1'), 'fadeInUp', 400); - this.animate($('.caption2'), 'fadeInUp', 800); - }; - - private animate = (element:any, animation:string, when:number):void => { - window.setTimeout(()=> { - element.addClass("animated " + animation); - element[0].style = "visibility: visible;"; - }, when); - }; - -} diff --git a/catalog-ui/src/app/view-models/shared/notification-custom-template.html b/catalog-ui/src/app/view-models/shared/notification-custom-template.html index 869c49bacf..9456b87093 100644 --- a/catalog-ui/src/app/view-models/shared/notification-custom-template.html +++ b/catalog-ui/src/app/view-models/shared/notification-custom-template.html @@ -13,7 +13,6 @@ ~ See the License for the specific language governing permissions and ~ limitations under the License. --> - <div class="ui-notification"> <div class="notification-container"> <div class="icon-container"> diff --git a/catalog-ui/src/app/view-models/shared/notification-template.less b/catalog-ui/src/app/view-models/shared/notification-template.less new file mode 100644 index 0000000000..5baf10d411 --- /dev/null +++ b/catalog-ui/src/app/view-models/shared/notification-template.less @@ -0,0 +1,53 @@ +.notification-container{ + display: flex; + padding: 15px 11px; + float: left; + .icon-container{ + flex-grow: 1; + margin-right: 20px; + .icon-circle{ + background-color: black; + height: 40px; + width: 40px; + border-radius: 50%; + display: flex; + align-items: center; + margin-right: 0; + background-color: rgba(255, 255, 255, 0.3); + .icon{ + margin: 0 auto; + display: block; + } + } + } + .msg-content{ + flex-grow: 3; + h3{ + border-bottom: none; + font-weight: 400; + .f-type._18_m; + } + .message{ + font-weight: 300; + .f-type._14_m; + } + } +} +.ui-notification.success{ + background-color: @main_color_d; + .icon{ + .notification-success-icon; + } +} +.ui-notification.error{ + background-color: @func_color_q; + .icon{ + .notification-error-icon; + } +} +.ui-notification.info{ + background-color: @main_color_a; + .icon{ + .notification-process-icon; + } +} diff --git a/catalog-ui/src/app/view-models/support/support-view-model.ts b/catalog-ui/src/app/view-models/support/support-view-model.ts deleted file mode 100644 index 5703a74e97..0000000000 --- a/catalog-ui/src/app/view-models/support/support-view-model.ts +++ /dev/null @@ -1,36 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; -import {CacheService} from "app/services"; - -interface ISupportViewModelScope { - version:string; -} - -export class SupportViewModel { - - static '$inject' = ['$scope', 'Sdc.Services.CacheService']; - - constructor(private $scope:ISupportViewModelScope, - private cacheService:CacheService) { - this.$scope.version = this.cacheService.get('version'); - } -} diff --git a/catalog-ui/src/app/view-models/support/support-view.html b/catalog-ui/src/app/view-models/support/support-view.html deleted file mode 100644 index e85373b79d..0000000000 --- a/catalog-ui/src/app/view-models/support/support-view.html +++ /dev/null @@ -1,47 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<div class="full-height" > - <loader data-display="isLoading"></loader> - <div class="w-sdc-header"> - <div class="w-sdc-header-logo"> - <div class="w-sdc-header-logo-icon sprite logo"></div> - <a class="w-sdc-header-logo-link" data-ui-sref="dashboard" translate="PROJECT_TITLE"></a> - <div class="w-sdc-header-version"> v.{{version}}</div> - </div> - <div class="i-sdc-header-caption">Support</div> - <user-header-details ></user-header-details> - </div> - <div class="w-sdc-main-container"> - <div class="w-sdc-left-sidebar"> - <div class="w-sdc-left-sidebar-in-progress" > - <div class="i-sdc-left-sidebar-item category-title" data-ng-class="{'selectedLink':selectedLeftBarGroupLink === inProgressEnumVal}" data-ng-click="setSelectedEntitiesByEntityGroup(inProgressEnumVal)" >In Design ({{numOfCheckOutEntities+numOfCheckInEntities}})</div> - <div class="i-sdc-left-sidebar-item" data-ng-class="{'selectedLink':selectedLeftBarStateLink===notCertifiedCheckOutEnumVal}" data-ng-click="setSelectedEntitiesByEntityGroupAndEntityState(inProgressEnumVal, notCertifiedCheckOutEnumVal)" >Checked Out ({{numOfCheckOutEntities}})</div> - <div class="i-sdc-left-sidebar-item" data-ng-class="{'selectedLink':selectedLeftBarStateLink===notCertifiedCheckInEnumVal}" data-ng-click="setSelectedEntitiesByEntityGroupAndEntityState(inProgressEnumVal, notCertifiedCheckInEnumVal)" >Checked In ({{numOfCheckInEntities}})</div> - </div> - <div class="w-sdc-left-sidebar-following" > - <div class="i-sdc-left-sidebar-item category-title" data-ng-class="{'selectedLink':selectedLeftBarGroupLink===followingEnumVal}" data-ng-click="setSelectedEntitiesByEntityGroup(followingEnumVal)" >Completed Design ({{numOfReadyForCertificationEntities+numOfCertificationInProgressEntities+numOfCertifiedEntities}})</div> - <div class="i-sdc-left-sidebar-item" data-ng-class="{'selectedLink':selectedLeftBarStateLink===readyForCertificationEnumVal}" data-ng-click="setSelectedEntitiesByEntityGroupAndEntityState(followingEnumVal, readyForCertificationEnumVal)" >Ready For Certification ({{numOfReadyForCertificationEntities}})</div> - <div class="i-sdc-left-sidebar-item" data-ng-class="{'selectedLink':selectedLeftBarStateLink===certificationInProgressEnumVal}" data-ng-click="setSelectedEntitiesByEntityGroupAndEntityState(followingEnumVal, certificationInProgressEnumVal)" >Certification In Progress ({{numOfCertificationInProgressEntities}})</div> - <div class="i-sdc-left-sidebar-item" data-ng-class="{'selectedLink':selectedLeftBarStateLink===certifiedEnumVal}" data-ng-click="setSelectedEntitiesByEntityGroupAndEntityState(followingEnumVal, certifiedEnumVal)" >Certified ({{numOfCertifiedEntities}})</div> - </div> - <div class="w-sdc-left-sidebar-nav"> - <div class="i-sdc-left-sidebar-nav-item catalog" data-ui-sref="catalog">Catalog</div> - <div class="i-sdc-left-sidebar-nav-item support" data-ui-sref="support">Support</div> - </div> - </div> - </div> -</div> diff --git a/catalog-ui/src/app/view-models/support/support.less b/catalog-ui/src/app/view-models/support/support.less deleted file mode 100644 index 8159e38320..0000000000 --- a/catalog-ui/src/app/view-models/support/support.less +++ /dev/null @@ -1,8 +0,0 @@ -.w-sdc-left-sidebar-in-progress, -.w-sdc-left-sidebar-following { - .b_7; -} - -.w-sdc-left-sidebar-following { - padding: 13px 0; -} diff --git a/catalog-ui/src/app/view-models/tabs/general-tab.less b/catalog-ui/src/app/view-models/tabs/general-tab.less deleted file mode 100644 index 936b3e3414..0000000000 --- a/catalog-ui/src/app/view-models/tabs/general-tab.less +++ /dev/null @@ -1,122 +0,0 @@ -.sdc-general-tab { - - display: flex; - min-height: 100%; - flex-flow: column; - - .sdc-edit-icon { - .sprite; - .e-sdc-small-icon-pencil; - } - .sdc-general-tab-title { - - .f-color.a; - .f-type._14_m; - padding: 0px 0px 15px 20px; - border-bottom: 1px solid @main_color_o; - } - - .sdc-general-tab-sub-title { - - .f-color.a; - .f-type._14_m; - padding: 15px 20px 15px 20px; - - } - - //scrollbar - .general-tab-scrollbar-container { - - .perfect-scrollbar; - width: 100%; - } - - //plus minus expand collapse - .general-tab-expand-collapse { - - &.expanded { - .expand-collapse-title { - .expand-collapse-title-icon { - .expand-collapse-minus-icon; - } - } - } - - .expand-collapse-title { - - padding: 8px 20px 4px 20px; - cursor: pointer; - &:hover { - background-color: @main_color_o; - } - - .expand-collapse-title-icon { - .hand; - .sprite-new; - .expand-collapse-plus-icon; - } - .expand-collapse-title-text { - max-width: 225px; - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - padding-left: 10px; - line-height: 15px; - } - } - .selected { - background-color: @main_color_a; - .f-color.p; - } - - } - - .expand-collapse-sub-title { - max-width: 190px; - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - padding: 10px 0 0 43px; - - } - - //resizable view - .resizable-container { - - flex: 1 1 auto; - display: flex; - flex-direction: column; - height: 90%; - - .resizable-section { - min-height: 50px; - flex: 1; - display: flex; - flex-flow: column; - &.resizable { - flex: 0 0 300px; - } - } - - //this is the resizable icon custom design for the angular resizable directive - .rg-top { - span { - margin-top: -5px; - &:before { - border-top: 1px dotted @main_color_m; - content: ''; - display: inline-block; - width: 39px; - height: 6px; - } - - border-top: 1px dotted @main_color_m; - border-bottom: 1px dotted @main_color_m; - width: 39px; - height: 4px; - } - } - } -} diff --git a/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view-model.ts b/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view-model.ts deleted file mode 100644 index f752e3dba7..0000000000 --- a/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view-model.ts +++ /dev/null @@ -1,134 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; -import {ModalsHandler} from "app/utils"; -import {PropertyModel, DisplayModule, Component, ComponentInstance, Tab, Module} from "app/models"; -import {ExpandCollapseListData} from "app/directives/utils/expand-collapse-list-header/expand-collapse-list-header"; - -interface IComponentInstancesMap { - [key:string]: ComponentInstance -} - -export interface IHierarchyScope extends ng.IScope { - component:Component; - selectedIndex:number; - selectedModule:DisplayModule; - singleTab:Tab; - isLoading:boolean; - expandCollapseArtifactsList:ExpandCollapseListData; - expandCollapsePropertiesList:ExpandCollapseListData; - selectedInstanceId:string; - componentInstancesMap:IComponentInstancesMap; - - onModuleSelected(module:Module, selectedIndex:number, componentInstanceId?:string):void; - onModuleNameChanged(module:DisplayModule):void; - updateHeatName():void; - loadInstanceModules(instance:ComponentInstance):ng.IPromise<boolean>; - openEditPropertyModal(property:PropertyModel, filteredProperties:Array<PropertyModel>):void; -} - -export class HierarchyViewModel { - - static '$inject' = [ - '$scope', - '$q', - 'ModalsHandler' - ]; - - constructor(private $scope:IHierarchyScope, private $q:ng.IQService, private ModalsHandler:ModalsHandler) { - this.$scope.component = this.$scope.singleTab.data; - this.$scope.isLoading = false; - this.$scope.expandCollapseArtifactsList = new ExpandCollapseListData(); - this.$scope.expandCollapsePropertiesList = new ExpandCollapseListData(); - this.$scope.componentInstancesMap = <IComponentInstancesMap>{}; - this.initScopeMethods(); - } - - private initScopeMethods():void { - - let collapseModuleData = ():void => { - this.$scope.expandCollapseArtifactsList.expandCollapse = false; - this.$scope.expandCollapsePropertiesList.expandCollapse = false; - this.$scope.expandCollapseArtifactsList.orderByField = "artifactName"; - this.$scope.expandCollapsePropertiesList.orderByField = "name"; - }; - - this.$scope.onModuleSelected = (module:Module, selectedIndex:number, componentInstanceId?:string):void => { - - let onSuccess = (module:DisplayModule) => { - console.log("Module Loaded: ", module); - this.$scope.selectedModule = module; - this.$scope.isLoading = false; - collapseModuleData(); - }; - - let onFailed = () => { - this.$scope.isLoading = false; - }; - - this.$scope.selectedIndex = selectedIndex; - if (!this.$scope.selectedModule || (this.$scope.selectedModule && this.$scope.selectedModule.uniqueId != module.uniqueId)) { - this.$scope.isLoading = true; - if (this.$scope.component.isService()) { - this.$scope.selectedInstanceId = componentInstanceId; - this.$scope.component.getModuleInstanceForDisplay(componentInstanceId, module.uniqueId).then(onSuccess, onFailed); - } else { - this.$scope.component.getModuleForDisplay(module.uniqueId).then(onSuccess, onFailed); - } - } - - const componentInstances: Array<ComponentInstance> = this.$scope.component.componentInstances || []; - (<string[]>_.values(module.members)).forEach((memberId) => { - if (!(memberId in this.$scope.componentInstancesMap)) { - const compInstance = componentInstances.find((c) => c.uniqueId === memberId); - if (compInstance) { - this.$scope.componentInstancesMap[compInstance.uniqueId] = compInstance; - } - } - }); - }; - - this.$scope.updateHeatName = () => { - this.$scope.isLoading = true; - - let originalName:string = this.$scope.selectedModule.name; - - let onSuccess = (module:Module) => { - console.log("Module name updated:", module.name); - this.$scope.selectedModule.name = module.name; - this.$scope.isLoading = false; - }; - - let onFailed = () => { - this.$scope.isLoading = false; - this.$scope.selectedModule.name = originalName; - }; - - this.$scope.selectedModule.updateName(); - this.$scope.component.updateGroupMetadata(new DisplayModule(this.$scope.selectedModule)).then(onSuccess, onFailed); - }; - - this.$scope.openEditPropertyModal = (property:PropertyModel, filteredProperties:Array<PropertyModel>):void => { - this.ModalsHandler.openEditModulePropertyModal(property, this.$scope.component, this.$scope.selectedModule, filteredProperties).then(() => { - }); - } - } -} diff --git a/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view.html b/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view.html deleted file mode 100644 index 423cbcd1f0..0000000000 --- a/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view.html +++ /dev/null @@ -1,123 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<div class="sdc-general-tab hierarchy-tab" ng-class=""> - <loader data-display="isLoading" relative="true" size="medium"></loader> - <div class="sdc-general-tab-title" data-tests-id="tab-header" translate="DEPLOYMENT_TAB_TITLE"></div> - - <div class="resizable-container"> - <div data-ng-if="!component.isService()"class="resizable-section"> - - <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" - class="general-tab-scrollbar-container"> - <div class="sdc-general-tab-sub-title" data-tests-id="tab-sub-header">{{component.name}}</div> - <expand-collapse expanded-selector=".hierarchy-module-member-list.{{$index}}" - class="general-tab-expand-collapse" is-close-on-init="true" - data-tests-id="hierarchy-module-{{$index}}" - data-ng-repeat-start="module in component.modules"> - <div class="expand-collapse-title first-level" data-tests-id="hierarchy-module-{{$index}}-title" ng-class="{'selected': selectedIndex === $index}" data-ng-click="onModuleSelected(module, $index)"> - <div class="expand-collapse-title-icon"></div> - <span class="expand-collapse-title-text" data-ng-bind="module.name" tooltips - tooltip-content="{{module.name}}"></span> - - </div> - </expand-collapse> - - <div data-ng-repeat-end="" class="hierarchy-module-member-list {{$index}}"> - <div ng-repeat="memberId in ::module.members track by $index"> - <div class="expand-collapse-sub-title" tooltips tooltip-content="{{componentInstancesMap[memberId].name}}">{{componentInstancesMap[memberId].name}}</div> - </div> - </div> - </perfect-scrollbar> - </div> - <div data-ng-if="component.isService()"class="resizable-section"> - <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" - class="general-tab-scrollbar-container"> - <expand-collapse expanded-selector=".hierarchy-modules-list.{{$index}}" - class="general-tab-expand-collapse" is-close-on-init="true" - data-tests-id="hierarchy-instance-{{$index}}" - - data-ng-repeat-start="instance in component.componentInstances"> - <div class="expand-collapse-title first-level" data-tests-id="hierarchy-instance-{{$index}}-title"> - <div class="expand-collapse-title-icon"></div> - <span class="expand-collapse-title-text" data-ng-bind="instance.name" tooltips - tooltip-content="{{instance.name}}"></span> - - </div> - </expand-collapse> - <!--TODO: Rachel : --> - <div data-ng-repeat-end="" class="hierarchy-modules-list {{$index}}"> - <expand-collapse expanded-selector=".outer-index-{{$parent.$index}}.hierarchy-module-member-list.{{$index}}" - class="general-tab-expand-collapse" is-close-on-init="true" - data-tests-id="hierarchy-module-{{$index}}" - data-ng-repeat-start="module in instance.groupInstances"> - <div class="expand-collapse-title second-level" data-tests-id="hierarchy-module-{{$index}}-title" ng-class="{'selected': selectedIndex === $index && selectedInstanceId === instance.uniqueId}" data-ng-click="onModuleSelected(module, $index, instance.uniqueId)"> - <div class="expand-collapse-title-icon"></div> - <span class="expand-collapse-title-text" data-ng-bind="module.name" tooltips tooltip-content="{{module.name}}"></span> - - </div> - </expand-collapse> - - <div data-ng-repeat-end="" class="outer-index-{{$parent.$index}} hierarchy-module-member-list {{$index}}"> - <div ng-repeat="memberId in ::module.members track by $index"> - <div class="expand-collapse-sub-title" tooltips tooltip-content="{{componentInstancesMap[memberId].name}}">{{componentInstancesMap[memberId].name}}</div> - </div> - </div> - </div> - </perfect-scrollbar> - </div> - - <div resizable r-directions="['top']" r-flex="true" ng-if="selectedModule" class="resizable-section module-data-container" data-tests-id="selected-module-data"> - <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" - class="general-tab-scrollbar-container"> - <div class="module-data"> - <div> - <div class="module-name module-text-overflow" data-tests-id="selected-module-name" tooltips tooltip-content="{{selectedModule.name}}">{{selectedModule.name}}</div> - <div class="edit-name-container" data-ng-if="!component.isService()"> - <edit-name-popover header="Edit Module Name" direction="auto top" module="selectedModule" on-save="updateHeatName()" ng-class="{'disabled': isViewOnly}" class="sdc-edit-icon" data-tests-id="edit-name-popover-icon"></edit-name-popover> - </div> - </div> - <div class="" data-tests-id="selected-module-group-uuid" tooltips tooltip-content="{{selectedModule.groupUUID}}"><span class="bold">Module ID:</span><br><span class="small-font">{{selectedModule.groupUUID}}</span></div> - <div class="" data-tests-id="selected-module-group-customization-uuid" data-ng-if="component.isService() && isViewOnly" tooltips tooltip-content="{{selectedModule.customizationUUID}}"><span class="bold">Customization ID:</span ><br><span class="small-font">{{selectedModule.customizationUUID}}</span></div> - <div class="" data-tests-id="selected-module-group-invariant-uuid" tooltips tooltip-content="{{selectedModule.invariantUUID}}"><span class="bold">Invariant UUID:</span><span class="small-font">{{selectedModule.invariantUUID}}</span></div> - <div data-tests-id="selected-module-version"><span class="bold">Version:</span> {{selectedModule.version}}</div> - <div data-tests-id="selected-module-is-base"><span class="bold">IsBase:</span> {{selectedModule.isBase}}</div> - - </div> - <expand-collapse-list-header title="Properties" expand-collapse-list-data="expandCollapsePropertiesList"></expand-collapse-list-header> - <div ng-repeat="property in filteredProperties=(selectedModule.properties | filter: expandCollapsePropertiesList.filter | orderBy:expandCollapsePropertiesList.orderByField) track by $index" data-ng-if="expandCollapsePropertiesList.expandCollapse"> - <div class="list-item property-data" data-ng-class="{'last':$last}"> - <div class="property-name module-text-overflow" data-tests-id="selected-module-property-name"> - <span tooltips tooltip-content="{{property.name}}" - data-ng-class="{'hand': !isViewOnly}" - data-ng-click="!isViewOnly && openEditPropertyModal(property, filteredProperties)">{{property.name}}</span> - </div> - <div class="module-text-overflow property-info" data-tests-id="selected-module-property-type"> Type: {{property.type}}</div> - <div class="module-text-overflow property-info" data-tests-id="selected-module-property-schema-type">Value: {{property.value}}</div> - </div> - </div> - <expand-collapse-list-header title="Artifacts" expand-collapse-list-data="expandCollapseArtifactsList"></expand-collapse-list-header> - <div ng-repeat="artifact in selectedModule.artifacts| filter: expandCollapseArtifactsList.filter | orderBy:expandCollapseArtifactsList.orderByField track by $index" data-ng-if="expandCollapseArtifactsList.expandCollapse"> - <div class="list-item artifact-data" data-ng-class="{'last':$last}"> - <div class="artifact-name module-text-overflow" data-tests-id="selected-module-artifact-name" tooltips tooltip-content="{{artifact.artifactName}}">{{artifact.artifactName}}</div> - <div class="module-text-overflow" tooltips data-tests-id="selected-module-artifact-uuid" tooltip-content="{{artifact.artifactUUID}}">UUID: {{artifact.artifactUUID}}</div> - <div data-tests-id="selected-module-artifact-version">Version: {{artifact.artifactVersion}}</div> - </div> - </div> - </perfect-scrollbar> - </div> - </div> -</div> diff --git a/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy.less b/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy.less deleted file mode 100644 index dee0eeb38b..0000000000 --- a/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy.less +++ /dev/null @@ -1,101 +0,0 @@ -.hierarchy-tab{ - width: 100%; - .hierarchy-module-list-container{ - padding: 0px 20px 0px 20px; - } - .module-data-container{ - - width: 100%; - height: 100%; - background-color: #e6f6fb; - border: 1px solid #009fdb; - border-top: 4px solid #009fdb; - box-shadow: 0.3px 1px 2px rgba(24, 24, 25, 0.32); - - .module-data { - - .selectable; - .module-name { - .f-type._14_m; - width: 87%; - } - .f-type._14_r; - .f-color.a; - padding: 10px 0px 10px 0px; - margin: 0px 20px 0px 20px; - //border-bottom: 1px solid rgba(0, 159, 219, 0.6); - - .small-font{ - font-size: 12px; - } - } - - .list-item{ - padding: 10px 0px 10px 0px; - margin: 0px 20px 0px 20px; - &:not(.last){ - border-bottom: 1px solid rgba(0, 159, 219, 0.6); - } - } - - .artifact-data{ - .selectable; - .f-type._12_r; - .f-color.m; - .artifact-name { - .f-type._14_r; - font-weight: bold; - } - } - - .property-data{ - .property-name{ - width: 100%; - .f-type._14_m; - font-weight: 400; - color: @main_color_a; - } - .property-info{ - color: @func_color_s; - .f-type._14_r; - width: 100%; - } - } - - .module-text-overflow { - max-width: 240px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - //display: inline-block; - } - } - - .hierarchy-modules-list{ - .expand-collapse-title{ - .expand-collapse-title-text{ - max-width: 202px; - } - } - } - - .hierarchy-module-member-list { - overflow: hidden; - background-color: @main_color_p; - } - - .edit-name-container { - float: right; - border-left: 1px solid #5cc1e7; - height: 20px; - width: 12%; - - .sdc-edit-icon { - float: right; - cursor: pointer; - position: relative; - top: 4px; - right: 5px; - } - } -} diff --git a/catalog-ui/src/app/view-models/tutorial-end/tutorial-end.html b/catalog-ui/src/app/view-models/tutorial-end/tutorial-end.html deleted file mode 100644 index 3dffbb9a79..0000000000 --- a/catalog-ui/src/app/view-models/tutorial-end/tutorial-end.html +++ /dev/null @@ -1,26 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<div class="sdc-tutorial-end-page"> - <perfect-scrollbar include-padding="true" class="sdc-tutorial-end-page-main"> - <h2 translate="TUTORIAL_LAST_PAGE_TITLE"></h2> - <p class="sdc-tutorial-end-page-description1" translate="TUTORIAL_LAST_PAGE_TEXT"></p> - <div> - <button class="w-sdc-btn-blue" data-ui-sref="dashboard" type="button" translate="TUTORIAL_LAST_PAGE_BTN_ACTION_MY_DASHBOARD"></button> - <button class="w-sdc-btn-blue" data-ui-sref="catalog" type="button" translate="WELCOME_BTN_ACTION_CATALOG"></button> - </div> - </perfect-scrollbar> -</div> diff --git a/catalog-ui/src/app/view-models/tutorial-end/tutorial-end.less b/catalog-ui/src/app/view-models/tutorial-end/tutorial-end.less deleted file mode 100644 index 30fa4f7e8b..0000000000 --- a/catalog-ui/src/app/view-models/tutorial-end/tutorial-end.less +++ /dev/null @@ -1,41 +0,0 @@ -.sdc-tutorial-end-page { - - .bg_s; - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - z-index: 999; - .opacity(0.8); - display: flex; - align-items: center; - - background-image: url('/assets/styles/images/welcome.png'); - background-repeat: no-repeat; - background-position: bottom left; - - .sdc-tutorial-end-page-main { - width: 600px; - height: 400px; - margin: 100px auto 100px auto; - padding: 80px; - } - - h2 { - .t_15; - margin: 0; - } - - .sdc-tutorial-end-page-description1 { - .c_2; - .opacity(0.8); - margin-top: 10px; - line-height: 22px; - } - - .w-sdc-btn-blue { - margin: 40px 10px 0 0; - } - -} diff --git a/catalog-ui/src/app/view-models/tutorial-end/tutorial-end.ts b/catalog-ui/src/app/view-models/tutorial-end/tutorial-end.ts deleted file mode 100644 index 5c4c4999e8..0000000000 --- a/catalog-ui/src/app/view-models/tutorial-end/tutorial-end.ts +++ /dev/null @@ -1,40 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; - -interface ITutorialEndViewModelScope extends ng.IScope { -} - -export class TutorialEndViewModel { - - static '$inject' = [ - '$scope' - ]; - - constructor(private $scope:ITutorialEndViewModelScope) { - this.init(); - } - - private init = ():void => { - - } - -} diff --git a/catalog-ui/src/app/view-models/welcome/welcome-view.html b/catalog-ui/src/app/view-models/welcome/welcome-view.html deleted file mode 100644 index c342741f22..0000000000 --- a/catalog-ui/src/app/view-models/welcome/welcome-view.html +++ /dev/null @@ -1,25 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<div class="sdc-welcome-new-page"> - <div data-ng-click="onCloseButtonClick()" class="sdc-welcome-close"></div> - <div class="sdc-welcome-wrapper"> - <div class="sdc-welcome-cover"></div> - <div class="sdc-welcome-main"> - <h1>Welcome to SDC</h1> - </div> - </div> -</div> diff --git a/catalog-ui/src/app/view-models/welcome/welcome-view.ts b/catalog-ui/src/app/view-models/welcome/welcome-view.ts deleted file mode 100644 index 5ed7159d79..0000000000 --- a/catalog-ui/src/app/view-models/welcome/welcome-view.ts +++ /dev/null @@ -1,81 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; - -export interface IWelcomeViewMode { - onCloseButtonClick():void; -} - -export class WelcomeViewModel { - - firstLoad:boolean = true; - alreadyAnimated:Array<number> = []; - - static '$inject' = [ - '$scope', - '$state' - ]; - - constructor(private $scope:IWelcomeViewMode, - private $state:ng.ui.IStateService - ) { - this.init(); - this.initScope(); - window.setTimeout(():void => { - this.loadImages(():void=> { - window.setTimeout(():void =>{ - $(".sdc-welcome-new-page").addClass("animated fadeIn"); - },1000); - }); - },0); - } - - private initScope = ():void => { - let timeout = window.setTimeout(():void => { - this.$state.go("dashboard", {}); - }, 4000); - this.$scope.onCloseButtonClick = ():void => { - window.clearTimeout(timeout); - this.$state.go("dashboard", {}); - } - }; - - private init = ():void => { - let viewModelsHtmlBasePath:string = 'src/app/view-models/'; - $('body').keyup((e):void=> { - if (e.keyCode == 27) { // escape key maps to keycode `27` - this.$state.go('dashboard'); - } - }); - }; - - private loadImages = (callback:Function):void => { - let src = $('.sdc-welcome-wrapper').css('background-image'); - let url = src.match(/\((.*?)\)/)[1].replace(/('|")/g,''); - - let img = new Image(); - img.onload = function() { - callback(); - }; - img.src = url; - }; - -} diff --git a/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.html b/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.html deleted file mode 100644 index c5ab3cc110..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.html +++ /dev/null @@ -1,101 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<div class="activity-log"> - - <div class="title-wrapper"> - <div class="top-search"> - <input type="text" - class="search-text" - placeholder="Search" - data-ng-model="searchBind" - data-tests-id="main-menu-input-search" - ng-model-options="{ debounce: 500 }" /> - <span class="w-sdc-search-icon magnification"></span> - </div> - </div> - - <div class="table-container-flex"> - <div class="table" data-ng-class="{'view-mode': isViewMode()}"> - - <!-- Table headers --> - <div class="head flex-container"> - <div class="table-header head-row hand flex-item" ng-repeat="header in tableHeadersList track by $index" data-ng-click="sort(header.property)">{{header.title}} - <span data-ng-show="sortBy === header.property" class="table-header-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"> </span> - </div> - </div> - - <!-- Table body --> - <div class="body"> - <perfect-scrollbar suppress-scroll-x="true" scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container"> - - <!-- In case the logs are empty --> - <div data-ng-if="!activityLog || activityLog.length===0" class="no-row-text"> - There are no logs to display - </div> - - <!-- Loop on logs list --> - <div data-ng-repeat="item in activityLog | filter: searchBind | orderBy:sortBy:reverse track by $index" - data-ng-init="item.dateFormat = ( item.TIMESTAMP.replace(' UTC', '') | stringToDateFilter | date: 'MM/dd/yyyy':'UTC')+' | '+(item.TIMESTAMP.replace(' UTC', '') | stringToDateFilter | date: 'shortTime':'UTC' )" - class="flex-container data-row" - data-ng-class="{'selected': component === selectedComponent}" - data-ng-click="doSelectComponent(component);" - > - - <!-- Date --> - <div class="table-col-general flex-item" sdc-smart-tooltip> - {{item.dateFormat}} - </div> - - <!-- Action --> - <div class="table-col-general flex-item" sdc-smart-tooltip> - {{item.ACTION}} - </div> - - <!-- Comment --> - <div class="table-col-general flex-item" sdc-smart-tooltip> - {{item.COMMENT}} - </div> - - <!-- Username --> - <div class="table-col-general flex-item" sdc-smart-tooltip> - {{item.MODIFIER}} - </div> - - <!-- Status --> - <div class="table-col-general flex-item" sdc-smart-tooltip> - {{item.STATUS}} - <span data-ng-class="{'success': item.STATUS>='200' && item.STATUS<='204','error': item.STATUS<'200' || item.STATUS>='300'}"></span> - </div> - - </div> - - </perfect-scrollbar> - </div><!-- End table body --> - </div><!-- End table --> - </div><!-- End table-container-flex --> - -</div> - - - -<!--<div ng-repeat="activityDate in activityDateArray " class="w-sdc-component-viewer-right-activity-log" > - <div class="w-sdc-component-viewer-right-activity-log-date" >{{activityDate | date: 'longDate'}}</div> - <div ng-repeat="activity in activityLog[activityDate] | orderBy: '-TIMESTAMP'"> - <div class="w-sdc-component-viewer-right-activity-log-time">{{activity.TIMESTAMP.replace(" UTC", '') | stringToDateFilter | date: 'mediumTime':'UTC'}}</div> - <div class="w-sdc-component-viewer-right-activity-log-content">{{"Action: " + parseAction(activity.ACTION) + " Performed by: " + activity.MODIFIER + " Status: " + activity.STATUS}}</div> - </div> -</div>--> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.less b/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.less deleted file mode 100644 index 24f83ec503..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.less +++ /dev/null @@ -1,80 +0,0 @@ -.activity-log { - .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/src/app/view-models/workspace/tabs/activity-log/activity-log.ts b/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.ts deleted file mode 100644 index 452224a829..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.ts +++ /dev/null @@ -1,123 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; -import * as _ from "lodash"; -import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model"; -import {Activity} from "app/models"; -import {ActivityLogService} from "app/services"; - -export interface IActivityLogViewModelScope extends IWorkspaceViewModelScope { - activityDateArray:Array<any>; //this is in order to sort the dates - activityLog:Array<Activity>; - preVersion:string; - - tableHeadersList:Array<any>; - 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:ActivityLogService) { - - this.initScope(); - this.$scope.setValidState(true); - this.initSortedTableScope(); - - // 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<Activity>) => { - 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: 'dateFormat'}, - {title: 'Action', property: 'ACTION'}, - {title: 'Comment', property: 'COMMENT'}, - {title: 'Username', property: 'MODIFIER'}, - {title: 'Status', property: 'STATUS'} - ]; - - 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/src/app/view-models/workspace/tabs/attributes/attributes-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes-view-model.ts deleted file mode 100644 index 312a663e8f..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes-view-model.ts +++ /dev/null @@ -1,99 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; -import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model"; -import {Component, AttributeModel} from "app/models"; -import {ModalsHandler} from "app/utils"; -import {ComponentServiceNg2} from "../../../../ng2/services/component-services/component.service"; -import {ComponentGenericResponse} from "../../../../ng2/services/responses/component-generic-response"; - -interface IAttributesViewModelScope extends IWorkspaceViewModelScope { - tableHeadersList:Array<any>; - reverse:boolean; - sortBy:string; - - addOrUpdateAttribute(attribute?:AttributeModel):void; - delete(attribute:AttributeModel):void; - sort(sortBy:string):void; -} - -export class AttributesViewModel { - - static '$inject' = [ - '$scope', - '$filter', - '$uibModal', - 'ModalsHandler', - 'ComponentServiceNg2' - ]; - - - constructor(private $scope:IAttributesViewModelScope, - private $filter:ng.IFilterService, - private $uibModal:ng.ui.bootstrap.IModalService, - private ModalsHandler:ModalsHandler, - private ComponentServiceNg2: ComponentServiceNg2) { - - this.initComponentAttributes(); - } - - private initComponentAttributes = () => { - if(this.$scope.component.attributes) { - this.initScope(); - } else { - this.ComponentServiceNg2.getComponentAttributes(this.$scope.component).subscribe((response:ComponentGenericResponse) => { - this.$scope.component.attributes = response.attributes; - this.initScope(); - }); - } - } - - - private initScope = ():void => { - - 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?:AttributeModel):void => { - this.ModalsHandler.openEditAttributeModal(attribute ? attribute : new AttributeModel(), this.$scope.component); - }; - - this.$scope.delete = (attribute: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/src/app/view-models/workspace/tabs/attributes/attributes-view.html b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes-view.html deleted file mode 100644 index 675ae0c5c6..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes-view.html +++ /dev/null @@ -1,68 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<div class="workspace-attributes"> - <div class="add-btn" data-tests-id="add-attribute-button" ng-if="!isViewMode()" - data-ng-class="{'disabled': isDisableMode()}" data-ng-click="addOrUpdateAttribute()" data-tests-id="add-attribute-button">Add</div> - <div class="table-container-flex"> - <div class="table" data-ng-class="{'view-mode': isViewMode()}"> - <div class="head flex-container"> - <div class="table-header head-row hand flex-item" data-ng-repeat="header in tableHeadersList track by $index" data-ng-click="sort(header.property)">{{header.title}} - <span data-ng-if="sortBy === header.property" class="table-header-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"> </span> - </div> - <div class="table-no-text-header head-row flex-item" ng-if="!isViewMode()"></div> - <!--div class="table-no-text-header head-row flex-item"></div--> - </div> - - <div class="body"> - <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container"> - <div data-ng-if="component.attributes.length === 0" class="no-row-text" data-ng-class="{'disabled': isDisableMode()}"> - There are no attributes to display <br> - <span ng-if="!isViewMode()"> click <a data-ng-click="addOrUpdateAttribute()">here</a> to add one </span> - - </div> - <div data-ng-repeat-start="attribute in component.attributes | orderBy:sortBy:reverse track by $index" - class="flex-container data-row" data-ng-class="{'selected': attribute.selected}" - data-ng-click="attribute.selected = !attribute.selected" data-tests-id="attributes-table-row"> - - <div class="table-col-general flex-item text"> - <span class="sprite table-arrow" data-ng-class="{'opened': attribute.selected}"></span> - <span data-tests-id="{{attribute.name}}" tooltips tooltip-content="{{attribute.name}}">{{attribute.name}}</span> - - </div> - - <div class="table-col-general flex-item text" data-tests-id="{{attribute.type}}" data-ng-bind="attribute.type"></div> - - <div class="table-col-general flex-item text"> - <span tooltips tooltip-content="{{attribute.defaultValue}}" data-tests-id="{{attribute.defaultValue}}" data-ng-bind="attribute.defaultValue"></span> - </div> - - <div class="table-btn-col flex-item" ng-if="!isViewMode()"> - <button class="table-edit-btn" data-tests-id="edit_{{attribute.name}}" data-ng-show="attribute.parentUniqueId==component.uniqueId" - data-ng-click="addOrUpdateAttribute(attribute); $event.stopPropagation();" data-ng-class="{'disabled': isViewMode()}"> </button> - <button class="table-delete-btn" data-tests-id="delete_{{attribute.name}}" data-ng-show="attribute.parentUniqueId==component.uniqueId" - data-ng-click="delete(attribute); $event.stopPropagation();" data-ng-class="{'disabled': isViewMode()}"> </button> - </div> - </div> - <div data-ng-repeat-end="" data-ng-if="attribute.selected && attribute.description" class="item-opened" data-ng-bind="attribute.description"> - </div> - </perfect-scrollbar> - </div> - - </div> - </div> - -</div> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.less b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.less deleted file mode 100644 index 932daa167d..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.less +++ /dev/null @@ -1,54 +0,0 @@ -.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: 0; - - .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/src/app/view-models/workspace/tabs/composition/composition-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts deleted file mode 100644 index 2270a7b06e..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts +++ /dev/null @@ -1,501 +0,0 @@ -/*- - * ============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========================================================= - */ -'use strict'; -import * as _ from "lodash"; -import { Component, ComponentInstance, IAppMenu, Requirement, Capability, ButtonModel } from "app/models"; -import { SharingService, CacheService, EventListenerService, LeftPaletteLoaderService } from "app/services"; -import { ModalsHandler, GRAPH_EVENTS, ComponentFactory, ChangeLifecycleStateHandler, MenuHandler, EVENTS, ComponentInstanceFactory } from "app/utils"; -import { IWorkspaceViewModelScope } from "../../workspace-view-model"; -import { ComponentGenericResponse } from "app/ng2/services/responses/component-generic-response"; -import { Resource } from "app/models/components/resource"; -import { ResourceType, ComponentType } from "app/utils/constants"; -import { ComponentServiceFactoryNg2 } from "app/ng2/services/component-services/component.service.factory"; -import { ServiceGenericResponse } from "app/ng2/services/responses/service-generic-response"; -import { Service } from "app/models/components/service"; -import { ZoneInstance } from "app/models/graph/zones/zone-instance"; -import { ComponentServiceNg2 } from "app/ng2/services/component-services/component.service"; -import { ModalService as ModalServiceSdcUI} from "sdc-ui/lib/angular/modals/modal.service" -import { IModalConfig, IModalButtonComponent } from "sdc-ui/lib/angular/modals/models/modal-config"; -import { ValueEditComponent } from "app/ng2/components/ui/forms/value-edit/value-edit.component"; -import { UnsavedChangesComponent } from "../../../../ng2/components/ui/forms/unsaved-changes/unsaved-changes.component"; -import { ModalButtonComponent } from "sdc-ui/lib/angular/components"; - - - -export interface ICompositionViewModelScope extends IWorkspaceViewModelScope { - - currentComponent:Component; - - //Added for now, in the future need to remove and use only id and type to pass to tabs. - selectedComponent: Component; - selectedZoneInstance: ZoneInstance; - - componentInstanceNames: Array<string>; - isLoading:boolean; - graphApi:any; - sharingService:SharingService; - sdcMenu:IAppMenu; - version:string; - isViewOnly:boolean; - isCanvasTagging:boolean; - isLoadingRightPanel:boolean; - disabledTabs:boolean; - openVersionChangeModal(pathsToDelete:string[]):ng.IPromise<any>; - onComponentInstanceVersionChange(component:Component); - isComponentInstanceSelected():boolean; - updateSelectedComponent():void; - openUpdateModal(); - deleteSelectedComponentInstance():void; - onBackgroundClick():void; - setSelectedInstance(componentInstance:ComponentInstance):void; - setSelectedZoneInstance(zoneInstance: ZoneInstance):void; - changeZoneInstanceName(newName:string):void; - printScreen():void; - isPNF():boolean; - isConfiguration():boolean; - preventMoveTab(state: boolean):void; - registerCreateInstanceEvent(callback: Function):void; - unregisterCreateInstanceEvent():void; - registerChangeComponentInstanceNameEvent(callback: Function):void; - unregisterChangeComponentInstanceNameEvent():void; - - ComponentServiceNg2:ComponentServiceNg2, - cacheComponentsInstancesFullData:Component; -} - -export class CompositionViewModel { - - static '$inject' = [ - '$scope', - '$log', - 'sdcMenu', - 'MenuHandler', - '$uibModal', - '$state', - 'Sdc.Services.SharingService', - '$filter', - 'Sdc.Services.CacheService', - 'ComponentFactory', - 'ChangeLifecycleStateHandler', - 'LeftPaletteLoaderService', - 'ModalsHandler', - 'ModalServiceSdcUI', - 'EventListenerService', - 'ComponentServiceFactoryNg2', - 'ComponentServiceNg2', - 'Notification' - ]; - - constructor(private $scope:ICompositionViewModelScope, - private $log:ng.ILogService, - private sdcMenu:IAppMenu, - private MenuHandler:MenuHandler, - private $uibModal:ng.ui.bootstrap.IModalService, - private $state:ng.ui.IStateService, - private sharingService:SharingService, - private $filter:ng.IFilterService, - private cacheService:CacheService, - private ComponentFactory:ComponentFactory, - private ChangeLifecycleStateHandler:ChangeLifecycleStateHandler, - private LeftPaletteLoaderService:LeftPaletteLoaderService, - private ModalsHandler:ModalsHandler, - private ModalServiceSdcUI: ModalServiceSdcUI, - private eventListenerService:EventListenerService, - private ComponentServiceFactoryNg2: ComponentServiceFactoryNg2, - private ComponentServiceNg2:ComponentServiceNg2, - private Notification:any - ) { - - this.$scope.setValidState(true); - this.initScope(); - this.initGraphData(); - this.registerGraphEvents(this.$scope); - } - - - private initGraphData = ():void => { - if(!this.hasCompositionGraphData(this.$scope.component)) { - this.$scope.isLoading = true; - let service = this.ComponentServiceFactoryNg2.getComponentService(this.$scope.component); - service.getComponentCompositionData(this.$scope.component).subscribe((response:ComponentGenericResponse) => { - if (this.$scope.component.isService()) { - (<Service> this.$scope.component).forwardingPaths = (<ServiceGenericResponse>response).forwardingPaths; - } - this.$scope.component.componentInstances = response.componentInstances || []; - this.$scope.component.componentInstancesRelations = response.componentInstancesRelations || []; - this.$scope.component.policies = response.policies || []; - this.$scope.component.groupInstances = response.groupInstances || []; - this.$scope.isLoading = false; - this.initComponent(); - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_COMPOSITION_GRAPH_DATA_LOADED); - }); - } else { - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_COMPOSITION_GRAPH_DATA_LOADED); - } - this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_COMPOSITION_GRAPH_DATA_LOADED); - }; - - private hasCompositionGraphData = (component:Component):boolean => { - return !!(component.componentInstances && component.componentInstancesRelations && component.policies && component.groupInstances); - }; - - private cacheComponentsInstancesFullData:Array<Component>; - - private initComponent = ():void => { - this.$scope.currentComponent = this.$scope.component; - this.$scope.selectedComponent = this.$scope.currentComponent; - this.$scope.selectedZoneInstance = null; - this.updateUuidMap(); - this.$scope.isViewOnly = this.$scope.isViewMode(); - }; - - private registerGraphEvents = (scope:ICompositionViewModelScope):void => { - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_NODE_SELECTED, scope.setSelectedInstance); - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_ZONE_INSTANCE_SELECTED, scope.setSelectedZoneInstance); - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED, scope.onBackgroundClick); - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_CANVAS_TAG_START, () => { - scope.isCanvasTagging = true; - this.eventListenerService.notifyObservers(EVENTS.ON_WORKSPACE_UNSAVED_CHANGES, true, this.showUnsavedChangesAlert); - }); - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_CANVAS_TAG_END, () => { - scope.isCanvasTagging = false; - this.resetUnsavedChanges(); - }); - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_ZONE_INSTANCE_NAME_CHANGED, scope.changeZoneInstanceName); - this.eventListenerService.registerObserverCallback(EVENTS.UPDATE_PANEL, this.removeSelectedZoneInstance); - }; - - private showUnsavedChangesAlert = (afterSave?:Function):Promise<any> => { - let deferred = new Promise<any>((resolve, reject)=> { - const modal = this.ModalServiceSdcUI.openCustomModal( - { - title: "Unsaved Changes", - size: 'sm', - type: 'custom', - - buttons: [ - {id: 'cancelButton', text: 'Cancel', type: 'secondary', size: 'xsm', closeModal: true, callback: () => reject()}, - {id: 'discardButton', text: 'Discard', type: 'secondary', size: 'xsm', closeModal: true, callback: () => { this.resetUnsavedChanges(); resolve()}}, - {id: 'saveButton', text: 'Save', type: 'primary', size: 'xsm', closeModal: true, callback: () => { reject(); this.saveUnsavedChanges(afterSave); }} - ] as IModalButtonComponent[] - }, UnsavedChangesComponent, { isValidChangedData: true}); - }); - - return deferred; - } - - private unRegisterGraphEvents = (scope: ICompositionViewModelScope):void => { - this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_NODE_SELECTED, scope.setSelectedInstance); - this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_ZONE_INSTANCE_SELECTED, scope.setSelectedZoneInstance); - this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED, scope.onBackgroundClick); - this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_CANVAS_TAG_START); - this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_CANVAS_TAG_END); - this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_ZONE_INSTANCE_NAME_CHANGED, scope.changeZoneInstanceName); - this.eventListenerService.unRegisterObserver(EVENTS.UPDATE_PANEL, this.removeSelectedZoneInstance); - - }; - - private resetUnsavedChanges = () => { - this.eventListenerService.notifyObservers(EVENTS.ON_WORKSPACE_UNSAVED_CHANGES, false); - } - - private saveUnsavedChanges = (afterSaveFunction?:Function):void => { - this.$scope.selectedZoneInstance.forceSave.next(afterSaveFunction); - this.eventListenerService.notifyObservers(EVENTS.ON_WORKSPACE_UNSAVED_CHANGES, false); - } - - private openUpdateComponentInstanceNameModal = ():void => { - - let modalConfig:IModalConfig = { - title: "Edit Name", - size: "sm", - type: "custom", - testId: "renameInstanceModal", - buttons: [ - {id: 'saveButton', text: 'OK', size: 'xsm', callback: this.saveInstanceName, closeModal: false}, - {id: 'cancelButton', text: 'Cancel', size: 'sm', closeModal: true} - ] - }; - - this.ModalServiceSdcUI.openCustomModal(modalConfig, ValueEditComponent, {name: this.$scope.currentComponent.selectedInstance.name, validityChangedCallback: this.enableOrDisableSaveButton}); - - }; - - - private enableOrDisableSaveButton = (shouldEnable: boolean): void => { - let saveButton: ModalButtonComponent = this.ModalServiceSdcUI.getCurrentInstance().getButtonById('saveButton'); - saveButton.disabled = !shouldEnable; - } - - private saveInstanceName = () => { - let currentModal = this.ModalServiceSdcUI.getCurrentInstance(); - let nameFromModal:string = currentModal.innerModalContent.instance.name; - - if(nameFromModal != this.$scope.currentComponent.selectedInstance.name){ - currentModal.buttons[0].disabled = true; - let componentInstanceModel:ComponentInstance = ComponentInstanceFactory.createComponentInstance(this.$scope.currentComponent.selectedInstance); - componentInstanceModel.name = nameFromModal; - - let onFailed = (error) => { - currentModal.buttons[0].disabled = false; - }; - let onSuccess = (componentInstance:ComponentInstance) => { - - this.$scope.currentComponent.selectedInstance.name = componentInstance.name; - //update requirements and capabilities owner name - _.forEach(this.$scope.currentComponent.selectedInstance.requirements, (requirementsArray:Array<Requirement>) => { - _.forEach(requirementsArray, (requirement:Requirement):void => { - requirement.ownerName = componentInstance.name; - }); - }); - - _.forEach(this.$scope.currentComponent.selectedInstance.capabilities, (capabilitiesArray:Array<Capability>) => { - _.forEach(capabilitiesArray, (capability:Capability):void => { - capability.ownerName = componentInstance.name; - }); - }); - this.ModalServiceSdcUI.closeModal(); - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_COMPONENT_INSTANCE_NAME_CHANGED, this.$scope.currentComponent.selectedInstance); - }; - - this.$scope.currentComponent.updateComponentInstance(componentInstanceModel).then(onSuccess, onFailed); - } else { - this.ModalServiceSdcUI.closeModal(); - } - - }; - - private removeSelectedComponentInstance = ():void => { - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE, this.$scope.currentComponent.selectedInstance) - this.$scope.currentComponent.selectedInstance = null; - this.$scope.selectedComponent = this.$scope.currentComponent; - }; - - private removeSelectedZoneInstance = ():void => { - this.$scope.currentComponent.selectedInstance = null; - this.$scope.selectedZoneInstance = null; - this.$scope.selectedComponent = this.$scope.currentComponent; - } - - 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.isCanvasTagging = false; - this.$scope.graphApi = {}; - this.$scope.version = this.cacheService.get('version'); - this.initComponent(); - - this.cacheComponentsInstancesFullData = new Array<Component>(); - - this.$scope.isComponentInstanceSelected = ():boolean => { - return this.$scope.currentComponent && this.$scope.currentComponent.selectedInstance != undefined && this.$scope.currentComponent.selectedInstance != null; - }; - - this.$scope.$on('$destroy', () => { - this.unRegisterGraphEvents(this.$scope); - }) - - this.$scope.restoreComponent = ():void => { - this.ComponentServiceNg2.restoreComponent(this.$scope.selectedComponent.componentType, this.$scope.selectedComponent.uniqueId).subscribe(() => { - this.Notification.success({ - message: '<' + this.$scope.component.name + '> ' + this.$filter('translate')("ARCHIVE_SUCCESS_MESSAGE_TEXT"), - title: this.$filter('translate')("ARCHIVE_SUCCESS_MESSAGE_TITLE") - }); - this.$scope.selectedComponent.archived = false; - } - ) - }; - - this.$scope.updateSelectedComponent = ():void => { - if (this.$scope.currentComponent.selectedInstance) { - let parentComponentUid = this.$scope.currentComponent.selectedInstance.componentUid - if(this.$scope.currentComponent.selectedInstance.originType === ComponentType.SERVICE_PROXY){ - parentComponentUid = this.$scope.currentComponent.selectedInstance.sourceModelUid; - } - let componentParent = _.find(this.cacheComponentsInstancesFullData, (component) => { - return component.uniqueId === parentComponentUid; - }); - if (componentParent) { - this.$scope.selectedComponent = componentParent; - } - else { - try { - let onSuccess = (component:Component) => { - this.$scope.isLoadingRightPanel = false; - this.$scope.selectedComponent = component; - this.cacheComponentsInstancesFullData.push(component); - }; - let onError = (component:Component) => { - console.log("Error updating selected component"); - this.$scope.isLoadingRightPanel = false; - }; - this.ComponentFactory.getComponentFromServer(this.$scope.currentComponent.selectedInstance.originType, parentComponentUid).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:ComponentInstance):void => { - - this.$log.debug('composition-view-model::onNodeSelected:: with id: ' + selectedComponent.uniqueId); - this.$scope.currentComponent.setSelectedInstance(selectedComponent); - this.$scope.selectedZoneInstance = null; - this.$scope.updateSelectedComponent(); - - if (this.$state.current.name === 'workspace.composition.api') { - this.$state.go('workspace.composition.details'); - } - if(!selectedComponent.isServiceProxy() && (this.$state.current.name === 'workspace.composition.consumption' || this.$state.current.name === 'workspace.composition.dependencies')) { - this.$state.go('workspace.composition.details'); - } - }; - - this.$scope.setSelectedZoneInstance = (zoneInstance: ZoneInstance): void => { - this.$scope.currentComponent.selectedInstance = null; - this.$scope.selectedZoneInstance = zoneInstance; - }; - - this.$scope.onBackgroundClick = ():void => { - this.$scope.currentComponent.selectedInstance = null; - this.$scope.selectedZoneInstance = null; - this.$scope.selectedComponent = this.$scope.currentComponent; - - if (this.$state.current.name === 'workspace.composition.api' || this.$state.current.name === 'workspace.composition.consumption' || this.$state.current.name === 'workspace.composition.dependencies') { - this.$state.go('workspace.composition.details'); - } - - if(this.$scope.selectedComponent.isService() && this.$state.current.name === 'workspace.composition.relations'){ - this.$state.go('workspace.composition.api'); - } - }; - - this.$scope.openUpdateModal = ():void => { - this.openUpdateComponentInstanceNameModal(); - }; - - this.$scope.changeZoneInstanceName = (newName:string):void => { - this.$scope.selectedZoneInstance.instanceData.name = newName; - }; - - this.$scope.deleteSelectedComponentInstance = ():void => { - const {currentComponent} = this.$scope; - const {title, message} = this.$scope.sdcMenu.alertMessages['deleteInstance']; - let modalText = message.format([currentComponent.selectedInstance.name]); - - if (currentComponent.isService()) { - const {forwardingPaths} = (<Service>currentComponent); - const instanceId = currentComponent.selectedInstance.uniqueId; - - const relatedPaths = _.filter(forwardingPaths, forwardingPath => { - const pathElements = forwardingPath.pathElements.listToscaDataDefinition; - return pathElements.find(path => path.fromNode === instanceId || path.toNode === instanceId); - }); - - if (relatedPaths.length) { - const pathNames = _.map(relatedPaths, path => path.name).join(', '); - modalText += `<p>The following service paths will be erased: ${pathNames}</p>`; - } - } - this.ModalServiceSdcUI.openAlertModal(title, modalText, "OK", this.removeSelectedComponentInstance, "deleteInstanceModal"); - }; - - this.$scope.openVersionChangeModal = (pathsToDelete:string[]):ng.IPromise<any> => { - const {currentComponent} = this.$scope; - const {forwardingPaths} = <Service>currentComponent; - - const relatedPaths = _.filter(forwardingPaths, path => - _.find(pathsToDelete, id => - path.uniqueId === id - ) - ).map(path => path.name); - const pathNames = _.join(relatedPaths, ', ') || 'none'; - - const {title, message} = this.$scope.sdcMenu.alertMessages['upgradeInstance']; - return this.ModalsHandler.openConfirmationModal(title, message.format([pathNames]), false); - }; - - this.$scope.onComponentInstanceVersionChange = (component:Component):void => { - let onChange = () => { - this.$scope.currentComponent = component; - this.$scope.setComponent(this.$scope.currentComponent); - this.$scope.updateSelectedComponent(); - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_VERSION_CHANGED, this.$scope.currentComponent); - }; - - if (component.isService()) { - const service = this.ComponentServiceFactoryNg2.getComponentService(component); - service.getComponentCompositionData(component).subscribe((response:ServiceGenericResponse) => { - (<Service>component).forwardingPaths = response.forwardingPaths; - onChange(); - }); - } else { - onChange(); - } - }; - - this.$scope.isPNF = (): boolean => { - return this.$scope.selectedComponent.isResource() && (<Resource>this.$scope.selectedComponent).resourceType === ResourceType.PNF; - }; - - this.$scope.isConfiguration = (): boolean => { - return this.$scope.selectedComponent.isResource() && (<Resource>this.$scope.selectedComponent).resourceType === ResourceType.CONFIGURATION; - }; - - this.$scope.preventMoveTab = (state: boolean): void => { - this.$scope.disabledTabs = state; - }; - - this.eventListenerService.registerObserverCallback(EVENTS.ON_LIFECYCLE_CHANGE, this.$scope.reload); - - this.$scope.registerCreateInstanceEvent = (callback: Function): void => { - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_CREATE_COMPONENT_INSTANCE, callback); - }; - - this.$scope.unregisterCreateInstanceEvent = (): void => { - this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_CREATE_COMPONENT_INSTANCE); - }; - - this.$scope.registerChangeComponentInstanceNameEvent = (callback: Function): void => { - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_COMPONENT_INSTANCE_NAME_CHANGED, callback); - }; - - this.$scope.unregisterChangeComponentInstanceNameEvent = (): void => { - this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_COMPONENT_INSTANCE_NAME_CHANGED); - }; - } -} diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html deleted file mode 100644 index c2d6007edc..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html +++ /dev/null @@ -1,159 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<div class="workspace-composition"> - <loader data-display="isLoading"></loader> - <div class="w-sdc-designer-canvas" data-ng-class="{sidebaractive: displayDesignerRightSidebar}"> - <palette current-component="currentComponent" - is-view-only="isViewOnly || isCanvasTagging" - is-loading="isLoading"></palette> - - <ng2-palette-popup-panel></ng2-palette-popup-panel> - - <composition-graph component="currentComponent" data-tests-id="canvas" - is-view-only="isViewOnly" with-sidebar="displayDesignerRightSidebar"></composition-graph> - </div> - - <div class="w-sdc-designer-sidebar-toggle" data-ng-class="{'active': displayDesignerRightSidebar}" - data-ng-init="displayDesignerRightSidebar = true" - data-ng-click="displayDesignerRightSidebar = !displayDesignerRightSidebar"> - <div class="w-sdc-designer-sidebar-toggle-icon sprite-new pointer menu-open-left"></div> - </div> - - <div class="w-sdc-designer-sidebar" data-ng-class="{'view-mode':isViewOnly}"> - - <div ng-if="!selectedZoneInstance"> - - <div class="w-sdc-designer-sidebar-head" data-tests-id="w-sdc-designer-sidebar-head"> - <div class="w-sdc-designer-sidebar-logo-ph"> - <div class=" large {{selectedComponent.iconSprite}} {{selectedComponent.icon}}" - ng-class="{'archive-component':selectedComponent.archived}"> - <div ng-if="isComponentInstanceSelected()" - data-ng-class="{'non-certified':'CERTIFIED' !== selectedComponent.lifecycleState}" - tooltips tooltip-side="top" tooltip-content="Not certified"></div> - </div> - </div> - - <div class="w-sdc-designer-sidebar-logo"> - <span class="w-sdc-designer-sidebar-logo-title" data-tests-id="selectedCompTitle" tooltips - tooltip-class="tooltip-custom break-word-tooltip" - tooltip-content="​{{isComponentInstanceSelected() ? currentComponent.selectedInstance.name : currentComponent.name | resourceName}}" - data-ng-bind="isComponentInstanceSelected() ? currentComponent.selectedInstance.name : currentComponent.name | resourceName"></span> - </div> - <div class="sprite e-sdc-small-icon-pencil w-sdc-designer-update-resource-icon" - data-tests-id="renameInstance" - data-ng-if="!isViewOnly && isComponentInstanceSelected() && !selectedComponent.archived" - data-ng-click="openUpdateModal()" id="editPencil"></div> - - <div class="sprite e-sdc-small-icon-delete w-sdc-designer-delete-resource-icon" - data-tests-id="deleteInstance" - data-ng-if="!isViewOnly && isComponentInstanceSelected() && !selectedComponent.archived" - data-ng-click="!isLoading && deleteSelectedComponentInstance()" title="Delete Resource Instance"></div> - </div> - - <div class="w-sdc-designer-sidebar-tabs"> - <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active" - data-ui-sref="workspace.composition.details" - tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Information" - data-tests-id="information-tab" - data-ng-class="{'disabled': disabledTabs}"> - <div class="i-sdc-designer-sidebar-tab-icon sprite-new info"></div> - </button> - <!--<button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"--> - <!--ui-sref="workspace.composition.structure"--> - <!--tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Composition">--> - <!--<div class="i-sdc-designer-sidebar-tab-icon sprite-new structure"></div>--> - <!--</button>--> - <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active" - data-ui-sref="workspace.composition.deployment" - tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Deployment Artifacts" - data-tests-id="deployment-artifact-tab" - data-ng-if="!isConfiguration() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())" - data-ng-class="{'disabled': disabledTabs}"> - <div class="i-sdc-designer-sidebar-tab-icon sprite-new deployment-artifacts"></div> - </button> - <button tooltips tooltip-class="tooltip-custom tab-tooltip" - tooltip-content="{{selectedComponent.isResource() || (isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy()) ? 'Properties and Attributes': 'Inputs'}}" - class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active" - data-ui-sref="workspace.composition.properties" - data-tests-id="properties-and-attributes-tab" - data-ng-class="{'disabled': disabledTabs}"> - <div class="i-sdc-designer-sidebar-tab-icon sprite-new" - ng-class="selectedComponent.isResource() || (isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy()) ? 'properties': 'inputs'"></div> - </button> - <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active" - data-ui-sref="workspace.composition.artifacts" - data-ng-if="!isConfiguration() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())" - tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Information Artifacts" - data-ng-class="{'disabled': disabledTabs}"> - <div class="i-sdc-designer-sidebar-tab-icon sprite-new information-artifacts"></div> - </button> - <button data-ng-if="!selectedComponent.isService() || (isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())" class="i-sdc-designer-sidebar-tab" - data-ui-sref-active="active" ui-sref="workspace.composition.relations" - tooltips tooltip-class="tooltip-custom tab-tooltip {{currentComponent.selectedInstance.isServiceProxy() ? '' : 'tooltip-rightside'}}" - data-tests-id="requirements-and-capabilities" - tooltip-content="Requirements and Capabilities" - data-ng-class="{'disabled': disabledTabs}"> - <div class="i-sdc-designer-sidebar-tab-icon sprite-new relations"></div> - </button> - <button data-ng-if="selectedComponent.isService() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())" class="i-sdc-designer-sidebar-tab" - data-ui-sref-active="active" ui-sref="workspace.composition.api" data-tests-id="tab-api" - tooltips tooltip-class="tooltip-custom tab-tooltip tooltip-rightside" tooltip-content="API" - data-ng-class="{'disabled': disabledTabs}"> - <div class="i-sdc-designer-sidebar-tab-icon sprite-new api"></div> - </button> - <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active" - data-ui-sref="workspace.composition.consumption" - tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Operation Consumption" - data-tests-id="service-consumption-tab" - data-ng-if="(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())" - data-ng-class="{'disabled': disabledTabs}"> - <div class="i-sdc-designer-sidebar-tab-icon sprite-new import-icon"></div> - </button> - <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active" - data-ui-sref="workspace.composition.dependencies" - tooltips tooltip-class="tooltip-custom tab-tooltip " tooltip-content="Service Dependencies" - data-tests-id="service-dependency-tab" - data-ng-if="(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())" - data-ng-class="{'disabled': disabledTabs}"> - <div class="i-sdc-designer-sidebar-tab-icon sprite-new dependencies-icon"></div> - </button> - - </div> - <div data-ui-view="" class="w-sdc-designer-sidebar-tab-content-view"></div> - - </div> - - <!-- Solution for now to support policies and groups working with Angular 2 components --> - <!-- isCertified not relevant for group or policy --> - <!-- (selectedZoneInstanceType === ZoneInstanceType.GROUP || selectedZoneInstanceType === ZoneInstanceType.POLICY) --> - <div ng-if="selectedZoneInstance"> - - <ng2-composition-panel - [is-loading]="isLoading" - [is-view-only]="isViewOnly || isCanvasTagging" - [selected-zone-instance-name]="selectedZoneInstance.instanceData.name" - [selected-zone-instance-id]="selectedZoneInstance.instanceData.uniqueId" - [selected-zone-instance-type]="selectedZoneInstance.type" - [topology-template]="currentComponent" - > - </ng2-composition-panel> - </div> - - <loader data-display="isLoadingRightPanel" relative="true" size="medium"></loader> - - </div> -</div> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition.less b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition.less deleted file mode 100644 index f37a492572..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition.less +++ /dev/null @@ -1,955 +0,0 @@ - .i-sdc-designer-leftbar-section-popup-panel { - position: absolute; - display: inline-block; - background-color: white; - border: solid 1px #d2d2d2; - border-top: solid 3px #13a7df; - width: 140px; - height: 40px; - z-index: 10000; - } - - .i-sdc-designer-leftbar-section-popup-panel-group { - padding-left: 8px; - padding-top: 8px; - } - - .i-sdc-designer-leftbar-section-popup-panel-plus { - border-radius: 50%; - color: white; - background-color: #13a7df; - width: 20px; - text-align: center; - display: inline-block; - cursor: pointer; - } - - .i-sdc-designer-leftbar-section-popup-panel-title { - padding-left: 10px; - display: inline-block; - } - -.composition{ - .sdc-workspace-container{ - .w-sdc-main-container{ - .w-sdc-main-right-container{ - left:0; - //overflow-y: scroll; - .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; - } - } - } - } - - .custom-modal { - /* Hack solution to hide canvas tooltips under modals */ - z-index: 20000 !important; - } -} - -.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: 103px; - 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: 60px; - height: 60px; - } - - .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-restore-button { - .hand; - position:absolute; - right: 20px; - top:10px; - width:65px; - } - .w-sdc-designer-sidebar-tabs { - .bg_c; - } - - .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: 60px; - .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 ; - &.import-icon { - transform: rotate(270deg); - } - // opacity: .4; - } - - .w-sdc-designer-sidebar-tab-content { - .perfect-scrollbar; - height: 100%; - } - - .w-sdc-designer-sidebar-tab-content-view { - position: absolute; - top: 156px; - bottom: 0; - width: 100%; - padding-bottom: 10px; - - } - - .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 10px 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: 13px; - 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 { - text-transform: uppercase; - } - - .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; - font-size: 13px; - margin-bottom: 5px; - 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; - //fix long name for firefox: - display: block; - float: left; - 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; - } - - &.update-env { - background-color: transparent; - border: 0; - right: 15px; - 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; - height: 45px; - width: 40px; - float: left; - display: flex; - align-items: center; - .non-certified { - position: relative; - left: -4px; - top: -4px; - .sprite; - .s-sdc-state-non-certified; - display: block; - - &.smaller-icon { - bottom: 6px; - left: 13px; - } - } - - - - } - - .non-certified { - position: relative; - left: 0px; - top: 0px; - .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_13_m; - line-height: 14px; - overflow: hidden; - text-overflow: ellipsis; - max-width: 120px; - display: inline-block; - white-space: nowrap; - vertical-align: bottom; - } - - .i-sdc-designer-leftbar-section-content-item-info-text { - .m_13_r; - line-height: 15px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .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; - } - - .service-path-buttons { - margin-top: 12px; - position: absolute; - right: 70px; - top: 53px; - &.with-sidebar { - right: 380px; - } - } - //Canvas search menu - .w-sdc-search-menu { - position:absolute; - right: 18px; - top:53px; - transition: right 0.2s; - display: flex; - flex-direction: column; - align-items: flex-end; - margin-right:10px; - pointer-events: none; - - & > * { - pointer-events: all; - } - - &.with-sidebar { - right:320px; - } - - .search-with-autocomplete-container.composition-search { - margin-top: 12px; - - .search-bar-input { - width: 250px; - padding:2px 50px 2px 10px; - transition:all 0.4s; - } - .search-bar-container { - position:relative; - } - - &:not(:hover):not(.autocomplete-visible):not(.active){ - border-radius: 0; - box-shadow:none; - - .search-bar-input:not(:focus){ - width: 0px; - padding:0; - border:none; - } - .clear-search-x { - display:none; - } - .search-bar-input:not(:focus) ~ .search-bar-button { - border-radius: 2px; - border:solid 1px #fff; - } - } - } - - .zoom-icons { - border:solid 1px #fff; - border-radius: 2px; - box-shadow: 0px 2px 3.88px 0.12px rgba(0, 0, 0, 0.29); - background-color: rgba(234, 234, 234, 0.88); - background-repeat: no-repeat; - margin-top: 10px; - - &:hover { - cursor:pointer; - } - - &:active { - border:none; - background-color: rgba(31, 171, 223, 0.88); - } - } - } - - // --------------------------------------------------------------------------------------------------- - // Canvas inline menu - // --------------------------------------------------------------------------------------------------- - .w-sdc-canvas-menu-list { - .w-sdc-canvas-menu-item-view { - &::before { - content: ''; - display: inline-block; - - .sprite-new; - .view-icon; - vertical-align: top; - margin: 2px 6px 2px 4px; - } - } - - .w-sdc-canvas-menu-item-delete { - &::before { - content: ''; - display: inline-block; - - .sprite-new; - .delete-icon; - vertical-align: bottom; - margin: 1px 10px 0 7px; - } - } - } -} -/*.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/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts deleted file mode 100644 index 2af341b2c1..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts +++ /dev/null @@ -1,352 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; -import * as _ from "lodash"; -import { - ArtifactModel, - Service, - IAppConfigurtaion, - Resource, - Component, - ComponentInstance, - ArtifactGroupModel, - IFileDownload -} from "app/models"; -import {ICompositionViewModelScope} from "../../composition-view-model"; -import {ArtifactsUtils, ModalsHandler, ArtifactGroupType} from "app/utils"; -import {GRAPH_EVENTS} from "app/utils/constants"; -import {EventListenerService} from "app/services/event-listener-service"; -import {Dictionary} from "../../../../../../utils/dictionary/dictionary"; - -export interface IArtifactsViewModelScope extends ICompositionViewModelScope { - artifacts:Array<ArtifactModel>; - artifactType:string; - downloadFile:IFileDownload; - isLoading:boolean; - allowDeleteAndUpdateArtifactMap:Dictionary<string, boolean>; - getTitle():string; - addOrUpdate(artifact:ArtifactModel):void; - delete(artifact:ArtifactModel):void; - download(artifact:ArtifactModel):void; - openEditEnvParametersModal(artifact:ArtifactModel):void; - getEnvArtifact(heatArtifact:ArtifactModel):any; - getEnvArtifactName(artifact:ArtifactModel):string; - isLicenseArtifact(artifact:ArtifactModel):boolean; - isVfOrPnf():boolean; - //isVFiArtifact(artifact:ArtifactModel):boolean; -} - -export class ResourceArtifactsViewModel { - - static '$inject' = [ - '$scope', - '$filter', - '$state', - 'sdcConfig', - 'ArtifactsUtils', - 'ModalsHandler', - '$q', - 'EventListenerService' - ]; - - constructor(private $scope:IArtifactsViewModelScope, - private $filter:ng.IFilterService, - private $state:any, - private sdcConfig:IAppConfigurtaion, - private artifactsUtils:ArtifactsUtils, - private ModalsHandler:ModalsHandler, - private $q:ng.IQService, - private eventListenerService: EventListenerService) { - - this.initScope(); - } - - - private initArtifactArr = (artifactType:string):void => { - let artifacts:Array<ArtifactModel> = []; - - if (this.$scope.selectedComponent) { - if ('interface' == artifactType) { - let interfaces = this.$scope.currentComponent.interfaces; - if (interfaces && interfaces.standard && interfaces.standard.operations) { - - angular.forEach(interfaces.standard.operations, (operation:any, interfaceName:string):void => { - let item:ArtifactModel = <ArtifactModel>{}; - if (operation.implementation) { - item = <ArtifactModel> operation.implementation; - } - item.artifactDisplayName = interfaceName; - item.artifactLabel = interfaceName; - item.mandatory = false; - artifacts.push(item); - }); - } - } else { - //init normal artifacts, deployment or api artifacts - let artifactsObj:ArtifactGroupModel; - switch (artifactType) { - case "api": - artifactsObj = (<Service>this.$scope.currentComponent).serviceApiArtifacts; - break; - case "deployment": - if (!this.$scope.isComponentInstanceSelected()) { - artifactsObj = this.$scope.currentComponent.deploymentArtifacts; - } else { - artifactsObj = this.$scope.currentComponent.selectedInstance.deploymentArtifacts; - } - break; - default: - //artifactsObj = this.$scope.selectedComponent.artifacts; - if (!this.$scope.isComponentInstanceSelected()) { - artifactsObj = this.$scope.currentComponent.artifacts; - } else { - artifactsObj = this.$scope.currentComponent.selectedInstance.artifacts; - } - break; - } - _.forEach(artifactsObj, (artifact:ArtifactModel, key) => { - artifacts.push(artifact); - }); - } - } - this.$scope.artifacts = artifacts; - this.$scope.allowDeleteAndUpdateArtifactMap = new Dictionary<string, boolean>(); - _.forEach(this.$scope.artifacts, (artifact:ArtifactModel)=>{ - this.$scope.allowDeleteAndUpdateArtifactMap[artifact.artifactLabel] = this.allowDeleteAndUpdateArtifact(artifact); - }); - this.$scope.isLoading = false; - this.$scope.preventMoveTab(false); - }; - - - private convertToArtifactUrl = (artifactType:string):string => { - - switch (artifactType) { - case 'deployment': - return 'DEPLOYMENT'; - case 'api': - return 'SERVICE_API'; - default: - return 'INFORMATIONAL'; - } - - } - - private loadComponentArtifactIfNeeded = (forceLoad?: boolean) => { - - let onGetComponentArtifactsSuccess = (artifacts:ArtifactGroupModel)=> { - switch (this.$scope.artifactType) { - case 'deployment': - this.$scope.currentComponent.deploymentArtifacts = artifacts; - break; - case 'api': - (<Service>this.$scope.currentComponent).serviceApiArtifacts = artifacts; - break; - default: - this.$scope.currentComponent.artifacts = artifacts; - break; - } - this.$scope.isLoading = false; - this.initArtifactArr(this.$scope.artifactType); - } - - let onError = ()=> { - this.$scope.isLoading = false; - }; - - switch (this.$scope.artifactType) { - case 'deployment': - if(forceLoad || !this.$scope.currentComponent.deploymentArtifacts) { - this.$scope.component.getArtifactByGroupType(this.convertToArtifactUrl(this.$scope.artifactType)).then(onGetComponentArtifactsSuccess, onError); - } else { - this.initArtifactArr(this.$scope.artifactType); - } - - break; - case 'api': - if(!(<Service>this.$scope.currentComponent).serviceApiArtifacts) { - this.$scope.component.getArtifactByGroupType(this.convertToArtifactUrl(this.$scope.artifactType)).then(onGetComponentArtifactsSuccess, onError); - } else { - this.initArtifactArr(this.$scope.artifactType); - } - break; - default: - if(!this.$scope.currentComponent.artifacts) { - this.$scope.component.getArtifactByGroupType(this.convertToArtifactUrl(this.$scope.artifactType)).then(onGetComponentArtifactsSuccess, onError); - } else { - this.initArtifactArr(this.$scope.artifactType); - } - break; - } - } - private loadArtifacts = (forceLoad?: boolean):void => { - - let onGetInstanceArtifactsSuccess = (artifacts:ArtifactGroupModel)=> { - switch (this.$scope.artifactType) { - case 'deployment': - this.$scope.currentComponent.selectedInstance.deploymentArtifacts = artifacts; - break; - default: - this.$scope.currentComponent.selectedInstance.artifacts = artifacts; - break; - } - this.initArtifactArr(this.$scope.artifactType); - }; - - let onError = ()=> { - this.$scope.isLoading = false; - }; - - this.$scope.isLoading = true; - this.$scope.preventMoveTab(true); - if (this.$scope.isComponentInstanceSelected()) { - this.$scope.component.getComponentInstanceArtifactsByGroupType(this.$scope.component.selectedInstance.uniqueId, this.convertToArtifactUrl(this.$scope.artifactType)).then(onGetInstanceArtifactsSuccess, onError); - } else { - this.loadComponentArtifactIfNeeded(forceLoad); - } - } - - private updateArtifactsIfNeeded = ():void => { - if (this.$scope.artifactType === "deployment") { - this.loadArtifacts(true); - } else { - this.initArtifactArr(this.$scope.artifactType); - } - }; - - private openEditArtifactModal = (artifact:ArtifactModel):void => { - this.ModalsHandler.openArtifactModal(artifact, this.$scope.currentComponent).then(():void => { - this.updateArtifactsIfNeeded(); - }); - }; - - private allowDeleteAndUpdateArtifact = (artifact:ArtifactModel):boolean => { - if(!this.$scope.isViewMode()){ - if(this.$scope.isComponentInstanceSelected()){//is artifact of instance - return !this.$scope.selectedComponent.deploymentArtifacts || !this.$scope.selectedComponent.deploymentArtifacts[artifact.artifactLabel];//if the artifact is not from instance parent - }else{//is artifact of main component - return (!artifact.isHEAT() && !artifact.isThirdParty() && !this.$scope.isLicenseArtifact(artifact)); - } - } - return false; -}; - - private initScope = ():void => { - - this.$scope.isLoading = false; - this.$scope.artifactType = this.artifactsUtils.getArtifactTypeByState(this.$state.current.name); - this.$scope.getTitle = ():string => { - return this.artifactsUtils.getTitle(this.$scope.artifactType, this.$scope.currentComponent); - }; - - // Bug 310499 - user should be unable to delete RI artifact. (also talked to David and agreed this function isn't necessary) - // this.$scope.isVFiArtifact = (artifact:ArtifactModel):boolean=> { - // if (artifact.artifactGroupType === ArtifactGroupType.INFORMATION) {//fix DE256847 - // return this.$scope.currentComponent.artifacts && (!this.$scope.currentComponent.artifacts[artifact.artifactLabel] || !this.$scope.currentComponent.artifacts[artifact.artifactLabel].artifactName); - // } - // return this.$scope.currentComponent.selectedInstance && this.$scope.currentComponent.selectedInstance.deploymentArtifacts && this.$scope.currentComponent.selectedInstance.deploymentArtifacts[artifact.artifactLabel]; - // }; - - this.$scope.addOrUpdate = (artifact:ArtifactModel):void => { - this.artifactsUtils.setArtifactType(artifact, this.$scope.artifactType); - let artifactCopy = new ArtifactModel(artifact); - this.openEditArtifactModal(artifactCopy); - }; - - - this.$scope.delete = (artifact:ArtifactModel):void => { - - let onOk = ():void => { - this.$scope.isLoading = true; - this.artifactsUtils.removeArtifact(artifact, this.$scope.artifacts); - - let success = (responseArtifact: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:ArtifactModel):any=> { - return _.find(this.$scope.artifacts, (item:ArtifactModel)=> { - return item.generatedFromId === heatArtifact.uniqueId; - }); - }; - - this.$scope.getEnvArtifactName = (artifact:ArtifactModel):string => { - let envArtifact = this.$scope.getEnvArtifact(artifact); - if (envArtifact) { - return envArtifact.artifactDisplayName; - } - }; - - this.$scope.isLicenseArtifact = (artifact:ArtifactModel):boolean => { - let isLicense:boolean = false; - if (this.$scope.component.isResource() && (<Resource>this.$scope.component).isCsarComponent()) { - isLicense = this.artifactsUtils.isLicenseType(artifact.artifactType); - } - - return isLicense; - }; - - this.$scope.openEditEnvParametersModal = (artifact:ArtifactModel):void => { - this.ModalsHandler.openEditEnvParametersModal(artifact, this.$scope.currentComponent).then(()=> { - this.updateArtifactsIfNeeded(); - }, ()=> { - // ERROR - }); - }; - - this.$scope.isVfOrPnf = ():boolean => { - if (this.$scope.selectedComponent.isResource()) { - let selectedResourceType = (<Resource>this.$scope.selectedComponent).resourceType; - return selectedResourceType == 'VF' || selectedResourceType == 'PNF'; - } - return false; - } - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_NODE_SELECTED, this.loadArtifacts); - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED, this.loadArtifacts); - - this.$scope.$on('$destroy', () => { - - this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_NODE_SELECTED, this.loadArtifacts); - this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED, this.loadArtifacts); - }); - - this.loadArtifacts(); - } -} diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html deleted file mode 100644 index ec81ed81ee..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html +++ /dev/null @@ -1,84 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<perfect-scrollbar class="w-sdc-designer-sidebar-tab-content artifacts"> - <div class="w-sdc-designer-sidebar-section"> - <loader data-display="isLoading"></loader> - <expand-collapse - expanded-selector=".w-sdc-designer-sidebar-section-content" class="w-sdc-designer-sidebar-section-title"> - <span class="w-sdc-designer-sidebar-section-title-text" data-ng-bind="getTitle()" tooltips tooltip-content="{{getTitle()}}"></span> - <div class="w-sdc-designer-sidebar-section-title-icon"></div> - </expand-collapse> - - <div class="w-sdc-designer-sidebar-section-content"> - <div class="i-sdc-designer-sidebar-section-content-item"> - <div class="i-sdc-designer-sidebar-section-content-item-artifact" - data-ng-repeat="artifact in artifacts | orderBy: ['-mandatory', 'artifactDisplayName'] track by $index" - data-ng-if="(!isComponentInstanceSelected() || artifact.esId) && 'HEAT_ENV' !== artifact.artifactType" - data-tests-id="artifact-item-{{artifact.artifactDisplayName}}"> - <span data-ng-if="artifact.heatParameters.length" class="i-sdc-designer-sidebar-section-content-item-file-link"></span> - <div class="i-sdc-designer-sidebar-section-content-item-artifact-details" data-ng-class="{'heat':artifact.isHEAT() && artifact.heatParameters.length}"> - <div class="i-sdc-designer-sidebar-section-content-item-artifact-filename" data-tests-id="artifactName-{{artifact.artifactDisplayName}}" - data-ng-bind="artifact.artifactName" tooltips tooltip-content="{{artifact.artifactName}}" - data-ng-if="artifact.artifactName"></div> - <div> - <span class="i-sdc-designer-sidebar-section-content-item-artifact-details-name" data-tests-id="artifact_Display_Name-{{artifact.artifactDisplayName}}" - data-ng-class="{'hand enabled': allowDeleteAndUpdateArtifactMap[artifact.artifactLabel]}" - data-ng-bind="artifact.artifactDisplayName" data-ng-click="!isLoading && allowDeleteAndUpdateArtifactMap[artifact.artifactLabel] && addOrUpdate(artifact)" - tooltips tooltip-content="{{artifact.artifactDisplayName}}"></span> - <div class="i-sdc-designer-sidebar-section-content-item-artifact-heat-env" ng-if="artifact.heatParameters.length"> - <span data-ng-bind="getEnvArtifactName(artifact)"data-tests-id="heat_env_{{artifact.artifactDisplayName}}"></span> - <button class="i-sdc-designer-sidebar-section-content-item-button update-env sprite e-sdc-small-icon-pencil" data-tests-id="edit_{{artifact.artifactDisplayName}}" - data-ng-if="!isViewMode()" data-ng-click="addOrUpdate(getEnvArtifact(artifact))"></button> - <download-artifact class="i-sdc-designer-sidebar-section-content-item-button download-env sprite e-sdc-small-download hand" artifact="getEnvArtifact(artifact)" - component="currentComponent" instance="isComponentInstanceSelected()" - data-tests-id="download_env_{{artifact.artifactDisplayName}}"></download-artifact> - </div> - </div> - - <div class="i-sdc-designer-sidebar-section-content-item-artifact-details-desc"> - <span class="i-sdc-designer-sidebar-section-content-item-artifact-details-desc-label" data-ng-show="artifact.description">Description:</span>{{artifact.description}} - </div> - </div> - <button ng-if="artifact.esId && allowDeleteAndUpdateArtifactMap[artifact.artifactLabel]" class="i-sdc-designer-sidebar-section-content-item-button delete sprite e-sdc-small-icon-delete" - data-tests-id="delete_{{artifact.artifactDisplayName}}" data-ng-click="delete(artifact)" type="button"></button> - <button ng-if="!isViewMode() && artifact.isHEAT() && isComponentInstanceSelected() && artifact.heatParameters.length" - class="i-sdc-designer-sidebar-section-content-item-button attach sprite e-sdc-small-icon-pad" - data-ng-click="openEditEnvParametersModal(getEnvArtifact(artifact))" type="button" - data-tests-id="edit-parameters-of-{{artifact.artifactDisplayName}}"></button> - <!--need to remove this button --> - <button ng-if="!isViewMode() && artifact.isHEAT() && !isComponentInstanceSelected() && artifact.heatParameters.length" - class="i-sdc-designer-sidebar-section-content-item-button attach sprite e-sdc-small-icon-pad" - data-ng-click="openEditEnvParametersModal(artifact)" type="button" - data-tests-id="edit-parameters-of-{{artifact.artifactDisplayName}}"></button> - - <download-artifact ng-if="artifact.esId && 'deployment' != artifactType" class="i-sdc-designer-sidebar-section-content-item-button download sprite e-sdc-small-download hand" - artifact="artifact" component="currentComponent" data-tests-id="download_{{artifact.artifactDisplayName}}" instance="isComponentInstanceSelected()"></download-artifact> - <download-artifact ng-if="artifact.esId && 'deployment' == artifactType" class="i-sdc-designer-sidebar-section-content-item-button download sprite e-sdc-small-download hand" - artifact="artifact" component="currentComponent" instance="isComponentInstanceSelected()" data-tests-id="download_{{artifact.artifactDisplayName}}" - show-loader="artifact.isHEAT()" - download-icon-class="i-sdc-designer-sidebar-section-content-item-button download sprite e-sdc-small-download hand"></download-artifact> - <button ng-if="!isViewMode() && !artifact.esId && artifactType==='deployment' && !isComponentInstanceSelected() && !artifact.isThirdParty()" class="i-sdc-designer-sidebar-section-content-item-button attach sprite e-sdc-small-icon-upload" - data-ng-click="addOrUpdate(artifact)" type="button" data-tests-id="add_Artifact"></button> - </div> - </div> - - </div> - <div class="w-sdc-designer-sidebar-section-footer" data-ng-if="!isViewMode() && artifactType!=='api' && (!isComponentInstanceSelected()||isVfOrPnf()) && ('deployment' != artifactType || selectedComponent.isComplex())"> - <button class="w-sdc-designer-sidebar-section-footer-action tlv-btn blue" data-tests-id="add_Artifact_Button" data-ng-click="addOrUpdate({})" type="button">Add Artifact</button> - </div> - </div> -</perfect-scrollbar> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts.less b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts.less deleted file mode 100644 index 5256542788..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts.less +++ /dev/null @@ -1,173 +0,0 @@ -.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 { - .s_14_r; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - max-width:220px; - display: inline-block; - //text-transform: capitalize; - &.enabled { - &:hover { - .a_7; - font-family: @font-opensans-regular - } - } - - } - - .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/src/app/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts deleted file mode 100644 index 36ceabfb42..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts +++ /dev/null @@ -1,201 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; -import * as _ from "lodash"; -import {Component, ModalModel, ButtonModel} from "app/models"; -import {GRAPH_EVENTS} from "app/utils"; -import {LeftPaletteLoaderService, EventListenerService} from "app/services"; -import {ICompositionViewModelScope} from "../../composition-view-model"; -import {LeftPaletteComponent} from "../../../../../../models/components/displayComponent"; -import {ComponentServiceFactoryNg2} from "app/ng2/services/component-services/component.service.factory"; -import {ServiceServiceNg2} from 'app/ng2/services/component-services/service.service'; -import {Service} from "app/models/components/service"; -import {ModalService} from 'app/ng2/services/modal.service'; - -export interface IEditResourceVersion { - allVersions:any; - changeVersion:string; -} - -interface IDetailsViewModelScope extends ICompositionViewModelScope { - isLoading:boolean; - $parent:ICompositionViewModelScope; - expandedSection:Array<string>; - editForm:ng.IFormController; - editResourceVersion:IEditResourceVersion; - - onChangeResourceVersion():void; - alertBeforeChangeResourceVersion():void; - changeVersion():void; - cancelChangeResourceVersion():void; -} - -export class DetailsViewModel { - - static '$inject' = [ - '$scope', - '$filter', - 'LeftPaletteLoaderService', - 'EventListenerService', - 'ComponentServiceFactoryNg2', - 'ServiceServiceNg2', - 'ModalServiceNg2' - ]; - - constructor(private $scope:IDetailsViewModelScope, - private $filter:ng.IFilterService, - private LeftPaletteLoaderService:LeftPaletteLoaderService, - private eventListenerService:EventListenerService, - private ComponentServiceFactoryNg2: ComponentServiceFactoryNg2, - private serviceService: ServiceServiceNg2, - private ModalServiceNg2: ModalService) { - this.initScope(); - } - - private clearSelectedVersion = ():void => { - this.$scope.editResourceVersion = { - allVersions: {}, - changeVersion: null - }; - }; - - private versioning:Function = (versionNumber:string):string => { - let version:Array<string> = 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)); - - if (parseFloat(highestVersion) % 1) { //if highest is minor, make sure it is the latest checked in - - let latestVersionComponent:LeftPaletteComponent = _.maxBy(_.filter(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(this.$scope.currentComponent), (component:LeftPaletteComponent) => { //latest checked in - return (component.systemName === this.$scope.selectedComponent.systemName - || component.uuid === this.$scope.selectedComponent.uuid); - }),(component)=>{return component.version}); - - 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:Component) => { - if (this.$scope.isComponentInstanceSelected()) { - this.initEditResourceVersion(); - } - }); - - this.$scope.onChangeResourceVersion = ():void => { - if(this.$scope.isComponentInstanceSelected() && this.$scope.currentComponent.selectedInstance.isServiceProxy()) { - this.$scope.alertBeforeChangeResourceVersion(); - } - else { - this.$scope.changeVersion(); - } - }; - - this.$scope.alertBeforeChangeResourceVersion = ():void => { - let modalApproveTxt:string = this.$filter('translate')("MODAL_APPROVE"); - let modalCancelTxt:string = this.$filter('translate')("MODAL_CANCEL"); - let changeVersionModalTitle:string = this.$filter('translate')("DETAILS_TAB_CHANGE_VERSION_MODAL_TITLE"); - let changeVersionModalMsg:string = this.$filter('translate')("DETAILS_TAB_CHANGE_VERSION_MODAL_MSG"); - - let actionButton: ButtonModel = new ButtonModel(modalApproveTxt, 'blue', this.$scope.changeVersion); - let cancelButton: ButtonModel = new ButtonModel(modalCancelTxt, 'grey', this.$scope.cancelChangeResourceVersion); - let modalModel: ModalModel = new ModalModel('sm', changeVersionModalTitle, changeVersionModalMsg, [actionButton, cancelButton]); - let customModal = this.ModalServiceNg2.createCustomModal(modalModel); - customModal.instance.open(); - }; - - this.$scope.cancelChangeResourceVersion = () => { - this.ModalServiceNg2.closeCurrentModal(); - this.$scope.editResourceVersion.changeVersion = this.$scope.currentComponent.selectedInstance.componentVersion; - }; - - this.$scope.changeVersion = ():void => { - this.ModalServiceNg2.closeCurrentModal(); - this.$scope.isLoading = true; - this.$scope.$parent.isLoading = true; - - let service = <Service>this.$scope.currentComponent; - let {changeVersion} = this.$scope.editResourceVersion; - let componentUid:string = this.$scope.editResourceVersion.allVersions[changeVersion]; - - let onCancel = (error:any) => { - this.$scope.isLoading = false; - this.$scope.$parent.isLoading = false; - this.$scope.editResourceVersion.changeVersion = this.$scope.currentComponent.selectedInstance.componentVersion; - - if (error) { - console.log(error); - } - }; - - let onUpdate = () => { - let onSuccess = (component:Component) => { - this.$scope.isLoading = false; - this.$scope.$parent.isLoading = false; - this.$scope.onComponentInstanceVersionChange(component); - }; - - this.$scope.currentComponent.changeComponentInstanceVersion(componentUid).then(onSuccess, onCancel); - }; - - if (this.$scope.currentComponent.isService()) { - this.serviceService.checkComponentInstanceVersionChange(service, componentUid).subscribe((pathsToDelete:string[]) => { - if (pathsToDelete && pathsToDelete.length) { - this.$scope.isLoading = false; - this.$scope.$parent.isLoading = false; - this.$scope.$parent.openVersionChangeModal(pathsToDelete).then(() => { - this.$scope.isLoading = true; - this.$scope.$parent.isLoading = true; - onUpdate(); - }, onCancel); - } else { - onUpdate(); - } - }, onCancel); - } else { - onUpdate(); - } - }; - } -} diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view.html deleted file mode 100644 index db5322a859..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view.html +++ /dev/null @@ -1,181 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<perfect-scrollbar include-padding="true" class="w-sdc-designer-sidebar-tab-content details"> - - <div class="w-sdc-designer-sidebar-section"> - <loader data-display="isLoading"></loader> - <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content.general" class="w-sdc-designer-sidebar-section-title"> - - General Info - <div class="w-sdc-designer-sidebar-section-title-icon"></div> - </expand-collapse> - - <div class="w-sdc-designer-sidebar-section-content general"> - <div class="i-sdc-designer-sidebar-section-content-item"> - <span class="i-sdc-designer-sidebar-section-content-item-label">Type:</span> - <span class="i-sdc-designer-sidebar-section-content-item-value" data-tests-id="rightTab_componentType" data-ng-bind="isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy() ? 'Service Proxy' : selectedComponent.componentType"></span> - </div> - <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.isResource()"> - <span class="i-sdc-designer-sidebar-section-content-item-label">Resource Type:</span> - <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-if="selectedComponent.isResource()" data-ng-bind="selectedComponent.resourceType" - tooltips tooltip-content="​{{selectedComponent.resourceType | resourceTypeName}}" - data-tests-id="rightTab_resourceType"></span> - </div> - <div class="i-sdc-designer-sidebar-section-content-item"> - - <span class="i-sdc-designer-sidebar-section-content-item-label">Version:</span> - <span class="i-sdc-designer-sidebar-section-content-item-value" - data-ng-if="!isComponentInstanceSelected()" data-tests-id="rightTab_version" data-ng-bind="selectedComponent.version"></span> - - <ng-form name="editForm" data-ng-if="isComponentInstanceSelected()"> - <select data-ng-model="editResourceVersion.changeVersion" name="changeVersion" data-tests-id="changeVersion" - data-ng-disabled="$parent.isViewOnly || selectedComponent.uniqueId != editResourceVersion.allVersions[editResourceVersion.changeVersion] || selectedComponent.archived" - class="i-sdc-designer-sidebar-section-content-item-value i-sdc-form-select" - data-ng-class="{'minor': (editResourceVersion.changeVersion)%1, 'disabled':selectedComponent.archived}" - data-ng-change="onChangeResourceVersion()"> - <option class="select-instance-version" data-ng-class="{'minor': key%1}" - ng-repeat="(key, value) in editResourceVersion.allVersions">{{key}}</option> - </select></ng-form> - </div> - <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.categories && selectedComponent.categories[0]"> - <span class="i-sdc-designer-sidebar-section-content-item-label">Category:</span> - <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.categories[0].name" - tooltips tooltip-content="​{{selectedComponent.categories[0].name}}" - data-tests-id="rightTab_category"></span> - </div> - <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.categories && selectedComponent.categories[0] && selectedComponent.categories[0].subcategories"> - <span class="i-sdc-designer-sidebar-section-content-item-label">Sub Category:</span> - <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.categories[0].subcategories[0].name" - tooltips tooltip-content="​{{selectedComponent.categories[0].subcategories[0].name}}" - data-tests-id="rightTab_subCategory"></span> - </div> - <div class="i-sdc-designer-sidebar-section-content-item"> - <span class="i-sdc-designer-sidebar-section-content-item-label">Creation Date:</span> - <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.creationDate | date: 'MM/dd/yyyy'" - data-tests-id="rightTab_creationDate"></span> - </div> - <div class="i-sdc-designer-sidebar-section-content-item"> - <span class="i-sdc-designer-sidebar-section-content-item-label">Author:</span> - <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.creatorFullName" - tooltips tooltip-content="​{{selectedComponent.creatorFullName}}" - data-tests-id="rightTab_author"> - </span> - </div> - <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.isService()"> - <span class="i-sdc-designer-sidebar-section-content-item-label" translate="GENERAL_LABEL_PROJECT_CODE"></span> - <span class="i-sdc-designer-sidebar-section-content-item-value" - data-tests-id="rightTab_projectCode" data-ng-bind="selectedComponent.projectCode"></span> - </div> - <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.isResource()"> - <span class="i-sdc-designer-sidebar-section-content-item-label">Vendor Name:</span> - <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.vendorName" - tooltips tooltip-content="​{{selectedComponent.vendorName}}" - data-tests-id="rightTab_vendorName"> - </span> - </div> - <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.isResource()"> - <span class="i-sdc-designer-sidebar-section-content-item-label">Vendor Release:</span> - <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.vendorRelease" - tooltips tooltip-class="tooltip-custom break-word-tooltip" tooltip-content="​{{selectedComponent.vendorRelease}}" - data-tests-id="rightTab_vendorRelease"> - </span> - </div> - <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.isResource()"> - <span class="i-sdc-designer-sidebar-section-content-item-label" translate="GENERAL_LABEL_RESOURCE_MODEL_NUMBER"></span> - <span class="i-sdc-designer-sidebar-section-content-item-value vendor-model-number" data-ng-bind="selectedComponent.resourceVendorModelNumber" - tooltips tooltip-class="tooltip-custom break-word-tooltip" tooltip-content="​{{selectedComponent.resourceVendorModelNumber}}" - data-tests-id="rightTab_resourceVendorModelNumber"> - </span> - </div> - <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.isService()"> - <span class="i-sdc-designer-sidebar-section-content-item-label" translate="GENERAL_LABEL_SERVICE_TYPE"></span> - <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.serviceType" - tooltips tooltip-class="tooltip-custom break-word-tooltip" tooltip-content="​{{selectedComponent.serviceType}}" - data-tests-id="rightTab_serviceType"> - </span> - </div> - <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.isService()"> - <span class="i-sdc-designer-sidebar-section-content-item-label" translate="GENERAL_LABEL_SERVICE_ROLE"></span> - <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.serviceRole" - tooltips tooltip-class="tooltip-custom break-word-tooltip" tooltip-content="​{{selectedComponent.serviceRole}}" - data-tests-id="rightTab_serviceRole"> - </span> - </div> - <div class="i-sdc-designer-sidebar-section-content-item"> - <span class="i-sdc-designer-sidebar-section-content-item-label" translate="GENERAL_LABEL_CONTACT_ID"></span> - <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.contactId" - data-tests-id="rightTab_contactId"></span> - </div> - - <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy()"> - <span class="i-sdc-designer-sidebar-section-content-item-label" translate="GENERAL_LABEL_SOURCE_SERVICE_NAME"></span> - <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="currentComponent.selectedInstance.sourceModelName" tooltips tooltip-class="tooltip-custom break-word-tooltip" tooltip-content="​{{currentComponent.selectedInstance.sourceModelName}}" - data-tests-id="rightTab_sourceModelName"></span> - </div> - - <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="isViewMode() && currentComponent.isService() && selectedComponent.isResource()"> - <span class="i-sdc-designer-sidebar-section-content-item-label" translate="GENERAL_LABEL_RESOURCE_CUSTOMIZATION_UUID"></span><br> - <span class="customization-uuid selectable" data-ng-bind="currentComponent.selectedInstance.customizationUUID" - data-tests-id="rightTab_customizationModuleUUID"></span><br> - </div> - <div class="i-sdc-designer-sidebar-section-content-item description"> - <span class="i-sdc-designer-sidebar-section-content-item-label">Description: - - <span class="i-sdc-designer-sidebar-section-content-description-item-value" ellipsis="selectedComponent.description" max-chars="55" - data-tests-id="rightTab_description"></span> - </span> - </div> - - </div> - </div> - - <div class="w-sdc-designer-sidebar-section additionalInformation"> - <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content.additionalInformation" class="w-sdc-designer-sidebar-section-title"> - Additional Information - <div class="w-sdc-designer-sidebar-section-title-icon"></div> - </expand-collapse> - - <div class="w-sdc-designer-sidebar-section-content additionalInformation"> - <div class="i-sdc-designer-sidebar-section-content-item" data-ng-repeat="additionalInformation in selectedComponent.getAdditionalInformation() track by $index"> - <span class="i-sdc-designer-sidebar-section-content-item-label additional-information" data-ng-bind="additionalInformation.key" tooltips tooltip-content="{{additionalInformation.key}}"></span> - <span class="i-sdc-designer-sidebar-section-content-item-label">:</span> - <span class="i-sdc-designer-sidebar-section-content-item-value additional-information" data-ng-bind="additionalInformation.value" - tooltips tooltip-class="tooltip-custom break-word-tooltip" tooltip-content="{{additionalInformation.value}}"></span> - </div> - </div> - </div> - - - <div class="w-sdc-designer-sidebar-section tags"> - <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content.tags" class="w-sdc-designer-sidebar-section-title"> - Tags - <div class="w-sdc-designer-sidebar-section-title-icon"></div> - </expand-collapse> - - <div class="w-sdc-designer-sidebar-section-content tags"> - <div class="i-sdc-designer-sidebar-section-content-item"> - <span class="i-sdc-designer-sidebar-section-content-item-tag" data-ng-if="selectedComponent.tags.indexOf(selectedComponent.name)===-1" data-ng-bind="selectedComponent.name" - data-tests-id="rightTab_tag" tooltips tooltip-content="{{selectedComponent.name}}"></span> - <span class="i-sdc-designer-sidebar-section-content-item-tag" data-ng-repeat="tag in selectedComponent.tags track by $index" data-ng-bind="tag" - data-tests-id="rightTab_tag" tooltips tooltip-content="{{tag}}"></span> - </div> - </div> - </div> - </div> - -</perfect-scrollbar> - diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details.less b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details.less deleted file mode 100644 index 90bb5658c8..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details.less +++ /dev/null @@ -1,81 +0,0 @@ -.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-family: @font-opensans-medium; - color: #191919; - font-size: 13px; - &.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; - font-family: @font-opensans-regular; - color: #191919; - font-size: 13px; - padding-left: 10px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - //display: inline-block; fix long name for firefox - max-width: 160px; - vertical-align:bottom; - font-weight: normal; - &.vendor-model-number{ - max-width: 110px; - } - &.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; - font-family: @font-opensans-regular; - } - - .customization-uuid{ - .f-type._12_m; - } - - .w-sdc-designer-sidebar-section.tags { - .i-sdc-designer-sidebar-section-content-item { - white-space: normal; - } - } - -} diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view-model.ts deleted file mode 100644 index e3ddecd9a5..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view-model.ts +++ /dev/null @@ -1,244 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; -import * as _ from "lodash"; -import { - AttributeModel, - AttributesGroup, - Component, - ComponentInstance, - PropertyModel, - PropertiesGroup -} from "app/models"; -import {ICompositionViewModelScope} from "../../composition-view-model"; -import {ModalsHandler} from "app/utils"; -import {ComponentServiceNg2} from "app/ng2/services/component-services/component.service"; -import {ComponentGenericResponse} from "app/ng2/services/responses/component-generic-response"; - -interface IResourcePropertiesAndAttributesViewModelScope extends ICompositionViewModelScope { - properties:PropertiesGroup; - attributes:AttributesGroup; - propertiesMessage:string; - groupPropertiesByInstance:boolean; - showGroupsOfInstanceProperties:Array<boolean>; - addProperty():void; - updateProperty(property:PropertyModel):void; - deleteProperty(property:PropertyModel):void; - viewAttribute(attribute:AttributeModel):void; - groupNameByKey(key:string):string; - isPropertyOwner():boolean; - getComponentInstanceNameFromInstanceByKey(key:string):string; -} - -export class ResourcePropertiesViewModel { - - static '$inject' = [ - '$scope', - '$filter', - '$uibModal', - 'ModalsHandler', - 'ComponentServiceNg2' - - ]; - - - constructor(private $scope:IResourcePropertiesAndAttributesViewModelScope, - private $filter:ng.IFilterService, - private $uibModal:ng.ui.bootstrap.IModalService, - private ModalsHandler:ModalsHandler, - private ComponentServiceNg2:ComponentServiceNg2) { - - this.getComponentInstancesPropertiesAndAttributes(); - } - - private initComponentProperties = ():void => { - let result:PropertiesGroup = {}; - - if (this.$scope.selectedComponent) { - this.$scope.propertiesMessage = undefined; - this.$scope.groupPropertiesByInstance = false; - if (this.$scope.isComponentInstanceSelected()) { - if (this.$scope.currentComponent.selectedInstance.originType === 'VF') { - this.$scope.groupPropertiesByInstance = true; - } - 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<PropertyModel>(); - let derived = Array<PropertyModel>(); - _.forEach(this.$scope.selectedComponent.properties, (property: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: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; - } - }; - - /** - * This function is checking if the component is the value owner of the current property - * in order to notify the edit property modal which fields to disable - */ - private isPropertyValueOwner = ():boolean => { - return this.$scope.currentComponent.isService() || !!this.$scope.currentComponent.selectedInstance; - }; - - /** - * The function opens the edit property modal. - * It checks if the property is from the VF or from one of it's resource instances and sends the needed property list. - * For create property reasons an empty array is transferd - * - * @param property the wanted property to edit/create - */ - private openEditPropertyModal = (property:PropertyModel):void => { - this.ModalsHandler.openEditPropertyModal(property, - this.$scope.component, - (this.$scope.isPropertyOwner() ? - this.$scope.properties[property.parentUniqueId] : - this.$scope.properties[property.resourceInstanceUniqueId]) || [], - this.isPropertyValueOwner(), "component", property.resourceInstanceUniqueId).then((updatedProperty:PropertyModel) => { - if(updatedProperty){ - let oldProp = _.find(this.$scope.properties[updatedProperty.resourceInstanceUniqueId], (prop:PropertyModel) => {return prop.uniqueId == updatedProperty.uniqueId;}); - oldProp.value = updatedProperty.value; - } - }); - }; - - private openAttributeModal = (atrribute:AttributeModel):void => { - - let modalOptions:ng.ui.bootstrap.IModalSettings = { - template: 'app/view-models/forms/attribute-form/attribute-form-view.html', - controller: 'Sdc.ViewModels.AttributeFormViewModel', - size: 'sdc-md', - backdrop: 'static', - keyboard: false, - resolve: { - attribute: ():AttributeModel => { - return atrribute; - }, - component: ():Component => { - return this.$scope.currentComponent; - } - } - }; - this.$uibModal.open(modalOptions); - }; - - private getComponentInstancesPropertiesAndAttributes = () => { - - this.ComponentServiceNg2.getComponentInstanceAttributesAndProperties(this.$scope.currentComponent).subscribe((genericResponse:ComponentGenericResponse) => { - this.$scope.currentComponent.componentInstancesAttributes = genericResponse.componentInstancesAttributes; - this.$scope.currentComponent.componentInstancesProperties = genericResponse.componentInstancesProperties; - this.initScope(); - }); - }; - - private initScope = ():void => { - - - this.initComponentProperties(); - this.initComponentAttributes(); - - this.$scope.$watchCollection('currentComponent.properties', (newData:any):void => { - this.initComponentProperties(); - }); - - this.$scope.$watch('currentComponent.selectedInstance', (newInstance:ComponentInstance):void => { - if (angular.isDefined(newInstance)) { - this.initComponentProperties(); - this.initComponentAttributes(); - - } - }); - - this.$scope.isPropertyOwner = ():boolean => { - return this.$scope.currentComponent && this.$scope.currentComponent.isResource() && !this.$scope.isComponentInstanceSelected(); - }; - - this.$scope.updateProperty = (property:PropertyModel):void => { - this.openEditPropertyModal(property); - }; - - this.$scope.deleteProperty = (property: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: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: - let componentInstance = _.find(this.$scope.currentComponent.componentInstances, {uniqueId: key}); - if(componentInstance) - return this.$filter("resourceName")(componentInstance.name); - } - }; - - this.$scope.getComponentInstanceNameFromInstanceByKey = (key:string):string => { - let instanceName:string = ""; - if (key !== undefined && this.$scope.selectedComponent.uniqueId == this.$scope.currentComponent.selectedInstance.componentUid) { - instanceName = this.$filter("resourceName")((_.find(this.$scope.selectedComponent.componentInstances, {uniqueId: key})).name); - } - return instanceName; - }; - - } -} diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view.html deleted file mode 100644 index cdd69682dc..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view.html +++ /dev/null @@ -1,133 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<perfect-scrollbar class="w-sdc-designer-sidebar-tab-content properties" id="main-scroll"> - - <div class="w-sdc-designer-sidebar-section"> - - <!--expand-collapse data-ng-if="isPropertyOwner() && !currentComponent.properties.length" expanded-selector=".w-sdc-composition-sidebar-section-content.{{currentComponent.name}}" - class="w-sdc-composition-sidebar-section-title"> - <span class="w-sdc-composition-sidebar-section-title-text" tooltips tooltip-content="{{currentComponent.name | resourceName}} Properties" - data-ng-bind="(currentComponent.name | resourceName)+ ' Properties'"></span> - <div class="w-sdc-composition-sidebar-section-title-icon"></div> - </expand-collapse--> - <!--properties--> - <expand-collapse data-ng-repeat-start="(key, group) in properties" - expanded-selector=".w-sdc-designer-sidebar-section-content.properties.{{$index}}"> - <div class="first-level"> - <div class="expand-collapse-title-icon"></div> - <span class="w-sdc-designer-sidebar-section-title-text" data-ng-bind="groupNameByKey(key) + ' Properties'" - tooltips tooltip-content="{{groupNameByKey(key)}} Properties" - data-tests-id="vfi-properties"></span> - </div> - </expand-collapse> - - <div data-ng-repeat-end="" class="w-sdc-designer-sidebar-section-content properties {{$index}}"> <!--data-ng-show="isShowDetailsSection" --> - <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="!groupPropertiesByInstance"> - <div class="i-sdc-designer-sidebar-section-content-item-property-and-attribute" data-tests-id="propertyRow" - data-ng-repeat="property in group | orderBy: 'name' track by $index"> - <div> - <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label" - data-ng-class="{'hand enabled': !$parent.isViewOnly}" - tooltips tooltip-content="{{property.name}}" - data-ng-click="!$parent.isViewOnly && updateProperty(property)" - data-tests-id="{{property.name}}">{{property.name}}</span> - </div> - <div> - <span class="i-sdc-designer-sidebar-section-content-item-property-value" data-ng-if="isPropertyOwner()" - tooltips tooltip-content="{{property.defaultValue}}">{{property.defaultValue}}</span> - <span class="i-sdc-designer-sidebar-section-content-item-property-value" data-ng-if="!isPropertyOwner()" - tooltips tooltip-content="{{property.value}}" - data-tests-id="value_{{property.name}}">{{property.value}}</span> - </div> - <button class="i-sdc-designer-sidebar-section-content-item-button delete sprite e-sdc-small-icon-delete" - data-ng-if="!$parent.isViewOnly&&(isPropertyOwner() && !property.readonly)" - data-ng-click="deleteProperty(property)" type="button"></button> - </div> - </div> - <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="groupPropertiesByInstance"> - <div data-ng-repeat-start="(instancesIds , InstanceProperties) in (group | groupBy:'path')" - class="vfci-properties-group" - data-ng-click="showGroupsOfInstanceProperties[$index]=!showGroupsOfInstanceProperties[$index]" - data-ng-class="{'expanded':showGroupsOfInstanceProperties[$index]}"> - <div class="second-level"> - <div class="expand-collapse-title-icon"></div> - <span class="w-sdc-designer-sidebar-section-title-text" data-ng-bind="getComponentInstanceNameFromInstanceByKey(InstanceProperties[0].path[1]) + ' Properties'" - tooltips tooltip-content="{{getComponentInstanceNameFromInstanceByKey(InstanceProperties[0].path[1])}} Properties" - data-tests-id="vfci-properties"></span> - </div> - </div> - <div data-ng-repeat-end="" class="w-sdc-designer-sidebar-section-content instance-properties {{$index}}" data-ng-if="showGroupsOfInstanceProperties[$index]"> - <div class="i-sdc-designer-sidebar-section-content-item"> - <div class="i-sdc-designer-sidebar-section-content-item-property-and-attribute" data-tests-id="propertyRow" - data-ng-repeat="instanceProperty in InstanceProperties | orderBy: 'name'"> - <div> - <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label" - data-ng-class="{'hand enabled': !$parent.isViewOnly}" - tooltips tooltip-content="{{instanceProperty.name}}" - data-tests-id="vfci-property">{{instanceProperty.name}}</span> - </div> - <div> - <span class="i-sdc-designer-sidebar-section-content-item-property-value" - tooltips tooltip-content="{{instanceProperty.value === undefined ? instanceProperty.defaultValue : instanceProperty.value}}"> - {{instanceProperty.value === undefined ? instanceProperty.defaultValue : instanceProperty.value}}</span> - </div> - </div> - </div> - </div> - </div> - <!--<div class="w-sdc-designer-sidebar-section-footer" data-ng-if="(!$parent.isViewOnly && isPropertyOwner()) || showAddPropertyButton">--> - <!--<button class="w-sdc-designer-sidebar-section-footer-action tlv-btn blue" data-tests-id="addGrey" data-ng-click="addProperty()" type="button">--> - <!--Add Property--> - <!--</button>--> - <!--</div>--> - </div> - - - <!--attributes--> - <expand-collapse data-ng-repeat-start="(key, group) in attributes" - expanded-selector=".w-sdc-designer-sidebar-section-content.attributes.{{$index}}"> - <div class="first-level"> - <div class="expand-collapse-title-icon"></div> - <span class="w-sdc-designer-sidebar-section-title-text" data-ng-bind="groupNameByKey(key) + ' Attributes'" - tooltips tooltip-content="{{groupNameByKey(key)}} Attributes"></span> - </div> - </expand-collapse> - - <div data-ng-repeat-end="" class="w-sdc-designer-sidebar-section-content attributes {{$index}}"> <!--data-ng-show="isShowDetailsSection" --> - <div class="i-sdc-designer-sidebar-section-content-item"> - <div class="i-sdc-designer-sidebar-section-content-item-property-and-attribute" - data-ng-repeat="attribute in group | orderBy: 'name' track by $index"> - <div> - <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label" - data-ng-class="{'hand enabled': !$parent.isViewOnly}" - tooltips tooltip-content="{{attribute.name}}" - data-ng-click="!$parent.isViewOnly && viewAttribute(attribute)" - data-tests-id="{{attribute.name}}-attr">{{attribute.name}}</span> - </div> - <div> - <span class="i-sdc-designer-sidebar-section-content-item-property-value" data-ng-if="isPropertyOwner()" - tooltips tooltip-content="{{attribute.defaultValue}}">{{attribute.defaultValue}}</span> - <span class="i-sdc-designer-sidebar-section-content-item-property-value" data-ng-if="!isPropertyOwner()" - tooltips tooltip-content="{{attribute.value}}" data-tests-id="value-of-{{attribute.name}}">{{attribute.value}}</span> - </div> - </div> - </div> - - </div> - - </div> -</perfect-scrollbar> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties.less b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties.less deleted file mode 100644 index ce5acc83e5..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties.less +++ /dev/null @@ -1,39 +0,0 @@ -.w-sdc-designer-sidebar-tab-content.properties { - .i-sdc-designer-sidebar-section-content-item-property-and-attribute-label{ - display:block; - 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; - } - - .vfci-properties-group{ - background-color: @func_color_r; - } - - .expand-collapse-title-icon{ - .hand; - .sprite-new; - .expand-collapse-plus-icon; - vertical-align: middle; - margin: 0 6px; - } - - .expanded { - .expand-collapse-title-icon { - .expand-collapse-minus-icon; - } - } - - .w-sdc-designer-sidebar-section-title-text{ - vertical-align: middle; - } -} diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/relations/relations-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/relations/relations-view-model.ts deleted file mode 100644 index ce44aaff50..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/relations/relations-view-model.ts +++ /dev/null @@ -1,177 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; -import * as _ from "lodash"; -import {ICompositionViewModelScope} from "../../composition-view-model"; -import {CapabilitiesGroup, Requirement, RequirementsGroup} from "app/models"; -import {ComponentServiceNg2} from "app/ng2/services/component-services/component.service"; -import {ComponentGenericResponse} from "app/ng2/services/responses/component-generic-response"; -import {GRAPH_EVENTS} from "app/utils"; -import {EventListenerService} from "app/services"; -import {ComponentInstance, Capability} from "app/models"; - -interface IRelationsViewModelScope extends ICompositionViewModelScope { - isLoading:boolean; - $parent:ICompositionViewModelScope; - getRelation(requirement:any):any; - capabilities:Array<Capability>; - requirements:Array<Requirement>; - - //for complex components - capabilitiesInstancesMap:InstanceCapabilitiesMap; - requirementsInstancesMap:InstanceRequirementsMap; -} -export class InstanceCapabilitiesMap { - [key:string]:Array<Capability>; -} - -export class InstanceRequirementsMap { - [key:string]:Array<Requirement>; -} - -export class RelationsViewModel { - - static '$inject' = [ - '$scope', - '$filter', - 'ComponentServiceNg2', - 'EventListenerService' - ]; - - constructor(private $scope:IRelationsViewModelScope, - private $filter:ng.IFilterService, - private ComponentServiceNg2:ComponentServiceNg2, - private eventListenerService:EventListenerService) { - this.initScope(); - } - - private loadComplexComponentData = () => { - this.$scope.isLoading = true; - this.ComponentServiceNg2.getCapabilitiesAndRequirements(this.$scope.currentComponent.componentType, this.$scope.currentComponent.uniqueId).subscribe((response:ComponentGenericResponse) => { - this.$scope.currentComponent.capabilities = response.capabilities; - this.$scope.currentComponent.requirements = response.requirements; - this.setScopeCapabilitiesRequirements(this.$scope.currentComponent.capabilities, this.$scope.currentComponent.requirements); - this.initInstancesMap(); - this.$scope.isLoading = false; - }); - } - - - private extractValuesFromMap = (map:CapabilitiesGroup | RequirementsGroup):Array<any> => { - let values = []; - _.forEach(map, (capabilitiesOrRequirements:Array<Capability> | Array<Requirement>, key) => { - values = values.concat(capabilitiesOrRequirements) - } - ); - return values; - } - - private setScopeCapabilitiesRequirements = (capabilities:CapabilitiesGroup, requirements:RequirementsGroup) => { - this.$scope.capabilities = this.extractValuesFromMap(capabilities); - this.$scope.requirements = this.extractValuesFromMap(requirements); - } - - - private initInstancesMap = ():void => { - - this.$scope.capabilitiesInstancesMap = new InstanceCapabilitiesMap(); - _.forEach(this.$scope.capabilities, (capability:Capability) => { - if (this.$scope.capabilitiesInstancesMap[capability.ownerName]) { - this.$scope.capabilitiesInstancesMap[capability.ownerName] = this.$scope.capabilitiesInstancesMap[capability.ownerName].concat(capability); - } else { - this.$scope.capabilitiesInstancesMap[capability.ownerName] = new Array<Capability>(capability); - } - }); - - this.$scope.requirementsInstancesMap = new InstanceRequirementsMap(); - _.forEach(this.$scope.requirements, (requirement:Requirement) => { - if (this.$scope.requirementsInstancesMap[requirement.ownerName]) { - this.$scope.requirementsInstancesMap[requirement.ownerName] = this.$scope.requirementsInstancesMap[requirement.ownerName].concat(requirement); - } else { - this.$scope.requirementsInstancesMap[requirement.ownerName] = new Array<Requirement>(requirement); - } - }); - } - - private initRequirementsAndCapabilities = (needUpdate?: boolean) => { - - // if instance selected, we take the requirement and capabilities of the instance - always exist because we load them with the graph - if (this.$scope.isComponentInstanceSelected()) { - this.$scope.isLoading = false; - this.setScopeCapabilitiesRequirements(this.$scope.currentComponent.selectedInstance.capabilities, this.$scope.currentComponent.selectedInstance.requirements); - if (this.$scope.currentComponent.selectedInstance.originType === 'VF') { - this.initInstancesMap(); - } - } else { - // if instance not selected, we take the requirement and capabilities of the VF/SERVICE, if not exist we call api - if (needUpdate || !this.$scope.currentComponent.capabilities || !this.$scope.currentComponent.requirements) { - this.loadComplexComponentData(); - - } else { - this.$scope.isLoading = false; - this.setScopeCapabilitiesRequirements(this.$scope.currentComponent.capabilities, this.$scope.currentComponent.requirements); - this.initInstancesMap(); - } - } - } - - private updateRequirementCapabilities = () => { - if (!this.$scope.isComponentInstanceSelected()) { - this.loadComplexComponentData(); - } - } - - private initEvents = ():void => { - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_NODE_SELECTED, this.initRequirementsAndCapabilities); - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED, this.updateRequirementCapabilities); - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_CREATE_COMPONENT_INSTANCE, this.updateRequirementCapabilities); - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE, this.updateRequirementCapabilities); - } - - private initScope = ():void => { - - this.$scope.requirements = []; - this.$scope.capabilities = []; - - this.initEvents(); - this.initRequirementsAndCapabilities(); - - this.$scope.isCurrentDisplayComponentIsComplex = ():boolean => { - if (this.$scope.isComponentInstanceSelected()) { - if (this.$scope.currentComponent.selectedInstance.originType === 'VF') { - return true; - } - return false; - } else { - return this.$scope.currentComponent.isComplex(); - } - } - - this.$scope.$on('$destroy', () => { - - this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_NODE_SELECTED, this.initRequirementsAndCapabilities); - this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED, this.updateRequirementCapabilities); - this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_CREATE_COMPONENT_INSTANCE, this.updateRequirementCapabilities); - this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE, this.updateRequirementCapabilities); - }); - - } -} diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/relations/relations-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/relations/relations-view.html deleted file mode 100644 index 889f129dac..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/relations/relations-view.html +++ /dev/null @@ -1,77 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<perfect-scrollbar class="w-sdc-designer-sidebar-tab-content sdc-general-tab relations"> - <div ng-if="!isCurrentDisplayComponentIsComplex()"> - <div class="w-sdc-designer-sidebar-section w-sdc-designer-sidebar-section-relations"> - <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content.capabilities" class="w-sdc-designer-sidebar-section-title"> Capabilities - <div class="w-sdc-designer-sidebar-section-title-icon"></div> - </expand-collapse> - <div class="w-sdc-designer-sidebar-section-content capabilities"> - <capabilities-list capabilities="capabilities"></capabilities-list> - </div> - </div> - <div class="w-sdc-designer-sidebar-section w-sdc-designer-sidebar-section-relations"> - <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content.requirements" class="w-sdc-designer-sidebar-section-title"> Requirements - <div class="w-sdc-designer-sidebar-section-title-icon"></div> - </expand-collapse> - - <div class="w-sdc-designer-sidebar-section-content requirements"> - <requirements-list component='currentComponent' requirements="requirements"></requirements-list> - </div> - </div> - </div> - - <div ng-if="isCurrentDisplayComponentIsComplex()"> - <div class="w-sdc-designer-sidebar-section w-sdc-designer-sidebar-section-relations"> - <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content.capabilities" class="w-sdc-designer-sidebar-section-title"> Capabilities - <div class="w-sdc-designer-sidebar-section-title-icon"></div> - </expand-collapse> - </div> - <div class="w-sdc-designer-sidebar-section-content capabilities"> - <expand-collapse expanded-selector=".capabilities-component-instances.{{$index}}" is-close-on-init="true" class="general-tab-expand-collapse" - data-ng-repeat-start="(key, instanceCapabilities) in capabilitiesInstancesMap track by $index"> - <div class="expand-collapse-title second-level"> - <div class="expand-collapse-title-icon"></div> - <span class="expand-collapse-title-text" data-ng-bind="key"></span> - </div> - </expand-collapse> - - <div data-ng-repeat-end="" class="capabilities-component-instances {{$index}}"> - <capabilities-list capabilities="instanceCapabilities"></capabilities-list> - </div> - </div> - - <div class="w-sdc-designer-sidebar-section w-sdc-designer-sidebar-section-relations"> - <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content.requirements" class="w-sdc-designer-sidebar-section-title"> Requirements - <div class="w-sdc-designer-sidebar-section-title-icon"></div> - </expand-collapse> - </div> - <div class="w-sdc-designer-sidebar-section-content requirements"> - <expand-collapse expanded-selector=".requirements-component-instances.{{$index}}" is-close-on-init="true" class="general-tab-expand-collapse" - data-ng-repeat-start="(key, instanceRequirements) in requirementsInstancesMap track by $index"> - <div class="expand-collapse-title second-level"> - <div class="expand-collapse-title-icon"></div> - <span class="expand-collapse-title-text" data-ng-bind="key"></span> - </div> - </expand-collapse> - - <div data-ng-repeat-end="" class="requirements-component-instances {{$index}}"> - <requirements-list component='currentComponent' requirements="instanceRequirements"></requirements-list> - </div> - </div> - </div> -</perfect-scrollbar> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/relations/relations.less b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/relations/relations.less deleted file mode 100644 index c3b224d5a6..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/relations/relations.less +++ /dev/null @@ -1,14 +0,0 @@ -.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; - } - } -} - - diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-consumption/service-consumption-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-consumption/service-consumption-view-model.ts deleted file mode 100644 index 737002303b..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-consumption/service-consumption-view-model.ts +++ /dev/null @@ -1,101 +0,0 @@ -/*! -* Copyright © 2016-2018 European Support Limited -* -* 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. -*/ - - -import {ICompositionViewModelScope} from "../../composition-view-model"; -import { - Service, - PropertiesGroup, - InputsGroup, - ServiceInstanceObject, - InterfaceModel, - InputBEModel, - CapabilitiesGroup, - Capability, - ComponentInstance -} from 'app/models'; -import {ComponentGenericResponse} from "app/ng2/services/responses/component-generic-response"; -import {ServiceServiceNg2} from "app/ng2/services/component-services/service.service"; - -interface IServiceConsumptionViewModelScope extends ICompositionViewModelScope { - service: Service; - instancesMappedList: Array<ServiceInstanceObject>; - componentInstancesProperties: PropertiesGroup; - componentInstancesInputs: InputsGroup; - componentInstancesInterfaces: Map<string, Array<InterfaceModel>>; - componentInputs: Array<InputBEModel>; - componentCapabilities: Array<Capability>; - instancesCapabilitiesMap: Map<string, Array<Capability>>; -} - - -export class ServiceConsumptionViewModel { - - static '$inject' = [ - '$scope', - 'ServiceServiceNg2' - ]; - - constructor(private $scope:IServiceConsumptionViewModelScope, private ServiceServiceNg2:ServiceServiceNg2) { - this.$scope.service = <Service>this.$scope.currentComponent; - this.initInstances(); - this.initScope(); - } - - private initInstances = ():void => { - this.ServiceServiceNg2.getServiceConsumptionData(this.$scope.service).subscribe((genericResponse:ComponentGenericResponse) => { - this.$scope.componentInstancesProperties = genericResponse.componentInstancesProperties; - this.$scope.componentInstancesInputs = genericResponse.componentInstancesInputs; - this.$scope.componentInstancesInterfaces = genericResponse.componentInstancesInterfaces; - this.$scope.componentInputs = genericResponse.inputs; - this.buildInstancesCapabilitiesMap(genericResponse.componentInstances); - this.updateInstanceAttributes(); - }); - } - - buildInstancesCapabilitiesMap = (componentInstances: Array<ComponentInstance>): void => { - this.$scope.instancesCapabilitiesMap = new Map(); - let flattenCapabilities = []; - _.forEach(componentInstances, componentInstance => { - flattenCapabilities = CapabilitiesGroup.getFlattenedCapabilities(componentInstance.capabilities); - this.$scope.instancesCapabilitiesMap[componentInstance.uniqueId] = _.filter(flattenCapabilities, cap => cap.properties && cap.ownerId === componentInstance.uniqueId); - }); - } - - private updateInstanceAttributes = ():void => { - if (this.$scope.isComponentInstanceSelected() && this.$scope.componentInstancesProperties) { - this.$scope.instancesMappedList = this.$scope.service.componentInstances.map(coInstance => new ServiceInstanceObject({ - id: coInstance.uniqueId, - name: coInstance.name, - properties: this.$scope.componentInstancesProperties[coInstance.uniqueId] || [], - inputs: this.$scope.componentInstancesInputs[coInstance.uniqueId] || [], - interfaces: this.$scope.componentInstancesInterfaces[coInstance.uniqueId] || [] - })); - } - } - - private initScope = ():void => { - this.$scope.$watch('currentComponent.selectedInstance', ():void => { - this.updateInstanceAttributes(); - }); - - this.$scope.registerCreateInstanceEvent(() => { - this.initInstances(); - }); - - this.$scope.$on('$destroy', this.$scope.unregisterCreateInstanceEvent); - } -} diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-consumption/service-consumption-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-consumption/service-consumption-view.html deleted file mode 100644 index 8404a7f653..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-consumption/service-consumption-view.html +++ /dev/null @@ -1,23 +0,0 @@ -<perfect-scrollbar class="w-sdc-designer-sidebar-tab-content service-consumption"> - <div class="w-sdc-designer-sidebar-section"> - <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content" - class="w-sdc-designer-sidebar-section-title"> - <span class="w-sdc-designer-sidebar-section-title-text" tooltips tooltip-content="Operation Consumption">Operation Consumption</span> - <div class="w-sdc-designer-sidebar-section-title-icon"></div> - </expand-collapse> - - <div class="w-sdc-designer-sidebar-section-content"> - <div class="i-sdc-designer-sidebar-section-content-item"> - <ng2-service-consumption - [parent-service]="service" - [selected-service]="selectedComponent" - [selected-service-instance-id]="currentComponent.selectedInstance.uniqueId" - [instances-mapped-list]="instancesMappedList" - [parent-service-inputs]="componentInputs" - [instances-capabilities-map]="instancesCapabilitiesMap" - [readonly]="isViewMode() || !isDesigner()"> - </ng2-service-consumption> - </div> - </div> - </div> -</perfect-scrollbar>
\ No newline at end of file diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-dependencies/service-dependencies-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-dependencies/service-dependencies-view-model.ts deleted file mode 100644 index b634e6021f..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-dependencies/service-dependencies-view-model.ts +++ /dev/null @@ -1,125 +0,0 @@ -/*! - * Copyright © 2016-2018 European Support Limited - * - * 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. - */ - - -import {ICompositionViewModelScope} from "../../composition-view-model"; -import {Service, ComponentInstance, PropertiesGroup, ServiceInstanceObject, PropertyBEModel} from 'app/models'; -import {ComponentServiceNg2} from "app/ng2/services/component-services/component.service"; -import {ConstraintObject} from "app/ng2/components/logic/service-dependencies/service-dependencies.component"; -import {ComponentGenericResponse} from 'app/ng2/services/responses/component-generic-response'; -import {DEPENDENCY_EVENTS} from "app/utils/constants"; -import {EventListenerService} from 'app/services'; - -interface IServiceDependenciesViewModelScope extends ICompositionViewModelScope { - service: Service; - selectedInstanceSiblings: Array<ServiceInstanceObject>; - componentInstancesConstraints: Array<any>; - selectedInstanceConstraints: Array<ConstraintObject>; - selectedInstanceProperties: Array<PropertyBEModel>; - updateSelectedInstanceConstraints(constraintsList:Array<ConstraintObject>): void; - loadConstraints(): void; - componentInstanceProperties: PropertiesGroup; - notifyDependencyEventsObserver: Function; -} - - - -export class ServiceDependenciesViewModel { - - static '$inject' = [ - '$scope', - 'ComponentServiceNg2', - 'EventListenerService' - ]; - - constructor(private $scope:IServiceDependenciesViewModelScope, private ComponentServiceNg2:ComponentServiceNg2, private eventListenerService: EventListenerService) { - this.$scope.service = <Service>this.$scope.currentComponent; - this.$scope.notifyDependencyEventsObserver = this.notifyDependencyEventsObserver; - this.initInstancesWithProperties(); - this.loadConstraints(); - - this.initScope(); - } - - private initInstancesWithProperties = ():void => { - this.ComponentServiceNg2.getComponentInstanceProperties(this.$scope.currentComponent).subscribe((genericResponse:ComponentGenericResponse) => { - this.$scope.componentInstanceProperties = genericResponse.componentInstancesProperties; - this.updateInstanceAttributes(); - }); - } - - private updateInstanceAttributes = ():void => { - if (this.$scope.isComponentInstanceSelected() && this.$scope.componentInstanceProperties) { - let instancesMappedList = this.$scope.service.componentInstances.map(coInstance => new ServiceInstanceObject({ - id: coInstance.uniqueId, - name: coInstance.name, - properties: this.$scope.componentInstanceProperties[coInstance.uniqueId] || [] - })); - this.$scope.selectedInstanceProperties = this.$scope.componentInstanceProperties[this.$scope.currentComponent.selectedInstance.uniqueId]; - this.$scope.selectedInstanceSiblings = instancesMappedList.filter(coInstance => coInstance.id !== this.$scope.currentComponent.selectedInstance.uniqueId); - } - } - - private initScope = ():void => { - this.$scope.$watch('currentComponent.selectedInstance', (newInstance:ComponentInstance):void => { - if (angular.isDefined(newInstance) && this.$scope.componentInstancesConstraints) { - this.updateInstanceAttributes(); - this.$scope.selectedInstanceConstraints = this.$scope.componentInstancesConstraints[this.$scope.currentComponent.selectedInstance.uniqueId] ? - this.$scope.componentInstancesConstraints[this.$scope.currentComponent.selectedInstance.uniqueId].properties : - []; - } - }); - this.$scope.$watch('componentInstancesConstraints', (constraints: Array<any>):void => { - if (angular.isDefined(constraints)) { - if(this.$scope.isComponentInstanceSelected()) { - this.$scope.selectedInstanceConstraints = this.$scope.componentInstancesConstraints[this.$scope.currentComponent.selectedInstance.uniqueId] ? - this.$scope.componentInstancesConstraints[this.$scope.currentComponent.selectedInstance.uniqueId].properties || [] : - []; - } - } - }); - - this.$scope.updateSelectedInstanceConstraints = (constraintsList:Array<ConstraintObject>):void => { - this.$scope.componentInstancesConstraints[this.$scope.currentComponent.selectedInstance.uniqueId].properties = constraintsList; - this.$scope.selectedInstanceConstraints = this.$scope.componentInstancesConstraints[this.$scope.currentComponent.selectedInstance.uniqueId].properties; - } - - this.$scope.loadConstraints = ():void => { - this.loadConstraints(); - } - - this.$scope.registerCreateInstanceEvent(() => { - this.initInstancesWithProperties(); - }); - - this.$scope.registerChangeComponentInstanceNameEvent((updatedComponentInstance) => { - this.$scope.currentComponent.selectedInstance = updatedComponentInstance; - }); - - this.$scope.$on('$destroy', this.$scope.unregisterCreateInstanceEvent); - this.$scope.$on('$destroy', this.$scope.unregisterChangeComponentInstanceNameEvent); - } - - private loadConstraints = ():void => { - this.ComponentServiceNg2.getServiceFilterConstraints(this.$scope.service).subscribe((response) => { - this.$scope.componentInstancesConstraints = response.nodeFilterData; - }); - } - - public notifyDependencyEventsObserver = (isChecked: boolean):void => { - this.eventListenerService.notifyObservers(DEPENDENCY_EVENTS.ON_DEPENDENCY_CHANGE, isChecked); - } -}
\ No newline at end of file diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-dependencies/service-dependencies-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-dependencies/service-dependencies-view.html deleted file mode 100644 index ba50994529..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/service-dependencies/service-dependencies-view.html +++ /dev/null @@ -1,25 +0,0 @@ - -<perfect-scrollbar class="w-sdc-designer-sidebar-tab-content service-dependencies"> - <div class="w-sdc-designer-sidebar-section"> - <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content" - class="w-sdc-designer-sidebar-section-title"> - <span class="w-sdc-designer-sidebar-section-title-text" tooltips tooltip-content="Service Dependencies">Service Dependencies</span> - <div class="w-sdc-designer-sidebar-section-title-icon"></div> - </expand-collapse> - <div class="w-sdc-designer-sidebar-section-content" data-ng-if="isComponentInstanceSelected()"> - <div class="i-sdc-designer-sidebar-section-content-item"> - <ng2-service-dependencies - [composite-service]="service" - [current-service-instance]="currentComponent.selectedInstance" - [selected-instance-properties]="selectedInstanceProperties" - [selected-instance-siblings]="selectedInstanceSiblings" - [selected-instance-constraints]="selectedInstanceConstraints" - [readonly]="isViewMode() || !isDesigner()" - (dependency-status)="notifyDependencyEventsObserver($event)" - (update-rules-list-event)="updateSelectedInstanceConstraints($event)" - (load-rules-list-event)="loadConstraints()"> - </ng2-service-dependencies> - </div> - </div> - </div> -</perfect-scrollbar>
\ No newline at end of file diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/structure/structure-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/structure/structure-view.html deleted file mode 100644 index 4d89625e67..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/structure/structure-view.html +++ /dev/null @@ -1,29 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<perfect-scrollbar include-padding="true" class="w-sdc-designer-sidebar-tab-content"> - - <div class="w-sdc-designer-sidebar-section"> - <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content" class="w-sdc-designer-sidebar-section-title"> - Composition - <div class="w-sdc-designer-sidebar-section-title-icon"></div> - </expand-collapse> - - <div class="w-sdc-designer-sidebar-section-content" ng-show="selectedComponent.isComplex()"> - <structure-tree component="selectedComponent"></structure-tree> - </div> - </div> -</perfect-scrollbar> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/structure/structure-view.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/structure/structure-view.ts deleted file mode 100644 index 41f24dc8e8..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/structure/structure-view.ts +++ /dev/null @@ -1,34 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; -import {ICompositionViewModelScope} from "../../composition-view-model"; - -interface IStructureViewModel extends ICompositionViewModelScope { -} - -export class StructureViewModel { - static '$inject' = [ - '$scope' - ]; - - constructor(private $scope:IStructureViewModel) { - } -} diff --git a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-description-popover.html b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-description-popover.html deleted file mode 100644 index 94c28a0796..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-description-popover.html +++ /dev/null @@ -1,39 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<!-- Description Popover --> -<div > - <span data-tests-id='popover-x-button' data-ng-click='closeDescriptionPopover()' class='tlv-sprite tlv-x-btn close-popover-btn'></span> - <div class="w-sdc-form-item" ng-form="descriptionForm" data-ng-class="{error:(descriptionForm.$dirty && descriptionForm.$invalid)}"> - <textarea class="i-sdc-form-textarea {{$index}}" data-ng-class="{'view-mode': isViewMode()}" - data-ng-maxlength="256" - maxlength="256" - data-ng-required="true" - name="description" - data-ng-model="artifact.description" - data-ng-model-options="{ debounce: 200 }" - data-ng-pattern="getValidationPattern('string')" - ng-readonly="isViewMode()" - data-tests-id="description"> - </textarea> - - <div class="input-error" data-ng-show="descriptionForm.$dirty && descriptionForm.$invalid"> - <span ng-show="descriptionForm.$error.required" translate="ADD_ARTIFACT_ERROR_DESCRIPTION_REQUIRED"></span> - <span ng-show="descriptionForm.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span> - <span ng-show="descriptionForm.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> - </div> - </div> -</div> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model.ts deleted file mode 100644 index fc3de6e9e1..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model.ts +++ /dev/null @@ -1,352 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * Modifications Copyright (C) 2019 Nokia. 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========================================================= - */ - -//@require "./*.html" -'use strict'; -import * as _ from "lodash"; -import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model"; -import {ArtifactModel, ArtifactGroupModel, Resource} from "app/models"; -import {ArtifactsUtils, ModalsHandler, ValidationUtils} from "app/utils"; -import {ComponentServiceNg2} from "app/ng2/services/component-services/component.service"; -import {ComponentGenericResponse} from "../../../../ng2/services/responses/component-generic-response"; -import {GenericArtifactBrowserComponent} from "../../../../ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component"; -import {PathsAndNamesDefinition} from "../../../../models/paths-and-names"; -import {ModalService as ModalServiceSdcUI} from "sdc-ui/lib/angular/modals/modal.service"; -import {IModalConfig} from "sdc-ui/lib/angular/modals/models/modal-config"; -import {CacheService} from "../../../../services/cache-service"; -import {GabConfig} from "../../../../models/gab-config"; - -interface IDeploymentArtifactsViewModelScope extends IWorkspaceViewModelScope { - tableHeadersList:Array<any>; - reverse:boolean; - sortBy:string; - artifacts:Array<ArtifactModel>; - editForm:ng.IFormController; - isLoading:boolean; - artifactDescriptions:any; - selectedArtifactId:string; - popoverTemplate:string; - - addOrUpdate(artifact:ArtifactModel):void; - updateSelectedArtifact():void; - delete(artifact: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:ArtifactModel):void; - getEnvArtifact(heatArtifact:ArtifactModel):ArtifactModel; - getEnvArtifactName(artifact:ArtifactModel):string; - openEditEnvParametersModal(artifact:ArtifactModel):void; - openDescriptionPopover(artifactId:string):void; - closeDescriptionPopover():void; -} - -export class DeploymentArtifactsViewModel { - - static '$inject' = [ - '$scope', - '$templateCache', - '$filter', - 'Sdc.Services.CacheService', - 'ValidationUtils', - 'ArtifactsUtils', - 'ModalsHandler', - 'ComponentServiceNg2', - 'ModalServiceSdcUI' - ]; - - constructor(private $scope:IDeploymentArtifactsViewModelScope, - private $templateCache:ng.ITemplateCacheService, - private $filter:ng.IFilterService, - private cacheService:CacheService, - private validationUtils:ValidationUtils, - private artifactsUtils:ArtifactsUtils, - private ModalsHandler:ModalsHandler, - private ComponentServiceNg2: ComponentServiceNg2, - private ModalServiceSdcUI: ModalServiceSdcUI) { - this.initScope(); - } - - private initDescriptions = ():void => { - this.$scope.artifactDescriptions = {}; - _.forEach(this.$scope.component.deploymentArtifacts, (artifact:ArtifactModel):void => { - this.$scope.artifactDescriptions[artifact.artifactLabel] = artifact.description; - }); - }; - - private setArtifact = (artifact:ArtifactModel):void => { - if (!artifact.description || !this.$scope.getValidationPattern('string').test(artifact.description)) { - artifact.description = this.$scope.artifactDescriptions[artifact.artifactLabel]; - } - }; - - private initScopeArtifacts = ()=> { - this.$scope.artifacts = <ArtifactModel[]>_.values(this.$scope.component.deploymentArtifacts); - _.forEach(this.$scope.artifacts, (artifact:ArtifactModel):void => { - artifact.envArtifact = this.getEnvArtifact(artifact); - }); - }; - - private initArtifacts = (loadFromServer:boolean):void => { - if (loadFromServer) { - this.$scope.isLoading = true; - this.ComponentServiceNg2.getComponentDeploymentArtifacts(this.$scope.component).subscribe((response:ComponentGenericResponse) => { - this.$scope.component.deploymentArtifacts = response.deploymentArtifacts; - this.initScopeArtifacts(); - this.$scope.isLoading = false; - }); - } else { - this.initScopeArtifacts(); - } - - }; - - private getEnvArtifact = (heatArtifact:ArtifactModel):ArtifactModel=> { - return _.find(this.$scope.artifacts, (item:ArtifactModel)=> { - return item.generatedFromId === heatArtifact.uniqueId; - }); - }; - - private getCurrentArtifact = ():ArtifactModel => { - if (!this.$scope.selectedArtifactId) { - return null; - } - let artifact:ArtifactModel = this.$scope.artifacts.filter((art) => { - return art.uniqueId == this.$scope.selectedArtifactId; - })[0]; - return artifact; - } - - private initScope = ():void => { - let self = this; - this.$scope.isLoading = false; - this.$scope.selectedArtifactId = null; - this.initDescriptions(); - if(this.$scope.component.deploymentArtifacts) { - this.initArtifacts(false); - } else { - this.initArtifacts(true); - } - this.$scope.setValidState(true); - - this.$scope.tableHeadersList = [ - {title: 'Name', property: 'artifactDisplayName'}, - {title: 'Type', property: 'artifactType'}, - {title: 'Deployment timeout', property: 'timeout'}, - {title: 'Version', property: 'artifactVersion'}, - {title: 'UUID', property: 'artifactUUID'} - ]; - - this.$templateCache.put("deployment-artifacts-description-popover.html", require('app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-description-popover.html')); - this.$scope.popoverTemplate = "deployment-artifacts-description-popover.html"; - - this.$scope.isLicenseArtifact = (artifact:ArtifactModel):boolean => { - let isLicense:boolean = false; - if (this.$scope.component.isResource() && (<Resource>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() && (<Resource>this.$scope.component).isCsarComponent()); - }; - - this.$scope.addOrUpdate = (artifact:ArtifactModel):void => { - artifact.artifactGroupType = 'DEPLOYMENT'; - let artifactCopy = new ArtifactModel(artifact); - - let success = (response:any):void => { - this.$scope.artifactDescriptions[artifactCopy.artifactLabel] = artifactCopy.description; - this.initArtifacts(true); - // this.$scope.artifacts = _.values(this.$scope.component.deploymentArtifacts); - }; - - let error = (err:any):void => { - console.log(err); - this.initArtifacts(true); - // self.$scope.artifacts = _.values(self.$scope.component.deploymentArtifacts); - }; - - this.ModalsHandler.openArtifactModal(artifactCopy, this.$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.updateSelectedArtifact = ():void => { - if (!this.$scope.isViewMode() && !this.$scope.isLoading) { - let artifact:ArtifactModel = this.getCurrentArtifact(); - this.setArtifact(artifact); //resets artifact description to original value if invalid. - if (artifact && artifact.originalDescription != artifact.description) { - this.$scope.isLoading = true; - let onSuccess = (responseArtifact:ArtifactModel):void => { - this.$scope.artifactDescriptions[responseArtifact.artifactLabel] = responseArtifact.description; - // this.$scope.artifacts = _.values(this.$scope.component.deploymentArtifacts); - this.initArtifacts(true); - this.$scope.isLoading = false; - }; - - let onFailed = (error:any):void => { - console.log('Delete artifact returned error:', error); - this.$scope.isLoading = false; - }; - - this.$scope.component.addOrUpdateArtifact(artifact).then(onSuccess, onFailed); - } - } - }; - - this.$scope.delete = (artifact:ArtifactModel):void => { - let onOk = ():void => { - this.$scope.isLoading = true; - let onSuccess = ():void => { - this.$scope.isLoading = false; - this.initArtifacts(true); - //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); - }; - - this.$scope.getEnvArtifactName = (artifact:ArtifactModel):string => { - let envArtifact = this.$scope.getEnvArtifact(artifact); - if (envArtifact) { - return envArtifact.artifactDisplayName; - } - }; - - this.$scope.openGenericArtifactBrowserModal = (artifact:ArtifactModel):void => { - let self = this; - const title = 'Generic Artifact Browser'; - let modalConfig: IModalConfig = { - size: 'xl', - title: title, - type: 'custom', - buttons: [{ - id: 'closeGABButton', - text: 'Close', - size: "'x-small'", - closeModal: true - }] - }; - - const uiConfiguration: any = this.cacheService.get('UIConfiguration'); - let noConfig: boolean = false; - let pathsandnames: PathsAndNamesDefinition[] = []; - - if(typeof uiConfiguration.gab === 'undefined') { - noConfig = true; - } else { - const gabConfig: GabConfig = uiConfiguration.gab - .find(config => config.artifactType === artifact.artifactType); - if(typeof gabConfig === 'undefined') { - noConfig = true; - } else { - pathsandnames = gabConfig.pathsAndNamesDefinitions; - } - } - - if(noConfig) { - const msg = self.$filter('translate')("DEPLOYMENT_ARTIFACT_GAB_NO_CONFIG"); - this.ModalServiceSdcUI.openAlertModal(title, msg); - } - - const modalInputs = { - pathsandnames: pathsandnames, - artifactid: artifact.esId, - resourceid: this.$scope.component.uniqueId - }; - - this.ModalServiceSdcUI.openCustomModal(modalConfig, GenericArtifactBrowserComponent, modalInputs); - }; - - this.$scope.openEditEnvParametersModal = (artifact:ArtifactModel):void => { - this.ModalsHandler.openEditEnvParametersModal(artifact, this.$scope.component).then(()=> { - this.initArtifacts(true); - }, ()=> { - this.initArtifacts(true); - }); - }; - - this.$scope.openDescriptionPopover = (artifactId:string):void => { - if (this.$scope.selectedArtifactId && this.$scope.selectedArtifactId != artifactId) { - this.$scope.updateSelectedArtifact(); - } - this.$scope.selectedArtifactId = artifactId; - - }; - - this.$scope.closeDescriptionPopover = ():void => { - if (this.$scope.selectedArtifactId) { - this.$scope.updateSelectedArtifact(); - this.$scope.selectedArtifactId = null; - } - }; - }; -} diff --git a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view.html b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view.html deleted file mode 100644 index a26bcdeccd..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view.html +++ /dev/null @@ -1,147 +0,0 @@ -<!-- - ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved. - ~ Modifications Copyright (C) 2019 Nokia. 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. ---> - -<div class="workspace-deployment-artifact"> - - <div data-tests-id="add-deployment-artifact-button" ng-if="!isViewMode()" data-ng-class="{'disabled': isDisableMode()}" data-tests-id="add-property-button" class="add-btn" data-ng-click="addOrUpdate({})">Add</div> - - <div class="table-container-flex"> - - <div class="table" data-ng-class="{'view-mode': isViewMode()}"> - <loader data-display="isLoading"></loader> - <div class="head flex-container"> - <div class="table-header head-row hand flex-item" data-ng-repeat="header in tableHeadersList track by $index" data-ng-click="sort(header.property)">{{header.title}} - <span data-ng-if="sortBy === header.property" class="table-header-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"> </span> - </div> - <div class="table-no-text-header head-row flex-item"></div> - </div> - - <form class="body" name="editForm"> - - <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container"> - - <!-- Artifact row --> - <div ng-if="noArtifactsToShow()" data-ng-class="{'disabled': isDisableMode()}" class="no-row-text" translate="DEPLOYMENT_ARTIFACT_NO_ARTIFACTS_TO_DISPLAY"></div> - <div data-ng-repeat-start="artifact in artifacts | orderBy:sortBy:reverse track by $index" - class="flex-container data-row" - data-ng-class="{'selected': selectedArtifactId == artifact.uniqueId }" - data-ng-if="artifact.esId && 'HEAT_ENV' !== artifact.artifactType" - data-tests-id="artifact-item-{{artifact.artifactDisplayName}}"> - <div class="table-col-general flex-item" > - <div class="heat-env-connect-container" ng-class="{'heat-env-connect-container-view-mode': isViewMode()}" data-ng-if="artifact.envArtifact"> - <span class="heat-env-connect"></span> - </div> - <span data-tests-id="artifactDisplayName_{{artifact.artifactDisplayName}}" class="artifact-name text" tooltips tooltip-content="{{artifact.artifactDisplayName}}">{{artifact.artifactDisplayName}}</span> - - <span class="sprite-new show-desc hand description-popover-icon" - uib-popover-template="popoverTemplate" - popover-class="parameter-description-popover deployment-artifact-view top" - popover-title="Description" - popover-placement="auto top-left" - popover-is-open="selectedArtifactId == artifact.uniqueId && !isLoading" - popover-trigger="'none'" - popover-append-to-body="false" - data-ng-click="openDescriptionPopover(artifact.uniqueId)" - data-tests-id="descriptionIcon_{{artifact.artifactDisplayName}}"></span> - </div> - - <div class="table-col-general flex-item text" data-tests-id="artifactType_{{artifact.artifactDisplayName}}" tooltips tooltip-content="{{artifact.artifactType}}"> - {{artifact.artifactType}} - </div> - <div class="table-col-general flex-item" data-tests-id="timeout_{{artifact.artifactDisplayName}}"> - {{artifact.timeout? artifact.timeout:''}} - </div> - <div class="table-col-general flex-item" data-tests-id="artifactVersion_{{artifact.artifactDisplayName}}"> - {{artifact.artifactVersion}} - </div> - <div class="table-col-general flex-item text" data-tests-id="artifactUUID_{{artifact.artifactDisplayName}}" tooltips tooltip-content="{{artifact.artifactUUID}}"> - <span>{{artifact.artifactUUID}}</span> - </div> - - <div class="table-btn-col flex-item"> - <button class="table-edit-btn" data-tests-id="edit_{{artifact.artifactDisplayName}}" - data-ng-if="!isViewMode() && !artifact.isHEAT() && !artifact.isThirdParty() && !isLicenseArtifact(artifact)" data-ng-click="addOrUpdate(artifact)"></button> - <button class="table-delete-btn" data-tests-id="delete_{{artifact.artifactDisplayName}}" - data-ng-if="!isViewMode() && !artifact.isHEAT() && !artifact.isThirdParty() && !isLicenseArtifact(artifact)" data-ng-click="delete(artifact)"> </button> - <button class="table-download-btn" download-artifact data-tests-id="download_{{artifact.artifactDisplayName}}" - data-ng-if="artifact.artifactDisplayName" component="component" artifact="artifact"></button> - <button ng-if="artifact.isGenericBrowseable()" - class="table-magnifier-btn" - data-ng-click="openGenericArtifactBrowserModal(artifact)" component="component" artifact="artifact" - data-tests-id="gab-{{artifact.artifactDisplayName}}"></button> - <button ng-if="!isViewMode() && artifact.isHEAT()" - class="sprite e-sdc-small-icon-pad edit-paramtes-button" - data-ng-click="openEditEnvParametersModal(artifact)" type="button" - data-tests-id="edit-parameters-of-{{artifact.artifactDisplayName}}"></button> - </div> - </div> - <div data-ng-repeat-end="" class="flex-container data-row" data-ng-if="artifact.envArtifact"> - - <div class="table-col-general flex-item" zzdata-ng-click="!isViewMode() && addOrUpdate(artifact.envArtifact)"> - <span>{{artifact.envArtifact.artifactDisplayName}}</span> - </div> - - <div class="table-col-general flex-item" data-tests-id="{{artifact.envArtifact.artifactType}}"> - {{artifact.envArtifact.artifactType}} - </div> - <div class="table-col-general flex-item" data-tests-id="{{artifact.envArtifact.timeout}}"> - {{artifact.envArtifact.timeout? artifact.envArtifact.timeout:''}} - </div> - <div class="table-col-general flex-item" data-tests-id="artifactEnvVersion_{{artifact.artifactDisplayName}}"> - {{artifact.envArtifact.artifactVersion}} - </div> - <div class="table-col-general flex-item text" data-tests-id="{{artifact.envArtifact.artifactUUID}}" tooltips tooltip-content="{{artifact.envArtifact.artifactUUID}}"> - <span>{{artifact.envArtifact.artifactUUID}}</span> - </div> - - - <div class="table-btn-col flex-item" > - <button class="table-edit-btn" data-tests-id="edit_{{artifact.artifactLabel}}env" - data-ng-if="!isViewMode()" data-ng-click="addOrUpdate(artifact.envArtifact)"></button> - <button class="table-download-btn" data-tests-id="download_env_{{artifact.artifactDisplayName}}" download-artifact - data-ng-if="artifact.artifactName" component="component" artifact="artifact.envArtifact"></button> - - </div> - </div> - - <!--<div class="i-sdc-designer-sidebar-section-content-item-artifact-heat-env" ng-if="artifact.heatParameters.length">--> - <!--<span class="enabled" data-ng-bind="getEnvArtifactName(artifact)" data-ng-click="!isViewMode() && addOrUpdate(getEnvArtifact(artifact))"></span>--> - <!--<download-artifact class="i-sdc-designer-sidebar-section-content-item-button download-env sprite e-sdc-small-download hand" artifact="getEnvArtifact(artifact)"--> - <!--component="currentComponent" instance="true"--> - <!--data-tests-id="download"></download-artifact>--> - <!--</div>--> - - - - <!-- Add artifacts buttons --> - <!--<button class="add-button" data-ng-repeat="artifact in artifacts track by $index"--> - <!--type="button"--> - <!--data-ng-show="!artifact.esId"--> - <!--data-ng-if="!viewModeOrCsarComponent()"--> - <!--data-ng-class="{'disabled': isDisableMode() || component.isCsarComponent()}"--> - <!--data-tests-id="{{artifact.artifactDisplayName}} deployment_artifact"--> - <!--translate="DEPLOYMENT_ARTIFACT_BUTTON_ADD_HEAT"--> - <!--translate-values="{'name': '{{artifact.artifactDisplayName}}'}"--> - <!--data-ng-click="addOrUpdate(artifact)"></button>--> - - <!-- Top add button --> - <button class="add-button" type="button" data-ng-if="!isViewMode()" data-ng-class="{'disabled': isDisableMode()}" translate="DEPLOYMENT_ARTIFACT_BUTTON_ADD_OTHER" data-ng-click="addOrUpdate({})"></button> - </perfect-scrollbar> - </form> - </div> - </div> -</div> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less deleted file mode 100644 index f67d088b5a..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less +++ /dev/null @@ -1,201 +0,0 @@ -.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; - } - - - .heat-env-connect-container{ - background-color: white; - position: absolute; - height: 70px; - width:20px; - left: 0; - top:0; - } - .heat-env-connect-container-view-mode{ - background-color: @tlv_color_t; - } - .heat-env-connect{ - border-left: 1px #848586 solid; - height: 50px; - margin-left: 10px; - margin-top: 10px; - border-top: 1px #848586 solid; - border-bottom: 1px #848586 solid; - width: 11px; - float: left; - - } - - .artifact-name{ - width:85%; - } - - .table-container-flex .table .body .data-row div .heat-env-connect-container{ - border-right: none; - } - - .i-sdc-designer-sidebar-section-content-item-file-link::before{ - content:""; - background-color: white; - width: 12px; - - } - - - - .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: 0; - - .text{ - overflow: hidden; - text-overflow: ellipsis; - display: inline-block; - white-space: nowrap; - } - - .flex-item:nth-child(1) { - flex-grow: 15; - .hand; - padding-left: 30px; - position: relative; - span.table-arrow { - margin-right: 7px; - } - .description-popover-icon{ - float:right; - margin-top:6px; - } - } - - .flex-item:nth-child(2) { - flex-grow: 6; - } - - .flex-item:nth-child(3) { - flex-grow: 9; - } - - .flex-item:nth-child(4) { - flex-grow: 3; - } - - .flex-item:nth-child(5) { - flex-grow: 20; - } - - .flex-item:nth-child(6) { - flex-grow: 5; - - &.table-btn-col { - display: flex; - justify-content: space-between; - align-items: center; - - button { - flex: 0 1 auto; - background-color: transparent; - border: 0; - margin: 0; - } - .edit-paramtes-button { - order: -1; - } - } - } - } - .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-opensans-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; - } - } - } -} - -.table-container-flex .table .body .scrollbar-container { - overflow-x:auto !important; //need to override the overflow-hidden for the table so that the popover auto positioning works - min-height: 400px; -} - -.parameter-description-popover.deployment-artifact-view { - margin-left: -22px; - z-index: 1040; - min-width: 300px; - .input-error { - .q_12_m; - } - .error textarea{ - border-color: @main_color_g; - color: @color_h; - outline: none; - } - .popover-content textarea { - width:100%; - } -} diff --git a/catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment-view-model.ts deleted file mode 100644 index 9df377c5fc..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment-view-model.ts +++ /dev/null @@ -1,146 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; -import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model"; -import {ComponentFactory, MenuHandler, ChangeLifecycleStateHandler, ModalsHandler} from "app/utils"; -import {LeftPaletteLoaderService, CacheService, SharingService} from "app/services"; -import {Component, IAppMenu, Tab, ComponentInstance} from "app/models"; -import {GRAPH_EVENTS} from "../../../../utils/constants"; -import {ComponentGenericResponse} from "../../../../ng2/services/responses/component-generic-response"; -import {EventListenerService} from "../../../../services/event-listener-service"; -import {ComponentServiceNg2} from "../../../../ng2/services/component-services/component.service"; - -export interface IDeploymentViewModelScope extends IWorkspaceViewModelScope { - - currentComponent:Component; - selectedComponent:Component; - isLoading:boolean; - sharingService:SharingService; - sdcMenu:IAppMenu; - version:string; - isViewOnly:boolean; - tabs:Array<Tab>; - selectedTab: Tab; - isComponentInstanceSelected():boolean; - updateSelectedComponent():void - openUpdateModal(); - deleteSelectedComponentInstance():void; - onBackgroundClick():void; - setSelectedInstance(componentInstance:ComponentInstance):void; - printScreen():void; - -} - -export class DeploymentViewModel { - - static '$inject' = [ - '$scope', - '$templateCache', - 'sdcMenu', - 'MenuHandler', - '$state', - 'Sdc.Services.SharingService', - '$filter', - 'Sdc.Services.CacheService', - 'ComponentFactory', - 'ChangeLifecycleStateHandler', - 'LeftPaletteLoaderService', - 'ModalsHandler', - 'EventListenerService', - 'ComponentServiceNg2' - ]; - - constructor(private $scope:IDeploymentViewModelScope, - private $templateCache:ng.ITemplateCacheService, - private sdcMenu:IAppMenu, - private MenuHandler:MenuHandler, - private $state:ng.ui.IStateService, - private sharingService:SharingService, - private $filter:ng.IFilterService, - private cacheService:CacheService, - private ComponentFactory:ComponentFactory, - private ChangeLifecycleStateHandler:ChangeLifecycleStateHandler, - private LeftPaletteLoaderService:LeftPaletteLoaderService, - private ModalsHandler:ModalsHandler, - private eventListenerService: EventListenerService, - private ComponentServiceNg2: ComponentServiceNg2) { - - this.$scope.setValidState(true); - this.initScope(); - this.initGraphData(); - } - - - 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.modules) { - this.$templateCache.put("hierarchy-view.html", require('app/view-models/tabs/hierarchy/hierarchy-view.html')); - let hierarchyTab = new Tab("hierarchy-view.html", 'Sdc.ViewModels.HierarchyViewModel', 'hierarchy', this.$scope.isViewMode(), this.$scope.currentComponent, 'hierarchy'); - this.$scope.tabs.push(hierarchyTab) - } - } - - private initGraphData = ():void => { - if(!this.$scope.component.componentInstances || !this.$scope.component.componentInstancesRelations || !this.$scope.component.modules) { - this.ComponentServiceNg2.getDeploymentGraphData(this.$scope.component).subscribe((response:ComponentGenericResponse) => { - this.$scope.component.componentInstances = response.componentInstances; - this.$scope.component.componentInstancesRelations = response.componentInstancesRelations; - this.$scope.component.modules = response.modules; - this.$scope.isLoading = false; - this.initComponent(); - this.initRightTabs(); - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DEPLOYMENT_GRAPH_DATA_LOADED); - this.$scope.selectedTab = this.$scope.tabs[0]; - }); - } else { - this.$scope.isLoading = false; - this.initRightTabs(); - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DEPLOYMENT_GRAPH_DATA_LOADED); - - } - }; - - private initScope = ():void => { - this.$scope.isLoading = true; - this.$scope.sharingService = this.sharingService; - this.$scope.sdcMenu = this.sdcMenu; - this.$scope.version = this.cacheService.get('version'); - this.initComponent(); - this.$scope.tabs = Array<Tab>(); - } -} diff --git a/catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment-view.html b/catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment-view.html deleted file mode 100644 index aae03135a3..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment-view.html +++ /dev/null @@ -1,26 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<div class="deployment-view"> - <loader display="isLoading"></loader> - <div class="w-sdc-deployment-canvas" data-ng-class="{sidebaractive: displayDesignerRightSidebar}"> - <deployment-graph component="currentComponent" is-view-only="isViewOnly"></deployment-graph> - </div> - - <div class="w-sdc-deployment-right-bar"> - <ng1-tabs tabs="tabs" is-view-only="isViewOnly" selected-tab="selectedTab"></ng1-tabs> - </div> -</div> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment.less b/catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment.less deleted file mode 100644 index f51ff6220d..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment.less +++ /dev/null @@ -1,34 +0,0 @@ -.deployment-view { - - display: inline-block; - text-align: left; - align-items: left; - padding: 0; - width: 100%; - height: 100%; - - .w-sdc-deployment-canvas { - .noselect; - .bg_c; - position: relative; - bottom: 0; - width: 100%; - height: 100%; - z-index: 0; - - .view-mode{ - background-color: #f8f8f8; - border:0; - } - } - - .w-sdc-deployment-right-bar { - - .noselect; - bottom: 0; - position: absolute; - right: 0px; - transition: right 0.2s; - top: @action_nav_height; - } -} diff --git a/catalog-ui/src/app/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view-model.ts deleted file mode 100644 index eab06f28e8..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view-model.ts +++ /dev/null @@ -1,104 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; -import * as _ from "lodash"; -import {Distribution, DistributionComponent, ExportExcel} from "app/models"; - -interface IDistributionStatusModalViewModelScope { - distribution:Distribution; - status:string; - getStatusCount(distributionComponent:Array<DistributionComponent>):any; - getUrlName(url:string):string; - modalDitributionStatus:ng.ui.bootstrap.IModalServiceInstance; - footerButtons:Array<any>; - //exportExcelData:ExportExcel; - close():void; - initDataForExportExcel():ExportExcel; -} - -export class DistributionStatusModalViewModel { - - static '$inject' = ['$scope', '$uibModalInstance', 'data', '$filter']; - - constructor(private $scope:IDistributionStatusModalViewModelScope, - private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance, - private data:any, - private $filter:ng.IFilterService) { - this.initScope(); - } - - private generateMetaDataForExportExcel = ():Array<string>=> { - let metaData = []; - metaData[0] = 'Name:' + this.data.component.name + '| UUID:' + this.data.component.uuid + '| Invariant UUID:' + this.data.component.invariantUUID; - metaData[1] = 'Distribution ID:' + this.$scope.distribution.distributionID + - '| USER ID:' + this.$scope.distribution.userId + - '| Time[UTC]:' + this.$filter('date')(this.$scope.distribution.timestamp, 'MM/dd/yyyy h:mma', 'UTC') + - '| Status:' + this.$scope.distribution.deployementStatus; - return metaData; - }; - - private generateDataObjectForExportExcel = ():any=> { - let correctFormatDataObj = []; - _.each(this.$scope.distribution.distributionComponents, (dComponent:DistributionComponent) => { - if (dComponent.status == this.$scope.status) { - correctFormatDataObj.push({ - 'omfComponentID': dComponent.omfComponentID, - 'artiFactName': this.$scope.getUrlName(dComponent.url), - 'url': dComponent.url, - 'timestamp': this.$filter('date')(dComponent.timestamp, 'MM/dd/yyyy h:mma', 'UTC'), - 'status': dComponent.status - }); - } - }); - return correctFormatDataObj; - }; - - private initScope = ():void => { - this.$scope.distribution = this.data.distribution; - this.$scope.status = this.data.status; - this.$scope.modalDitributionStatus = this.$uibModalInstance; - - - this.$scope.getUrlName = (url:string):string => { - let urlName:string = _.last(url.split('/')); - return urlName; - }; - - this.$scope.initDataForExportExcel = ():ExportExcel => { - let exportExcelData = new ExportExcel(); - exportExcelData.fileName = this.$scope.status; - exportExcelData.groupByField = "omfComponentID"; - exportExcelData.tableHeaders = ["Component ID", "Artifact Name", "URL", "Time(UTC)", "Status"]; - exportExcelData.metaData = this.generateMetaDataForExportExcel(); - exportExcelData.dataObj = this.generateDataObjectForExportExcel(); - return exportExcelData; - }; - - this.$scope.close = ():void => { - this.$uibModalInstance.close(); - }; - - this.$scope.footerButtons = [ - {'name': 'Close', 'css': 'blue', 'callback': this.$scope.close} - ]; - - }; -} diff --git a/catalog-ui/src/app/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view.html b/catalog-ui/src/app/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view.html deleted file mode 100644 index 0e58959e9a..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view.html +++ /dev/null @@ -1,146 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<ng1-modal modal="modalDitributionStatus" type="classic" class="w-sdc-classic-top-line-modal" buttons="footerButtons" header="Distribution by Status" show-close-button="true"> - - <div class="w-sdc-distribution-view"> - <div class="w-sdc-distribution-view-header"> - - </div> - - <div class="actions-buttons"> - <json-export-excel init-export-excel-data="initDataForExportExcel()"> - </json-export-excel> - </div> - - <perfect-scrollbar include-padding="true" class="w-sdc-distribution-view-content"> - <div class="w-sdc-distribution-view-content-section w-sdc-distribute-parent-block"> - <ul> - <li class="w-sdc-distribute-parent-block" > - <div class="w-sdc-distribute-row w-sdc-distribute-row-extends extends"> - - <div class="w-sdc-distribute-row-content"> - <div class="w-sdc-distribute-content"> - <div class="title-section item-1"> - <div class="title">Distribution ID</div> - <div data-ng-bind="distribution.distributionID"></div> - </div> - <div class="title-section item-2"> - <div class="title" translate="DISTRIBUTION_VIEW_TITLE_USER_ID"></div> - <div data-ng-bind="distribution.userId"></div> - </div> - <div class="title-section item-3"> - <div class="title">Time[UTC]:</div> - <div - data-ng-bind="distribution.timestamp | stringToDateFilter | date: 'MM/dd/yyyy h:mma':'UTC'"></div> - </div> - <div class="title-section item-4"> - <span class="sprite-new status-icon" data-ng-class="distribution.deployementStatus"></span> - <span class="sprite-new" data-ng-bind="distribution.deployementStatus"></span> - </div> - </div> - <div class="w-sdc-distribute-status-block" data-ng-show="distribution.statusCount"> - <div class="status-item-1">Status: {{status}} <span data-ng-bind="(distribution.distributionComponents | filter:status:true).length" - class="blue-font"></span></div> - - </div> - </div> - </div> - - <ul class="w-sdc-distribute-components-block disable-hover"> - <li data-ng-repeat="(omfComponentID,omfComponentList) in distribution.distributionComponents | orderBy: '-timestamp' | filter:status:true | groupBy:'omfComponentID'" - class="disable-hover"> - <div class="w-sdc-distribute-row omf-component-row w-sdc-distribute-row-extends " - data-ng-class="{'extends': omfComponentListExtends}"> - <div class="w-sdc-distribution-arrow-btn" data-ng-click="omfComponentListExtends=!omfComponentListExtends" - ng-class="{'extends': omfComponentListExtends}" - data-ng-init="omfComponentListExtends=false" - ></div> - <div class="w-sdc-distribute-status-block"> - <div class="status-item-1">{{omfComponentID}} <span class="blue-font">{{omfComponentList.length}}</span> - </div> - </div> - </div> - <div data-ng-show="omfComponentListExtends" - class="w-sdc-distribute-omfComponent-block disable-hover"> - <div class="w-sdc-distribute-row-extends disable-hover"> - <div class="disable-hover"> - <div class="w-sdc-distribute-row omfComponent-table-head"> - <div class="title item-1">Component ID</div> - <div class="title item-2">Artifact Name</div> - <div class="title item-3">URL</div> - <div class="title item-4">Time(UTC)</div> - <div class="title item-5">Status</div> - </div> - - <div class="w-sdc-distribute-row omfComponent-table-row" - data-ng-repeat-start="(url,urlList) in omfComponentList | orderBy: '-timestamp' | groupBy:'url'" - data-ng-class="urlListExtends?'extends row-{{$index}}':'row-{{$index}}'" > - <div class="w-sdc-distribute-cell item-1"> - <div class="w-sdc-distribution-arrow-btn" data-ng-click="urlListExtends=!urlListExtends" - data-ng-class="{'extends': urlListExtends}" - data-ng-init="urlListListExtends=false" - ></div> - {{urlList[0].omfComponentID}} - </div> - <div class="w-sdc-distribute-cell item-2" sdc-smart-tooltip> - {{getUrlName(urlList[0].url)}} - </div> - <div class="w-sdc-distribute-cell item-3 disable-hover"> - <div sdc-smart-tooltip class="distribution-url">{{urlList[0].url}}</div> - <div sdc-smart-tooltip title="Copy url" clipboard text="urlList[0].url" - class="sprite-new link-btn copy-link disable-hover"></div> - </div> - <div class="w-sdc-distribute-cell item-4"><span - data-ng-bind="urlList[0].timestamp | date: 'MM/dd/yyyy h:mma':'UTC'"></span> - </div> - <div class="w-sdc-distribute-cell item-5">{{urlList[0].status}}</div> - </div> - - - <div data-ng-repeat-end data-ng-show="urlListExtends" class="disable-hover"> - <div class="w-sdc-distribute-row extends disable-hover"> - <ul data-ng-show="urlListExtends" - class="w-sdc-distribute-url-block disable-hover"> - <li data-ng-repeat="distributionComponent in urlList | orderBy: '-timestamp'" - class="disable-hover"> - <span - data-ng-bind="distributionComponent.timestamp | date: 'MM/dd/yyyy h:mma':'UTC'" - class="disable-hover"></span> - <span - class="disable-hover">{{distributionComponent.status}}</span> - <span - class="disable-hover reason" data-ng-show="distributionComponent.status == 'NOT_NOTIFIED'">Reason: Component has determined artifact is not needed.</span> - <span - class="disable-hover reason" data-ng-show="distributionComponent.errorReason">Reason: {{distributionComponent.errorReason}}</span> - </li> - </ul> - </div> - </div> - </div> - </div> - </div> - </li> - </ul> - </li> - </ul> - </div> - - </perfect-scrollbar> - </div> - - -</ng1-modal> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal.less b/catalog-ui/src/app/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal.less deleted file mode 100644 index d167083a2b..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal.less +++ /dev/null @@ -1,40 +0,0 @@ -.w-sdc-classic-top-line-modal { - - .w-sdc-modal-head { - // border-bottom: none; - } - .w-sdc-distribution-view { - .actions-buttons { - height: 29px; - padding: 0 25px 0 0px; - span{ - float: right; - } - } - - .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/src/app/view-models/workspace/tabs/distribution/distribution-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/distribution/distribution-view-model.ts deleted file mode 100644 index 47ec1fd9e3..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/distribution/distribution-view-model.ts +++ /dev/null @@ -1,131 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; -import * as _ from "lodash"; -import {Distribution, DistributionComponent, Service} from "app/models"; -import {ModalsHandler, Dictionary} from "app/utils"; -import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model"; - -interface IDistributionViewModel extends IWorkspaceViewModelScope { - modalDistribution:ng.ui.bootstrap.IModalServiceInstance; - service:Service; - distributions:Array<Distribution>; - showComponents(distribution:Distribution):void; - markAsDeployed(distribution:Distribution):void; - getStatusCount(distributionComponent:Array<DistributionComponent>):any; - initDistributions():void; - getUrlName(url:string):string; - close():void; - openDisributionStatusModal:Function; -} - -export class DistributionViewModel { - - static '$inject' = [ - '$scope', - 'ModalsHandler' - - ]; - - constructor(private $scope:IDistributionViewModel, - private ModalsHandler:ModalsHandler) { - this.initScope(); - this.$scope.setValidState(true); - } - - private initScope = ():void => { - this.$scope.service = <Service>this.$scope.component; - - - // Open Distribution status modal - this.$scope.openDisributionStatusModal = (distribution:Distribution, status:string):void => { - this.ModalsHandler.openDistributionStatusModal(distribution, status, this.$scope.component).then(()=> { - // OK - }, ()=> { - // ERROR - }); - }; - - - this.$scope.showComponents = (distribution:Distribution):void => { - let onError = (response) => { - console.info('onError showComponents', response); - }; - let onSuccess = (distributionComponents:Array<DistributionComponent>) => { - 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<DistributionComponent>):any => { - return _.countBy(distributionComponent, 'status') - }; - - this.$scope.getUrlName = (url:string):string => { - let urlName:string = _.last(url.split('/')); - return urlName; - }; - - this.$scope.markAsDeployed = (distribution: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<Distribution>) => { - this.$scope.distributions = distributions; - }; - this.$scope.service.getDistributionsList().then(onSuccess, onError); - }; - - this.$scope.initDistributions(); - - }; - - - private aggregateDistributionComponent = (distributionComponents:Array<DistributionComponent>):any => { - let aggregateDistributions:Dictionary<string,Dictionary<string,Array<DistributionComponent>>> = new Dictionary<string,Dictionary<string,Array<DistributionComponent>>>(); - let tempAggregateDistributions:any = _.groupBy(distributionComponents, 'omfComponentID'); - let aa = new Dictionary<string,Array<DistributionComponent>>(); - - let tempAggregate:any; - _.forEach(tempAggregateDistributions, (distributionComponents:Array<DistributionComponent>, omfComponentID:string)=> { - - let urls:any = _.groupBy(distributionComponents, 'url'); - aggregateDistributions.setValue(omfComponentID, urls); - // aggregateDistributions[omfComponentID] = ; - - }); - console.log(aggregateDistributions); - return aggregateDistributions; - }; -} diff --git a/catalog-ui/src/app/view-models/workspace/tabs/distribution/distribution-view.html b/catalog-ui/src/app/view-models/workspace/tabs/distribution/distribution-view.html deleted file mode 100644 index babe5c2e5a..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/distribution/distribution-view.html +++ /dev/null @@ -1,198 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<div class="w-sdc-distribution-view"> - <div class="w-sdc-distribution-view-header"> - <div class="w-sdc-distribution-view-title">DISTRIBUTION <span data-ng-bind="'[' + distributions.length +']'" - class="blue-font"></span></div> - <div class="header-spacer"></div> - <div class="top-search"> - <input type="text" - style="width: auto;" - class="search-text" - data-tests-id="searchTextbox" - placeholder="Search" - data-ng-model="searchBind" - data-tests-id="main-menu-input-search" - ng-model-options="{ debounce: 500 }"/> - <span class="w-sdc-search-icon magnification"></span> - </div> - <div class="sprite-new refresh-btn" data-tests-id="refreshButton" data-ng-click="initDistributions()" sdc-smart-tooltip="" - title="Refresh"></div> - </div> - - - <perfect-scrollbar include-padding="true" class="w-sdc-distribution-view-content"> - <div class="w-sdc-distribution-view-content-section" data-tests-id="ditributionTable"> - <ul> - <li data-ng-repeat="item in distributions | orderBy: '-timestamp' | filter:searchBind" - data-ng-init="item.dateFormat = ( item.timestamp | stringToDateFilter | date: 'MM/dd/yyyy h:mma':'UTC' )" - class="w-sdc-distribute-parent-block" data-tests-id="record_{{$index}}" data-ng-class="{'extends': item.showDetails}"> - <div class="w-sdc-distribute-row w-sdc-distribute-row-extends" - data-ng-class="{'extends': item.showDetails && item.distributionComponents.length}"> - <div class="w-sdc-distribution-arrow-btn" data-tests-id="ShowRecordButton_{{$index}}" data-ng-click="showComponents(item); item.showDetails=!item.showDetails" - data-ng-class="{'extends': item.showDetails}" - ></div> - <div class="w-sdc-distribute-row-content"> - <div class="w-sdc-distribute-content"> - <div class="title-section item-1"> - <div class="title">Distribution ID</div> - <div data-ng-bind="item.distributionID"></div> - </div> - <div class="title-section item-2"> - <div class="title" translate="DISTRIBUTION_VIEW_TITLE_USER_ID"></div> - <div data-ng-bind="item.userId"></div> - </div> - <div class="title-section item-3"> - <div class="title">Time[UTC]:</div> - <div - data-ng-bind="item.dateFormat"></div> - </div> - <div class="title-section item-4"> - <span class="sprite-new status-icon" data-ng-class="item.deployementStatus"></span> - <span class="sprite-new" data-ng-bind="item.deployementStatus"></span> - </div> - <div> - <div class="sprite-new distribution-bth item-5" - data-ng-class="{'disable':item.deployementStatus==='Deployed'}" - data-ng-click="(item.deployementStatus==='Deployed') || markAsDeployed(item)"></div> - </div> - </div> - <div class="w-sdc-distribute-status-block" data-ng-if="item.statusCount"> - <div class="status-item-1">Total Artifacts:<span data-ng-bind="(item.statusCount.NOT_NOTIFIED || 0) + (item.statusCount.NOTIFIED || 0) " - class="blue-font" data-tests-id="totalArtifacts_{{$index}}"></span></div> - <div class="status-item-2 " ><sapn class="link" data-ng-click="openDisributionStatusModal(item,'NOTIFIED')">Notified:</sapn><span - data-ng-bind="item.statusCount.NOTIFIED || 0" class="blue-font" data-tests-id="notified_{{$index}}"></span></div> - - <div class="status-item-3 link" ><sapn class="link" data-ng-click="openDisributionStatusModal(item,'DOWNLOAD_OK')">Downloaded:</sapn><span - data-ng-bind="item.statusCount.DOWNLOAD_OK || 0" class="blue-font" data-tests-id="downloaded_{{$index}}"></span></div> - - <div class="status-item-4 link"><sapn class="link" data-ng-click="openDisributionStatusModal(item,'DEPLOY_OK')">Deployed:</sapn><span - data-ng-bind="item.statusCount.DEPLOY_OK || 0" class="blue-font" data-tests-id="deployed_{{$index}}" ></span><span - data-ng-class="{'deployed':(item.statusCount.DEPLOY_OK > 0)}"></span></div> - <div class="status-item-5 link" ><sapn class="link" data-ng-click="openDisributionStatusModal(item,'NOT_NOTIFIED')">Not Notified:</sapn><span - data-ng-bind="item.statusCount.NOT_NOTIFIED || 0" class="blue-font" data-tests-id="NotNotified_{{$index}}"></span></div> - <div class="status-item-6"><sapn class="link" data-ng-click="openDisributionStatusModal(item,'DEPLOY_ERROR')" >Deploy Errors:</sapn><span - data-ng-bind="item.statusCount.DEPLOY_ERROR || 0" class="red-font "></span><span - data-ng-class="{'error':(item.statusCount.DEPLOY_ERROR > 0)}" data-tests-id="errors_{{$index}}"></span></div> - <div class="status-item-7"><sapn class="link" data-ng-click="openDisributionStatusModal(item,'DOWNLOAD_ERROR')" >Download Errors:</sapn><span - data-ng-bind="item.statusCount.DOWNLOAD_ERROR || 0" class="red-font "></span><span - data-ng-class="{'error':(item.statusCount.DOWNLOAD_ERROR > 0)}" data-tests-id="errors_{{$index}}"></span></div> - </div> - </div> - </div> - - <ul data-ng-if="item.showDetails && item.distributionComponents.length" - class="w-sdc-distribute-components-block disable-hover"> - - <li data-ng-repeat="(omfComponentID,omfComponentList) in ::item.distributionComponents | orderBy: '-timestamp' | filter:searchBind | groupBy:'omfComponentID' " - class="disable-hover" - data-ng-init="statusCount = getStatusCount(omfComponentList);"> - <div class="w-sdc-distribute-row omf-component-row w-sdc-distribute-row-extends" - data-ng-class="{'extends': omfComponentListExtends}"> - <div class="w-sdc-distribution-arrow-btn" data-ng-click="omfComponentListExtends=!omfComponentListExtends" - ng-class="{'extends': omfComponentListExtends}" - data-ng-init="omfComponentListExtends=false" - ></div> - <div class="w-sdc-distribute-status-block"> - <div class="status-item-1">{{omfComponentID}} <span class="blue-font">{{(statusCount.NOT_NOTIFIED || 0) + (statusCount.NOTIFIED || 0) }}</span> - </div> - <div class="status-item-2">Notified:<span data-ng-bind="statusCount.NOTIFIED || 0" - class="blue-font"></span></div> - <div class="status-item-3">Downloaded:<span - data-ng-bind="statusCount.DOWNLOAD_OK || 0" class="blue-font"></span></div> - <div class="status-item-4">Deployed:<span data-ng-bind="statusCount.DEPLOY_OK || 0" - class="blue-font"></span><span - data-ng-class="{'deployed':(statusCount.DEPLOY_OK > 0)}"></span></div> - <div class="status-item-5">Not Notified:<span - data-ng-bind="statusCount.NOT_NOTIFIED || 0" class="blue-font"></span></div> - <div class="status-item-6">Deploy Errors:<span - data-ng-bind="statusCount.DEPLOY_ERROR || 0" class="red-font"></span><span - data-ng-class="{'error':(statusCount.DEPLOY_ERROR > 0)}"></span></div> - <div class="status-item-7">Download Errors:<span - data-ng-bind="statusCount.DOWNLOAD_ERROR || 0" class="red-font"></span><span - data-ng-class="{'error':(statusCount.DOWNLOAD_ERROR > 0)}"></span></div> - </div> - </div> - <div data-ng-if="omfComponentListExtends" - class="w-sdc-distribute-omfComponent-block disable-hover"> - <div class="w-sdc-distribute-row-extends disable-hover"> - <div class="disable-hover"> - <div class="w-sdc-distribute-row omfComponent-table-head"> - <div class="title item-1">Component ID</div> - <div class="title item-2">Artifact Name</div> - <div class="title item-3">URL</div> - <div class="title item-4">Time(UTC)</div> - <div class="title item-5">Status</div> - </div> - - <div class="w-sdc-distribute-row omfComponent-table-row" - data-ng-repeat-start="(url,urlList) in ::omfComponentList | orderBy: '-timestamp' | groupBy:'url'" - data-ng-class="urlListExtends?'extends row-{{$index}}':'row-{{$index}}'"> - <div class="w-sdc-distribute-cell item-1" sdc-smart-tooltip> - <div class="w-sdc-distribution-arrow-btn" data-ng-click="urlListExtends=!urlListExtends" - data-ng-class="{'extends': urlListExtends}" - data-ng-init="urlListListExtends=false;urlList[0].displayUrl=getUrlName(urlList[0].url)" - ></div> - {{urlList[0].omfComponentID}} - </div> - <div class="w-sdc-distribute-cell item-2" sdc-smart-tooltip> - {{urlList[0].displayUrl}} - </div> - <div class="w-sdc-distribute-cell item-3 disable-hover"> - <div sdc-smart-tooltip class="distribution-url">{{urlList[0].url}}</div> - <div sdc-smart-tooltip title="Copy url" clipboard text="urlList[0].url" - class="sprite-new link-btn copy-link disable-hover"></div> - </div> - <div class="w-sdc-distribute-cell item-4"><span - data-ng-bind="urlList[0].timestamp | date: 'MM/dd/yyyy h:mma':'UTC'"></span> - </div> - <div class="w-sdc-distribute-cell item-5" sdc-smart-tooltip> - {{urlList[0].status}} - </div> - </div> - - - <div data-ng-repeat-end data-ng-if="urlListExtends" class="disable-hover" > - <div class="w-sdc-distribute-row extends disable-hover"> - <ul data-ng-if="urlListExtends" - class="w-sdc-distribute-url-block disable-hover"> - <li data-ng-repeat="distributionComponent in ::urlList | orderBy: '-timestamp'" - class="disable-hover"> - <span - data-ng-bind="distributionComponent.timestamp | date: 'MM/dd/yyyy h:mma':'UTC'" - class="disable-hover"></span> - <span - class="disable-hover">{{distributionComponent.status}}</span> - <span - class="disable-hover reason" data-ng-if="distributionComponent.status == 'NOT_NOTIFIED'">Reason: Component has determined artifact is not needed.</span> - <span - class="disable-hover reason" data-ng-if="distributionComponent.errorReason">Reason: {{distributionComponent.errorReason}}</span> - </li> - </ul> - </div> - </div> - </div> - </div> - </div> - </li> - </ul> - </li> - </ul> - </div> - - </perfect-scrollbar> -</div> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/distribution/distribution.less b/catalog-ui/src/app/view-models/workspace/tabs/distribution/distribution.less deleted file mode 100644 index ee1f7ed2d6..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/distribution/distribution.less +++ /dev/null @@ -1,362 +0,0 @@ - -.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; - display: inline-table; - } - .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/src/app/view-models/workspace/tabs/general/general-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts index b4529700cf..e2709281b7 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts @@ -7,9 +7,9 @@ * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * + * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. @@ -22,11 +22,13 @@ import * as _ from "lodash"; import {ModalsHandler, ValidationUtils, EVENTS, CHANGE_COMPONENT_CSAR_VERSION_FLAG, ComponentType, DEFAULT_ICON, ResourceType, ComponentState, instantiationType, ComponentFactory} from "app/utils"; -import {CacheService, EventListenerService, ProgressService, OnboardingService} from "app/services"; +import { EventListenerService, ProgressService} from "app/services"; +import {CacheService, OnboardingService, ImportVSPService} from "app/services-ng2"; import {IAppConfigurtaion, IValidate, IMainCategory, Resource, ISubCategory,Service, ICsarComponent, Component} from "app/models"; import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model"; import {Dictionary} from "lodash"; import { PREVIOUS_CSAR_COMPONENT } from "../../../../utils/constants"; +import { Observable, Subject } from "rxjs"; export class Validation { @@ -37,7 +39,6 @@ export class Validation { VendorNameValidationPattern:RegExp; VendorModelNumberValidationPattern:RegExp; commentValidationPattern:RegExp; - projectCodeValidationPattern:RegExp; } export class componentCategories {//categories field bind to this obj in order to solve this bug: DE242059 @@ -61,7 +62,7 @@ export interface IGeneralScope extends IWorkspaceViewModelScope { isShowFileBrowse:boolean; isShowOnboardingSelectionBrowse:boolean; importedToscaBrowseFileText:string; - importCsarProgressKey:string; + importCsarProProgressKey:string; browseFileLabel:string; componentCategories:componentCategories; instantiationTypes:Array<instantiationType>; @@ -86,6 +87,7 @@ export interface IGeneralScope extends IWorkspaceViewModelScope { possibleToUpdateIcon():boolean; } +// tslint:disable-next-line:max-classes-per-file export class GeneralViewModel { static '$inject' = [ @@ -100,7 +102,6 @@ export class GeneralViewModel { 'CommentValidationPattern', 'ValidationUtils', 'sdcConfig', - 'ProjectCodeValidationPattern', '$state', 'ModalsHandler', 'EventListenerService', @@ -109,8 +110,10 @@ export class GeneralViewModel { '$interval', '$filter', '$timeout', - 'Sdc.Services.OnboardingService', - 'ComponentFactory' + 'OnboardingService', + 'ComponentFactory', + 'ImportVSPService', + '$stateParams' ]; constructor(private $scope:IGeneralScope, @@ -124,7 +127,6 @@ export class GeneralViewModel { private CommentValidationPattern:RegExp, private ValidationUtils:ValidationUtils, private sdcConfig:IAppConfigurtaion, - private ProjectCodeValidationPattern:RegExp, private $state:ng.ui.IStateService, private ModalsHandler:ModalsHandler, private EventListenerService:EventListenerService, @@ -133,8 +135,10 @@ export class GeneralViewModel { protected $interval:any, private $filter:ng.IFilterService, private $timeout:ng.ITimeoutService, - private onBoardingService:OnboardingService, - private ComponentFactory:ComponentFactory) { + private onBoardingService: OnboardingService, + private ComponentFactory:ComponentFactory, + private importVSPService: ImportVSPService, + private $stateParams: any) { this.initScopeValidation(); this.initScopeMethods(); @@ -153,13 +157,11 @@ export class GeneralViewModel { this.$scope.validation.VendorNameValidationPattern = this.VendorNameValidationPattern; this.$scope.validation.VendorModelNumberValidationPattern = this.VendorModelNumberValidationPattern; this.$scope.validation.commentValidationPattern = this.CommentValidationPattern; - this.$scope.validation.projectCodeValidationPattern = this.ProjectCodeValidationPattern; }; - private loadOnboardingFileCache = ():ng.IPromise<Dictionary<any>> =>{ - + private loadOnboardingFileCache = (): Observable<Dictionary<Dictionary<string>>> => { let onboardCsarFilesMap:Dictionary<Dictionary<string>>; - let onSuccess = (vsps:Array<ICsarComponent>) =>{ + let onSuccess = (vsps:Array<ICsarComponent>) => { onboardCsarFilesMap = {}; _.each(vsps, (vsp:ICsarComponent)=>{ onboardCsarFilesMap[vsp.packageId] = onboardCsarFilesMap[vsp.packageId] || {}; @@ -170,8 +172,8 @@ export class GeneralViewModel { }; let onError = (): void =>{ console.log("Error getting onboarding list"); - }; - return this.onBoardingService.getOnboardingVSPs().then(onSuccess, onError); + }; + return this.onBoardingService.getOnboardingVSPs().map(onSuccess, onError); }; private setImportedFileText = ():void => { @@ -179,7 +181,7 @@ export class GeneralViewModel { if(!this.$scope.isShowOnboardingSelectionBrowse) return; //these variables makes it easier to read this logic - let csarUUID:string = (<Resource>this.$scope.component).csarUUID; + let csarUUID:string = (<Resource>this.$scope.component).csarUUID; let csarVersion:string = (<Resource>this.$scope.component).csarVersion; let onboardCsarFilesMap:Dictionary<Dictionary<string>> = this.cacheService.get('onboardCsarFilesMap'); @@ -187,21 +189,25 @@ export class GeneralViewModel { if(this.$scope.component.vspArchived){ this.$scope.importedToscaBrowseFileText = 'VSP is archived'; } else { - this.$scope.importedToscaBrowseFileText = onboardCsarFilesMap[csarUUID][csarVersion]; + if(this.$stateParams.componentCsar && this.$scope.component.lifecycleState === 'NOT_CERTIFIED_CHECKIN' && !this.$scope.isCreateMode()) { + this.$scope.importedToscaBrowseFileText = this.$scope.originComponent.name + ' (' + (this.$scope.originComponent as Resource).csarVersion + ')'; + } else { + this.$scope.importedToscaBrowseFileText = onboardCsarFilesMap[csarUUID][csarVersion]; + } } } - + if(this.$scope.component.vspArchived || (onboardCsarFilesMap && onboardCsarFilesMap[csarUUID] && onboardCsarFilesMap[csarUUID][csarVersion])){ //check that the file name is already in cache assignFileName(); } else { - this.loadOnboardingFileCache().then((onboardingFiles) => { + this.loadOnboardingFileCache().subscribe((onboardingFiles) => { onboardCsarFilesMap = onboardingFiles; this.cacheService.set('onboardCsarFilesMap', onboardingFiles); assignFileName(); }, ()=> {}); } - + } isCreateModeAvailable(verifyObj:string): boolean { @@ -211,10 +217,9 @@ export class GeneralViewModel { private initScope = ():void => { - this.$scope.importCsarProgressKey = "importCsarProgressKey"; - this.$scope.browseFileLabel = this.$scope.component.isResource() && (<Resource>this.$scope.component).resourceType === ResourceType.VF ? "Upload file" : "Upload VFC"; + this.$scope.browseFileLabel = this.$scope.component.isResource() && (<Resource>this.$scope.component).resourceType === ResourceType.VF ? 'VSP' : 'Upload VFC'; this.$scope.progressService = this.progressService; this.$scope.componentCategories = new componentCategories(); this.$scope.componentCategories.selectedCategory = this.$scope.component.selectedCategory; @@ -236,7 +241,7 @@ export class GeneralViewModel { if (resource.importedFile) { // Component has imported file. this.$scope.isShowFileBrowse = true; } - if (this.$scope.isEditMode() && resource.resourceType == ResourceType.VF && !resource.csarUUID) { + if (resource.resourceType === ResourceType.VF && !resource.csarUUID) { this.$scope.isShowFileBrowse = true; } } else if(this.$scope.component.isService()){ @@ -244,30 +249,35 @@ export class GeneralViewModel { this.$scope.initInstantiationTypes(); } - // Work around to change the csar version - if (this.cacheService.get(CHANGE_COMPONENT_CSAR_VERSION_FLAG)) { - //(<Resource>this.$scope.component).csarVersion = this.cacheService.get(CHANGE_COMPONENT_CSAR_VERSION_FLAG); - this.cacheService.remove(CHANGE_COMPONENT_CSAR_VERSION_FLAG); - this.$scope.updateUnsavedFileFlag(true); + if (this.cacheService.get(PREVIOUS_CSAR_COMPONENT)) { //keep the old component in the cache until checkout, so we dont need to pass it around + this.$scope.setOriginComponent(this.cacheService.get(PREVIOUS_CSAR_COMPONENT)); + this.cacheService.remove(PREVIOUS_CSAR_COMPONENT); + } - if (!this.$scope.isViewMode() && this.cacheService.get(PREVIOUS_CSAR_COMPONENT)) { //keep the old component in the cache until checkout, so we dont need to pass it around - this.$scope.setOriginComponent(this.cacheService.get(PREVIOUS_CSAR_COMPONENT)); - this.cacheService.remove(PREVIOUS_CSAR_COMPONENT); + if (this.$stateParams.componentCsar && !this.$scope.isCreateMode()) { + this.$scope.updateUnsavedFileFlag(true); + // We are coming from update VSP modal we need to automatically checkout (if needed) and save the VF + if (this.$scope.component.lifecycleState !== ComponentState.NOT_CERTIFIED_CHECKOUT) { + // Checkout is needed after that a save will be invoked in workspace-view.handleLifeCycleStateChange + this.EventListenerService.notifyObservers(EVENTS.ON_LIFECYCLE_CHANGE_WITH_SAVE, 'checkOut'); + // if(this.$scope.component.lifecycleState !== 'NOT_CERTIFIED_CHECKIN') { + // (<Resource>this.$scope.component).csarVersion = this.$stateParams.componentCsar.csarVersion; + // } + } else { + this.$scope.save(); } } - // Init the decision if to show onboarding - if (this.$scope.component.isResource() && this.$scope.isEditMode() && - ((<Resource>this.$scope.component).resourceType == ResourceType.VF || - (<Resource>this.$scope.component).resourceType == ResourceType.PNF) - && (<Resource>this.$scope.component).csarUUID) { + if (this.$scope.component.isResource() && + (this.$scope.component as Resource).resourceType === ResourceType.VF || + (this.$scope.component as Resource).resourceType === ResourceType.PNF && (this.$scope.component as Resource).csarUUID) { this.$scope.isShowOnboardingSelectionBrowse = true; this.setImportedFileText(); } else { this.$scope.isShowOnboardingSelectionBrowse = false; } - + //init file extensions based on the file that was imported. if (this.$scope.component.isResource() && (<Resource>this.$scope.component).importedFile) { @@ -304,7 +314,7 @@ export class GeneralViewModel { this.$scope.originComponent.contactId = this.$scope.component.contactId; } - + this.$scope.$on('$destroy', () => { this.EventListenerService.unRegisterObserver(EVENTS.ON_LIFECYCLE_CHANGE_WITH_SAVE); this.EventListenerService.unRegisterObserver(EVENTS.ON_LIFECYCLE_CHANGE); @@ -313,7 +323,7 @@ export class GeneralViewModel { }; // Convert category string MainCategory_#_SubCategory to Array with one item (like the server except) - private convertCategoryStringToOneArray = ():Array<IMainCategory> => { + private convertCategoryStringToOneArray = ():IMainCategory[] => { let tmp = this.$scope.component.selectedCategory.split("_#_"); let mainCategory = tmp[0]; let subCategory = tmp[1]; @@ -333,14 +343,14 @@ export class GeneralViewModel { } let tmpSelected = <IMainCategory> mainCategoryClone; - let result:Array<IMainCategory> = []; + let result:IMainCategory[] = []; result.push(tmpSelected); return result; }; private updateComponentNameInBreadcrumbs = ():void => { - //update breadcrum after changing name + // 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); }; @@ -436,24 +446,20 @@ export class GeneralViewModel { if(this.$scope.component.vspArchived) return; let csarUUID = (<Resource>this.$scope.component).csarUUID; let csarVersion = (<Resource>this.$scope.component).csarVersion; - this.ModalsHandler.openOnboadrdingModal('Update', csarUUID, csarVersion).then((result)=> { - - if(result){ - this.ComponentFactory.getComponentWithMetadataFromServer(result.type.toUpperCase(), result.previousComponent.uniqueId).then( - (component:Component)=> { - if (result.componentCsar && component.isResource()){ - this.cacheService.set(PREVIOUS_CSAR_COMPONENT, angular.copy(component)); - component = this.ComponentFactory.updateComponentFromCsar(result.componentCsar, <Resource>component); - } - - this.$scope.setComponent(component); - this.$scope.updateUnsavedFileFlag(true); - this.setImportedFileText(); - }, ()=> { - // ERROR - }); - } - }, () => {}); + this.importVSPService.openOnboardingModal(csarUUID, csarVersion).subscribe((result) => { + this.ComponentFactory.getComponentWithMetadataFromServer(result.type.toUpperCase(), result.previousComponent.uniqueId).then( + (component:Component)=> { + if (result.componentCsar && component.isResource()){ + this.cacheService.set(PREVIOUS_CSAR_COMPONENT, angular.copy(component)); + component = this.ComponentFactory.updateComponentFromCsar(result.componentCsar, <Resource>component); + } + this.$scope.setComponent(component); + this.$scope.save(); + this.setImportedFileText(); + }, ()=> { + // ERROR + }); + }) }; this.$scope.updateIcon = ():void => { @@ -491,17 +497,17 @@ export class GeneralViewModel { return; } - let subtype:string = ComponentType.RESOURCE == this.$scope.componentType ? this.$scope.component.getComponentSubType() : undefined; + const subtype:string = ComponentType.RESOURCE == this.$scope.componentType ? this.$scope.component.getComponentSubType() : undefined; - let onFailed = (response) => { - //console.info('onFaild', response); - //this.$scope.isLoading = false; + const onFailed = (response) => { + // console.info('onFaild', response); + // this.$scope.isLoading = false; }; - let onSuccess = (validation:IValidate) => { - this.$scope.editForm["componentName"].$setValidity('nameExist', validation.isValid); + const onSuccess = (validation:IValidate) => { + this.$scope.editForm['componentName'].$setValidity('nameExist', validation.isValid); if (validation.isValid) { - //update breadcrumb after changing name + // update breadcrumb after changing name this.updateComponentNameInBreadcrumbs(); } }; @@ -522,48 +528,57 @@ export class GeneralViewModel { && !this.$scope.editForm["componentName"].$error.pattern && (!this.$scope.originComponent.name || this.$scope.component.name.toUpperCase() !== this.$scope.originComponent.name.toUpperCase()) ) { - if (!(this.$scope.componentType === ComponentType.RESOURCE && (<Resource>this.$scope.component).csarUUID !== undefined) + if (!(this.$scope.componentType === ComponentType.RESOURCE && (this.$scope.component as Resource).csarUUID !== undefined) ) { this.$scope.component.validateName(name, subtype).then(onSuccess, onFailed); } - } else if (this.$scope.originComponent.name && this.$scope.component.name.toUpperCase() === this.$scope.originComponent.name.toUpperCase()) { + } else if (this.$scope.editForm && this.$scope.originComponent.name && this.$scope.component.name.toUpperCase() === this.$scope.originComponent.name.toUpperCase()) { // Clear the error - this.$scope.editForm["componentName"].$setValidity('nameExist', true); + this.$scope.editForm['componentName'].$setValidity('nameExist', true); } } }; this.EventListenerService.registerObserverCallback(EVENTS.ON_LIFECYCLE_CHANGE_WITH_SAVE, (nextState) => { - if (this.$state.current.data.unsavedChanges && this.$scope.isValidForm){ + if (this.$state.current.data.unsavedChanges && this.$scope.isValidForm) { this.$scope.save().then(() => { this.$scope.handleChangeLifecycleState(nextState); }, () => { - console.error("Save failed, unable to change lifecycle state to " + nextState); + console.error('Save failed, unable to change lifecycle state to ' + nextState); }); } else if(!this.$scope.isValidForm){ - console.error("Form is not valid"); + console.error('Form is not valid'); } else { let newCsarVersion:string; - if(this.$scope.unsavedFile){ - newCsarVersion = (<Resource>this.$scope.component).csarVersion; + if(this.$scope.unsavedFile) { + newCsarVersion = (this.$scope.component as Resource).csarVersion; + } + if(this.$stateParams.componentCsar && !this.$scope.isCreateMode()) { + const onError = (): void => { + if (this.$scope.component.lifecycleState === 'NOT_CERTIFIED_CHECKIN') { + this.$scope.revert(); + } + }; + this.$scope.handleChangeLifecycleState(nextState, newCsarVersion, onError); + + } else { + this.$scope.handleChangeLifecycleState(nextState, newCsarVersion); } - this.$scope.handleChangeLifecycleState(nextState, newCsarVersion); } }); - this.$scope.revert = ():void => { - //in state of import file leave the file in place + // in state of import file leave the file in place this.$scope.setComponent(this.ComponentFactory.createComponent(this.$scope.originComponent)); if (this.$scope.component.isResource() && this.$scope.restoreFile) { - (<Resource>this.$scope.component).importedFile = angular.copy(this.$scope.restoreFile); - } - - this.setImportedFileText(); - this.$scope.updateBreadcrumbs(this.$scope.component); //update on workspace + (this.$scope.component as Resource).importedFile = angular.copy(this.$scope.restoreFile); + } + + this.setImportedFileText(); + this.$scope.updateBreadcrumbs(this.$scope.component); // update on workspace this.$scope.componentCategories.selectedCategory = this.$scope.originComponent.selectedCategory; this.setUnsavedChanges(false); @@ -573,8 +588,8 @@ export class GeneralViewModel { this.$scope.onImportFileChange = () => { - if( !this.$scope.restoreFile && this.$scope.editForm.fileElement.value && this.$scope.editForm.fileElement.value.filename || //if file started empty but we have added a new one - this.$scope.restoreFile && !angular.equals(this.$scope.restoreFile, this.$scope.editForm.fileElement.value)){ //or file was swapped for a new one + if( !this.$scope.restoreFile && this.$scope.editForm.fileElement.value && this.$scope.editForm.fileElement.value.filename || // if file started empty but we have added a new one + this.$scope.restoreFile && !angular.equals(this.$scope.restoreFile, this.$scope.editForm.fileElement.value)){ // or file was swapped for a new one this.$scope.updateUnsavedFileFlag(true); } else { this.$scope.updateUnsavedFileFlag(false); @@ -582,46 +597,46 @@ export class GeneralViewModel { } }; - this.$scope.$watchCollection('component.name', (newData:any):void => { + 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.$watch('editForm.$valid', (newVal, oldVal) => { this.$scope.setValidState(newVal); }); - this.$scope.$watch("editForm.$dirty", (newVal, oldVal) => { + this.$scope.$watch('editForm.$dirty', (newVal, oldVal) => { if (newVal && !this.$scope.isCreateMode()) { this.setUnsavedChanges(true); } }); - this.$scope.onCategoryChange = ():void => { + this.$scope.onCategoryChange = (): void => { this.$scope.component.selectedCategory = this.$scope.componentCategories.selectedCategory; this.$scope.component.categories = this.convertCategoryStringToOneArray(); this.$scope.component.icon = DEFAULT_ICON; }; - this.$scope.onEcompGeneratedNamingChange = ():void =>{ - if(!(<Service>this.$scope.component).ecompGeneratedNaming){ - (<Service>this.$scope.component).namingPolicy = ''; + this.$scope.onEcompGeneratedNamingChange = (): void => { + if (!(this.$scope.component as Service).ecompGeneratedNaming) { + (this.$scope.component as Service).namingPolicy = ''; } }; - this.$scope.onVendorNameChange = (oldVendorName:string):void => { + this.$scope.onVendorNameChange = (oldVendorName: string): void => { if (this.$scope.component.icon === oldVendorName) { this.$scope.component.icon = DEFAULT_ICON; } }; this.EventListenerService.registerObserverCallback(EVENTS.ON_LIFECYCLE_CHANGE, this.$scope.reload); - }; + } - private setUnsavedChanges = (hasChanges:boolean):void => { + private setUnsavedChanges = (hasChanges: boolean): void => { this.$state.current.data.unsavedChanges = hasChanges; - }; + } } diff --git a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html index 07f1e4d6ed..86f1feba0c 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html +++ b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html @@ -13,13 +13,12 @@ ~ See the License for the specific language governing permissions and ~ limitations under the License. --> - <div include-padding="true" class="sdc-workspace-general-step"> <div class="w-sdc-main-container-body-content-action-buttons"> - <div data-ng-if="unsavedFile && !isCreateMode() && !isViewMode()" class="unsaved-file-warning"> + <div data-ng-if="unsavedFile && !isCreateMode() && !isViewMode()" data-tests-id="save-warning" class="unsaved-file-warning"> <span class="sprite-new sdc-warning"></span> Click save to update to the new VSP </div> - <button class="tlv-btn blue" data-ng-if="isDesigner()" data-ng-show="isGeneralView()" data-ng-class="{'disabled' : !isValidForm || isDisableMode() || isViewMode() || isCreateMode()}" + <button class="tlv-btn blue" data-ng-if="isDesigner()" data-ng-show="isGeneralView()" data-ng-class="{'disabled' : !isValidForm || isDisableMode() || isViewMode() || isCreateMode()}" data-ng-click="save()" data-tests-id="create/save" tooltips tooltip-content="Save">Save</button> <span data-ng-if="isDesigner()" data-ng-class="{'disabled' :isDisableMode() || isViewMode() || isCreateMode()}" ng-click="revert()" class="sprite-new revert-btn" data-tests-id="revert" data-ng-show="isGeneralView()" tooltips tooltip-content="Revert"></span> @@ -160,7 +159,7 @@ <div class="w-sdc-form-column"> <!--------------------- IMPORT TOSCA FILE USING BROWSE (ALSO VFC) --------------------> <div class="i-sdc-form-item" ng-if="isShowFileBrowse"> - + <!-- // element-disabled="{{!isCreateMode()&&!(isEditMode()&&component.resourceType=='VF')&&component.vspArchived}} || {{isViewMode()}}" --> <label class="i-sdc-form-label" data-ng-class="{'required':isCreateMode()}">{{browseFileLabel}}</label> @@ -173,17 +172,17 @@ on-file-changed-in-directive="onImportFileChange" extensions="{{importedFileExtension}}" default-text="'Browse to select file'" - data-ng-class="{'error':!(isEditMode()&&component.resourceType=='VF') && (!editForm.fileElement.$valid || !component.importedFile.filename)}"></file-upload> + ></file-upload> </div> <!--------------------- IMPORT TOSCA FILE USING ONBOARDING --------------------> <div class="i-sdc-form-item" ng-if="isShowOnboardingSelectionBrowse"> - <label class="i-sdc-form-label required">Select VSP</label> + <label class="i-sdc-form-label required">VSP</label> <div class="i-sdc-form-file-upload i-sdc-form-input"> <span class="i-sdc-form-file-name" data-ng-disabled="component.vspArchived" data-tests-id="filename">{{(fileModel && fileModel.filename) || importedToscaBrowseFileText }}</span> <div class="i-sdc-form-file-upload-x-btn" ng-click="cancel()" data-ng-show="fileModel.filename && fileModel.filename!=='' && elementDisabled!=='true'"></div> - <input type="button" data-ng-disabled="component.vspArchived" name="fileElement" /> - <div class="file-upload-browse-btn" data-ng-click="openOnBoardingModal()" data-ng-disabled="!component.vspArchived" data-tests-id="browseButton">Browse</div> + <input type="button" data-ng-class="{'disabled': !isEditMode() && component.vspArchived}" data-ng-disabled="component.vspArchived" name="fileElement" /> + <div class="file-upload-browse-btn" data-ng-class="{'disabled': !isEditMode() && !component.vspArchived}" data-ng-click="openOnBoardingModal()" data-ng-disabled="!component.vspArchived" data-tests-id="browseButton">Browse</div> </div> </div> @@ -218,28 +217,6 @@ </div> <!--------------------- USER ID --------------------> - <!--------------------- PROJECT CODE --------------------> - <div class="i-sdc-form-item" data-ng-if="!component.isResource()" - data-ng-class="{'error': validateField(editForm.projectCode)}"> - <label class="i-sdc-form-label required" translate="GENERAL_LABEL_PROJECT_CODE"></label> - <input class="i-sdc-form-input" type="text" - data-ng-model="component.projectCode" - data-ng-class="{'view-mode': isViewMode()}" - data-ng-model-options="{ debounce: 500 }" - data-ng-maxlength="50" - data-required - name="projectCode" - data-ng-pattern="validation.projectCodeValidationPattern" - data-tests-id="projectCode" - /> - - <div class="input-error" data-ng-show="validateField(editForm.projectCode)"> - <span ng-show="editForm.contactId.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span> - <span ng-show="editForm.projectCode.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_PROJECT_CODE_REQUIRED"></span> - <span ng-show="editForm.projectCode.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_PROJECT_CODE_NOT_VALID"></span> - </div> - </div> - <!--------------------- VENDOR NAME --------------------> <div ng-if="component.isResource()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.vendorName)}"> <label class="i-sdc-form-label required">Vendor</label> @@ -401,6 +378,27 @@ </div> <!--------------------- Service Role --------------------> + <!--------------------- Service Function --------------------> + <div ng-if="component.isService()" + class="i-sdc-form-item" + data-ng-class="{'error': validateField(editForm.serviceFunction)}"> + <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label> + <input class="i-sdc-form-input" type="text" + data-ng-class="{'view-mode': isViewMode()}" + data-ng-model="component.serviceFunction" + data-ng-model-options="{ debounce: 500 }" + name="serviceFunction" + data-tests-id="serviceFunction" + data-ng-maxlength="256" + data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern" + /> + <div class="input-error" data-ng-show="validateField(editForm.serviceFunction)"> + <span ng-show="editForm.serviceFunction.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span> + <span ng-show="editForm.serviceFunction.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> + </div> + </div> + <!--------------------- Service Function --------------------> + <!-------------------- ENVIRONMENT CONTEXT -----------------> <div ng-if="component.isService()" class="i-sdc-form-item"> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/general/general.less b/catalog-ui/src/app/view-models/workspace/tabs/general/general.less index b60e4b8de4..8b2cc01d75 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/general/general.less +++ b/catalog-ui/src/app/view-models/workspace/tabs/general/general.less @@ -27,6 +27,7 @@ .file-upload-browse-btn { .noselect; .bg_n; + color:#191919; padding: 4px 6px; cursor: pointer; z-index: 999; @@ -35,10 +36,6 @@ text-align: center; border-left: solid 1px #cfcfcf; - &.disabled { - cursor: default; - } - &:hover:not(.disabled) { background-color: #dbdee2; } diff --git a/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts-view-model.ts deleted file mode 100644 index 47a96fb385..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts-view-model.ts +++ /dev/null @@ -1,158 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; -import * as _ from "lodash"; -import {ModalsHandler} from "app/utils"; -import {SharingService} from "app/services"; -import {IAppConfigurtaion, ArtifactModel, IFileDownload} from "app/models"; -import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model"; -import {ComponentServiceNg2} from "../../../../ng2/services/component-services/component.service"; -import {ArtifactGroupModel} from "../../../../models/artifacts"; -import {ComponentGenericResponse} from "../../../../ng2/services/responses/component-generic-response"; - -export interface IInformationArtifactsScope extends IWorkspaceViewModelScope { - artifacts:Array<ArtifactModel>; - tableHeadersList:Array<any>; - artifactType:string; - isResourceInstance:boolean; - downloadFile:IFileDownload; - isLoading:boolean; - sortBy:string; - reverse:boolean; - - getTitle():string; - addOrUpdate(artifact:ArtifactModel):void; - delete(artifact:ArtifactModel):void; - download(artifact:ArtifactModel):void; - clickArtifactName(artifact:any):void; - openEditEnvParametersModal(artifactResource:ArtifactModel):void; - sort(sortBy:string):void; - showNoArtifactMessage():boolean; -} - -export class InformationArtifactsViewModel { - - static '$inject' = [ - '$scope', - '$filter', - '$state', - 'sdcConfig', - 'ModalsHandler', - 'ComponentServiceNg2' - ]; - - constructor(private $scope:IInformationArtifactsScope, - private $filter:ng.IFilterService, - private $state:any, - private sdcConfig:IAppConfigurtaion, - private ModalsHandler:ModalsHandler, - private ComponentServiceNg2: ComponentServiceNg2) { - this.initInformationalArtifacts(); - } - - private initInformationalArtifacts = ():void => { - if(!this.$scope.component.artifacts) { - this.$scope.isLoading = true; - this.ComponentServiceNg2.getComponentInformationalArtifacts(this.$scope.component).subscribe((response:ComponentGenericResponse) => { - this.$scope.component.artifacts = response.artifacts; - this.initScope(); - this.$scope.isLoading = false; - }); - } else { - this.initScope(); - } - } - - private initScope = ():void => { - - this.$scope.isLoading = false; - this.$scope.sortBy = 'artifactDisplayName'; - this.$scope.reverse = false; - this.$scope.setValidState(true); - this.$scope.artifactType = 'informational'; - this.$scope.getTitle = ():string => { - return this.$filter("resourceName")(this.$scope.component.name) + ' Artifacts'; - - }; - - this.$scope.tableHeadersList = [ - {title: 'Name', property: 'artifactDisplayName'}, - {title: 'Type', property: 'artifactType'}, - {title: 'Version', property: 'artifactVersion'}, - {title: 'UUID', property: 'artifactUUID'} - ]; - - this.$scope.artifacts = <ArtifactModel[]>_.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:ArtifactModel):void => { - artifact.artifactGroupType = 'INFORMATIONAL'; - this.ModalsHandler.openArtifactModal(artifact, this.$scope.component).then(() => { - this.$scope.artifacts = <ArtifactModel[]>_.values(this.$scope.component.artifacts); - }); - }; - - this.$scope.showNoArtifactMessage = ():boolean => { - let artifacts:any = []; - artifacts = _.filter(this.$scope.artifacts, (artifact:ArtifactModel)=> { - return artifact.esId; - }); - - if (artifacts.length === 0) { - return true; - } - return false; - }; - - this.$scope.delete = (artifact:ArtifactModel):void => { - - let onOk = ():void => { - this.$scope.isLoading = true; - let onSuccess = ():void => { - this.$scope.isLoading = false; - this.$scope.artifacts = <ArtifactModel[]>_.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/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts-view.html b/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts-view.html deleted file mode 100644 index eacadb376c..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts-view.html +++ /dev/null @@ -1,82 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<div class="workspace-information-artifact"> - <div data-tests-id="add-information-artifact-button" ng-if="!isViewMode()" - data-ng-class="{'disabled': isDisableMode()}" - data-tests-id="addGrey" class="add-btn" data-ng-click="addOrUpdate({})" type="button">Add </div> - <div class="table-container-flex"> - <div class="table" data-ng-class="{'view-mode': isViewMode()}"> - <div class="head flex-container"> - <div class="table-header head-row hand flex-item" ng-repeat="header in tableHeadersList track by $index" data-ng-click="sort(header.property)">{{header.title}} - <span data-ng-show="sortBy === header.property" class="table-header-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"> </span> - </div> - <div class="table-no-text-header head-row flex-item"></div> - </div> - <div class="body"> - <perfect-scrollbar suppress-scroll-x="true" scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container"> - <div data-ng-if="showNoArtifactMessage()" class="no-row-text" data-ng-class="{'disabled': isDisableMode()}"> - There are no information artifacts to display - </div> - <div data-ng-repeat-start="artifact in artifacts| orderBy:sortBy:reverse track by $index" data-tests-id="InformationalArtifactRow" - class="flex-container data-row" - data-ng-class="{'selected': artifact.selected}" - data-ng-if="artifact.esId"> - - <div class="table-col-general flex-item" data-ng-click="artifact.selected = !artifact.selected" data-tests-id="artifactDisplayName_{{artifact.artifactDisplayName}}"> - <span class="sprite table-arrow" data-ng-class="{'opened': artifact.selected}" data-tests-id="artifact_arrow_{{artifact.artifactDisplayName}}"></span> - {{artifact.artifactDisplayName}} - </div> - - <div class="table-col-general flex-item" data-ng-click="artifact.selected = !artifact.selected" data-tests-id="artifactType_{{artifact.artifactDisplayName}}"> - {{artifact.artifactType}} - </div> - - <div class="table-col-general flex-item" data-ng-click="artifact.selected = !artifact.selected" data-tests-id="artifactVersion_{{artifact.artifactDisplayName}}"> - {{artifact.artifactVersion}} - </div> - - <div class="table-col-general flex-item text" data-ng-click="artifact.selected = !artifact.selected" data-tests-id="artifactUUID_{{artifact.artifactDisplayName}}" - tooltips tooltip-content="{{artifact.artifactUUID}}"> - <span>{{artifact.artifactUUID}}</span> - </div> - - <div class="table-btn-col flex-item"> - <button class="table-edit-btn" data-tests-id="edit_{{artifact.artifactDisplayName}}" data-ng-if="!isViewMode() && !artifact.isThirdParty()" data-ng-click="addOrUpdate(artifact)" data-ng-class="{'disabled': isDisableMode()}"></button> - <button class="table-delete-btn" data-tests-id="delete_{{artifact.artifactDisplayName}}" data-ng-if="!isViewMode() && !artifact.isThirdParty()" data-ng-click="delete(artifact)" data-ng-class="{'disabled': isDisableMode()}"> </button> - <button class="table-download-btn" download-artifact data-tests-id="download_{{artifact.artifactDisplayName}}" - data-ng-if="artifact.artifactName" component="component" artifact="artifact"></button> - </div> - </div> - <div data-ng-repeat-end="" data-ng-if="artifact.selected" class="item-opened" data-tests-id="{{artifact.artifactDisplayName}}Description" data-ng-bind="artifact.description"></div> - <button class="add-button" data-ng-repeat="artifact in artifacts track by $index" - data-ng-show="!artifact.esId" - data-tests-id="{{artifact.artifactDisplayName}}" - ng-if="!isViewMode()" - data-ng-class="{'disabled': isDisableMode()}" - translate="DEPLOYMENT_ARTIFACT_BUTTON_ADD_HEAT" - translate-values="{'name': '{{artifact.artifactDisplayName}}'}" - data-ng-click="addOrUpdate(artifact)"></button> - <button class="add-button" - ng-if="!isViewMode()" - data-ng-class="{'disabled': isDisableMode()}" - translate="DEPLOYMENT_ARTIFACT_BUTTON_ADD_OTHER" - data-ng-click="addOrUpdate({})"></button> - </perfect-scrollbar> - </div> - </div> - </div> -</div> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts.less b/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts.less deleted file mode 100644 index 5e69c44e9b..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts.less +++ /dev/null @@ -1,57 +0,0 @@ -.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: 0; - - .item-opened{ - word-wrap: break-word; - } - - .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: 3; - } - - .flex-item:nth-child(4) { - flex-grow: 20; - } - - .flex-item:nth-child(5) { - flex-grow: 5; - padding-top: 10px; - } - - } - -} - - diff --git a/catalog-ui/src/app/view-models/workspace/tabs/inputs/inputs.less b/catalog-ui/src/app/view-models/workspace/tabs/inputs/inputs.less deleted file mode 100644 index 17c18e1741..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/inputs/inputs.less +++ /dev/null @@ -1,225 +0,0 @@ -.workspace-inputs { - - .sdc-workspace-container .w-sdc-main-right-container .w-sdc-main-container-body-content { - padding: 25px 8% 25px 8%; - } - - .w-sdc-main-container .w-sdc-main-right-container > div:first-child { - /* scroll fix */ - padding-bottom: 0px; - } - - - width: 100%; - display: flex; - - .text { - padding-left: 15px; - .no-overflow; - } - - .title-text { - color: @main_color_m; - .f-type._13_m; - .bold; - text-overflow: ellipsis; - overflow: hidden; - } - - .no-overflow { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - - .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; - .no-overflow; - } - } - - .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; - - } - - .table-container-flex { - - .flex-item { - line-height: 22px; - } - .expand-collapse-table-row { - - .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; - } - } - } - - .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; - } - - .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: 0; - width: 46%; - min-width: 46%; - display: inline-block; - float: left; - } -} diff --git a/catalog-ui/src/app/view-models/workspace/tabs/interface-operation/interface-operation-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/interface-operation/interface-operation-view-model.ts index 180d78954a..83a2be2a60 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/interface-operation/interface-operation-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/tabs/interface-operation/interface-operation-view-model.ts @@ -27,7 +27,6 @@ * limitations under the License. */ - 'use strict'; import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model"; diff --git a/catalog-ui/src/app/view-models/workspace/tabs/interface-operation/interface-operation-view.html b/catalog-ui/src/app/view-models/workspace/tabs/interface-operation/interface-operation-view.html index 0e7c355c47..236289feff 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/interface-operation/interface-operation-view.html +++ b/catalog-ui/src/app/view-models/workspace/tabs/interface-operation/interface-operation-view.html @@ -13,7 +13,6 @@ ~ See the License for the specific language governing permissions and ~ limitations under the License. --> - <div class="workspace-interface-operation"> <interface-operation [component]="component" diff --git a/catalog-ui/src/app/view-models/workspace/tabs/management-workflow/management-workflow-view.html b/catalog-ui/src/app/view-models/workspace/tabs/management-workflow/management-workflow-view.html index 4a97b64daf..ddabd68d7b 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/management-workflow/management-workflow-view.html +++ b/catalog-ui/src/app/view-models/workspace/tabs/management-workflow/management-workflow-view.html @@ -13,7 +13,6 @@ ~ See the License for the specific language governing permissions and ~ limitations under the License. --> - <loader data-display="isLoading"></loader> <div class="workspace-management-workflow" ng-if="vendorModel"> <punch-out name="'sequence-diagram'" data="vendorModel" user="user" on-event="onVendorEvent"></punch-out> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/network-call-flow/network-call-flow-view.html b/catalog-ui/src/app/view-models/workspace/tabs/network-call-flow/network-call-flow-view.html index a1efb33301..01343a35ac 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/network-call-flow/network-call-flow-view.html +++ b/catalog-ui/src/app/view-models/workspace/tabs/network-call-flow/network-call-flow-view.html @@ -13,7 +13,6 @@ ~ See the License for the specific language governing permissions and ~ limitations under the License. --> - <loader data-display="isLoading"></loader> <div ng-if="vendorMessageModel" class="workspace-network-call-flow"> <punch-out name="'sequence-diagram'" data="vendorMessageModel" user="user" on-event="onVendorEvent"></punch-out> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-context-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-context-view-model.ts deleted file mode 100644 index d3ccbe3325..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-context-view-model.ts +++ /dev/null @@ -1,94 +0,0 @@ -/* - -* Copyright (c) 2018 AT&T Intellectual Property. - -* - -* 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. - -*/ - -import {IUserProperties, Plugin} from "app/models"; -import {CacheService} from "app/services"; -import {PluginsService} from "../../../../ng2/services/plugins.service"; -import {IWorkspaceViewModelScope} from "../../workspace-view-model"; - - -interface IPluginsContextViewModelScope extends IWorkspaceViewModelScope { - plugin: Plugin; - user: IUserProperties; - queryParams: Object; - isLoading: boolean; - show: boolean; - - onLoadingDone(plugin: Plugin): void; -} - -export class PluginsContextViewModel { - static '$inject' = [ - '$scope', - '$stateParams', - 'Sdc.Services.CacheService', - 'PluginsService' - ]; - - constructor(private $scope: IPluginsContextViewModelScope, - private $stateParams: any, - private cacheService: CacheService, - private pluginsService: PluginsService) { - - this.initScope(); - } - - private initScope = (): void => { - this.$scope.show = false; - this.$scope.plugin = this.pluginsService.getPluginByStateUrl(this.$stateParams.path); - this.$scope.user = this.cacheService.get('user'); - - this.$scope.isLoading = true; - - this.$scope.queryParams = { - userId: this.$scope.user.userId, - userRole: this.$scope.user.role, - displayType: "context", - contextType: this.$scope.component.getComponentSubType(), - uuid: this.$scope.component.uuid, - lifecycleState: this.$scope.component.lifecycleState, - isOwner: this.$scope.component.lastUpdaterUserId === this.$scope.user.userId, - version: this.$scope.component.version, - parentUrl: window.location.origin, - eventsClientId: this.$scope.plugin.pluginId - }; - - if (this.$stateParams.queryParams) { - _.assign(this.$scope.queryParams, this.$stateParams.queryParams); - } - - this.$scope.onLoadingDone = (plugin: Plugin) => { - if (plugin.pluginId == this.$scope.plugin.pluginId) { - this.$scope.isLoading = false; - } - }; - - } -} diff --git a/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-context-view.html b/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-context-view.html deleted file mode 100644 index 44c04e4e71..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-context-view.html +++ /dev/null @@ -1,20 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<loader display="isLoading && plugin.isOnline" ></loader> -<div class="workspace-plugins"> - <plugin-frame (on-loading-done)="onLoadingDone(plugin)" [plugin]="plugin" [query-params]="queryParams"></plugin-frame> -</div> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-context.less b/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-context.less deleted file mode 100644 index c913af1931..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-context.less +++ /dev/null @@ -1,2 +0,0 @@ -.workspace-plugins { -} diff --git a/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view-model.ts index b09662d7a2..9794209757 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view-model.ts @@ -19,12 +19,12 @@ */ 'use strict'; -import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model"; -import {PropertyModel} from "app/models"; -import {ModalsHandler} from "app/utils"; -import {COMPONENT_FIELDS} from "../../../../utils/constants"; -import {ComponentGenericResponse} from "../../../../ng2/services/responses/component-generic-response"; -import {ComponentServiceNg2} from "../../../../ng2/services/component-services/component.service"; +import { IWorkspaceViewModelScope } from "app/view-models/workspace/workspace-view-model"; +import { PropertyModel } from "app/models"; +import { ModalsHandler } from "app/utils"; +import { ComponentGenericResponse } from "../../../../ng2/services/responses/component-generic-response"; +import { ComponentServiceNg2 } from "../../../../ng2/services/component-services/component.service"; +import { SdcUiCommon, SdcUiServices, SdcUiComponents } from "onap-ui-angular"; interface IPropertiesViewModelScope extends IWorkspaceViewModelScope { tableHeadersList:Array<any>; @@ -43,14 +43,16 @@ export class PropertiesViewModel { '$scope', '$filter', 'ModalsHandler', - 'ComponentServiceNg2' + 'ComponentServiceNg2', + 'ModalServiceSdcUI' ]; constructor(private $scope:IPropertiesViewModelScope, private $filter:ng.IFilterService, private ModalsHandler:ModalsHandler, - private ComponentServiceNg2:ComponentServiceNg2) { + private ComponentServiceNg2:ComponentServiceNg2, + private modalService: SdcUiServices.ModalService) { this.initComponentProperties(); } @@ -101,12 +103,13 @@ export class PropertiesViewModel { this.$scope.delete = (property:PropertyModel):void => { - let onOk = ():void => { + let onOk: Function = ():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); + const okButton = {testId: "OK", text: "OK", type: SdcUiCommon.ButtonType.info, callback: onOk, closeModal: true} as SdcUiComponents.ModalButtonComponent; + this.modalService.openInfoModal(title, message, 'delete-modal', [okButton]); }; } } diff --git a/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view.html b/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view.html index 1505e8397d..1d8a2ff78c 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view.html +++ b/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view.html @@ -13,7 +13,6 @@ ~ See the License for the specific language governing permissions and ~ limitations under the License. --> - <div class="workspace-properties"> <div id="left-top-bar"> <span id="properties-count">Total Properties: {{component.properties.length}}</span> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-editable-view.html b/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-editable-view.html deleted file mode 100644 index 566cc5fc2c..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-editable-view.html +++ /dev/null @@ -1,247 +0,0 @@ -<!-- - ~ Copyright © 2016-2018 European Support Limited - ~ - ~ 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. ---> - -<div class="workspace-req-and-cap-editable"> - <loader data-display="isLoading"></loader> - - <div class="tabs-header"> - <div class="req-and-cap-tabs"> - <div data-tests-id="req-tab" data-ng-click="onSwitchTab()" class="tab" - data-ng-class="{'selected':mode=='requirements'}">Requirements - </div> - <div data-tests-id="cap-tab" data-ng-click="onSwitchTab()" class="tab" - data-ng-class="{'selected':mode=='capabilities'}">Capabilities - </div> - </div> - <div class="buttons-in-right" data-ng-if="!isListEmpty()"> - <div class="search"> - <input id="search-box" data-ng-if="filter.show" data-tests-id="search-box" placeholder="Search" - data-ng-model-options="{debounce: 200}" data-ng-model="filter.txt" data-ng-change="onFilter()"/> - <div class="search-icon-container" data-tests-id="search-icon"> - <svg-icon - class="hand" - [name]="'search-o'" - [mode]="'primary'" - [size]="'small'" - [clickable]="'true'" - data-ng-click="onSearchIconClick()"> - </svg-icon> - </div> - </div> - <div class="add-button-icon-and-label" data-ng-if="isEditable" data-ng-click="onAddBtnClicked()" - data-ng-class="{'disabled': isReadonly()}" data-tests-id="add-button"> - <svg-icon - name="plus" - mode="primary" - size="small" - clickable="true" - [disabled]="isReadonly()" - labelPlacement="top"> - </svg-icon> - <span class="icon-label-txt">{{mode === 'requirements' ? 'Add Requirement' : 'Add Capability'}}</span> - </div> - </div> - </div> - - <div class="empty-list-container" data-ng-if="isListEmpty() && !isLoading" data-tests-id="empty-list-container"> - <div class="empty-list-add-btn add-button-icon-and-label" data-ng-class="{'disabled': isReadonly()}" - data-ng-click="onAddBtnClicked()" data-tests-id="empty-list-add-btn"> - <svg-icon - name="plus-circle" - mode="primary" - size="x_large" - clickable="true" - [disabled]="isReadonly()"> - </svg-icon> - <div class="icon-label-txt">{{mode === 'requirements' ? 'Add Requirement' : 'Add Capability'}}</div> - </div> - </div> - - <div class="table-container-flex requirements-table" data-ng-if="mode=='requirements' && !isListEmpty()"> - <div class="table" data-ng-class="{'view-mode': isViewMode()}" data-tests-id="requirement-table"> - <div class="head flex-container"> - <div data-ng-repeat="header in editableRequirementsTableHeadersList track by $index" - data-ng-click="sort(header.property, requirementsSortTableDefined, false)" - class="table-header head-row hand flex-item {{header.property}}" - data-tests-id="table-header-{{header.property}}"> - {{header.title}} - <span data-ng-if="requirementsSortTableDefined.sortByField === header.property" - class="table-header-sort-arrow" data-tests-id="table-header-sort-arrow" - data-ng-class="{'down': requirementsSortTableDefined.reverse, 'up':!requirementsSortTableDefined.reverse}"> </span> - </div> - </div> - - <div class="body"> - <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="editable-table-data"> - <div data-ng-if="filteredRequirementsList.length === 0" class="no-row-text" - data-tests-id="no-rows-in-table"> - There are no requirements to display - - </div> - <div data-ng-repeat="req in filteredRequirementsList | orderBy:requirementsSortTableDefined.sortByField:requirementsSortTableDefined.reverse track by $index" - data-tests-id="reqRow"> - <div class="flex-container data-row" data-ng-class="{'editable-row': req.isCreatedManually}" - data-ng-click="req.isCreatedManually && onEditRequirement(req)"> - <div class="table-col-general flex-item text ellipsis-text" tooltips - tooltip-content="{{(!req.isCreatedManually ? req.ownerName + '.' : '') + req.name}}"> - <span data-tests-id="{{(!req.isCreatedManually ? req.ownerName + '.' : '') + req.name}}">{{(!req.isCreatedManually ? req.ownerName + '.' : '') + req.name}}</span> - </div> - <div class="table-col-general flex-item text ellipsis-text" tooltips - tooltip-content="{{req.capability}}"> - <span data-tests-id="{{req.capability}}">{{req.capability && cutToscaTypePrefix(req.capability, 'capabilities.')}}</span> - </div> - <div class="table-col-general flex-item text ellipsis-text" tooltips - tooltip-content="{{req.node}}"> - <span data-tests-id="{{req.node}}">{{req.node && cutToscaTypePrefix(req.node, "nodes.")}}</span> - </div> - <div class="table-col-general flex-item text ellipsis-text" tooltips - tooltip-content="{{req.relationship}}"> - <span data-tests-id="{{req.relationship}}">{{req.relationship && cutToscaTypePrefix(req.relationship, "relationships.")}}</span> - </div> - <div class="table-col-general flex-item text ellipsis-text occurrences-col" tooltips - tooltip-content="{{req.minOccurrences}} - {{req.maxOccurrences}}"> - <span data-tests-id="{{req.minOccurrences}} - {{req.maxOccurrences}}">{{req.minOccurrences}} - {{req.maxOccurrences}}</span> - </div> - <div class="table-col-general flex-item text other-col" data-tests-id="delete-req" - data-ng-class="{'disabled': isReadonly()}"> - <svg-icon name="trash-o" class="trash-icon" size="small" - data-ng-if="req.isCreatedManually && !isReadonly()" - data-ng-click="onDeleteReq($event, req)"></svg-icon> - </div> - </div> - </div> - </perfect-scrollbar> - </div> - - </div> - </div> - <div class="table-container-flex capabilities-table" data-ng-if="mode=='capabilities' && !isListEmpty()" - data-tests-id="capabilities-table"> - <div class="table" data-ng-class="{'view-mode': isViewMode()}"> - <div class="head flex-container"> - <div data-ng-repeat="header in editableCapabilitiesTableHeadersList track by $index" - data-ng-click="sort(header.property, capabilitiesSortTableDefined, true)" - class="table-header head-row hand flex-item {{header.property}}" - data-tests-id="header-{{header.property}}"> - {{header.title}} - <span data-ng-if="capabilitiesSortTableDefined.sortByField === header.property" - class="table-header-sort-arrow" data-tests-id=="table-header-sort-arrow" - data-ng-class="{'down': capabilitiesSortTableDefined.reverse, 'up':!capabilitiesSortTableDefined.reverse}"> </span> - </div> - </div> - - <div class="body"> - <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="editable-table-data"> - <div data-ng-if="filteredCapabilitiesList.length === 0" class="no-row-text" - data-tests-id="no-rows-in-table"> - There are no capabilities to display - </div> - <div data-ng-repeat-start="capability in filteredCapabilitiesList | orderBy:capabilitiesSortTableDefined.sortByField:capabilitiesSortTableDefined.reverse track by $index" - class="flex-container data-row" - data-ng-class="{'selected': capability.selected, 'editable-row': capability.isCreatedManually}" - data-ng-click="capability.isCreatedManually && onEditCapability(capability)" - data-tests-id="capabilities-table-row"> - - <div class="table-col-general flex-item text ellipsis-text" tooltips - tooltip-content="{{(!capability.isCreatedManually ? capability.ownerName + '.' : '') + capability.name}}"> - <span class="sprite-new arrow-up-small hand" - data-ng-class="{'hideme': !capability.properties.length, 'opened': capability.selected}" - data-ng-click="capability.selected = !capability.selected; $event.stopPropagation();"></span> - <span data-tests-id="{{(!capability.isCreatedManually ? capability.ownerName + '.' : '') + capability.name}}" - class="name-col" data-ng-class="{'opened': capability.selected}"> - {{(!capability.isCreatedManually ? capability.ownerName + '.' : '') + capability.name}} - </span> - </div> - <div class="table-col-general flex-item text ellipsis-text" tooltips - tooltip-content="{{capability.type}}"> - <span data-tests-id="{{capability.type}}">{{capability.type && cutToscaTypePrefix(capability.type, 'capabilities.')}}</span> - </div> - - <div class="table-col-general flex-item text description-col"> - <div data-tests-id="{{capability.description}}" class="multiline-ellipsis" - ellipsis="capability.description" max-chars="60">{{capability.description}} - </div> - </div> - - <div class="table-col-general flex-item text ellipsis-text" tooltips - tooltip-content="{{capability.validSourceTypes.join(',')}}"> - <span data-tests-id="{{capability.validSourceTypes.join(',')}}">{{capability.validSourceTypes.join(',')}}</span> - </div> - - <div class="table-col-general flex-item text ellipsis-text occurrences-col" tooltips - tooltip-content="{{capability.minOccurrences}} - {{capability.maxOccurrences}}"> - <span data-tests-id="{{capability.minOccurrences}} - {{capability.maxOccurrences}}">{{capability.minOccurrences}} - {{capability.maxOccurrences}}</span> - </div> - - <div class="table-col-general flex-item text other-col" data-tests-id="delete-cap" - data-ng-class="{'disabled': isReadonly()}"> - <svg-icon name="trash-o" class="trash-icon" size="small" - data-ng-if="capability.isCreatedManually && !isReadonly()" - data-ng-click="onDeleteCap($event, capability)"></svg-icon> - </div> - </div> - <div data-ng-repeat-end data-ng-if="capability.selected" class="item-opened properties-section"> - <p class="properties-title">Properties</p> - <div class="table-container-flex properties-table"> - <div class="table" data-ng-class="{'view-mode': true}"> - <div class="head flex-container"> - <div class="table-header head-row hand flex-item" - data-ng-repeat="header in capabilityPropertiesTableHeadersList track by $index" - data-ng-click="sort(header.property, propertiesSortTableDefined, false)"> - {{header.title}} - <span data-ng-if="propertiesSortTableDefined.sortByField === header.property" - class="table-header-sort-arrow" - data-ng-class="{'down': propertiesSortTableDefined.reverse, 'up':!propertiesSortTableDefined.reverse}"> </span> - </div> - </div> - - <div class="body"> - <div data-ng-repeat="property in capability.properties | orderBy:propertiesSortTableDefined.sortByField:propertiesSortTableDefined.reverse track by $index" - data-tests-id="propertyRow" - class="flex-container data-row"> - <div class="table-col-general flex-item text" - data-tests-id="{{property.name}}" - tooltips tooltip-content="{{property.name}}"> - {{property.name}} - </div> - <div class="table-col-general flex-item text" - data-tests-id="{{property.type}}" - tooltips tooltip-content="{{property.type}}"> - {{property.type}} - </div> - <div class="table-col-general flex-item text" - data-tests-id="{{property.schema.property.type}}" - tooltips tooltip-content="{{property.schema.property.type}}"> - {{property.schema.property.type}} - </div> - <div class="table-col-general flex-item text" - tooltips tooltip-content="{{property.description}}" - data-tests-id="{{property.description}}"> - {{property.description}} - </div> - </div> - </div> - - </div> - </div> - </div> - </perfect-scrollbar> - </div> - - </div> - </div> -</div> - diff --git a/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view-model.ts deleted file mode 100644 index 14b45cbdf3..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view-model.ts +++ /dev/null @@ -1,471 +0,0 @@ -/*- - * ============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. - */ -'use strict'; -import * as _ from "lodash"; -import {ComponentRef} from '@angular/core'; -import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model"; -import {ModalsHandler, ResourceType} from "app/utils"; -import {ComponentType} from "app/utils/constants"; -import { - Capability, PropertyModel, Requirement, Resource, - RelationshipTypesMap, NodeTypesMap, CapabilityTypesMap -} from "app/models"; -import {ComponentGenericResponse} from "app/ng2/services/responses/component-generic-response"; -import {ComponentServiceNg2} from "app/ng2/services/component-services/component.service"; -import {ToscaTypesServiceNg2} from "app/ng2/services/tosca-types.service"; -import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component'; -import {ModalService} from 'app/ng2/services/modal.service'; -import {RequirementsEditorComponent} from 'app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.component'; -import {CapabilitiesEditorComponent} from 'app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.component'; -import {ModalService as ModalServiceSdcUI} from "sdc-ui/lib/angular/modals/modal.service"; -import {IModalConfig} from "sdc-ui/lib/angular/modals/models/modal-config"; -import {ModalButtonComponent} from "sdc-ui/lib/angular/components"; - -export class SortTableDefined { - reverse:boolean; - sortByField:string; -} - -class RequirementUI extends Requirement { - isCreatedManually: boolean; - - constructor(input: Requirement, componentUniqueId: string) { - super(input); - this.isCreatedManually = input.ownerId === componentUniqueId; - } -} -class CapabilityUI extends Capability { - isCreatedManually: boolean; - - constructor(input: Capability, componentUniqueId: string) { - super(input); - this.isCreatedManually = input.ownerId === componentUniqueId; - } -} - -interface IReqAndCapabilitiesViewModelScope extends IWorkspaceViewModelScope { - requirementsTableHeadersList:Array<any>; - editableRequirementsTableHeadersList: Array<any>; - capabilitiesTableHeadersList:Array<any>; - editableCapabilitiesTableHeadersList: Array<any>; - capabilityPropertiesTableHeadersList:Array<any>; - requirementsSortTableDefined:SortTableDefined; - capabilitiesSortTableDefined:SortTableDefined; - propertiesSortTableDefined:SortTableDefined; - requirements: Array<RequirementUI>; - filteredRequirementsList: Array<RequirementUI>; - capabilities: Array<CapabilityUI>; - filteredCapabilitiesList: Array<CapabilityUI>; - mode:string; - filteredProperties:Array<Array<PropertyModel>>; - searchText:string; - isEditable: boolean; - modalInstance: ComponentRef<ModalComponent>; - filter: {txt: string; show: boolean}; - - sort(sortBy: string, sortByTableDefined: SortTableDefined, autoCollapseCapabilitiesRows: boolean): void; - sortByIsCreatedManually(arrToSort: Array<RequirementUI|CapabilityUI>): Array<any>; - updateProperty(property:PropertyModel, indexInFilteredProperties:number):void; - allCapabilitiesSelected(selected:boolean):void; - onAddBtnClicked(): void; - onEditRequirement(req: RequirementUI): void; - onEditCapability(cap: CapabilityUI): void; - onDeleteReq(event, req: RequirementUI): void; - onDeleteCap(event, cap: CapabilityUI): void; - onFilter(): void; - isListEmpty(): boolean; - onSwitchTab(): void; - onSearchIconClick(): void; - cutToscaTypePrefix(valToCut: string, textToStartCut: string): string; - isReadonly(): boolean; -} - -export class ReqAndCapabilitiesViewModel { - - static '$inject' = [ - '$scope', - '$filter', - 'ModalsHandler', - 'ComponentServiceNg2', - 'ToscaTypesServiceNg2', - 'ModalServiceNg2', - 'ModalServiceSdcUI' - ]; - - - constructor(private $scope:IReqAndCapabilitiesViewModelScope, - private $filter:ng.IFilterService, - private ModalsHandler:ModalsHandler, - private ComponentServiceNg2: ComponentServiceNg2, - private ToscaTypesServiceNg2: ToscaTypesServiceNg2, - private ModalServiceNg2: ModalService, - private ModalServiceSdcUI: ModalServiceSdcUI) { - - this.initCapabilitiesAndRequirements(); - this.fetchCapabilitiesRelatedData(); - } - - private initCapabilitiesAndRequirements = (): void => { - - this.$scope.isEditable = this.getIsEditableByComponentType(); - this.$scope.isLoading = true; - this.ComponentServiceNg2.getCapabilitiesAndRequirements(this.$scope.component.componentType, this.$scope.component.uniqueId).subscribe((response: ComponentGenericResponse) => { - this.$scope.component.capabilities = response.capabilities; - this.$scope.component.requirements = response.requirements; - this.initScope(); - this.$scope.isLoading = false; - }, () => { - this.$scope.isLoading = false; - }); - - } - - private openEditPropertyModal = (property:PropertyModel, indexInFilteredProperties:number):void => { - //...because there is not be api - _.forEach(this.$scope.filteredProperties[indexInFilteredProperties], (prop:PropertyModel)=> { - prop.readonly = true; - }); - this.ModalsHandler.openEditPropertyModal(property, this.$scope.component, this.$scope.filteredProperties[indexInFilteredProperties], false, "component", this.$scope.component.uniqueId).then(() => { - - }); - }; - - private initScope = (currentMode = 'requirements'): void => { - this.$scope.isReadonly = (): boolean => { - return this.$scope.isViewMode() || !this.$scope.isDesigner(); - }; - this.$scope.filter = {txt: '', show: false}; - this.$scope.requirementsSortTableDefined = { - reverse: false, - sortByField: this.$scope.isEditable ? 'other' : 'name' - }; - this.$scope.capabilitiesSortTableDefined = { - reverse: false, - sortByField: this.$scope.isEditable ? 'other' : '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.editableRequirementsTableHeadersList = [ - {title: 'Name', property: 'name'}, - {title: 'Capability', property: 'capability'}, - {title: 'Node', property: 'node'}, - {title: 'Relationship', property: 'relationship'}, - {title: 'Occurrences', property: 'occurrences'}, - {title: '●●●', property: 'other'} - ]; - this.$scope.editableCapabilitiesTableHeadersList = [ - {title: 'Name', property: 'name'}, - {title: 'Type', property: 'type'}, - {title: 'Description', property: 'description'}, - {title: 'Valid Sources', property: 'valid-sources'}, - {title: 'Occurrences', property: 'occurrences'}, - {title: '●●●', property: 'other'} - ]; - 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 = currentMode; - this.$scope.requirements = []; - _.forEach(this.$scope.component.requirements, (req:Array<Requirement>, capName)=> { - let reqUIList: Array<RequirementUI> = _.map(req, reqObj => new RequirementUI(reqObj, this.$scope.component.uniqueId)); - this.$scope.requirements = this.$scope.requirements.concat(reqUIList); - }); - this.$scope.filteredRequirementsList = this.$scope.requirements; - - this.$scope.capabilities = []; - _.forEach(this.$scope.component.capabilities, (cap:Array<Capability>, capName)=> { - let capUIList: Array<CapabilityUI> = _.map(cap, capObj => new CapabilityUI(capObj, this.$scope.component.uniqueId)); - this.$scope.capabilities = this.$scope.capabilities.concat(capUIList); - }); - - this.$scope.sortByIsCreatedManually = (arrToSort: Array<RequirementUI|CapabilityUI>): Array<any> => { - return arrToSort.sort((elem1: RequirementUI|CapabilityUI, elem2: RequirementUI|CapabilityUI) => +elem2.isCreatedManually - (+elem1.isCreatedManually)); - }; - this.$scope.filteredCapabilitiesList = this.$scope.sortByIsCreatedManually(this.$scope.capabilities); - this.$scope.filteredRequirementsList = this.$scope.sortByIsCreatedManually(this.$scope.requirements); - - this.$scope.sort = (sortBy: string, sortByTableDefined: SortTableDefined, autoCollapseCapabilitiesRows: boolean): void => { - sortByTableDefined.reverse = (sortByTableDefined.sortByField === sortBy) ? !sortByTableDefined.reverse : false; - sortByTableDefined.sortByField = sortBy; - if (autoCollapseCapabilitiesRows) { - this.$scope.allCapabilitiesSelected(false); - } - }; - - this.$scope.updateProperty = (property:PropertyModel, indexInFilteredProperties:number):void => { - this.openEditPropertyModal(property, indexInFilteredProperties); - }; - - this.$scope.allCapabilitiesSelected = (selected:boolean):void => { - _.forEach(this.$scope.capabilities, (cap:Capability)=> { - cap.selected = selected; - }); - }; - this.$scope.onAddBtnClicked = (): void => { - switch (this.$scope.mode) { - case 'requirements': - this.openRequirementsModal(); - break; - case 'capabilities': - this.openCapabilitiesModal(); - break; - } - }; - this.$scope.onEditRequirement = (req: RequirementUI): void => { - this.openRequirementsModal(req); - }; - this.$scope.onEditCapability = (cap: CapabilityUI): void => { - this.openCapabilitiesModal(cap); - }; - this.$scope.onDeleteReq = (event: Event, req: RequirementUI): void => { - event.stopPropagation(); - this.ModalServiceSdcUI.openAlertModal('Delete Requirement', - `Are you sure you want to delete requirement: ${req.name}?`, 'OK', () => this.deleteRequirement(req), 'Cancel'); - }; - this.$scope.onDeleteCap = (event: Event, cap: CapabilityUI): void => { - event.stopPropagation(); - this.ModalServiceSdcUI.openAlertModal('Delete Capability', - `Are you sure you want to delete capability: ${cap.name}?`, 'OK', () => this.deleteCapability(cap), 'Cancel'); - }; - this.$scope.onSearchIconClick = (): void => { - this.$scope.filter.show = !!this.$scope.filter.txt || !this.$scope.filter.show; - }; - this.$scope.onFilter = (): void => { - switch (this.$scope.mode) { - case 'requirements': - this.$scope.filteredRequirementsList = _.filter(this.$scope.requirements, req => req.name.includes(this.$scope.filter.txt)); - break; - case 'capabilities': - this.$scope.filteredCapabilitiesList = _.filter(this.$scope.capabilities, cap => cap.name.includes(this.$scope.filter.txt)); - break; - } - }; - this.$scope.isListEmpty = (): boolean => { - switch (this.$scope.mode) { - case 'requirements': - return this.$scope.requirements.length === 0; - case 'capabilities': - return this.$scope.capabilities.length === 0; - } - }; - this.$scope.onSwitchTab = (): void => { - this.$scope.mode = this.$scope.mode === 'requirements' ? 'capabilities' : 'requirements'; - this.$scope.filter.txt = ''; - this.$scope.filter.show = false; - this.$scope.filteredRequirementsList = this.$scope.requirements; - this.$scope.filteredCapabilitiesList = this.$scope.capabilities; - }; - this.$scope.cutToscaTypePrefix = (valToCut: string, textToStartCut: string): string => { - let index = valToCut.indexOf(textToStartCut); - return index !== -1 ? valToCut.substr(index + textToStartCut.length) : valToCut; - }; - }; - - private getIsEditableByComponentType() { - if (this.$scope.componentType === ComponentType.SERVICE) { - return true; - } - if (this.$scope.component.isResource()) { - let componentAsResource: Resource = <Resource>this.$scope.component; - return componentAsResource.resourceType === ResourceType.VF || - componentAsResource.resourceType === ResourceType.PNF; - } - return false; - }; - - private fetchCapabilitiesRelatedData() { - if (this.$scope.isEditable) { - this.$scope.capabilityTypesList = []; - this.ToscaTypesServiceNg2.fetchCapabilityTypes().subscribe((result: CapabilityTypesMap) => { - _.forEach(result, capabilityType => this.$scope.capabilityTypesList.push(capabilityType)); - }); - this.$scope.nodeTypesList = []; - this.ToscaTypesServiceNg2.fetchNodeTypes().subscribe((result: NodeTypesMap) => { - _.forEach(result, nodeType => this.$scope.nodeTypesList.push(nodeType)); - }); - this.$scope.relationshipTypesList = []; - this.ToscaTypesServiceNg2.fetchRelationshipTypes().subscribe((result: RelationshipTypesMap) => { - _.forEach(result, relshipType => this.$scope.relationshipTypesList.push(relshipType)); - }); - } - } - - private openRequirementsModal(req?: RequirementUI) { - let modalConfig: IModalConfig = { - size: 'md', - title: (req ? 'Update' : 'Add') + ' Requirement', - type: 'custom', - buttons: [ - { - id: 'saveButton', - text: (req ? 'Update' : 'Create'), - size: "'x-small'", - callback: () => this.createOrUpdateRequirement(), - closeModal: true - }, - {text: "Cancel", size: "'x-small'", closeModal: true}] - }; - let modalInputs = { - requirement: req, - relationshipTypesList: this.$scope.relationshipTypesList, - nodeTypesList: this.$scope.nodeTypesList, - capabilityTypesList: this.$scope.capabilityTypesList, - isReadonly: this.$scope.isViewMode() || !this.$scope.isDesigner(), - validityChangedCallback: this.getDisabled - }; - - this.ModalServiceSdcUI.openCustomModal(modalConfig, RequirementsEditorComponent, {input: modalInputs}); - } - - private openCapabilitiesModal(cap?: CapabilityUI) { - let modalConfig: IModalConfig = { - size: 'md', - title: (cap ? 'Update' : 'Add') + ' Capability', - type: 'custom', - buttons: [ - { - id: 'saveButton', - text: (cap ? 'Update' : 'Create'), - size: "'x-small'", - callback: () => this.createOrUpdateCapability(), - closeModal: true - }, - {text: "Cancel", size: "'x-small'", closeModal: true}] - }; - let modalInputs = { - capability: cap, - capabilityTypesList: this.$scope.capabilityTypesList, - isReadonly: this.$scope.isViewMode() || !this.$scope.isDesigner(), - validityChangedCallback: this.getDisabled - }; - - this.ModalServiceSdcUI.openCustomModal(modalConfig, CapabilitiesEditorComponent, {input: modalInputs}); - } - - getDisabled = (shouldEnable: boolean): void => { - let saveButton: ModalButtonComponent = this.ModalServiceSdcUI.getCurrentInstance().getButtonById('saveButton'); - saveButton.disabled = this.$scope.isViewMode() || !this.$scope.isDesigner() || !shouldEnable; - }; - - private createOrUpdateRequirement() { - let requirement = this.ModalServiceSdcUI.getCurrentInstance().innerModalContent.instance.requirementData; - this.$scope.isLoading = true; - if (!requirement.uniqueId) { - this.ComponentServiceNg2.createRequirement(this.$scope.component, requirement).subscribe(result => { - this.$scope.requirements.unshift(new RequirementUI(result[0], this.$scope.component.uniqueId)); - this.$scope.isLoading = false; - }, () => { - this.$scope.isLoading = false; - }); - } - else { - this.ComponentServiceNg2.updateRequirement(this.$scope.component, requirement).subscribe(result => { - let index = this.$scope.requirements.findIndex(req => result[0].uniqueId === req.uniqueId); - this.$scope.requirements[index] = new RequirementUI(result[0], this.$scope.component.uniqueId); - this.$scope.isLoading = false; - this.$scope.$apply(); - }, () => { - this.$scope.isLoading = false; - }); - } - } - - private createOrUpdateCapability() { - let capability = this.ModalServiceSdcUI.getCurrentInstance().innerModalContent.instance.capabilityData; - this.$scope.isLoading = true; - if (!capability.uniqueId) { - this.ComponentServiceNg2.createCapability(this.$scope.component, capability).subscribe(result => { - this.$scope.capabilities.unshift(new CapabilityUI(result[0], this.$scope.component.uniqueId)); - this.$scope.isLoading = false; - }, () => { - this.$scope.isLoading = false; - }); - } - else { - this.ComponentServiceNg2.updateCapability(this.$scope.component, capability).subscribe(result => { - let index = this.$scope.capabilities.findIndex(cap => result[0].uniqueId === cap.uniqueId); - this.$scope.capabilities[index] = new CapabilityUI(result[0], this.$scope.component.uniqueId); - this.$scope.isLoading = false; - this.$scope.$apply(); - }, () => { - this.$scope.isLoading = false; - }); - } - } - - private deleteRequirement(req) { - this.$scope.isLoading = true; - this.ComponentServiceNg2.deleteRequirement(this.$scope.component, req.uniqueId).subscribe(() => { - this.ComponentServiceNg2.getCapabilitiesAndRequirements(this.$scope.componentType, this.$scope.component.uniqueId).subscribe(response => { - this.$scope.component.requirements = response.requirements; - this.initScope('requirements'); - this.$scope.isLoading = false; - }, () => { - this.$scope.isLoading = false; - }); - }, () => { - this.$scope.isLoading = false; - }); - } - - private deleteCapability(cap) { - this.$scope.isLoading = true; - this.ComponentServiceNg2.deleteCapability(this.$scope.component, cap.uniqueId).subscribe(() => { - this.ComponentServiceNg2.getCapabilitiesAndRequirements(this.$scope.componentType, this.$scope.component.uniqueId).subscribe(response => { - this.$scope.component.capabilities = response.capabilities; - this.initScope('capabilities'); - this.$scope.isLoading = false; - }, () => { - this.$scope.isLoading = false; - }); - }, () => { - this.$scope.isLoading = false; - }); - } -} - diff --git a/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view.html b/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view.html deleted file mode 100644 index c661afe0ba..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view.html +++ /dev/null @@ -1,159 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<div class="workspace-req-and-cap"> - <div class="tabs"> - <button data-tests-id="req-tab" data-ng-click="mode='requirements';filterTerms='';" class="tlv-btn" data-ng-class="{'selected':mode=='requirements'}">Requirements({{requirements.length||'0'}})</button> - <button data-tests-id="cap-tab" data-ng-click="mode='capabilities';filterTerms='';" class="tlv-btn" data-ng-class="{'selected':mode=='capabilities'}">Capabilities({{capabilities.length||'0'}})</button> - </div> - <div class="expand-collapse-buttons" data-ng-if="mode=='capabilities'"> - <span class="sprite-new expand-all" data-ng-click="allCapabilitiesSelected(true)"></span> - <span class="sprite-new collapse-all" data-ng-click="allCapabilitiesSelected(false)"></span> - </div> - <div class="search"> - <input id="search-box" data-tests-id="search-box" type="search" placeholder="Search" data-ng-model-options="{debounce: 200}" data-ng-model="filterTerms"/> - <div class="search-icon-container"> - <span class="search-icon sprite-new search-white-icon"></span> - </div> - </div> - <div class="table-container-flex requirements-table" data-ng-if="mode=='requirements'"> - <div class="table" data-ng-class="{'view-mode': isViewMode()}"> - <div class="head flex-container"> - <div class="table-header head-row hand flex-item" data-ng-repeat="header in requirementsTableHeadersList track by $index" data-ng-click="sort(header.property, requirementsSortTableDefined)">{{header.title}} - <span data-ng-if="requirementsSortTableDefined.sortByField === header.property" class="table-header-sort-arrow" data-ng-class="{'down': requirementsSortTableDefined.reverse, 'up':!requirementsSortTableDefined.reverse}"> </span> - </div> - </div> - - <div class="body"> - <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container"> - <div data-ng-if="requirements.length === 0" class="no-row-text"> - There are no requirements to display - - </div> - <div data-ng-repeat="req in requirements | orderBy:requirementsSortTableDefined.sortByField:requirementsSortTableDefined.reverse | filter: {filterTerm:filterTerms} track by $index" - class="flex-container data-row" data-tests-id="reqRow"> - - <div class="table-col-general flex-item text" tooltips tooltip-content="{{req.name}}"> - <span data-tests-id="{{req.name}}">{{req.name}}</span> - </div> - <div class="table-col-general flex-item text" tooltips tooltip-content="{{req.capability}}"> - <span data-tests-id="{{req.capability}}">{{req.capability.substring("tosca.capabilities.".length)}}</span> - </div> - <div class="table-col-general flex-item text" tooltips tooltip-content="{{req.node}}"> - <span data-tests-id="{{req.node}}">{{req.node.substring("tosca.nodes.".length)}}</span> - </div> - <div class="table-col-general flex-item text" tooltips tooltip-content="{{req.relationship}}"> - <span data-tests-id="{{req.relationship}}">{{req.relationship.substring("tosca.relationships.".length)}}</span> - </div> - <div class="table-col-general flex-item text" data-tests-id="{{}}" data-ng-bind=""></div> - <div class="table-col-general flex-item text" tooltips tooltip-content="{{req.minOccurrences}},{{req.maxOccurrences}}"> - <span data-tests-id="{{req.minOccurrences}},{{req.maxOccurrences}}">{{req.minOccurrences}},{{req.maxOccurrences}}</span> - </div> - </div> - </perfect-scrollbar> - </div> - - </div> - </div> - <div class="table-container-flex capabilities-table" data-ng-if="mode=='capabilities'"> - <div class="table" data-ng-class="{'view-mode': isViewMode()}"> - <div class="head flex-container"> - <div class="table-header head-row hand flex-item" data-ng-repeat="header in capabilitiesTableHeadersList track by $index" data-ng-click="sort(header.property, capabilitiesSortTableDefined)">{{header.title}} - <span data-ng-if="capabilitiesSortTableDefined.sortByField === header.property" class="table-header-sort-arrow" data-ng-class="{'down': capabilitiesSortTableDefined.reverse, 'up':!capabilitiesSortTableDefined.reverse}"> </span> - </div> - </div> - - <div class="body"> - <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container"> - <div data-ng-if="capabilities.length === 0" class="no-row-text"> - There are no capabilities to display - - </div> - <div data-ng-repeat-start="capability in capabilities | orderBy:capabilitiesSortTableDefined.sortByField:capabilitiesSortTableDefined.reverse | filter: {filterTerm:filterTerms} track by $index" - class="flex-container data-row" data-ng-class="{'selected': capability.selected}" - data-ng-click="capability.selected = !capability.selected" data-tests-id="capabilities-table-row"> - - <div class="table-col-general flex-item text" tooltips tooltip-content="{{capability.name}}"> - <span class="sprite-new arrow-up-small" data-ng-class="{'opened': capability.selected}"></span> - <span data-tests-id="{{capability.name}}">{{capability.name}}</span> - </div> - <div class="table-col-general flex-item text" tooltips tooltip-content="{{capability.type}}"> - <span data-tests-id="{{capability.type}}">{{capability.type.replace("tosca.capabilities.","")}}</span> - </div> - - <div class="table-col-general flex-item text" tooltips tooltip-content="{{capability.description}}"> - <span data-tests-id="{{capability.description}}">{{capability.description}}</span> - </div> - - <div class="table-col-general flex-item text" tooltips tooltip-content="{{capability.validSourceTypes.join(',')}}"> - <span data-tests-id="{{capability.validSourceTypes.join(',')}}">{{capability.validSourceTypes.join(',')}}</span> - </div> - - <div class="table-col-general flex-item text" tooltips tooltip-content="{{capability.minOccurrences}},{{capability.maxOccurrences}}"> - <span data-tests-id="{{capability.minOccurrences}},{{capability.maxOccurrences}}">{{capability.minOccurrences}},{{capability.maxOccurrences}}</span> - </div> - </div> - <div data-ng-repeat-end="" data-ng-if="capability.selected" class="item-opened"> - <p class="properties-title">Properties</p> - <div class="table-container-flex properties-table"> - <div class="table" data-ng-class="{'view-mode': isViewMode()}"> - <div class="head flex-container"> - <div class="table-header head-row hand flex-item" data-ng-repeat="header in capabilityPropertiesTableHeadersList track by $index" data-ng-click="sort(header.property, propertiesSortTableDefined)">{{header.title}} - <span data-ng-if="propertiesSortTableDefined.sortByField === header.property" class="table-header-sort-arrow" data-ng-class="{'down': propertiesSortTableDefined.reverse, 'up':!propertiesSortTableDefined.reverse}"> </span> - </div> - </div> - - <div class="body"> - <div data-ng-if="capability.properties.length === 0" class="no-row-text"> - There are no properties to display - </div> - <div data-ng-repeat="property in filteredProperties[$parent.$index]=(capability.properties | orderBy:propertiesSortTableDefined.sortByField:propertiesSortTableDefined.reverse) track by $index" - data-tests-id="propertyRow" - class="flex-container data-row"> - - <div class="table-col-general flex-item text" tooltips tooltip-content="{{property.name}}"> - <a data-tests-id="{{property.name}}" - data-ng-click="updateProperty(property, $parent.$index); $event.stopPropagation();" - data-ng-class="{'disabled': isViewMode()}">{{property.name}}</a> - - </div> - - <div class="table-col-general flex-item text" - data-tests-id="{{property.type}}" - tooltips tooltip-content="{{property.type}}" - data-ng-bind="property.type"> - </div> - <div class="table-col-general flex-item text" - data-tests-id="{{property.schema.property.type}}" - tooltips tooltip-content="{{property.schema.property.type}}" - data-ng-bind="property.schema.property.type"> - </div> - <div class="table-col-general flex-item text" tooltips tooltip-content="{{property.description}}"> - <span data-tests-id="{{property.description}}" data-ng-bind="property.description"></span> - </div> - </div> - </div> - - </div> - </div> - </div> - </perfect-scrollbar> - </div> - - </div> - </div> -</div> - diff --git a/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities.less b/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities.less deleted file mode 100644 index 928f6719c6..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities.less +++ /dev/null @@ -1,418 +0,0 @@ -.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; - } - } - } - .add-button { - color: @main_color_a; - } - .add-button, .expand-collapse-buttons { - float: right; - margin-left: 11px; - margin-top: 10px; - &, span { - .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; - } - - .editable-table-data { - max-height: 430px; - } - - .data-row { - &:not(.editable-row) { - background: @tlv_color_t; - color: @main_color_n; - } - &.editable-row { - cursor: pointer; - } - .sprite-new.delete-icon { - visibility: hidden; - } - &:hover { - .sprite-new.delete-icon { - visibility: visible; - } - } - } - - &.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; - - } - } - - } - -} - -.workspace-req-and-cap-editable { - .tabs-header { - display: flex; - justify-content: space-between; - border-bottom: 1px solid @main_color_o; - .req-and-cap-tabs { - display: flex; - .tab { - font-family: @font-opensans-regular; - font-size: 22px; - padding: 5px; - .hand; - &:first-of-type { - margin-right: 35px; - } - &.selected { - color: @main_color_a; - border-bottom: 2px solid @main_color_a; - } - } - } - .buttons-in-right { - display: flex; - .search { - display: flex; - height: min-content; - margin-top: 10px; - padding-right: 11px; - border-right: 1px solid @main_color_o; - #search-box { - border: none; - border-bottom: 1px solid @main_color_o; - text-indent: 10px; - &:focus { - outline: none; - } - } - .search-icon-container { - margin-top: 3px; - padding-top: 4px; - } - - } - .add-button-icon-and-label { - font-size: 14px; - margin-left: 11px; - margin-top: 10px; - padding-top: 5px; - /deep/ svg-icon { - vertical-align: bottom; - } - &:hover { - &:not(.disabled) { - cursor: pointer; - color: @sdcui_color_light-blue; - } - } - } - } - } - .add-button-icon-and-label { - .icon-label-txt { - text-transform: uppercase; - font-family: @font-opensans-medium; - color: @main_color_a; - &:hover { - &:not(.disabled) { - color: @sdcui_color_light-blue; - } - } - } - } - .empty-list-container { - width: 100%; - display: flex; - justify-content: center; - - .empty-list-add-btn { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - border: 1px solid @main_color_o; - margin-top: 50px; - height: 229px; - width: 480px; - &.disabled { - pointer-events: none; - } - &:hover { - &:not(.disabled) { - border: 1px solid @main_color_a; - cursor: pointer; - } - } - .icon-label-txt { - margin-top: 15px; - font-size: 16px; - } - } - } - .table-container-flex .table { - .head .head-row { - text-align: left; - &.description { - flex: 2; - } - &.other { - flex: 0.25; - text-align: center; - } - &.occurrences { - flex: 0.75; - } - } - .body .data-row { - border-bottom: none; - border-top: @main_color_o solid 1px; - .ellipsis-text { - overflow: hidden; - text-overflow: ellipsis; - } - &:not(.editable-row) { - background-color: @tlv_color_t; - cursor: default; - color: @main_color_n; - } - &.editable-row { - cursor: pointer; - .table-col-general:hover { - color: @main_color_b; - } - } - &.selected { - background-color: @tlv_color_v; - .name-col { - color: @main_color_a; - } - .sprite-new.arrow-up-small { - background-position: -858px -137px; - margin-bottom: 2px; - } - } - .description-col { - flex: 2; - } - .occurrences-col { - flex: 0.75; - } - .other-col { - display: flex; - justify-content: center; - align-items: center; - flex: 0.25; - .trash-icon { - visibility: hidden; - } - } - &:hover { - .trash-icon { - visibility: visible; - } - } - .multiline-ellipsis { - line-height: 1.5em; - padding: 1px 0 1px 0; - /deep/ .ellipsis-directive-more-less { - float: none; - margin-left: 5px; - color: @main_color_a; - } - } - } - } - - .item-opened.properties-section { - border: 4px solid @tlv_color_v !important; - max-height: 263px; - overflow: auto; - .properties-title { - .s_10; - margin-top: 10px; - } - .properties-table { - &.table-container-flex { - margin-top: 18px; - } - .table { - .head { - border-bottom: 1px solid @main_color_o; - } - .head, .table-col-general { - background-color: @main_color_p; - } - } - } - } -}
\ No newline at end of file diff --git a/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view-model.ts deleted file mode 100644 index a1f8152cea..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view-model.ts +++ /dev/null @@ -1,105 +0,0 @@ -/*- - * ============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========================================================= - */ - -'use strict'; -import * as _ from "lodash"; -import {ArtifactModel, IFileDownload} from "app/models"; -import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model"; -import {ComponentGenericResponse} from "../../../../ng2/services/responses/component-generic-response"; -import {ComponentServiceNg2} from "../../../../ng2/services/component-services/component.service"; - -export interface IToscaArtifactsScope extends IWorkspaceViewModelScope { - artifacts:Array<ArtifactModel>; - tableHeadersList:Array<any>; - artifactType:string; - downloadFile:IFileDownload; - isLoading:boolean; - sortBy:string; - reverse:boolean; - - getTitle():string; - download(artifact:ArtifactModel):void; - sort(sortBy:string):void; - showNoArtifactMessage():boolean; -} - -export class ToscaArtifactsViewModel { - - static '$inject' = [ - '$scope', - '$filter', - 'ComponentServiceNg2' - ]; - - constructor(private $scope:IToscaArtifactsScope, - private $filter:ng.IFilterService, - private ComponentServiceNg2:ComponentServiceNg2) { - this.initToscaArtifacts(); - } - - private initToscaArtifacts = (): void => { - - if(!this.$scope.component.toscaArtifacts) { - this.$scope.isLoading = true; - this.ComponentServiceNg2.getComponentToscaArtifacts(this.$scope.component).subscribe((response:ComponentGenericResponse) => { - this.$scope.component.toscaArtifacts = response.toscaArtifacts; - this.initScope(); - this.$scope.isLoading = false; - }, () => { - this.$scope.isLoading = false; - }); - } else { - this.initScope(); - } - } - - private initScope = ():void => { - this.$scope.isLoading = false; - this.$scope.sortBy = 'artifactDisplayName'; - this.$scope.reverse = false; - this.$scope.setValidState(true); - this.$scope.artifactType = 'informational'; - this.$scope.getTitle = ():string => { - return this.$filter("resourceName")(this.$scope.component.name) + ' Artifacts'; - - }; - - this.$scope.tableHeadersList = [ - {title: 'Name', property: 'artifactDisplayName'}, - {title: 'Type', property: 'artifactType'}, - {title: 'Version', property: 'artifactVersion'} - ]; - - this.$scope.artifacts = <ArtifactModel[]>_.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/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view.html b/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view.html deleted file mode 100644 index b354e7a544..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view.html +++ /dev/null @@ -1,65 +0,0 @@ -<!-- - ~ Copyright (C) 2018 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. ---> - -<div class="workspace-tosca-artifact"> - <div class="table-container-flex"> - <div class="table" data-ng-class="{'view-mode': isViewMode()}"> - <div class="head flex-container"> - <div class="table-header head-row hand flex-item" ng-repeat="header in tableHeadersList track by $index" data-ng-click="sort(header.property)">{{header.title}} - <span data-ng-show="sortBy === header.property" class="table-header-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"> </span> - </div> - <div class="table-no-text-header head-row flex-item"></div> - </div> - <div class="body"> - <perfect-scrollbar suppress-scroll-x="true" scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container"> - <div data-ng-if="showNoArtifactMessage()" class="no-row-text" data-ng-class="{'disabled': isDisableMode()}"> - There are no TOSCA artifacts to display - </div> - <div data-ng-repeat-start="artifact in artifacts| orderBy:sortBy:reverse track by $index" - class="flex-container data-row" data-tests-id="{{artifact.artifactDisplayName}}" - data-ng-class="{'selected': artifact.selected}"> - - <div class="table-col-general flex-item" data-ng-click="artifact.selected = !artifact.selected" data-tests-id="name-{{$index}}"> - <span class="sprite table-arrow" data-ng-class="{'opened': artifact.selected}"></span> - {{artifact.artifactDisplayName}} - </div> - - <div class="table-col-general flex-item" data-ng-click="artifact.selected = !artifact.selected" data-tests-id="type-{{$index}}"> - {{artifact.artifactType}} - </div> - - <div class="table-col-general flex-item" data-ng-click="artifact.selected = !artifact.selected" data-tests-id="version-{{$index}}"> - {{artifact.artifactVersion}} - </div> - - <div class="table-btn-col flex-item download-icon-container"> - <button class="table-download-btn tosca" download-artifact data-tests-id="download-{{artifact.artifactDisplayName}}" - data-ng-if="artifact.artifactName" component="component" artifact="artifact" show-loader="true"></button> - </div> - </div> - <div data-ng-repeat-end="" data-ng-if="artifact.selected" class="item-opened" data-tests-id="details-{{$index}}"> - <div><span class="details-title">Label:</span> {{artifact.artifactLabel}}</div> - <div><span class="details-title">UUID:</span> {{artifact.artifactUUID}}</div> - <div><span class="details-title">Description:</span> {{artifact.description}}</div> - - - </div> - - </perfect-scrollbar> - </div> - </div> - </div> -</div> diff --git a/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less b/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less deleted file mode 100644 index 23be3c3548..0000000000 --- a/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less +++ /dev/null @@ -1,77 +0,0 @@ -.workspace-tosca-artifact { - width: 100%; - 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: 0; - .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; - } - - .flex-item:nth-child(4) { - 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; - - } - } - - - } - -} - - diff --git a/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts b/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts index f4bbed2c96..11667283b2 100644 --- a/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts @@ -22,103 +22,110 @@ * Created by obarda on 3/30/2016. */ 'use strict'; -import * as _ from "lodash"; +import * as _ from 'lodash'; import { - IUserProperties, IAppMenu, Resource, Component, Plugin, PluginsConfiguration, PluginDisplayOptions, - RelationshipTypeModel, NodeTypeModel, CapabilityTypeModel -} from "app/models"; + IUserProperties, + IAppMenu, + Resource, + Component, + Plugin, + PluginsConfiguration, + PluginDisplayOptions +} from 'app/models'; import { - WorkspaceMode, ComponentFactory, ChangeLifecycleStateHandler, Role, ComponentState, MenuItemGroup, MenuHandler, - MenuItem, ModalsHandler, States, EVENTS, CHANGE_COMPONENT_CSAR_VERSION_FLAG, ResourceType, PREVIOUS_CSAR_COMPONENT -} from "app/utils"; + MenuItem, ModalsHandler, States, EVENTS, CHANGE_COMPONENT_CSAR_VERSION_FLAG, ResourceType, PREVIOUS_CSAR_COMPONENT, + WorkspaceMode, ComponentFactory, ChangeLifecycleStateHandler, Role, ComponentState, MenuItemGroup, MenuHandler +} from 'app/utils'; import { EventListenerService, - EntityService, - ProgressService, - CacheService, - LeftPaletteLoaderService -} from "app/services"; -import {FileUploadModel} from "../../directives/file-upload/file-upload"; -import {AutomatedUpgradeService} from "../../ng2/pages/automated-upgrade/automated-upgrade.service"; -import {ComponentServiceNg2} from "../../ng2/services/component-services/component.service"; -import {EventBusService} from "../../ng2/services/event-bus.service"; -import {PluginsService} from "../../ng2/services/plugins.service"; -import {IDependenciesServerResponse} from "../../ng2/services/responses/dependencies-server-response"; + LeftPaletteLoaderService, + ProgressService +} from 'app/services'; +import { + CacheService +} from 'app/services-ng2'; +import { AutomatedUpgradeService } from '../../ng2/pages/automated-upgrade/automated-upgrade.service'; +import { CatalogService } from '../../ng2/services/catalog.service'; +import { ComponentServiceNg2 } from '../../ng2/services/component-services/component.service'; +import { EventBusService } from '../../ng2/services/event-bus.service'; +import { HomeService } from '../../ng2/services/home.service'; +import { PluginsService } from '../../ng2/services/plugins.service'; +import { IDependenciesServerResponse } from '../../ng2/services/responses/dependencies-server-response'; +import { WorkspaceNg1BridgeService } from '../../ng2/pages/workspace/workspace-ng1-bridge-service'; +import { WorkspaceService } from '../../ng2/pages/workspace/workspace.service'; export interface IWorkspaceViewModelScope extends ng.IScope { - isLoading:boolean; - isCreateProgress:boolean; - component:Component; - originComponent:Component; - componentType:string; - importFile:any; - leftBarTabs:MenuItemGroup; - isNew:boolean; - isFromImport:boolean; - isValidForm:boolean; - isActiveTopBar:boolean; - mode:WorkspaceMode; - breadcrumbsModel:Array<MenuItemGroup>; - sdcMenu:IAppMenu; - changeLifecycleStateButtons:any; - version:string; - versionsList:Array<any>; - changeVersion:any; - isComposition:boolean; - isDeployment:boolean; - isPlugins:boolean; - $state:ng.ui.IStateService; - user:IUserProperties; - thirdParty:boolean; - disabledButtons:boolean; - menuComponentTitle:string; - progressService:ProgressService; - progressMessage:string; + isLoading: boolean; + isCreateProgress: boolean; + component: Component; + originComponent: Component; + componentType: string; + importFile: any; + leftBarTabs: MenuItemGroup; + isNew: boolean; + isFromImport: boolean; + isValidForm: boolean; + isActiveTopBar: boolean; + mode: WorkspaceMode; + breadcrumbsModel: Array<MenuItemGroup>; + sdcMenu: IAppMenu; + changeLifecycleStateButtons: any; + version: string; + versionsList: Array<any>; + changeVersion: any; + isComposition: boolean; + isDeployment: boolean; + isPlugins: boolean; + $state: ng.ui.IStateService; + user: IUserProperties; + thirdParty: boolean; + disabledButtons: boolean; + menuComponentTitle: string; + progressService: ProgressService; + progressMessage: string; ComponentServiceNg2: ComponentServiceNg2; // leftPanelComponents:Array<Models.Components.Component>; //this is in order to load the left panel once, and not wait long time when moving to composition - unsavedChanges:boolean; - unsavedChangesCallback:Function; - unsavedFile:boolean; - capabilityTypesList: Array<CapabilityTypeModel>; - relationshipTypesList: Array<RelationshipTypeModel>; - nodeTypesList: Array<NodeTypeModel>; - - - startProgress(message:string):void; - stopProgress():void; - updateBreadcrumbs(component:Component):void; - updateUnsavedFileFlag(isUnsaved:boolean):void; - showChangeStateButton():boolean; - getComponent():Component; - setComponent(component:Component):void; - setOriginComponent(component:Component):void; - onMenuItemPressed(state:string, params:any):ng.IPromise<boolean>; - create():void; - save():Promise<void>; - setValidState(isValid:boolean):void; - changeLifecycleState(state:string):void; - handleChangeLifecycleState(state:string, newCsarVersion?:string):void; - disableMenuItems():void; - enableMenuItems():void; - isDesigner():boolean; - isViewMode():boolean; - isEditMode():boolean; - isCreateMode():boolean; - isDisableMode():boolean; - isGeneralView():boolean; - goToBreadcrumbHome():void; - onVersionChanged(selectedId:string):void; - getLatestVersion():void; - getStatus():string; - showLifecycleIcon():boolean; - updateSelectedMenuItem(state:string):void; - isSelected(menuItem:MenuItem):boolean; - uploadFileChangedInGeneralTab():void; - updateMenuComponentName(ComponentName:string):void; - getTabTitle():string; - reload(component:Component):void; + unsavedChanges: boolean; + unsavedChangesCallback: Function; + unsavedFile: boolean; + hasNoDependencies: boolean; + + + startProgress(message: string): void; + stopProgress(): void; + updateBreadcrumbs(component: Component): void; + updateUnsavedFileFlag(isUnsaved: boolean): void; + showChangeStateButton(): boolean; + getComponent(): Component; + setComponent(component: Component): void; + setOriginComponent(component: Component): void; + onMenuItemPressed(state: string, params: any): ng.IPromise<boolean>; + create(): void; + save(): Promise<void>; + setValidState(isValid: boolean): void; + changeLifecycleState(state: string): void; + handleChangeLifecycleState(state: string, newCsarVersion?: string, errorFunction?: Function): void; + disableMenuItems(): void; + enableMenuItems(): void; + isDesigner(): boolean; + isViewMode(): boolean; + isEditMode(): boolean; + isCreateMode(): boolean; + isDisableMode(): boolean; + isGeneralView(): boolean; + goToBreadcrumbHome(): void; + onVersionChanged(selectedId: string): void; + getLatestVersion(): void; + getStatus(): string; + showLifecycleIcon(): boolean; + updateSelectedMenuItem(state: string): void; + isSelected(menuItem: MenuItem): boolean; + uploadFileChangedInGeneralTab(): void; + updateMenuComponentName(ComponentName: string): void; + getTabTitle(): string; + reload(component: Component): void; } export class WorkspaceViewModel { @@ -133,53 +140,55 @@ export class WorkspaceViewModel { 'MenuHandler', 'Sdc.Services.CacheService', 'ChangeLifecycleStateHandler', - 'ModalsHandler', 'LeftPaletteLoaderService', '$filter', 'EventListenerService', - 'Sdc.Services.EntityService', 'Notification', '$stateParams', + 'HomeService', + 'CatalogService', 'Sdc.Services.ProgressService', 'ComponentServiceNg2', 'AutomatedUpgradeService', 'EventBusService', - 'PluginsService' + 'PluginsService', + 'WorkspaceNg1BridgeService', + 'workspaceService' ]; - constructor(private $scope:IWorkspaceViewModelScope, - private injectComponent:Component, - private ComponentFactory:ComponentFactory, - private $state:ng.ui.IStateService, - private sdcMenu:IAppMenu, - private $q:ng.IQService, - private MenuHandler:MenuHandler, - private cacheService:CacheService, - private ChangeLifecycleStateHandler:ChangeLifecycleStateHandler, - private ModalsHandler:ModalsHandler, - private LeftPaletteLoaderService:LeftPaletteLoaderService, - private $filter:ng.IFilterService, - private EventListenerService:EventListenerService, - private EntityService:EntityService, - private Notification:any, - private $stateParams:any, - private progressService:ProgressService, - private ComponentServiceNg2:ComponentServiceNg2, - private AutomatedUpgradeService:AutomatedUpgradeService, - private eventBusService:EventBusService, - private pluginsService:PluginsService) { - - - - this.initScope(); - this.initAfterScope(); - this.$scope.updateSelectedMenuItem(this.$state.current.name); + constructor(private $scope: IWorkspaceViewModelScope, + private injectComponent: Component, + private ComponentFactory: ComponentFactory, + private $state: ng.ui.IStateService, + private sdcMenu: IAppMenu, + private $q: ng.IQService, + private MenuHandler: MenuHandler, + private cacheService: CacheService, + private ChangeLifecycleStateHandler: ChangeLifecycleStateHandler, + private LeftPaletteLoaderService: LeftPaletteLoaderService, + private $filter: ng.IFilterService, + private EventListenerService: EventListenerService, + private Notification: any, + private $stateParams: any, + private homeService: HomeService, + private catalogService: CatalogService, + private progressService: ProgressService, + private ComponentServiceNg2: ComponentServiceNg2, + private AutomatedUpgradeService: AutomatedUpgradeService, + private eventBusService: EventBusService, + private pluginsService: PluginsService, + private workspaceNg1BridgeService: WorkspaceNg1BridgeService, + private workspaceService: WorkspaceService) { + + this.initScope(); + // this.initAfterScope(); + this.$scope.updateSelectedMenuItem(this.$state.current.name); } - private role:string; - private category:string; - private components:Array<Component>; - + private role: string; + private category: string; + private components: Component[]; + private initViewMode = ():WorkspaceMode => { let mode = WorkspaceMode.VIEW; @@ -187,35 +196,34 @@ export class WorkspaceViewModel { mode = WorkspaceMode.CREATE; } else { if (this.$scope.component.lifecycleState === ComponentState.NOT_CERTIFIED_CHECKOUT && - this.$scope.component.lastUpdaterUserId === this.cacheService.get("user").userId) { - if ((this.$scope.component.isService() || this.$scope.component.isResource()) && this.role == Role.DESIGNER) { + this.$scope.component.lastUpdaterUserId === this.cacheService.get('user').userId) { + if ((this.$scope.component.isService() || this.$scope.component.isResource()) && this.role === Role.DESIGNER) { mode = WorkspaceMode.EDIT; } } } + this.workspaceNg1BridgeService.updateIsViewOnly(mode === WorkspaceMode.VIEW); return mode; - }; + } - private initChangeLifecycleStateButtons = ():void => { - let state = this.$scope.component.isService() && (Role.OPS == this.role || Role.GOVERNOR == this.role) ? this.$scope.component.distributionStatus : this.$scope.component.lifecycleState; + private initChangeLifecycleStateButtons = (): void => { + let state: string; + if (this.$scope.component.isService() && this.$scope.component.lifecycleState === 'CERTIFIED') { + state = this.$scope.component.distributionStatus; + } else { + state = this.$scope.component.lifecycleState; + } this.$scope.changeLifecycleStateButtons = (this.sdcMenu.roles[this.role].changeLifecycleStateButtons[state] || [])[this.$scope.component.componentType.toUpperCase()]; + } - }; - - private initLeftPalette = ():void => { - //this.LeftPaletteLoaderService.loadLeftPanel(this.$scope.component); - }; - - private initScope = ():void => { - + private initScope = (): void => { this.$scope.component = this.injectComponent; - //this.initLeftPalette(); this.$scope.menuComponentTitle = this.$scope.component.name; this.$scope.disabledButtons = false; this.$scope.originComponent = this.ComponentFactory.createComponent(this.$scope.component); this.$scope.componentType = this.$scope.component.componentType; this.$scope.version = this.cacheService.get('version'); - this.$scope.user = this.cacheService.get("user"); + this.$scope.user = this.cacheService.get('user'); this.role = this.$scope.user.role; this.category = this.$scope.component.selectedCategory; this.$scope.mode = this.initViewMode(); @@ -229,10 +237,11 @@ export class WorkspaceViewModel { this.$scope.progressService = this.progressService; this.$scope.unsavedChanges = false; - this.EventListenerService.registerObserverCallback(EVENTS.ON_WORKSPACE_UNSAVED_CHANGES, this.setWorkspaceButtonState); - //this.EventListenerService.registerObserverCallback(EVENTS.ON_UPDATE_VSP_FILE, this.updateVspFlag); + this.$scope.hasNoDependencies = true; + this.verifyIfDependenciesExist(); - this.$scope.getComponent = ():Component => { + this.EventListenerService.registerObserverCallback(EVENTS.ON_WORKSPACE_UNSAVED_CHANGES, this.setWorkspaceButtonState); + this.$scope.getComponent = (): Component => { return this.$scope.component; }; @@ -261,17 +270,17 @@ export class WorkspaceViewModel { this.$scope.archiveComponent = ():void => { this.$scope.isLoading = true; const typeComponent = this.$scope.component.componentType; - this.ComponentServiceNg2.archiveComponent(typeComponent, this.$scope.component.uniqueId).subscribe(()=>{ + this.ComponentServiceNg2.archiveComponent(typeComponent, this.$scope.component.uniqueId).subscribe(()=> { this.$scope.isLoading = false; - if(this.$state.params.previousState){ - switch(this.$state.params.previousState){ + if (this.$state.params.previousState) { + switch (this.$state.params.previousState) { case 'catalog': case 'dashboard': this.$state.go(this.$state.params.previousState); break; default: break; - } + } } this.$scope.component.archived = true; this.deleteArchiveCache(); @@ -281,17 +290,17 @@ export class WorkspaceViewModel { title: this.$filter('translate')("ARCHIVE_SUCCESS_MESSAGE_TITLE") }); }, (error) => { this.$scope.isLoading = false; }); - } + } this.$scope.restoreComponent = ():void => { this.$scope.isLoading = true; const typeComponent = this.$scope.component.componentType; - this.ComponentServiceNg2.restoreComponent(typeComponent, this.$scope.component.uniqueId).subscribe(()=>{ + this.ComponentServiceNg2.restoreComponent(typeComponent, this.$scope.component.uniqueId).subscribe(()=> { this.$scope.isLoading = false; this.Notification.success({ - message: this.$scope.component.name + ' ' + this.$filter('translate')("RESTORE_SUCCESS_MESSAGE_TEXT"), - title: this.$filter('translate')("RESTORE_SUCCESS_MESSAGE_TITLE") - }); + message: this.$scope.component.name + ' ' + this.$filter('translate')("RESTORE_SUCCESS_MESSAGE_TEXT"), + title: this.$filter('translate')("RESTORE_SUCCESS_MESSAGE_TITLE") + }); }); this.$scope.component.archived = false; this.deleteArchiveCache(); @@ -304,13 +313,13 @@ export class WorkspaceViewModel { if(this.$scope.isValidForm){ this.$scope.save().then(() => { this.$scope.onMenuItemPressed(toState.name, toParams); - }, ()=> { + }, ()=> { console.error("Save failed, unable to navigate to " + toState.name); }) } else { console.error("Form is invalid, unable to navigate to " + toState.name); } - } + } } }); @@ -384,7 +393,7 @@ export class WorkspaceViewModel { }; this.$scope.create = () => { - + this.$scope.startProgress("Creating Asset..."); _.first(this.$scope.leftBarTabs.menuItems).isDisabled = true;//disabled click on general tab (DE246274) @@ -429,7 +438,7 @@ export class WorkspaceViewModel { }; this.$scope.save = ():Promise<void> => { - + this.EventListenerService.notifyObservers(EVENTS.ON_WORKSPACE_SAVE_BUTTON_CLICK); this.$scope.startProgress("Updating Asset..."); @@ -445,6 +454,7 @@ export class WorkspaceViewModel { let onFailed = () => { stopProgressAndEnableUI(); + this.$scope.updateUnsavedFileFlag(true); this.EventListenerService.notifyObservers(EVENTS.ON_WORKSPACE_SAVE_BUTTON_ERROR); reject(); @@ -459,7 +469,7 @@ export class WorkspaceViewModel { }); this.$scope.updateBreadcrumbs(component); - + //update the component this.$scope.setComponent(component); this.$scope.originComponent = this.ComponentFactory.createComponent(this.$scope.component); @@ -467,13 +477,14 @@ export class WorkspaceViewModel { if (this.cacheService.contains(CHANGE_COMPONENT_CSAR_VERSION_FLAG)) { this.cacheService.remove(CHANGE_COMPONENT_CSAR_VERSION_FLAG); } - if (this.cacheService.contains(PREVIOUS_CSAR_COMPONENT)){ + if (this.cacheService.contains(PREVIOUS_CSAR_COMPONENT)) { this.cacheService.remove(PREVIOUS_CSAR_COMPONENT); } //clear edit flags this.$state.current.data.unsavedChanges = false; this.$scope.unsavedFile = false; + this.$scope.reload(component); resolve(); }; @@ -497,35 +508,40 @@ export class WorkspaceViewModel { this.$state.go('dashboard'); }; - this.$scope.handleChangeLifecycleState = (state:string, newCsarVersion?:string) => { + this.$scope.handleChangeLifecycleState = (state:string, newCsarVersion?:string, onError?: Function) => { if ('monitor' === state) { this.$state.go('workspace.distribution'); return; } let data = this.$scope.changeLifecycleStateButtons[state]; - let onSuccess = (component:Component, url:string):void => { - //Updating the component from server response - + if (!data && this.$stateParams.componentCsar && !this.$scope.isCreateMode()) { + data = {text: 'Check Out', url: 'lifecycleState/CHECKOUT'}; + } + const onSuccess = (component, url:string):void => { + // Updating the component from server response + // Creating the data object to notify the plugins with - let eventData: any = { + const eventData: any = { uuid: this.$scope.component.uuid, version: this.$scope.component.version }; - //the server returns only metaData (small component) except checkout (Full component) ,so we update only the statuses of distribution & lifecycle + // the server returns only metaData (small component) except checkout (Full component) ,so we update only the statuses of distribution & lifecycle this.$scope.component.lifecycleState = component.lifecycleState; this.$scope.component.distributionStatus = component.distributionStatus; switch (url) { case 'lifecycleState/CHECKOUT': + this.workspaceNg1BridgeService.updateIsViewOnly(false); this.eventBusService.notify("CHECK_OUT", eventData, false).subscribe(() => { // only checkOut get the full component from server // this.$scope.component = component; // Work around to change the csar version if(newCsarVersion) { this.cacheService.set(CHANGE_COMPONENT_CSAR_VERSION_FLAG, newCsarVersion); - } + (this.$scope.component as Resource).csarVersion = newCsarVersion; + } //when checking out a minor version uuid remains const bcIdx = _.findIndex(this.components, (item) => { @@ -542,6 +558,7 @@ export class WorkspaceViewModel { this.initVersionObject(); this.$scope.isLoading = false; this.EventListenerService.notifyObservers(EVENTS.ON_CHECKOUT, component); + this.workspaceService.setComponentMetadata(component); this.Notification.success({ message: this.$filter('translate')("CHECKOUT_SUCCESS_MESSAGE_TEXT"), @@ -551,6 +568,7 @@ export class WorkspaceViewModel { }); break; case 'lifecycleState/CHECKIN': + this.workspaceNg1BridgeService.updateIsViewOnly(true); defaultActionAfterChangeLifecycleState(); this.Notification.success({ message: this.$filter('translate')("CHECKIN_SUCCESS_MESSAGE_TEXT"), @@ -566,77 +584,25 @@ export class WorkspaceViewModel { }); }); break; - case 'lifecycleState/certificationRequest': - defaultActionAfterChangeLifecycleState(); - this.Notification.success({ - message: this.$filter('translate')("SUBMIT_FOR_TESTING_SUCCESS_MESSAGE_TEXT"), - title: this.$filter('translate')("SUBMIT_FOR_TESTING_SUCCESS_MESSAGE_TITLE") - }); - break; - //Tester Role - case 'lifecycleState/failCertification': - defaultActionAfterChangeLifecycleState(); - this.Notification.success({ - message: this.$filter('translate')("REJECT_SUCCESS_MESSAGE_TEXT"), - title: this.$filter('translate')("REJECT_SUCCESS_MESSAGE_TITLE") - }); - break; case 'lifecycleState/certify': - this.$scope.handleCertification(component); - + this.verifyIfDependenciesExist(); + this.$scope.reload(component); break; - //DE203504 Bug Fix Start - case 'lifecycleState/startCertification': - this.initChangeLifecycleStateButtons(); - this.Notification.success({ - message: this.$filter('translate')("START_TESTING_SUCCESS_MESSAGE_TEXT"), - title: this.$filter('translate')("START_TESTING_SUCCESS_MESSAGE_TITLE") - }); - break; - case 'lifecycleState/cancelCertification': - this.initChangeLifecycleStateButtons(); - this.Notification.success({ - message: this.$filter('translate')("CANCEL_TESTING_SUCCESS_MESSAGE_TEXT"), - title: this.$filter('translate')("CANCEL_TESTING_SUCCESS_MESSAGE_TITLE") - }); - break; - //Ops Role - case 'distribution/PROD/activate': - this.initChangeLifecycleStateButtons(); + case 'distribution/PROD/activate': this.Notification.success({ message: this.$filter('translate')("DISTRIBUTE_SUCCESS_MESSAGE_TEXT"), title: this.$filter('translate')("DISTRIBUTE_SUCCESS_MESSAGE_TITLE") }); - break; - //Governor Role - case 'distribution-state/reject': this.initChangeLifecycleStateButtons(); - this.Notification.success({ - message: this.$filter('translate')("REJECT_SUCCESS_MESSAGE_TEXT"), - title: this.$filter('translate')("REJECT_SUCCESS_MESSAGE_TITLE") - }); break; - case 'distribution-state/approve': - this.initChangeLifecycleStateButtons(); - this.$state.go('catalog'); - this.Notification.success({ - message: this.$filter('translate')("APPROVE_SUCCESS_MESSAGE_TEXT"), - title: this.$filter('translate')("APPROVE_SUCCESS_MESSAGE_TITLE") - }); - break; - //DE203504 Bug Fix End - default : defaultActionAfterChangeLifecycleState(); - } - if (data.url != 'lifecycleState/CHECKOUT') { + if (data.url !== 'lifecycleState/CHECKOUT') { this.$scope.isLoading = false; } }; - //this.$scope.isLoading = true; - this.ChangeLifecycleStateHandler.changeLifecycleState(this.$scope.component, data, this.$scope, onSuccess); }; @@ -663,6 +629,21 @@ export class WorkspaceViewModel { return this.$scope.mode === WorkspaceMode.CREATE; }; + this.$scope.checkDisableButton = (button: any):boolean => { + // Logic moved from html to component + if (this.$scope.isCreateMode() || button.disabled || this.$scope.disabledButtons || !this.$scope.isValidForm || this.$scope.unsavedChanges || this.$scope.component.archived){ + return true; + } + + // Specific verification for Checkout - enabled only in case the component is the latest version. + let result: boolean = false; + + if (button.url === 'lifecycleState/CHECKOUT') { + result = !this.$scope.component.isLatestVersion(); + } + return result; + }; + this.$scope.isEditMode = ():boolean => { return this.$scope.mode === WorkspaceMode.EDIT; }; @@ -686,18 +667,14 @@ export class WorkspaceViewModel { this.initMenuItems(); - this.$scope.showChangeStateButton = ():boolean => { - let result:boolean = true; - if (!this.$scope.component.isLatestVersion() && Role.OPS != this.role && Role.GOVERNOR != this.role) { + this.$scope.showLatestVersion = (): boolean => { + let result: boolean = true; + if (!this.$scope.component.isLatestVersion()) { result = false; } if (ComponentState.NOT_CERTIFIED_CHECKOUT === this.$scope.component.lifecycleState && this.$scope.isViewMode()) { result = false; } - if (ComponentState.CERTIFIED != this.$scope.component.lifecycleState && - (Role.OPS == this.role || Role.GOVERNOR == this.role)) { - result = false; - } return result; }; @@ -705,20 +682,20 @@ export class WorkspaceViewModel { let stateArray:Array<string> = state.split('.', 2); let stateWithoutInternalNavigate:string = stateArray[0] + '.' + stateArray[1]; let selectedItem:MenuItem = _.find(this.$scope.leftBarTabs.menuItems, (item:MenuItem) => { - let itemStateArray: Array<string> = item.state.split('.', 2); + let itemStateArray:Array<string> = item.state.split('.', 2); let itemStateWithoutNavigation:string = itemStateArray[0] + '.' + itemStateArray[1]; return (itemStateWithoutNavigation === stateWithoutInternalNavigate); }); let selectedIndex = selectedItem ? this.$scope.leftBarTabs.menuItems.indexOf(selectedItem) : 0; - if (stateArray[1] === 'plugins') { + if (stateArray[1] === 'plugins') { _.forEach(PluginsConfiguration.plugins, (plugin) => { if (plugin.pluginStateUrl == this.$state.params.path) { return false; } else if (this.pluginsService.isPluginDisplayedInContext(plugin, this.role, this.$scope.component.getComponentSubType())) { - selectedIndex++; + selectedIndex++; } }); } @@ -726,11 +703,11 @@ export class WorkspaceViewModel { this.$scope.leftBarTabs.selectedIndex = selectedIndex; }; - this.$scope.isSelected = (menuItem:MenuItem): boolean => { + this.$scope.isSelected = (menuItem: MenuItem): boolean => { return this.$scope.leftBarTabs.selectedIndex === _.indexOf(this.$scope.leftBarTabs.menuItems, menuItem); }; - this.$scope.$watch('$state.current.name', (newVal:string):void => { + this.$scope.$watch('$state.current.name', (newVal: string): void => { if (newVal) { this.$scope.isComposition = (newVal.indexOf(States.WORKSPACE_COMPOSITION) > -1); this.$scope.isDeployment = newVal == States.WORKSPACE_DEPLOYMENT; @@ -738,20 +715,26 @@ export class WorkspaceViewModel { } }); - this.$scope.getTabTitle = ():string => { - return this.$scope.leftBarTabs.menuItems.find((menuItem:MenuItem) => { + this.$scope.getTabTitle = (): string => { + return this.$scope.leftBarTabs.menuItems.find((menuItem: MenuItem) => { return menuItem.state == this.$scope.$state.current.name; }).text; }; - this.$scope.reload = (component:Component):void => { - this.$state.go(this.$state.current.name, {id: component.uniqueId}, {reload: true}); + this.$scope.reload = (component: Component): void => { + const isGeneralTab = this.$state.current.name === 'workspace.general'; + // nullify the componentCsar in case we are in general tab so we know we didnt came from updateVsp Modal + if (isGeneralTab) { + this.$state.go(this.$state.current.name, {id: component.uniqueId, componentCsar: null}, {reload: true}); + } else { + this.$state.go(this.$state.current.name, {id: component.uniqueId}, {reload: true}); + } }; this.$scope.$on('$destroy', () => { this.EventListenerService.unRegisterObserver(EVENTS.ON_WORKSPACE_UNSAVED_CHANGES); }); - + this.$scope.openAutomatedUpgradeModal = ():void => { this.$scope.isLoading = true; this.ComponentServiceNg2.getDependencies(this.$scope.component.componentType, this.$scope.component.uniqueId).subscribe((response:Array<IDependenciesServerResponse>)=> { @@ -761,14 +744,14 @@ export class WorkspaceViewModel { } this.$scope.handleCertification = (certifyComponent): void => { - if (this.$scope.component.getComponentSubType() === ResourceType.VF) { + if (this.$scope.component.getComponentSubType() === ResourceType.VF || this.$scope.component.isService()) { this.ComponentServiceNg2.getDependencies(this.$scope.component.componentType, this.$scope.component.uniqueId).subscribe((response:Array<IDependenciesServerResponse>) => { this.$scope.isLoading = false; - let isUpgradeNeeded = _.filter(response, (componentToUpgrade:IDependenciesServerResponse) => { + const isUpgradeNeeded = _.filter(response, (componentToUpgrade:IDependenciesServerResponse) => { return componentToUpgrade.dependencies && componentToUpgrade.dependencies.length > 0; }); - if(isUpgradeNeeded.length === 0) { + if (isUpgradeNeeded.length === 0) { this.onSuccessWithoutUpgradeNeeded(); return; } @@ -781,52 +764,54 @@ export class WorkspaceViewModel { } this.$scope.disableMenuItems = () => { - this.$scope.leftBarTabs.menuItems.forEach((item:MenuItem) => { - item.isDisabled = (States.WORKSPACE_GENERAL != item.state); + this.$scope.leftBarTabs.menuItems.forEach((item: MenuItem) => { + item.isDisabled = (States.WORKSPACE_GENERAL !== item.state); }); } - + this.$scope.enableMenuItems = () => { - this.$scope.leftBarTabs.menuItems.forEach((item:MenuItem) => { + this.$scope.leftBarTabs.menuItems.forEach((item: MenuItem) => { item.isDisabled = false; }); - } + }; - this.$scope.startProgress = (message:string):void => { + this.$scope.startProgress = (message: string): void => { this.progressService.initCreateComponentProgress(this.$scope.component.uniqueId); this.$scope.isCreateProgress = true; this.$scope.progressMessage = message; }; - this.$scope.stopProgress = ():void => { + this.$scope.stopProgress = (): void => { this.$scope.isCreateProgress = false; this.progressService.deleteProgressValue(this.$scope.component.uniqueId); } - this.$scope.updateBreadcrumbs = (component:Component):void => { + this.$scope.updateBreadcrumbs = (component: Component): void => { // Update the components list for breadcrumbs const bcIdx = this.MenuHandler.findBreadcrumbComponentIndex(this.components, component); if (bcIdx !== -1) { this.components[bcIdx] = component; this.initBreadcrumbs(); // re-calculate breadcrumbs } - } + }; this.$scope.updateUnsavedFileFlag = (isUnsaved:boolean) => { this.$scope.unsavedFile = isUnsaved; - } + }; - }; + } - private onSuccessWithoutUpgradeNeeded = ():void => { + private onSuccessWithoutUpgradeNeeded = (): void => { this.$scope.isLoading = false; this.Notification.success({ - message: this.$filter('translate')("ACCEPT_TESTING_SUCCESS_MESSAGE_TEXT"), - title: this.$filter('translate')("ACCEPT_TESTING_SUCCESS_MESSAGE_TITLE") + message: this.$filter('translate')('SERVICE_CERTIFICATION_STATUS_TEXT'), + title: this.$filter('translate')('SERVICE_CERTIFICATION_STATUS_TITLE') }); - this.$state.go('dashboard'); + this.initVersionObject(); + this.initChangeLifecycleStateButtons(); } + private refreshDataAfterChangeLifecycleState = (component:Component):void => { this.$scope.isLoading = false; this.$scope.mode = this.initViewMode(); @@ -835,42 +820,42 @@ export class WorkspaceViewModel { this.EventListenerService.notifyObservers(EVENTS.ON_LIFECYCLE_CHANGE, component); } - private initAfterScope = ():void => { + private initAfterScope = (): void => { // In case user select csar from the onboarding modal, need to disable checkout and submit for testing. if (this.$state.params['disableButtons'] === true) { this.$scope.uploadFileChangedInGeneralTab(); } }; - private initVersionObject = ():void => { + private initVersionObject = (): void => { this.$scope.versionsList = (this.$scope.component.getAllVersionsAsSortedArray()).reverse(); this.$scope.changeVersion = { - selectedVersion: _.find(this.$scope.versionsList, (versionObj)=> { + selectedVersion: _.find(this.$scope.versionsList, (versionObj) => { return versionObj.versionId === this.$scope.component.uniqueId; }) }; - }; + } - private getNewComponentBreadcrumbItem = ():MenuItem => { - let text = ""; + private getNewComponentBreadcrumbItem = (): MenuItem => { + let text = ''; if (this.$scope.component.isResource() && (<Resource>this.$scope.component).isCsarComponent()) { text = this.$scope.component.getComponentSubType() + ': ' + this.$scope.component.name; } else { text = 'Create new ' + this.$state.params['type']; } return new MenuItem(text, null, States.WORKSPACE_GENERAL, 'goToState', [this.$state.params]); - }; + } - private updateMenuItemByRole = (menuItems:Array<any>, role:string) => { - let tempMenuItems:Array<any> = new Array<any>(); - menuItems.forEach((item:any) => { + private updateMenuItemByRole = (menuItems: any[], role: string) => { + const tempMenuItems: any[] = new Array<any>(); + menuItems.forEach((item: any) => { //remove item if role is disabled if (!(item.disabledRoles && item.disabledRoles.indexOf(role) > -1)) { tempMenuItems.push(item); } }); return tempMenuItems; - }; + } private updateMenuItemByCategory = (menuItems:Array<any>, category:string) => { let tempMenuItems:Array<any> = new Array<any>(); @@ -888,15 +873,15 @@ export class WorkspaceViewModel { private deleteArchiveCache = () => { - this.cacheService.remove("archiveComponents"); //delete the cache to ensure the archive is reloaded from server - }; + this.cacheService.remove('archiveComponents'); // delete the cache to ensure the archive is reloaded from server + } private initBreadcrumbs = () => { this.components = this.cacheService.get('breadcrumbsComponents'); - let breadcrumbsComponentsLvl = this.MenuHandler.generateBreadcrumbsModelFromComponents(this.components, this.$scope.component); + const breadcrumbsComponentsLvl = this.MenuHandler.generateBreadcrumbsModelFromComponents(this.components, this.$scope.component); if (this.$scope.isCreateMode()) { - let createItem = this.getNewComponentBreadcrumbItem(); + const createItem = this.getNewComponentBreadcrumbItem(); if (!breadcrumbsComponentsLvl.menuItems) { breadcrumbsComponentsLvl.menuItems = []; } @@ -905,25 +890,23 @@ export class WorkspaceViewModel { } this.$scope.breadcrumbsModel = [breadcrumbsComponentsLvl, this.$scope.leftBarTabs]; - }; + } private initMenuItems() { - let inCreateMode = this.$scope.isCreateMode(); + const inCreateMode = this.$scope.isCreateMode(); this.$scope.leftBarTabs = new MenuItemGroup(); - //const menuItemsObjects:Array<any> = this.updateMenuItemByRole(this.sdcMenu.component_workspace_menu_option[this.$scope.component.getComponentSubType()], this.role); - let menuItemsObjects:Array<any> = this.updateMenuItemByRole(this.sdcMenu.component_workspace_menu_option[this.$scope.component.getComponentSubType()], this.role); - if(this.$scope.component.getComponentSubType()==="SERVICE") - { - let menuItemsObjectsCategory:Array<any> = this.updateMenuItemByCategory(menuItemsObjects, this.category); - menuItemsObjects = menuItemsObjectsCategory; + let menuItemsObjects: any[] = this.updateMenuItemByRole(this.sdcMenu.component_workspace_menu_option[this.$scope.component.getComponentSubType()], this.role); + if (this.$scope.component.getComponentSubType() === 'SERVICE') { + const menuItemsObjectsCategory: any[] = this.updateMenuItemByCategory(menuItemsObjects, this.category); + menuItemsObjects = menuItemsObjectsCategory; } // Only adding plugins to the workspace if they can be displayed for the current user role _.each(PluginsConfiguration.plugins, (plugin: Plugin) => { if (this.pluginsService.isPluginDisplayedInContext(plugin, this.role, this.$scope.component.getComponentSubType())) { menuItemsObjects.push({ - text: plugin.pluginDisplayOptions["context"].displayName, + text: plugin.pluginDisplayOptions['context'].displayName, action: 'onMenuItemPressed', state: 'workspace.plugins', params: {path: plugin.pluginStateUrl} @@ -931,7 +914,7 @@ export class WorkspaceViewModel { } }); - this.$scope.leftBarTabs.menuItems = menuItemsObjects.map((item:MenuItem) => { + this.$scope.leftBarTabs.menuItems = menuItemsObjects.map((item: MenuItem) => { const menuItem = new MenuItem(item.text, item.callback, item.state, item.action, item.params, item.blockedForTypes, item.disabledCategory); if (menuItem.params) { menuItem.params.state = menuItem.state; @@ -940,7 +923,7 @@ export class WorkspaceViewModel { menuItem.params = {state: menuItem.state}; } menuItem.callback = () => this.$scope[menuItem.action](menuItem.state, menuItem.params); - menuItem.isDisabled = (inCreateMode && States.WORKSPACE_GENERAL != menuItem.state) || + menuItem.isDisabled = (inCreateMode && States.WORKSPACE_GENERAL !== menuItem.state) || (States.WORKSPACE_DEPLOYMENT === menuItem.state && this.$scope.component.modules && this.$scope.component.modules.length === 0 && this.$scope.component.isResource()) || (menuItem.disabledCategory === true); @@ -950,20 +933,54 @@ export class WorkspaceViewModel { if (this.cacheService.get('breadcrumbsComponents')) { this.initBreadcrumbs(); } + else { + this.initBreadcrumbsComponents(); + } } - - private showSuccessNotificationMessage = ():void => { this.Notification.success({ - message: this.$filter('translate')("IMPORT_VF_MESSAGE_CREATE_FINISHED_DESCRIPTION"), - title: this.$filter('translate')("IMPORT_VF_MESSAGE_CREATE_FINISHED_TITLE") + message: this.$filter('translate')('IMPORT_VF_MESSAGE_CREATE_FINISHED_DESCRIPTION'), + title: this.$filter('translate')('IMPORT_VF_MESSAGE_CREATE_FINISHED_TITLE') }); - }; + } - private setWorkspaceButtonState = (newState:boolean, callback?:Function) => { + private setWorkspaceButtonState = (newState: boolean, callback?: Function) => { this.$scope.unsavedChanges = newState; this.$scope.unsavedChangesCallback = callback; } + private initBreadcrumbsComponents = (): void => { + let breadcrumbsComponentsObservable; + if (this.$stateParams.previousState === 'dashboard') { + breadcrumbsComponentsObservable = this.homeService.getAllComponents(true); + } else if (this.$stateParams.previousState === 'catalog') { + breadcrumbsComponentsObservable = this.catalogService.getCatalog(); + } else { + this.cacheService.remove('breadcrumbsComponentsState'); + this.cacheService.remove('breadcrumbsComponents'); + return; + } + breadcrumbsComponentsObservable.subscribe((components) => { + this.cacheService.set('breadcrumbsComponentsState', this.$stateParams.previousState); + this.cacheService.set('breadcrumbsComponents', components); + this.initBreadcrumbs(); + }); + + } + + private verifyIfDependenciesExist(): void { + let containsDependencies = []; + if (this.$scope.component.componentType && this.$scope.component.uniqueId && + this.$scope.component.lifecycleState === 'CERTIFIED' && (this.$scope.component.isService() || this.$scope.component.getComponentSubType() === 'VF')) { + this.ComponentServiceNg2.getDependencies(this.$scope.component.componentType, this.$scope.component.uniqueId).subscribe((response: IDependenciesServerResponse[]) => { + containsDependencies = response.filter((version) => version.dependencies); + if (containsDependencies.length > 0) { + this.$scope.hasNoDependencies = false; + } else { + this.$scope.hasNoDependencies = true; + } + }); + } + } } diff --git a/catalog-ui/src/app/view-models/workspace/workspace-view.html b/catalog-ui/src/app/view-models/workspace/workspace-view.html index d22262c94a..79dde943dc 100644 --- a/catalog-ui/src/app/view-models/workspace/workspace-view.html +++ b/catalog-ui/src/app/view-models/workspace/workspace-view.html @@ -22,7 +22,8 @@ {{menuComponentTitle}} </div> <div class="i-sdc-designer-sidebar-section-content-item" ng-class="{'selected': isSelected(menuItem)}" ng-repeat="menuItem in leftBarTabs.menuItems track by $index"> - <div class="expand-collapse-menu-box-item-text" ng-class="{'disabled': menuItem.isDisabled }" data-tests-id="{{menuItem.text}}LeftSideMenu" ><button type="button" class="i-sdc-designer-sidebar-section-content-item-service-cat" ng-click="menuItem.callback()" ng-disabled={{menuItem.disabledCategory}}>{{menuItem.text}}</button></div> + <!--<div class="expand-collapse-menu-box-item-text" ng-click="menuItem.callback()" ng-class="{'disabled': menuItem.isDisabled }" data-tests-id="{{menuItem.text}}LeftSideMenu">{{menuItem.text}}</div>--> + <div class="expand-collapse-menu-box-item-text" ng-class="{'disabled': menuItem.isDisabled }"><button data-tests-id="{{menuItem.text}}LeftSideMenu" type="button" class="i-sdc-designer-sidebar-section-content-item-service-cat" ng-click="menuItem.callback()" ng-disabled={{menuItem.disabledCategory}}>{{menuItem.text}}</button></div> </div> </div> @@ -53,9 +54,11 @@ <div class="sdc-workspace-top-bar-buttons"> - <span ng-if="!isCreateMode() && !component.isLatestVersion() && !showChangeStateButton()" [disabled]="unsavedChanges">Switch to the <a ng-click="getLatestVersion()">latest version</a></span> + <span ng-if="!isCreateMode() && !component.isLatestVersion() && !showLatestVersion()" [disabled]="unsavedChanges">Switch to the <a data-tests-id="latest-version" ng-click="getLatestVersion()">latest version</a></span> + <button ng-if="isDesigner() && !isCreateMode() && component.lifecycleState === 'CERTIFIED' && (component.isService() || component.getComponentSubType() === 'VF')" + ng-disabled="hasNoDependencies" ng-click="openAutomatedUpgradeModal()" class="tlv-btn blue" data-ng-class="{'disabled' : component.archived}" @@ -65,13 +68,12 @@ <button ng-repeat="(key,button) in changeLifecycleStateButtons" ng-click="changeLifecycleState(key)" - ng-if="showChangeStateButton() && key != 'deleteVersion'" - data-ng-disabled="isCreateMode() || button.disabled || disabledButtons || !isValidForm || unsavedChanges || component.archived" + ng-if="key != 'deleteVersion'" + data-ng-disabled="checkDisableButton(button)" class="change-lifecycle-state-btn tlv-btn" ng-class="$first ? 'outline green' : 'grey'" data-tests-id="{{button.text | testsId}}" prevent-double-click> {{button.text}} - </button> @@ -104,11 +106,11 @@ </div> <div class="w-sdc-main-container-body-content-wrapper"> <div class="w-sdc-main-container-body-content-header"> - <div class="tab-title" data-ng-if="!isComposition && !isDeployment && !isPlugins"> + <div class="workspace-tab-title" data-ng-if="!isComposition && !isDeployment && !isPlugins"> {{getTabTitle()}} </div> </div> - <div class="w-sdc-main-container-body-content" data-ng-class="{'third-party':thirdParty}" data-ui-view></div> + <div class="w-sdc-main-container-body-content" data-ng-class="{'deploy-body-content': isDeployment}" data-ng-class="{'third-party':thirdParty}" data-ui-view></div> </div> </div> </div> diff --git a/catalog-ui/src/app/view-models/workspace/workspace.less b/catalog-ui/src/app/view-models/workspace/workspace.less index 518272d45c..5c479c7370 100644 --- a/catalog-ui/src/app/view-models/workspace/workspace.less +++ b/catalog-ui/src/app/view-models/workspace/workspace.less @@ -109,7 +109,7 @@ .general-view-top-progress { width: 30%; margin: 0 auto; - min-width: 150px; + min-width: 140px; } } @@ -189,7 +189,7 @@ display: inline-block; } } - .tab-title{ + .workspace-tab-title { height: 110px; padding-left: 100px; line-height: 110px; @@ -199,6 +199,11 @@ .w-sdc-main-container-body-content { height: 100%; } + + .w-sdc-main-container-body-content-wrapper { + height: 100%; + overflow:hidden; + } } .w-sdc-main-container-body-content { // height:calc(~'100% - @{action_nav_height} - @{tab_title}'); @@ -219,7 +224,7 @@ height: calc(~'100% - @{action_nav_height}'); .w-sdc-main-container-body-content-header { display: flex; - .tab-title { + .workspace-tab-title { flex-grow: 1; } .w-sdc-main-container-body-content-action-buttons { @@ -239,4 +244,58 @@ } } } +// Fix till we remove everything to angular5 and fix all workspace style +.composition{ + .sdc-workspace-container{ + .w-sdc-main-container{ + .w-sdc-main-right-container{ + left:0; + //overflow-y: scroll; + .sdc-workspace-top-bar { + position: absolute; + left: 245px; + right: 0; + z-index: 1; + .not-latest{ + left: 270px; + } + } + .w-sdc-main-container-body-content{ + padding: 0 0 0 0; + } + + > div:first-child{ + padding: 0; + } + } + } + } +} + +.deployment { + + .sdc-workspace-container{ + .w-sdc-main-container{ + .w-sdc-main-right-container{ + left:0; + //overflow-y: scroll; + .sdc-workspace-top-bar { + position: absolute; + left: 245px; + right: 0; + z-index: 1; + .not-latest{ + left: 270px; + } + } + > div:first-child{ + padding: 0; + } + .w-sdc-main-container-body-content-wrapper { + padding: 0px; + } + } + } + } +} |