You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@mesos.apache.org by bm...@apache.org on 2013/07/19 01:45:18 UTC
[19/39] Organized WebUI static assets into directories.
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);