Initial OpenECOMP SDC commit

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

3 files changed, 290 insertions, 0 deletions

diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view-model.ts
new file mode 100644
index 0000000000..2dc1b1d9ff
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view-model.ts
@@ -0,0 +1,145 @@
+/*-
+ * ============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 {
+    'use strict';
+    import Dictionary = Sdc.Utils.Dictionary;
+    import InputModel = Sdc.Models.InputModel;
+
+    export interface IInputsViewModelScope extends IWorkspaceViewModelScope {
+        InstanceInputsProperties:Models.InstanceInputsPropertiesMapData; //this is tha map object that hold the selected inputs and the inputs we already used
+        vfInstancesList: Array<Models.ComponentsInstances.ComponentInstance>;
+        component:Models.Components.Resource;
+
+        onArrowPressed():void;
+        getInputPropertiesForInstance(instanceId:string, instance:Models.ComponentsInstances.ComponentInstance): ng.IPromise<boolean> ;
+        loadInputPropertiesForInstance(instanceId:string, input:Models.InputModel): ng.IPromise<boolean> ;
+        loadInputInputs(input:Models.InputModel): ng.IPromise<boolean>;
+    }
+
+    export class ResourceInputsViewModel {
+
+        static '$inject' = [
+            '$scope',
+            '$q'
+        ];
+
+        constructor(private $scope:IInputsViewModelScope, private $q: ng.IQService) {
+            this.initScope();
+        }
+
+        private initScope = (): void => {
+
+            this.$scope.InstanceInputsProperties = new Models.InstanceInputsPropertiesMapData();
+            this.$scope.vfInstancesList = this.$scope.component.componentInstances;
+
+            // Need to cast all inputs to InputModel for the search to work
+            let tmpInputs:Array<Models.InputModel> = new Array<Models.InputModel>();
+            _.each(this.$scope.component.inputs, (input):void => {
+                tmpInputs.push(new Models.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:Models.ComponentsInstances.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 input in the right table, this function will load all inputs of the selected input
+             */
+            this.$scope.loadInputInputs = (input:Models.InputModel): ng.IPromise<boolean> => {
+                let deferred = this.$q.defer();
+
+                let onSuccess = () => { deferred.resolve(true); };
+                let onError = () => { deferred.resolve(false); };
+
+                if(!input.inputs) {
+                    this.$scope.component.getResourceInputInputs(input.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:Models.InputModel): ng.IPromise<boolean> => {
+                let deferred = this.$q.defer();
+
+                let onSuccess = (properties:Array<Models.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<Models.InputModel>) => {
+
+                    //disabled  all the inputs in the left table
+                    _.forEach(this.$scope.InstanceInputsProperties, (properties:Array<Models.PropertyModel>) => {
+                        _.forEach(properties, (property:Models.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);
+            };
+
+        }
+
+    }
+}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view.html
new file mode 100644
index 0000000000..7cdf5a2fa4
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view.html
@@ -0,0 +1,136 @@
+<div class="workspace-inputs">
+    <div class="table-container-flex">
+        <div class="w-sdc-inputs-search pull-left hideme">
+            <input type="text" class="w-sdc-inputs-search-input" placeholder="Search"/>
+            <div class="search-icon-container">
+                <span class="w-sdc-search-icon inputs-search-icon magnification-white"></span>
+            </div>
+        </div>
+        <div class="table">
+            <div class="table-header">VFC instances inputs</div>
+            <div class="body">
+                <div class="table-loader" ng-class="{'tlv-loader large loader': isLoading}"></div>
+                <perfect-scrollbar scroll-y-margin-offset="0" class="scrollbar-container">
+
+                    <expand-collapse expanded-selector=".vf-instance-list.{{$index}}"
+                                     class="expand-collapse-table-row"
+                                     load-data-function="getInputPropertiesForInstance(instance.uniqueId, instance)"
+                                     is-close-on-init="true"
+                                     data-ng-repeat-start="instance in vfInstancesList track by $index">
+                        <div class="flex-container data-row">
+                            <div class="expand-collapse-inputs-table-icon"></div>
+                            <div class="table-col-general flex-item text">
+                                <span class="title-text">{{instance.name}}</span>
+                            </div>
+                        </div>
+
+                    </expand-collapse>
+
+                    <div data-ng-repeat-end="" class="vf-instance-list {{$index}}">
+
+                        <div class="empty-row" ng-if="instance.properties.length===0">No properties to display</div>
+
+                        <div ng-repeat="property in instance.properties track by $index">
+                            <div class="property-row flex-container">
+                                <div class="flex-item text property-name-container">
+                                    <span class="title-blue-text property-name-text">{{property.name}}</span>
+                                    <span class="text instance-name-text">{{property.name}}</span>
+                                </div>
+                                <div class="type-schema-container">
+                                    <div class="text">
+                                        <span>{{property.type}}</span>
+                                    </div>
+                                </div>
+                                <div class="type-schema-container">
+                                    <div class="text">
+                                        <span>{{property.schema.property.type}} </span>
+                                    </div>
+                                </div>
+                                <!--<sdc-checkbox
+                                    class="type-schema-container input-check-box"
+                                    disabled ="property.isAlreadySelected"
+                                    sdc-checklist-model="InstanceInputsProperties[instance.uniqueId]"
+                                    sdc-checklist-value="property"
+                                    data-ng-click="$event.stopPropagation()"></sdc-checkbox>-->
+                            </div>
+                        </div>
+
+                    </div>
+
+                </perfect-scrollbar>
+            </div>
+        </div>
+    </div>
+
+    <div class="inputs-button-container pull-left">
+        <!--<div ng-click="onArrowPressed()" class="right-arrow-btn"></div>-->
+    </div>
+
+    <div class="table-container-flex">
+        <div class="w-sdc-inputs-search pull-left">
+            <input type="text" class="w-sdc-inputs-search-input" data-ng-model="search.filterTerm" placeholder="Search" data-ng-model-options="{debounce: 200}"/>
+            <div class="search-icon-container">
+                <span class="w-sdc-search-icon inputs-search-icon magnification-white"></span>
+            </div>
+        </div>
+        <div class="table">
+            <div class="body">
+                <div class="table-header">Resource instance inputs</div>
+                <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
+                    <expand-collapse expanded-selector=".resource-inputs.{{$index}}"
+                                     class="expand-collapse-table-row"
+                                     load-data-function="loadInputPropertiesForInstance(resourceInput.uniqueId, resourceInput)"
+                                     is-close-on-init="true"
+                                     data-ng-repeat-start="resourceInput in component.inputs | filter:search track by $index ">
+                        <div class="input-row service-input-row">
+                            <div class="title-text">{{resourceInput.name}}</div>
+                            <div class="flex-container" ng-class="resourceInput.isNew ? 'new-input': 'service-input-row'">
+                                <div class="expand-collapse-inputs-table-icon"></div>
+                                <div class="flex-item">
+                                    <div>
+                                        <span class="title-text">Description:</span>
+                                        <span>{{resourceInput.description}}</span>
+                                    </div>
+                                </div>
+                                <div class="flex-item ">
+                                    <div class="text">
+                                        <span class="title-text">VF Instance:</span>
+                                        <span>{{resourceInput.name}}</span>
+                                    </div>
+                                    <div class="text">
+                                        <span class="title-text">Type:</span>
+                                        <span>{{resourceInput.type}} </span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </expand-collapse>
+
+                    <div data-ng-repeat-end="" class="input-inputs-list resource-inputs {{$index}}">
+                        <div class="empty-row" ng-if="resourceInput.properties.length===0">No properties to display</div>
+                        <div ng-repeat="property in resourceInput.properties track by $index">
+                            <div class="property-row flex-container">
+                                <div class="flex-item text property-name-container">
+                                            <span
+                                                class="title-blue-text property-name-text">{{property.name}}</span>
+                                    <span class="text instance-name-text">{{property.name}}</span>
+                                </div>
+                                <div class="type-schema-container">
+                                    <div class="text">
+                                        <span>{{property.type}}</span>
+                                    </div>
+                                </div>
+                                <div class="type-schema-container">
+                                    <div class="text">
+                                        <span>{{property.schema.property.type}} </span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                </perfect-scrollbar>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/resource-input/resource-inputs.less b/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/resource-input/resource-inputs.less
new file mode 100644
index 0000000000..ebb32fbdb2
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/resource-input/resource-inputs.less
@@ -0,0 +1,9 @@
+.workspace-inputs {
+
+    .property-row {
+        .input-check-box {
+            text-align: center;
+        }
+    }
+
+}