Allow users to type in ports for health checks

Author: spadgett

app/scripts/directives/editProbe.js

@@ -13,12 +13,31 @@ angular.module('openshiftConsole')
         scope.id = _.uniqueId('edit-probe-');
         scope.probe = scope.probe || {};
 
+        scope.types = [{
+          id: 'httpGet',
+          label: 'HTTP'
+        }, {
+          id: 'exec',
+          label: 'Container Command'
+        }, {
+          id: 'tcpSocket',
+          label: 'TCP Socket'
+        }];
+
         // Map of previous probes by type so switching to a different type and
         // back remembers the previous values.
         scope.previousProbes = {};
 
-        // Only allow selecting TCP ports for HTTP and TCP socket checks.
+        // Show only TCP ports for HTTP and TCP socket checks.
         scope.tcpPorts = _.filter(scope.exposedPorts, { protocol: "TCP" });
+        var initialValue = _.get(scope, 'probe.httpGet.port') || _.get(scope, 'probe.exec.port');
+        if (initialValue && !_.some(scope.tcpPorts, { containerPort: initialValue })) {
+          scope.tcpPorts = [{
+            containerPort: initialValue,
+            protocol: 'TCP'
+          }].concat(scope.tcpPorts);
+        }
+        scope.portOptions = scope.tcpPorts;
 
         var updateSelectedType = function(newType, oldType) {
           scope.probe = scope.probe || {};
@@ -52,25 +71,46 @@ angular.module('openshiftConsole')
         };
 
         // Initialize type from existing data.
+        var type;
         if (scope.probe.httpGet) {
-          scope.type = 'httpGet';
+          type = 'httpGet';
         } else if (scope.probe.exec) {
-          scope.type = 'exec';
+          type = 'exec';
         } else if (scope.probe.tcpSocket) {
-          scope.type = 'tcpSocket';
+          type = 'tcpSocket';
         } else {
           // Set defaults for new probe.
-          scope.type = 'httpGet';
+          type = 'httpGet';
           updateSelectedType('httpGet');
         }
 
-        scope.$watch('type', function(newType, oldType) {
+        _.set(scope, 'selected.type', type);
+
+        scope.$watch('selected.type', function(newType, oldType) {
           if (newType === oldType) {
             return;
           }
 
           updateSelectedType(newType, oldType);
         });
+
+        // Allow the user to type in a new value.
+        scope.refreshPorts = function(search) {
+          if (!/^\d+$/.test(search)) {
+            return;
+          }
+
+          var options = scope.tcpPorts;
+          search = parseInt(search, 10);
+          if (search && !_.some(options, { containerPort: search })) {
+            options = [{
+              containerPort: search,
+              protocol: 'TCP'
+            }].concat(options);
+          }
+
+          scope.portOptions = _.uniq(options);
+        };
       }
     };
   });

app/views/directives/_edit-probe.html

@@ -1,17 +1,12 @@
 <ng-form name="form">
   <div class="form-group">
-    <label ng-attr-for="{{id}}-type" class="required">Type</label>
-    <select
-        ng-model="type"
-        ng-attr-id="{{id}}-type"
-        required
-        class="form-control">
-      <option value="httpGet">HTTP</option>
-      <option value="exec">Container Command</option>
-      <option value="tcpSocket">TCP Socket</option>
-    </select>
+    <label class="required">Type</label>
+    <ui-select ng-model="selected.type" required search-enabled="false">
+      <ui-select-match>{{$select.selected.label}}</ui-select-match>
+      <ui-select-choices repeat="item.id as item in types">{{item.label}}</ui-select-choices>
+    </ui-select>
   </div>
-  <fieldset ng-if="type === 'httpGet'">
+  <fieldset ng-if="selected.type === 'httpGet'">
     <div class="form-group">
       <label ng-attr-for="{{id}}-path">Path</label>
       <div>
@@ -27,33 +22,30 @@
       </div>
     </div>
     <div class="form-group">
