Extract port mappings to a separate directive.

This is a refactoring in preparation for allowing to enter
multiple port mappings.

src/app/frontend/deploy/deploy_module.js

@@ -18,6 +18,7 @@ import deployFromSettingsDirective from './deployfromsettings_directive';
 import deployLabelDirective from './deploylabel_directive';
 import deployFromFileDirective from './deployfromfile_directive';
 import fileReaderDirective from './filereader_directive';
+import portMappingsDirective from './portmappings_directive';
 import uploadDirective from './upload_directive';
 import uniqueNameDirective from './uniquename_directive';
 import validProtocolDirective from './validprotocol_directive';
@@ -44,4 +45,5 @@ export default angular.module(
     .directive('kdValidProtocol', validProtocolDirective)
     .directive('kdFileReader', fileReaderDirective)
     .directive('kdUpload', uploadDirective)
+    .directive('kdPortMappings', portMappingsDirective)
     .directive('kdDeployLabel', deployLabelDirective);

src/app/frontend/deploy/deployfromsettings.html

@@ -65,41 +65,9 @@ limitations under the License.
 </kd-help-section>
 
 <kd-help-section>
-  <div ng-repeat="portMapping in ctrl.portMappings">
-    <ng-form name="portMappingForm" layout="row">
-      <md-input-container flex>
-        <label>Port</label>
-        <input ng-model="portMapping.port" type="number" min="0" name="port">
-        <ng-messages for="portMappingForm.port.$error" role="alert" multiple>
-          <ng-message when="number">Port must be an integer.</ng-message>
-          <ng-message when="min">Port must be non-negative.</ng-message>
-        </ng-messages>
-      </md-input-container>
-      <md-input-container flex>
-        <label>Target port</label>
-        <input ng-model="portMapping.targetPort" type="number" min="0" name="targetPort">
-        <ng-messages for="portMappingForm.targetPort.$error" role="alert" multiple>
-          <ng-message when="number">Target port must be an integer.</ng-message>
-          <ng-message when="min">Target port must be non-negative.</ng-message>
-        </ng-messages>
-      </md-input-container>
-      <md-input-container flex="none">
-        <label>Protocol</label>
-        <md-select ng-model="portMapping.protocol" name="protocol" is-external="ctrl.isExternal"
-                   required kd-valid-protocol>
-          <md-option ng-repeat="protocol in ctrl.protocols" ng-value="protocol">
-            {{protocol}}
-          </md-option>
-        </md-select>
-        <md-progress-linear class="kd-deploy-form-progress" md-mode="indeterminate"
-                            ng-show="portMappingForm.protocol.$pending">
-        </md-progress-linear>
-        <ng-messages for="portMappingForm.protocol.$error" role="alert" multiple>
-          <ng-message when="required">Protocol is required.</ng-message>
-          <ng-message when="validProtocol">Invalid protocol.</ng-message>
-      </md-input-container>
-    </ng-form>
-  </div>
+  <kd-port-mappings port-mappings="ctrl.portMappings" protocols="ctrl.protocols"
+      is-external="ctrl.isExternal">
+  </kd-port-mappings>
   <kd-user-help>
     Ports are optional. If specified, a Service will be created mapping the Port (incoming) to a
     target Port seen by the container.
@@ -210,7 +178,7 @@ limitations under the License.
       <a href="">Learn more</a>
     </kd-user-help>
   </kd-help-section>
-  
+
   <kd-help-section>
     <md-switch ng-model="ctrl.runAsPrivileged" class="md-primary">
       Run as privileged

src/app/frontend/deploy/portmappings.html

+<!--
+Copyright 2015 Google Inc. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div ng-repeat="portMapping in ctrl.portMappings">
+  <ng-form name="portMappingForm" layout="row">
+    <md-input-container flex>
+      <label>Port</label>
+      <input ng-model="portMapping.port" type="number" min="0" name="port">
+      <ng-messages for="portMappingForm.port.$error" role="alert" multiple>
+        <ng-message when="number">Port must be an integer.</ng-message>
+        <ng-message when="min">Port must be non-negative.</ng-message>
+      </ng-messages>
+    </md-input-container>
+    <md-input-container flex>
+      <label>Target port</label>
+      <input ng-model="portMapping.targetPort" type="number" min="0" name="targetPort">
+      <ng-messages for="portMappingForm.targetPort.$error" role="alert" multiple>
+        <ng-message when="number">Target port must be an integer.</ng-message>
+        <ng-message when="min">Target port must be non-negative.</ng-message>
+      </ng-messages>
+    </md-input-container>
+    <md-input-container flex="none">
+      <label>Protocol</label>
+      <md-select ng-model="portMapping.protocol" name="protocol" is-external="ctrl.isExternal"
+                 required kd-valid-protocol>
+        <md-option ng-repeat="protocol in ctrl.protocols" ng-value="protocol">
+          {{protocol}}
+        </md-option>
+      </md-select>
+      <md-progress-linear class="kd-deploy-form-progress" md-mode="indeterminate"
+                          ng-show="portMappingForm.protocol.$pending">
+      </md-progress-linear>
+      <ng-messages for="portMappingForm.protocol.$error" role="alert" multiple>
+        <ng-message when="required">Protocol is required.</ng-message>
+        <ng-message when="validProtocol">Invalid protocol.</ng-message>
+    </md-input-container>
+  </ng-form>
+</div>

src/app/frontend/deploy/portmappings_controller.js

+// Copyright 2015 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/**
+ * Controller for the port mappings directive.
+ *
+ * @final
+ */
+export default class PortMappingsController {
+  /** @ngInject */
+  constructor() {
+    /**
+     * Initialized from the scope.
+     * @export {!Array<!backendApi.PortMapping>}
+     */
+    this.portMappings;
+
+    /**
+     * Initialized from the scope.
+     * @export {!Array<string>}
+     */
+    this.protocols;
+
+    /**
+     * Initialized from the scope.
+     * @export {boolean}
+     */
+    this.isExternal;
+  }
+}

src/app/frontend/deploy/portmappings_directive.js

+// Copyright 2015 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import PortMappingsController from './portmappings_controller';
+
+/**
+ * Returns directive definition for port mappings input widget.
+ *
+ * @return {!angular.Directive}
+ */
+export default function portMappingsDirective() {
+  return {
+    controller: PortMappingsController,
+    controllerAs: 'ctrl',
+    templateUrl: 'deploy/portmappings.html',
+    scope: {},
+    bindToController: {
+      'portMappings': '=',
+      'protocols': '=',
+      'isExternal': '=',
+    },
+  };
+}