summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/view-models
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2018-07-29 16:13:45 +0300
committerMichael Lando <ml636r@att.com>2018-07-29 16:20:34 +0300
commit5b593496b8f1b8e8be8d7d2dbcc223332e65a49b (patch)
tree2f9dfc45191e723da69cf74be7829784e9741b94 /catalog-ui/src/app/view-models
parent9200382f2ce7b4bb729aa287d0878004b2d2b4f9 (diff)
re base code
Change-Id: I12a5ca14a6d8a87e9316b9ff362eb131105f98a5 Issue-ID: SDC-1566 Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'catalog-ui/src/app/view-models')
-rw-r--r--catalog-ui/src/app/view-models/admin-dashboard/add-category-modal/add-category-modal-view.html4
-rw-r--r--catalog-ui/src/app/view-models/catalog/catalog-view-model.ts607
-rw-r--r--catalog-ui/src/app/view-models/catalog/catalog-view.html116
-rw-r--r--catalog-ui/src/app/view-models/catalog/catalog.less93
-rw-r--r--catalog-ui/src/app/view-models/dashboard/dashboard-view-model.ts117
-rw-r--r--catalog-ui/src/app/view-models/dashboard/dashboard-view.html113
-rw-r--r--catalog-ui/src/app/view-models/forms/artifact-form/artifact-form-view.html4
-rw-r--r--catalog-ui/src/app/view-models/forms/attribute-form/attribute-form-view.html4
-rw-r--r--catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.html7
-rw-r--r--catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.less3
-rw-r--r--catalog-ui/src/app/view-models/forms/input-form/input-form-view.html4
-rw-r--r--catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base-view.html4
-rw-r--r--catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts52
-rw-r--r--catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html6
-rw-r--r--catalog-ui/src/app/view-models/forms/property-forms/module-property-modal/module-property-model.ts2
-rw-r--r--catalog-ui/src/app/view-models/forms/property-forms/select-datatype-modal/select-datatype-modal-view-model.ts2
-rw-r--r--catalog-ui/src/app/view-models/forms/resource-instance-name-form/resource-instance-name-view.html4
-rw-r--r--catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal-view.html6
-rw-r--r--catalog-ui/src/app/view-models/modals/conformance-level-modal/conformance-level-modal-view.html4
-rw-r--r--catalog-ui/src/app/view-models/modals/email-modal/email-modal-view.html4
-rw-r--r--catalog-ui/src/app/view-models/modals/error-modal/error-403-view.html2
-rw-r--r--catalog-ui/src/app/view-models/modals/error-modal/error.less9
-rw-r--r--catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.html4
-rw-r--r--catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal-view.html4
-rw-r--r--catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal-view-model.ts2
-rw-r--r--catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal-view.html4
-rw-r--r--catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view-model.ts37
-rw-r--r--catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view.html4
-rw-r--r--catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view-model.ts26
-rw-r--r--catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view.html14
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts215
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html167
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/composition/composition.less26
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts28
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view.html5
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view-model.ts12
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties.less1
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment-view-model.ts6
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment-view.html2
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment.less3
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view.html4
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts255
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html64
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/general/general.less36
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view-model.ts236
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/inputs/service-input/service-inputs-view-model.ts758
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view-model.ts2
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view-model.ts2
-rw-r--r--catalog-ui/src/app/view-models/workspace/workspace-view-model.ts418
-rw-r--r--catalog-ui/src/app/view-models/workspace/workspace-view.html64
-rw-r--r--catalog-ui/src/app/view-models/workspace/workspace.less33
51 files changed, 2336 insertions, 1263 deletions
diff --git a/catalog-ui/src/app/view-models/admin-dashboard/add-category-modal/add-category-modal-view.html b/catalog-ui/src/app/view-models/admin-dashboard/add-category-modal/add-category-modal-view.html
index a9df3e6009..2196aedd5b 100644
--- a/catalog-ui/src/app/view-models/admin-dashboard/add-category-modal/add-category-modal-view.html
+++ b/catalog-ui/src/app/view-models/admin-dashboard/add-category-modal/add-category-modal-view.html
@@ -1,4 +1,4 @@
-<sdc-modal modal="modalInstance"
+<ng1-modal modal="modalInstance"
type="classic"
class="i-sdc-admin-add-category-modal modal-type-confirmation"
header-translate="CREATE_CATEGORY_MODAL_HEADER"
@@ -38,4 +38,4 @@
</form>
-</sdc-modal>
+</ng1-modal>
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
index 2296aa7cdf..8840afd79d 100644
--- a/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts
+++ b/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts
@@ -20,11 +20,13 @@
'use strict';
import * as _ from "lodash";
-import {Component, IMainCategory, IGroup, IConfigStatuses, IAppMenu, IAppConfigurtaion, IUserProperties, ISubCategory} from "app/models";
+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>;
@@ -38,16 +40,32 @@ interface CheckboxesFilter {
// Categories
selectedCategoriesModel:Array<string>;
// Statuses
- selectedStatuses:Array<string>;
+ selectedStatuses:Array<Array<string>>;
}
interface Gui {
isLoading:boolean;
- onResourceSubTypesClick:Function;
+ onComponentSubTypesClick:Function;
onComponentTypeClick:Function;
onCategoryClick:Function;
- onSubcategoryClick:Function;
- onGroupClick: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 {
@@ -71,13 +89,22 @@ export interface ICatalogViewModelScope extends ng.IScope {
//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;
- getNumOfElements(num:number):string;
+ 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 {
@@ -93,9 +120,20 @@ export class CatalogViewModel {
'Sdc.Services.CacheService',
'ComponentFactory',
'ChangeLifecycleStateHandler',
- 'MenuHandler'
+ '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,
@@ -107,64 +145,112 @@ export class CatalogViewModel {
private cacheService:CacheService,
private ComponentFactory:ComponentFactory,
private ChangeLifecycleStateHandler:ChangeLifecycleStateHandler,
- private MenuHandler:MenuHandler) {
+ private MenuHandler:MenuHandler,
+ private ArchiveService:ArchiveService
+ ) {
+ this.initLeftSwitch();
this.initScopeMembers();
+ this.loadFilterParams();
this.initCatalogData(); // Async task to get catalog from server.
this.initScopeMethods();
}
- private initCatalogData = ():void => {
- let onSuccess = (followedResponse:Array<Component>):void => {
- this.$scope.catalogFilterdItems = followedResponse;
- this.$scope.isAllItemDisplay = this.$scope.numberOfItemToDisplay >= this.$scope.catalogFilterdItems.length;
- this.$scope.categories = this.cacheService.get('serviceCategories').concat(this.cacheService.get('resourceCategories'));
- this.$scope.gui.isLoading = false;
- };
- let onError = ():void => {
- console.info('Failed to load catalog CatalogViewModel::initCatalog');
- this.$scope.gui.isLoading = false;
- };
- this.EntityService.getCatalog().then(onSuccess, onError);
+ 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.gui.isLoading = true;
this.$scope.numberOfItemToDisplay = 0;
- //this.$scope.categories = this.cacheService.get('categoriesMap');
+ 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;
- this.$scope.version = this.cacheService.get('version');
- this.$scope.sortBy = 'lastUpdateDate';
- this.$scope.reverse = true;
-
// 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 = [];
+ }
- // this.$scope.isAllItemDisplay = this.$scope.numberOfItemToDisplay >= this.$scope.catalogFilterdItems.length;
- };
+ 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.sectionClick = (section:string):void => {
- let index:number = this.$scope.expandedSection.indexOf(section);
+ 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 {
@@ -173,13 +259,16 @@ export class CatalogViewModel {
};
- this.$scope.order = (sortBy:string):void => {//default sort by descending last update. default for alphabetical = ascending
- this.$scope.reverse = (this.$scope.sortBy === sortBy) ? !this.$scope.reverse : (sortBy === 'lastUpdateDate') ? true : false;
- this.$scope.sortBy = sortBy;
+ 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.goToComponent = (component: Component): void => {
this.$scope.gui.isLoading = true;
this.$state.go('workspace.general', {id: component.uniqueId, type: component.componentType.toLowerCase()});
};
@@ -188,11 +277,11 @@ export class CatalogViewModel {
// Will print the number of elements found in catalog
this.$scope.getNumOfElements = (num:number):string => {
if (!num || num === 0) {
- return "No Elements found";
+ return `No <b>${this.$scope.selectedCatalogItem.header}</b> Elements found`;
} else if (num === 1) {
- return "1 Element found";
+ return `1 <b>${this.$scope.selectedCatalogItem.header}</b> Element found`;
} else {
- return num + " Elements found";
+ return num + ` <b>${this.$scope.selectedCatalogItem.header}</b> Elements found`;
}
};
@@ -200,124 +289,392 @@ export class CatalogViewModel {
* Select | unselect sub resource when resource is clicked | unclicked.
* @param type
*/
- this.$scope.gui.onComponentTypeClick = (type:string):void => {
- if (type === 'Resource') {
- if (this.$scope.checkboxesFilter.selectedComponentTypes.indexOf('Resource') === -1) {
- // If the resource was not selected, unselect all childs.
- this.$scope.checkboxesFilter.selectedResourceSubTypes = [];
- } else {
- // If the resource was selected, select all childs
- this.$scope.checkboxesFilter.selectedResourceSubTypes = angular.copy(this.$scope.checkboxes.resourceSubTypes);
- }
+ 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.onResourceSubTypesClick = ():void => {
- if (this.$scope.checkboxesFilter.selectedResourceSubTypes && this.$scope.checkboxesFilter.selectedResourceSubTypes.length === this.$scope.checkboxes.resourceSubTypes.length) {
- this.$scope.checkboxesFilter.selectedComponentTypes.push('Resource');
- } else {
- this.$scope.checkboxesFilter.selectedComponentTypes = _.without(this.$scope.checkboxesFilter.selectedComponentTypes, 'Resource');
+ 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:IMainCategory):void => {
- // Select | Unselect all childs
- if (this.isCategorySelected(category.uniqueId)) {
- this.$scope.checkboxesFilter.selectedCategoriesModel = this.$scope.checkboxesFilter.selectedCategoriesModel.concat(angular.copy(_.map(category.subcategories, (item) => {
- return item.uniqueId;
- })));
- if (category.subcategories) {
- category.subcategories.forEach((sub:ISubCategory)=> { // Loop on all selected subcategories and mark the childrens
- this.$scope.checkboxesFilter.selectedCategoriesModel = this.$scope.checkboxesFilter.selectedCategoriesModel.concat(angular.copy(_.map(sub.groupings, (item) => {
- return item.uniqueId;
- })));
- });
+ 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;
+ }
}
- } else {
- this.$scope.checkboxesFilter.selectedCategoriesModel = _.difference(this.$scope.checkboxesFilter.selectedCategoriesModel, _.map(category.subcategories, (item) => {
- return item.uniqueId;
- }));
- if (category.subcategories) {
- category.subcategories.forEach((sub:ISubCategory)=> { // Loop on all selected subcategories and un mark the childrens
- this.$scope.checkboxesFilter.selectedCategoriesModel = _.difference(this.$scope.checkboxesFilter.selectedCategoriesModel, _.map(sub.groupings, (item) => {
- return item.uniqueId;
- }));
- });
+
+ 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.onSubcategoryClick = (category:IMainCategory, subCategory:ISubCategory):void => {
- // Select | Unselect all childs
- if (this.isCategorySelected(subCategory.uniqueId)) {
- this.$scope.checkboxesFilter.selectedCategoriesModel = this.$scope.checkboxesFilter.selectedCategoriesModel.concat(angular.copy(_.map(subCategory.groupings, (item) => {
- return item.uniqueId;
- })));
- } else {
- this.$scope.checkboxesFilter.selectedCategoriesModel = _.difference(this.$scope.checkboxesFilter.selectedCategoriesModel, _.map(subCategory.groupings, (item) => {
- return item.uniqueId;
- }));
- }
+ this.$scope.gui.onStatusClick = (statusKey: string, status: IConfigStatus, checked?: boolean) => {
+ const statuses = angular.copy(this.$scope.filterParams.statuses);
- // Mark | Un mark the parent when all childs selected.
- if (this.areAllCategoryChildsSelected(category)) {
- // Add the category to checkboxesFilter.selectedCategoriesModel
- this.$scope.checkboxesFilter.selectedCategoriesModel.push(category.uniqueId);
- } else {
- this.$scope.checkboxesFilter.selectedCategoriesModel = _.without(this.$scope.checkboxesFilter.selectedCategoriesModel, category.uniqueId);
+ // 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.raiseNumberOfElementToDisplay = (): void => {
this.$scope.numberOfItemToDisplay = this.$scope.numberOfItemToDisplay + 35;
if (this.$scope.catalogFilterdItems) {
this.$scope.isAllItemDisplay = this.$scope.numberOfItemToDisplay >= this.$scope.catalogFilterdItems.length;
}
};
- this.$scope.gui.onGroupClick = (subCategory:ISubCategory):void => {
- // Mark | Un mark the parent when all childs selected.
- if (this.areAllSubCategoryChildsSelected(subCategory)) {
- // Add the category to checkboxesFilter.selectedCategoriesModel
- this.$scope.checkboxesFilter.selectedCategoriesModel.push(subCategory.uniqueId);
- } else {
- this.$scope.checkboxesFilter.selectedCategoriesModel = _.without(this.$scope.checkboxesFilter.selectedCategoriesModel, subCategory.uniqueId);
- }
- };
+ }
+ 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 areAllCategoryChildsSelected = (category:IMainCategory):boolean => {
- if (!category.subcategories) {
- return false;
+ 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);
}
- let allIds = _.map(category.subcategories, (sub:ISubCategory)=> {
- return sub.uniqueId;
+ 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);
+ }
+ }
});
- let total = _.intersection(this.$scope.checkboxesFilter.selectedCategoriesModel, allIds);
- return total.length === category.subcategories.length ? true : false;
- };
+ 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 {
- private areAllSubCategoryChildsSelected = (subCategory:ISubCategory):boolean => {
- if (!subCategory.groupings) {
- return false;
+ 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);
}
- let allIds = _.map(subCategory.groupings, (group:IGroup)=> {
- return group.uniqueId;
- });
- let total = _.intersection(this.$scope.checkboxesFilter.selectedCategoriesModel, allIds);
- return total.length === subCategory.groupings.length ? true : false;
- };
+ }
- private isCategorySelected = (uniqueId:string):boolean => {
- if (this.$scope.checkboxesFilter.selectedCategoriesModel.indexOf(uniqueId) !== -1) {
- return true;
+ 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);
}
- return false;
- };
+
+ }
+
+ 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
index 76f23573a1..0546db3196 100644
--- a/catalog-ui/src/app/view-models/catalog/catalog-view.html
+++ b/catalog-ui/src/app/view-models/catalog/catalog-view.html
@@ -7,10 +7,31 @@
<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">&nbsp;</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" include-padding="true">
+ <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"
@@ -23,20 +44,20 @@
<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">
- <sdc-checkbox elem-id="checkbox-{{type | lowercase | clearWhiteSpaces}}"
+ <ng1-checkbox elem-id="checkbox-{{type | lowercase | clearWhiteSpaces}}"
sdc-checklist-model="checkboxesFilter.selectedComponentTypes"
sdc-checklist-value="type"
- data-ng-click="gui.onComponentTypeClick(type)"
- text="{{type}}"></sdc-checkbox>
+ 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">
- <sdc-checkbox elem-id="checkbox-{{subType | lowercase | clearWhiteSpaces}}"
+ <ng1-checkbox elem-id="checkbox-{{subType | lowercase | clearWhiteSpaces}}"
sdc-checklist-model="checkboxesFilter.selectedResourceSubTypes"
sdc-checklist-value="subType"
- data-ng-click="gui.onResourceSubTypesClick()"
- text="{{subType}}"></sdc-checkbox>
+ sdc-checked-change="gui.onComponentSubTypesClick(subType, type, checked)"
+ text="{{subType}}"></ng1-checkbox>
</li>
</ul>
@@ -59,33 +80,33 @@
<li class="i-sdc-designer-leftbar-section-content-ul-li"
data-ng-repeat="category in categories | categoryTypeFilter:checkboxesFilter.selectedComponentTypes:checkboxesFilter.selectedResourceSubTypes | orderBy: category">
- <sdc-checkbox elem-id="checkbox-{{category.uniqueId | lowercase | clearWhiteSpaces}}"
+ <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}}"
- data-ng-click="gui.onCategoryClick(category)"
- text="{{category.name}}"></sdc-checkbox>
+ 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'">
- <sdc-checkbox elem-id="checkbox-{{subcategory.uniqueId | lowercase | clearWhiteSpaces}}"
+ <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}}"
- data-ng-click="gui.onSubcategoryClick($parent.category, subcategory)"
- text="{{subcategory.name}}"></sdc-checkbox>
+ 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'">
- <sdc-checkbox elem-id="checkbox-{{grouping.uniqueId | lowercase | clearWhiteSpaces}}"
+ <ng1-checkbox elem-id="checkbox-{{grouping.uniqueId | lowercase | clearWhiteSpaces}}"
sdc-checklist-model="checkboxesFilter.selectedCategoriesModel"
sdc-checklist-value="grouping.uniqueId"
- data-ng-click="gui.onGroupClick($parent.subcategory)"
- text="{{grouping.name}}"></sdc-checkbox>
+ sdc-checked-change="gui.onCategoryClick(grouping, checked)"
+ text="{{grouping.name}}"></ng1-checkbox>
</li>
</ul>
@@ -112,15 +133,15 @@
<!--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 | catalogStatusFilter">
+ data-ng-repeat="(key, state) in confStatus">
- <sdc-checkbox elem-id="checkbox-{{key | lowercase | clearWhiteSpaces}}"
+ <ng1-checkbox elem-id="checkbox-{{key | lowercase | clearWhiteSpaces}}"
sdc-checklist-model="checkboxesFilter.selectedStatuses"
sdc-checklist-value="state.values"
- text="{{state.name}}"></sdc-checkbox>
+ sdc-checked-change="gui.onStatusClick(key, state, checked)"
+ text="{{state.name}}"></ng1-checkbox>
<div class="i-sdc-categories-list-item-icon"></div>
- </label>
</li>
</ul>
</div>
@@ -134,66 +155,39 @@
<!-- HEADER -->
<div>
- <div class="w-sdc-dashboard-catalog-header">
- {{getNumOfElements((catalogFilterdItems| entityFilter:checkboxesFilter | filter:search).length)}}
- </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-order" translate="SORT_CAPTION"></span>&nbsp;&nbsp;
+ <span class="w-sdc-dashboard-catalog-header-order1" translate="SORT_CAPTION"></span>&nbsp;&nbsp;
<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>&nbsp;
<span data-ng-show="sortBy === 'lastUpdateDate'" class="w-sdc-catalog-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"></span>
&nbsp;|&nbsp;
<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>&nbsp;
+ ng-click="order('name|resourceName')" translate="SORT_ALPHABETICAL"></a>&nbsp;
<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-parent>
+ <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 -->
- <div data-ng-init="component.filterTerm = component.name + ' ' + component.description + ' ' + component.tags.toString() + ' ' + component.version"
- class="sdc-tile sdc-tile-fix-width"
- data-ng-repeat="component in catalogFilterdItems| entityFilter:checkboxesFilter | filter:search | orderBy:sortBy:reverse | limitTo:numberOfItemToDisplay"
- >
-
- <div class='sdc-tile-header' data-ng-class="{'purple': component.isResource(), 'blue': !component.isResource()}">
- <div data-ng-if="component.isResource()" data-tests-id="asset-type">{{component.getComponentSubType()}}</div>
- <div data-ng-if="component.isService()">S</div>
- </div>
-
- <div class='sdc-tile-content' data-ng-click="gui.isLoading || goToComponent(component)">
- <div class='sdc-tile-content-icon centered'>
- <div class="{{component.iconSprite}} {{component.icon}}"
- data-ng-class="{'sprite-resource-icons': component.isResource(), 'sprite-services-icons': component.isService()}"
- data-tests-id="{{component.name}}"></div>
- </div>
- <div class='sdc-tile-content-info'>
- <div class="sdc-tile-info-line title" data-tests-id="{{component.name | resourceName}}" sdc-smart-tooltip>{{component.name | resourceName}}</div>
- <div class="sdc-tile-info-line subtitle" data-tests-id="{{component.name}}Version">
- V {{component.version}}
- </div>
- </div>
- </div>
- <div class='sdc-tile-footer'>
- <div class="sdc-tile-footer-content">
- <div class='sdc-tile-footer-text'>{{component.getStatus(sdcMenu)}}</div>
- </div>
- </div>
- </div>
<!-- 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)="search.filterTerm=$event" [version]="version"></top-nav>
+ <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
index 1f473c9638..45556030e3 100644
--- a/catalog-ui/src/app/view-models/catalog/catalog.less
+++ b/catalog-ui/src/app/view-models/catalog/catalog.less
@@ -145,29 +145,29 @@
color: #000;
width: 300px;
}
-
- // .magnification {
- // .sprite;
- // .sprite.magnification-glass;
- // .hand;
- // position: absolute;
- // top: 40px;
- // right: 42px;
- // }
}
.w-sdc-catalog-main {
padding: 10px 12px;
}
- .w-sdc-dashboard-catalog-header {
+ .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: italic;
- font-weight: bold;
- padding-left: 10px;
+ 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-order {
+ .w-sdc-dashboard-catalog-header-order1 {
.b_3;
font-weight: 800;
}
@@ -207,8 +207,6 @@
}
-
-
.w-sdc-dashboard-catalog-header-right{
float: right;
display: inline-block;
@@ -248,6 +246,39 @@
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;
@@ -299,3 +330,33 @@
.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
index 42628607c9..4d084045f7 100644
--- a/catalog-ui/src/app/view-models/dashboard/dashboard-view-model.ts
+++ b/catalog-ui/src/app/view-models/dashboard/dashboard-view-model.ts
@@ -21,13 +21,15 @@
'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} from "app/utils";
+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;
@@ -38,10 +40,11 @@ export interface IDashboardViewModelScope extends ng.IScope {
showTutorial:boolean;
isFirstTime:boolean;
version:string;
- checkboxesFilter:CheckboxesFilter;
+ filterParams:DashboardFilter;
vfcmtType:string;
-
+ changeFilterParams():void;
+ updateSearchTerm(newTerm:string):void;
onImportVfc(file:any):void;
onImportVf(file:any):void;
openCreateModal(componentType:ComponentType, importedFile:any):void;
@@ -52,11 +55,12 @@ export interface IDashboardViewModelScope extends ng.IScope {
getCurrentFolderDistributed():Array<Component>;
changeLifecycleState(entity:any, data:any):void;
goToComponent(component:Component):void;
+ raiseNumberOfElementToDisplay():void;
wizardDebugEdit:Function;
notificationIconCallback:Function;
}
-interface CheckboxesFilter {
+interface ICheckboxesFilter {
// Statuses
selectedStatuses:Array<string>;
// distributed
@@ -76,6 +80,35 @@ export interface IMenuItemProperties {
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> = [];
@@ -190,7 +223,7 @@ export class DashboardViewModel {
private $http:ng.IHttpService,
private sdcConfig:IAppConfigurtaion,
private sdcMenu:IAppMenu,
- private $state:any,
+ private $state:ng.ui.IStateService,
private $stateParams:any,
private userService:UserService,
private sharingService:SharingService,
@@ -202,7 +235,7 @@ export class DashboardViewModel {
private MenuHandler:MenuHandler) {
this.initScope();
this.initFolders();
- this.initEntities(true);
+ this.initEntities();
if (this.$stateParams) {
@@ -237,6 +270,7 @@ export class DashboardViewModel {
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;
@@ -245,21 +279,26 @@ export class DashboardViewModel {
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(()=> {
- // OK
+ 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
});
};
- // Checkboxes filter init
- this.$scope.checkboxesFilter = <CheckboxesFilter>{};
- this.$scope.checkboxesFilter.selectedStatuses = [];
- this.$scope.checkboxesFilter.distributed = [];
-
this.$scope.onImportVf = (file:any):void => {
if (file && file.filename) {
// Check that the file has valid extension.
@@ -367,6 +406,20 @@ export class DashboardViewModel {
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 {
@@ -393,16 +446,38 @@ export class DashboardViewModel {
}
}
- private initEntities = (reload:boolean):void => {
- this.$scope.isLoading = reload;
- this.entityService.getAllComponents().then(
- (components:Array<Component>) => {
- this.components = components;
- this.$scope.components = components;
- this.$scope.isLoading = false;
- });
+ 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)) {
diff --git a/catalog-ui/src/app/view-models/dashboard/dashboard-view.html b/catalog-ui/src/app/view-models/dashboard/dashboard-view.html
index bddcbcd46c..8279232b13 100644
--- a/catalog-ui/src/app/view-models/dashboard/dashboard-view.html
+++ b/catalog-ui/src/app/view-models/dashboard/dashboard-view.html
@@ -8,74 +8,53 @@
<div class="w-sdc-main-container">
- <perfect-scrollbar include-padding="true" class="w-sdc-main-right-container">
-
- <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>
+ <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>
- </div>
- <!-- Tile new -->
- <div class="sdc-tile sdc-tile-fix-width" data-ng-repeat="component in components | filter:{resourceType:('!'+vfcmtType)} | entityFilter:checkboxesFilter | filter:search">
-
- <div class='sdc-tile-header' data-ng-class="{'purple': component.isResource(), 'blue': !component.isResource()}">
- <div data-ng-if="component.isResource()" data-tests-id="asset-type">{{component.getComponentSubType()}}</div>
- <div data-ng-if="component.isService()">S</div>
- </div>
-
- <div class='sdc-tile-content' data-tests-id="dashboard-Elements" data-ng-click="goToComponent(component)">
- <div class='sdc-tile-content-icon'>
- <div class="{{component.iconSprite}} {{component.icon}}"
- data-ng-class="{'sprite-resource-icons': component.isResource(), 'sprite-services-icons': component.isService()}"
- data-tests-id="{{component.name}}"></div>
- </div>
-
- <div class='sdc-tile-content-info'>
- <div class="sdc-tile-info-line title" data-tests-id="{{component.name | resourceName}}" sdc-smart-tooltip>{{component.name | resourceName}}</div>
- <div class="sdc-tile-info-line subtitle" data-tests-id="{{component.name}}Version">V {{component.version}}</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>
- <div class='sdc-tile-footer'>
- <div class="sdc-tile-footer-content">
- <div class='sdc-tile-footer-text'>{{component.getStatus(sdcMenu)}}</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>
- <!-- Tile new -->
</div>
@@ -88,24 +67,26 @@
>
<span data-ng-if="folder.isGroup()">{{folder.text}}</span>
- <sdc-checkbox data-ng-if="!folder.isGroup() && !folder.dist"
+ <ng1-checkbox data-ng-if="!folder.isGroup() && !folder.dist"
elem-id="checkbox-{{folder.text | lowercase | clearWhiteSpaces}}"
- sdc-checklist-model="checkboxesFilter.selectedStatuses"
+ sdc-checklist-model="filterParams.checkboxes.selectedStatuses"
sdc-checklist-value="folder.state"
- text="{{folder.text}}"></sdc-checkbox>
+ sdc-checklist-change="changeFilterParams()"
+ text="{{folder.text}}"></ng1-checkbox>
- <sdc-checkbox data-ng-if="!folder.isGroup() && folder.dist"
+ <ng1-checkbox data-ng-if="!folder.isGroup() && folder.dist"
elem-id="checkbox-{{folder.text | lowercase | clearWhiteSpaces}}"
- sdc-checklist-model="checkboxesFilter.distributed"
+ sdc-checklist-model="filterParams.checkboxes.distributed"
sdc-checklist-value="folder.dist"
- text="{{folder.text}}"></sdc-checkbox>
+ 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]="search.filterTerm" (search-term-change)="search.filterTerm=$event" [notification-icon-callback]="notificationIconCallback"></top-nav>
+ <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/forms/artifact-form/artifact-form-view.html b/catalog-ui/src/app/view-models/forms/artifact-form/artifact-form-view.html
index 0984c6872d..59124a28d9 100644
--- 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
@@ -1,4 +1,4 @@
-<sdc-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">
+<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>
@@ -165,5 +165,5 @@
</form>
</div>
-</sdc-modal>
+</ng1-modal>
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
index daa7a90bf8..eada5c9269 100644
--- 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
@@ -1,4 +1,4 @@
-<sdc-modal modal="modalInstanceAttribute" type="classic" class="sdc-edit-attribute-container" buttons="footerButtons" header="{{isNew ? 'Add' : 'Update' }} Attribute" show-close-button="true">
+<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" >
@@ -149,4 +149,4 @@
</form>
</div>
-</sdc-modal>
+</ng1-modal>
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
index 5fd57f6b24..d211b4ea72 100644
--- 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
@@ -1,4 +1,4 @@
-<sdc-modal modal="envParametersModal" type="classic" class="sdc-env-form-container" buttons="buttons" header="{{artifactResource.artifactDisplayName}}" show-close-button="true">
+<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"/>
@@ -46,8 +46,7 @@
<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),
- 'default-value':(parameter.defaultValue && parameter.currentValue === parameter.defaultValue)}"
+ <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}}"
@@ -90,4 +89,4 @@
</div>
</div>
</div>
-</sdc-modal>
+</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
index e797093271..d89ab37030 100644
--- 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
@@ -109,9 +109,6 @@
width: 100%;
display: inline-flex;
padding-right: 33px;
- &.default-value{
- border-color: @func_color_h;
- }
}
.action-button{
border-left: solid 1px @main_color_o;
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
index 1bf6dc4ca9..34532d14dd 100644
--- 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
@@ -1,4 +1,4 @@
-<sdc-modal modal="modalInstanceInput" type="classic" class="sdc-edit-input-container" buttons="footerButtons" header="Update Input" show-close-button="true">
+<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" >
@@ -122,4 +122,4 @@
</form>
</div>
-</sdc-modal>
+</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 7cb05bf4ca..248f143eca 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
@@ -1,4 +1,4 @@
-<sdc-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">
+<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">
<div class="sdc-modal-top-bar-buttons">
@@ -129,4 +129,4 @@
</perfect-scrollbar>
</div>
-</sdc-modal>
+</ng1-modal>
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 8ea2e8cf76..f5c057e41e 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
@@ -23,8 +23,9 @@ 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} from "app/models";
+import {PropertyModel, DataTypesMap, Component, GroupInstance, PolicyInstance, PropertyBEModel} from "app/models";
import {ComponentInstance} from "../../../../models/componentsInstances/componentInstance";
+import { ComponentInstanceServiceNg2 } from "app/ng2/services/component-instance-services/component-instance.service";
export interface IEditPropertyModel {
property:PropertyModel;
@@ -86,7 +87,10 @@ export class PropertyFormViewModel {
'ModalsHandler',
'filteredProperties',
'$timeout',
- 'isPropertyValueOwner'
+ 'isPropertyValueOwner',
+ 'propertyOwnerType',
+ 'propertyOwnerId',
+ 'ComponentInstanceServiceNg2'
];
private formState:FormState;
@@ -104,7 +108,10 @@ export class PropertyFormViewModel {
private ModalsHandler:ModalsHandler,
private filteredProperties:Array<PropertyModel>,
private $timeout:ng.ITimeoutService,
- private isPropertyValueOwner:boolean) {
+ private isPropertyValueOwner:boolean,
+ private propertyOwnerType:string,
+ private propertyOwnerId:string,
+ private ComponentInstanceServiceNg2: ComponentInstanceServiceNg2) {
this.formState = angular.isDefined(property.name) ? FormState.UPDATE : FormState.CREATE;
this.initScope();
@@ -194,15 +201,17 @@ export class PropertyFormViewModel {
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();
//check if property of VnfConfiguration
this.$scope.isVnfConfiguration = false;
- if(angular.isArray(this.component.componentInstances)) {
+ if(this.propertyOwnerType == "component" && angular.isArray(this.component.componentInstances)) {
+
var componentPropertyOwner:ComponentInstance = this.component.componentInstances.find((ci:ComponentInstance) => {
return ci.uniqueId === this.property.resourceInstanceUniqueId;
});
- if (componentPropertyOwner.componentName === 'vnfConfiguration') {
+ if (componentPropertyOwner && componentPropertyOwner.componentName === 'vnfConfiguration') {
this.$scope.isVnfConfiguration = true;
}
}
@@ -252,21 +261,30 @@ export class PropertyFormViewModel {
}
};
- //in case we have uniqueId we call update method
- if (this.$scope.isPropertyValueOwner) {
- if (!this.$scope.editPropertyModel.property.simpleType && !this.$scope.isSimpleType(property.type)) {
- let myValueString:string = JSON.stringify(this.$scope.myValue);
- property.value = myValueString;
- }
- this.component.updateInstanceProperties(property.resourceInstanceUniqueId, [property]).then((propertiesFromBE) => onPropertySuccess(propertiesFromBE[0]), onPropertyFaild);
+ //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])
+ .subscribe((propertiesFromBE) => { onPropertySuccess(<PropertyModel>propertiesFromBE[0])}, error => onPropertyFaild);
+ } else if(this.propertyOwnerType == "policy"){
+ this.ComponentInstanceServiceNg2.updateComponentPolicyInstanceProperties(this.component, this.propertyOwnerId, [property])
+ .subscribe((propertiesFromBE) => { onPropertySuccess(<PropertyModel>propertiesFromBE[0])}, error => onPropertyFaild);
} else {
- if (!this.$scope.editPropertyModel.property.simpleType && !this.$scope.isSimpleType(property.type)) {
- let myValueString:string = JSON.stringify(this.$scope.myValue);
- property.defaultValue = myValueString;
+ //in case we have uniqueId we call update method
+ if (this.$scope.isPropertyValueOwner) {
+ if (!this.$scope.editPropertyModel.property.simpleType && !this.$scope.isSimpleType(property.type)) {
+ let myValueString:string = JSON.stringify(this.$scope.myValue);
+ property.value = myValueString;
+ }
+ this.component.updateInstanceProperties(property.resourceInstanceUniqueId, [property]).then((propertiesFromBE) => onPropertySuccess(propertiesFromBE[0]), onPropertyFaild);
} else {
- this.$scope.editPropertyModel.property.defaultValue = this.$scope.editPropertyModel.property.value;
+ if (!this.$scope.editPropertyModel.property.simpleType && !this.$scope.isSimpleType(property.type)) {
+ let myValueString:string = JSON.stringify(this.$scope.myValue);
+ property.defaultValue = myValueString;
+ } else {
+ this.$scope.editPropertyModel.property.defaultValue = this.$scope.editPropertyModel.property.value;
+ }
+ this.component.addOrUpdateProperty(property).then(onPropertySuccess, onPropertyFaild);
}
- this.component.addOrUpdateProperty(property).then(onPropertySuccess, onPropertyFaild);
}
};
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 743de298cd..37a265a098 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
@@ -1,8 +1,8 @@
-<sdc-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">
+<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">
<div class="sdc-modal-top-bar-buttons">
- <span ng-click="delete(editPropertyModel.property)" data-ng-class="{'disabled' : isPropertyValueOwner || editPropertyModel.property.readonly}" class="sprite-new delete-btn" data-tests-id="delete_property" sdc-smart-tooltip="">Delete</span>
+ <span ng-click="delete(editPropertyModel.property)" data-ng-class="{'disabled' : isPropertyValueOwner || editPropertyModel.property.readonly || propertyOwnerType == 'group' || propertyOwnerType == 'policy'}" class="sprite-new delete-btn" data-tests-id="delete_property" sdc-smart-tooltip="">Delete</span>
<span class="delimiter"></span>
<span data-ng-click="getPrev()" data-ng-class="{'disabled' : !currentPropertyIndex }" class="sprite-new left-arrow" data-tests-id="get-prev" sdc-smart-tooltip="">Previous</span>
<span data-ng-click="getNext()" data-ng-class="{'disabled' : isLastProperty }" class="sprite-new right-arrow" data-tests-id="get-next" sdc-smart-tooltip="">Next</span>
@@ -198,4 +198,4 @@
</perfect-scrollbar>
</div>
-</sdc-modal>
+</ng1-modal>
diff --git a/catalog-ui/src/app/view-models/forms/property-forms/module-property-modal/module-property-model.ts b/catalog-ui/src/app/view-models/forms/property-forms/module-property-modal/module-property-model.ts
index 510814b333..2437f4612c 100644
--- a/catalog-ui/src/app/view-models/forms/property-forms/module-property-modal/module-property-model.ts
+++ b/catalog-ui/src/app/view-models/forms/property-forms/module-property-modal/module-property-model.ts
@@ -71,7 +71,7 @@ export class ModulePropertyView extends PropertyFormBaseView {
save(isNeedToCloseModal):ng.IPromise<boolean> {
- let deferred = this.$q.defer();
+ let deferred = this.$q.defer<boolean>();
let onSuccess = (properties:Array<PropertyModel>):void => {
deferred.resolve(true);
diff --git a/catalog-ui/src/app/view-models/forms/property-forms/select-datatype-modal/select-datatype-modal-view-model.ts b/catalog-ui/src/app/view-models/forms/property-forms/select-datatype-modal/select-datatype-modal-view-model.ts
index 8d5c30a6fe..ab4b033c0e 100644
--- a/catalog-ui/src/app/view-models/forms/property-forms/select-datatype-modal/select-datatype-modal-view-model.ts
+++ b/catalog-ui/src/app/view-models/forms/property-forms/select-datatype-modal/select-datatype-modal-view-model.ts
@@ -67,7 +67,7 @@ export class SelectDataTypeViewModel extends PropertyFormBaseView {
//scope methods
save(isNeedToCloseModal):ng.IPromise<boolean> {
- let deferred = this.$q.defer();
+ let deferred = this.$q.defer<boolean>();
this.$scope.property.propertiesName = this.DataTypesService.selectedPropertiesName;
this.$scope.property.input = this.DataTypesService.selectedInput;
this.$scope.property.isAlreadySelected = true;
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
index e04343adbd..969d1d91d5 100644
--- 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
@@ -1,4 +1,4 @@
-<sdc-modal modal="modalInstanceName" type="classic" class="w-sdc-modal-resource-instance-name modal-type-confirmation" buttons="footerButtons" header="Instance Name" show-close-button="true">
+<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)}">
@@ -25,7 +25,7 @@
</div>
</form>
-</sdc-modal>
+</ng1-modal>
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
index 09c27f8cd3..e6b31d5a47 100644
--- 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
@@ -1,4 +1,4 @@
-<sdc-modal modal="modalInstanceConfirmation" type="classic" class="w-sdc-modal-confirmation modal-type-{{confirmationModalModel.type}}" header="{{confirmationModalModel.title}}" show-close-button="true">
+<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>
@@ -24,6 +24,6 @@
<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>
+ <!--<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>
-</sdc-modal>
+</ng1-modal>
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
index 3577e4d77b..59a13bc72a 100644
--- 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
@@ -1,4 +1,4 @@
-<sdc-modal modal="modalInstance"
+<ng1-modal modal="modalInstance"
type="classic"
class="w-sdc-modal modal-type-alert conformance-level-modal"
header="Warning"
@@ -19,4 +19,4 @@
</div>
</perfect-scrollbar>
-</sdc-modal>
+</ng1-modal>
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
index bf65428033..0354e62063 100644
--- 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
@@ -1,4 +1,4 @@
-<sdc-modal modal="modalInstanceEmail" type="classic" class="w-sdc-modal-email modal-type-standard" header="{{emailModalModel.title}}" show-close-button="true">
+<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">
@@ -74,4 +74,4 @@
<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>
-</sdc-modal>
+</ng1-modal>
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 41b1c6df1d..08f3ef4952 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
@@ -1,4 +1,4 @@
<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="{{ mailtoJson }}"></div>
+ <div class="w-sdc-error-403-text w-sdc-form" translate="GENERAL_ERROR_403_DESCRIPTION" translate-values="{'mailto': mailto }"></div>
</div>
diff --git a/catalog-ui/src/app/view-models/modals/error-modal/error.less b/catalog-ui/src/app/view-models/modals/error-modal/error.less
index 8297b5053d..1843ea34bc 100644
--- a/catalog-ui/src/app/view-models/modals/error-modal/error.less
+++ b/catalog-ui/src/app/view-models/modals/error-modal/error.less
@@ -1,10 +1,17 @@
.sdc-error-403-container {
.bg_n;
width: 700px;
- height: 400px;
margin: auto;
margin-top: 196px;
+ padding: 40px;
+ box-shadow: #999 2px 2px 10px;
+ text-align: center;
+ .sdc-error-403-container-title {
+ font-size: 24px;
+ text-transform: uppercase;
+ }
+
.w-sdc-error-403-text {
.q_11;
margin-top: 20px;
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 4b89701201..aa9230f9d9 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
@@ -1,4 +1,4 @@
-<sdc-modal modal="modalIcons" type="classic" class="w-sdc-modal-icons" buttons="footerButtons" header="Choose Icon" show-close-button="true">
+<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">
<div class ="suggested-icon-wrapper" data-ng-class="{'selected': selectedIcon == iconSrc}" data-ng-repeat="iconSrc in icons track by $index">
@@ -15,4 +15,4 @@
<button class="tlv-btn blue" data-tests-id="OK" data-ng-click="updateIcon()">OK</button>
<button class="tlv-btn grey" data-tests-id="Cancel" data-ng-click="cancel()" >Cancel</button>
</div>
-</sdc-modal>
+</ng1-modal>
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
index cfb0a35f69..421391e923 100644
--- 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
@@ -1,4 +1,4 @@
-<sdc-modal modal="modalInstanceError"
+<ng1-modal modal="modalInstanceError"
type="classic"
class="w-sdc-modal modal-type-alert"
header="{{messageModalModel.title}}"
@@ -13,4 +13,4 @@
<!--<div class="w-sdc-modal-body-content" data-ng-bind-html="messageModalModel.message"></div>-->
</perfect-scrollbar>
-</sdc-modal>
+</ng1-modal>
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
index e3c6ad1c55..b92069fce2 100644
--- 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
@@ -24,6 +24,8 @@ import {IMessageModalModel, IMessageModalViewModelScope, MessageModalViewModel}
export interface IServerMessageModalModel extends IMessageModalModel {
status:string;
messageId:string;
+
+
}
export interface IServerMessageModalViewModelScope extends IMessageModalViewModelScope {
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
index 294dc76c4c..524551bcc8 100644
--- 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
@@ -1,4 +1,4 @@
-<sdc-modal modal="modalInstanceError"
+<ng1-modal modal="modalInstanceError"
type="classic"
class="w-sdc-modal modal-type-error"
header="{{messageModalModel.title}}"
@@ -14,4 +14,4 @@
<div class="w-sdc-modal-body-content" data-ng-bind-html="messageModalModel.message" data-tests-id="message"></div>
</perfect-scrollbar>
-</sdc-modal>
+</ng1-modal>
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
index 1cc3690e9f..46b258f0bd 100644
--- 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
@@ -19,7 +19,7 @@
*/
'use strict';
-import {ComponentType, CHANGE_COMPONENT_CSAR_VERSION_FLAG, SEVERITY, FileUtils, ModalsHandler, ComponentFactory} from "app/utils";
+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";
@@ -63,6 +63,7 @@ export class OnboardingModalViewModel {
'Sdc.Services.OnboardingService',
'okButtonText',
'currentCsarUUID',
+ 'currentCsarVersion',
'Sdc.Services.CacheService',
'FileUtils',
'ComponentFactory',
@@ -77,6 +78,7 @@ export class OnboardingModalViewModel {
private onBoardingService:OnboardingService,
private okButtonText:string,
private currentCsarUUID:string,
+ private currentCsarVersion:string,
private cacheService:CacheService,
private fileUtils:FileUtils,
private componentFactory:ComponentFactory,
@@ -107,28 +109,27 @@ export class OnboardingModalViewModel {
// Dismiss the modal and pass the "mini" component to workspace general page
this.$scope.doImportCsar = ():void => {
- this.$uibModalInstance.dismiss();
- this.$state.go('workspace.general', {
- type: ComponentType.RESOURCE.toLowerCase(),
- componentCsar: this.$scope.selectedComponent
+
+ this.$uibModalInstance.close({
+ componentCsar: this.$scope.selectedComponent,
+ type: ComponentType.RESOURCE.toLowerCase()
});
};
this.$scope.doUpdateCsar = ():void => {
- // In case user select on update the checkin and submit for testing buttons (in general page) should be disabled.
- // to do that we need to pass to workspace.general state parameter to know to disable the buttons.
- this.$uibModalInstance.close();
+
// Change the component version to the CSAR version we want to update.
- /*(<Resource>this.$scope.componentFromServer).csarVersion = (<Resource>this.$scope.selectedComponent).csarVersion;
- let component:Components.Component = this.componentFactory.createComponent(this.$scope.componentFromServer);
- this.$state.go('workspace.general', {vspComponent: component, disableButtons: true });*/
- this.cacheService.set(CHANGE_COMPONENT_CSAR_VERSION_FLAG, (<Resource>this.$scope.selectedComponent).csarVersion);
- this.$state.go('workspace.general', {
- id: this.$scope.componentFromServer.uniqueId,
- componentCsar: this.$scope.selectedComponent,
- type: this.$scope.componentFromServer.componentType.toLowerCase(),
- disableButtons: true
- });
+ 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 => {
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
index b078a4b1ef..a69d0a8f3c 100644
--- 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
@@ -1,4 +1,4 @@
-<sdc-modal modal="modalOnboarding" class="w-sdc-modal-onboarding w-sdc-classic-top-line-modal" buttons="footerButtons" header="Import VF" show-close-button="true">
+<ng1-modal modal="modalOnboarding" class="w-sdc-modal-onboarding w-sdc-classic-top-line-modal" buttons="footerButtons" header="Import VF" show-close-button="true">
<info-tooltip class="general-info-button" info-message-translate="ON_BOARDING_GENERAL_INFO "></info-tooltip>
<div class="title-wrapper">
<div>
@@ -141,4 +141,4 @@
</div><!-- End table-container-flex -->
<div class="w-sdc-modal-footer classic"></div>
-</sdc-modal>
+</ng1-modal>
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
index c438c7ace6..f752e3dba7 100644
--- 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
@@ -23,6 +23,10 @@ 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;
@@ -32,8 +36,9 @@ export interface IHierarchyScope extends ng.IScope {
expandCollapseArtifactsList:ExpandCollapseListData;
expandCollapsePropertiesList:ExpandCollapseListData;
selectedInstanceId:string;
+ componentInstancesMap:IComponentInstancesMap;
- onModuleSelected(moduleId:string, selectedIndex:number):void;
+ onModuleSelected(module:Module, selectedIndex:number, componentInstanceId?:string):void;
onModuleNameChanged(module:DisplayModule):void;
updateHeatName():void;
loadInstanceModules(instance:ComponentInstance):ng.IPromise<boolean>;
@@ -53,6 +58,7 @@ export class HierarchyViewModel {
this.$scope.isLoading = false;
this.$scope.expandCollapseArtifactsList = new ExpandCollapseListData();
this.$scope.expandCollapsePropertiesList = new ExpandCollapseListData();
+ this.$scope.componentInstancesMap = <IComponentInstancesMap>{};
this.initScopeMethods();
}
@@ -65,7 +71,7 @@ export class HierarchyViewModel {
this.$scope.expandCollapsePropertiesList.orderByField = "name";
};
- this.$scope.onModuleSelected = (moduleId:string, selectedIndex:number, componentInstanceId?:string):void => {
+ this.$scope.onModuleSelected = (module:Module, selectedIndex:number, componentInstanceId?:string):void => {
let onSuccess = (module:DisplayModule) => {
console.log("Module Loaded: ", module);
@@ -79,15 +85,25 @@ export class HierarchyViewModel {
};
this.$scope.selectedIndex = selectedIndex;
- if (!this.$scope.selectedModule || (this.$scope.selectedModule && this.$scope.selectedModule.uniqueId != moduleId)) {
+ 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, moduleId).then(onSuccess, onFailed);
+ this.$scope.component.getModuleInstanceForDisplay(componentInstanceId, module.uniqueId).then(onSuccess, onFailed);
} else {
- this.$scope.component.getModuleForDisplay(moduleId).then(onSuccess, onFailed);
+ 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 = () => {
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
index 3b7b5fc36a..7a3874ee08 100644
--- a/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view.html
+++ b/catalog-ui/src/app/view-models/tabs/hierarchy/hierarchy-view.html
@@ -11,8 +11,8 @@
<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.groups">
- <div class="expand-collapse-title first-level" data-tests-id="hierarchy-module-{{$index}}-title" ng-class="{'selected': selectedIndex === $index}" data-ng-click="onModuleSelected(module.uniqueId, $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>
@@ -21,8 +21,8 @@
</expand-collapse>
<div data-ng-repeat-end="" class="hierarchy-module-member-list {{$index}}">
- <div ng-repeat="(memberName, value) in ::module.members track by $index">
- <div class="expand-collapse-sub-title" tooltips tooltip-content="{{memberName}}">{{memberName}}</div>
+ <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>
@@ -48,7 +48,7 @@
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.uniqueId, $index, instance.uniqueId)">
+ <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>
@@ -56,8 +56,8 @@
</expand-collapse>
<div data-ng-repeat-end="" class="outer-index-{{$parent.$index}} hierarchy-module-member-list {{$index}}">
- <div ng-repeat="(memberName, value) in ::module.members track by $index">
- <div class="expand-collapse-sub-title" tooltips tooltip-content="{{memberName}}">{{memberName}}</div>
+ <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>
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
index 46c2d2edf9..a77377bac4 100644
--- 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
@@ -19,22 +19,34 @@
*/
'use strict';
import * as _ from "lodash";
-import {Component, ComponentInstance, IAppMenu} from "app/models";
-import {SharingService, CacheService, EventListenerService, LeftPaletteLoaderService} from "app/services";
-import {ModalsHandler, GRAPH_EVENTS, ComponentFactory, ChangeLifecycleStateHandler, MenuHandler, EVENTS} 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 { 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;
@@ -42,21 +54,24 @@ export interface ICompositionViewModelScope extends IWorkspaceViewModelScope {
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
+ 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;
-
+ ComponentServiceNg2:ComponentServiceNg2,
cacheComponentsInstancesFullData:Component;
}
@@ -76,8 +91,11 @@ export class CompositionViewModel {
'ChangeLifecycleStateHandler',
'LeftPaletteLoaderService',
'ModalsHandler',
+ 'ModalServiceSdcUI',
'EventListenerService',
- 'ComponentServiceFactoryNg2'
+ 'ComponentServiceFactoryNg2',
+ 'ComponentServiceNg2',
+ 'Notification'
];
constructor(private $scope:ICompositionViewModelScope,
@@ -93,8 +111,12 @@ export class CompositionViewModel {
private ChangeLifecycleStateHandler:ChangeLifecycleStateHandler,
private LeftPaletteLoaderService:LeftPaletteLoaderService,
private ModalsHandler:ModalsHandler,
+ private ModalServiceSdcUI: ModalServiceSdcUI,
private eventListenerService:EventListenerService,
- private ComponentServiceFactoryNg2: ComponentServiceFactoryNg2) {
+ private ComponentServiceFactoryNg2: ComponentServiceFactoryNg2,
+ private ComponentServiceNg2:ComponentServiceNg2,
+ private Notification:any
+ ) {
this.$scope.setValidState(true);
this.initScope();
@@ -104,16 +126,17 @@ export class CompositionViewModel {
private initGraphData = ():void => {
- if(!this.$scope.component.componentInstances || !this.$scope.component.componentInstancesRelations ) {
+ 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.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);
@@ -124,25 +147,134 @@ export class CompositionViewModel {
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 openUpdateComponentInstanceNameModal = ():void => {
- this.ModalsHandler.openUpdateComponentInstanceNameModal(this.$scope.currentComponent).then(()=> {
- this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_COMPONENT_INSTANCE_NAME_CHANGED, this.$scope.currentComponent.selectedInstance);
+ 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 => {
@@ -151,6 +283,12 @@ export class CompositionViewModel {
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,
@@ -165,6 +303,7 @@ export class CompositionViewModel {
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();
@@ -175,6 +314,21 @@ export class CompositionViewModel {
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: '&lt;' + this.$scope.component.name + '&gt; ' + 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
@@ -215,15 +369,25 @@ export class CompositionViewModel {
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');
}
};
+ 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') {
@@ -238,6 +402,10 @@ export class CompositionViewModel {
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;
@@ -258,8 +426,7 @@ export class CompositionViewModel {
modalText += `<p>The following service paths will be erased: ${pathNames}</p>`;
}
}
-
- this.ModalsHandler.openAlertModal(title, modalText).then(this.removeSelectedComponentInstance);
+ this.ModalServiceSdcUI.openAlertModal(title, modalText, "OK", this.removeSelectedComponentInstance, "deleteInstanceModal");
};
this.$scope.openVersionChangeModal = (pathsToDelete:string[]):ng.IPromise<any> => {
@@ -308,7 +475,7 @@ export class CompositionViewModel {
this.$scope.disabledTabs = state;
};
- this.eventListenerService.registerObserverCallback(EVENTS.ON_CHECKOUT, this.$scope.reload);
+ this.eventListenerService.registerObserverCallback(EVENTS.ON_LIFECYCLE_CHANGE, this.$scope.reload);
}
}
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
index fceb73b882..4cd33f3210 100644
--- 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
@@ -2,7 +2,7 @@
<loader data-display="isLoading"></loader>
<div class="w-sdc-designer-canvas" data-ng-class="{sidebaractive: displayDesignerRightSidebar}">
<palette current-component="currentComponent"
- is-view-only="isViewOnly"
+ is-view-only="isViewOnly || isCanvasTagging"
is-loading="isLoading"></palette>
<ng2-palette-popup-panel></ng2-palette-popup-panel>
@@ -19,86 +19,107 @@
<div class="w-sdc-designer-sidebar" data-ng-class="{'view-mode':isViewOnly}">
- <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}}">
- <div ng-if="isComponentInstanceSelected()"
- data-ng-class="{'non-certified':'CERTIFIED' !== selectedComponent.lifecycleState}"
- tooltips tooltip-side="top" tooltip-content="Not certified"></div>
+ <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>
- <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="&#8203;{{isComponentInstanceSelected() ? currentComponent.selectedInstance.name : currentComponent.name | resourceName}}"
- data-ng-bind="isComponentInstanceSelected() ? currentComponent.selectedInstance.name : currentComponent.name | resourceName"></span>
+ <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="&#8203;{{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="sprite e-sdc-small-icon-pencil w-sdc-designer-update-resource-icon"
- data-ng-if="!isViewOnly && isComponentInstanceSelected()"
- data-ng-click="openUpdateModal()" id="editPencil"></div>
- <div class="sprite e-sdc-small-icon-delete w-sdc-designer-delete-resource-icon"
- data-tests-id="e-sdc-small-icon-delete"
- data-ng-if="!isViewOnly && isComponentInstanceSelected()"
- 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="!isPNF() && !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 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>
- <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="!isPNF() && !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 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>
+ </div>
+ <div data-ui-view="" class="w-sdc-designer-sidebar-tab-content-view"></div>
</div>
- <div data-ui-view="" class="w-sdc-designer-sidebar-tab-content-view"></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>
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
index f351450e6d..b9bb66cde7 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition.less
+++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition.less
@@ -107,7 +107,7 @@
position: fixed;
right: -302px;
width: 302px;
- top: 102px;
+ top: 103px;
transition: right 0.2s;
z-index: 9;
.box-shadow(-7px -3px 6px -8px @main_color_n);
@@ -163,6 +163,13 @@
top: 10px;
}
+ .w-sdc-designer-restore-button {
+ .hand;
+ position:absolute;
+ right: 20px;
+ top:10px;
+ width:65px;
+ }
.w-sdc-designer-sidebar-tabs {
.bg_c;
}
@@ -237,7 +244,7 @@
height: 32px;
line-height: 32px;
margin-top: 1px;
- padding: 0 40px 0 20px;
+ padding: 0 10px 0 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -266,7 +273,7 @@
.sprite-new;
.arrow-up;
right: 16px;
- top: 10px;
+ top: 13px;
transition: .3s all;
position: absolute;
}
@@ -664,8 +671,8 @@
align-items: center;
.non-certified {
position: relative;
- left: 27px;
- bottom: 6px;
+ left: -4px;
+ top: -4px;
.sprite;
.s-sdc-state-non-certified;
display: block;
@@ -682,8 +689,8 @@
.non-certified {
position: relative;
- left: 43px;
- bottom: 3px;
+ left: 0px;
+ top: 0px;
.sprite;
.s-sdc-state-non-certified;
display: block;
@@ -841,6 +848,11 @@
flex-direction: column;
align-items: flex-end;
margin-right:10px;
+ pointer-events: none;
+
+ & > * {
+ pointer-events: all;
+ }
&.with-sidebar {
right:320px;
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
index 6e3258f69b..e389395142 100644
--- 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
@@ -143,19 +143,23 @@ export class DetailsViewModel {
this.$scope.currentComponent.changeComponentInstanceVersion(componentUid).then(onSuccess, onCancel);
};
- 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;
+ 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();
- }
- }, onCancel);
+ }
+ }, 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
index 033c4668f3..9468937610 100644
--- 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
@@ -26,9 +26,10 @@
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]"
+ <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}"
+ data-ng-class="{'minor': (editResourceVersion.changeVersion)%1, 'disabled':selectedComponent.archived}"
data-ng-change="changeResourceVersion()">
<option class="select-instance-version" data-ng-class="{'minor': key%1}"
ng-repeat="(key, value) in editResourceVersion.allVersions">{{key}}</option>
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
index efd5cfd84d..e3ddecd9a5 100644
--- 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
@@ -139,9 +139,11 @@ export class ResourcePropertiesViewModel {
(this.$scope.isPropertyOwner() ?
this.$scope.properties[property.parentUniqueId] :
this.$scope.properties[property.resourceInstanceUniqueId]) || [],
- this.isPropertyValueOwner()).then((updatedProperty:PropertyModel) => {
- let oldProp = _.find(this.$scope.properties[updatedProperty.resourceInstanceUniqueId], (prop:PropertyModel) => {return prop.uniqueId == updatedProperty.uniqueId;});
- oldProp.value = updatedProperty.value;
+ 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;
+ }
});
};
@@ -224,7 +226,9 @@ export class ResourcePropertiesViewModel {
return this.$filter("resourceName")(this.$scope.currentComponent.name);
default:
- return this.$filter("resourceName")((_.find(this.$scope.currentComponent.componentInstances, {uniqueId: key})).name);
+ let componentInstance = _.find(this.$scope.currentComponent.componentInstances, {uniqueId: key});
+ if(componentInstance)
+ return this.$filter("resourceName")(componentInstance.name);
}
};
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
index 41a90bff9d..ce5acc83e5 100644
--- 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
@@ -1,5 +1,6 @@
.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{
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
index feda7fe17f..9df377c5fc 100644
--- 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
@@ -108,7 +108,7 @@ export class DeploymentViewModel {
};
private initRightTabs = ()=> {
- if (this.$scope.currentComponent.groups) {
+ 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)
@@ -116,11 +116,11 @@ export class DeploymentViewModel {
}
private initGraphData = ():void => {
- if(!this.$scope.component.componentInstances || !this.$scope.component.componentInstancesRelations || !this.$scope.component.groups) {
+ 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.groups = response.groups;
+ this.$scope.component.modules = response.modules;
this.$scope.isLoading = false;
this.initComponent();
this.initRightTabs();
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
index f8b5f23a25..1065552e46 100644
--- 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
@@ -5,6 +5,6 @@
</div>
<div class="w-sdc-deployment-right-bar">
- <sdc-tabs tabs="tabs" is-view-only="isViewOnly" selected-tab="selectedTab"></sdc-tabs>
+ <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
index 4c548c7331..f51ff6220d 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment.less
+++ b/catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment.less
@@ -10,9 +10,11 @@
.w-sdc-deployment-canvas {
.noselect;
.bg_c;
+ position: relative;
bottom: 0;
width: 100%;
height: 100%;
+ z-index: 0;
.view-mode{
background-color: #f8f8f8;
@@ -27,7 +29,6 @@
position: absolute;
right: 0px;
transition: right 0.2s;
- z-index: 10000;
top: @action_nav_height;
}
}
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
index 3367193fc7..ff4bbd60c5 100644
--- 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
@@ -1,4 +1,4 @@
-<sdc-modal modal="modalDitributionStatus" type="classic" class="w-sdc-classic-top-line-modal" buttons="footerButtons" header="Distribution by Status" show-close-button="true">
+<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">
@@ -127,4 +127,4 @@
</div>
-</sdc-modal>
+</ng1-modal>
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 b03d7c4d7c..68f789808a 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
@@ -21,11 +21,13 @@
'use strict';
import * as _ from "lodash";
import {ModalsHandler, ValidationUtils, EVENTS, CHANGE_COMPONENT_CSAR_VERSION_FLAG, ComponentType, DEFAULT_ICON,
- ResourceType, ComponentState} from "app/utils";
+ ResourceType, ComponentState, instantiationType, ComponentFactory} from "app/utils";
import {CacheService, EventListenerService, ProgressService, OnboardingService} from "app/services";
-import {IAppConfigurtaion, IValidate, IMainCategory, Resource, ISubCategory,Service, ICsarComponent} from "app/models";
+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";
+
export class Validation {
componentNameValidationPattern:RegExp;
@@ -62,8 +64,11 @@ export interface IGeneralScope extends IWorkspaceViewModelScope {
importCsarProgressKey:string;
browseFileLabel:string;
componentCategories:componentCategories;
+ instantiationTypes:Array<instantiationType>;
- onToscaFileChange():void;
+ save():Promise<any>;
+ revert():void;
+ onImportFileChange():void;
validateField(field:any):boolean;
validateName(isInit:boolean):void;
calculateUnique(mainCategory:string, subCategory:string):string; // Build unique string from main and sub category
@@ -74,6 +79,8 @@ export interface IGeneralScope extends IWorkspaceViewModelScope {
openOnBoardingModal():void;
initCategoreis():void;
initEnvironmentContext():void;
+ initInstantiationTypes():void;
+ onInstantiationTypeChange():void;
updateIcon():void;
possibleToUpdateIcon():boolean;
}
@@ -101,7 +108,8 @@ export class GeneralViewModel {
'$interval',
'$filter',
'$timeout',
- 'Sdc.Services.OnboardingService'
+ 'Sdc.Services.OnboardingService',
+ 'ComponentFactory'
];
constructor(private $scope:IGeneralScope,
@@ -124,7 +132,8 @@ export class GeneralViewModel {
protected $interval:any,
private $filter:ng.IFilterService,
private $timeout:ng.ITimeoutService,
- private onBoardingService:OnboardingService) {
+ private onBoardingService:OnboardingService,
+ private ComponentFactory:ComponentFactory) {
this.initScopeValidation();
this.initScopeMethods();
@@ -146,51 +155,64 @@ export class GeneralViewModel {
this.$scope.validation.projectCodeValidationPattern = this.ProjectCodeValidationPattern;
};
- private initImportedToscaBrowseFile = ():void =>{
- // Init the decision if to show onboarding
- this.$scope.isShowOnboardingSelectionBrowse = false;
- if (this.$scope.component.isResource() &&
- this.$scope.isEditMode() &&
- (<Resource>this.$scope.component).resourceType == ResourceType.VF &&
- (<Resource>this.$scope.component).csarUUID) {
- this.$scope.isShowOnboardingSelectionBrowse = true;
- let onboardCsarFilesMap:Dictionary<Dictionary<string>> = this.cacheService.get('onboardCsarFilesMap');
- // The onboardCsarFilesMap in cache contains map of [packageId]:[vsp display name for brows]
- // if the map is empty - Do request to BE
- if(onboardCsarFilesMap) {
- if (onboardCsarFilesMap[(<Resource>this.$scope.component).csarUUID]){
- this.$scope.importedToscaBrowseFileText = onboardCsarFilesMap[(<Resource>this.$scope.component).csarUUID][(<Resource>this.$scope.component).csarVersion];
- }
- }
- if(!onboardCsarFilesMap || !this.$scope.importedToscaBrowseFileText){
+ private loadOnboardingFileCache = ():ng.IPromise<Dictionary<any>> =>{
- let onSuccess = (vsps:Array<ICsarComponent>): void =>{
- onboardCsarFilesMap = {};
- _.each(vsps, (vsp:ICsarComponent)=>{
- onboardCsarFilesMap[vsp.packageId] = onboardCsarFilesMap[vsp.packageId] || {};
- onboardCsarFilesMap[vsp.packageId][vsp.version] = vsp.vspName + " (" + vsp.version + ")";
- });
- this.cacheService.set('onboardCsarFilesMap', onboardCsarFilesMap);
- this.$scope.importedToscaBrowseFileText = onboardCsarFilesMap[(<Resource>this.$scope.component).csarUUID][(<Resource>this.$scope.component).csarVersion];
- };
+ let onboardCsarFilesMap:Dictionary<Dictionary<string>>;
+ let onSuccess = (vsps:Array<ICsarComponent>) =>{
+ onboardCsarFilesMap = {};
+ _.each(vsps, (vsp:ICsarComponent)=>{
+ onboardCsarFilesMap[vsp.packageId] = onboardCsarFilesMap[vsp.packageId] || {};
+ onboardCsarFilesMap[vsp.packageId][vsp.version] = vsp.vspName + " (" + vsp.version + ")";
+ });
+ this.cacheService.set('onboardCsarFilesMap', onboardCsarFilesMap);
+ return onboardCsarFilesMap;
+ };
+ let onError = (): void =>{
+ console.log("Error getting onboarding list");
+ };
+ return this.onBoardingService.getOnboardingVSPs().then(onSuccess, onError);
+ };
+
+ private setImportedFileText = ():void => {
- let onError = (): void =>{
- console.log("Error getting onboarding list");
- };
+ if(!this.$scope.isShowOnboardingSelectionBrowse) return;
- this.onBoardingService.getOnboardingVSPs().then(onSuccess, onError);
+ //these variables makes it easier to read this logic
+ 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');
+ let assignFileName = ():void => {
+ if(this.$scope.component.vspArchived){
+ this.$scope.importedToscaBrowseFileText = 'VSP is archived';
+ } else {
+ this.$scope.importedToscaBrowseFileText = onboardCsarFilesMap[csarUUID][csarVersion];
}
}
- };
-
- private initScope = ():void => {
- // 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);
+
+ 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) => {
+ onboardCsarFilesMap = onboardingFiles;
+ this.cacheService.set('onboardCsarFilesMap', onboardingFiles);
+ assignFileName();
+ }, ()=> {});
}
+
+ }
+ isCreateModeAvailable(verifyObj:string): boolean {
+ var isCheckout:boolean = ComponentState.NOT_CERTIFIED_CHECKOUT === this.$scope.component.lifecycleState;
+ return this.$scope.isCreateMode() || (isCheckout && !verifyObj)
+ }
+
+ 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.progressService = this.progressService;
this.$scope.componentCategories = new componentCategories();
@@ -216,9 +238,33 @@ export class GeneralViewModel {
if (this.$scope.isEditMode() && resource.resourceType == ResourceType.VF && !resource.csarUUID) {
this.$scope.isShowFileBrowse = true;
}
+ } else if(this.$scope.component.isService()){
+ // Init Instantiation types
+ 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.$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);
+ }
}
- this.initImportedToscaBrowseFile();
+
+ // 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).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) {
@@ -231,11 +277,14 @@ export class GeneralViewModel {
(<Resource>this.$scope.component).importedFile.filetype = "yaml";
this.$scope.importedFileExtension = this.sdcConfig.toscaFileExtension;
}
+ this.$scope.restoreFile = angular.copy((<Resource>this.$scope.originComponent).importedFile); //create backup
} else if (this.$scope.isEditMode() && (<Resource>this.$scope.component).resourceType === ResourceType.VF) {
this.$scope.importedFileExtension = this.sdcConfig.csarFileExtension;
//(<Resource>this.$scope.component).importedFile.filetype="csar";
}
+
+
this.$scope.setValidState(true);
this.$scope.calculateUnique = (mainCategory:string, subCategory:string):string => {
@@ -252,6 +301,12 @@ 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);
+ });
+
};
// Convert category string MainCategory_#_SubCategory to Array with one item (like the server except)
@@ -299,14 +354,28 @@ export class GeneralViewModel {
}
};
+ this.$scope.initInstantiationTypes = ():void => {
+ if (this.$scope.componentType === ComponentType.SERVICE) {
+ this.$scope.instantiationTypes = new Array();
+ this.$scope.instantiationTypes.push(instantiationType.A_LA_CARTE);
+ this.$scope.instantiationTypes.push(instantiationType.MACRO);
+ var instantiationTypeField:string =(<Service>this.$scope.component).instantiationType;
+ if (instantiationTypeField === ""){
+ this.$scope.instantiationTypes.push("");
+ }
+ else if (this.isCreateModeAvailable(instantiationTypeField)) {
+ (<Service>this.$scope.component).instantiationType = instantiationType.A_LA_CARTE;
+
+ }
+ }
+ };
this.$scope.initEnvironmentContext = ():void => {
if (this.$scope.componentType === ComponentType.SERVICE) {
this.$scope.environmentContextObj = this.cacheService.get('UIConfiguration').environmentContext;
var environmentContext:string =(<Service>this.$scope.component).environmentContext;
- var isCheckout:boolean = ComponentState.NOT_CERTIFIED_CHECKOUT === this.$scope.component.lifecycleState;
// In creation new service OR check outing old service without environmentContext parameter - set default value
- if(this.$scope.isCreateMode() || (isCheckout && !environmentContext)){
+ if(this.isCreateModeAvailable(environmentContext)){
(<Service>this.$scope.component).environmentContext = this.$scope.environmentContextObj.defaultValue;
}
}
@@ -320,19 +389,33 @@ export class GeneralViewModel {
};
this.$scope.openOnBoardingModal = ():void => {
+ if(this.$scope.component.vspArchived) return;
let csarUUID = (<Resource>this.$scope.component).csarUUID;
- this.ModalsHandler.openOnboadrdingModal('Update', csarUUID).then(()=> {
- // OK
- this.$scope.uploadFileChangedInGeneralTab();
- }, ()=> {
- // ERROR
- });
+ 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.$scope.updateIcon = ():void => {
this.ModalsHandler.openUpdateIconModal(this.$scope.component).then((isDirty:boolean)=> {
- if(!this.$scope.isCreateMode()){
- this.$state.current.data.unsavedChanges = this.$state.current.data.unsavedChanges || isDirty;
+ if(isDirty && !this.$scope.isCreateMode()){
+ this.setUnsavedChanges(true);
}
}, ()=> {
// ERROR
@@ -340,7 +423,7 @@ export class GeneralViewModel {
};
this.$scope.possibleToUpdateIcon = ():boolean => {
- if(this.$scope.componentCategories.selectedCategory && (!this.$scope.component.isResource() || this.$scope.component.vendorName)){
+ if(this.$scope.componentCategories.selectedCategory && (!this.$scope.component.isResource() || this.$scope.component.vendorName) && !this.$scope.component.isAlreadyCertified()){
return true;
}else{
return false;
@@ -364,7 +447,6 @@ export class GeneralViewModel {
return;
}
- //?????????????????????????
let subtype:string = ComponentType.RESOURCE == this.$scope.componentType ? this.$scope.component.getComponentSubType() : undefined;
let onFailed = (response) => {
@@ -407,6 +489,55 @@ export class GeneralViewModel {
}
};
+
+ this.EventListenerService.registerObserverCallback(EVENTS.ON_LIFECYCLE_CHANGE_WITH_SAVE, (nextState) => {
+ 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);
+ });
+ } else if(!this.$scope.isValidForm){
+ console.error("Form is not valid");
+ } else {
+ let newCsarVersion:string;
+ if(this.$scope.unsavedFile){
+ newCsarVersion = (<Resource>this.$scope.component).csarVersion;
+ }
+ this.$scope.handleChangeLifecycleState(nextState, newCsarVersion);
+ }
+ });
+
+
+ this.$scope.revert = ():void => {
+ //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.componentCategories.selectedCategory = this.$scope.originComponent.selectedCategory;
+ this.setUnsavedChanges(false);
+ this.$scope.updateUnsavedFileFlag(false);
+ this.$scope.editForm.$setPristine();
+ };
+
+ 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
+ this.$scope.updateUnsavedFileFlag(true);
+ } else {
+ this.$scope.updateUnsavedFileFlag(false);
+ this.$scope.editForm.fileElement.$setPristine();
+ }
+ };
+
this.$scope.$watchCollection('component.name', (newData:any):void => {
this.$scope.validateName(false);
});
@@ -417,9 +548,10 @@ export class GeneralViewModel {
});
this.$scope.$watch("editForm.$dirty", (newVal, oldVal) => {
- if (newVal !== oldVal) {
- this.$state.current.data.unsavedChanges = newVal && !this.$scope.isCreateMode();
+ if (newVal && !this.$scope.isCreateMode()) {
+ this.setUnsavedChanges(true);
}
+
});
this.$scope.onCategoryChange = ():void => {
@@ -439,9 +571,12 @@ export class GeneralViewModel {
this.$scope.component.icon = DEFAULT_ICON;
}
};
- this.EventListenerService.registerObserverCallback(EVENTS.ON_CHECKOUT, this.$scope.reload);
- this.EventListenerService.registerObserverCallback(EVENTS.ON_REVERT, ()=>{
- this.$scope.componentCategories.selectedCategory = this.$scope.originComponent.selectedCategory;
- });
+ this.EventListenerService.registerObserverCallback(EVENTS.ON_LIFECYCLE_CHANGE, this.$scope.reload);
+
+ };
+
+ 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 36976c610e..28b033a64b 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
@@ -1,5 +1,14 @@
<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">
+ <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()}"
+ 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>
+
+ </div>
<form novalidate class="w-sdc-form" name="editForm" validation-on-load form-to-validate="editForm">
<div class="w-sdc-form-section-container">
@@ -9,10 +18,13 @@
<div class="w-sdc-form-column">
<div class="upper-general-fields">
<div class="selected-icon-container" data-ng-class="{'show-only-on-over':'defaulticon'!=component.icon && !isViewMode()}">
- <div class="selected-icon-inner-container">
+ <div class="selected-icon-inner-container ">
<div class="sprite-new update-component-icon" data-ng-click="updateIcon()" data-ng-if="!isViewMode() && possibleToUpdateIcon()"></div>
<div class="i-sdc-form-item-suggested-icon large selected-icon {{component.iconSprite}} {{component.icon}}"
- data-ng-class="{ 'disable': isViewMode() || !possibleToUpdateIcon() }"
+ data-ng-class="{
+ 'disable': isViewMode() || !possibleToUpdateIcon(),
+ 'archive-component active-component-static': component.archived
+ }"
ng-model="component.icon"
tooltips tooltip-content='{{component.icon | translate}}'
>
@@ -27,7 +39,7 @@
data-ng-class="{'view-mode': isViewMode()}"
name="componentName"
data-ng-init="isCreateMode() && validateName(true)"
- data-ng-maxlength="50"
+ data-ng-maxlength="50"
data-ng-model="component.name"
type="text"
data-required
@@ -53,7 +65,7 @@
<!--------------------- CATEGORIES -------------------->
<div class="i-sdc-form-item"
- data-ng-class="{'error': validateField(editForm.category)}">
+ data-ng-class="{'error': validateField(editForm.category)}">
<loader data-display="!categories && !initCategoreis()" relative="true"></loader>
<label class="i-sdc-form-label required">Category</label>
<select class="i-sdc-form-select"
@@ -132,14 +144,17 @@
<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>
<file-upload id="fileUploadElement"
class="i-sdc-form-input"
element-name="fileElement"
- element-disabled="{{!isCreateMode()&&!(isEditMode()&&component.resourceType=='VF')}} || {{isViewMode()}}"
+ element-disabled="{{(!isCreateMode()&&!(isEditMode()&&component.resourceType=='VF'))|| isViewMode() || component.vspArchived}}"
form-element="editForm"
file-model="component.importedFile"
- on-file-changed-in-directive="uploadFileChangedInGeneralTab"
+ 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>
@@ -147,16 +162,16 @@
<!--------------------- IMPORT TOSCA FILE USING ONBOARDING -------------------->
<div class="i-sdc-form-item" ng-if="isShowOnboardingSelectionBrowse">
- <label class="i-sdc-form-label required">Select VSP</label>
- <div class="i-sdc-form-file-upload i-sdc-form-input">
- <span class="i-sdc-form-file-name" 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" name="fileElement"/>
- <div class="file-upload-browse-btn" data-ng-click="openOnBoardingModal()" data-tests-id="browseButton">Browse</div>
- </div>
+ <label class="i-sdc-form-label required">Select 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>
+ </div>
</div>
- <div class="input-error-file-upload" data-ng-show="component.importedFile && (!editForm.fileElement.$valid || !component.importedFile.filename)">
+ <div class="input-error-file-upload" data-ng-disabled="!component.archived" data-ng-show="component.importedFile && (!editForm.fileElement.$valid || !component.importedFile.filename)">
<!-- editForm.fileElement.$error.required <== Can not use this, because the browse is done from outside for the first time -->
<span ng-show="!(isEditMode()&&component.resourceType=='VF')&&!component.importedFile.filename" translate="NEW_SERVICE_RESOURCE_ERROR_TOSCA_FILE_REQUIRED"></span><!-- Required -->
<span ng-show="editForm.fileElement.$error.maxsize" translate="VALIDATION_ERROR_MAX_FILE_SIZE"></span>
@@ -283,7 +298,7 @@
</div>
<!--------------------- Resource Model Number -------------------->
- <!--------------------- ECOMPGENERATEDNAMING -------------------->
+ <!--------------------- ECOMPGENERATEDNAMING -------------------->
<div class="i-sdc-form-item"
data-ng-class="{'error': validateField(editForm.ecompGeneratedNaming)}"
@@ -307,7 +322,7 @@
<!--------------------- NAMING POLICY -------------------->
<div ng-if="component.isService()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.namingPolicy)}">
- <label class="i-sdc-form-label">Naming policy</label>
+ <label class="i-sdc-form-label">Naming Policy</label>
<input class="i-sdc-form-input"
name="namingPolicy"
data-ng-class="{'view-mode': isViewMode() || !component.ecompGeneratedNaming}"
@@ -389,6 +404,21 @@
</div>
<!--------------------- ENVIRONMENT CONTEXT ------------------>
+ <!--------------------- Instantiation Type -------------------->
+ <div class="i-sdc-form-item" data-ng-if="component.isService() && instantiationTypes">
+ <label class="i-sdc-form-label">Instantiation Type</label>
+ <select class="i-sdc-form-select"
+ name="instantiationType"
+ data-ng-class="{'view-mode': isViewMode()}"
+ data-ng-disabled="component.isCsarComponent()"
+ data-ng-model="component.instantiationType"
+ data-tests-id="selectInstantiationType">
+ <option ng-repeat="type in instantiationTypes">{{type}}</option>
+
+ </select>
+ </div>
+
+ <!--------------------- Instantiation Type -------------------->
<div class="meta-data" data-ng-if="component.creationDate">
<div>
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 b9b59deb1b..b60e4b8de4 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
@@ -1,5 +1,12 @@
.sdc-workspace-general-step {
display: flex;
+ flex-direction: column;
+ .w-sdc-main-container-body-content-action-buttons{
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ margin-bottom: 10px;
+ }
.w-sdc-form {
padding: 0;
flex-grow: 10;
@@ -26,10 +33,15 @@
width: 100px;
height: 28px;
text-align: center;
+ border-left: solid 1px #cfcfcf;
&.disabled {
cursor: default;
}
+
+ &:hover:not(.disabled) {
+ background-color: #dbdee2;
+ }
}
}
@@ -80,8 +92,7 @@
padding: 8px 0 2px 20px;
text-align: left;
background-color: @tlv_color_t;
- position: absolute;
- bottom: 0;
+ position: relative;
width: 100%;
.meta-data-item-value{
padding-bottom: 6px;
@@ -97,19 +108,19 @@
display: flex;
align-items: center;
.selected-icon-inner-container{
- height: 64px;
- width: 64px;
+ height: 60px;
+ width: 60px;
margin: 0 auto;
}
.update-component-icon{
position: relative;
float: right;
cursor: pointer;
+ z-index: 1;
}
.selected-icon{
position: relative;
top: -20px;
- z-index: -1;
&.disable{
position: inherit;
}
@@ -137,7 +148,22 @@
}
+ .unsaved-file-warning {
+ border: solid 1px #ffb81c;
+ padding: 5px 8px;
+ display: flex;
+ align-items: center;
+ color: #ffb81c;
+ margin-right: 10px;
+ border-radius: 2px;
+ .sdc-warning {
+ margin-right:4px;
+ }
+ }
+ .revert-btn {
+ margin-left: 10px;
+ }
}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view-model.ts
index 2a7cd3dd65..4b9d314a38 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view-model.ts
@@ -17,121 +17,121 @@
* limitations under the License.
* ============LICENSE_END=========================================================
*/
-
-'use strict';
-import * as _ from "lodash";
-import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model";
-import {ComponentInstance, InstancesInputsOrPropertiesMapData, Resource, PropertyModel, InputModel} from "app/models";
-import {ModalsHandler} from "app/utils";
-
-export interface IInputsViewModelScope extends IWorkspaceViewModelScope {
- InstanceInputsProperties:InstancesInputsOrPropertiesMapData; //this is tha map object that hold the selected inputs and the inputs we already used
- vfInstancesList:Array<ComponentInstance>;
- component:Resource;
-
- onArrowPressed():void;
- getInputPropertiesForInstance(instanceId:string, instance:ComponentInstance):ng.IPromise<boolean> ;
- loadInputPropertiesForInstance(instanceId:string, input:InputModel):ng.IPromise<boolean> ;
- openEditValueModal(input:InputModel):void;
- openEditPropertyModal(property:PropertyModel):void;
-}
-
-export class ResourceInputsViewModel {
-
- static '$inject' = [
- '$scope',
- '$q',
- 'ModalsHandler'
- ];
-
- constructor(private $scope:IInputsViewModelScope, private $q:ng.IQService, private ModalsHandler:ModalsHandler) {
- this.initScope();
- }
-
- private initScope = ():void => {
-
- this.$scope.InstanceInputsProperties = new InstancesInputsOrPropertiesMapData();
- this.$scope.vfInstancesList = this.$scope.component.componentInstances;
-
- // Need to cast all inputs to InputModel for the search to work
- let tmpInputs:Array<InputModel> = new Array<InputModel>();
- _.each(this.$scope.component.inputs, (input):void => {
- tmpInputs.push(new InputModel(input));
- });
- this.$scope.component.inputs = tmpInputs;
- // This function is not supported for resource
- //this.$scope.component.getComponentInputs();
-
- /*
- * When clicking on instance input in the left or right table, this function will load all properties of the selected input
- */
- this.$scope.getInputPropertiesForInstance = (instanceId:string, instance:ComponentInstance):ng.IPromise<boolean> => {
- let deferred = this.$q.defer();
- instance.properties = this.$scope.component.componentInstancesProperties[instanceId];
- deferred.resolve(true);
- return deferred.promise;
- };
-
- /*
- * When clicking on instance input in the left or right table, this function will load all properties of the selected input
- */
- this.$scope.loadInputPropertiesForInstance = (instanceId:string, input:InputModel):ng.IPromise<boolean> => {
- let deferred = this.$q.defer();
-
- let onSuccess = (properties:Array<PropertyModel>) => {
- input.properties = properties;
- deferred.resolve(true);
- };
-
- let onError = () => {
- deferred.resolve(false)
- };
-
- if (!input.properties) {
- this.$scope.component.getComponentInstanceInputProperties(instanceId, input.uniqueId).then(onSuccess, onError);
- } else {
- deferred.resolve(true);
- }
- return deferred.promise;
- };
-
- /*
- * When pressing the arrow, we create service inputs from the inputs selected
- */
- this.$scope.onArrowPressed = ():void => {
- let onSuccess = (inputsCreated:Array<InputModel>) => {
-
- //disabled all the inputs in the left table
- _.forEach(this.$scope.InstanceInputsProperties, (properties:Array<PropertyModel>) => {
- _.forEach(properties, (property:PropertyModel) => {
- property.isAlreadySelected = true;
- });
- });
-
- // Adding color to the new inputs (right table)
- _.forEach(inputsCreated, (input) => {
- input.isNew = true;
- });
-
- // Removing color to the new inputs (right table)
- setTimeout(() => {
- _.forEach(inputsCreated, (input) => {
- input.isNew = false;
- });
- this.$scope.$apply();
- }, 3000);
- };
-
- this.$scope.component.createInputsFormInstances(this.$scope.InstanceInputsProperties).then(onSuccess);
- };
-
- this.$scope.openEditValueModal = (input:InputModel) => {
- this.ModalsHandler.openEditInputValueModal(input);
- };
-
- this.$scope.openEditPropertyModal = (property:PropertyModel):void => {
- this.ModalsHandler.openEditPropertyModal(property, this.$scope.component, this.$scope.component.componentInstancesProperties[property.resourceInstanceUniqueId], false).then(() => {
- });
- }
- }
-}
+/*********** DEPRECATED -- replaced by prop assignments */
+// 'use strict';
+// import * as _ from "lodash";
+// import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model";
+// import {ComponentInstance, InstancesInputsOrPropertiesMapData, Resource, PropertyModel, InputModel} from "app/models";
+// import {ModalsHandler} from "app/utils";
+
+// export interface IInputsViewModelScope extends IWorkspaceViewModelScope {
+// InstanceInputsProperties:InstancesInputsOrPropertiesMapData; //this is tha map object that hold the selected inputs and the inputs we already used
+// vfInstancesList:Array<ComponentInstance>;
+// component:Resource;
+
+// onArrowPressed():void;
+// getInputPropertiesForInstance(instanceId:string, instance:ComponentInstance):ng.IPromise<boolean> ;
+// loadInputPropertiesForInstance(instanceId:string, input:InputModel):ng.IPromise<boolean> ;
+// openEditValueModal(input:InputModel):void;
+// openEditPropertyModal(property:PropertyModel):void;
+// }
+
+// export class ResourceInputsViewModel {
+
+// static '$inject' = [
+// '$scope',
+// '$q',
+// 'ModalsHandler'
+// ];
+
+// constructor(private $scope:IInputsViewModelScope, private $q:ng.IQService, private ModalsHandler:ModalsHandler) {
+// this.initScope();
+// }
+
+// private initScope = ():void => {
+
+// this.$scope.InstanceInputsProperties = new InstancesInputsOrPropertiesMapData();
+// this.$scope.vfInstancesList = this.$scope.component.componentInstances;
+
+// // Need to cast all inputs to InputModel for the search to work
+// let tmpInputs:Array<InputModel> = new Array<InputModel>();
+// _.each(this.$scope.component.inputs, (input):void => {
+// tmpInputs.push(new InputModel(input));
+// });
+// this.$scope.component.inputs = tmpInputs;
+// // This function is not supported for resource
+// //this.$scope.component.getComponentInputs();
+
+// /*
+// * When clicking on instance input in the left or right table, this function will load all properties of the selected input
+// */
+// this.$scope.getInputPropertiesForInstance = (instanceId:string, instance:ComponentInstance):ng.IPromise<boolean> => {
+// let deferred = this.$q.defer<boolean>();
+// instance.properties = this.$scope.component.componentInstancesProperties[instanceId];
+// deferred.resolve(true);
+// return deferred.promise;
+// };
+
+// /*
+// * When clicking on instance input in the left or right table, this function will load all properties of the selected input
+// */
+// this.$scope.loadInputPropertiesForInstance = (instanceId:string, input:InputModel):ng.IPromise<boolean> => {
+// let deferred = this.$q.defer<boolean>();
+
+// let onSuccess = (properties:Array<PropertyModel>) => {
+// input.properties = properties;
+// deferred.resolve(true);
+// };
+
+// let onError = () => {
+// deferred.resolve(false)
+// };
+
+// if (!input.properties) {
+// this.$scope.component.getComponentInstanceInputProperties(instanceId, input.uniqueId).then(onSuccess, onError);
+// } else {
+// deferred.resolve(true);
+// }
+// return deferred.promise;
+// };
+
+// /*
+// * When pressing the arrow, we create service inputs from the inputs selected
+// */
+// this.$scope.onArrowPressed = ():void => {
+// let onSuccess = (inputsCreated:Array<InputModel>) => {
+
+// //disabled all the inputs in the left table
+// _.forEach(this.$scope.InstanceInputsProperties, (properties:Array<PropertyModel>) => {
+// _.forEach(properties, (property:PropertyModel) => {
+// property.isAlreadySelected = true;
+// });
+// });
+
+// // Adding color to the new inputs (right table)
+// _.forEach(inputsCreated, (input) => {
+// input.isNew = true;
+// });
+
+// // Removing color to the new inputs (right table)
+// setTimeout(() => {
+// _.forEach(inputsCreated, (input) => {
+// input.isNew = false;
+// });
+// this.$scope.$apply();
+// }, 3000);
+// };
+
+// this.$scope.component.createInputsFormInstances(this.$scope.InstanceInputsProperties).then(onSuccess);
+// };
+
+// this.$scope.openEditValueModal = (input:InputModel) => {
+// this.ModalsHandler.openEditInputValueModal(input);
+// };
+
+// this.$scope.openEditPropertyModal = (property:PropertyModel):void => {
+// this.ModalsHandler.openEditPropertyModal(property, this.$scope.component, this.$scope.component.componentInstancesProperties[property.resourceInstanceUniqueId], false).then(() => {
+// });
+// }
+// }
+// } \ No newline at end of file
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/inputs/service-input/service-inputs-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/inputs/service-input/service-inputs-view-model.ts
index bdbc0a4334..5e69f5bed6 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/inputs/service-input/service-inputs-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/inputs/service-input/service-inputs-view-model.ts
@@ -17,382 +17,382 @@
* limitations under the License.
* ============LICENSE_END=========================================================
*/
-
-'use strict';
-import * as _ from "lodash";
-import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model";
-import {ComponentInstance, InstancesInputsOrPropertiesMapData, Service, IAppMenu, InputModel, PropertyModel, InputPropertyBase} from "app/models";
-import {DataTypesService} from "app/services";
-import {ModalsHandler, ResourceType} from "app/utils";
-
-
-interface IServiceInputsViewModelScope extends IWorkspaceViewModelScope {
-
- vfInstancesList:Array<ComponentInstance>;
- instanceInputsMap:InstancesInputsOrPropertiesMapData; //this is tha map object that hold the selected inputs and the inputs we already used
- instancePropertiesMap:InstancesInputsOrPropertiesMapData;
- component:Service;
- sdcMenu:IAppMenu;
- isViewOnly:boolean;
- isArrowDisabled:boolean;
- onArrowPressed():void;
- checkArrowState():void;
- loadComponentInputs():void;
- loadInstanceInputs(instance:ComponentInstance):ng.IPromise<boolean> ;
- loadInstanceProperties(instance:ComponentInstance):ng.IPromise<boolean> ;
- loadInputPropertiesForInstance(instanceId:string, input:InputModel):ng.IPromise<boolean> ;
- loadInputInputs(input:InputModel):ng.IPromise<boolean>;
- deleteInput(input:InputModel):void
- openEditValueModal(input:InputModel):void;
- openSelectPropertyDataTypeViewModel(instanceId:string, property:PropertyModel):void;
- openEditPropertyDataTypeViewModel(property:PropertyModel):void;
- dataTypesService:DataTypesService;
-}
-
-export class ServiceInputsViewModel {
-
- static '$inject' = [
- '$scope',
- '$q',
- 'ModalsHandler',
- 'Sdc.Services.DataTypesService'
- ];
-
- constructor(private $scope:IServiceInputsViewModelScope,
- private $q:ng.IQService,
- private ModalsHandler:ModalsHandler,
- private DataTypesService:DataTypesService) {
- this.initScope();
- this.$scope.isViewOnly = this.$scope.isViewMode();
- }
-
-
- private getInputsOrPropertiesAlreadySelected = (instanceNormalizeName:string, arrayToFilter:Array<InputPropertyBase>):Array<any> => {
- let alreadySelectedInput = [];
- _.forEach(arrayToFilter, (inputOrProperty:InputPropertyBase) => {
- let expectedServiceInputName = instanceNormalizeName + '_' + inputOrProperty.name;
- let inputAlreadyInService = _.find(this.$scope.component.inputs, (serviceInput:InputModel) => {
- //Checking if the input prefix is the instance name + '_' + property/input name (prefix because we don't need to check full name for complex dataType)
- return serviceInput.name.substring(0, expectedServiceInputName.length) === expectedServiceInputName;
- });
- if (inputAlreadyInService) {
- inputOrProperty.isAlreadySelected = true;
- alreadySelectedInput.push(inputOrProperty);
- } else {
- inputOrProperty.isAlreadySelected = false;
- }
- });
- return alreadySelectedInput;
- };
-
-
- /*
- * When loading the screen again, we need to disabled the inputs that already created on the service,
- * we do that by comparing the service input name, to the instance name + '_' + the resource instance input name.
- */
- private disableEnableSelectedInputsOrPropertiesOnInit = (instance:ComponentInstance):void => {
-
- if (instance.originType === ResourceType.VF) {
- this.$scope.instanceInputsMap[instance.uniqueId] = this.getInputsOrPropertiesAlreadySelected(instance.normalizedName, instance.inputs);
- } else {
- this.$scope.instancePropertiesMap[instance.uniqueId] = this.getInputsOrPropertiesAlreadySelected(instance.normalizedName, instance.properties);
- }
- };
-
- /*
- * Enable Input/Property after delete
- */
- private enableInputsAfterDelete = (propertiesOrInputsDeletes:Array<InputPropertyBase>):void => {
-
- _.forEach(propertiesOrInputsDeletes, (deletedInputInput:InputPropertyBase) => { //Enable all component instance inputs deleted
-
- let inputOrPropertyDeleted:InputPropertyBase = _.find(this.$scope.instanceInputsMap[deletedInputInput.componentInstanceId], (inputOrProperty:InputPropertyBase) => {
- return inputOrProperty.uniqueId === deletedInputInput.uniqueId;
- });
- inputOrPropertyDeleted.isAlreadySelected = false;
- delete _.remove(this.$scope.instanceInputsMap[deletedInputInput.componentInstanceId], {uniqueId: inputOrPropertyDeleted.uniqueId})[0];
- });
- };
-
- /*
- * Enable Input/Property after delete
- */
- private enablePropertiesAfterDelete = (propertiesOrInputsDeletes:Array<InputPropertyBase>):void => {
-
- _.forEach(propertiesOrInputsDeletes, (deletedInputInput:InputPropertyBase) => { //Enable all component instance inputs deleted
- let componentInstance = _.find(this.$scope.vfInstancesList, (instance:ComponentInstance) => {
- return instance.uniqueId === deletedInputInput.componentInstanceId;
- });
- let inputOrPropertyDeleted:InputPropertyBase = _.find(this.$scope.instancePropertiesMap[deletedInputInput.componentInstanceId], (inputOrProperty:InputPropertyBase) => {
- return inputOrProperty.uniqueId === deletedInputInput.uniqueId;
- });
-
- let expectedName = componentInstance.normalizedName + '_' + inputOrPropertyDeleted.name;
- let isAnotherInputExist = _.find(this.$scope.component.inputs, (input:InputModel) => {
- return input.name.substring(0, expectedName.length) === expectedName;
- });
- if (!isAnotherInputExist) {
- inputOrPropertyDeleted.isAlreadySelected = false;
- delete _.remove(this.$scope.instancePropertiesMap[deletedInputInput.componentInstanceId], {uniqueId: inputOrPropertyDeleted.uniqueId})[0];
- }
- });
- };
-
- private initScope = ():void => {
-
- this.$scope.instanceInputsMap = new InstancesInputsOrPropertiesMapData();
- this.$scope.instancePropertiesMap = new InstancesInputsOrPropertiesMapData();
- this.$scope.isLoading = true;
- this.$scope.isArrowDisabled = true;
- // Why do we need this? we call this later.
- //this.$scope.component.getComponentInputs();
-
- let onSuccess = (componentInstances:Array<ComponentInstance>) => {
- console.log("component instances loaded: ", componentInstances);
- this.$scope.vfInstancesList = componentInstances;
- this.$scope.isLoading = false;
- };
-
- //This function will get al component instance for the left table - in
- // future the instances will be filter according to search text
- this.$scope.component.getComponentInstancesFilteredByInputsAndProperties().then(onSuccess);
-
- // This function will get the service inputs for the right table
- this.$scope.component.getComponentInputs();
-
- /*
- * When clicking on instance in the left table, this function will load all instance inputs
- */
- this.$scope.loadInstanceInputs = (instance:ComponentInstance):ng.IPromise<boolean> => {
- let deferred = this.$q.defer();
-
- let onSuccess = (inputs:Array<InputModel>) => {
- instance.inputs = inputs;
- this.disableEnableSelectedInputsOrPropertiesOnInit(instance);
- deferred.resolve(true);
- };
-
- let onError = () => {
- deferred.resolve(false);
- };
-
- if (!instance.inputs) {
- this.$scope.component.getComponentInstanceInputs(instance.uniqueId, instance.componentUid).then(onSuccess, onError);
- //this.disableEnableSelectedInputs(instance);
- } else {
- deferred.resolve(true);
- }
- return deferred.promise;
- };
-
-
- this.$scope.loadInstanceProperties = (instance:ComponentInstance):ng.IPromise<boolean> => {
- let deferred = this.$q.defer();
-
- let onSuccess = (properties:Array<PropertyModel>) => {
- instance.properties = properties;
- this.disableEnableSelectedInputsOrPropertiesOnInit(instance);
- deferred.resolve(true);
- };
-
- let onError = () => {
- deferred.resolve(false);
- };
-
- if (!instance.properties) {
- this.$scope.component.getComponentInstanceProperties(instance.uniqueId).then(onSuccess, onError);
- } else {
- deferred.resolve(true);
- }
- return deferred.promise;
- };
-
- /*
- * When clicking on instance input in the left or right table, this function will load all properties of the selected input
- */
- this.$scope.loadInputPropertiesForInstance = (instanceId:string, input:InputModel):ng.IPromise<boolean> => {
- let deferred = this.$q.defer();
-
- let onSuccess = (properties:Array<PropertyModel>) => {
- input.properties = properties;
- deferred.resolve(true);
- };
-
- let onError = () => {
- deferred.resolve(false)
- };
-
- if (!input.properties) {
- this.$scope.component.getComponentInstanceInputProperties(instanceId, input.uniqueId).then(onSuccess, onError);
- } else {
- deferred.resolve(true);
- }
- return deferred.promise;
- };
-
- /*
- * When clicking on input in the right table, this function will load all inputs of the selected input
- */
- this.$scope.loadInputInputs = (input:InputModel):ng.IPromise<boolean> => {
- let deferred = this.$q.defer();
-
- let onSuccess = () => {
- deferred.resolve(true);
- };
- let onError = () => {
- deferred.resolve(false);
- };
-
- if (!input.inputs) { // Caching, if exists do not get it.
- this.$scope.component.getServiceInputInputsAndProperties(input.uniqueId).then(onSuccess, onError);
- } else {
- deferred.resolve(true);
- }
- return deferred.promise;
- };
-
- /*
- * When pressing the arrow, we create service inputs from the inputs selected
- */
- this.$scope.onArrowPressed = ():void => {
- let onSuccess = (inputsCreated:Array<InputModel>) => {
-
- //disabled all the inputs in the left table
- _.forEach(this.$scope.instanceInputsMap, (inputs:Array<InputModel>, instanceId:string) => {
- _.forEach(inputs, (input:InputModel) => {
- input.isAlreadySelected = true;
- });
- });
- _.forEach(this.$scope.instancePropertiesMap, (properties:Array<PropertyModel>, instanceId:string) => {
- _.forEach(properties, (property:PropertyModel) => {
- property.isAlreadySelected = true;
- });
- });
- this.addColorToItems(inputsCreated);
- };
-
- let onFailed = (error:any) => {
- this.$scope.isArrowDisabled = false;
- console.log("Error declaring input/property");
- };
-
- this.$scope.isArrowDisabled = true;
- this.$scope.component.createInputsFormInstances(this.$scope.instanceInputsMap, this.$scope.instancePropertiesMap).then(onSuccess, onFailed);
- };
-
-
- /* Iterates through array of selected inputs and properties and returns true if there is at least one new selection on left */
- this.$scope.checkArrowState = ()=> {
-
- let newInputSelected:boolean = _.some(this.$scope.instanceInputsMap, (inputs:Array<InputModel>) => {
- return _.some(inputs, (input:InputModel)=> {
- return input.isAlreadySelected === false;
- });
- });
-
- let newPropSelected:boolean = _.some(this.$scope.instancePropertiesMap, (properties:Array<PropertyModel>) => {
- return _.some(properties, (property:PropertyModel) => {
- return property.isAlreadySelected === false;
- });
- });
-
- this.$scope.isArrowDisabled = !(newInputSelected || newPropSelected);
-
- };
-
- this.$scope.deleteInput = (inputToDelete:InputModel):void => {
-
- let onDelete = ():void => {
-
- let onSuccess = (deletedInput:InputModel):void => {
- if (deletedInput.inputs && deletedInput.inputs.length > 0) { // Enable input declared from input
- this.enableInputsAfterDelete(deletedInput.inputs);
- }
-
- if (deletedInput.properties && deletedInput.properties.length > 0) { // Enable properties
- this.enablePropertiesAfterDelete(deletedInput.properties);
- }
- deletedInput.isDeleteDisabled = false;
- this.$scope.checkArrowState();
-
- };
-
- let onFailed = (error:any):void => {
- console.log("Error deleting input");
- inputToDelete.isDeleteDisabled = false;
- };
-
- inputToDelete.isDeleteDisabled = true;
- this.addColorToItems([inputToDelete]);
- this.$scope.component.deleteServiceInput(inputToDelete.uniqueId).then((deletedInput:InputModel):void => {
- onSuccess(deletedInput);
- }, onFailed);
- };
-
- // Get confirmation modal text from menu.json
- let state = "deleteInput";
- let title:string = this.$scope.sdcMenu.alertMessages[state].title;
- let message:string = this.$scope.sdcMenu.alertMessages[state].message.format([inputToDelete.name]);
-
- // Open confirmation modal
- this.ModalsHandler.openAlertModal(title, message).then(onDelete);
- };
-
- this.$scope.openEditValueModal = (input:InputModel) => {
- this.ModalsHandler.openEditInputValueModal(input);
- };
-
- this.$scope.openSelectPropertyDataTypeViewModel = (instanceId:string, property:PropertyModel) => {
- //to open the select data type modal
- let selectedInstance = _.find(this.$scope.vfInstancesList, {uniqueId: instanceId});
- this.DataTypesService.selectedInstance = selectedInstance; //set the selected instance on the service for compering the input name on the service & the complex property
- this.DataTypesService.selectedComponentInputs = this.$scope.component.inputs; // set all the service inputs on the data type service
- let filteredPropertiesMap = _.filter(this.$scope.instancePropertiesMap[instanceId], (instanceProperty)=> {
- return instanceProperty.name == property.name;
- });//get all properties under the specific property
- this.DataTypesService.selectedPropertiesName = property.propertiesName;
-
- this.ModalsHandler.openSelectDataTypeModal(property, this.$scope.component, this.$scope.component.properties, filteredPropertiesMap).then((selectedProperty:PropertyModel)=> {
- if (selectedProperty && selectedProperty.propertiesName) {
- let propertyToUpdate:PropertyModel = _.find(selectedInstance.properties, {uniqueId: selectedProperty.uniqueId});
- let existingProperty:PropertyModel = (<PropertyModel>_.find(this.$scope.instancePropertiesMap[instanceId], {uniqueId: propertyToUpdate.uniqueId}));
-
- if (existingProperty) {
- existingProperty.propertiesName = selectedProperty.propertiesName;
- existingProperty.input = selectedProperty.input;
- existingProperty.isAlreadySelected = false;
- } else {
- propertyToUpdate.propertiesName = selectedProperty.propertiesName;
- propertyToUpdate.input = selectedProperty.input;
- this.$scope.instancePropertiesMap[instanceId].push(propertyToUpdate);
-
- }
- this.$scope.checkArrowState();
-
- }
- });
- };
-
-
- this.$scope.openEditPropertyDataTypeViewModel = (property:PropertyModel)=> {
- this.ModalsHandler.openEditPropertyModal(property, this.$scope.component, this.$scope.component.properties, false).then(() => {
- });
- }
- };
-
- private addColorToItems = (inputsCreated:Array<InputModel>):void => {
-
- // Adding color to the new inputs (right table)
- _.forEach(inputsCreated, (input) => {
- input.isNew = true;
- });
-
- // Removing color to the new inputs (right table)
- setTimeout(() => {
- _.forEach(inputsCreated, (input) => {
- input.isNew = false;
- });
- this.$scope.$apply();
- }, 3000);
- };
-}
+/***** DEPRECATED - replaced by prop assignments */
+// 'use strict';
+// import * as _ from "lodash";
+// import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model";
+// import {ComponentInstance, InstancesInputsOrPropertiesMapData, Service, IAppMenu, InputModel, PropertyModel, InputPropertyBase} from "app/models";
+// import {DataTypesService} from "app/services";
+// import {ModalsHandler, ResourceType} from "app/utils";
+
+
+// interface IServiceInputsViewModelScope extends IWorkspaceViewModelScope {
+
+// vfInstancesList:Array<ComponentInstance>;
+// instanceInputsMap:InstancesInputsOrPropertiesMapData; //this is tha map object that hold the selected inputs and the inputs we already used
+// instancePropertiesMap:InstancesInputsOrPropertiesMapData;
+// component:Service;
+// sdcMenu:IAppMenu;
+// isViewOnly:boolean;
+// isArrowDisabled:boolean;
+// onArrowPressed():void;
+// checkArrowState():void;
+// loadComponentInputs():void;
+// loadInstanceInputs(instance:ComponentInstance):ng.IPromise<boolean> ;
+// loadInstanceProperties(instance:ComponentInstance):ng.IPromise<boolean> ;
+// loadInputPropertiesForInstance(instanceId:string, input:InputModel):ng.IPromise<boolean> ;
+// loadInputInputs(input:InputModel):ng.IPromise<boolean>;
+// deleteInput(input:InputModel):void
+// openEditValueModal(input:InputModel):void;
+// openSelectPropertyDataTypeViewModel(instanceId:string, property:PropertyModel):void;
+// openEditPropertyDataTypeViewModel(property:PropertyModel):void;
+// dataTypesService:DataTypesService;
+// }
+
+// export class ServiceInputsViewModel {
+
+// static '$inject' = [
+// '$scope',
+// '$q',
+// 'ModalsHandler',
+// 'Sdc.Services.DataTypesService'
+// ];
+
+// constructor(private $scope:IServiceInputsViewModelScope,
+// private $q:ng.IQService,
+// private ModalsHandler:ModalsHandler,
+// private DataTypesService:DataTypesService) {
+// this.initScope();
+// this.$scope.isViewOnly = this.$scope.isViewMode();
+// }
+
+
+// private getInputsOrPropertiesAlreadySelected = (instanceNormalizeName:string, arrayToFilter:Array<InputPropertyBase>):Array<any> => {
+// let alreadySelectedInput = [];
+// _.forEach(arrayToFilter, (inputOrProperty:InputPropertyBase) => {
+// let expectedServiceInputName = instanceNormalizeName + '_' + inputOrProperty.name;
+// let inputAlreadyInService = _.find(this.$scope.component.inputs, (serviceInput:InputModel) => {
+// //Checking if the input prefix is the instance name + '_' + property/input name (prefix because we don't need to check full name for complex dataType)
+// return serviceInput.name.substring(0, expectedServiceInputName.length) === expectedServiceInputName;
+// });
+// if (inputAlreadyInService) {
+// inputOrProperty.isAlreadySelected = true;
+// alreadySelectedInput.push(inputOrProperty);
+// } else {
+// inputOrProperty.isAlreadySelected = false;
+// }
+// });
+// return alreadySelectedInput;
+// };
+
+
+// /*
+// * When loading the screen again, we need to disabled the inputs that already created on the service,
+// * we do that by comparing the service input name, to the instance name + '_' + the resource instance input name.
+// */
+// private disableEnableSelectedInputsOrPropertiesOnInit = (instance:ComponentInstance):void => {
+
+// if (instance.originType === ResourceType.VF) {
+// this.$scope.instanceInputsMap[instance.uniqueId] = this.getInputsOrPropertiesAlreadySelected(instance.normalizedName, instance.inputs);
+// } else {
+// this.$scope.instancePropertiesMap[instance.uniqueId] = this.getInputsOrPropertiesAlreadySelected(instance.normalizedName, instance.properties);
+// }
+// };
+
+// /*
+// * Enable Input/Property after delete
+// */
+// private enableInputsAfterDelete = (propertiesOrInputsDeletes:Array<InputPropertyBase>):void => {
+
+// _.forEach(propertiesOrInputsDeletes, (deletedInputInput:InputPropertyBase) => { //Enable all component instance inputs deleted
+
+// let inputOrPropertyDeleted:InputPropertyBase = _.find(this.$scope.instanceInputsMap[deletedInputInput.componentInstanceId], (inputOrProperty:InputPropertyBase) => {
+// return inputOrProperty.uniqueId === deletedInputInput.uniqueId;
+// });
+// inputOrPropertyDeleted.isAlreadySelected = false;
+// delete _.remove(this.$scope.instanceInputsMap[deletedInputInput.componentInstanceId], {uniqueId: inputOrPropertyDeleted.uniqueId})[0];
+// });
+// };
+
+// /*
+// * Enable Input/Property after delete
+// */
+// private enablePropertiesAfterDelete = (propertiesOrInputsDeletes:Array<InputPropertyBase>):void => {
+
+// _.forEach(propertiesOrInputsDeletes, (deletedInputInput:InputPropertyBase) => { //Enable all component instance inputs deleted
+// let componentInstance = _.find(this.$scope.vfInstancesList, (instance:ComponentInstance) => {
+// return instance.uniqueId === deletedInputInput.componentInstanceId;
+// });
+// let inputOrPropertyDeleted:InputPropertyBase = _.find(this.$scope.instancePropertiesMap[deletedInputInput.componentInstanceId], (inputOrProperty:InputPropertyBase) => {
+// return inputOrProperty.uniqueId === deletedInputInput.uniqueId;
+// });
+
+// let expectedName = componentInstance.normalizedName + '_' + inputOrPropertyDeleted.name;
+// let isAnotherInputExist = _.find(this.$scope.component.inputs, (input:InputModel) => {
+// return input.name.substring(0, expectedName.length) === expectedName;
+// });
+// if (!isAnotherInputExist) {
+// inputOrPropertyDeleted.isAlreadySelected = false;
+// delete _.remove(this.$scope.instancePropertiesMap[deletedInputInput.componentInstanceId], {uniqueId: inputOrPropertyDeleted.uniqueId})[0];
+// }
+// });
+// };
+
+// private initScope = ():void => {
+
+// this.$scope.instanceInputsMap = new InstancesInputsOrPropertiesMapData();
+// this.$scope.instancePropertiesMap = new InstancesInputsOrPropertiesMapData();
+// this.$scope.isLoading = true;
+// this.$scope.isArrowDisabled = true;
+// // Why do we need this? we call this later.
+// //this.$scope.component.getComponentInputs();
+
+// let onSuccess = (componentInstances:Array<ComponentInstance>) => {
+// console.log("component instances loaded: ", componentInstances);
+// this.$scope.vfInstancesList = componentInstances;
+// this.$scope.isLoading = false;
+// };
+
+// //This function will get al component instance for the left table - in
+// // future the instances will be filter according to search text
+// this.$scope.component.getComponentInstancesFilteredByInputsAndProperties().then(onSuccess);
+
+// // This function will get the service inputs for the right table
+// this.$scope.component.getComponentInputs();
+
+// /*
+// * When clicking on instance in the left table, this function will load all instance inputs
+// */
+// this.$scope.loadInstanceInputs = (instance:ComponentInstance):ng.IPromise<boolean> => {
+// let deferred = this.$q.defer<boolean>();
+
+// let onSuccess = (inputs:Array<InputModel>) => {
+// instance.inputs = inputs;
+// this.disableEnableSelectedInputsOrPropertiesOnInit(instance);
+// deferred.resolve(true);
+// };
+
+// let onError = () => {
+// deferred.resolve(false);
+// };
+
+// if (!instance.inputs) {
+// this.$scope.component.getComponentInstanceInputs(instance.uniqueId, instance.componentUid).then(onSuccess, onError);
+// //this.disableEnableSelectedInputs(instance);
+// } else {
+// deferred.resolve(true);
+// }
+// return deferred.promise;
+// };
+
+
+// this.$scope.loadInstanceProperties = (instance:ComponentInstance):ng.IPromise<boolean> => {
+// let deferred = this.$q.defer<boolean>();
+
+// let onSuccess = (properties:Array<PropertyModel>) => {
+// instance.properties = properties;
+// this.disableEnableSelectedInputsOrPropertiesOnInit(instance);
+// deferred.resolve(true);
+// };
+
+// let onError = () => {
+// deferred.resolve(false);
+// };
+
+// if (!instance.properties) {
+// this.$scope.component.getComponentInstanceProperties(instance.uniqueId).then(onSuccess, onError);
+// } else {
+// deferred.resolve(true);
+// }
+// return deferred.promise;
+// };
+
+// /*
+// * When clicking on instance input in the left or right table, this function will load all properties of the selected input
+// */
+// this.$scope.loadInputPropertiesForInstance = (instanceId:string, input:InputModel):ng.IPromise<boolean> => {
+// let deferred = this.$q.defer<boolean>();
+
+// let onSuccess = (properties:Array<PropertyModel>) => {
+// input.properties = properties;
+// deferred.resolve(true);
+// };
+
+// let onError = () => {
+// deferred.resolve(false)
+// };
+
+// if (!input.properties) {
+// this.$scope.component.getComponentInstanceInputProperties(instanceId, input.uniqueId).then(onSuccess, onError);
+// } else {
+// deferred.resolve(true);
+// }
+// return deferred.promise;
+// };
+
+// /*
+// * When clicking on input in the right table, this function will load all inputs of the selected input
+// */
+// this.$scope.loadInputInputs = (input:InputModel):ng.IPromise<boolean> => {
+// let deferred = this.$q.defer<boolean>();
+
+// let onSuccess = () => {
+// deferred.resolve(true);
+// };
+// let onError = () => {
+// deferred.resolve(false);
+// };
+
+// if (!input.inputs) { // Caching, if exists do not get it.
+// this.$scope.component.getServiceInputInputsAndProperties(input.uniqueId).then(onSuccess, onError);
+// } else {
+// deferred.resolve(true);
+// }
+// return deferred.promise;
+// };
+
+// /*
+// * When pressing the arrow, we create service inputs from the inputs selected
+// */
+// this.$scope.onArrowPressed = ():void => {
+// let onSuccess = (inputsCreated:Array<InputModel>) => {
+
+// //disabled all the inputs in the left table
+// _.forEach(this.$scope.instanceInputsMap, (inputs:Array<InputModel>, instanceId:string) => {
+// _.forEach(inputs, (input:InputModel) => {
+// input.isAlreadySelected = true;
+// });
+// });
+// _.forEach(this.$scope.instancePropertiesMap, (properties:Array<PropertyModel>, instanceId:string) => {
+// _.forEach(properties, (property:PropertyModel) => {
+// property.isAlreadySelected = true;
+// });
+// });
+// this.addColorToItems(inputsCreated);
+// };
+
+// let onFailed = (error:any) => {
+// this.$scope.isArrowDisabled = false;
+// console.log("Error declaring input/property");
+// };
+
+// this.$scope.isArrowDisabled = true;
+// this.$scope.component.createInputsFormInstances(this.$scope.instanceInputsMap, this.$scope.instancePropertiesMap).then(onSuccess, onFailed);
+// };
+
+
+// /* Iterates through array of selected inputs and properties and returns true if there is at least one new selection on left */
+// this.$scope.checkArrowState = ()=> {
+
+// let newInputSelected:boolean = _.some(this.$scope.instanceInputsMap, (inputs:Array<InputModel>) => {
+// return _.some(inputs, (input:InputModel)=> {
+// return input.isAlreadySelected === false;
+// });
+// });
+
+// let newPropSelected:boolean = _.some(this.$scope.instancePropertiesMap, (properties:Array<PropertyModel>) => {
+// return _.some(properties, (property:PropertyModel) => {
+// return property.isAlreadySelected === false;
+// });
+// });
+
+// this.$scope.isArrowDisabled = !(newInputSelected || newPropSelected);
+
+// };
+
+// this.$scope.deleteInput = (inputToDelete:InputModel):void => {
+
+// let onDelete = ():void => {
+
+// let onSuccess = (deletedInput:InputModel):void => {
+// if (deletedInput.inputs && deletedInput.inputs.length > 0) { // Enable input declared from input
+// this.enableInputsAfterDelete(deletedInput.inputs);
+// }
+
+// if (deletedInput.properties && deletedInput.properties.length > 0) { // Enable properties
+// this.enablePropertiesAfterDelete(deletedInput.properties);
+// }
+// deletedInput.isDeleteDisabled = false;
+// this.$scope.checkArrowState();
+
+// };
+
+// let onFailed = (error:any):void => {
+// console.log("Error deleting input");
+// inputToDelete.isDeleteDisabled = false;
+// };
+
+// inputToDelete.isDeleteDisabled = true;
+// this.addColorToItems([inputToDelete]);
+// this.$scope.component.deleteServiceInput(inputToDelete.uniqueId).then((deletedInput:InputModel):void => {
+// onSuccess(deletedInput);
+// }, onFailed);
+// };
+
+// // Get confirmation modal text from menu.json
+// let state = "deleteInput";
+// let title:string = this.$scope.sdcMenu.alertMessages[state].title;
+// let message:string = this.$scope.sdcMenu.alertMessages[state].message.format([inputToDelete.name]);
+
+// // Open confirmation modal
+// this.ModalsHandler.openAlertModal(title, message).then(onDelete);
+// };
+
+// this.$scope.openEditValueModal = (input:InputModel) => {
+// this.ModalsHandler.openEditInputValueModal(input);
+// };
+
+// this.$scope.openSelectPropertyDataTypeViewModel = (instanceId:string, property:PropertyModel) => {
+// //to open the select data type modal
+// let selectedInstance = _.find(this.$scope.vfInstancesList, {uniqueId: instanceId});
+// this.DataTypesService.selectedInstance = selectedInstance; //set the selected instance on the service for compering the input name on the service & the complex property
+// this.DataTypesService.selectedComponentInputs = this.$scope.component.inputs; // set all the service inputs on the data type service
+// let filteredPropertiesMap = _.filter(this.$scope.instancePropertiesMap[instanceId], (instanceProperty)=> {
+// return instanceProperty.name == property.name;
+// });//get all properties under the specific property
+// this.DataTypesService.selectedPropertiesName = property.propertiesName;
+
+// this.ModalsHandler.openSelectDataTypeModal(property, this.$scope.component, this.$scope.component.properties, filteredPropertiesMap).then((selectedProperty:PropertyModel)=> {
+// if (selectedProperty && selectedProperty.propertiesName) {
+// let propertyToUpdate:PropertyModel = _.find(selectedInstance.properties, {uniqueId: selectedProperty.uniqueId});
+// let existingProperty:PropertyModel = (<PropertyModel>_.find(this.$scope.instancePropertiesMap[instanceId], {uniqueId: propertyToUpdate.uniqueId}));
+
+// if (existingProperty) {
+// existingProperty.propertiesName = selectedProperty.propertiesName;
+// existingProperty.input = selectedProperty.input;
+// existingProperty.isAlreadySelected = false;
+// } else {
+// propertyToUpdate.propertiesName = selectedProperty.propertiesName;
+// propertyToUpdate.input = selectedProperty.input;
+// this.$scope.instancePropertiesMap[instanceId].push(propertyToUpdate);
+
+// }
+// this.$scope.checkArrowState();
+
+// }
+// });
+// };
+
+
+// this.$scope.openEditPropertyDataTypeViewModel = (property:PropertyModel)=> {
+// this.ModalsHandler.openEditPropertyModal(property, this.$scope.component, this.$scope.component.properties, false).then(() => {
+// });
+// }
+// };
+
+// private addColorToItems = (inputsCreated:Array<InputModel>):void => {
+
+// // Adding color to the new inputs (right table)
+// _.forEach(inputsCreated, (input) => {
+// input.isNew = true;
+// });
+
+// // Removing color to the new inputs (right table)
+// setTimeout(() => {
+// _.forEach(inputsCreated, (input) => {
+// input.isNew = false;
+// });
+// this.$scope.$apply();
+// }, 3000);
+// };
+// }
diff --git a/catalog-ui/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 0360c9c805..b09662d7a2 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
@@ -71,7 +71,7 @@ export class PropertiesViewModel {
}
private openEditPropertyModal = (property:PropertyModel):void => {
- this.ModalsHandler.openEditPropertyModal(property, this.$scope.component, this.$scope.filteredProperties, false).then((updatedProperty:PropertyModel) => {
+ this.ModalsHandler.openEditPropertyModal(property, this.$scope.component, this.$scope.filteredProperties, false, 'component', this.$scope.component.uniqueId).then((updatedProperty:PropertyModel) => {
//property = updatedProperty;
});
};
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
index f63ab1ccbc..6eaae44eb2 100644
--- 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
@@ -93,7 +93,7 @@ export class ReqAndCapabilitiesViewModel {
_.forEach(this.$scope.filteredProperties[indexInFilteredProperties], (prop:PropertyModel)=> {
prop.readonly = true;
});
- this.ModalsHandler.openEditPropertyModal(property, this.$scope.component, this.$scope.filteredProperties[indexInFilteredProperties], false).then(() => {
+ this.ModalsHandler.openEditPropertyModal(property, this.$scope.component, this.$scope.filteredProperties[indexInFilteredProperties], false, "component", this.$scope.component.uniqueId).then(() => {
});
};
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 9abd7139b7..676a2d38d3 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
@@ -26,7 +26,7 @@ import * as _ from "lodash";
import {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
+ MenuItem, ModalsHandler, States, EVENTS, CHANGE_COMPONENT_CSAR_VERSION_FLAG, ResourceType, PREVIOUS_CSAR_COMPONENT
} from "app/utils";
import {
EventListenerService,
@@ -36,8 +36,11 @@ import {
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";
export interface IWorkspaceViewModelScope extends ng.IScope {
@@ -70,23 +73,35 @@ export interface IWorkspaceViewModelScope extends ng.IScope {
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;
+
+ 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>;
- save():ng.IPromise<boolean>;
+ create():void;
+ save():Promise<void>;
setValidState(isValid:boolean):void;
- revert():void;
changeLifecycleState(state:string):void;
- enabledTabs():void
+ handleChangeLifecycleState(state:string, newCsarVersion?:string):void;
+ disableMenuItems():void;
+ enableMenuItems():void;
isDesigner():boolean;
isViewMode():boolean;
isEditMode():boolean;
isCreateMode():boolean;
isDisableMode():boolean;
- showFullIcons():boolean;
+ isGeneralView():boolean;
goToBreadcrumbHome():void;
onVersionChanged(selectedId:string):void;
getLatestVersion():void;
@@ -120,6 +135,8 @@ export class WorkspaceViewModel {
'Notification',
'$stateParams',
'Sdc.Services.ProgressService',
+ 'ComponentServiceNg2',
+ 'AutomatedUpgradeService',
'EventBusService',
'PluginsService'
];
@@ -141,8 +158,12 @@ export class WorkspaceViewModel {
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();
@@ -170,22 +191,18 @@ export class WorkspaceViewModel {
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;
- this.$scope.changeLifecycleStateButtons = this.sdcMenu.roles[this.role].changeLifecycleStateButtons[state];
- };
+ this.$scope.changeLifecycleStateButtons = (this.sdcMenu.roles[this.role].changeLifecycleStateButtons[state] || [])[this.$scope.component.componentType.toUpperCase()];
- private isNeedSave = ():boolean => {
- return this.$scope.isEditMode() &&
- this.$state.current.data && this.$state.current.data.unsavedChanges;
};
private initLeftPalette = ():void => {
- this.LeftPaletteLoaderService.loadLeftPanel(this.$scope.component);
+ //this.LeftPaletteLoaderService.loadLeftPanel(this.$scope.component);
};
private initScope = ():void => {
this.$scope.component = this.injectComponent;
- this.initLeftPalette();
+ //this.initLeftPalette();
this.$scope.menuComponentTitle = this.$scope.component.name;
this.$scope.disabledButtons = false;
this.$scope.originComponent = this.ComponentFactory.createComponent(this.$scope.component);
@@ -202,7 +219,10 @@ export class WorkspaceViewModel {
this.$scope.isComposition = (this.$state.current.name.indexOf(States.WORKSPACE_COMPOSITION) > -1);
this.$scope.isDeployment = this.$state.current.name == States.WORKSPACE_DEPLOYMENT;
this.$scope.progressService = this.progressService;
- this.$scope.isActiveTopBar = true;
+ 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.getComponent = ():Component => {
return this.$scope.component;
@@ -218,19 +238,82 @@ export class WorkspaceViewModel {
this.$scope.component = component;
};
+ this.$scope.setOriginComponent = (component:Component):void => {
+ this.$scope.originComponent = component;
+ }
+
this.$scope.uploadFileChangedInGeneralTab = ():void => {
// In case user select browse file, and in update mode, need to disable submit for testing and checkin buttons.
if (this.$scope.isEditMode() && this.$scope.component.isResource() && (<Resource>this.$scope.component).resourceType == ResourceType.VF) {
- this.$scope.disabledButtons = true;
+ // NOTE: Commented out the disabling of the workspace buttons on CSAR updating due fix of a bug [417534]
+ // this.$scope.disabledButtons = true;
}
};
+ this.$scope.archiveComponent = ():void => {
+ this.$scope.isLoading = true;
+ const typeComponent = this.$scope.component.componentType;
+ this.ComponentServiceNg2.archiveComponent(typeComponent, this.$scope.component.uniqueId).subscribe(()=>{
+ this.$scope.isLoading = false;
+ 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();
+
+ this.Notification.success({
+ message: this.$scope.component.name + ' ' + this.$filter('translate')("ARCHIVE_SUCCESS_MESSAGE_TEXT"),
+ 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.$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")
+ });
+ });
+ this.$scope.component.archived = false;
+ this.deleteArchiveCache();
+ }
+
+ this.$scope.$on('$stateChangeStart', (event, toState, toParams, fromState, fromParams) => {
+ if(this.$scope.isEditMode()){
+ if (fromParams.id == toParams.id && this.$state.current.data && this.$state.current.data.unsavedChanges) {
+ event.preventDefault();
+ 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);
+ }
+ }
+ }
+
+ });
+
this.$scope.$on('$stateChangeSuccess', (event, toState) => {
this.$scope.updateSelectedMenuItem(this.$state.current.name);
});
this.$scope.onMenuItemPressed = (state:string, params:any):ng.IPromise<boolean> => {
- let deferred = this.$q.defer();
+
+ let deferred:ng.IDeferred<boolean> = this.$q.defer();
let goToState = ():void => {
this.$state.go(state, Object.assign({
id: this.$scope.component.uniqueId,
@@ -239,14 +322,8 @@ export class WorkspaceViewModel {
}, params));
deferred.resolve(true);
};
- if (this.isNeedSave()) {
- if (this.$scope.isValidForm) {
- this.$scope.save().then(goToState);
- } else {
- console.log('form is not valid');
- deferred.reject(false);
- }
- } else if (this.$scope.isEditMode() && //this is a workaround for amdocs - we need to get the artifact in order to avoid saving the vf when moving from their tabs
+
+ if (this.$scope.isEditMode() && //this is a workaround for amdocs - we need to get the artifact in order to avoid saving the vf when moving from their tabs
(this.$state.current.name === States.WORKSPACE_MANAGEMENT_WORKFLOW || this.$state.current.name === States.WORKSPACE_NETWORK_CALL_FLOW)) {
let onGetSuccess = (component:Component) => {
this.$scope.isLoading = false;
@@ -271,7 +348,7 @@ export class WorkspaceViewModel {
};
this.$scope.onVersionChanged = (selectedId:string):void => {
- if (this.$state.current.data && this.$state.current.data.unsavedChanges) {
+ if (this.$scope.isGeneralView() && this.$state.current.data.unsavedChanges) {
this.$scope.changeVersion.selectedVersion = _.find(this.$scope.versionsList, (versionObj)=> {
return versionObj.versionId === this.$scope.component.uniqueId;
});
@@ -298,37 +375,35 @@ export class WorkspaceViewModel {
this.$scope.onVersionChanged(_.first(this.$scope.versionsList).versionId);
};
- this.$scope.save = (state?:string):ng.IPromise<boolean> => {
- this.EventListenerService.notifyObservers(EVENTS.ON_WORKSPACE_SAVE_BUTTON_CLICK);
-
- this.progressService.initCreateComponentProgress(this.$scope.component.uniqueId);
+ this.$scope.create = () => {
+
+ this.$scope.startProgress("Creating Asset...");
+ _.first(this.$scope.leftBarTabs.menuItems).isDisabled = true;//disabled click on general tab (DE246274)
- let deferred = this.$q.defer();
- let modalInstance:ng.ui.bootstrap.IModalServiceInstance;
+ // In case we import CSAR. Notify user that import VF will take long time (the create is performed in the background).
+ if (this.$scope.component.isResource() && (<Resource>this.$scope.component).csarUUID) {
+ this.Notification.info({
+ message: this.$filter('translate')("IMPORT_VF_MESSAGE_CREATE_TAKES_LONG_TIME_DESCRIPTION"),
+ title: this.$filter('translate')("IMPORT_VF_MESSAGE_CREATE_TAKES_LONG_TIME_TITLE")
+ });
+ }
let onFailed = () => {
+ this.$scope.stopProgress();
+ this.$scope.isLoading = false; // stop the progress.
_.first(this.$scope.leftBarTabs.menuItems).isDisabled = false;//enabled click on general tab (DE246274)
this.EventListenerService.notifyObservers(EVENTS.ON_WORKSPACE_SAVE_BUTTON_ERROR);
- this.progressService.deleteProgressValue(this.$scope.component.uniqueId);
+ let modalInstance:ng.ui.bootstrap.IModalServiceInstance;
modalInstance && modalInstance.close(); // Close the modal in case it is opened.
this.$scope.component.tags = _.without(this.$scope.component.tags, this.$scope.component.name);// for fix DE246217
- this.$scope.isCreateProgress = false;
- this.$scope.isLoading = false; // stop the progress.
this.$scope.setValidState(true); // Set the form valid (if sent form is valid, the error from server).
- if (!this.$scope.isCreateMode()) {
- this.$scope.component = this.ComponentFactory.createComponent(this.$scope.originComponent); // Set the component back to the original.
- this.enableMenuItems(); // Enable the menu items (left tabs), so user can press on them.
- this.$scope.disabledButtons = false; // Enable "submit for testing" & checking buttons.
- }
-
- deferred.reject(false);
};
let onSuccessCreate = (component:Component) => {
+ this.$scope.stopProgress();
this.showSuccessNotificationMessage();
- this.progressService.deleteProgressValue(this.$scope.component.uniqueId);
// Update the components list for breadcrumbs
this.components.unshift(component);
@@ -337,99 +412,73 @@ export class WorkspaceViewModel {
id: component.uniqueId,
type: component.componentType.toLowerCase(),
components: this.components
- }, { inherit: false });
-
- deferred.resolve(true);
+ }, {inherit: false});
};
- let onSuccessUpdate = (component:Component) => {
- this.$scope.isCreateProgress = false;
- this.$scope.disabledButtons = false;
- this.showSuccessNotificationMessage();
- this.progressService.deleteProgressValue(this.$scope.component.uniqueId);
+ this.ComponentFactory.createComponentOnServer(this.$scope.component).then(onSuccessCreate, onFailed);
- // Stop the circle loader.
- this.$scope.isLoading = false;
-
- component.tags = _.reject(component.tags, (item)=> {
- return item === component.name
- });
- // 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
- }
+ };
- // Update the component
- this.$scope.component = component;
- this.$scope.originComponent = this.ComponentFactory.createComponent(this.$scope.component);
+ this.$scope.save = ():Promise<void> => {
+
+ this.EventListenerService.notifyObservers(EVENTS.ON_WORKSPACE_SAVE_BUTTON_CLICK);
- // Enable left tags
- this.$scope.enabledTabs();
+ this.$scope.startProgress("Updating Asset...");
+ this.$scope.disableMenuItems();
- if (this.$state.current.data) {
- this.$state.current.data.unsavedChanges = false;
+ return new Promise<void>((resolve, reject) => {
+ let stopProgressAndEnableUI = () => {
+ this.$scope.disabledButtons = false;
+ this.$scope.isLoading = false;
+ this.$scope.enableMenuItems();
+ this.$scope.stopProgress();
}
- deferred.resolve(true);
- };
-
- if (this.$scope.isCreateMode()) {
- this.$scope.progressMessage = "Creating Asset...";
- // CREATE MODE
- this.$scope.isCreateProgress = true;
+ let onFailed = () => {
+ stopProgressAndEnableUI();
+ this.EventListenerService.notifyObservers(EVENTS.ON_WORKSPACE_SAVE_BUTTON_ERROR);
- _.first(this.$scope.leftBarTabs.menuItems).isDisabled = true;//disabled click on general tab (DE246274)
+ reject();
+ };
- // Start creating the component
- this.ComponentFactory.createComponentOnServer(this.$scope.component).then(onSuccessCreate, onFailed);
+ let onSuccessUpdate = (component:Component) => {
+ stopProgressAndEnableUI();
+ this.showSuccessNotificationMessage();
- // In case we import CSAR. Notify user that import VF will take long time (the create is performed in the background).
- if (this.$scope.component.isResource() && (<Resource>this.$scope.component).csarUUID) {
- this.Notification.info({
- message: this.$filter('translate')("IMPORT_VF_MESSAGE_CREATE_TAKES_LONG_TIME_DESCRIPTION"),
- title: this.$filter('translate')("IMPORT_VF_MESSAGE_CREATE_TAKES_LONG_TIME_TITLE")
+ component.tags = _.reject(component.tags, (item)=> {
+ return item === component.name
});
- }
- } else {
- // UPDATE MODE
- this.$scope.isCreateProgress = true;
- this.$scope.progressMessage = "Updating Asset...";
- this.disableMenuItems();
+ this.$scope.updateBreadcrumbs(component);
+
+ //update the component
+ this.$scope.setComponent(component);
+ this.$scope.originComponent = this.ComponentFactory.createComponent(this.$scope.component);
- // 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);
- }
+ if (this.cacheService.contains(CHANGE_COMPONENT_CSAR_VERSION_FLAG)) {
+ this.cacheService.remove(CHANGE_COMPONENT_CSAR_VERSION_FLAG);
+ }
+ 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;
+ resolve();
+ };
this.$scope.component.updateComponent().then(onSuccessUpdate, onFailed);
- }
- return deferred.promise;
- };
+ });
- this.$scope.revert = ():void => {
- //in state of import file leave the file in place
- if (this.$scope.component.isResource() && (<Resource>this.$scope.component).importedFile) {
- let tempFile:FileUploadModel = (<Resource>this.$scope.component).importedFile;
- this.$scope.component = this.ComponentFactory.createComponent(this.$scope.originComponent);
- (<Resource>this.$scope.component).importedFile = tempFile;
- } else {
- this.$scope.component = this.ComponentFactory.createComponent(this.$scope.originComponent);
- }
- this.EventListenerService.notifyObservers(EVENTS.ON_REVERT);
};
this.$scope.changeLifecycleState = (state:string):void => {
- if (this.isNeedSave() && state !== 'deleteVersion') {
- this.$scope.save().then(() => {
- changeLifecycleState(state);
- })
+ if (this.$scope.isGeneralView() && state !== 'deleteVersion') {
+ this.EventListenerService.notifyObservers(EVENTS.ON_LIFECYCLE_CHANGE_WITH_SAVE, state);
} else {
- changeLifecycleState(state);
+ this.$scope.handleChangeLifecycleState(state);
}
};
@@ -440,7 +489,7 @@ export class WorkspaceViewModel {
this.$state.go('dashboard');
};
- let changeLifecycleState = (state:string) => {
+ this.$scope.handleChangeLifecycleState = (state:string, newCsarVersion?:string) => {
if ('monitor' === state) {
this.$state.go('workspace.distribution');
return;
@@ -466,9 +515,9 @@ export class WorkspaceViewModel {
// only checkOut get the full component from server
// this.$scope.component = component;
// 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);
- }
+ if(newCsarVersion) {
+ this.cacheService.set(CHANGE_COMPONENT_CSAR_VERSION_FLAG, newCsarVersion);
+ }
//when checking out a minor version uuid remains
const bcIdx = _.findIndex(this.components, (item) => {
@@ -480,20 +529,17 @@ export class WorkspaceViewModel {
//when checking out a major(certified) version
this.components.unshift(component);
}
- // this.$state.go(this.$state.current.name, {
- // id: component.uniqueId,
- // type: component.componentType.toLowerCase(),
- // components: this.components
- // });
this.$scope.mode = this.initViewMode();
this.initChangeLifecycleStateButtons();
this.initVersionObject();
this.$scope.isLoading = false;
this.EventListenerService.notifyObservers(EVENTS.ON_CHECKOUT, component);
+
this.Notification.success({
message: this.$filter('translate')("CHECKOUT_SUCCESS_MESSAGE_TEXT"),
title: this.$filter('translate')("CHECKOUT_SUCCESS_MESSAGE_TITLE")
});
+
});
break;
case 'lifecycleState/CHECKIN':
@@ -528,11 +574,9 @@ export class WorkspaceViewModel {
});
break;
case 'lifecycleState/certify':
- defaultActionAfterChangeLifecycleState();
- this.Notification.success({
- message: this.$filter('translate')("ACCEPT_TESTING_SUCCESS_MESSAGE_TEXT"),
- title: this.$filter('translate')("ACCEPT_TESTING_SUCCESS_MESSAGE_TITLE")
- });
+
+ this.$scope.handleCertification(component);
+
break;
//DE203504 Bug Fix Start
case 'lifecycleState/startCertification':
@@ -588,11 +632,7 @@ export class WorkspaceViewModel {
this.ChangeLifecycleStateHandler.changeLifecycleState(this.$scope.component, data, this.$scope, onSuccess);
};
- this.$scope.enabledTabs = ():void => {
- this.$scope.leftBarTabs.menuItems.forEach((item:MenuItem) => {
- item.isDisabled = false;
- });
- };
+
this.$scope.isViewMode = ():boolean => {
return this.$scope.mode === WorkspaceMode.VIEW;
@@ -606,7 +646,7 @@ export class WorkspaceViewModel {
return this.$scope.mode === WorkspaceMode.VIEW && this.$scope.component.lifecycleState === ComponentState.NOT_CERTIFIED_CHECKIN;
};
- this.$scope.showFullIcons = ():boolean => {
+ this.$scope.isGeneralView = ():boolean => {
//we show revert and save icons only in general view
return this.$state.current.name === States.WORKSPACE_GENERAL;
};
@@ -697,15 +737,96 @@ export class WorkspaceViewModel {
};
this.$scope.reload = (component:Component):void => {
- this.$state.go(this.$state.current.name,{id:component.uniqueId},{reload:true});
+ this.$state.go(this.$state.current.name, {id: component.uniqueId}, {reload: true});
};
- this.$scope.$on('setWorkspaceTopBarActive', (event:ng.IAngularEvent, isActive:boolean) => {
- this.$scope.isActiveTopBar = isActive;
+ 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>)=> {
+ this.$scope.isLoading = false;
+ this.AutomatedUpgradeService.openAutomatedUpgradeModal(response, this.$scope.component, false);
+ });
+ }
+
+ this.$scope.handleCertification = (certifyComponent): void => {
+ if (this.$scope.component.getComponentSubType() === ResourceType.VF) {
+ 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) => {
+ return componentToUpgrade.dependencies && componentToUpgrade.dependencies.length > 0;
+ });
+ if(isUpgradeNeeded.length === 0) {
+ this.onSuccessWithoutUpgradeNeeded();
+ return;
+ }
+ this.refreshDataAfterChangeLifecycleState(certifyComponent);
+ this.AutomatedUpgradeService.openAutomatedUpgradeModal(response, this.$scope.component, true);
+ });
+ } else {
+ this.onSuccessWithoutUpgradeNeeded();
+ }
+ }
+
+ this.$scope.disableMenuItems = () => {
+ this.$scope.leftBarTabs.menuItems.forEach((item:MenuItem) => {
+ item.isDisabled = (States.WORKSPACE_GENERAL != item.state);
+ });
+ }
+
+ this.$scope.enableMenuItems = () => {
+ this.$scope.leftBarTabs.menuItems.forEach((item:MenuItem) => {
+ item.isDisabled = false;
+ });
+ }
+
+
+ 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.isCreateProgress = false;
+ this.progressService.deleteProgressValue(this.$scope.component.uniqueId);
+ }
+
+ 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 => {
+ 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")
+ });
+ this.$state.go('dashboard');
+ }
+ private refreshDataAfterChangeLifecycleState = (component:Component):void => {
+ this.$scope.isLoading = false;
+ this.$scope.mode = this.initViewMode();
+ this.initChangeLifecycleStateButtons();
+ this.initVersionObject();
+ this.EventListenerService.notifyObservers(EVENTS.ON_LIFECYCLE_CHANGE, component);
+ }
+
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) {
@@ -743,6 +864,10 @@ export class WorkspaceViewModel {
return tempMenuItems;
};
+ private deleteArchiveCache = () => {
+ 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);
@@ -787,32 +912,16 @@ export class WorkspaceViewModel {
}
menuItem.callback = () => this.$scope[menuItem.action](menuItem.state, menuItem.params);
menuItem.isDisabled = (inCreateMode && States.WORKSPACE_GENERAL != menuItem.state) ||
- (States.WORKSPACE_DEPLOYMENT === menuItem.state && this.$scope.component.groups && this.$scope.component.groups.length === 0 && this.$scope.component.isResource());
+ (States.WORKSPACE_DEPLOYMENT === menuItem.state && this.$scope.component.modules && this.$scope.component.modules.length === 0 && this.$scope.component.isResource());
return menuItem;
});
if (this.cacheService.get('breadcrumbsComponents')) {
this.initBreadcrumbs();
- } else {
- let onSuccess = (components:Array<Component>) => {
- this.cacheService.set('breadcrumbsComponents', components);
- this.initBreadcrumbs();
- };
- this.EntityService.getCatalog().then(onSuccess); //getAllComponents() doesnt return components from catalog
}
}
- private disableMenuItems() {
- this.$scope.leftBarTabs.menuItems.forEach((item:MenuItem) => {
- item.isDisabled = (States.WORKSPACE_GENERAL != item.state);
- });
- }
- private enableMenuItems() {
- this.$scope.leftBarTabs.menuItems.forEach((item:MenuItem) => {
- item.isDisabled = false;
- });
- }
private showSuccessNotificationMessage = ():void => {
this.Notification.success({
@@ -821,4 +930,9 @@ export class WorkspaceViewModel {
});
};
+ private setWorkspaceButtonState = (newState:boolean, callback?:Function) => {
+ this.$scope.unsavedChanges = newState;
+ this.$scope.unsavedChangesCallback = callback;
+ }
+
}
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 1452754024..f6fed6a41d 100644
--- a/catalog-ui/src/app/view-models/workspace/workspace-view.html
+++ b/catalog-ui/src/app/view-models/workspace/workspace-view.html
@@ -17,9 +17,9 @@
<div class="version-container">
<span data-ng-if="!isCreateMode() && !component.isLatestVersion()" class="not-latest"></span>
- <select class="version-selector" data-ng-if="!isCreateMode()" data-tests-id="versionHeader" data-ng-model="changeVersion.selectedVersion" data-ng-class="{'disabled': !isActiveTopBar}"
- ng-options="'V'+version.versionNumber for version in versionsList" data-ng-change="onVersionChanged(changeVersion.selectedVersion.versionId)">
- </select>
+ <select class="version-selector" data-ng-if="!isCreateMode()" data-tests-id="versionHeader" data-ng-model="changeVersion.selectedVersion" data-ng-class="{'disabled': unsavedChanges}"
+ ng-options="'V'+version.versionNumber for version in versionsList" data-ng-change="onVersionChanged(changeVersion.selectedVersion.versionId)">
+ </select>
</div>
<div class="lifecycle-state">
@@ -27,6 +27,9 @@
<span class="lifecycle-state-text" data-tests-id="formlifecyclestate">{{getStatus()}}</span>
</div>
+ <div class="archive-state-label" ng-if="component.archived">
+ <div class="sprite-new archive-label" ></div>
+ </div>
<div class="progress-container" >
<top-progress class="general-view-top-progress" progress-value="progressService.getProgressValue(component.uniqueId)" progress-message="progressMessage"></top-progress>
@@ -34,47 +37,64 @@
<div class="sdc-workspace-top-bar-buttons">
- <span ng-if="!isCreateMode() && !component.isLatestVersion() && !showChangeStateButton()" [disabled]="!isActiveTopBar">Switch to the&nbsp;<a ng-click="getLatestVersion()">latest version</a></span>
+ <span ng-if="!isCreateMode() && !component.isLatestVersion() && !showChangeStateButton()" [disabled]="unsavedChanges">Switch to the&nbsp;<a ng-click="getLatestVersion()">latest version</a></span>
- <button ng-if="isDesigner() && !isCreateMode()"
- data-ng-class="{'disabled' :!isValidForm || isDisableMode() || isViewMode() || !isActiveTopBar}"
- ng-click="save()"
+ <button ng-if="isDesigner() && !isCreateMode() && component.lifecycleState === 'CERTIFIED' && (component.isService() || component.getComponentSubType() === 'VF')"
+ ng-click="openAutomatedUpgradeModal()"
class="tlv-btn blue"
- data-tests-id="create/save"
- data-ng-show="showFullIcons()"
- sdc-smart-tooltip="">Update</button>
+ data-ng-class="{'disabled' : component.archived}"
+ data-tests-id="open-upgrade-vsp-popup"
+ sdc-smart-tooltip="" prevent-double-click>{{component.isResource() ? 'Upgrade Services' : 'Update Services'}}</button>
+
<button ng-repeat="(key,button) in changeLifecycleStateButtons"
ng-click="changeLifecycleState(key)"
ng-if="showChangeStateButton() && key != 'deleteVersion'"
- data-ng-disabled="isCreateMode() || button.disabled || disabledButtons || !isValidForm || !isActiveTopBar"
+ data-ng-disabled="isCreateMode() || button.disabled || disabledButtons || !isValidForm || unsavedChanges || component.archived"
class="change-lifecycle-state-btn tlv-btn"
ng-class="$first ? 'outline green' : 'grey'"
- data-tests-id="{{button.text | testsId}}">
+ data-tests-id="{{button.text | testsId}}" prevent-double-click>
{{button.text}}
+
</button>
- <button ng-if="!isViewMode() && isCreateMode()" data-ng-disabled="!isValidForm || isDisableMode() || isLoading || !isActiveTopBar" ng-click="save()" class="tlv-btn outline green" data-tests-id="create/save">Create</button>
- <span data-ng-if="isDesigner() && !isCreateMode() && component.lifecycleState === 'NOT_CERTIFIED_CHECKOUT'" sdc-smart-tooltip=""
- data-ng-class="{'disabled' : !isValidForm || isDisableMode() || isViewMode() || !isActiveTopBar}" ng-click="changeLifecycleState('deleteVersion')"
- class="sprite-new delete-btn" data-tests-id="delete_version" sdc-smart-tooltip="">Delete</span>
+ <button ng-if="!isCreateMode() && component.archived"
+ data-ng-class="{'disabled' :!isDesigner() || !component.isLatestVersion()}"
+ ng-click="restoreComponent()"
+ class="tlv-btn blue"
+ data-tests-id="restore-component-button"
+ prevent-double-click>Restore</button>
+
+ <button ng-if="!isViewMode() && isCreateMode()" data-ng-disabled="!isValidForm || isDisableMode() || isLoading || unsavedChanges" ng-click="create()" class="tlv-btn outline green" data-tests-id="create/save">Create</button>
+
+ <span data-ng-if="isDesigner() && !isCreateMode() && component.lifecycleState === 'NOT_CERTIFIED_CHECKOUT' && !component.archived" sdc-smart-tooltip=""
+ data-ng-class="{'disabled' : !isValidForm || isDisableMode() || isViewMode() || unsavedChanges}" ng-click="changeLifecycleState('deleteVersion')"
+ class="sprite-new delete-btn" data-tests-id="delete_version" sdc-smart-tooltip="Delete" prevent-double-click>Delete</span>
+
+ <span data-ng-click = "archiveComponent()"
+ ng-model-options="{ debounce: 300 }"
+ data-ng-class="{'disabled' : !component.isLatestVersion()}"
+ data-ng-if = "isDesigner() && component.lifecycleState !== 'NOT_CERTIFIED_CHECKOUT' && !isCreateMode() && !component.archived"
+ data-tests-id="archive-component-button"
+ class="sprite-new archive-btn" sdc-smart-tooltip="Archive" prevent-double-click>Archive</span>
+
- <span data-ng-if="isDesigner()" data-ng-class="{'disabled' :isDisableMode() || isViewMode() || !isActiveTopBar}" ng-click="revert()" class="sprite-new revert-btn" data-tests-id="revert"
- data-ng-show="showFullIcons()" sdc-smart-tooltip="">Revert</span>
<span class="delimiter"></span>
- <span class="sprite-new x-btn" data-ng-click="goToBreadcrumbHome()" sdc-smart-tooltip="">Close</span>
+ <span class="sprite-new x-btn" data-ng-click="goToBreadcrumbHome()" data-ng-class="{'disabled' : unsavedChanges}" sdc-smart-tooltip="">Close</span>
</div>
</div>
<div class="w-sdc-main-container-body-content-wrapper">
- <div class="tab-title" data-ng-if="!isComposition && !isDeployment && !isPlugins">
- {{getTabTitle()}}
+ <div class="w-sdc-main-container-body-content-header">
+ <div class="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>
</div>
</div>
- <top-nav [hide-search]="true" [menu-model]="breadcrumbsModel" [version]="version"></top-nav>
+ <top-nav [hide-search]="true" [menu-model]="breadcrumbsModel" [version]="version" [unsaved-changes]="unsavedChanges" [unsaved-changes-callback]="unsavedChangesCallback"></top-nav>
</div>
diff --git a/catalog-ui/src/app/view-models/workspace/workspace.less b/catalog-ui/src/app/view-models/workspace/workspace.less
index 0cc30ece20..b9956c655b 100644
--- a/catalog-ui/src/app/view-models/workspace/workspace.less
+++ b/catalog-ui/src/app/view-models/workspace/workspace.less
@@ -128,7 +128,7 @@
.delimiter {
height: 32px;
width: 1px;
- background-color: #959595;
+ background-color: @main_color_o;
display: inline-block;
vertical-align: middle;
margin-right: 20px;
@@ -136,6 +136,16 @@
}
+ .archive-state-label {
+ padding: 7px 0 0 10px;
+ margin: 2px 0 7px 10px;
+ border-left: 1px solid @main_color_o;
+ line-height: 15px;
+ font-family: @font-opensans-bold;
+ color: @main_color_m;
+ font-size:12px;
+ }
+
.lifecycle-state {
padding: 7px 0 0 10px;
margin: 2px 0 7px 10px;
@@ -191,7 +201,26 @@
}
.w-sdc-main-container-body-content-wrapper {
overflow: auto;
- height: calc(~'100% - @{action_nav_height}')
+ height: calc(~'100% - @{action_nav_height}');
+ .w-sdc-main-container-body-content-header {
+ display: flex;
+ .tab-title {
+ flex-grow: 1;
+ }
+ .w-sdc-main-container-body-content-action-buttons {
+ margin:72px 100px 0 0;
+ > * {
+ display: inline-block;
+ vertical-align: middle;
+ }
+ .revert-btn {
+ text-indent: 100%;
+ }
+ .save-btn {
+ text-indent: 100%;
+ }
+ }
+ }
}
}
}