-      <label ng-attr-for="{{id}}-http-port" class="required">Port</label>
-      <select
-          id="{{id}}-http-port"
-          ng-model="probe.httpGet.port"
-          ng-options="port.containerPort as port.containerPort for port in tcpPorts"
-          required
-          class="form-control">
-      </select>
-      <div ng-if="!tcpPorts.length" class="has-error">
-        <span class="help-block">Container has no TCP ports.</span>
-      </div>
+      <label class="required">Port</label>
+      <ui-select ng-model="probe.httpGet.port" required>
+        <ui-select-match>{{$select.selected.containerPort}}</ui-select-match>
+        <ui-select-choices
+            repeat="port.containerPort as port in portOptions"
+            refresh="refreshPorts($select.search, $select.selected)"
+            refresh-delay="200">{{port.containerPort}}</ui-select-choices>
+      </ui-select>
     </div>
   </fieldset>
-  <fieldset ng-if="type === 'exec'">
+  <fieldset ng-if="selected.type === 'exec'">
     <label class="required">Command</label>
     <edit-command args="probe.exec.command" is-required="true"></edit-command>
   </fieldset>
-  <fieldset ng-if="type === 'tcpSocket'">
+  <fieldset ng-if="selected.type === 'tcpSocket'">
     <div class="form-group">
-      <label ng-attr-for="{{id}}-tcp-port" class="required">Port</label>
-      <select
-          id="{{id}}-tcp-port"
-          ng-model="probe.tcpSocket.port"
-          ng-options="port.containerPort as port.containerPort for port in tcpPorts"
-          required
-          class="form-control">
-      </select>
+      <label class="required">Port</label>
+      <ui-select ng-model="probe.tcpSocket.port" required>
+        <ui-select-match>{{$select.selected.containerPort}}</ui-select-match>
+        <ui-select-choices
+            repeat="port.containerPort as port in portOptions"
+            refresh="refreshPorts($select.search, $select.selected)"
+            refresh-delay="200">{{port.containerPort}}</ui-select-choices>
+      </ui-select>
     </div>
   </fieldset>
   <div class="form-group">

dist/scripts/scripts.js

