Skip to content

Commit f516119

Browse files
juanvallejojuanvallejo
committed
improve service traffic table on mobile
1 parent 8e40552 commit f516119

File tree

6 files changed

+41
-29
lines changed

6 files changed

+41
-29
lines changed

‎app/styles/_core.less

+1-1
Original file line numberDiff line numberDiff line change
@@ -1208,4 +1208,4 @@ copy-to-clipboard .input-group.limit-width {
12081208
.col-xxs-12 {
12091209
width: 100%;
12101210
}
1211-
}
1211+
}

‎app/styles/_tables.less

+9
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,15 @@
148148
}
149149
}
150150

151+
// swaps direction of arrow in table cell
152+
td[role="presentation"].arrow:after {
153+
content: "\2193";
154+
155+
@media (min-width: @screen-sm-min) {
156+
content: "\2192";
157+
}
158+
}
159+
151160
.table-filter-wrapper {
152161
.flex-display(@display: flex);
153162
padding: 10px 10px 5px 10px;

‎app/views/browse/service.html

+3-5
Original file line numberDiff line numberDiff line change
@@ -91,17 +91,15 @@ <h1>
9191
</span>
9292
</dd>
9393
</dl>
94-
<h3>
95-
Traffic
96-
</h3>
97-
<div class="table-responsive">
94+
<h3>Traffic</h3>
95+
<div>
9896
<traffic-table ports-by-route="portsByRoute" routes="routesForService" services="services" show-node-ports="showNodePorts" custom-name-header="'Route'"></traffic-table>
9997
</div>
10098
<div style="margin:-10px 0 10px 0;">
10199
Learn more about <a ng-href="{{'route-types' | helpLink}}" target="_blank">routes</a> and <a ng-href="{{'services' | helpLink}}" target="_blank">services</a>
102100
</div>
103101
<h3>Pods</h3>
104-
<div class="table-responsive">
102+
<div>
105103
<pods-table pods="podsForService" active-pods="podsWithEndpoints" custom-name-header="'Pod'" pod-failure-reasons="podFailureReasons"></pods-table>
106104
</div>
107105
<annotations annotations="service.metadata.annotations"></annotations>

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

+11-9
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@
1414
<tbody ng-if="(portsByRoute | hashSize) == 0">
1515
<tr><td colspan="7"><em>{{emptyMessage || 'No routes or ports to show'}}</em></td></tr>
1616
</tbody>
17-
<tbody ng-if="(portsByRoute | hashSize) > 0">
18-
<tr ng-repeat-start="(routeName,ports) in portsByRoute" style="display:none;"></tr>
19-
<tr ng-repeat="port in ports" ng-if="routeName !== ''">
17+
<tbody ng-if="(portsByRoute | hashSize) > 0" ng-repeat-start="(routeName,ports) in portsByRoute" style="display:none;"></tbody>
18+
<tbody ng-repeat="port in ports" ng-if="routeName !== ''">
19+
<tr>
2020
<td data-title="{{customNameHeader || 'Route'}}{{ showNodePorts ? ' / Node Port' : '' }}">
2121
<a href="{{routes[routeName] | navigateResourceURL}}">{{routes[routeName].metadata.name}}</a>
2222
<route-warnings ng-if="routes[routeName].spec.to.kind !== 'Service' || services"
@@ -27,12 +27,12 @@
2727
<span ng-if="port.nodePort"> / {{port.nodePort}}</span>
2828
</span>
2929
</td>
30-
<td role="presentation" class="text-muted">&#8594;</td>
30+
<td role="presentation" class="text-muted arrow"></td>
3131
<td data-title="Service Port">
3232
{{port.port}}/{{port.protocol}}
3333
<span ng-if="port.name">({{port.name}})</span>
3434
</td>
35-
<td role="presentation" class="text-muted">&#8594;</td>
35+
<td role="presentation" class="text-muted arrow"></td>
3636
<td data-title="Target Port">
3737
{{port.targetPort}}
3838
</td>
@@ -54,18 +54,20 @@
5454
<span ng-if="!routes[routeName].spec.tls.termination">&nbsp;</span>
5555
</td>
5656
</tr>
57-
<tr ng-repeat-end style="display:none;"></tr>
58-
<tr ng-repeat="port in portsByRoute['']">
57+
</tbody>
58+
<tbody ng-repeat-end style="display:none;"></tbody>
59+
<tbody ng-repeat="port in portsByRoute['']">
60+
<tr>
5961
<td data-title="{{customNameHeader || 'Route'}}{{ showNodePorts ? ' / Node Port' : '' }}">
6062
<span ng-if="!port.nodePort" class="text-muted">none</span>
6163
<span ng-if="port.nodePort">{{port.nodePort}}</span>
6264
</td>
63-
<td role="presentation" class="text-muted">&#8594;</td>
65+
<td role="presentation" class="text-muted arrow"></td>
6466
<td data-title="Service Port">
6567
{{port.port}}/{{port.protocol}}
6668
<span ng-if="port.name">({{port.name}})</span>
6769
</td>
68-
<td role="presentation" class="text-muted">&#8594;</td>
70+
<td role="presentation" class="text-muted arrow"></td>
6971
<td data-title="Target Port">
7072
{{port.targetPort}}
7173
</td>

‎dist/scripts/templates.js

+14-14
Original file line numberDiff line numberDiff line change
@@ -3948,17 +3948,15 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
39483948
"</span>\n" +
39493949
"</dd>\n" +
39503950
"</dl>\n" +
3951-
"<h3>\n" +
3952-
"Traffic\n" +
3953-
"</h3>\n" +
3954-
"<div class=\"table-responsive\">\n" +
3951+
"<h3>Traffic</h3>\n" +
3952+
"<div>\n" +
39553953
"<traffic-table ports-by-route=\"portsByRoute\" routes=\"routesForService\" services=\"services\" show-node-ports=\"showNodePorts\" custom-name-header=\"'Route'\"></traffic-table>\n" +
39563954
"</div>\n" +
39573955
"<div style=\"margin:-10px 0 10px 0\">\n" +
39583956
"Learn more about <a ng-href=\"{{'route-types' | helpLink}}\" target=\"_blank\">routes</a> and <a ng-href=\"{{'services' | helpLink}}\" target=\"_blank\">services</a>\n" +
39593957
"</div>\n" +
39603958
"<h3>Pods</h3>\n" +
3961-
"<div class=\"table-responsive\">\n" +
3959+
"<div>\n" +
39623960
"<pods-table pods=\"podsForService\" active-pods=\"podsWithEndpoints\" custom-name-header=\"'Pod'\" pod-failure-reasons=\"podFailureReasons\"></pods-table>\n" +
39633961
"</div>\n" +
39643962
"<annotations annotations=\"service.metadata.annotations\"></annotations>\n" +
@@ -8242,9 +8240,9 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
82428240
"<tbody ng-if=\"(portsByRoute | hashSize) == 0\">\n" +
82438241
"<tr><td colspan=\"7\"><em>{{emptyMessage || 'No routes or ports to show'}}</em></td></tr>\n" +
82448242
"</tbody>\n" +
8245-
"<tbody ng-if=\"(portsByRoute | hashSize) > 0\">\n" +
8246-
"<tr ng-repeat-start=\"(routeName,ports) in portsByRoute\" style=\"display:none\"></tr>\n" +
8247-
"<tr ng-repeat=\"port in ports\" ng-if=\"routeName !== ''\">\n" +
8243+
"<tbody ng-if=\"(portsByRoute | hashSize) > 0\" ng-repeat-start=\"(routeName,ports) in portsByRoute\" style=\"display:none\"></tbody>\n" +
8244+
"<tbody ng-repeat=\"port in ports\" ng-if=\"routeName !== ''\">\n" +
8245+
"<tr>\n" +
82488246
"<td data-title=\"{{customNameHeader || 'Route'}}{{ showNodePorts ? ' / Node Port' : '' }}\">\n" +
82498247
"<a href=\"{{routes[routeName] | navigateResourceURL}}\">{{routes[routeName].metadata.name}}</a>\n" +
82508248
"<route-warnings ng-if=\"routes[routeName].spec.to.kind !== 'Service' || services\" route=\"routes[routeName]\" service=\"services[routes[routeName].spec.to.name]\">\n" +
@@ -8253,12 +8251,12 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
82538251
"<span ng-if=\"port.nodePort\"> / {{port.nodePort}}</span>\n" +
82548252
"</span>\n" +
82558253
"</td>\n" +
8256-
"<td role=\"presentation\" class=\"text-muted\">&#8594;</td>\n" +
8254+
"<td role=\"presentation\" class=\"text-muted arrow\"></td>\n" +
82578255
"<td data-title=\"Service Port\">\n" +
82588256
"{{port.port}}/{{port.protocol}}\n" +
82598257
"<span ng-if=\"port.name\">({{port.name}})</span>\n" +
82608258
"</td>\n" +
8261-
"<td role=\"presentation\" class=\"text-muted\">&#8594;</td>\n" +
8259+
"<td role=\"presentation\" class=\"text-muted arrow\"></td>\n" +
82628260
"<td data-title=\"Target Port\">\n" +
82638261
"{{port.targetPort}}\n" +
82648262
"</td>\n" +
@@ -8280,18 +8278,20 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
82808278
"<span ng-if=\"!routes[routeName].spec.tls.termination\">&nbsp;</span>\n" +
82818279
"</td>\n" +
82828280
"</tr>\n" +
8283-
"<tr ng-repeat-end style=\"display:none\"></tr>\n" +
8284-
"<tr ng-repeat=\"port in portsByRoute['']\">\n" +
8281+
"</tbody>\n" +
8282+
"<tbody ng-repeat-end style=\"display:none\"></tbody>\n" +
8283+
"<tbody ng-repeat=\"port in portsByRoute['']\">\n" +
8284+
"<tr>\n" +
82858285
"<td data-title=\"{{customNameHeader || 'Route'}}{{ showNodePorts ? ' / Node Port' : '' }}\">\n" +
82868286
"<span ng-if=\"!port.nodePort\" class=\"text-muted\">none</span>\n" +
82878287
"<span ng-if=\"port.nodePort\">{{port.nodePort}}</span>\n" +
82888288
"</td>\n" +
8289-
"<td role=\"presentation\" class=\"text-muted\">&#8594;</td>\n" +
8289+
"<td role=\"presentation\" class=\"text-muted arrow\"></td>\n" +
82908290
"<td data-title=\"Service Port\">\n" +
82918291
"{{port.port}}/{{port.protocol}}\n" +
82928292
"<span ng-if=\"port.name\">({{port.name}})</span>\n" +
82938293
"</td>\n" +
8294-
"<td role=\"presentation\" class=\"text-muted\">&#8594;</td>\n" +
8294+
"<td role=\"presentation\" class=\"text-muted arrow\"></td>\n" +
82958295
"<td data-title=\"Target Port\">\n" +
82968296
"{{port.targetPort}}\n" +
82978297
"</td>\n" +

‎dist/styles/main.css

+3
Original file line numberDiff line numberDiff line change
@@ -4940,6 +4940,9 @@ body,html{margin:0;padding:0}
49404940
.table-mobile>tbody>tr>td:last-child{border-bottom:none}
49414941
.table-mobile>tbody>tr>td:before{content:attr(data-title);position:absolute;top:8px;left:6px;width:35%;padding-right:10px;white-space:nowrap}
49424942
}
4943+
td[role=presentation].arrow:after{content:"\2193"}
4944+
@media (min-width:768px){td[role=presentation].arrow:after{content:"\2192"}
4945+
}
49434946
.table-filter-wrapper{display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-ms-flex;display:flex;padding:10px 10px 5px;border-top:1px solid #d1d1d1;border-left:1px solid #d1d1d1;border-right:1px solid #d1d1d1;background-color:#f9f9f9}
49444947
.events-table{table-layout:fixed}
49454948
.events-table th#time{width:90px}

0 commit comments

Comments
 (0)