Skip to content

Commit c3f8c98

Browse files
juanvallejojuanvallejo
committed
Add traffic-table directive; add learn more link
1 parent 8c993da commit c3f8c98

File tree

6 files changed

+256
-86
lines changed

6 files changed

+256
-86
lines changed

‎app/scripts/directives/resources.js

+16-2
Original file line numberDiff line numberDiff line change
@@ -183,13 +183,27 @@ angular.module('openshiftConsole')
183183
scope: {
184184
routes: '=',
185185
services: '=',
186-
ports: '=?',
187-
showNodePorts: '=?',
188186
// Optional empty message to display when there are no pods.
189187
emptyMessage: '=?',
190188
// Alternative header text to display in the 'Name' column.
191189
customNameHeader: '=?'
192190
},
193191
templateUrl: 'views/directives/routes-table.html'
194192
};
193+
})
194+
.directive('trafficTable', function() {
195+
return {
196+
restrict: 'E',
197+
scope: {
198+
routes: '=',
199+
services: '=',
200+
ports: '=',
201+
showNodePorts: '=?',
202+
// Optional empty message to display when there are no pods.
203+
emptyMessage: '=?',
204+
// Alternative header text to display in the 'Name' column.
205+
customNameHeader: '=?'
206+
},
207+
templateUrl: 'views/directives/traffic-table.html'
208+
};
195209
});

‎app/views/browse/service.html

+14-8
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ <h1>
6262
<dd>{{service.spec.type}}</dd>
6363
<dt>IP:</dt>
6464
<dd>{{service.spec.clusterIP}}</dd>
65-
<dt>DNS:</dt>
65+
<dt>Hostname:</dt>
6666
<dd>
6767
{{service.metadata.name + '.' + service.metadata.namespace + '.svc'}}
6868
<span data-toggle="popover" data-trigger="hover" data-content="{{'This address is only resolvable from within the cluster.'}}" style="cursor: help; padding-left: 5px;">
@@ -88,18 +88,24 @@ <h1>
8888
</span>
8989
</dd>
9090
</dl>
91+
<h3>
92+
Traffic
93+
<span class="learn-more-inline">
94+
<a ng-href="{{'route-types' | helpLink}}" target="_blank">
95+
Learn more <i class="fa fa-external-link"></i>
96+
</a>
97+
</span>
98+
</h3>
9199
<div class="table-responsive small">
92-
<routes-table routes="routesForService" ports="portsForRoutes" services="services" show-node-ports="showNodePorts" custom-name-header="routesForService[0].kind"></routes-table>
100+
<traffic-table routes="routesForService" ports="portsForRoutes" services="services" show-node-ports="showNodePorts" custom-name-header="routesForService[0].kind"></traffic-table>
101+
</div>
102+
<h3>Pods</h3>
103+
<div class="table-responsive small">
104+
<pods-table pods="podsForService" active-pods="podsWithEndpoints" custom-name-header="podsForService[0].kind" pod-failure-reasons="podFailureReasons"></pods-table>
93105
</div>
94106
<annotations annotations="service.metadata.annotations"></annotations>
95107
</div>
96108
</uib-tab>
97-
<uib-tab active="selectedTab.pods">
98-
<uib-tab-heading>Pods</uib-tab-heading>
99-
<div class="table-responsive small">
100-
<pods-table pods="podsForService" active-pods="podsWithEndpoints" custom-name-header="podsForService[0].kind" pod-failure-reasons="podFailureReasons"></pods-table>
101-
</div>
102-
</uib-tab>
103109
<uib-tab active="selectedTab.events" ng-if="'events' | canI : 'watch'">
104110
<uib-tab-heading>Events</uib-tab-heading>
105111
<events resource-kind="Service" resource-name="{{service.metadata.name}}" project-context="projectContext" ng-if="selectedTab.events"></events>

‎app/views/directives/routes-table.html

