diff options
Diffstat (limited to 'catalog-ui/src/app/view-models/forms/env-parameters-form')
4 files changed, 427 insertions, 0 deletions
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 new file mode 100644 index 0000000000..ae13844532 --- /dev/null +++ b/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.html @@ -0,0 +1,92 @@ +<sdc-modal modal="envParametersModal" type="classic" class="sdc-env-form-container" buttons="buttons" header="{{artifactResource.artifactDisplayName}}" show-close-button="true"> + <div class="w-sdc-env-form-container"> + <div class="w-sdc-env-search pull-left"> + <input type="text" class="w-sdc-env-search-input" placeholder="Search" data-ng-model="searchText" data-tests-id="search-env-param-name"/> + <div class="search-icon-container"> + <span class="w-sdc-search-icon env-search-icon magnification-white"></span> + </div> + </div> + <div class="table-container-flex"> + <div class="table"> + <div class="head flex-container"> + <div class="table-header head-row flex-item" ng-repeat="header in tableHeadersList track by $index"> + <info-tooltip class="header-info" data-ng-if="header.info" class="info-button" info-message-translate="{{header.info}}" direction="left"></info-tooltip> + {{header.title}} + </div> + </div> + <div class="body"> + <perfect-scrollbar suppress-scroll-x="true" scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container"> + <ng-form name="forms.editForm" class="w-sdc-form"> + <div data-ng-repeat="parameter in heatParameters| filter:{filterTerm:searchText} track by $index " + class="flex-container data-row" + data-ng-init="parameter.filterTerm=parameter.name + ' ' + parameter.currentValue + ' ' + parameter.defaultValue + ' ' +parameter.description"> + <div class="table-col-general flex-item" data-tests-id="heatParameterName_{{parameter.name}}"> + {{parameter.name}} + <span class="sprite-new show-desc hand" + uib-popover-template="templatePopover" + popover-class="parameter-description-popover top" + popover-title="Parameter Description" + popover-placement="top-left" + popover-is-open="selectedParameter.name == parameter.name" + popover-trigger="'none'" + popover-append-to-body="true" + data-ng-click="openDescPopover(parameter)"></span> + </div> + + <div class="table-col-general flex-item text"> + <span data-tests-id="default-value-of-{{parameter.name}}" tooltips tooltip-content="{{parameter.defaultValue}}">{{parameter.defaultValue}}</span> + </div> + + <!--<div class="table-col-general flex-item">--> + <!--<input type="text" value="{{parameter.currentValue}}"/>--> + <!--</div>--> + + <div class="table-col-general flex-item left-column-container"> + + <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm[parameter.name].$dirty && forms.editForm[parameter.name].$invalid), required: (parameter.defaultValue)}"> + <span class="required-symbol">*</span> + <div class="input-parameter"> + <input class="i-sdc-form-input" data-ng-class="{error: (forms.editForm[parameter.name].$invalid)}" + data-ng-model-options="{ debounce: 200 }" + data-ng-model="parameter.currentValue" + value="{{parameter.currentValue}}" + type="text" + name="{{parameter.name}}" + data-ng-pattern="getValidationPattern(parameter.type, 'heat')" + data-ng-required="parameter.defaultValue" + data-ng-change="'json'==parameter.type && forms.editForm[parameter.name].$setValidity('pattern', validateJson(parameter.currentValue))" + data-ng-blur="(forms.editForm[parameter.name].$error.required && (parameter.currentValue=parameter.defaultValue))" + data-tests-id="value-field-of-{{parameter.name}}"/> + + <div class="action-button"> + <div class="sprite-new revert-param" data-ng-if="parameter.defaultValue" data-ng-click="parameter.currentValue = parameter.defaultValue" + data-tests-id="revert-{{parameter.name}}"> + </div> + <div class="sprite-new delete-param" + data-ng-if="!parameter.defaultValue" + data-ng-disabled="!parameter.currentValue" + data-ng-class="{disabled:!parameter.currentValue}" + data-ng-click="parameter.currentValue = ''" + data-tests-id="delete-{{parameter.name}}"> + </div> + </div> + </div> + <div class="input-error" data-ng-show="forms.editForm[parameter.name].$invalid"> + <span ng-show="forms.editForm[parameter.name].$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Value'}"></span> + <span ng-show="forms.editForm[parameter.name].$error.pattern && parameter.type==='string'" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> + <span ng-show="forms.editForm[parameter.name].$error.pattern && !(parameter.type==='string')" translate="VALIDATION_ERROR_TYPE" translate-values="{'type': '{{parameter.type}}'}"></span> + </div> + </div> + + </div> + + </div> + </ng-form> + + </perfect-scrollbar> + </div> + </div> + </div> + </div> + </div> +</sdc-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 new file mode 100644 index 0000000000..a25a2c5f62 --- /dev/null +++ b/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.less @@ -0,0 +1,178 @@ + +.sdc-env-form-container{ + .w-sdc-modal-body{ + padding: 20px 10px 2px 10px; + } + .w-sdc-modal-body-content{ + .b_6; + display: block; + } + + .env-file-generation-label{ + .p_9; + .bold; + margin-bottom: 20px; + } +} + +.w-sdc-env-form-container { + height: 650px; + + .w-sdc-env-search { + padding: 10px 20px 20px 0; + white-space: nowrap; + position: relative; + width: 60%; + height: 64px; + + .env-search-icon { + top: 9px; + right: 11px; + } + + .magnification-white { + .sprite-new; + .search-white-icon; + .hand; + } + + .search-icon-container { + width: 35px; + height: 30px; + background-color: @main_color_a; + white-space: nowrap; + float: right; + position: relative; + bottom: 31px; + right: 1px; + border-radius: 0px 4px 4px 0px; + .hand + } + + .w-sdc-env-search-input { + border: 1px solid @color_e; + .border-radius(4px); + height: 32px; + margin: 0; + padding: 0px 28px 3px 10px; + vertical-align: 4px; + width: 100%; + outline: none; + font-style: italic; + } + } + + .table-container-flex { + height: 570px; + + .table { + height: 100%; + .flex-item:nth-child(1) { + flex-grow: 20; + .show-desc{ + float: right; + top: 10px; + position: relative; + } + } + + .flex-item:nth-child(2) { + flex-grow: 10; + } + + .flex-item:nth-child(3) { + flex-grow: 10; + } + .scrollbar-container{ + max-height: 527px; + } + .left-column-container{ + .required-symbol { + .m_14_m; + color: #f33; + display: none; + position: relative; + left: -4px; + top: 3px; + } + + .i-sdc-form-item{ + border-right: none; + margin: 0px; + + .input-parameter{ + border: none; + height: 30px; + width: 254px; + float: right; + input{ + .m_13_m; + width: 100%; + display: inline-flex; + padding-right: 33px; + } + .action-button{ + border-left: solid 1px @main_color_o; + position: relative; + height: 20px; + width: 25px; + top: -25px; + left: 228px; + padding-left: 6px; + background-color: @main_color_p; + div:not(.disable){ + .hand; + } + } + } + + &.required{ + .required-symbol { + display: inline-flex; + } + .input-parameter { + width: 250px; + } + .action-button{ + left: 224px; + } + } + } + + + + } + } + + .text{ + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + } + } + + + .parameter-description{ + background-color: @func_color_r; + border-left: 4px solid @main_color_a; + padding: 10px 30px; + } +} + +.header-info{ + float: right; +} + +.parameter-description-popover{ + z-index: 1100; + min-width: 210px; + .arrow{ + left: 20px !important; + border-width: 7px; + bottom: -8px !important; + } + .popover-content{ + .f-type._13_m;; + } +} diff --git a/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.ts b/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.ts new file mode 100644 index 0000000000..476af4ada9 --- /dev/null +++ b/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.ts @@ -0,0 +1,153 @@ +'use strict'; +import {ValidationUtils} from "app/utils"; +import {ArtifactModel, HeatParameterModel, Component} from "app/models"; + +export interface IEnvParametersFormViewModelScope extends ng.IScope { + isLoading:boolean; + type:string; + heatParameters:Array<HeatParameterModel>; + forms:any; + artifactResource:ArtifactModel; + buttons:Array<any>; + envParametersModal:ng.ui.bootstrap.IModalServiceInstance; + tableHeadersList:Array<any>; + selectedParameter:HeatParameterModel; + templatePopover:string; + + getValidationPattern(type:string):RegExp; + isInstance():boolean; + validateJson(json:string):boolean; + close():void; + save():void; + openDescPopover(selectedParam:HeatParameterModel):void; + closeDescriptionPopover():void; +} + +export class EnvParametersFormViewModel { + + static '$inject' = [ + '$scope', + '$templateCache', + '$state', + '$uibModalInstance', + 'artifact', + 'ValidationUtils', + 'component' + ]; + + constructor(private $scope:IEnvParametersFormViewModelScope, + private $templateCache:ng.ITemplateCacheService, + private $state:any, + private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance, + private artifact:ArtifactModel, + private ValidationUtils:ValidationUtils, + private component:Component) { + + + this.initScope(); + } + + private updateInstanceHeat = ():void => { + let success = (responseArtifact:ArtifactModel):void => { + this.$scope.isLoading = false; + this.$uibModalInstance.close(); + }; + + let error = ():void => { + this.$scope.isLoading = false; + console.info('Failed to load save artifact'); + }; + + this.component.addOrUpdateInstanceArtifact(this.$scope.artifactResource).then(success, error); + }; + + private initScope = ():void => { + this.$scope.forms = {}; + this.$scope.envParametersModal = this.$uibModalInstance; + this.$scope.artifactResource = this.artifact; + this.$scope.heatParameters = angular.copy(this.artifact.heatParameters); + + this.$scope.tableHeadersList = [ + {title: "Parameter", property: "name"}, + {title: "Default Value", property: "defaultValue", info: "DEFAULT_VALUE_INFO"}, + {title: "Current Value", property: "currentValue", info: "CURRENT_VALUE_INFO"} + ]; + + this.$templateCache.put("env-parametr-description-popover.html", require('app/view-models/forms/env-parameters-form/env-parametr-description-popover.html')); + this.$scope.templatePopover = "env-parametr-description-popover.html"; + + this.$scope.getValidationPattern = (validationType:string, parameterType?:string):RegExp => { + return this.ValidationUtils.getValidationPattern(validationType, parameterType); + }; + + this.$scope.validateJson = (json:string):boolean => { + if (!json) { + return true; + } + return this.ValidationUtils.validateJson(json); + }; + + this.$scope.isInstance = ():boolean => { + return !!this.component.selectedInstance; + }; + + this.$scope.save = ():void => { + this.$scope.buttons[0].disabled = true;//prevent double click (DE246266) + this.$scope.isLoading = true; + this.artifact.heatParameters = this.$scope.heatParameters; + this.artifact.heatParameters.forEach((parameter:any):void => { + /* if ("" === parameter.currentValue) { + parameter.currentValue = null; + }else */ + if (!parameter.currentValue && parameter.defaultValue) { + parameter.currentValue = parameter.defaultValue; + } + }); + + if (this.$scope.isInstance()) { + this.updateInstanceHeat(); + return; + } + + let success = (responseArtifact:ArtifactModel):void => { + this.$scope.isLoading = false; + this.$uibModalInstance.close(); + + }; + + let error = ():void => { + this.$scope.isLoading = false; + console.info('Failed to load save artifact'); + }; + + this.component.addOrUpdateArtifact(this.$scope.artifactResource).then(success, error); + }; + + this.$scope.close = ():void => { + //this.artifact.heatParameters.forEach((parameter:any):void => { + // if (!parameter.currentValue && parameter.defaultValue) { + // parameter.currentValue = parameter.defaultValue; + // } + //}); + this.$uibModalInstance.dismiss(); + }; + + this.$scope.openDescPopover = (selectedParam:HeatParameterModel):void => { + this.$scope.selectedParameter = selectedParam; + }; + + this.$scope.closeDescriptionPopover = ():void => { + this.$scope.selectedParameter = null; + }; + + this.$scope.buttons = [ + {'name': 'Save', 'css': 'blue', 'callback': this.$scope.save}, + {'name': 'Cancel', 'css': 'grey', 'callback': this.$scope.close} + ]; + + this.$scope.$watch("forms.editForm.$invalid", (newVal, oldVal) => { + this.$scope.buttons[0].disabled = this.$scope.forms.editForm.$invalid; + }); + + }; +} diff --git a/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parametr-description-popover.html b/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parametr-description-popover.html new file mode 100644 index 0000000000..ed127c6bfb --- /dev/null +++ b/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parametr-description-popover.html @@ -0,0 +1,4 @@ +<div> + <span data-tests-id='popover-x-button' data-ng-click='closeDescriptionPopover()' class='tlv-sprite tlv-x-btn close-popover-btn'></span> + {{selectedParameter.description}} +</div> |