Added easy navigation from Review to previous steps

Change-Id: I36d0274c77b861021cadd108d90bad5434a8fbf1

v2/assets/css/style.css

@@ -231,7 +231,7 @@ button[disabled] {
 }
 .wizard-steps li.active .step {
     transform: scale(1.2, 1.2);
-    -webkit-transform: scale(1.2, 1.2);
+    -webkit-transform: scale(1.2, 1.2); 
 }
 .wizard-steps li.active .title {
     font-weight: bold;
@@ -269,11 +269,14 @@ button[disabled] {
     border-color: #d15b47 !important;
 }
 .wizard-steps li .step {
-    transform: scale(1.6);
-    -webkit-transform: scale(1.6);
+    transform: scale(1.5);
+    -webkit-transform: scale(1.5);
     background-color: #AEAEAE;
     border-style: none;
 }
+.wizard-steps li.complete:hover .step {
+    transform: scale(1.7) !important;
+}
 .wizard-steps li.complete .step:before {
     background-color: rgba(255, 255, 255, 0);
     top: 23px;
@@ -974,7 +977,7 @@ circle[depth='4'] {
 }
 .role-assign-drop {
     min-height: 25px;
-    min-width: 220px;
+    min-width: 100px;
     /* background-color: rgba(221, 221, 221, 0.32); */
 }
 .role-assign-drag {
@@ -1026,11 +1029,18 @@ circle[depth='4'] {
     line-height: 15px;
     padding: 1px 7px 3px 7px;
     text-shadow: none;
-    border-radius: 10px;
+    border-radius: 5px;
     color: #fff;
     display: inline-block;
     min-width: 10px;
     text-align: center;
     vertical-align: baseline;
     white-space: nowrap;
+}
+.autofill-success {
+    margin-top: 20px;
+}
+h4.widget-title:hover {
+    color: #2a6496;
+    text-decoration: underline;
 }

v2/data/wizard_steps.json

@@ -54,7 +54,7 @@
         "title": "Review",
         "state": "",
         "template": "src/app/wizard/review.tpl.html",
-        "description": ""
+        "description": "Click a section title to navigate back to that page."
     }],
     "os": [{
         "id": 1,

v2/src/app/wizard/network.tpl.html

@@ -2,7 +2,7 @@
     <div class="row">
         <div collapse="autoFillPanel.isCollapsed" class="dashed-panel" style="height: auto; background-color: rgba(224, 226, 227, 0.25);">
             <span class="action pull-right" ng-click="autoFillPanel.isCollapsed = true;">
-                <i class="ace-icon fa fa-times-circle bigger-120 light-grey"></i>
+                <i class="ace-icon fa fa-times-circle bigger-120 networkDeleteButton"></i>
             </span>
             <div class="clearfix"></div>
             <div class="row">
@@ -100,7 +100,7 @@
                     <div class="space-10"></div>
 
                     <div class="center">
-                        <button ng-click="autofill()" class="btn btn-sm btn-primary">
+                        <button ng-click="autofill(2500)" class="btn btn-sm btn-primary">
                             Fill Values
                         </button>
                     </div>
@@ -141,6 +141,7 @@
             </button>
         </div>
     </div>
+    <alert ng-repeat="alert in networkAlerts" class="autofill-success" type="success" close="closeNetworkAlert()">{{alert.msg}}</alert>
     <div class="row">
         <div class="space-6"></div>
         <table ng-table="tableParams" class="table table-hover table-striped">
@@ -212,15 +213,13 @@
     </div>
 
 </div>
-
-
 <div>
     <script type="text/ng-template" id="addSubnetModal.html">
     <div class="modal-header">
         <h3 class="modal-title" >Subnetwork </h3>
     </div>
     <div class= "modal-body" >
-        <alert ng-repeat="alert in alerts" type="danger" close="closeAlert()" >
+        <alert ng-repeat="alert in alerts" type="danger" close="closeAlert()">
             {{alert.message}}
         </alert>
         <table class="table table-hover nowrap">

v2/src/app/wizard/network_mapping.tpl.html

@@ -34,7 +34,6 @@
                 </div>
                 <br>
                 <p>Use drag and drop to move logical networks between physical interfaces. (Interface assigned Promisc Mode can only map with Public network)</p>
-
                 <div class="widget-body">
                     <div class="widget-main network-background">
                         <div ui-on-Drop="onDrop($event, '')" drag-hover-class="drag-enter" class="network-placeholder network-margin-border" drop-channel="E">

v2/src/app/wizard/review.tpl.html

@@ -1,11 +1,9 @@
-
-
 <div ng-controller="reviewCtrl">
     <div class="row">
         <div class="col-sm-12">
             <div class="widget-box transparent margin-top-minus10">
                 <div class="widget-header widget-header-flat">
-                    <h4 class="widget-title lighter">
+                    <h4 class="widget-title lighter" ng-click="returnStep('role_assign')">
                         <i class="ace-icon fa fa-list"></i>
                         Hosts
                     </h4>
@@ -73,12 +71,12 @@
             </div>
         </div>
     </div>
-    <div class="space-30"></div>
+    <div class="space-16"></div>
     <div class="row">
         <div class="col-sm-6">
             <div class="widget-box transparent margin-top-minus10">
                 <div class="widget-header widget-header-flat">
-                    <h4 class="widget-title lighter">
+                    <h4 class="widget-title lighter" ng-click="returnStep('network_mapping')">
                         <i class="ace-icon fa fa-sun-o"></i>
                         Network Mapping
                     </h4>
@@ -113,7 +111,7 @@
         <div class="col-sm-6">
             <div class="widget-box transparent margin-top-minus10">
                 <div class="widget-header widget-header-flat">
-                    <h4 class="widget-title lighter">
+                    <h4 class="widget-title lighter" ng-click="returnStep('partition')">
                         <i class="ace-icon fa fa-hdd-o"></i>
                         Partition
                     </h4>
@@ -148,12 +146,12 @@
             </div>
         </div>
     </div>
-    <div class="space-30"></div>
+    <div class="space-16"></div>
     <div class="row">
         <div class="col-sm-6">
             <div class="widget-box transparent margin-top-minus10">
                 <div class="widget-header widget-header-flat">
-                    <h4 class="widget-title lighter">
+                    <h4 class="widget-title lighter" ng-click="returnStep('security')">
                         <i class="ace-icon fa fa-lock"></i>
                         Credentials
                     </h4>
@@ -161,13 +159,16 @@
                         <ul class="nav nav-tabs">
                             <li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)">
                                 <a href>{{tab.title}}</a>
-                            </li>
+                            </li> 
+                            <a class="action margin-right-5" ng-click="isCredCollapsed = !isCredCollapsed">
+                                <i class="ace-icon fa fa-chevron-up" ng-class="{'fa-chevron-up': !isCredCollapsed, 'fa-chevron-down': isCredCollapsed}"></i>
+                            </a>
                         </ul>
                     </div>
                 </div>
                 <div class="widget-body">
                     <div class="widget-body-inner" style="display: block;">
-                        <div class="widget-main no-padding">
+                        <div collapse="isCredCollapsed" class="widget-main no-padding">
                             <div ng-include="currentTab"></div>
                             <script type="text/ng-template" id="service.tpl.html">
                             <table class="table table-striped">
@@ -223,19 +224,19 @@
         <div class="col-sm-6">
             <div class="widget-box transparent margin-top-minus10">
                 <div class="widget-header widget-header-flat">
-                    <h4 class="widget-title lighter">
+                    <h4 class="widget-title lighter" ng-click="returnStep('os_global')">
                         <i class="ace-icon fa fa-globe"></i>
                         OS Global Configurations
                     </h4>
                     <div class="widget-toolbar">
-                        <a class="action" ng-click="isPartitionCollapsed = !isPartitionCollapsed">
-                            <i class="ace-icon fa fa-chevron-up" ng-class="{'fa-chevron-up': !isPartitionCollapsed, 'fa-chevron-down': isPartitionCollapsed}"></i>
+                        <a class="action" ng-click="isConfigCollapsed = !isConfigCollapsed">
+                            <i class="ace-icon fa fa-chevron-up" ng-class="{'fa-chevron-up': !isConfigCollapsed, 'fa-chevron-down': isConfigCollapsed}"></i>
                         </a>
                     </div>
                 </div>
                 <div class="widget-body">
                     <div class="widget-body-inner" style="display: block;">
-                        <div class="widget-main no-padding" collapse="isPartitionCollapsed">
+                        <div class="widget-main no-padding" collapse="isConfigCollapsed">
                             <table class="table table-striped">
                                 <tbody>
                                     <tr ng-repeat="(key, value) in global_config">

v2/src/app/wizard/wizard.js

@@ -167,9 +167,22 @@ angular.module('compass.wizard', [
         }
     }
 
+    for (var i = 0; i < $scope.steps.length; i++) {
+        if ($scope.steps[i].name == 'network') {
+            $scope.networkStep = i;
+        }
+        if ($scope.steps[i].name == 'role_assign') {
+            $scope.roleAssignStep = i;
+        }
+        if ($scope.steps[i].name == 'network_mapping') {
+            $scope.networkMappingStep = i;
+        }
+    }
+
     // Updates CSS Classes on Step state change
     $scope.updateStepProgress = function(newStep, oldStep, goToPrevious) {
         $scope.steps[newStep - 1].state = "active";
+
         if(goToPrevious)
         {
             $scope.steps[oldStep - 1].state = "";
@@ -177,27 +190,29 @@ angular.module('compass.wizard', [
         else{
             $scope.steps[oldStep - 1].state = "complete";
         }
-        if (newStep == 1) {
-            if ($scope.maxStep > 2) {
-                $scope.steps[2].state = "incomplete";
+
+        $scope.steps[oldStep - 1].state = "complete";
+        if ($scope.steps[newStep - 1].name == 'sv_selection') {
+            if ($scope.maxStep > $scope.networkStep) {
+                $scope.steps[$scope.networkStep].state = "incomplete";
             }
-            if ($scope.maxStep > 5) {
-                $scope.steps[5].state = "incomplete";
+            if ($scope.maxStep > $scope.roleAssignStep) {
+                $scope.steps[$scope.roleAssignStep].state = "incomplete";
             }
-            if ($scope.maxStep > 6) {
-                $scope.steps[6].state = "incomplete";
+            if ($scope.maxStep > $scope.networkMappingStep) {
+                $scope.steps[$scope.networkMappingStep].state = "incomplete";
             }
         }
-        if (newStep == 3) {
-            if ($scope.maxStep > 5) {
-                $scope.steps[5].state = "incomplete";
+        if (newStep == $scope.networkStep + 1) {
+            if ($scope.maxStep > $scope.roleAssignStep) {
+                $scope.steps[$scope.roleAssignStep].state = "incomplete";
             }
-            if ($scope.maxStep > 6) {
-                $scope.steps[6].state = "incomplete";
+            if ($scope.maxStep > $scope.networkMappingStep) {
+                $scope.steps[$scope.networkMappingStep].state = "incomplete";
             }
         }
-        if (oldStep == 8) {
-            $scope.steps[7].state = "";
+        if (oldStep == $scope.steps.length) {
+            $scope.steps[$scope.steps.length - 1].state = "";
         }
     };
 
@@ -217,8 +232,6 @@ angular.module('compass.wizard', [
             wizardFactory.setCommitState(commitState);
         } else {
             $scope.stepControl();
-            $scope.updateStepProgress($scope.pendingStep, 8);
-            //$scope.updateStepProgress($scope.pendingStep, stepId);
         }
     };
 
@@ -582,7 +595,7 @@ angular.module('compass.wizard', [
     */
 })
 
-.controller('networkCtrl', function($scope, wizardFactory, dataService, $filter, ngTableParams, sortingService, $q, $modal) {
+.controller('networkCtrl', function($scope, $timeout, wizardFactory, dataService, $filter, ngTableParams, sortingService, $q, $modal) {
     var cluster = wizardFactory.getClusterInfo();
     $scope.subnetworks = wizardFactory.getSubnetworks();
     $scope.interfaces = wizardFactory.getInterfaces();
@@ -798,7 +811,7 @@ angular.module('compass.wizard', [
     };
 
 
-    $scope.autofill = function() {
+    $scope.autofill = function(alertFade) {
         // Autofill IP for each interface
         angular.forEach($scope.interfaces, function(value, key) {
             var ip_start = $("#" + key + "-ipstart").val();
@@ -808,6 +821,14 @@ angular.module('compass.wizard', [
         // Autofill hostname
         var hostname_rule = $("#hostname-rule").val();
         $scope.fillHostname(hostname_rule);
+        $scope.networkAlerts = [{
+            msg: 'Autofill Done!'
+        }];
+        if (alertFade) {
+            $timeout(function() {
+                $scope.closeNetworkAlert();
+            }, alertFade);
+        }
     };
 
     $scope.fillHostname = function(rule) {
@@ -860,6 +881,10 @@ angular.module('compass.wizard', [
             }
         })
     }
+
+    $scope.closeNetworkAlert = function() {
+        $scope.networkAlerts = [];
+    };
 })
 
 .controller('partitionCtrl', function($scope, wizardFactory, dataService) {
@@ -920,8 +945,6 @@ angular.module('compass.wizard', [
         } else {
             $scope.partitionInforArray.splice(index, 1);
         }
-
-
         if ($scope.duplicatedIndexArray.indexOf(index) >= 0) {
             $scope.duplicated = false;
 
@@ -1474,7 +1497,6 @@ angular.module('compass.wizard', [
         }
     });
 
-
     $scope.$watch(function() {
         return wizardFactory.getCommitState()
     }, function(newCommitState, oldCommitState) {
@@ -1645,6 +1667,15 @@ angular.module('compass.wizard', [
         })
         //TODO: error handling
     };
+
+    $scope.returnStep = function(reviewName) {
+        for (var i = 0; i < $scope.steps.length; i++) {
+            if (reviewName == $scope.steps[i].name) {
+                $scope.skipForward(i + 1);
+            }
+        }
+    };
+
 })
     .directive('ngKeypress', function() {
         return function(scope, element, attrs) {

v2/src/app/wizard/wizard.tpl.html

@@ -5,11 +5,9 @@
             <h1>Create Cluster Wizard</h1>
             <span us-spinner="{radius:30, length: 20, lines:13, width:10}" spinner-key="spinner-1"></span>
         </div>
-
         <div id="create-cluster-wizard">
             <ul class="wizard-steps">
                 <li ng-repeat="step in steps" class="{{step.state}}" ng-click="skipForward(step.id)">
-                    
                     <span class="step">
                         <img src="assets/img/{{step.name}}.png" width="50px" height="50px" style="margin-left: -4.5px; margin-top: -5px;">
                     </span>
@@ -17,7 +15,6 @@
                 </li>
             </ul>
             <div class="space-10"></div>
-
             <div class="widget-box">
                 <div class="widget-header widget-header-flat widget-header-small">
                     <h5 class="widget-title">
@@ -33,7 +30,6 @@
                 </div>
             </div>
             <div class="space-10"></div>
-
             <div class="wizard-actions">
                 <button ng-click="stepBackward()" ng-disabled="currentStep == 1" class="btn btn-grey btn-prev-spacing" ng-class="{'btn-light' : currentStep == 1}">
                     <i class="ace-icon fa fa-arrow-left"></i>