/
toolbar.dbtmako
116 lines (104 loc) · 4.08 KB
/
toolbar.dbtmako
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<%namespace file="history_tab.dbtmako" import="history_tab"/>
<%namespace file="global_tab.dbtmako" import="global_tab"/>
<%namespace file="settings_tab.dbtmako" import="settings_tab"/>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pyramid Debug Toolbar</title>
<!--bootstrap version 2.3.2-->
<link rel="stylesheet" type="text/css" href="${static_path}css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="${static_path}css/toolbar.css">
<link rel="stylesheet" type="text/css" href="${static_path}css/dashboard.css">
<link rel="stylesheet" href="${static_path}css/panel.debugger.css" type="text/css">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<!-- <img src="${static_path}img/pyramid.png"/> -->
Pyramid DebugToolbar</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#history" data-toggle="tab">History</a></li>
<li><a href="#global" data-toggle="tab">Global</a></li>
<li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
</div>
</div>
</div>
<div id="content" class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="tab-content">
<div class="tab-pane active" id="history">
${history_tab()}
</div>
<div class="tab-pane" id="global">
${global_tab()}
</div>
<div class="tab-pane" id="settings">
${settings_tab()}
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var DEBUG_TOOLBAR_STATIC_PATH = '${static_path}';
</script>
<script src="${static_path}js/jquery-1.10.2.min.js"></script>
<script src="${static_path}js/jquery.cookie.js"></script>
<script src="${static_path}js/jquery.tablesorter.min.js"></script>
<script src="${static_path}js/bootstrap.min.js"></script>
<script src="${static_path}js/toolbar.js"></script>
<script>
$(function () {
$('#myTab a:first').tab('show');
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
var source;
function new_request(e) {
$('ul#requests li a').tooltip('hide')
var html = '<li><h4>Requests</strong></h4></li>';
var requests = $('ul#requests');
var data = JSON.parse(e.data);
data.forEach(function (item) {
var details = item[1];
var request_id = item[0];
var active = item[2];
html += '<li class="'+active+'"><a href="/_debug_toolbar/'+request_id+'" title="'+details.path+'">';
html += '<span class="badge pull-right _'+details.status_code+'">'+details.status_code+'</span>';
html += details.method+'<br>'+details.path;
html += '</a></li>';
});
requests.html(html);
$('ul#requests li a').tooltip({
placement: 'right',
container: 'body'
});
}
function connectEventSource() {
if (source) {
source.close();
}
source = new EventSource('/_debug_toolbar/sse?request_id=${request_id}');
source.addEventListener('new_request', new_request);
}
if (!!window.EventSource) {
connectEventSource();
}
});
</script>
</body>
</html>