aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/view-models
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/app/view-models')
-rw-r--r--catalog-ui/src/app/view-models/shared/notification-custom-template.html14
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts6
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html4
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/composition/composition.less65
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts18
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html2
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/details/details-view.html4
-rw-r--r--catalog-ui/src/app/view-models/workspace/workspace.less3
8 files changed, 107 insertions, 9 deletions
diff --git a/catalog-ui/src/app/view-models/shared/notification-custom-template.html b/catalog-ui/src/app/view-models/shared/notification-custom-template.html
new file mode 100644
index 0000000000..d8fdf135b9
--- /dev/null
+++ b/catalog-ui/src/app/view-models/shared/notification-custom-template.html
@@ -0,0 +1,14 @@
+<div class="ui-notification">
+ <div class="notification-container">
+ <div class="icon-container">
+ <div class="icon-circle">
+ <div class="icon sprite-new">
+ </div>
+ </div>
+ </div>
+ <div class="msg-content">
+ <h3 ng-show="title" ng-bind-html="title"></h3>
+ <div class="message" ng-bind-html="message"></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 fbd32cc967..0e5a5fcd6c 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
@@ -30,7 +30,8 @@ import {ResourceType} from "../../../../utils/constants";
export interface ICompositionViewModelScope extends IWorkspaceViewModelScope {
currentComponent:Component;
- selectedComponent:Component;
+ selectedComponent: Component;
+ componentInstanceNames: Array<string>;
isLoading:boolean;
graphApi:any;
sharingService:SharingService;
@@ -130,7 +131,6 @@ export class CompositionViewModel {
private openUpdateComponentInstanceNameModal = ():void => {
this.ModalsHandler.openUpdateComponentInstanceNameModal(this.$scope.currentComponent).then(()=> {
this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_COMPONENT_INSTANCE_NAME_CHANGED, this.$scope.currentComponent.selectedInstance);
-
});
};
@@ -225,7 +225,7 @@ export class CompositionViewModel {
this.$scope.openUpdateModal = ():void => {
this.openUpdateComponentInstanceNameModal();
};
-
+
this.$scope.deleteSelectedComponentInstance = ():void => {
let state = "deleteInstance";
let onOk = ():void => {
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 cef942e853..e05574e8c8 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
@@ -6,7 +6,7 @@
is-loading="isLoading"></palette>
<composition-graph component="currentComponent" data-tests-id="canvas"
- is-view-only="isViewOnly"></composition-graph>
+ is-view-only="isViewOnly" with-sidebar="displayDesignerRightSidebar"></composition-graph>
</div>
<div class="w-sdc-designer-sidebar-toggle" data-ng-class="{'active': displayDesignerRightSidebar}"
@@ -21,7 +21,7 @@
<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, 'smaller-icon': selectedComponent.icon==='vl' || selectedComponent.icon==='cp'}"
+ data-ng-class="{'non-certified':'CERTIFIED' !== selectedComponent.lifecycleState}"
tooltips tooltip-side="top" tooltip-content="Not certified"></div>
</div>
</div>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition.less b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition.less
index 7a775bdb11..262dfd9be8 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
@@ -781,6 +781,71 @@
line-height: 18px;
}
+ //Canvas search menu
+ .w-sdc-search-menu {
+ position:absolute;
+ right: 18px;
+ top:53px;
+ transition: right 0.2s;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ margin-right:10px;
+
+ &.with-sidebar {
+ right:320px;
+ }
+
+ .search-with-autocomplete-container.composition-search {
+ margin-top: 12px;
+
+ .search-bar-input {
+ width: 250px;
+ padding:2px 50px 2px 10px;
+ transition:all 0.4s;
+ }
+ .clear-search-x {
+ top: 17px
+ }
+
+ &:not(:hover):not(.autocomplete-visible):not(.active){
+ border-radius: 0;
+ box-shadow:none;
+
+ .search-bar-input:not(:focus){
+ width: 0px;
+ padding:0;
+ border:none;
+ }
+ .clear-search-x {
+ display:none;
+ }
+ .search-bar-input:not(:focus) ~ .search-bar-button {
+ border-radius: 2px;
+ border:solid 1px #fff;
+ }
+ }
+ }
+
+ .zoom-icons {
+ border:solid 1px #fff;
+ border-radius: 2px;
+ box-shadow: 0px 2px 3.88px 0.12px rgba(0, 0, 0, 0.29);
+ background-color: rgba(234, 234, 234, 0.88);
+ background-repeat: no-repeat;
+ margin-top: 10px;
+
+ &:hover {
+ cursor:pointer;
+ }
+
+ &:active {
+ border:none;
+ background-color: rgba(31, 171, 223, 0.88);
+ }
+ }
+ }
+
// ---------------------------------------------------------------------------------------------------
// Canvas inline menu
// ---------------------------------------------------------------------------------------------------
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts
index 83e4653954..c4c63fae06 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts
@@ -33,13 +33,14 @@ import {ICompositionViewModelScope} from "../../composition-view-model";
import {ArtifactsUtils, ModalsHandler, ArtifactGroupType} from "app/utils";
import {GRAPH_EVENTS} from "app/utils/constants";
import {EventListenerService} from "app/services/event-listener-service";
+import {Dictionary} from "../../../../../../utils/dictionary/dictionary";
export interface IArtifactsViewModelScope extends ICompositionViewModelScope {
artifacts:Array<ArtifactModel>;
artifactType:string;
downloadFile:IFileDownload;
isLoading:boolean;
-
+ displayDeleteButtonMap:Dictionary<string, boolean>;
getTitle():string;
addOrUpdate(artifact:ArtifactModel):void;
delete(artifact:ArtifactModel):void;
@@ -125,6 +126,10 @@ export class ResourceArtifactsViewModel {
}
}
this.$scope.artifacts = artifacts;
+ this.$scope.displayDeleteButtonMap = new Dictionary<string, boolean>();
+ _.forEach(this.$scope.artifacts, (artifact:ArtifactModel)=>{
+ this.$scope.displayDeleteButtonMap[artifact.artifactLabel] = this.displayDeleteButton(artifact);
+ });
this.$scope.isLoading = false;
};
@@ -229,6 +234,17 @@ export class ResourceArtifactsViewModel {
});
};
+ private displayDeleteButton = (artifact:ArtifactModel):boolean => {
+ if(!this.$scope.isViewMode() && artifact.esId){
+ if(this.$scope.isComponentInstanceSelected()){//is artifact of instance
+ return !this.$scope.selectedComponent.deploymentArtifacts || !this.$scope.selectedComponent.deploymentArtifacts[artifact.artifactLabel];//if the artifact is not from instance parent
+ }else{//is artifact of main component
+ return (!artifact.isHEAT() && !artifact.isThirdParty() && !this.$scope.isLicenseArtifact(artifact));
+ }
+ }
+ return false;
+};
+
private initScope = ():void => {
this.$scope.isLoading = false;
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html
index 8221c67eca..dfbd639eb4 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html
@@ -36,7 +36,7 @@
<span class="i-sdc-designer-sidebar-section-content-item-artifact-details-desc-label" data-ng-show="artifact.description">Description:</span>{{artifact.description}}
</div>
</div>
- <button ng-if="!isViewMode() && artifact.esId && !isComponentInstanceSelected() && !artifact.isHEAT() && !artifact.isThirdParty() && !isLicenseArtifact(artifact)" class="i-sdc-designer-sidebar-section-content-item-button delete sprite e-sdc-small-icon-delete"
+ <button ng-if="displayDeleteButtonMap[artifact.artifactLabel]" class="i-sdc-designer-sidebar-section-content-item-button delete sprite e-sdc-small-icon-delete"
data-tests-id="delete_{{artifact.artifactDisplayName}}" data-ng-click="delete(artifact)" type="button"></button>
<button ng-if="!isViewMode() && artifact.isHEAT() && isComponentInstanceSelected() && artifact.heatParameters.length"
class="i-sdc-designer-sidebar-section-content-item-button attach sprite e-sdc-small-icon-pad"
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 8607d65964..0418515789 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
@@ -23,9 +23,9 @@
<span class="i-sdc-designer-sidebar-section-content-item-label">Version:</span>
<span class="i-sdc-designer-sidebar-section-content-item-value"
- data-ng-if="!isComponentInstanceSelected() || selectedComponent.isVl()" data-tests-id="rightTab_version" data-ng-bind="selectedComponent.version"></span>
+ data-ng-if="!isComponentInstanceSelected()" data-tests-id="rightTab_version" data-ng-bind="selectedComponent.version"></span>
- <ng-form name="editForm" data-ng-if="isComponentInstanceSelected() && !selectedComponent.isVl()">
+ <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"
class="i-sdc-designer-sidebar-section-content-item-value i-sdc-form-select"
data-ng-class="{'minor': (editResourceVersion.changeVersion)%1}"
diff --git a/catalog-ui/src/app/view-models/workspace/workspace.less b/catalog-ui/src/app/view-models/workspace/workspace.less
index b7331b5f93..d0799f4bac 100644
--- a/catalog-ui/src/app/view-models/workspace/workspace.less
+++ b/catalog-ui/src/app/view-models/workspace/workspace.less
@@ -170,6 +170,9 @@
line-height: 110px;
.f-type ._28;
}
+ &.composition .w-sdc-main-container-body-content {
+ height: calc(~'100% - @{action_nav_height}'); //composition is the only tab without a tab title. need to exclude from calculation.
+ }
.w-sdc-main-container-body-content {
height:calc(~'100% - @{action_nav_height} - @{tab_title}');
align-items: center;