Repository: aurora Updated Branches: refs/heads/master 8a8ed2d1d -> 8adc9bd87
Add indications of continued activity to the Update page. Bugs closed: AURORA-1125 Reviewed at https://reviews.apache.org/r/37137/ Project: http://git-wip-us.apache.org/repos/asf/aurora/repo Commit: http://git-wip-us.apache.org/repos/asf/aurora/commit/8adc9bd8 Tree: http://git-wip-us.apache.org/repos/asf/aurora/tree/8adc9bd8 Diff: http://git-wip-us.apache.org/repos/asf/aurora/diff/8adc9bd8 Branch: refs/heads/master Commit: 8adc9bd87a526272e788a065673a491351b6ecc7 Parents: 8a8ed2d Author: Joshua Cohen <[email protected]> Authored: Wed Aug 5 16:16:24 2015 -0500 Committer: Joshua Cohen <[email protected]> Committed: Wed Aug 5 16:16:24 2015 -0500 ---------------------------------------------------------------------- src/main/resources/scheduler/assets/css/app.css | 62 ++++++++++++++++++++ .../resources/scheduler/assets/js/directives.js | 7 +++ .../scheduler/assets/loadingFooter.html | 18 ++++++ src/main/resources/scheduler/assets/update.html | 56 ++++++++++-------- 4 files changed, 120 insertions(+), 23 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/aurora/blob/8adc9bd8/src/main/resources/scheduler/assets/css/app.css ---------------------------------------------------------------------- diff --git a/src/main/resources/scheduler/assets/css/app.css b/src/main/resources/scheduler/assets/css/app.css index ba26acc..a4735ef 100644 --- a/src/main/resources/scheduler/assets/css/app.css +++ b/src/main/resources/scheduler/assets/css/app.css @@ -281,6 +281,42 @@ div.pagination { stroke-width: 2; } +@-webkit-keyframes pulse { + 0% { + box-shadow: 0 0 15px 1px darkseagreen; + background-color: darkseagreen; + } + 50% { + box-shadow: none; + background-color: khaki; + } + 100% { + box-shadow: 0 0 15px 1px darkseagreen; + background-color: darkseagreen; + } +} + +@keyframes pulse { + 0% { + box-shadow: 0 0 15px 1px darkseagreen; + background-color: darkseagreen; + } + 50% { + box-shadow: none; + background-color: khaki; + } + 100% { + box-shadow: 0 0 15px 1px darkseagreen; + background-color: darkseagreen; + } +} + +.instance-updating { + box-shadow: none; + -webkit-animation: pulse 2s infinite; + animation: pulse 2s infinite; +} + .instance-updating, .instance-added, .instance-rolling-back { background-color: khaki; fill: rgba(240, 230, 140, 0.5); @@ -395,4 +431,30 @@ li.instance-rolled-back { .progress { margin-top: 10px; +} + +@-webkit-keyframes spin { + 0% { + -webkit-transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + } +} +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +.loading { + text-align: center; +} + +.loading span { + -webkit-animation: spin 1.1s infinite linear; + animation: spin 1.1s infinite linear; } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/aurora/blob/8adc9bd8/src/main/resources/scheduler/assets/js/directives.js ---------------------------------------------------------------------- diff --git a/src/main/resources/scheduler/assets/js/directives.js b/src/main/resources/scheduler/assets/js/directives.js index 408ee21..d8f722c 100644 --- a/src/main/resources/scheduler/assets/js/directives.js +++ b/src/main/resources/scheduler/assets/js/directives.js @@ -199,4 +199,11 @@ templateUrl: '/assets/latestUpdates.html' }; }); + + auroraUI.directive('loadingFooter', function () { + return { + restrict: 'A', + templateUrl: '/assets/loadingFooter.html' + }; + }); })(); http://git-wip-us.apache.org/repos/asf/aurora/blob/8adc9bd8/src/main/resources/scheduler/assets/loadingFooter.html ---------------------------------------------------------------------- diff --git a/src/main/resources/scheduler/assets/loadingFooter.html b/src/main/resources/scheduler/assets/loadingFooter.html new file mode 100644 index 0000000..910271a --- /dev/null +++ b/src/main/resources/scheduler/assets/loadingFooter.html @@ -0,0 +1,18 @@ +<!-- + 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. + --> +<tr> + <td colspan="4" class="loading"> + <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> + </td> +</tr> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/aurora/blob/8adc9bd8/src/main/resources/scheduler/assets/update.html ---------------------------------------------------------------------- diff --git a/src/main/resources/scheduler/assets/update.html b/src/main/resources/scheduler/assets/update.html index a5c27f3..3750aab 100644 --- a/src/main/resources/scheduler/assets/update.html +++ b/src/main/resources/scheduler/assets/update.html @@ -84,37 +84,47 @@ <div class="col-md-6"> <h4>Update Events</h4> <table class="table table-bordered table-striped"> - <tr> - <th>event</th> - <th>time</th> - <th>user</th> - <th>message</th> - </tr> - <tr ng-repeat="e in update.updateEvents"> - <td>{{e.status | toNiceStatus}}</td> - <td><span tooltip="{{e.timestampMs | toUtcTime}}">{{e.timestampMs | toElapsedTime }} ago</span></td> - <td>{{e.user}}</td> - <td>{{e.message}}</td> - </tr> + <thead> + <tr> + <th>event</th> + <th>time</th> + <th>user</th> + <th>message</th> + </tr> + </thead> + <tbody> + <tr ng-repeat="e in update.updateEvents"> + <td>{{e.status | toNiceStatus}}</td> + <td><span tooltip="{{e.timestampMs | toUtcTime}}">{{e.timestampMs | toElapsedTime }} ago</span></td> + <td>{{e.user}}</td> + <td>{{e.message}}</td> + </tr> + </tbody> + <tfoot loading-footer ng-if="inProgress"></tfoot> </table> </div> <div class="col-md-6"> <h4>Instance Events</h4> <table class="table table-bordered table-striped"> - <tr> - <th>instance</th> - <th>event</th> - <th>time</th> - </tr> - <tr ng-repeat="e in instanceEvents"> - <td>{{e.instanceId}}</td> - <td>{{e.action | toNiceAction}}</td> - <td><span tooltip="{{e.timestampMs | toUtcTime}}">{{e.timestampMs | toElapsedTime}} ago</span></td> - </tr> + <thead> + <tr> + <th>instance</th> + <th>event</th> + <th>time</th> + </tr> + </thead> + <tbody> + <tr ng-repeat="e in instanceEvents"> + <td>{{e.instanceId}}</td> + <td>{{e.action | toNiceAction}}</td> + <td><span tooltip="{{e.timestampMs | toUtcTime}}">{{e.timestampMs | toElapsedTime}} ago</span></td> + </tr> + </tbody> + <tfoot loading-footer ng-if="inProgress"></tfoot> </table> - <pagination ng-change="changeInstancePage()" max-size="5" total-items="totalEvents" ng-model="currentPage" items-per-page="eventsPerPage"></pagination> + <pagination ng-change="changeInstancePage()" max-size="5" total-items="totalEvents" ng-model="currentPage" items-per-page="eventsPerPage"></pagination> </div> </div> </div>
