| <!doctype html> |
| <!-- |
| 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. |
| --> |
| <html lang="en-US"> |
| <head> |
| <title>HTrace</title> |
| <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 id="about"><a href="#about">About</a></li> |
| <li id="serverInfo"><a href="#serverInfo">ServerInfo</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="about-view-template" type="text/template"> |
| <div class="row" align="center"> |
| <h1>Welcome to <a href="http://htrace.incubator.apache.org/">Apache HTrace</a></h1> |
| </div> |
| <div class="row" align="center"> |
| <img src="image/owl.png" width="40%"><p/><p/> |
| </div> |
| </script> |
| |
| <script id="server-info-view-template" type="text/template"> |
| <div class="row"> |
| <div class="col-md-1"> |
| </div> |
| <div class="col-md-10"> |
| <h2>HTraced at <%= window.location.host %></h2> |
| <div class="panel panel-info"> |
| <div class="panel-heading"> |
| <div class="panel-title">Version</div> |
| </div> |
| <table class="table table-striped"> |
| <tr> |
| <td>Server Release Version</td> |
| <td><%= model.version.get("ReleaseVersion") %></td> |
| </tr> |
| <tr> |
| <td>Server Git Hash</td> |
| <td><%= model.version.get("GitVersion") %></td> |
| </tr> |
| </table> |
| </div> |
| <div class="panel panel-info"> |
| <div class="panel-heading"> |
| <div class="panel-title">Global Metrics</div> |
| </div> |
| <table class="table table-striped"> |
| <tr> |
| <td>Spans Reaped</td> |
| <td><%= model.stats.get("ReapedSpans") %></td> |
| </tr> |
| <tr> |
| <td>Spans Ingested</td> |
| <td><%= model.stats.get("IngestedSpans") %></td> |
| </tr> |
| <tr> |
| <td>Spans Written</td> |
| <td><%= model.stats.get("WrittenSpans") %></td> |
| </tr> |
| <tr> |
| <td>Server Dropped Spans</td> |
| <td><%= model.stats.get("ServerDroppedSpans") %></td> |
| </tr> |
| <tr> |
| <td>Maximum WriteSpans Latency (ms)</td> |
| <td><%= model.stats.get("MaxWriteSpansLatencyMs") %></td> |
| </tr> |
| <tr> |
| <td>Average WriteSpans Latency (ms)</td> |
| <td><%= model.stats.get("AverageWriteSpansLatencyMs") %></td> |
| </tr> |
| </tr> |
| <td>Datastore Start Time</td> |
| <td><%= htrace.dateToString(model.stats.get("LastStartMs")) %></td> |
| </tr> |
| </tr> |
| <td>Current Server Time</td> |
| <td><%= htrace.dateToString(model.stats.get("CurMs")) %></td> |
| </tr> |
| </table> |
| </div> |
| <div class="panel panel-info"> |
| <%= view.getServerStatsTableHtml() %> |
| </div> |
| <button type="button" class="btn btn-info serverConfigurationButton">Server Configuration</button> |
| <button type="button" class="btn btn-success storageDirectoryStatsButton">Storage Directory Stats</button> |
| <button type="button" class="btn btn-warning debugInfoButton">Debug Info</button> |
| <br/> |
| <p/> |
| </div> |
| <div class="col-md-1"> |
| </div> |
| </div> |
| </script> |
| |
| <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">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="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 at or 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 at or 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 at least</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> |
| <li><a href="javascript:void(0)" |
| class="add-field">TracerId contains</a></li> |
| <li><a href="javascript:void(0)" |
| class="add-field">TracerId is exactly</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">Limits</h1> |
| </div style="border: 1px solid #000000;"> |
| <div class="panel-body"> |
| <div class="form-horizontal"> |
| <div class="form-group"> |
| <label class="col-sm-8 control-label">Max search results</label> |
| <div class="col-sm-4"> |
| <input type="text" class="form-control" id="search-lim" value="20"/> |
| </div> |
| </div> |
| <div class="form-group"> |
| <label class="col-sm-8 control-label">Max child lookup</label> |
| <div class="col-sm-4"> |
| <input type="text" class="form-control" id="children-lim" value="50"/> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="col-md-9" id="resultsView"> |
| </div> |
| </div> |
| </script> |
| |
| <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="search-results-view-template" type="text/template"> |
| <!-- tabindex=1 is needed or else the canvas can never gain mouse focus on Chrome. --> |
| <canvas id="resultsCanvas" class="htrace-canvas" tabindex="1"> |
| <h2>Sorry, your browser does not support the HTML5 canvas element. Please |
| upgrade to a newer browser.</h2> |
| </canvas> |
| </script> |
| |
| <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> |
| </script> |
| |
| <script id="modal-table-template" type="text/template"> |
| <div class="modal-dialog modal-lg"> |
| <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> |
| </script> |
| |
| <script id="table-row-template" type="text/template"> |
| <tr bgcolor="<%= bgcolor %>"> |
| <td style="width:30%;word-wrap:break-word"><%- key %></td> |
| <td style="width:70%;word-wrap:break-word"><%- val %></td> |
| </tr> |
| </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/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/tree.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/partition_widget.js" type="text/javascript"></script> |
| |
| <script src="app/span.js" type="text/javascript"></script> |
| |
| <script src="app/span_group_widget.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/server_info_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_configuration.js" type="text/javascript"></script> |
| <script src="app/server_stats.js" type="text/javascript"></script> |
| <script src="app/server_version.js" type="text/javascript"></script> |
| <script src="app/server_debug_info.js" type="text/javascript"></script> |
| |
| <script src="app/router.js" type="text/javascript"></script> |
| </body> |
| </html> |
| |