+17-34
Original file line numberDiff line numberDiff line change
@@ -2,53 +2,24 @@
22
<thead>
33
<tr>
44
<th>{{customNameHeader || 'Name'}}</th>
5-
<th ng-if="ports && showNodePorts">Node Port</th>
6-
<th ng-if="ports" role="presentation"></th>
7-
<th ng-if="ports">Service Port</th>
8-
<th ng-if="ports" role="presentation"></th>
9-
<th>Target Port</th>
105
<th>Hostname</th>
11-
<th ng-if="!ports">Routes To</th>
6+
<th>Routes To</th>
7+
<th>Target Port</th>
128
<th>TLS Termination</th>
139
</tr>
1410
</thead>
1511
<tbody ng-if="(routes | hashSize) == 0">
1612
<tr><td colspan="5"><em>{{emptyMessage || 'No routes to show'}}</em></td></tr>
1713
</tbody>
18-
<tbody>
19-
<tr ng-repeat="route in routes | orderObjectsByDate : true">
14+
<tbody ng-repeat="route in routes | orderObjectsByDate : true">
15+
<tr>
2016
<td data-title="{{ customNameHeader || 'Name' }}">
2117
<a href="{{route | navigateResourceURL}}">{{route.metadata.name}}</a>
2218
<route-warnings ng-if="route.spec.to.kind !== 'Service' || services"
2319
route="route"
2420
service="services[route.spec.to.name]">
2521
</route-warnings>
2622
</td>
27-
<td ng-if="ports && showNodePorts" data-title="Node Port">
28-
<span ng-if="ports[route.metadata.name].nodePort">{{ports[route.metadata.name].nodePort}}</span>
29-
<span ng-if="!ports[route.metadata.name].nodePort" class="text-muted">none</span>
30-
</td>
31-
<td ng-if="ports" role="presentation" class="text-muted">&#8594;</td>
32-
<td ng-if="ports" data-title="Service Port">
33-
{{ports[route.metadata.name].port}}/{{ports[route.metadata.name].protocol}}
34-
<span ng-if="ports[route.metadata.name].name">({{ports[route.metadata.name].name}})</span>
35-
</td>
36-
<td ng-if="ports" role="presentation" class="text-muted">&#8594;</td>
37-
<!-- Add non-breaking space to empty cells. Otherwise, table-mobile layout is broken. -->
38-
<td data-title="Target Port" ng-if="!ports">
39-
<span ng-if="route.spec.port.targetPort">
40-
<span ng-if="route.spec.to.kind !== 'Service'">{{route.spec.port.targetPort}}</span>
41-
<!-- Show the short display port in the table, but the long in the title attr. -->
42-
<span ng-if="route.spec.to.kind === 'Service'"
43-
ng-attr-title="{{route | routeTargetPortMapping : services[route.spec.to.name]}}">
44-
{{route.spec.port.targetPort}}
45-
</span>
46-
</span>
47-
<span ng-if="!route.spec.port.targetPort">&nbsp;</span>
48-
</td>
49-
<td data-title="Target Port" ng-if="ports">
50-
{{ports[route.metadata.name].targetPort}}
51-
</td>
5223
<td data-title="Hostname">
5324
<span ng-if="(route | isWebRoute)" class="word-break">
5425
<a href="{{route | routeWebURL}}" target="_blank">{{route | routeLabel}}</a>
@@ -61,10 +32,22 @@
6132
<span class="sr-only">Pending</span>
6233
</span>
6334
</td>
64-
<td data-title="Routes To" ng-if="!ports">
35+
<td data-title="Routes To">
6536
<span ng-if="route.spec.to.kind !== 'Service'">{{route.spec.to.kind}}: {{route.spec.to.name}}</span>
6637
<span ng-if="route.spec.to.kind === 'Service'"><a ng-href="{{route.spec.to.name | navigateResourceURL : 'Service': route.metadata.namespace}}">{{route.spec.to.name}}</a></span>
6738
</td>
39+
<!-- Add non-breaking space to empty cells. Otherwise, table-mobile layout is broken. -->
40+
<td data-title="Target Port">
41+
<span ng-if="route.spec.port.targetPort">
42+
<span ng-if="route.spec.to.kind !== 'Service'">{{route.spec.port.targetPort}}</span>
43+
<!-- Show the short display port in the table, but the long in the title attr. -->
44+
<span ng-if="route.spec.to.kind === 'Service'"
45+
ng-attr-title="{{route | routeTargetPortMapping : services[route.spec.to.name]}}">
46+
{{route.spec.port.targetPort}}
47+
</span>
48+
</span>
49+
<span ng-if="!route.spec.port.targetPort">&nbsp;</span>
50+
</td>
6851
<!-- Use shorter Termination title for table-mobile to avoid overlapping text. -->
6952
<td data-title="Termination">
7053
{{route.spec.tls.termination}}

