http://git-wip-us.apache.org/repos/asf/mesos/blob/5852eb93/src/webui/master/static/dashboard.js ---------------------------------------------------------------------- diff --git a/src/webui/master/static/dashboard.js b/src/webui/master/static/dashboard.js deleted file mode 100644 index 5b1769c..0000000 --- a/src/webui/master/static/dashboard.js +++ /dev/null @@ -1,149 +0,0 @@ -var horizons = { - create: function(context, name, metric, extent, units) { - // Add a "graph-container". - d3.select("#graphs") - .append("div") - .attr("id", name + "-container") - .attr("class", "graph-container"); - - // Add a header. - d3.select("#" + name + "-container") - .append("h4") - .text(name); - - // Add a "graph". - d3.select("#" + name + "-container") - .append("div") - .attr("id", name) - .attr("class", "graph"); - - // Add the bottom axis. - d3.select("#" + name + "-container") - .select("#" + name) - .append("div") - .attr("id", "bottom-axis") - .attr("class", "bottom axis") - .call(context.axis().ticks(12).orient("bottom")); - - // Add the rule. - d3.select("#" + name + "-container") - .select("#" + name) - .append("div") - .attr("class", "rule") - .call(context.rule()); - - var horizon = context.horizon() - .title(name) - .height(30) - .extent(extent) - .metric(metric) - .format(function (value) { return d3.format(".3g")(value) + " " + units; }); - - function clicked(datum, index) { - // Remove the graph from the dashboard. - d3.select("#" + name + "-container") - .select("#" + name) - .select("#" + name + "-horizon") - .call(horizon.remove) - .remove(); - - // Now increase it or decrease it. - if (!d3.event.shiftKey) { - // Increase size. - horizon = context.horizon() - .height(horizon.height() * 2) - .extent([horizon.extent()[0] * 2, horizon.extent()[1] * 2]) - .metric(metric) - .format(function (value) { return d3.format(".3g")(value) + " " + units; }); - horizon( - d3.select("#" + name + "-container") - .select("#" + name) - .insert("div", ".bottom") - .attr("class", "horizon") - .attr("id", name + "-horizon") - .style("cursor", "pointer") - .on("click", clicked)); - } else { - // Decrease size. - horizon = context.horizon() - .height(horizon.height() / 2) - .extent([horizon.extent()[0] / 2, horizon.extent()[1] / 2]) - .metric(metric) - .format(function (value) { return d3.format(".3g")(value) + " " + units; }); - horizon( - d3.select("#" + name + "-container") - .select("#" + name) - .insert("div", ".bottom") - .attr("class", "horizon") - .attr("id", name + "-horizon") - .style("cursor", "pointer") - .on("click", clicked)); - } - } - - horizon( - d3.select("#" + name + "-container") - .select("#" + name) - .insert("div", ".bottom") - .attr("class", "horizon") - .attr("id", name + "-horizon") - .style("cursor", "pointer") - .on("click", clicked)); - - context.on("focus", function(i) { - d3.selectAll(".value").style("right", i == null ? null : context.size() - i + "px"); - }); - - return context; - } -}; - - -function metric_cpus(context) { - return context.metric(function(start, stop, step, callback) { - // Convert the start and stop "dates" into milliseconds. - start = +start, stop = +stop; - - var values = []; - _((stop - start) / step).times(function() { - values.push(4); - }); - - // Return the data requested. - callback(null, values); - }, "cpus"); -} - - -function metric_mem(context) { - return context.metric(function(start, stop, step, callback) { - // Convert the start and stop "dates" into milliseconds. - start = +start, stop = +stop; - - var values = []; - _((stop - start) / step).times(function() { - values.push(34); - }); - - // Return the data requested. - callback(null, values); - }, "mem"); -} - - -function random(context, name) { - var value = 0, - values = [], - i = 0, - last; - return context.metric(function(start, stop, step, callback) { - start = +start, stop = +stop; - if (isNaN(last)) last = start; - while (last < stop) { - last += step; - value = Math.abs(value + .8 * Math.random() - .4 + .2 * Math.cos(i += .2)); - values.push(value); - } - callback(null, values = values.slice((start - stop) / step)); - }, name); -}
http://git-wip-us.apache.org/repos/asf/mesos/blob/5852eb93/src/webui/master/static/graph.css ---------------------------------------------------------------------- diff --git a/src/webui/master/static/graph.css b/src/webui/master/static/graph.css deleted file mode 100644 index a0d9022..0000000 --- a/src/webui/master/static/graph.css +++ /dev/null @@ -1,100 +0,0 @@ -.graph-container { - position: relative; - overflow: hidden; -} -.graph { - float: right; -} - -/* The rest of this file is taken from square.github.com/cubism. */ -.group { - margin-bottom: 1em; -} - -.axis { - font: 10px sans-serif; - position: fixed; - pointer-events: none; - z-index: 2; -} - -.axis text { - -webkit-transition: fill-opacity 250ms linear; -} - -.axis path { - display: none; -} - -.axis line { - stroke: #000; - shape-rendering: crispEdges; -} - -.axis.top { - background-image: linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%); - background-image: -o-linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%); - background-image: -moz-linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%); - background-image: -webkit-linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%); - background-image: -ms-linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%); - top: 0px; - padding: 0 0 24px 0; -} - -.axis.bottom { - background-image: linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%); - background-image: -o-linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%); - background-image: -moz-linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%); - background-image: -webkit-linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%); - background-image: -ms-linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%); - bottom: 0px; - padding: 24px 0 0 0; -} - -.horizon { - border-bottom: solid 1px #000; - overflow: hidden; - position: relative; -} - -.horizon { - border-top: solid 1px #000; - border-bottom: solid 1px #000; -} - -.horizon + .horizon { - border-top: none; -} - -.horizon canvas { - display: block; -} - -.horizon .title, -.horizon .value { - bottom: 0; - line-height: 30px; - margin: 0 6px; - position: absolute; - text-shadow: 0 1px 0 rgba(255,255,255,.5); - white-space: nowrap; -} - -.horizon .title { - left: 0; -} - -.horizon .value { - right: 0; -} - -.line { - background: #000; - opacity: .2; - z-index: 2; -} - -@media all and (max-width: 1439px) { - .axis { position: static; } - .axis.top, .axis.bottom { padding: 0; } -} http://git-wip-us.apache.org/repos/asf/mesos/blob/5852eb93/src/webui/master/static/ico/favicon.ico ---------------------------------------------------------------------- diff --git a/src/webui/master/static/ico/favicon.ico b/src/webui/master/static/ico/favicon.ico new file mode 100644 index 0000000..737c102 Binary files /dev/null and b/src/webui/master/static/ico/favicon.ico differ http://git-wip-us.apache.org/repos/asf/mesos/blob/5852eb93/src/webui/master/static/img/glyphicons-halflings-white.png ---------------------------------------------------------------------- diff --git a/src/webui/master/static/img/glyphicons-halflings-white.png b/src/webui/master/static/img/glyphicons-halflings-white.png new file mode 100644 index 0000000..3bf6484 Binary files /dev/null and b/src/webui/master/static/img/glyphicons-halflings-white.png differ http://git-wip-us.apache.org/repos/asf/mesos/blob/5852eb93/src/webui/master/static/img/glyphicons-halflings.png ---------------------------------------------------------------------- diff --git a/src/webui/master/static/img/glyphicons-halflings.png b/src/webui/master/static/img/glyphicons-halflings.png new file mode 100644 index 0000000..79bc568 Binary files /dev/null and b/src/webui/master/static/img/glyphicons-halflings.png differ http://git-wip-us.apache.org/repos/asf/mesos/blob/5852eb93/src/webui/master/static/img/loading.gif ---------------------------------------------------------------------- diff --git a/src/webui/master/static/img/loading.gif b/src/webui/master/static/img/loading.gif new file mode 100644 index 0000000..023dbdb Binary files /dev/null and b/src/webui/master/static/img/loading.gif differ http://git-wip-us.apache.org/repos/asf/mesos/blob/5852eb93/src/webui/master/static/index.html ---------------------------------------------------------------------- diff --git a/src/webui/master/static/index.html b/src/webui/master/static/index.html index a9107c7..296547a 100644 --- a/src/webui/master/static/index.html +++ b/src/webui/master/static/index.html @@ -7,22 +7,22 @@ <meta name="description" content=""> <meta name="author" content=""> - <link href="/static/bootstrap/css/bootstrap-2.3.2.min.css" rel="stylesheet"> - <link href="/static/bootstrap/css/bootstrap-responsive-2.3.2.min.css" rel="stylesheet"> - <link href="/static/mesos.css" rel="stylesheet"> - <link href="/static/graph.css" rel="stylesheet"> + <link href="/static/css/bootstrap-2.3.2.min.css" rel="stylesheet"> + <link href="/static/css/bootstrap-responsive-2.3.2.min.css" rel="stylesheet"> + <link href="/static/css/mesos.css" rel="stylesheet"> + <link href="/static/css/graph.css" rel="stylesheet"> <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> - <link rel="shortcut icon" href="/static/bootstrap/ico/favicon.ico"> + <link rel="shortcut icon" href="/static/ico/favicon.ico"> </head> <body> <div id="loading" style="width: 75px; margin: 0 auto; text-align: center;"> - <img src="static/loading.gif" height="64" width="64" alt=""> + <img src="/static/img/loading.gif" height="64" width="64" alt=""> </div> <div ng-controller="MainCntl"> @@ -81,18 +81,18 @@ </div> </div> - <script src="/static/bootstrap/js/jquery-1.7.1.min.js"></script> - <script src="/static/underscore-1.4.3.min.js"></script> - <script src="/static/zeroclipboard-1.1.7.js"></script> - <script src="/static/angular-1.0.7.min.js"></script> - <script src="/static/ui-bootstrap-tpls-0.4.0.min.js"></script> + <script src="/static/js/jquery-1.7.1.min.js"></script> + <script src="/static/js/underscore-1.4.3.min.js"></script> + <script src="/static/js/zeroclipboard-1.1.7.js"></script> + <script src="/static/js/angular-1.0.7.min.js"></script> + <script src="/static/js/ui-bootstrap-tpls-0.4.0.min.js"></script> - <script src="/static/d3.v2.min.js"></script> - <script src="/static/cubism.v1.min.js"></script> - <script src="/static/relative-date.js"></script> + <script src="/static/js/d3.v2.min.js"></script> + <script src="/static/js/cubism.v1.min.js"></script> + <script src="/static/js/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/js/app.js"></script> + <script src="/static/js/controllers.js"></script> + <script src="/static/js/dashboard.js"></script> </body> </html> http://git-wip-us.apache.org/repos/asf/mesos/blob/5852eb93/src/webui/master/static/jquery.pailer.js ---------------------------------------------------------------------- diff --git a/src/webui/master/static/jquery.pailer.js b/src/webui/master/static/jquery.pailer.js deleted file mode 100644 index 4edc5b4..0000000 --- a/src/webui/master/static/jquery.pailer.js +++ /dev/null @@ -1,335 +0,0 @@ -// A jQuery plugin for PAging and taILing data (i.e., a -// 'PAILer'). Paging occurs when scrolling reaches the "top" and -// tailing occurs when scrolling has reached the "bottom". - -// A 'read' function must be provided for reading the data (in -// bytes). This function should expect an "options" object with the -// fields 'offset' and 'length' set for reading the data. The result -// from of the function should be a "promise" like value which has a -// 'success' and 'error' callback which each take a function. An -// object with at least two fields defined ('offset' and 'data') is -// expected on success. The length of 'data' may be smaller than the -// amount requested. If the offset requested is greater than the -// available offset, the result should be an object with the 'offset' -// field set to the available offset (i.e., the total length of the -// data) with an empty 'data' field. - -// The plugin prepends, appends, and updates the "html" component of -// the elements specified in the jQuery selector (e.g., doing -// $('#data').pailer(...) means that data will be updated within -// $('#data') via $('#data').prepend(...) and $('#data').append(...) -// and $('#data').html(...) calls). - -// An indicator paragraph element (i.e., <p>) can be specified that -// the plugin will write text to describing any status/errors that -// have been encountered. - -// Data will automagically get truncated at some specified length, -// configurable via the 'truncate-length' option. Likewise, the amount -// of data paged in at a time can be configured via the 'page-size' -// option. - -// Example: -// HTML: -// <div id="data" style="white-space:pre-wrap;"></div> -// -// <div style="position: absolute; left: 5px; top: 0px;"> -// <p id="indicator"></p> -// </div> -// Javascript: -// $('#data').pailer({ -// 'read': function(options) { -// var settings = $.extend({ -// 'offset': -1, -// 'length': -1 -// }, options); -// var url = '/url/for/data' -// + '?offset=' + settings.offset -// + '&length=' + settings.length; -// return $.getJSON(url); -// }, -// 'indicator': $('#indicator') -// }); - -(function($) { - // Helper for escaping html, based on _.escape from underscore.js. - function escapeHTML(string) { - if (string == null) { - return ''; - } - - var escapes = { - '&': '&', - '<': '<', - '>': '>', - '"': '"', - "'": ''', - '/': '/' - }; - var regex = new RegExp('[' + Object.keys(escapes).join('') + ']', 'g'); - - return ('' + string).replace(regex, function (match) { - return escapes[match]; - }); - } - - function Pailer(read, element, indicator, page_size, truncate_length) { - var this_ = this; - - this_.read = read; - this_.element = element; - this_.indicator = indicator; - this_.initialized = false; - this_.start = -1; - this_.end = -1; - this_.paging = false; - this_.tailing = true; - - page_size || $.error('Expecting page_size to be defined'); - truncate_length || $.error('Expecting truncate_length to be defined'); - - this_.page_size = page_size; - this_.truncate_length = truncate_length; - - this_.element.css('overflow', 'auto'); - - this_.element.scroll(function () { - var scrollTop = this_.element.scrollTop(); - var height = this_.element.height(); - var scrollHeight = this_.element[0].scrollHeight; - - if (scrollTop == 0) { - this_.page(); - } else if (scrollTop + height >= scrollHeight) { - if (!this_.tailing) { - this_.tailing = true; - this_.tail(); - } - } else { - this_.tailing = false; - } - }); - } - - - Pailer.prototype.initialize = function() { - var this_ = this; - - // Set an indicator while we load the data. - this_.indicate('(LOADING)'); - - this_.read({'offset': -1}) - .success(function(data) { - this_.indicate(''); - - // Get the last page of data. - if (data.offset > this_.page_size) { - this_.start = this_.end = data.offset - this_.page_size; - } else { - this_.start = this_.end = 0; - } - - this_.initialized = true; - this_.element.html(''); - setTimeout(function() { this_.tail(); }, 0); - }) - .error(function() { - this_.indicate('(FAILED TO INITIALIZE ... RETRYING)'); - setTimeout(function() { - this_.indicate(''); - this_.initialize(); - }, 1000); - }); - } - - - Pailer.prototype.page = function() { - var this_ = this; - - if (!this_.initialized) { - return; - } - - if (this_.paging) { - return; - } - - this_.paging = true; - this_.indicate('(PAGING)'); - - if (this_.start == 0) { - this_.paging = false; - this_.indicate('(AT BEGINNING OF FILE)'); - setTimeout(function() { this_.indicate(''); }, 1000); - return; - } - - var offset = this_.start - this_.page_size; - var length = this_.page_size; - - if (offset < 0) { - offset = 0; - length = this_.start; - } - - // Buffer the data in case what gets read is less than 'length'. - var buffer = ''; - - var read = function(offset, length) { - this_.read({'offset': offset, 'length': length}) - .success(function(data) { - if (data.data.length < length) { - buffer += data.data; - read(offset + data.data.length, length - data.data.length); - } else if (data.data.length > 0) { - this_.indicate('(PAGED)'); - setTimeout(function() { this_.indicate(''); }, 1000); - - // Prepend buffer onto data. - data.offset -= buffer.length; - data.data = buffer + data.data; - - // Truncate to the first newline (unless this is the beginning). - if (data.offset != 0) { - var index = data.data.indexOf('\n') + 1; - data.offset += index; - data.data = data.data.substring(index); - } - - this_.start = data.offset; - - var scrollTop = this_.element.scrollTop(); - var scrollHeight = this_.element[0].scrollHeight; - - this_.element.prepend(escapeHTML(data.data)); - - scrollTop += this_.element[0].scrollHeight - scrollHeight; - this_.element.scrollTop(scrollTop); - - this_.paging = false; - } - }) - .error(function() { - this_.indicate('(FAILED TO PAGE ... RETRYING)'); - setTimeout(function() { - this_.indicate(''); - this_.page(); - }, 1000); - }); - } - - read(offset, length); - } - - - Pailer.prototype.tail = function() { - var this_ = this; - - if (!this_.initialized) { - return; - } - - this_.read({'offset': this_.end, 'length': this_.truncate_length}) - .success(function(data) { - var scrollTop = this_.element.scrollTop(); - var height = this_.element.height(); - var scrollHeight = this_.element[0].scrollHeight; - - // Check if we are still at the bottom (since this event might - // have fired before the scroll event has been dispatched). - if (scrollTop + height < scrollHeight) { - this_.tailing = false; - return; - } - - if (data.data.length > 0) { - // Truncate to the first newline if this is the first time - // (and we aren't reading from the beginning of the log). - if (this_.start == this_.end && data.offset != 0) { - var index = data.data.indexOf('\n') + 1; - data.offset += index; - data.data = data.data.substring(index); - this_.start = data.offset; // Adjust the actual start too! - } - - this_.end = data.offset + data.data.length; - - this_.element.append(escapeHTML(data.data)); - - scrollTop += this_.element[0].scrollHeight - scrollHeight; - this_.element.scrollTop(scrollTop); - - // Also, only if we're at the bottom, truncate data so that we - // don't consume too much memory. TODO(benh): Only do - // truncations if we've been at the bottom for a while. - this_.truncate(); - } - - // Tail immediately if we got as much data as requested (since - // this probably means we've waited around a while). The - // alternative here would be to not get data in chunks, but the - // potential issue here is that we might end up requesting GB of - // log data at a time ... the right solution here might be to do - // a request to determine the new ending offset and then request - // the proper length. - if (data.data.length == this_.truncate_length) { - setTimeout(function() { this_.tail(); }, 0); - } else { - setTimeout(function() { this_.tail(); }, 1000); - } - }) - .error(function() { - this_.indicate('(FAILED TO TAIL ... RETRYING)'); - this_.initialized = false; - setTimeout(function() { - this_.indicate(''); - this_.initialize(); - }, 1000); - }); - } - - - Pailer.prototype.indicate = function(text) { - var this_ = this; - - if (this_.indicator) { - this_.indicator.text(text); - } - } - - - Pailer.prototype.truncate = function() { - var this_ = this; - - var length = this_.element.html().length; - if (length >= this_.truncate_length) { - var index = length - this_.truncate_length; - this_.start = this_.end - this_.truncate_length; - this_.element.html(this_.element.html().substring(index)); - } - } - - $.fn.pailer = function(options) { - var settings = $.extend({ - 'read': function() { return { - 'success': function() {}, - 'error': function(f) { f(); } - }}, - 'page_size': 8 * 4096, // 8 "pages". - 'truncate_length': 50000 - }, options); - - this.each(function() { - var pailer = $.data(this, 'pailer'); - if (!pailer) { - pailer = new Pailer(settings.read, - $(this), - settings.indicator, - settings.page_size, - settings.truncate_length); - $.data(this, 'pailer', pailer); - pailer.initialize(); - } - }); - } -})(jQuery);