Skip to content

Commit f89c374

Browse files
spadgettspadgett
committed
Show a slider to select service weights
When editing a route with two services, let users change the service weights using a slider. For 3 or more services, fall back to entering the weight values as integers.
1 parent 7973c2b commit f89c374

File tree

6 files changed

+150
-10
lines changed

6 files changed

+150
-10
lines changed

‎app/scripts/directives/oscRouting.js

+35-1
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ angular.module("openshiftConsole")
5454
},
5555
link: function(scope, element, attrs, formCtl) {
5656
scope.form = formCtl;
57+
scope.controls = {};
5758

5859
scope.disableWildcards = Constants.DISABLE_WILDCARD_ROUTES;
5960

@@ -175,9 +176,42 @@ angular.module("openshiftConsole")
175176

176177
// Add a new value.
177178
scope.route.alternateServices.push({
178-
service: firstUnselected
179+
service: firstUnselected,
180+
weight: 1
179181
});
182+
183+
if (!_.has(scope, 'route.to.weight')) {
184+
_.set(scope, 'route.to.weight', 1);
185+
}
186+
};
187+
188+
scope.weightAsPercentage = function(weight) {
189+
weight = weight || 0;
190+
191+
var total = _.get(scope, 'route.to.weight', 0);
192+
_.each(scope.route.alternateServices, function(alternate) {
193+
total += _.get(alternate, 'weight', 0);
194+
});
195+
196+
if (!total) {
197+
return '';
198+
}
199+
200+
var percentage = (weight / total) * 100;
201+
return d3.round(percentage, 1) + '%';
180202
};
203+
204+
scope.$watch('controls.rangeSlider', function(weight, previous) {
205+
if (weight === previous) {
206+
return;
207+
}
208+
209+
// Once the values are changed using the slider, set the weights as precentages.
210+
// Slider range is 0-100.
211+
weight = parseInt(weight, 10);
212+
_.set(scope, 'route.to.weight', weight);
213+
_.set(scope, 'route.alternateServices[0].weight', 100 - weight);
214+
});
181215
}
182216
};
183217
})

‎app/styles/_forms.less

+19
Original file line numberDiff line numberDiff line change
@@ -42,3 +42,22 @@
4242
margin-top: 5px;
4343
}
4444
}
45+
46+
.weight-slider-values {
47+
.flex-display(@display: flex);
48+
.flex-direction(@direction: column);
49+
.service-name {
50+
font-weight: 600;
51+
}
52+
.weight-percentage {
53+
font-size: 15px;
54+
margin-left: 5px;
55+
}
56+
@media (min-width: @screen-sm-min) {
57+
.flex-direction(@direction: row);
58+
justify-content: space-between;
59+
.weight-percentage {
60+
margin-right: 5px;
61+
}
62+
}
63+
}

‎app/views/directives/osc-routing.html

+42-2
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@
109109
<div ng-if="services">
110110
<osc-routing-service model="route.to"
111111
services="services"
112-
show-weight="route.alternateServices.length">
112+
show-weight="route.alternateServices.length > 1 || (controls.hideSlider && route.alternateServices.length)">
113113
</osc-routing-service>
114114
</div>
115115

@@ -140,7 +140,7 @@ <h3>Alternate Services</h3>
140140
<osc-routing-service model="alternate"
141141
services="alternateServiceOptions"
142142
is-alternate="true"
143-
show-weight="true">
143+
show-weight="route.alternateServices.length > 1 || controls.hideSlider">
144144
</osc-routing-service>
145145
<a href="" ng-click="route.alternateServices.splice($index, 1)">Remove Service</a>
146146
<span ng-if="$last && route.alternateServices.length < alternateServiceOptions.length">
@@ -155,6 +155,46 @@ <h3>Alternate Services</h3>
155155
</div>
156156
</div>
157157

