Show a slider to select service weights

app/scripts/directives/oscRouting.js

@@ -54,6 +54,7 @@ angular.module("openshiftConsole")
       },
       link: function(scope, element, attrs, formCtl) {
         scope.form = formCtl;
+        scope.controls = {};
 
         scope.disableWildcards = Constants.DISABLE_WILDCARD_ROUTES;
 
@@ -175,9 +176,42 @@ angular.module("openshiftConsole")
 
           // Add a new value.
           scope.route.alternateServices.push({
-            service: firstUnselected
+            service: firstUnselected,
+            weight: 1
           });
+
+          if (!_.has(scope, 'route.to.weight')) {
+            _.set(scope, 'route.to.weight', 1);
+          }
+        };
+
+        scope.weightAsPercentage = function(weight) {
+          weight = weight || 0;
+
+          var total = _.get(scope, 'route.to.weight', 0);
+          _.each(scope.route.alternateServices, function(alternate) {
+            total += _.get(alternate, 'weight', 0);
+          });
+
+          if (!total) {
+            return '';
+          }
+
+          var percentage = (weight / total) * 100;
+          return d3.round(percentage, 1) + '%';
         };
+
+        scope.$watch('controls.rangeSlider', function(weight, previous) {
+          if (weight === previous) {
+            return;
+          }
+
+          // Once the values are changed using the slider, set the weights as precentages.
+          // Slider range is 0-100.
+          weight = parseInt(weight, 10);
+          _.set(scope, 'route.to.weight', weight);
+          _.set(scope, 'route.alternateServices[0].weight', 100 - weight);
+        });
       }
     };
   })

app/styles/_forms.less

@@ -42,3 +42,22 @@
     margin-top: 5px;
   }
 }
+
+.weight-slider-values {
+  .flex-display(@display: flex);
+  .flex-direction(@direction: column);
+  .service-name {
+    font-weight: 600;
+  }
+  .weight-percentage {
+    font-size: 15px;
+    margin-left: 5px;
+  }
+  @media (min-width: @screen-sm-min) {
+    .flex-direction(@direction: row);
+    justify-content: space-between;
+    .weight-percentage {
+      margin-right: 5px;
+    }
+  }
+}

app/views/directives/osc-routing.html

@@ -109,7 +109,7 @@
     <div ng-if="services">
       <osc-routing-service model="route.to"
                            services="services"
-                           show-weight="route.alternateServices.length">
+                           show-weight="route.alternateServices.length > 1 || (controls.hideSlider && route.alternateServices.length)">
       </osc-routing-service>
     </div>
 
@@ -140,7 +140,7 @@ <h3>Alternate Services</h3>
         <osc-routing-service model="alternate"
                              services="alternateServiceOptions"
                              is-alternate="true"
-                             show-weight="true">
+                             show-weight="route.alternateServices.length > 1 || controls.hideSlider">
         </osc-routing-service>
         <a href="" ng-click="route.alternateServices.splice($index, 1)">Remove Service</a>
         <span ng-if="$last && route.alternateServices.length < alternateServiceOptions.length">
@@ -155,6 +155,46 @@ <h3>Alternate Services</h3>
       </div>
     </div>
 
+    <!-- If there is exactly one alternate service, let the user change the weights using a slider. -->
+    <div ng-if="route.alternateServices.length === 1 && !controls.hideSlider">
+      <h3>Service Weights</h3>
+      <div class="form-group">
+        <div class="weight-slider-values">
+          <div>
+            <span class="service-name">{{route.to.service.metadata.name}}</span>
+            <span class="weight-percentage">{{weightAsPercentage(route.to.weight)}}</span>
+          </div>
+          <div>
+            <span class="weight-percentage hidden-xs">{{weightAsPercentage(route.alternateServices[0].weight)}}</span>
+            <span class="service-name">{{route.alternateServices[0].service.metadata.name}}</span>
+            <span class="weight-percentage visible-xs-inline">{{weightAsPercentage(route.alternateServices[0].weight)}}</span>
+          </div>
+        </div>
+        <label class="sr-only" for="weight-slider">Service {{route.to.service.metadata.name}} Weight</label>
+        <input
+            id="weight-slider"
+            type="range"
+            min="0"
+            max="100"
+            step="1"
+            list="ticks"
+            ng-model="controls.rangeSlider"
+            aria-describedby="weight-slider-help"
+            class="mar-top-md">
+        <datalist id="ticks">
+          <option>0</option>
+          <option>25</option>
+          <option>50</option>
+          <option>75</option>
+          <option>100</option>
+        </datalist>
+        <div class="help-block" id="weight-slider-help">
+          Percentage of traffic sent to each service. Drag the slider to adjust the values or
+          <a href="" ng-click="controls.hideSlider = true">edit weights as integers</a>.
+        </div>
+      </div>
+    </div>
+
     <div class="checkbox">
       <label>
         <input type="checkbox" ng-model="secureRoute" aria-describedby="secure-route-help">

