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> +