‎app/views/directives/traffic-table.html

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!-- Table combining routes and ports for a service -->
2+
<table class="table table-bordered table-hover table-mobile">
3+
<thead>
4+
<tr>
5+
<th>{{customNameHeader || 'Route'}} / Node Port</th>
6+
<th role="presentation"></th>
7+
<th>Service Port</th>
8+
<th role="presentation"></th>
9+
<th>Target Port</th>
10+
<th>Hostname</th>
11+
<th>TLS Termination</th>
12+
</tr>
13+
</thead>
14+
<tbody ng-if="(routes | hashSize) == 0 && (ports | hashSize) == 0">
15+
<tr><td colspan="7"><em>{{emptyMessage || 'No routes or ports to show'}}</em></td></tr>
16+
</tbody>
17+
<tbody ng-if="(routes | hashSize) > 0">
18+
<tr ng-repeat="route in routes | orderObjectsByDate : true">
19+
<td data-title="{{ customNameHeader || 'Route' }}">
20+
<a href="{{route | navigateResourceURL}}">{{route.metadata.name}}</a>
21+
<route-warnings ng-if="route.spec.to.kind !== 'Service' || services"
22+
route="route"
23+
service="services[route.spec.to.name]">
24+
</route-warnings>
25+
<span ng-if="showNodePorts">
26+
<span ng-if="ports[route.metadata.name].nodePort"> / {{ports[route.metadata.name].nodePort}}</span>
27+
</span>
28+
</td>
29+
<td role="presentation" class="text-muted">&#8594;</td>
30+
<td data-title="Service Port">
31+
{{ports[route.metadata.name].port}}/{{ports[route.metadata.name].protocol}}
32+
<span ng-if="ports[route.metadata.name].name">({{ports[route.metadata.name].name}})</span>
33+
</td>
34+
<td role="presentation" class="text-muted">&#8594;</td>
35+
<td data-title="Target Port">
36+
{{ports[route.metadata.name].targetPort}}
37+
</td>
38+
<td data-title="Hostname">
39+
<span ng-if="(route | isWebRoute)" class="word-break">
40+
<a href="{{route | routeWebURL}}" target="_blank">{{route | routeLabel}}</a>
41+
</span>
42+
<span ng-if="!(route | isWebRoute)" class="word-break">
43+
{{route | routeLabel}}
44+
</span>
45+
<span ng-if="!route.status.ingress" data-toggle="popover" data-trigger="hover" data-content="The route is not accepting traffic yet because it has not been admitted by a router." style="cursor: help; padding-left: 5px;">
46+
<status-icon status="'Pending'" disable-animation></status-icon>
47+
<span class="sr-only">Pending</span>
48+
</span>
49+
</td>
50+
<!-- Use shorter Termination title for table-mobile to avoid overlapping text. -->
51+
<td data-title="Termination">
52+
{{route.spec.tls.termination}}
53+
<span ng-if="!route.spec.tls.termination">&nbsp;</span>
54+
</td>
55+
</tr>
56+
</tbody>
57+
<tbody ng-if="(routes | hashSize) == 0 && (ports | hashSize) > 0">
58+
<tr ng-repeat="port in ports | orderBy:'port'">
59+
<td data-title="{{ customNameHeader || 'Node Port' }}">
60+
<span>
61+
<span ng-if="ports[route.metadata.name].nodePort">{{ports[route.metadata.name].nodePort}}</span>
62+
<span ng-if="!ports[route.metadata.name].nodePort" class="text-muted">none</span>
63+
</span>
64+
</td>
65+
<td role="presentation" class="text-muted">&#8594;</td>
66+
<td data-title="Service Port">
67+
{{port.port}}/{{port.protocol}}
68+
<span ng-if="ports[route.metadata.name].name">({{port.name}})</span>
69+
</td>
70+
<td role="presentation" class="text-muted">&#8594;</td>
71+
<td data-title="Target Port">
72+
{{port.targetPort}}
73+
</td>
74+
<td data-title="Hostname">
75+
<span class="text-muted">none</span>
76+
</td>
77+
<!-- Use shorter Termination title for table-mobile to avoid overlapping text. -->
78+
<td data-title="Termination">
79+
<span class="text-muted">none</span>
80+
</td>
81+
</tr>
82+
</tbody>
83+
</table>

‎dist/scripts/scripts.js

+13-2
Original file line numberDiff line numberDiff line change
@@ -9924,13 +9924,24 @@ restrict:"E",
99249924
scope:{
99259925
routes:"=",
99269926
services:"=",
9927-
ports:"=?",
9928-
showNodePorts:"=?",
99299927
emptyMessage:"=?",
99309928
customNameHeader:"=?"
99319929
},
99329930
templateUrl:"views/directives/routes-table.html"
99339931
};
9932+
}).directive("trafficTable", function() {
9933+
return {
9934+
restrict:"E",
9935+
scope:{
9936+
routes:"=",
9937+
services:"=",
9938+
ports:"=",
9939+
showNodePorts:"=?",
9940+
emptyMessage:"=?",
9941+
customNameHeader:"=?"
9942+
},
9943+
templateUrl:"views/directives/traffic-table.html"
9944+
};
99349945
}), angular.module("openshiftConsole").directive("topologyDeployment", function() {
99359946
return {
99369947
restrict:"E",

0 commit comments

Comments
 (0)