You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@mesos.apache.org by be...@apache.org on 2012/05/15 21:52:31 UTC
svn commit: r1338863 - in /incubator/mesos/trunk/src/webui/master/static:
app.js controllers.js home.html index.html popovers.js relative-date.js
Author: benh
Date: Tue May 15 19:52:30 2012
New Revision: 1338863
URL: http://svn.apache.org/viewvc?rev=1338863&view=rev
Log:
Added popovers and relative dates to the webui (https://reviews.apache.org/r/5127).
Added:
incubator/mesos/trunk/src/webui/master/static/popovers.js
incubator/mesos/trunk/src/webui/master/static/relative-date.js
Modified:
incubator/mesos/trunk/src/webui/master/static/app.js
incubator/mesos/trunk/src/webui/master/static/controllers.js
incubator/mesos/trunk/src/webui/master/static/home.html
incubator/mesos/trunk/src/webui/master/static/index.html
Modified: incubator/mesos/trunk/src/webui/master/static/app.js
URL: http://svn.apache.org/viewvc/incubator/mesos/trunk/src/webui/master/static/app.js?rev=1338863&r1=1338862&r2=1338863&view=diff
==============================================================================
--- incubator/mesos/trunk/src/webui/master/static/app.js (original)
+++ incubator/mesos/trunk/src/webui/master/static/app.js Tue May 15 19:52:30 2012
@@ -16,6 +16,11 @@ angular.module('mesos', []).
var short_id = id.split('-').splice(2,2).join('-');
return 'â¦' + short_id;
}
+ })
+ .filter('relativeDate', function() {
+ return function(date) {
+ return relativeDate(date);
+ }
});
function setNavbarActiveTab(tab_name) {
Modified: incubator/mesos/trunk/src/webui/master/static/controllers.js
URL: http://svn.apache.org/viewvc/incubator/mesos/trunk/src/webui/master/static/controllers.js?rev=1338863&r1=1338862&r2=1338863&view=diff
==============================================================================
--- incubator/mesos/trunk/src/webui/master/static/controllers.js (original)
+++ incubator/mesos/trunk/src/webui/master/static/controllers.js Tue May 15 19:52:30 2012
@@ -79,6 +79,10 @@ function update($scope, data) {
// the state).
function MainCntl($scope, $http, $route, $routeParams, $location, $defer) {
+ // Initialize popovers and bind the function used to show a popover.
+ Popovers.initialize();
+ $scope.popover = Popovers.show;
+
$scope.$location = $location;
$scope.delay = 2000;
$scope.retry = 0;
@@ -91,7 +95,7 @@ function MainCntl($scope, $http, $route,
$defer(poll, $scope.delay);
})
.error(function(data) {
- if ($scope.delay >= 32000) {
+ if ($scope.delay >= 128000) {
$scope.delay = 2000;
} else {
$scope.delay = $scope.delay * 2;
Modified: incubator/mesos/trunk/src/webui/master/static/home.html
URL: http://svn.apache.org/viewvc/incubator/mesos/trunk/src/webui/master/static/home.html?rev=1338863&r1=1338862&r2=1338863&view=diff
==============================================================================
--- incubator/mesos/trunk/src/webui/master/static/home.html (original)
+++ incubator/mesos/trunk/src/webui/master/static/home.html Tue May 15 19:52:30 2012
@@ -5,11 +5,23 @@
<dt>Server:</dt>
<dd>{{state.pid.split("@")[1]}}</dd>
<dt>Built:</dt>
- <dd>{{state.build_date}} by <i>{{state.build_user}}</i></dd>
+ <dd>
+ <a href="" rel="popover" ng-click="popover($event, 'right')" data-content="{{state.build_time * 1000 | date:'MM/dd/yyyy H:mm:ss'}}" data-original-title="Built">
+ {{state.build_time * 1000 | relativeDate}}
+ </a> by <i>{{state.build_user}}</i>
+ </dd>
<dt>Started:</dt>
- <dd>{{state.start_time * 1000 | date:"MM/dd/yyyy H:mm:ss"}}</dd>
+ <dd>
+ <a href="" rel="popover" ng-click="popover($event, 'right')" data-content="{{state.start_time * 1000 | date:'MM/dd/yyyy H:mm:ss'}}" data-original-title="Started">
+ {{state.start_time * 1000 | relativeDate}}
+ </a>
+ </dd>
<dt>ID:</dt>
- <dd>{{state.id}}</dd>
+ <dd>
+ <a href="" rel="popover" ng-click="popover($event, 'right')" data-content="{{state.id}}" data-original-title="ID">
+ {{state.id | truncateMesosID}}
+ </a>
+ </dd>
</dl>
<h2>Resources</h2>
@@ -69,7 +81,9 @@
<tbody>
<tr ng-repeat="framework in frameworks">
<td>
- <abbr title="{{framework.id}}">{{framework.id | truncateMesosID}}</abbr>
+ <a href="" rel="popover" ng-click="popover($event, 'top')" data-content="{{framework.id}}" data-original-title="ID">
+ {{framework.id | truncateMesosID}}
+ </a>
</td>
<td>{{framework.user}}</td>
<td><a href="{{'#/framework/' + framework.id}}">{{framework.name}}</a></td>
@@ -77,8 +91,16 @@
<td>{{framework.resources.cpus}}</td>
<td>{{framework.resources.mem / 1024}} GB</td>
<td>{{framework.max_share * 100}}%</td>
- <td>{{framework.registered_time * 1000 | date:"MM/dd/yyyy H:mm:ss"}}</td>
- <td>{{framework.reregistered_time * 1000 | date:"MM/dd/yyyy H:mm:ss"}}</td>
+ <td>
+ <a href="" rel="popover" ng-click="popover($event, 'top')" data-content="{{framework.registered_time * 1000 | date:'MM/dd/yyyy H:mm:ss'}}" data-original-title="Registered">
+ {{framework.registered_time * 1000 | relativeDate}}
+ </a>
+ </td>
+ <td>
+ <a href="" rel="popover" ng-click="popover($event, 'top')" data-content="{{framework.reregistered_time * 1000 | date:'MM/dd/yyyy H:mm:ss'}}" data-original-title="Reregistered">
+ {{framework.reregistered_time * 1000 | relativeDate}}
+ </a>
+ </td>
</tr>
</tbody>
</table>
@@ -95,12 +117,14 @@
<th>Host</th>
<th>CPUs</th>
<th>Mem</th>
- <th>Connected at</th>
+ <th>Registered</th>
</tr>
</thead>
- <tr ng-repeat="slave in state.slaves">
- <td>
- <abbr title="{{slave.id}}">{{slave.id | truncateMesosID}}</abbr>
+ <tr ng-repeat="slave in slaves">
+ <td>
+ <a href="" rel="popover" ng-click="popover($event, 'top')" data-content="{{slave.id}}" data-original-title="ID">
+ {{slave.id | truncateMesosID}}
+ </a>
</td>
<td>
<a href="http://{{slave.webui_hostname}}:{{slave.webui_port}}/">
@@ -109,7 +133,11 @@
</td>
<td>{{slave.resources.cpus}}</td>
<td>{{slave.resources.mem / 1024}} GB</td>
- <td>{{slave.registered_time * 1000 | date:"MM/dd/yyyy H:mm:ss"}}</td>
+ <td>
+ <a href="" rel="popover" ng-click="popover($event, 'top')" data-content="{{slave.registered_time * 1000 | date:'MM/dd/yyyy H:mm:ss'}}" data-original-title="Registered">
+ {{slave.registered_time * 1000 | relativeDate}}
+ </a>
+ </td>
</tr>
</table>
Modified: incubator/mesos/trunk/src/webui/master/static/index.html
URL: http://svn.apache.org/viewvc/incubator/mesos/trunk/src/webui/master/static/index.html?rev=1338863&r1=1338862&r2=1338863&view=diff
==============================================================================
--- incubator/mesos/trunk/src/webui/master/static/index.html (original)
+++ incubator/mesos/trunk/src/webui/master/static/index.html Tue May 15 19:52:30 2012
@@ -32,10 +32,12 @@
<script src="/static/angular-1.0.0rc8.js"></script>
<script src="/static/d3.v2.js"></script>
<script src="/static/cubism.v1.js"></script>
+ <script src="/static/relative-date.js"></script>
<script src="/static/app.js"></script>
<script src="/static/controllers.js"></script>
<script src="/static/dashboard.js"></script>
+ <script src="/static/popovers.js"></script>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
@@ -95,6 +97,3 @@
</body>
</html>
-
-
-<!-- <div class="container" id="main_content"></div> -->
Added: incubator/mesos/trunk/src/webui/master/static/popovers.js
URL: http://svn.apache.org/viewvc/incubator/mesos/trunk/src/webui/master/static/popovers.js?rev=1338863&view=auto
==============================================================================
--- incubator/mesos/trunk/src/webui/master/static/popovers.js (added)
+++ incubator/mesos/trunk/src/webui/master/static/popovers.js Tue May 15 19:52:30 2012
@@ -0,0 +1,48 @@
+// An abstraction for handling popovers.
+var Popovers = {
+ popover: false,
+
+ initialize: function() {
+ // Turn off popovers if one is shown and we click on something
+ // else (other than some part of the popover itself).
+ $(document).click(function(event) {
+ var target = $(event.target);
+
+ if (target.parent().is('.popover-content') ||
+ target.parent().is('.popover-inner') ||
+ target.parent().is('.popover')) {
+ return;
+ }
+
+ if (Popovers.popover && event.target.rel != 'popover') {
+ Popovers.hide();
+ }
+ });
+ },
+
+ show: function(event, p) {
+ Popovers.hide(); // Hide any popovers if some are currently shown.
+
+ var target = $(event.target);
+ target.popover({
+ html: true,
+ placement: p,
+ trigger: 'manual'
+ });
+
+ target.popover('show');
+ Popovers.popover = true;
+ // TODO(benh): event.preventDefault();
+ },
+
+ hide: function() {
+ // We can't just keep a reference to the element that triggered
+ // the popover because the DOM is constantly changing (thanks to
+ // AngularJS) and so the best we can do is just remove (i.e.,
+ // hide) all "popovers".
+ $('.popover').each(function() {
+ $(this).remove();
+ });
+ Popovers.popover = false;
+ }
+}
Added: incubator/mesos/trunk/src/webui/master/static/relative-date.js
URL: http://svn.apache.org/viewvc/incubator/mesos/trunk/src/webui/master/static/relative-date.js?rev=1338863&view=auto
==============================================================================
--- incubator/mesos/trunk/src/webui/master/static/relative-date.js (added)
+++ incubator/mesos/trunk/src/webui/master/static/relative-date.js Tue May 15 19:52:30 2012
@@ -0,0 +1,48 @@
+// Retrieved from:
+// https://github.com/azer/relative-date/blob/master/lib/relative-date.js.
+
+var relativeDate = (function(undefined){
+
+ var SECOND = 1000,
+ MINUTE = 60 * SECOND,
+ HOUR = 60 * MINUTE,
+ DAY = 24 * HOUR,
+ WEEK = 7 * DAY,
+ YEAR = DAY * 365,
+ MONTH = YEAR / 12;
+
+ var formats = [
+ [ 0.7 * MINUTE, 'just now' ],
+ [ 1.5 * MINUTE, 'a minute ago' ],
+ [ 60 * MINUTE, 'minutes ago', MINUTE ],
+ [ 1.5 * HOUR, 'an hour ago' ],
+ [ DAY, 'hours ago', HOUR ],
+ [ 2 * DAY, 'yesterday' ],
+ [ 7 * DAY, 'days ago', DAY ],
+ [ 1.5 * WEEK, 'a week ago'],
+ [ MONTH, 'weeks ago', WEEK ],
+ [ 1.5 * MONTH, 'a month ago' ],
+ [ YEAR, 'months ago', MONTH ],
+ [ 1.5 * YEAR, 'a year ago' ],
+ [ Number.MAX_VALUE, 'years ago', YEAR ]
+ ];
+
+ function relativeDate(input,reference){
+ !reference && ( reference = (new Date).getTime() );
+ reference instanceof Date && ( reference = reference.getTime() );
+ input instanceof Date && ( input = input.getTime() );
+
+ var delta = reference - input,
+ format, i, len;
+
+ for(i = -1, len=formats.length; ++i < len; ){
+ format = formats[i];
+ if(delta < format[0]){
+ return format[2] == undefined ? format[1] : Math.round(delta/format[2]) + ' ' + format[1];
+ }
+ };
+ }
+
+ return relativeDate;
+
+})();