158+
<!-- If there is exactly one alternate service, let the user change the weights using a slider. -->
159+
<div ng-if="route.alternateServices.length === 1 && !controls.hideSlider">
160+
<h3>Service Weights</h3>
161+
<div class="form-group">
162+
<div class="weight-slider-values">
163+
<div>
164+
<span class="service-name">{{route.to.service.metadata.name}}</span>
165+
<span class="weight-percentage">{{weightAsPercentage(route.to.weight)}}</span>
166+
</div>
167+
<div>
168+
<span class="weight-percentage hidden-xs">{{weightAsPercentage(route.alternateServices[0].weight)}}</span>
169+
<span class="service-name">{{route.alternateServices[0].service.metadata.name}}</span>
170+
<span class="weight-percentage visible-xs-inline">{{weightAsPercentage(route.alternateServices[0].weight)}}</span>
171+
</div>
172+
</div>
173+
<label class="sr-only" for="weight-slider">Service {{route.to.service.metadata.name}} Weight</label>
174+
<input
175+
id="weight-slider"
176+
type="range"
177+
min="0"
178+
max="100"
179+
step="1"
180+
list="ticks"
181+
ng-model="controls.rangeSlider"
182+
aria-describedby="weight-slider-help"
183+
class="mar-top-md">
184+
<datalist id="ticks">
185+
<option>0</option>
186+
<option>25</option>
187+
<option>50</option>
188+
<option>75</option>
189+
<option>100</option>
190+
</datalist>
191+
<div class="help-block" id="weight-slider-help">
192+
Percentage of traffic sent to each service. Drag the slider to adjust the values or
193+
<a href="" ng-click="controls.hideSlider = true">edit weights as integers</a>.
194+
</div>
195+
</div>
196+
</div>
197+
158198
<div class="checkbox">
159199
<label>
160200
<input type="checkbox" ng-model="secureRoute" aria-describedby="secure-route-help">

‎dist/scripts/scripts.js

