Scale out fixes

Change-Id: I7c0232f5e8e461616e1dfc2df2dd2c49b35eb71f
Issue-ID: VID-188
Signed-off-by: Sonsino, Ofir (os0695) <os0695@intl.att.com>

5 files changed, 43 insertions, 25 deletions

diff --git a/epsdk-app-onap/src/main/webapp/WEB-INF/jsp/serviceModels.jsp b/epsdk-app-onap/src/main/webapp/WEB-INF/jsp/serviceModels.jsp
index 8ec3a8d7d..57aa16ef4 100755
--- a/epsdk-app-onap/src/main/webapp/WEB-INF/jsp/serviceModels.jsp
+++ b/epsdk-app-onap/src/main/webapp/WEB-INF/jsp/serviceModels.jsp
@@ -10,6 +10,7 @@
 <link rel="stylesheet" type="text/css" href="app/vid/styles/angularjs-datetime-picker.css"></link>

 <link rel="stylesheet" type="text/css" href="app/vid/styles/common.css" />

 <link rel="stylesheet" type="text/css" href="app/vid/styles/messageViewer.css" />

+<link rel="stylesheet" type="text/css" href="app/vid/scripts/modals/new-change-management/new-change-management.css" />

 

 	

 	<script>

diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.controller.js b/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.controller.js
index 26b1819bf..90d158af9 100644
--- a/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.controller.js
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.controller.js
@@ -14,11 +14,11 @@
         vm.wizardStep = 1;
         vm.nextStep = function(){
             vm.wizardStep++;
-            $(".modal-dialog").animate({"width":"1000px"},400,'linear');
+            $(".modal-dialog").animate({"width":"1200px"},400,'linear');
         };
         vm.prevStep = function(){
             vm.wizardStep--;
-            $(".modal-dialog").animate({"width":"6000px"},400,'linear');
+            $(".modal-dialog").animate({"width":"600px"},400,'linear');
         };
 
         vm.softwareVersionRegex = "[-a-zA-Z0-9\.]+";
@@ -65,6 +65,9 @@
                                             //for scale out screen
                                             newVNFName.category = response.data.service.category;
                                             newVNFName.groupModules = _.groupBy(newVNFName.vfModules, "customizationUuid");
+                                            _.forEach(newVNFName.vfModules, function(mdl, key){
+                                                mdl.scale = false; //defaults to not scale unless user changes it
+                                            });
                                         }
                                     });
                                     var versions = _.uniqBy(availableVersions, 'modelInfo.modelVersion');
@@ -194,6 +197,7 @@
 							payload: changeManagement.configUpdateFile
 						}
                     }else if(workflowType=="VNF Scale Out"){
+                        if(!moduleToScale) return null;
 
                         if(moduleToScale.userParams) {
                             requestParametersData = {
@@ -322,9 +326,11 @@
 			} else {
 				//no scheduling support
 				var dataToSo = extractChangeManagementCallbackDataStr(vm.changeManagement);
-				//TODO: foreach
-                var vnfName = vm.changeManagement.vnfNames[0].name;
-				changeManagementService.postChangeManagementNow(dataToSo, vnfName);
+                if(dataToSo) {
+                    //TODO: foreach
+                    var vnfName = vm.changeManagement.vnfNames[0].name;
+                    changeManagementService.postChangeManagementNow(dataToSo, vnfName);
+                }
 			}
         };
 
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.css b/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.css
index 34a6af45d..1f743ab7e 100644
--- a/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.css
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.css
@@ -3,7 +3,7 @@
     display: flex;
 }
 .scale-out-modules .table-row > div {
-    text-indent: 12px;
+    padding: 0 12px;
     color: #5A5A5A;
     font-size: 13px;
     border-right: 1px solid #D2D2D2;
@@ -17,16 +17,16 @@
     font-size: 22px;
 }
 .scale-out-modules .table-row > div:nth-child(2) {
-    flex: 220px 1 0;
+    flex: 200px 1 0;
 }
 .scale-out-modules .table-row > div:nth-child(3) {
     flex: 200px 1 0;
 }
 .scale-out-modules .table-row > div:nth-child(4), .scale-out-modules .table-row > div:nth-child(5) {
-    flex: 150px 0 0;
+    flex: 110px 0 0;
 }
 .scale-out-modules .table-row > div:nth-child(6), .scale-out-modules .table-row > div:nth-child(7) {
-    flex: 120px 0 0;
+    flex: 130px 0 0;
 }
 .scale-out-modules .table-row.open > div {
     line-height: 29px;
@@ -62,7 +62,7 @@
     margin-left: 60px;
 }
 .scale-out-modules .modules-table .table-row  > div:nth-child(1) {
-    flex: 539px 0 0;
+    flex: 300px 1 0;
     font-size: 13px;
 }
 .scale-out-modules .modules-table .table-row  > div:nth-child(2) {
@@ -71,11 +71,15 @@
 .scale-out-modules .modules-table .table-row  > div:nth-child(3) {
     flex: 90px 0 0;
 }
+.scale-out-modules .modules-table .table-row  > div:nth-child(3) input {
+    width: 60px;
+    margin-top: 10px;
+}
 .scale-out-modules .modules-table .table-row  > div:nth-child(4) {
     flex: 180px 0 0;
 }
 .scale-out-modules .modules-table .table-row  > div:nth-child(5) {
-    flex: 110px 0 0;
+    flex: 280px 0 0;
 }
 .scale-out-modules .modules-table.open {
     display: block;
@@ -93,7 +97,7 @@
 		display:flex;
 
         > div {
-			text-indent:12px;
+			padding: 0 12px;
 			color: #5A5A5A;
 			font-size:13px;
 			border-right:1px solid #D2D2D2;
@@ -108,16 +112,16 @@
 				font-size:22px;
 			}
 			&:nth-child(2){
-				flex:220px 1 0;
+				flex:200px 1 0;
 			}
 			&:nth-child(3){
 				flex:200px 1 0;
 			}
 			&:nth-child(4), &:nth-child(5){
-				flex:150px 0 0;
+				flex:110px 0 0;
 			}
 			&:nth-child(6), &:nth-child(7){
-				flex:120px 0 0;
+				flex:130px 0 0;
 			}
 		}
 
@@ -162,7 +166,7 @@
 			& > div{
 
 				&:nth-child(1){
-					flex:539px 0 0;
+					flex:300px 1 0;
 					font-size:13px;
 				}
 				&:nth-child(2){
@@ -170,12 +174,17 @@
 				}
 				&:nth-child(3){
 					flex:90px 0 0;
+
+                    input {
+                        width: 60px;
+                        margin-top: 10px;
+                    }
 				}
 				&:nth-child(4){
 					flex:180px 0 0;
 				}
 				&:nth-child(5){
-					flex:110px 0 0;
+					flex:280px 0 0;
 				}
 			}
 		}
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.html b/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.html
index bf3579ea4..6a47de0a0 100644
--- a/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.html
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.html
@@ -106,9 +106,9 @@
             <div>Invariant UUID</div>
         </div>
 