@@ -11547,10 +11547,26 @@ exposedPorts:"="
 },
 templateUrl:"views/directives/_edit-probe.html",
 link:function(a) {
-a.id = _.uniqueId("edit-probe-"), a.probe = a.probe || {}, a.previousProbes = {}, a.tcpPorts = _.filter(a.exposedPorts, {
+a.id = _.uniqueId("edit-probe-"), a.probe = a.probe || {}, a.types = [ {
+id:"httpGet",
+label:"HTTP"
+}, {
+id:"exec",
+label:"Container Command"
+}, {
+id:"tcpSocket",
+label:"TCP Socket"
+} ], a.previousProbes = {}, a.tcpPorts = _.filter(a.exposedPorts, {
 protocol:"TCP"
 });
-var b = function(b, c) {
+var b = _.get(a, "probe.httpGet.port") || _.get(a, "probe.exec.port");
+b && !_.some(a.tcpPorts, {
+containerPort:b
+}) && (a.tcpPorts = [ {
+containerPort:b,
+protocol:"TCP"
+} ].concat(a.tcpPorts)), a.portOptions = a.tcpPorts;
+var c, d = function(b, c) {
 if (a.probe = a.probe || {}, a.previousProbes[c] = a.probe[c], delete a.probe[c], a.probe[b] = a.previousProbes[b], !a.probe[b]) switch (b) {
 case "httpGet":
 case "tcpSocket":
@@ -11568,9 +11584,19 @@ command:[]
 };
 }
 };
-a.probe.httpGet ? a.type = "httpGet" :a.probe.exec ? a.type = "exec" :a.probe.tcpSocket ? a.type = "tcpSocket" :(a.type = "httpGet", b("httpGet")), a.$watch("type", function(a, c) {
-a !== c && b(a, c);
-});
+a.probe.httpGet ? c = "httpGet" :a.probe.exec ? c = "exec" :a.probe.tcpSocket ? c = "tcpSocket" :(c = "httpGet", d("httpGet")), _.set(a, "selected.type", c), a.$watch("selected.type", function(a, b) {
+a !== b && d(a, b);
+}), a.refreshPorts = function(b) {
+if (/^\d+$/.test(b)) {
+var c = a.tcpPorts;
+b = parseInt(b, 10), b && !_.some(c, {
+containerPort:b
+}) && (c = [ {
+containerPort:b,
+protocol:"TCP"
+} ].concat(c)), a.portOptions = _.uniq(c);
+}
+};
 }
 };
 }), angular.module("openshiftConsole").directive("editCommand", [ "$filter", function(a) {

dist/scripts/templates.js

@@ -4926,38 +4926,38 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
   $templateCache.put('views/directives/_edit-probe.html',
     "<ng-form name=\"form\">\n" +
     "<div class=\"form-group\">\n" +
-    "<label ng-attr-for=\"{{id}}-type\" class=\"required\">Type</label>\n" +
-    "<select ng-model=\"type\" ng-attr-id=\"{{id}}-type\" required class=\"form-control\">\n" +
-    "<option value=\"httpGet\">HTTP</option>\n" +
-    "<option value=\"exec\">Container Command</option>\n" +
-    "<option value=\"tcpSocket\">TCP Socket</option>\n" +
-    "</select>\n" +
+    "<label class=\"required\">Type</label>\n" +
+    "<ui-select ng-model=\"selected.type\" required search-enabled=\"false\">\n" +
+    "<ui-select-match>{{$select.selected.label}}</ui-select-match>\n" +
+    "<ui-select-choices repeat=\"item.id as item in types\">{{item.label}}</ui-select-choices>\n" +
+    "</ui-select>\n" +
     "</div>\n" +
-    "<fieldset ng-if=\"type === 'httpGet'\">\n" +
+    "<fieldset ng-if=\"selected.type === 'httpGet'\">\n" +
     "<div class=\"form-group\">\n" +
     "<label ng-attr-for=\"{{id}}-path\">Path</label>\n" +
     "<div>\n" +
     "<input ng-attr-id=\"{{id}}-path\" ng-model=\"probe.httpGet.path\" type=\"text\" placeholder=\"/\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" class=\"form-control\">\n" +
     "</div>\n" +
     "</div>\n" +
     "<div class=\"form-group\">\n" +
-    "<label ng-attr-for=\"{{id}}-http-port\" class=\"required\">Port</label>\n" +
-    "<select id=\"{{id}}-http-port\" ng-model=\"probe.httpGet.port\" ng-options=\"port.containerPort as port.containerPort for port in tcpPorts\" required class=\"form-control\">\n" +
-    "</select>\n" +
-    "<div ng-if=\"!tcpPorts.length\" class=\"has-error\">\n" +
-    "<span class=\"help-block\">Container has no TCP ports.</span>\n" +
-    "</div>\n" +
+    "<label class=\"required\">Port</label>\n" +
+    "<ui-select ng-model=\"probe.httpGet.port\" required>\n" +
+    "<ui-select-match>{{$select.selected.containerPort}}</ui-select-match>\n" +
+    "<ui-select-choices repeat=\"port.containerPort as port in portOptions\" refresh=\"refreshPorts($select.search, $select.selected)\" refresh-delay=\"200\">{{port.containerPort}}</ui-select-choices>\n" +
+    "</ui-select>\n" +
     "</div>\n" +
     "</fieldset>\n" +
-    "<fieldset ng-if=\"type === 'exec'\">\n" +
+    "<fieldset ng-if=\"selected.type === 'exec'\">\n" +
     "<label class=\"required\">Command</label>\n" +
     "<edit-command args=\"probe.exec.command\" is-required=\"true\"></edit-command>\n" +
     "</fieldset>\n" +
-    "<fieldset ng-if=\"type === 'tcpSocket'\">\n" +
+    "<fieldset ng-if=\"selected.type === 'tcpSocket'\">\n" +
     "<div class=\"form-group\">\n" +
-    "<label ng-attr-for=\"{{id}}-tcp-port\" class=\"required\">Port</label>\n" +
-    "<select id=\"{{id}}-tcp-port\" ng-model=\"probe.tcpSocket.port\" ng-options=\"port.containerPort as port.containerPort for port in tcpPorts\" required class=\"form-control\">\n" +
-    "</select>\n" +
+    "<label class=\"required\">Port</label>\n" +
+    "<ui-select ng-model=\"probe.tcpSocket.port\" required>\n" +
+    "<ui-select-match>{{$select.selected.containerPort}}</ui-select-match>\n" +
+    "<ui-select-choices repeat=\"port.containerPort as port in portOptions\" refresh=\"refreshPorts($select.search, $select.selected)\" refresh-delay=\"200\">{{port.containerPort}}</ui-select-choices>\n" +
+    "</ui-select>\n" +
     "</div>\n" +
     "</fieldset>\n" +
     "<div class=\"form-group\">\n" +