Google Git
Sign in
apache / incubator-retired-htrace / 47b889c4c1b37649d0351a98c18c40cf40adb4df / . / htrace-webapp / src / main / webapp / index.html
blob: 7f4a6872a2983b835dd5425fa4e48b7eb1b82aa3 [file] [log] [blame]
<!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>
<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">&times;</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">&times;</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>