dist/scripts/scripts.js

@@ -9917,7 +9917,7 @@ label:"Redirect"
 } ];
 } ],
 link:function(b, c, d, e) {
-b.form = e, b.disableWildcards = a.DISABLE_WILDCARD_ROUTES, b.disableWildcards ? b.hostnamePattern = /^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/ :b.hostnamePattern = /^(\*(\.[a-z0-9]([-a-z0-9]*[a-z0-9]))+|[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*)$/;
+b.form = e, b.controls = {}, b.disableWildcards = a.DISABLE_WILDCARD_ROUTES, b.disableWildcards ? b.hostnamePattern = /^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/ :b.hostnamePattern = /^(\*(\.[a-z0-9]([-a-z0-9]*[a-z0-9]))+|[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*)$/;
 var f = function(a) {
 a && (b.unnamedServicePort = 1 === a.spec.ports.length && !a.spec.ports[0].name, a.spec.ports.length && !b.unnamedServicePort ? b.route.portOptions = _.map(a.spec.ports, function(a) {
 return {
@@ -9956,9 +9956,20 @@ service:a
 });
 });
 b.route.alternateServices.push({
-service:a
+service:a,
+weight:1
+}), _.has(b, "route.to.weight") || _.set(b, "route.to.weight", 1);
+}, b.weightAsPercentage = function(a) {
+a = a || 0;
+var c = _.get(b, "route.to.weight", 0);
+if (_.each(b.route.alternateServices, function(a) {
+c += _.get(a, "weight", 0);
+}), !c) return "";
+var d = a / c * 100;
+return d3.round(d, 1) + "%";
+}, b.$watch("controls.rangeSlider", function(a, c) {
+a !== c && (a = parseInt(a, 10), _.set(b, "route.to.weight", a), _.set(b, "route.alternateServices[0].weight", 100 - a));
 });
-};
 }
 };
 } ]).directive("oscRoutingService", function() {

dist/scripts/templates.js

@@ -7692,7 +7692,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "\n" +
     "<div ng-if=\"services\">\n" +
-    "<osc-routing-service model=\"route.to\" services=\"services\" show-weight=\"route.alternateServices.length\">\n" +
+    "<osc-routing-service model=\"route.to\" services=\"services\" show-weight=\"route.alternateServices.length > 1 || (controls.hideSlider && route.alternateServices.length)\">\n" +
     "</osc-routing-service>\n" +
     "</div>\n" +
     "<div ng-if=\"alternateServiceOptions.length && !route.alternateServices.length\" class=\"form-group\">\n" +
@@ -7717,7 +7717,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<div ng-if=\"route.alternateServices.length\">\n" +
     "<h3>Alternate Services</h3>\n" +
     "<div ng-repeat=\"alternate in route.alternateServices\" class=\"form-group\">\n" +
-    "<osc-routing-service model=\"alternate\" services=\"alternateServiceOptions\" is-alternate=\"true\" show-weight=\"true\">\n" +
+    "<osc-routing-service model=\"alternate\" services=\"alternateServiceOptions\" is-alternate=\"true\" show-weight=\"route.alternateServices.length > 1 || controls.hideSlider\">\n" +
     "</osc-routing-service>\n" +
     "<a href=\"\" ng-click=\"route.alternateServices.splice($index, 1)\">Remove Service</a>\n" +
     "<span ng-if=\"$last && route.alternateServices.length < alternateServiceOptions.length\">\n" +
@@ -7731,6 +7731,36 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</span>\n" +
     "</div>\n" +
     "</div>\n" +
+    "\n" +
+    "<div ng-if=\"route.alternateServices.length === 1 && !controls.hideSlider\">\n" +
+    "<h3>Service Weights</h3>\n" +
+    "<div class=\"form-group\">\n" +
+    "<div class=\"weight-slider-values\">\n" +
+    "<div>\n" +
+    "<span class=\"service-name\">{{route.to.service.metadata.name}}</span>\n" +
+    "<span class=\"weight-percentage\">{{weightAsPercentage(route.to.weight)}}</span>\n" +
+    "</div>\n" +
+    "<div>\n" +
+    "<span class=\"weight-percentage hidden-xs\">{{weightAsPercentage(route.alternateServices[0].weight)}}</span>\n" +
+    "<span class=\"service-name\">{{route.alternateServices[0].service.metadata.name}}</span>\n" +
+    "<span class=\"weight-percentage visible-xs-inline\">{{weightAsPercentage(route.alternateServices[0].weight)}}</span>\n" +
+    "</div>\n" +
+    "</div>\n" +
+    "<label class=\"sr-only\" for=\"weight-slider\">Service {{route.to.service.metadata.name}} Weight</label>\n" +
+    "<input id=\"weight-slider\" type=\"range\" min=\"0\" max=\"100\" step=\"1\" list=\"ticks\" ng-model=\"controls.rangeSlider\" aria-describedby=\"weight-slider-help\" class=\"mar-top-md\">\n" +
+    "<datalist id=\"ticks\">\n" +
+    "<option>0</option>\n" +
+    "<option>25</option>\n" +
+    "<option>50</option>\n" +
+    "<option>75</option>\n" +
+    "<option>100</option>\n" +
+    "</datalist>\n" +
+    "<div class=\"help-block\" id=\"weight-slider-help\">\n" +
+    "Percentage of traffic sent to each service. Drag the slider to adjust the values or\n" +
+    "<a href=\"\" ng-click=\"controls.hideSlider = true\">edit weights as integers</a>.\n" +
+    "</div>\n" +
+    "</div>\n" +
+    "</div>\n" +
     "<div class=\"checkbox\">\n" +
     "<label>\n" +
     "<input type=\"checkbox\" ng-model=\"secureRoute\" aria-describedby=\"secure-route-help\">\n" +

dist/styles/main.css

@@ -1,4 +1,3 @@
-.ie9.layout-pf-alt-fixed .nav-pf-vertical-alt,.ie9.layout-pf-fixed .nav-pf-secondary-nav,.ie9.layout-pf-fixed .nav-pf-tertiary-nav,.ie9.layout-pf-fixed .nav-pf-vertical,hr{box-sizing:content-box}
 div.code,pre,textarea{overflow:auto}
 .text-left,caption,th{text-align:left}
 .btn,.datepicker table{-webkit-user-select:none;-moz-user-select:none}
@@ -32,7 +31,7 @@ sup{top:-.5em}
 sub{bottom:-.25em}
 img{border:0;vertical-align:middle}
 svg:not(:root){overflow:hidden}
-hr{height:0}
+hr{box-sizing:content-box;height:0}
 code,div.code,kbd,pre,samp{font-size:1em}
 button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}
 button{overflow:visible}
@@ -2428,6 +2427,7 @@ select.bs-select-hidden,select.selectpicker{display:none!important}
 .c3 text,.log-line-number{-moz-user-select:none;-webkit-user-select:none}
 .bootstrap-switch .bootstrap-switch-container{display:inline-block;top:0;border-radius:1px;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
 .bootstrap-switch .bootstrap-switch-handle-off,.bootstrap-switch .bootstrap-switch-handle-on,.bootstrap-switch .bootstrap-switch-label{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block!important;height:100%;padding:2px 6px;font-size:13px;line-height:21px}
+.ie9.layout-pf-alt-fixed .nav-pf-vertical-alt,.ie9.layout-pf-fixed .nav-pf-secondary-nav,.ie9.layout-pf-fixed .nav-pf-tertiary-nav,.ie9.layout-pf-fixed .nav-pf-vertical{box-sizing:content-box}
 .bootstrap-switch .bootstrap-switch-handle-off,.bootstrap-switch .bootstrap-switch-handle-on{text-align:center;z-index:1}
 .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary{color:#fff;background:#0088ce}
 .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info{color:#fff;background:#00659c}
@@ -3588,6 +3588,12 @@ to{transform:rotate(359deg)}
 .compute-resource{margin-bottom:5px}
 @media (max-width:767px){.compute-resource .inline-select{margin-top:5px}
 }
+.weight-slider-values{display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-ms-flex;display:flex;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
+.weight-slider-values .service-name{font-weight:600}
+.weight-slider-values .weight-percentage{font-size:15px;margin-left:5px}
+@media (min-width:768px){.weight-slider-values{-webkit-flex-direction:row;-moz-flex-direction:row;-ms-flex-direction:row;flex-direction:row;justify-content:space-between}
+.weight-slider-values .weight-percentage{margin-right:5px}
+}
 .card-pf{box-shadow:0 3px 1px -2px rgba(0,0,0,.15),0 2px 2px 0 rgba(0,0,0,.1),0 1px 5px 0 rgba(0,0,0,.09)}
 .card-pf .image-icon,.card-pf .template-icon{font-size:28px;line-height:1;margin-right:15px;opacity:.38}
 .card-pf-badge{color:#999;font-size:11px;text-transform:uppercase}