Fix external endpoints and add node port information to service details (#940)

Author: Sebastian Florek

src/app/backend/resource/common/serviceport.go

@@ -25,13 +25,16 @@ type ServicePort struct {
 
 	// Protocol name, e.g., TCP or UDP.
 	Protocol api.Protocol `json:"protocol"`
+
+	// The port on each node on which service is exposed.
+	NodePort int32 `json:"nodePort"`
 }
 
 // GetServicePorts returns human readable name for the given service ports list.
 func GetServicePorts(apiPorts []api.ServicePort) []ServicePort {
 	var ports []ServicePort
 	for _, port := range apiPorts {
-		ports = append(ports, ServicePort{port.Port, port.Protocol})
+		ports = append(ports, ServicePort{port.Port, port.Protocol, port.NodePort})
 	}
 	return ports
 }

src/app/frontend/common/components/endpoint/endpoint.scss

@@ -0,0 +1,20 @@
+// 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.
+
+.kd-endpoint-icon {
+  font-size: inherit;
+  height: inherit;
+  margin: 0;
+  vertical-align: middle;
+}

src/app/frontend/common/components/endpoint/externalendpoint.html

@@ -20,13 +20,26 @@
    Link is always shown independent of the endpoint capabilities to support HTTP.
 -->
 <div>
-  <div ng-repeat="port in ::$ctrl.endpoint.ports">
-      <a href="http://{{::$ctrl.endpoint.host}}:{{::port.port}}" target="_blank"
-         layout layout-align="start center">
-        <kd-middle-ellipsis display-string="{{::$ctrl.endpoint.host}}:{{::port.port}}">
-        </kd-middle-ellipsis>
-        &nbsp;
-        <i class="material-icons kd-text-icon">open_in_new</i>
-      </a>
+  <div ng-repeat="endpoint in ::$ctrl.endpoints">
+    <div ng-repeat="port in ::endpoint.ports">
+      <div>
+        <a href="http://{{::endpoint.host}}:{{::port.port}}" target="_blank"
+           layout layout-align="start center">
+          <kd-middle-ellipsis display-string="{{::endpoint.host}}:{{::port.port}}">
+          </kd-middle-ellipsis>
+          &nbsp;
+          <md-icon class="kd-endpoint-icon">open_in_new</md-icon>
+        </a>
+      </div>
+      <div>
+        <a href="http://{{::endpoint.host}}:{{::port.nodePort}}" target="_blank"
+           layout layout-align="start center">
+          <kd-middle-ellipsis display-string="{{::endpoint.host}}:{{::port.nodePort}}">
+          </kd-middle-ellipsis>
+          &nbsp;
+          <md-icon class="kd-endpoint-icon">open_in_new</md-icon>
+        </a>
+      </div>
+    </div>
   </div>
 </div>

src/app/frontend/common/components/endpoint/externalendpoint_component.js

@@ -20,7 +20,7 @@
 export const externalEndpointComponent = {
   templateUrl: 'common/components/endpoint/externalendpoint.html',
   bindings: {
-    /** {backendApi.Endpoint} */
-    'endpoint': '<',
+    /** {!Array<!backendApi.Endpoint>} */
+    'endpoints': '<',
   },
 };

src/app/frontend/common/components/endpoint/internalendpoint.html

@@ -21,5 +21,10 @@
               display-string="{{::$ctrl.endpoint.host}}:{{::port.port}} {{::port.protocol}}">
       </kd-middle-ellipsis>
     </div>
+    <div>
+      <kd-middle-ellipsis
+              display-string="{{::$ctrl.endpoint.host}}:{{::port.nodePort}} {{::port.protocol}}">
+      </kd-middle-ellipsis>
+    </div>
   </div>
 </div>

src/app/frontend/servicedetail/servicedetailinfo.html

@@ -51,8 +51,9 @@
     <kd-info-card-entry title="{{::$ctrl.i18n.MSG_SERVICE_DETAIL_INTERNAL_ENDPOINTS_LABEL}}" ng-if="::$ctrl.service.internalEndpoint">
       <kd-internal-endpoint endpoint="::$ctrl.service.internalEndpoint"></kd-internal-endpoint>
     </kd-info-card-entry>
-    <kd-info-card-entry title="{{::$ctrl.i18n.MSG_SERVICE_DETAIL_EXTERNAL_ENDPOINTS_LABEL}}" ng-if="::$ctrl.detail.externalEndpoints">
-      <kd-external-endpoint endpoint="::$ctrl.service.internalEndpoint"></kd-external-endpoint>
+    <kd-info-card-entry title="{{::$ctrl.i18n.MSG_SERVICE_DETAIL_EXTERNAL_ENDPOINTS_LABEL}}"
+                        ng-if="::$ctrl.service.externalEndpoints">
+      <kd-external-endpoint endpoints="::$ctrl.service.externalEndpoints"></kd-external-endpoint>
     </kd-info-card-entry>
   </kd-info-card-section>
 </kd-info-card>