Skip to content

Commit c7b83a2

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

File tree

6 files changed

+258
-86
lines changed

6 files changed

+258
-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

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