-        <div class="table-row" ng-repeat-start="vnf in vm.changeManagement.vnfNames" ng-if="vnf['prov-status'] === 'PROV'" ng-click="vnf.isOpen=!!!vnf.isOpen">
+        <div class="table-row" ng-repeat-start="vnf in vm.changeManagement.vnfNames" ng-click="vnf.isOpen=!!!vnf.isOpen">
             <div>+</div>
-            <div>{{vnf['service-instance-node'].properties['service-instance-name']}}</div>
+            <div>{{vnf['service-instance-node'][0].properties['service-instance-name']}}</div>
             <div>{{vnf.name}}</div>
             <div>{{vnf['availableVersions'][0].modelInfo.modelVersion}}</div>
             <div>{{vnf.category}}</div>
@@ -127,10 +127,9 @@
             <div class="table-row" ng-repeat="(custUUID, moduleArr) in vnf.groupModules">
                 <div>{{moduleArr[0].modelCustomizationName}}</div>
                 <div>{{moduleArr.length}}</div>
-                <div ng-if="moduleArr[0].properties.minCountInstances == moduleArr[0].properties.maxCountInstances">N/A</div>
-                <div ng-if="moduleArr[0].properties.minCountInstances != moduleArr[0].properties.maxCountInstances">
-                    <input type="number" ng-model="moduleArr[0].scale" step="1"
-                           ng-min="moduleArr[0].properties.minCountInstances" ng-max="moduleArr[0].properties.maxCountInstances - moduleArr.length" />
+                <div ng-if="!(moduleArr[0].properties.maxCountInstances - moduleArr.length > 0)">N/A</div>
+                <div ng-if="moduleArr[0].properties.maxCountInstances - moduleArr.length > 0">
+                    <input type="checkbox" ng-model="moduleArr[0].scale" />
                 </div>
                 <div>{{moduleArr[0].uuid}}</div>
                 <div>
@@ -142,10 +141,13 @@
     </div>
 
     <div class="modal-footer">
+        <div class="pull-left">
+            <button ng-if="vm.wizardStep === 2" ng-click="vm.prevStep();" type="button" id="back" name="back" class="btn btn-primary">Back</button>
+        </div>
         <div class="pull-right">
+            <button type="button" id="cancel" name="cancel" class="btn btn-white" ng-click="vm.close()">Cancel</button>
             <button ng-if="!vm.isScaleOut() || (vm.isScaleOut() && vm.wizardStep === 2)" type="submit" id="submit" name="submit" class="btn btn-primary" data-ng-disabled="newChangeManagement.$invalid">{{vm.hasScheduler ? "Schedule" : "Confirm"}}</button>
             <button ng-if="vm.isScaleOut() && vm.wizardStep === 1" ng-click="vm.nextStep();" type="button" id="next" name="next" class="btn btn-primary" data-ng-disabled="newChangeManagement.$invalid">Next</button>
-            <button type="button" id="cancel" name="cancel" class="btn btn-white" ng-click="vm.close()">Cancel</button>
         </div>
     </div>
 </form>
diff --git a/vid-app-common/src/main/webapp/app/vid/styles/modal-create-new.css b/vid-app-common/src/main/webapp/app/vid/styles/modal-create-new.css
index 7d8af00b9..fb97a9476 100644
--- a/vid-app-common/src/main/webapp/app/vid/styles/modal-create-new.css
+++ b/vid-app-common/src/main/webapp/app/vid/styles/modal-create-new.css
@@ -4,7 +4,7 @@
 }
 
 .modal-content {
-    width: 587px;
+    /*width: 587px;*/
     border-radius: 8px;
     background-color:  #ffffff;
     font-family: "OpenSans-Regular";