Skip to content

[WIP] improve service traffic table on mobile #1042

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 19, 2016
Merged

[WIP] improve service traffic table on mobile #1042

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/styles/_core.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1208,4 +1208,4 @@ copy-to-clipboard .input-group.limit-width {
.col-xxs-12 {
width: 100%;
}
}
}
9 changes: 9 additions & 0 deletions app/styles/_tables.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,15 @@
}
}

// swaps direction of arrow in table cell
td[role="presentation"].arrow:after {
content: "\2193";

@media (min-width: @screen-sm-min) {
content: "\2192";
}
}

.table-filter-wrapper {
.flex-display(@display: flex);
padding: 10px 10px 5px 10px;
Expand Down
8 changes: 3 additions & 5 deletions app/views/browse/service.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,17 +91,15 @@ <h1>
</span>
</dd>
</dl>
<h3>
Traffic
</h3>
<div class="table-responsive">
<h3>Traffic</h3>
<div>
<traffic-table ports-by-route="portsByRoute" routes="routesForService" services="services" show-node-ports="showNodePorts" custom-name-header="'Route'"></traffic-table>
</div>
<div style="margin:-10px 0 10px 0;">
Learn more about <a ng-href="{{'route-types' | helpLink}}" target="_blank">routes</a> and <a ng-href="{{'services' | helpLink}}" target="_blank">services</a>
</div>
<h3>Pods</h3>
<div class="table-responsive">
<div>
<pods-table pods="podsForService" active-pods="podsWithEndpoints" custom-name-header="'Pod'" pod-failure-reasons="podFailureReasons"></pods-table>
</div>
<annotations annotations="service.metadata.annotations"></annotations>
Expand Down
20 changes: 11 additions & 9 deletions app/views/directives/traffic-table.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@
<tbody ng-if="(portsByRoute | hashSize) == 0">
<tr><td colspan="7"><em>{{emptyMessage || 'No routes or ports to show'}}</em></td></tr>
</tbody>
<tbody ng-if="(portsByRoute | hashSize) > 0">
<tr ng-repeat-start="(routeName,ports) in portsByRoute" style="display:none;"></tr>
<tr ng-repeat="port in ports" ng-if="routeName !== ''">
<tbody ng-if="(portsByRoute | hashSize) > 0" ng-repeat-start="(routeName,ports) in portsByRoute" style="display:none;"></tbody>
<tbody ng-repeat="port in ports" ng-if="routeName !== ''">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@spadgett The reason why the double border occurs at the top of the table, is because I am "nesting" two ng-repeats using sibling tbody elements. Although the first one is hidden with display: none, it is causing the second one to have a 2px border when it otherwise would not due to it normally being the first tbody element.

Copy link
Contributor Author

@juanvallejo juanvallejo Dec 14, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A solution would be to add the 2px top border to tbody > tr + tr instead. That way, we could also keep the ng-repeat in the tr element, and update the pods-table directive and routes.html to do this as well.

cc @jwforres

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we have the 2px border on other responsive tables. Can you check? If so, let's open a separate issue to fix them all.

cc @rhamilto @sg00dwin

Copy link
Contributor Author

@juanvallejo juanvallejo Dec 15, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@spadgett

I think we have the 2px border on other responsive tables. Can you check? If so, let's open a separate issue to fix them all.

It seems we do have a 2px border on the pods-table as well as the routes table but it appears to come from the table's top border rather than the tbody. In the traffic-table, the table's top border is adding 2px, and an additional 2px are getting added by the first visible tbody due to the hidden tbody right before it.

pods-table-mobile

I can go ahead and open an issue to address this by repeating the tr tag rather than the tbody, and apply this change to the pods and routes table as well.

EDIT: although the above suggestion solves repeating tbody tags, I do not believe it will solve the 4px body whenever a table deals with nested ng loops. We could have a specific rule for that table in _core.less to address this.

<tr>
<td data-title="{{customNameHeader || 'Route'}}{{ showNodePorts ? ' / Node Port' : '' }}">
<a href="{{routes[routeName] | navigateResourceURL}}">{{routes[routeName].metadata.name}}</a>
<route-warnings ng-if="routes[routeName].spec.to.kind !== 'Service' || services"
Expand All @@ -27,12 +27,12 @@
<span ng-if="port.nodePort"> / {{port.nodePort}}</span>
</span>
</td>
<td role="presentation" class="text-muted">&#8594;</td>
<td role="presentation" class="text-muted arrow"></td>
<td data-title="Service Port">
{{port.port}}/{{port.protocol}}
<span ng-if="port.name">({{port.name}})</span>
</td>
<td role="presentation" class="text-muted">&#8594;</td>
<td role="presentation" class="text-muted arrow"></td>
<td data-title="Target Port">
{{port.targetPort}}
</td>
Expand All @@ -54,18 +54,20 @@
<span ng-if="!routes[routeName].spec.tls.termination">&nbsp;</span>
</td>
</tr>
<tr ng-repeat-end style="display:none;"></tr>
<tr ng-repeat="port in portsByRoute['']">
</tbody>
<tbody ng-repeat-end style="display:none;"></tbody>
<tbody ng-repeat="port in portsByRoute['']">
<tr>
<td data-title="{{customNameHeader || 'Route'}}{{ showNodePorts ? ' / Node Port' : '' }}">
<span ng-if="!port.nodePort" class="text-muted">none</span>
<span ng-if="port.nodePort">{{port.nodePort}}</span>
</td>
<td role="presentation" class="text-muted">&#8594;</td>
<td role="presentation" class="text-muted arrow"></td>
<td data-title="Service Port">
{{port.port}}/{{port.protocol}}
<span ng-if="port.name">({{port.name}})</span>
</td>
<td role="presentation" class="text-muted">&#8594;</td>
<td role="presentation" class="text-muted arrow"></td>
<td data-title="Target Port">
{{port.targetPort}}
</td>
Expand Down
28 changes: 14 additions & 14 deletions dist/scripts/templates.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3948,17 +3948,15 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
"</span>\n" +
"</dd>\n" +
"</dl>\n" +
"<h3>\n" +
"Traffic\n" +
"</h3>\n" +
"<div class=\"table-responsive\">\n" +
"<h3>Traffic</h3>\n" +
"<div>\n" +
"<traffic-table ports-by-route=\"portsByRoute\" routes=\"routesForService\" services=\"services\" show-node-ports=\"showNodePorts\" custom-name-header=\"'Route'\"></traffic-table>\n" +
"</div>\n" +
"<div style=\"margin:-10px 0 10px 0\">\n" +
"Learn more about <a ng-href=\"{{'route-types' | helpLink}}\" target=\"_blank\">routes</a> and <a ng-href=\"{{'services' | helpLink}}\" target=\"_blank\">services</a>\n" +
"</div>\n" +
"<h3>Pods</h3>\n" +
"<div class=\"table-responsive\">\n" +
"<div>\n" +
"<pods-table pods=\"podsForService\" active-pods=\"podsWithEndpoints\" custom-name-header=\"'Pod'\" pod-failure-reasons=\"podFailureReasons\"></pods-table>\n" +
"</div>\n" +
"<annotations annotations=\"service.metadata.annotations\"></annotations>\n" +
Expand Down Expand Up @@ -8242,9 +8240,9 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
"<tbody ng-if=\"(portsByRoute | hashSize) == 0\">\n" +
"<tr><td colspan=\"7\"><em>{{emptyMessage || 'No routes or ports to show'}}</em></td></tr>\n" +
"</tbody>\n" +
"<tbody ng-if=\"(portsByRoute | hashSize) > 0\">\n" +
"<tr ng-repeat-start=\"(routeName,ports) in portsByRoute\" style=\"display:none\"></tr>\n" +
"<tr ng-repeat=\"port in ports\" ng-if=\"routeName !== ''\">\n" +
"<tbody ng-if=\"(portsByRoute | hashSize) > 0\" ng-repeat-start=\"(routeName,ports) in portsByRoute\" style=\"display:none\"></tbody>\n" +
"<tbody ng-repeat=\"port in ports\" ng-if=\"routeName !== ''\">\n" +
"<tr>\n" +
"<td data-title=\"{{customNameHeader || 'Route'}}{{ showNodePorts ? ' / Node Port' : '' }}\">\n" +
"<a href=\"{{routes[routeName] | navigateResourceURL}}\">{{routes[routeName].metadata.name}}</a>\n" +
"<route-warnings ng-if=\"routes[routeName].spec.to.kind !== 'Service' || services\" route=\"routes[routeName]\" service=\"services[routes[routeName].spec.to.name]\">\n" +
Expand All @@ -8253,12 +8251,12 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
"<span ng-if=\"port.nodePort\"> / {{port.nodePort}}</span>\n" +
"</span>\n" +
"</td>\n" +
"<td role=\"presentation\" class=\"text-muted\">&#8594;</td>\n" +
"<td role=\"presentation\" class=\"text-muted arrow\"></td>\n" +
"<td data-title=\"Service Port\">\n" +
"{{port.port}}/{{port.protocol}}\n" +
"<span ng-if=\"port.name\">({{port.name}})</span>\n" +
"</td>\n" +
"<td role=\"presentation\" class=\"text-muted\">&#8594;</td>\n" +
"<td role=\"presentation\" class=\"text-muted arrow\"></td>\n" +
"<td data-title=\"Target Port\">\n" +
"{{port.targetPort}}\n" +
"</td>\n" +
Expand All @@ -8280,18 +8278,20 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
"<span ng-if=\"!routes[routeName].spec.tls.termination\">&nbsp;</span>\n" +
"</td>\n" +
"</tr>\n" +
"<tr ng-repeat-end style=\"display:none\"></tr>\n" +
"<tr ng-repeat=\"port in portsByRoute['']\">\n" +
"</tbody>\n" +
"<tbody ng-repeat-end style=\"display:none\"></tbody>\n" +
"<tbody ng-repeat=\"port in portsByRoute['']\">\n" +
"<tr>\n" +
"<td data-title=\"{{customNameHeader || 'Route'}}{{ showNodePorts ? ' / Node Port' : '' }}\">\n" +
"<span ng-if=\"!port.nodePort\" class=\"text-muted\">none</span>\n" +
"<span ng-if=\"port.nodePort\">{{port.nodePort}}</span>\n" +
"</td>\n" +
"<td role=\"presentation\" class=\"text-muted\">&#8594;</td>\n" +
"<td role=\"presentation\" class=\"text-muted arrow\"></td>\n" +
"<td data-title=\"Service Port\">\n" +
"{{port.port}}/{{port.protocol}}\n" +
"<span ng-if=\"port.name\">({{port.name}})</span>\n" +
"</td>\n" +
"<td role=\"presentation\" class=\"text-muted\">&#8594;</td>\n" +
"<td role=\"presentation\" class=\"text-muted arrow\"></td>\n" +
"<td data-title=\"Target Port\">\n" +
"{{port.targetPort}}\n" +
"</td>\n" +
Expand Down
3 changes: 3 additions & 0 deletions dist/styles/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4940,6 +4940,9 @@ body,html{margin:0;padding:0}
.table-mobile>tbody>tr>td:last-child{border-bottom:none}
.table-mobile>tbody>tr>td:before{content:attr(data-title);position:absolute;top:8px;left:6px;width:35%;padding-right:10px;white-space:nowrap}
}
td[role=presentation].arrow:after{content:"\2193"}
@media (min-width:768px){td[role=presentation].arrow:after{content:"\2192"}
}
.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}
.events-table{table-layout:fixed}
.events-table th#time{width:90px}
Expand Down