You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@htrace.apache.org by cm...@apache.org on 2015/06/09 23:59:22 UTC
[17/18] incubator-htrace git commit: HTRACE-174. Refactor GUI
(cmccabe)
http://git-wip-us.apache.org/repos/asf/incubator-htrace/blob/baaa3a52/htrace-htraced/src/web/app/views/search/field.js
----------------------------------------------------------------------
diff --git a/htrace-htraced/src/web/app/views/search/field.js b/htrace-htraced/src/web/app/views/search/field.js
deleted file mode 100644
index c9f048a..0000000
--- a/htrace-htraced/src/web/app/views/search/field.js
+++ /dev/null
@@ -1,124 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you 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.
- */
-
-app.SearchFieldView = Backbone.View.extend({
- 'className': 'search-field',
-
- 'template': _.template($("#search-field-template").html()),
-
- 'events': {
- 'change .field': 'showSearchField',
- 'click .remove-field': 'destroyField'
- },
-
- 'initialize': function(options) {
- this.options = options;
- this.field = options.field;
- },
-
- 'render': function() {
- this.$el.html(this.template({ field: this.field }));
- this.showSearchField();
- if (this.options.value) this.setValue();
- return this;
- },
-
- 'showSearchField': function() {
- // this.$el.find('.value').hide();
- // this.$el.find('.op').hide();
- // this.$el.find('label').hide();
- this.$el.find('.search-field').hide();
- switch (this.field) {
- case 'begin':
- case 'end':
- this.$el.find('.op').show();
- this.$el.find('.start-end-date-time').show();
- this.$el.find('label.start-end-date-time').text(this.field === 'begin' ? 'Begin' : 'End');
- rome(this.$el.find('#start-end-date-time')[0]);
- break;
- case 'duration':
- this.op = 'ge'
- this.$el.find('.duration').show();
- break;
- case 'description':
- this.op = 'cn'
- this.$el.find('.description').show();
- break;
- default:
- break;
- }
- },
-
- 'destroyField': function(e) {
- this.undelegateEvents();
-
- $(this.el).removeData().unbind();
-
- this.remove();
- Backbone.View.prototype.remove.call(this);
- this.options.manager.trigger('removeSearchField', [this.cid]);
- },
-
- 'addPredicate': function() {
- this.options.predicates.push(
- {
- 'op': this.op ? this.op : this.$('.op:visible').val(),
- 'field': this.field,
- 'val': this.getValue()
- }
- );
- },
-
- 'getPredicate': function() {
- return {
- 'op': this.op ? this.op : this.$('.op:visible').val(),
- 'field': this.field,
- 'val': this.getValue()
- };
- },
-
- 'getValue': function() {
- switch (this.field) {
- case 'begin':
- case 'end':
- var now = new moment();
- var datetime = new moment(this.$('input.start-end-date-time:visible').val()).unix();
- return datetime.toString();
- case 'duration':
- return this.$("input.duration:visible").val().toString();
- case 'description':
- return this.$('input.description').val();
- default:
- return '';
- }
- },
-
- 'setValue': function() {
- switch (this.field) {
- case 'begin':
- case 'end':
- this.$('select.op').val(this.options.op);
- this.$('input.start-end-date-time').val(moment.unix(this.options.value).format('YYYY-MM-DD HH:mm'));
- case 'duration':
- this.$("input.duration").val(this.options.value);
- case 'description':
- this.$('input.description').val(this.options.value);
- }
- }
-});
http://git-wip-us.apache.org/repos/asf/incubator-htrace/blob/baaa3a52/htrace-htraced/src/web/app/views/search/search.js
----------------------------------------------------------------------
diff --git a/htrace-htraced/src/web/app/views/search/search.js b/htrace-htraced/src/web/app/views/search/search.js
deleted file mode 100644
index b9acee5..0000000
--- a/htrace-htraced/src/web/app/views/search/search.js
+++ /dev/null
@@ -1,105 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you 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.
- */
-
-app.SearchView = Backbone.Marionette.LayoutView.extend({
- "template": "#search-layout-template",
- "regions": {
- "controls": "div[role='form']",
- "main": "div[role='main']",
- "pagination": "div[role='complementary']"
- }
-});
-
-app.SearchControlsView = Backbone.Marionette.View.extend({
- "template": _.template($("#search-controls-template").html()),
- "events": {
- "click a.add-field": "addSearchField",
- "click button.search": "search",
- },
-
- "initialize": function(options) {
- this.options = options;
- this.predicates = [];
- this.searchFields = [];
- this.searchFields.push(new app.SearchFieldView({
- predicates: this.predicates,
- manager: this,
- field: 'description'
- }));
- this.on('removeSearchField', this.removeSearchField, this);
- },
-
- "render": function() {
- this.$el.html(this.template());
- this.$el.find('.search-fields').append(this.searchFields[0].render().$el);
-
- _(this.options.predicates).each(function(pred) {
- if (pred.field === 'description') {
- this.$el.find('input.description').val(pred.val);
- } else {
- this.addSearchField(pred);
- }
- }.bind(this));
-
- return this;
- },
-
- "addSearchField": function(e) {
- var target = e.target ? $(e.target) : e;
- if (e.target) $('button.field').text(target.text());
- var searchOptions = {
- predicates: this.predicates,
- manager: this,
- field: target.data ? target.data('field') : target.field,
- };
- if (!e.target) _.extend(searchOptions, { value: target.val, op: target.op})
-
- var newSearchField = new app.SearchFieldView(searchOptions);
- this.$el.find('.search-fields').append(newSearchField.render().$el);
- this.searchFields.push(newSearchField);
- },
-
- "removeSearchField": function(cid) {
- var removedFieldIndex = _(this.searchFields).indexOf(_(this.searchFields).findWhere({cid: cid}));
- this.searchFields.splice(removedFieldIndex, 1);
- },
-
- "search": function(e) {
- this.predicates = _(this.searchFields).map(function(field) {
- return field.getPredicate();
- }).filter(function(predicate) {
- return predicate.val;
- });
-
- this.searchParams = _(this.predicates).map(function(predicate) {
- return $.param(predicate);
- }).join(';');
- Backbone.history.navigate('!/search?' + this.searchParams, { trigger: false });
-
- this.collection.switchMode("infinite", {
- fetch: false,
- resetState: true
- });
-
- this.collection.fullCollection.reset();
- this.collection.setPredicates(this.predicates);
- this.collection.fetch();
- return false;
- }
-});
http://git-wip-us.apache.org/repos/asf/incubator-htrace/blob/baaa3a52/htrace-htraced/src/web/app/views/swimlane/swimlane.js
----------------------------------------------------------------------
diff --git a/htrace-htraced/src/web/app/views/swimlane/swimlane.js b/htrace-htraced/src/web/app/views/swimlane/swimlane.js
deleted file mode 100644
index 99f0b88..0000000
--- a/htrace-htraced/src/web/app/views/swimlane/swimlane.js
+++ /dev/null
@@ -1,178 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you 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.
- */
-
-app.SwimlaneView = Backbone.Marionette.LayoutView.extend({
- "template": "#swimlane-layout-template",
- "regions": {
- "swimlane": "div[role='main']",
- }
-});
-
-app.SwimlaneGraphView = Backbone.Marionette.View.extend({
- className: "swimlane",
-
- initialize: function() {
- this.spans = this.getSpans(0, [],
- this.getJsonSync("/span/" + this.options.spanId),
- this.options.lim || "lim=100",
- this.getJsonSync);
- },
-
- onShow: function() {
- this.appendSVG(this.spans);
- },
-
- getSpans: function getSpans(depth, spans, span, lim, getJSON) {
- span.depth = depth;
- spans.push(span);
- var children = [];
- getJSON("/span/" + span.s + "/children?" + lim).forEach(function(childId) {
- children.push(getJSON("/span/" + childId));
- });
- children.sort(function(x, y) {
- return x.b < y.b ? -1 : x.b > y.b ? 1 : 0;
- });
- children.forEach(function(child) {
- spans = getSpans(depth + 1, spans, child, lim, getJSON);
- });
- return spans;
- },
-
- getJsonSync: function getJsonSync(url) {
- return $.ajax({
- type: "GET",
- url: url,
- async: false,
- dataType: "json"
- }).responseJSON;
- },
-
- appendSVG: function appendSVG(spans) {
- const height_span = 20;
- const width_span = 700;
- const size_tl = 6;
- const margin = {top: 50, bottom: 50, left: 20, right: 1000, process: 300};
-
- var height_screen = spans.length * height_span;
- var dmax = d3.max(spans, function(s) { return s.depth; });
- var tmin = d3.min(spans, function(s) { return s.b; });
- var tmax = d3.max(spans, function(s) { return s.e; });
- var xscale = d3.time.scale()
- .domain([new Date(tmin), new Date(tmax)]).range([0, width_span]);
-
- var svg = d3.select("div[role='main']").append("svg")
- .attr("id", "svg-swimlane")
- .attr("width", width_span + margin.process + margin.left + margin.right)
- .attr("height", height_screen + margin.top + margin.bottom)
- .append("g")
- .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-
- var bars = svg.append("g")
- .attr("id", "bars")
- .attr("width", width_span)
- .attr("height", height_screen)
- .attr("transform", "translate(" + (10 * dmax + margin.process) + ", 0)");
-
- var axis = d3.svg.axis()
- .scale(xscale)
- .orient("top")
- .tickValues(xscale.domain())
- .tickFormat(d3.time.format("%x %X.%L"))
- .tickSize(6, 3);
-
- bars.append("g").attr("class", "axis").call(axis);
-
- var span_g = bars.selectAll("g.span")
- .data(spans)
- .enter()
- .append("g")
- .attr("transform", function(s, i) {
- return "translate(0, " + (i * height_span + 5) + ")";
- })
- .classed("timeline", function(d) { return d.t; });
-
- span_g.append("text")
- .text(function(s) { return s.r; })
- .style("alignment-baseline", "hanging")
- .style("font-size", "14px")
- .attr("transform", function(s) {
- return "translate(" + (s.depth * 10 - margin.process - 10 * dmax) + ", 0)";
- });
-
- var rect_g = span_g.append("g")
- .attr("transform", function(s) {
- return "translate(" + xscale(new Date(s.b)) + ", 0)";
- });
-
- rect_g.append("rect")
- .attr("height", height_span - 1)
- .attr("width", function (s) {
- return (width_span * (s.e - s.b)) / (tmax - tmin) + 1;
- })
- .style("fill", "lightblue")
- .attr("class", "span")
-
- rect_g.append("text")
- .text(function(s){ return s.d; })
- .style("alignment-baseline", "hanging")
- .style("font-size", "14px");
-
- rect_g.append("text")
- .text(function(s){ return s.e - s.b; })
- .style("alignment-baseline", "baseline")
- .style("text-anchor", "end")
- .style("font-size", "10px")
- .attr("transform", function(s, i) { return "translate(0, 10)"; });
-
- bars.selectAll("g.timeline").selectAll("rect.timeline")
- .data(function(s) { return s.t; })
- .enter()
- .append("rect")
- .style("fill", "red")
- .attr("class", "timeline")
- .attr("height", size_tl)
- .attr("width", size_tl)
- .attr("transform", function(t) {
- return "translate(" + xscale(t.t) + "," + (height_span - 1 - size_tl) + ")";
- });
-
- var popup = d3.select("div[role='main']").append("div")
- .attr("class", "popup")
- .style("opacity", 0);
-
- bars.selectAll("g.timeline")
- .on("mouseover", function(d) {
- popup.transition().duration(300).style("opacity", .95);
- var text = "<table>";
- d.t.forEach(function (t) {
- text += "<tr><td>" + (t.t - tmin) + "</td>";
- text += "<td> : " + t.m + "</td></tr>";
- });
- text += "</table>"
- popup.html(text)
- .style("left", (document.body.scrollLeft + 50) + "px")
- .style("top", (document.body.scrollTop + 70) + "px")
- .style("width", "700px")
- .style("background", "orange")
- .style("position", "absolute");
- })
- .on("mouseout", function(d) {
- popup.transition().duration(300).style("opacity", 0);
- });
- }
-});
http://git-wip-us.apache.org/repos/asf/incubator-htrace/blob/baaa3a52/htrace-htraced/src/web/app/widget_manager.js
----------------------------------------------------------------------
diff --git a/htrace-htraced/src/web/app/widget_manager.js b/htrace-htraced/src/web/app/widget_manager.js
new file mode 100644
index 0000000..49202c5
--- /dev/null
+++ b/htrace-htraced/src/web/app/widget_manager.js
@@ -0,0 +1,66 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you 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.
+ */
+
+var htrace = htrace || {};
+
+// Manages a set of widgets on the canvas.
+// Buttons and sliders are both widgets.
+htrace.WidgetManager = function(params) {
+ this.widgets = [];
+ this.focusedWidget = null;
+
+ this.handleMouseDown = function(x, y) {
+ if (this.focusedWidget != null) {
+ this.focusedWidget = null;
+ }
+ var numWidgets = this.widgets.length;
+ console.log("WidgetManager looking through " + numWidgets + " widgets.");
+ for (var i = 0; i < numWidgets; i++) {
+ if (this.widgets[i].handleMouseDown(x, y)) {
+ this.focusedWidget = this.widgets[i];
+ break;
+ }
+ }
+ return (this.focusedWidget != null);
+ };
+
+ this.handleMouseUp = function(x, y) {
+ if (this.focusedWidget != null) {
+ this.focusedWidget.handleMouseUp(x, y);
+ this.focusedWidget = null;
+ }
+ };
+
+ this.handleMouseMove = function(x, y) {
+ return this.focusedWidget != null ?
+ this.focusedWidget.handleMouseMove(x, y) : false;
+ };
+
+ this.draw = function() {
+ var numWidgets = this.widgets.length;
+ for (var i = 0; i < numWidgets; i++) {
+ this.widgets[i].draw();
+ }
+ };
+
+ for (var k in params) {
+ this[k]=params[k];
+ }
+ return this;
+};
http://git-wip-us.apache.org/repos/asf/incubator-htrace/blob/baaa3a52/htrace-htraced/src/web/custom.css
----------------------------------------------------------------------
diff --git a/htrace-htraced/src/web/custom.css b/htrace-htraced/src/web/custom.css
new file mode 100644
index 0000000..17945cb
--- /dev/null
+++ b/htrace-htraced/src/web/custom.css
@@ -0,0 +1,101 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you 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.
+ */
+
+.navbar-default {
+ background-color: #001da9;
+ border-color: #b2b5db;
+}
+.navbar-default .navbar-brand {
+ color: #ecf0f1;
+}
+.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
+ color: #ffffff;
+}
+.navbar-default .navbar-text {
+ color: #ecf0f1;
+}
+.navbar-default .navbar-nav > li > a {
+ color: #ecf0f1;
+}
+.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
+ color: #ffffff;
+}
+.navbar-default .navbar-nav > li > .dropdown-menu {
+ background-color: #001da9;
+}
+.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
+ color: #ecf0f1;
+}
+.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
+.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
+ color: #ffffff;
+ background-color: #b2b5db;
+}
+.navbar-default .navbar-nav > li > .dropdown-menu > li > .divider {
+ background-color: #001da9;
+}
+.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
+ color: #ffffff;
+ background-color: #b2b5db;
+}
+.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
+ color: #ffffff;
+ background-color: #b2b5db;
+}
+.navbar-default .navbar-toggle {
+ border-color: #b2b5db;
+}
+.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
+ background-color: #b2b5db;
+}
+.navbar-default .navbar-toggle .icon-bar {
+ background-color: #ecf0f1;
+}
+.navbar-default .navbar-collapse,
+.navbar-default .navbar-form {
+ border-color: #ecf0f1;
+}
+.navbar-default .navbar-link {
+ color: #ecf0f1;
+}
+.navbar-default .navbar-link:hover {
+ color: #ffffff;
+}
+.htrace-canvas-container {
+ overflow: hidden;
+ position: relative;
+}
+.htrace-canvas {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+}
+
+@media (max-width: 767px) {
+ .navbar-default .navbar-nav .open .dropdown-menu > li > a {
+ color: #ecf0f1;
+ }
+ .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
+ color: #ffffff;
+ }
+ .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
+ color: #ffffff;
+ background-color: #b2b5db;
+ }
+}
http://git-wip-us.apache.org/repos/asf/incubator-htrace/blob/baaa3a52/htrace-htraced/src/web/index.html
----------------------------------------------------------------------
diff --git a/htrace-htraced/src/web/index.html b/htrace-htraced/src/web/index.html
index 28abd11..66ef0dc 100644
--- a/htrace-htraced/src/web/index.html
+++ b/htrace-htraced/src/web/index.html
@@ -17,184 +17,208 @@
-->
<html lang="en-US">
<head>
- <meta charset="utf-8">
<title>HTrace</title>
-
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
- <!-- TODO: Add Favicon -->
- <link rel="icon" href="//favicon.ico" type="image/x-icon" sizes="16x16">
- <link href="lib/bootstrap-3.3.1/css/bootstrap.css" rel="stylesheet">
- <link href="lib/css/backgrid-0.3.5.min.css" rel="stylesheet">
- <link href="lib/css/backgrid-paginator-0.3.5.min.css" rel="stylesheet">
- <link href="lib/rome-2.1.0/rome.min.css" rel="stylesheet">
- <link href="lib/css/main.css" rel="stylesheet">
-
- <!-- TODO: Remove shiv -->
- <!--[if lt IE 9]>
- <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
- <![endif]-->
+ <meta charset="utf-8" name="viewport"
+ content="width=device-width, initial-scale=1.0">
+ <link href="lib/bootstrap-3.3.1/css/bootstrap.css" rel="stylesheet" type="text/css">
+ <link href="custom.css" rel="stylesheet" type="text/css">
</head>
<body>
<header id="header" role="banner">
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="collapse navbar-collapse">
<a class="navbar-brand" href="#">HTrace</a>
-
<ul class="nav navbar-nav">
- <li class="active"><a href="/">Search</a></li>
+ <li id="about"><a href="#about">About</a></li>
+ <li id="search"><a href="#search">Search</a></li>
</ul>
</div>
</nav>
</header>
-
<div id="app" class="container-fluid" role="application"></div>
-
+ <div id="modal" class="modal fade"></div>
<footer></footer>
- <script id="search-layout-template" type="text/html">
- <div class="container-fluid" id="list" role="application">
+ <script id="about-view-template" type="text/template">
<div class="row">
- <div class="col-md-4" role="form"></div>
- <div class="col-md-8">
- <div class="row">
- <div class="col-md-12" role="main"></div>
- </div>
- <div class="row">
- <div class="col-md-12" role="complementary"></div>
- </div>
+ <div class="col-md-1">
+ </div>
+ <div class="col-md-10">
+ <h1>Welcome to HTrace</h1>
+ <img src="image/owl.png" width="15%">
+ <h2>Server Version</h2>
+ <%= model.get("ReleaseVersion") %>
+ <h2>Server Git Hash</h2>
+ <%= model.get("GitVersion") %>
+ </div>
+ <div class="col-md-1">
</div>
</div>
- </div>
</script>
- <script id="search-controls-template" type="text/html">
- <div class="panel panel-default">
- <div class="panel-heading">
- <h3 class="panel-title">Controls</h3>
- </div>
- <div class="panel-body">
- <form class="form-horizontal">
- <div class="search-fields"></div>
- <div class="form-group">
- <div class="col-sm-12">
- <div class="btn-group">
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
- Add Field <span class="caret"></span>
- </button>
- <ul class="dropdown-menu" role="menu">
- <li><a href="javascript:void(0)" class="add-field" data-field="begin">Start Date/Time</a></li>
- <li><a href="javascript:void(0)" class="add-field" data-field="end">End Date/Time</a></li>
- <li><a href="javascript:void(0)" class="add-field" data-field="duration">Duration</a></li>
- </ul>
+ <script id="search-view-template" type="text/template">
+ <div class="row" id="searchView">
+ <div class="col-md-3" role="form">
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ <h1 class="panel-title">Search</h1>
+ </div style="border: 1px solid #000000;">
+ <div class="panel-body">
+ <form>
+ <div id="predicates">
+ </div>
+ <div class="form-group">
+ <div class="btn-group">
+ <button type="button" data-toggle="dropdown"
+ aria-expanded="false"
+ class="btn btn-default dropdown-toggle">
+ Add Predicate<span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu" role="menu">
+ <li><a href="javascript:void(0)"
+ class="add-field">Began after</a></li>
+ <li><a href="javascript:void(0)"
+ class="add-field">Began at or before</a></li>
+ <li><a href="javascript:void(0)"
+ class="add-field">Ended after</a></li>
+ <li><a href="javascript:void(0)"
+ class="add-field">Ended at or before</a></li>
+ <li><a href="javascript:void(0)"
+ class="add-field">Description contains</a></li>
+ <li><a href="javascript:void(0)"
+ class="add-field">Description is exactly</a></li>
+ <li><a href="javascript:void(0)"
+ class="add-field">Duration is longer than</a></li>
+ <li><a href="javascript:void(0)"
+ class="add-field">Duration is at most</a></li>
+ <li><a href="javascript:void(0)"
+ class="add-field">Span ID is</a></li>
+ </ul>
+ </div>
+ <button type="submit" class="btn btn-primary" id="searchButton">
+ Search</button>
+ </div>
+ <div class="form-group">
+ <button type="button" class="btn btn btn-danger" id="clearButton">
+ Clear</button>
+ </div>
+ </form>
+ </div>
+ </div>
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ <h1 class="panel-title">Timeline</h1>
+ </div style="border: 1px solid #000000;">
+ <div class="panel-body">
+ <div class="form-horizontal">
+ <div class="form-group">
+ <label class="col-sm-2 control-label">Begin</label>
+ <div class="col-sm-10">
+ <input type="text" class="form-control" id="begin" value="1970-01-01T00:00:00,000"/>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-sm-2 control-label">End</label>
+ <div class="col-sm-10">
+ <input type="text" class="form-control" id="end" value="1970-01-01T00:00:00,100"/>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-sm-2 control-label">Cur</label>
+ <div class="col-sm-10">
+ <input type="text" class="form-control" id="selectedTime" value=""/>
+ </div>
+ </div>
+ <div class="form-horizontal">
+ <button type="button" class="btn btn btn-warning"
+ id="zoomButton">Zoom</button>
+ </div>
</div>
</div>
</div>
- <div class="form-group">
- <div class="col-sm-12">
- <button type="button" class="search btn btn-default">Search</button>
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ <h1 class="panel-title">Span Details</h1>
+ </div style="border: 1px solid #000000;">
+ <div class="panel-body">
+ <div id="spanDetails" ></div>
</div>
</div>
- </form>
- </div>
- </div>
- </script>
-
- <script id='search-field-template' type='text/html'>
- <div class='form-group search-field start-end-date-time'>
- <label for="start-end-date-time" class="start-end-date-time control-label col-sm-3">Date</label>
- <div class="col-sm-3">
- <select class='op form-control'>
- <option selected value='ge'>After</option>
- <option value='le'>Before</option>
- </select>
- </div>
- <div class='col-sm-5'>
- <input placeholder="Date/Time" id="start-end-date-time" class="start-end-date-time date form-control value" />
- </div>
- <button class="btn btn-link remove-field" type="button">x</button>
- </div>
- <div class='form-group search-field duration'>
- <label for="duration" class="duration control-label col-sm-3">Duration</label>
- <div class='col-sm-8'>
- <input type="text" class="duration form-control value" placeholder="Duration" />
</div>
- <button class="btn btn-link remove-field" type="button">x</button>
- </div>
- <div class='form-group search-field description'>
- <label for="description" class="description control-label col-sm-3">Description</label>
- <div class='col-sm-8'>
- <input type="search" id="description" class="description value form-control" placeholder="Search description" />
+ <div class="col-md-9" id="resultsView">
+ <div id="results">
+ <h3>...</h3>
+ </div>
</div>
</div>
</script>
- <script id="details-layout-template" type="text/html">
- <div class="container-fluid" id="list" role="application">
- <div class="row">
- <div class="col-md-12" role="main"></div>
- </div>
-
- <hr>
-
- <div class="row">
- <div class="col-md-12" role="complementary"></div>
- </div>
- </div>
+ <script id="predicate-template" type="text/template">
+ <form class="form-horizontal">
+ <div class="form-group">
+ <%= desc %>
+ <button type="button" class="btn pull-right btn-link btn-sm closeButton"
+ >X</button><br/>
+ <input type="text" class="form-control"/>
+ </div>
+ </form>
</script>
- <script id="span-details-template" type="text/html">
- <table class="table table-condensed">
- <thead>
- <tr>
- <th>Description</th>
- <th>Span ID</th>
- <th>Process ID</th>
- <th>Start time</th>
- <th>End time</th>
- <th>Duration</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><%- span.description %></td>
- <td><%- span.spanId %></td>
- <td><%- span.processId %></td>
- <td><%- span.beginTime %></td>
- <td><%- span.stopTime %></td>
- <td><%- span.duration %></td>
- </tr>
- </tbody>
- </table>
+ <script id="search-results-view-template" type="text/template">
+ <div id="resultsDiv" class="htrace-canvas-container">
+ <canvas id="resultsCanvas" class="htrace-canvas">
+ <h2>Sorry, your browser does not support the HTML5 canvas element. Please
+ upgrade to a newer browser.</h2>
+ </canvas>
+ </div>
</script>
- <script id="swimlane-layout-template" type="text/html">
- <div class="container-fluid" id="list" role="application">
- <div class="row">
- <div class="col-md-12" role="main"></div>
+ <script id="modal-warning-template" type="text/template">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal"
+ aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </button>
+ <h4 class="modal-title"><%= title %></h4>
+ </div>
+ <div class="modal-body">
+ <%= body %><p/>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
+ </div>
+ </div>
</div>
- </div>
</script>
- <script src="lib/js/jquery-2.1.3.min.js" type="text/javascript"></script>
- <script src="lib/js/d3-3.5.5.js" type="text/javascript"></script>
+ <script src="lib/jquery-2.1.4.js" type="text/javascript"></script>
<script src="lib/bootstrap-3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
- <script src="lib/js/underscore-1.7.0.js" type="text/javascript"></script>
- <script src="lib/js/backbone-1.1.2.js" type="text/javascript"></script>
- <script src="lib/js/backbone.marionette-2.4.1.min.js" type="text/javascript"></script>
- <script src="lib/js/backbone.paginator-2.0.2.js" type="text/javascript"></script>
- <script src="lib/js/backgrid-0.3.5.js" type="text/javascript"></script>
- <script src="lib/js/backgrid-paginator-0.3.5.js" type="text/javascript"></script>
- <script src="lib/js/moment-2.9.0.min.js" type="text/javascript"></script>
- <script src="lib/rome-2.1.0/rome.standalone.min.js" type="text/javascript"></script>
-
- <script src="app/app.js" type="text/javascript"></script>
- <script src="app/models/span.js" type="text/javascript"></script>
- <script src="app/views/graph/graph.js" type="text/javascript"></script>
- <script src="app/views/search/field.js" type="text/javascript"></script>
- <script src="app/views/search/search.js" type="text/javascript"></script>
- <script src="app/views/details/details.js" type="text/javascript"></script>
- <script src="app/views/swimlane/swimlane.js" type="text/javascript"></script>
- <script src="app/setup.js" type="text/javascript"></script>
+ <script src="lib/underscore-1.7.0.js" type="text/javascript"></script>
+ <script src="lib/backbone-1.1.2.js" type="text/javascript"></script>
+ <script src="lib/moment-2.10.3.js" type="text/javascript"></script>
+
+ <script src="app/string.js" type="text/javascript"></script>
+ <script src="app/time_cursor.js" type="text/javascript"></script>
+
+ <script src="app/widget_manager.js" type="text/javascript"></script>
+ <script src="app/triangle_button.js" type="text/javascript"></script>
+
+ <script src="app/span.js" type="text/javascript"></script>
+
+ <script src="app/span_widget.js" type="text/javascript"></script>
+ <script src="app/search_results.js" type="text/javascript"></script>
+ <script src="app/about_view.js" type="text/javascript"></script>
+ <script src="app/modal.js" type="text/javascript"></script>
+ <script src="app/predicate.js" type="text/javascript"></script>
+ <script src="app/predicate_view.js" type="text/javascript"></script>
+ <script src="app/query_results.js" type="text/javascript"></script>
+ <script src="app/search_results_view.js" type="text/javascript"></script>
+ <script src="app/search_view.js" type="text/javascript"></script>
+ <script src="app/server_info.js" type="text/javascript"></script>
+
+ <script src="app/router.js" type="text/javascript"></script>
</body>
</html>
+