+14-3
Original file line numberDiff line numberDiff line change
@@ -9917,7 +9917,7 @@ label:"Redirect"
99179917
} ];
99189918
} ],
99199919
link:function(b, c, d, e) {
9920-
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])?)*)$/;
9920+
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])?)*)$/;
99219921
var f = function(a) {
99229922
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) {
99239923
return {
@@ -9956,9 +9956,20 @@ service:a
99569956
});
99579957
});
99589958
b.route.alternateServices.push({
9959-
service:a
9959+
service:a,
9960+
weight:1
9961+
}), _.has(b, "route.to.weight") || _.set(b, "route.to.weight", 1);
9962+
}, b.weightAsPercentage = function(a) {
9963+
a = a || 0;
9964+
var c = _.get(b, "route.to.weight", 0);
9965+
if (_.each(b.route.alternateServices, function(a) {
9966+
c += _.get(a, "weight", 0);
9967+
}), !c) return "";
9968+
var d = a / c * 100;
9969+
return d3.round(d, 1) + "%";
9970+
}, b.$watch("controls.rangeSlider", function(a, c) {
9971+
a !== c && (a = parseInt(a, 10), _.set(b, "route.to.weight", a), _.set(b, "route.alternateServices[0].weight", 100 - a));
99609972
});
9961-
};
99629973
}
99639974
};
99649975
} ]).directive("oscRoutingService", function() {

‎dist/scripts/templates.js

+32-2
Original file line numberDiff line numberDiff line change
@@ -7692,7 +7692,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
76927692
"</div>\n" +
76937693
"\n" +
76947694
"<div ng-if=\"services\">\n" +
7695-
"<osc-routing-service model=\"route.to\" services=\"services\" show-weight=\"route.alternateServices.length\">\n" +
7695+
"<osc-routing-service model=\"route.to\" services=\"services\" show-weight=\"route.alternateServices.length > 1 || (controls.hideSlider && route.alternateServices.length)\">\n" +
76967696
"</osc-routing-service>\n" +
76977697
"</div>\n" +
76987698
"<div ng-if=\"alternateServiceOptions.length && !route.alternateServices.length\" class=\"form-group\">\n" +
@@ -7717,7 +7717,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
77177717
"<div ng-if=\"route.alternateServices.length\">\n" +
77187718
"<h3>Alternate Services</h3>\n" +
77197719
"<div ng-repeat=\"alternate in route.alternateServices\" class=\"form-group\">\n" +
7720-
"<osc-routing-service model=\"alternate\" services=\"alternateServiceOptions\" is-alternate=\"true\" show-weight=\"true\">\n" +
7720+
"<osc-routing-service model=\"alternate\" services=\"alternateServiceOptions\" is-alternate=\"true\" show-weight=\"route.alternateServices.length > 1 || controls.hideSlider\">\n" +
77217721
"</osc-routing-service>\n" +
77227722
"<a href=\"\" ng-click=\"route.alternateServices.splice($index, 1)\">Remove Service</a>\n" +
77237723
"<span ng-if=\"$last && route.alternateServices.length < alternateServiceOptions.length\">\n" +
@@ -7731,6 +7731,36 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
77317731
"</span>\n" +
77327732
"</div>\n" +
77337733
"</div>\n" +
7734+
"\n" +
7735+
"<div ng-if=\"route.alternateServices.length === 1 && !controls.hideSlider\">\n" +
7736+
"<h3>Service Weights</h3>\n" +
7737+
"<div class=\"form-group\">\n" +
7738+
"<div class=\"weight-slider-values\">\n" +
7739+
"<div>\n" +
7740+
"<span class=\"service-name\">{{route.to.service.metadata.name}}</span>\n" +
7741+
"<span class=\"weight-percentage\">{{weightAsPercentage(route.to.weight)}}</span>\n" +
7742+
"</div>\n" +
7743+
"<div>\n" +
7744+
"<span class=\"weight-percentage hidden-xs\">{{weightAsPercentage(route.alternateServices[0].weight)}}</span>\n" +
7745+
"<span class=\"service-name\">{{route.alternateServices[0].service.metadata.name}}</span>\n" +
7746+
"<span class=\"weight-percentage visible-xs-inline\">{{weightAsPercentage(route.alternateServices[0].weight)}}</span>\n" +
7747+
"</div>\n" +
7748+
"</div>\n" +
7749+
"<label class=\"sr-only\" for=\"weight-slider\">Service {{route.to.service.metadata.name}} Weight</label>\n" +
7750+
"<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" +
7751+
"<datalist id=\"ticks\">\n" +
7752+
"<option>0</option>\n" +
7753+
"<option>25</option>\n" +
7754+
"<option>50</option>\n" +
7755+
"<option>75</option>\n" +
7756+
"<option>100</option>\n" +
7757+
"</datalist>\n" +
7758+
"<div class=\"help-block\" id=\"weight-slider-help\">\n" +
7759+
"Percentage of traffic sent to each service. Drag the slider to adjust the values or\n" +
7760+
"<a href=\"\" ng-click=\"controls.hideSlider = true\">edit weights as integers</a>.\n" +
7761+
"</div>\n" +
7762+
"</div>\n" +
7763+
"</div>\n" +
77347764
"<div class=\"checkbox\">\n" +
77357765
"<label>\n" +
77367766
"<input type=\"checkbox\" ng-model=\"secureRoute\" aria-describedby=\"secure-route-help\">\n" +

‎dist/styles/main.css

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
.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}
21
div.code,pre,textarea{overflow:auto}
32
.text-left,caption,th{text-align:left}
43
.btn,.datepicker table{-webkit-user-select:none;-moz-user-select:none}
@@ -32,7 +31,7 @@ sup{top:-.5em}
3231
sub{bottom:-.25em}
3332
img{border:0;vertical-align:middle}
3433
svg:not(:root){overflow:hidden}
35-
hr{height:0}
34+
hr{box-sizing:content-box;height:0}
3635
code,div.code,kbd,pre,samp{font-size:1em}
3736
button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}
3837
button{overflow:visible}
@@ -2428,6 +2427,7 @@ select.bs-select-hidden,select.selectpicker{display:none!important}
24282427
.c3 text,.log-line-number{-moz-user-select:none;-webkit-user-select:none}
24292428
.bootstrap-switch .bootstrap-switch-container{display:inline-block;top:0;border-radius:1px;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
24302429
.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}
2430+
.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}
24312431
.bootstrap-switch .bootstrap-switch-handle-off,.bootstrap-switch .bootstrap-switch-handle-on{text-align:center;z-index:1}
24322432
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary,.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary{color:#fff;background:#0088ce}
24332433
.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)}
35883588
.compute-resource{margin-bottom:5px}
35893589
@media (max-width:767px){.compute-resource .inline-select{margin-top:5px}
35903590
}
3591+
.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}
3592+
.weight-slider-values .service-name{font-weight:600}
3593+
.weight-slider-values .weight-percentage{font-size:15px;margin-left:5px}
3594+
@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}
3595+
.weight-slider-values .weight-percentage{margin-right:5px}
3596+
}
35913597
.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)}
35923598
.card-pf .image-icon,.card-pf .template-icon{font-size:28px;line-height:1;margin-right:15px;opacity:.38}
35933599
.card-pf-badge{color:#999;font-size:11px;text-transform:uppercase}

0 commit comments

Comments
 (0)