Initial OpenECOMP SDC commit

Change-Id: I0924d5a6ae9cdc161ae17c68d3689a30d10f407b
Signed-off-by: Michael Lando <ml636r@att.com>

3 files changed, 496 insertions, 0 deletions

diff --git a/catalog-ui/app/scripts/view-models/wizard/artifact-form-step/artifact-form-step-view-model.ts b/catalog-ui/app/scripts/view-models/wizard/artifact-form-step/artifact-form-step-view-model.ts
new file mode 100644
index 0000000000..459729c179
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/wizard/artifact-form-step/artifact-form-step-view-model.ts
@@ -0,0 +1,304 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../../references"/>
+module Sdc.ViewModels.Wizard {
+    'use strict';
+    import Resource = Sdc.Models.Components.Resource;
+
+    export interface IEditArtifactStepModel {
+        artifactResource: Models.ArtifactModel;
+        artifactTypes: Array<string>;
+        artifactsFormList: any;
+        artifactFile:any;
+    }
+
+    export interface IArtifactResourceFormStepViewModelScope extends ng.IScope {
+        editForm:ng.IFormController;
+        forms:any;
+        footerButtons: Array<any>;
+        isNew: boolean;
+        isPlaceHolderArtifact:boolean;
+        isLoading: boolean;
+        validationPattern: RegExp;
+        urlValidationPattern: RegExp;
+        labelValidationPattern: RegExp;
+        integerValidationPattern: RegExp;
+        commentValidationPattern: RegExp;
+        artifactType: string;
+        artifactGroupType:string;
+        editArtifactResourceModel: IEditArtifactStepModel;
+        defaultHeatTimeout: number;
+        validExtensions: any;
+        originalArtifactName: string;
+        modalInstanceArtifact:ng.ui.bootstrap.IModalServiceInstance;
+        selectedArtifact:string;
+
+        fileExtensions():string;
+        save(): void;
+        close(): void;
+        changeArtifact(selectedArtifact:string):void;
+        getOptions(): Array<string>;
+        removeInputLabel(): void;
+        fileUploadRequired():string;
+        isDeploymentHeat():boolean;
+        setDefaultTimeout():void;
+        getFormTitle():string;
+    }
+
+    export class ArtifactResourceFormStepViewModel {
+
+        static '$inject' = [
+            '$scope',
+            '$modalInstance',
+            'artifact',
+            'component',
+            'Sdc.Services.CacheService',
+            'ValidationPattern',
+            'UrlValidationPattern',
+            'LabelValidationPattern',
+            'IntegerValidationPattern',
+            'CommentValidationPattern',
+            'ValidationUtils',
+            'ArtifactsUtils',
+            '$state',
+            '$modal',
+            '$templateCache'
+        ];
+
+        private formState:Utils.Constants.FormState;
+        private entityId:string;
+
+        constructor(private $scope:IArtifactResourceFormStepViewModelScope,
+                    private $modalInstance:ng.ui.bootstrap.IModalServiceInstance,
+                    private artifact:Models.ArtifactModel,
+                    private component:Models.Components.Component,
+                    private cacheService:Services.CacheService,
+                    private ValidationPattern:RegExp,
+                    private UrlValidationPattern:RegExp,
+                    private LabelValidationPattern:RegExp,
+                    private IntegerValidationPattern:RegExp,
+                    private CommentValidationPattern:RegExp,
+                    private ValidationUtils:Sdc.Utils.ValidationUtils,
+                    private ArtifactsUtils:Sdc.Utils.ArtifactsUtils,
+                    private $state:any,
+                    private $modal:ng.ui.bootstrap.IModalService,
+                    private $templateCache:ng.ITemplateCacheService) {
+
+
+            this.entityId = this.component.uniqueId;
+            this.formState = angular.isDefined(artifact.artifactLabel) ? Utils.Constants.FormState.UPDATE : Utils.Constants.FormState.CREATE;
+
+            this.initScope();
+            this.initEditArtifactResourceModel();
+            this.initComponent();
+            this.initArtifactTypes();
+        }
+
+        private initEditArtifactResourceModel = ():void => {
+            this.$scope.editArtifactResourceModel = {
+                artifactResource: null,
+                artifactTypes: null,
+                artifactsFormList: {},
+                artifactFile: {}
+            }
+        };
+
+        private initComponent = ():void => {
+            this.$scope.editArtifactResourceModel.artifactResource = this.artifact;
+            this.$scope.originalArtifactName = this.artifact.artifactName;
+            let artifacts:any = Utils.Constants.ArtifactGroupType.INFORMATION === this.artifact.artifactGroupType?
+                this.component.artifacts : this.component.deploymentArtifacts;
+            this.$scope.editArtifactResourceModel.artifactsFormList = _.pick(artifacts, (artifact:Models.ArtifactModel)=> {
+                return artifact.artifactLabel && !artifact.esId;
+            });
+            this.$scope.editArtifactResourceModel.artifactFile.filename= this.artifact.artifactName?this.artifact.artifactName:'';
+
+            if(this.artifact.artifactLabel){//this is edit mode
+                this.$scope.editArtifactResourceModel.artifactsFormList[this.artifact.artifactLabel]= this.artifact;
+                this.$scope.selectedArtifact = this.artifact.artifactDisplayName;
+            }
+        };
+
+        private initArtifactTypes = ():void => {
+            let artifactTypes:any = this.cacheService.get('UIConfiguration');
+
+            if (Utils.Constants.ArtifactGroupType.INFORMATION === this.artifact.artifactGroupType) {
+                this.$scope.editArtifactResourceModel.artifactTypes = artifactTypes.artifacts.other.map((element:any)=> {
+                    return element.name;
+                });
+                _.remove(this.$scope.editArtifactResourceModel.artifactTypes, (item:string)=> {
+                    return _.has(Utils.Constants.ArtifactType.THIRD_PARTY_RESERVED_TYPES, item) ||
+                           _.has(Utils.Constants.ArtifactType.TOSCA, item);
+                })
+            }else if(Utils.Constants.ArtifactGroupType.DEPLOYMENT === this.artifact.artifactGroupType) {
+
+                this.$scope.validExtensions = artifactTypes.artifacts.deployment.resourceDeploymentArtifacts;
+                if(this.$scope.validExtensions) {
+                    this.$scope.editArtifactResourceModel.artifactTypes = Object.keys(this.$scope.validExtensions);
+                }
+                this.$scope.defaultHeatTimeout = artifactTypes.defaultHeatTimeout;
+
+                if(!this.$scope.isPlaceHolderArtifact) {
+                    _.remove(this.$scope.editArtifactResourceModel.artifactTypes, (item:string)=> {
+                        return Utils.Constants.ArtifactType.HEAT == item.substring(0,4) ||
+                            _.has(Utils.Constants.ArtifactType.THIRD_PARTY_RESERVED_TYPES, item);
+                    })
+                }
+
+                if(this.component.isResource() && (<Resource>this.component).isCsarComponent()) {
+                    _.remove(this.$scope.editArtifactResourceModel.artifactTypes, (item:string) => {
+                        return this.ArtifactsUtils.isLicenseType(item);
+                    })
+                }
+            }
+        };
+
+        private initScope = ():void => {
+
+            this.$scope.modalInstanceArtifact = this.$modalInstance;
+            this.$scope.validationPattern = this.ValidationPattern;
+            this.$scope.urlValidationPattern = this.UrlValidationPattern;
+            this.$scope.labelValidationPattern = this.LabelValidationPattern;
+            this.$scope.integerValidationPattern = this.IntegerValidationPattern;
+            this.$scope.commentValidationPattern = this.CommentValidationPattern;
+            this.$scope.isLoading = false;
+            this.$scope.isPlaceHolderArtifact = true;
+            this.$scope.isNew = (this.formState === Utils.Constants.FormState.CREATE);
+            this.$scope.artifactGroupType = this.artifact.artifactGroupType;
+            this.$scope.selectedArtifact = '?';
+
+            this.$scope.fileExtensions = ():string => {
+                let type:string = this.$scope.editArtifactResourceModel.artifactResource.artifactType;
+                return  type && this.$scope.validExtensions && this.$scope.validExtensions[type].acceptedTypes ?
+                    this.$scope.validExtensions[type].acceptedTypes.join(',') : "";
+            };
+
+            this.$scope.removeInputLabel = ():void => {
+                this.$scope.isPlaceHolderArtifact = true;
+            };
+
+            this.$scope.fileUploadRequired = ():string => {
+                if (this.$scope.isNew===false){
+                    return 'false'; // This is edit mode
+                } else {
+                    return 'true';
+                }
+            };
+
+            this.$scope.isDeploymentHeat = ():boolean =>{
+                return Utils.Constants.ArtifactGroupType.DEPLOYMENT === this.artifact.artifactGroupType
+                    && this.$scope.editArtifactResourceModel.artifactResource
+                    && this.$scope.editArtifactResourceModel.artifactResource.artifactType
+                    && Utils.Constants.ArtifactType.HEAT === this.$scope.editArtifactResourceModel.artifactResource.artifactType.substring(0,4);
+            };
+
+            this.$scope.getFormTitle =(): string =>{
+                let title:string = this.artifact.esId? 'Update':'Add';
+                if (Utils.Constants.ArtifactGroupType.DEPLOYMENT === this.artifact.artifactGroupType) {
+                        title += ' Deployment';
+                }
+                title += ' Artifact';
+                return title;
+            };
+
+            this.$scope.setDefaultTimeout = ():void => {
+                if(!this.$scope.editArtifactResourceModel.artifactResource.timeout) {
+                    this.$scope.editArtifactResourceModel.artifactResource.timeout = this.$scope.defaultHeatTimeout;
+                }
+            };
+
+            this.$scope.changeArtifact = (selectedArtifact:string):void => {
+                let tempArtifact:Models.ArtifactModel = this.$scope.editArtifactResourceModel.artifactResource;
+                this.$scope.editArtifactResourceModel.artifactResource = null;
+
+                if (selectedArtifact && selectedArtifact != '' && selectedArtifact != '?') {
+                    let artifactResource = <Models.ArtifactModel>_.find(this.$scope.editArtifactResourceModel.artifactsFormList,{'artifactDisplayName':selectedArtifact});
+                    this.$scope.editArtifactResourceModel.artifactResource = new Sdc.Models.ArtifactModel(artifactResource);
+                    this.$scope.originalArtifactName = this.$scope.editArtifactResourceModel.artifactResource.artifactName;
+                    this.$scope.isPlaceHolderArtifact = true;
+                    if(this.$scope.isDeploymentHeat()){
+                        this.$scope.setDefaultTimeout();
+                    }
+                } else if (selectedArtifact === "") {
+                    //this.$scope.editArtifactResourceModel.artifactFile = {};
+                    this.$scope.editArtifactResourceModel.artifactResource = <Models.ArtifactModel>{};
+                    this.$scope.editArtifactResourceModel.artifactResource.artifactGroupType = this.$scope.artifactGroupType;
+                    this.$scope.isPlaceHolderArtifact = false;
+                }
+
+                if (_.size(this.$scope.editArtifactResourceModel.artifactFile) && this.$scope.editArtifactResourceModel.artifactResource) {
+                    this.$scope.editArtifactResourceModel.artifactResource.artifactName = this.$scope.editArtifactResourceModel.artifactFile.filename;
+                }
+                if(tempArtifact && tempArtifact.description != ''){
+                    this.$scope.editArtifactResourceModel.artifactResource.description = tempArtifact.description;
+                }
+
+                this.initArtifactTypes();
+                this.$scope.isNew = true;
+
+            };
+
+
+            this.$scope.save = ():void => {
+                this.$scope.isLoading = true;
+                this.$scope.editArtifactResourceModel.artifactResource.description =
+                this.ValidationUtils.stripAndSanitize(this.$scope.editArtifactResourceModel.artifactResource.description);
+
+                if (this.$scope.editArtifactResourceModel.artifactFile) {
+                    this.$scope.editArtifactResourceModel.artifactResource.payloadData = this.$scope.editArtifactResourceModel.artifactFile.base64;
+                    this.$scope.editArtifactResourceModel.artifactResource.artifactName = this.$scope.editArtifactResourceModel.artifactFile.filename;
+                }
+
+                let onFailed = (response) => {
+                    this.$scope.isLoading = false;
+                    console.info('onFaild', response);
+                    this.$scope.editArtifactResourceModel.artifactResource.esId = undefined;
+                };
+
+                let onSuccess = () => {
+                    this.$scope.isLoading = false;
+                    this.$scope.originalArtifactName = "";
+                    this.$modalInstance.close();
+
+                };
+
+                this.component.addOrUpdateArtifact(this.$scope.editArtifactResourceModel.artifactResource).then(onSuccess, onFailed);
+            };
+
+
+            this.$scope.close = ():void => {
+                this.$modalInstance.dismiss();
+            };
+
+            //new form layout for import asset
+            this.$scope.forms = {};
+            this.$scope.footerButtons = [
+                {'name': this.artifact.esId ? 'Update' : 'Add', 'css': 'blue', 'callback': this.$scope.save},
+                {'name': 'Cancel', 'css': 'grey', 'callback': this.$scope.close}
+            ];
+
+            this.$scope.$watch("forms.editForm.$invalid", (newVal, oldVal) => {
+                this.$scope.footerButtons[0].disabled = this.$scope.forms.editForm.$invalid;
+            });
+
+        }
+
+    }
+}
diff --git a/catalog-ui/app/scripts/view-models/wizard/artifact-form-step/artifact-form-step-view.html b/catalog-ui/app/scripts/view-models/wizard/artifact-form-step/artifact-form-step-view.html
new file mode 100644
index 0000000000..2643b99c20
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/wizard/artifact-form-step/artifact-form-step-view.html
@@ -0,0 +1,147 @@
+<sdc-modal modal="modalInstanceArtifact" type="classic" class="sdc-add-artifact" buttons="footerButtons" header="{{getFormTitle()}}" show-close-button="true">
+
+    <loader data-display="isLoading"></loader>
+
+    <form novalidate class="w-sdc-form two-columns" name="forms.editForm">
+
+        <!--------------------- ARTIFACT FILE -------------------->
+        <div class="i-sdc-form-item">
+            <label class="required">Upload File</label>
+            <file-upload id="fileUploadElement"
+                         form-element="forms.editForm"
+                         element-required="{{fileUploadRequired()}}"
+                         element-name="myArtifactFile"
+                         file-model="editArtifactResourceModel.artifactFile"
+                         extensions="{{fileExtensions()}}"
+                         data-ng-class="{'error': forms.editForm.myArtifactFile.$dirty && forms.editForm.myArtifactFile.$invalid}"></file-upload>
+
+            <div class="input-error-file-upload" data-ng-show="forms.editForm.myArtifactFile.$dirty && forms.editForm.myArtifactFile.$invalid">
+                <span ng-show="forms.editForm.myArtifactFile.$error.required && !forms.editForm.myArtifactFile.$error.emptyFile" translate="ADD_ARTIFACT_ERROR_FILE_REQUIRED"></span>
+                <span ng-show="forms.editForm.myArtifactFile.$error.maxsize" translate="VALIDATION_ERROR_MAX_FILE_SIZE"></span>
+                <span ng-if="'DEPLOYMENT' === artifactGroupType" ng-show="forms.editForm.myArtifactFile.$error.filetype" translate="ADD_ARTIFACT_ERROR_VALID_EXTENSIONS" translate-values="{'extensions': '{{fileExtensions()}}'}"></span>
+                <span ng-show="forms.editForm.myArtifactFile.$error.emptyFile" translate="VALIDATION_ERROR_EMPTY_FILE"></span>
+            </div>
+        </div>
+        <!--------------------- ARTIFACT FILE -------------------->
+
+        <div class="w-sdc-form-columns-wrapper">
+            <div class="w-sdc-form-column">
+
+            <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.placeHolder.$dirty && forms.editForm.placeHolder.$invalid)}" data-ng-show="isPlaceHolderArtifact">
+                <label class="i-sdc-form-label required">Artifact</label>
+                <select class="i-sdc-form-select"
+                        name="placeHolder"
+                        data-ng-disabled="!isNew"
+                        data-ng-model="selectedArtifact"
+                        data-ng-change="changeArtifact(selectedArtifact)"
+                        data-tests-id="selectArtifact">
+                    <option disabled value="?">Select Artifact</option>
+                    <option data-ng-repeat="(key,value) in editArtifactResourceModel.artifactsFormList">{{value.artifactDisplayName}}</option>
+                    <option value="">Create New Artifact</option>
+
+                </select>
+
+                <div class="input-error" data-ng-show="forms.editForm.placeHolder.$dirty && forms.editForm.placeHolder.$invalid">
+                    <span ng-show="forms.editForm.placeHolder.$error.required" translate="ADD_ARTIFACT_ERROR_TYPE_REQUIRED"></span>
+                </div>
+            </div>
+
+            <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.artifactLabel.$dirty && forms.editForm.artifactLabel.$invalid)}" data-ng-show="!isPlaceHolderArtifact">
+                <label class="i-sdc-form-label required">Artifact Label</label>
+                <input class="i-sdc-form-input"
+                       data-ng-maxlength="25"
+                       data-ng-model="editArtifactResourceModel.artifactResource.artifactLabel"
+                       type="text"
+                       name="artifactLabel"
+                       data-required
+                       data-ng-model-options="{ debounce: 200 }"
+                       data-ng-pattern="labelValidationPattern"
+                       maxlength="25"
+                       data-ng-disabled="!isNew || editArtifactResourceModel.artifactResource.mandatory"
+                       data-tests-id="artifactLabel"
+                       autofocus/>
+                <span class="w-sdc-icon-cancel" data-ng-click="selectedArtifact='?'; removeInputLabel()"></span>
+
+                <div class="input-error" data-ng-show="forms.editForm.artifactLabel.$dirty && forms.editForm.artifactLabel.$invalid">
+                    <span ng-show="forms.editForm.artifactLabel.$error.required" translate="ADD_ARTIFACT_ERROR_LABEL_REQUIRED"></span>
+                    <span ng-show="forms.editForm.artifactLabel.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span>
+                    <span ng-show="forms.editForm.artifactLabel.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                </div>
+            </div>
+
+            <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.timeout.$dirty && forms.editForm.timeout.$invalid)}"
+                 data-ng-if="isDeploymentHeat()">
+                <label class="i-sdc-form-label">Deployment Timeout (minutes)</label>
+                <input class="i-sdc-form-input"
+                       data-ng-maxlength="25"
+                       data-ng-model="editArtifactResourceModel.artifactResource.timeout"
+                       type="number"
+                       name="timeout"
+                       min="1"
+                       max="2147483647"
+                       data-ng-model-options="{ debounce: 200 }"
+                       data-ng-pattern="integerValidationPattern"
+                       data-ng-init="setDefaultTimeout()"
+                       data-ng-change="setDefaultTimeout()"
+                       maxlength="25"
+                       data-tests-id="timeout"/>
+
+                <div class="input-error" data-ng-show="forms.editForm.timeout.$dirty && forms.editForm.timeout.$invalid">
+                    <span ng-show="forms.editForm.timeout.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span>
+                    <span ng-show="forms.editForm.timeout.$error.pattern" translate="ADD_ARTIFACT_ERROR_TIMEOUT_PATTERN"></span>
+                    <span ng-show="forms.editForm.timeout.$error.min" translate="ADD_ARTIFACT_ERROR_TIMEOUT_MIN"></span>
+                </div>
+            </div>
+            <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.type.$dirty && forms.editForm.type.$invalid)}">
+                <label class="i-sdc-form-label required">Type</label>
+                <select class="i-sdc-form-select"
+                        data-required
+                        name="type"
+                        data-ng-disabled="!isNew || editArtifactResourceModel.artifactResource.mandatory || '?'==selectedArtifact"
+                        data-ng-model="editArtifactResourceModel.artifactResource.artifactType"
+                        data-ng-options="type as type for type in editArtifactResourceModel.artifactTypes track by type | uppercase"
+                        data-tests-id="artifacttype">
+                    <option value="">Choose Type</option>
+                </select>
+
+                <div class="input-error" data-ng-show="forms.editForm.type.$dirty && forms.editForm.type.$invalid">
+                    <span ng-show="forms.editForm.type.$error.required" translate="ADD_ARTIFACT_ERROR_TYPE_REQUIRED"></span>
+                </div>
+
+            </div>
+        </div>
+
+         <div class="w-sdc-form-column">
+
+            <div class="i-sdc-form-item"
+                 data-ng-class="{error:(forms.editForm.description.$dirty && forms.editForm.description.$invalid)}">
+                <label class="i-sdc-form-label required">Description</label>
+                  <textarea class="i-sdc-form-textarea"
+                            data-ng-maxlength="256"
+                            maxlength="256"
+                            data-required
+                            name="description"
+                            data-ng-model="editArtifactResourceModel.artifactResource.description"
+                            data-ng-model-options="{ debounce: 200 }"
+                            data-ng-pattern="commentValidationPattern"
+                            data-tests-id="description"
+                  >
+                  </textarea>
+
+                <div class="input-error" data-ng-show="forms.editForm.description.$dirty && forms.editForm.description.$invalid">
+                    <span ng-show="forms.editForm.description.$error.required" translate="ADD_ARTIFACT_ERROR_DESCRIPTION_REQUIRED"></span>
+                    <span ng-show="forms.editForm.description.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
+                    <span ng-show="forms.editForm.description.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                </div>
+
+            </div>
+        </div>
+        </div>
+
+        <span class="w-sdc-form-note" data-ng-show="forms.editForm.$invalid && false" translate="LABEL_ALL_FIELDS_ARE_MANDATORY"></span>
+
+    </form>
+
+</sdc-modal>
+
+
diff --git a/catalog-ui/app/scripts/view-models/wizard/artifact-form-step/artifact-form-step.less b/catalog-ui/app/scripts/view-models/wizard/artifact-form-step/artifact-form-step.less
new file mode 100644
index 0000000000..a189c12d62
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/wizard/artifact-form-step/artifact-form-step.less
@@ -0,0 +1,45 @@
+.sdc-add-artifact {
+
+    .w-sdc-form-note {
+        .h_9;
+        display: block;
+        position: relative;
+        top: 13px;
+    }
+
+    .w-sdc-form {
+
+        .i-sdc-form-textarea{
+            min-height: 95px;
+        }
+
+        .i-sdc-form-item.upload input[type="file"] {
+            display: none
+        }
+
+        .w-sdc-icon-cancel {
+            position: absolute;
+            right: 7px;
+            top: 33px;
+            .sprite;
+            .sprite.small-x-btn-black;
+            .hand;
+        }
+    }
+
+    .artifact-info {
+        text-align: left;
+        color:  rgb(140, 140, 140);
+        font-size: 13px;
+        margin-top: -40px;
+        margin-bottom: 5px;
+        width: 600px;
+        min-height: initial;
+
+        span {
+            color:  #666666;
+            padding-left: 4px;
+        }
+    }
+
+}