-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
101 lines (99 loc) · 4.95 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>Statsd Manager</title>
<link href="bower_components/basscss/css/basscss.css" rel="stylesheet" type="text/css">
<link href="bower_components/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/moment/moment.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="statsd" ng-controller="main" style="opacity: 0;">
<header>
<nav class="clearfix mb2 container">
<a href="#" class="btn py2" ng-class="{active: tab == 'metrics'}" ng-click="tab = 'metrics'">Metrics</a>
<a href="#" class="btn py2" ng-class="{active: tab == 'stats'}" ng-click="tab = 'stats'">Server Stats</a>
<div class="pull-right">
<a href="#" class="btn refresh-btn py2" ng-click="refresh()"><i class="fa fa-refresh"></i></a>
</div>
</nav>
</header>
<section class="container" ng-show="tab == 'stats'">
<table class="table-light">
<tbody>
<tr>
<th style="width: 30%;">Name</th>
<th style="width: 70%;">Value</th>
</tr>
<tr ng-repeat="(key, value) in stats">
<td>{{ key }}</td>
<td>{{ value }}</td>
</tr>
</tbody>
</table>
</section>
<section class="container" ng-show="tab == 'metrics'">
<div>
<div class="node-container">
<div class="node" ng-repeat="node in tree" ng-include="'nodes_renderer.html'"></div>
</div>
</div>
</section>
<div class="preloader" ng-show="loaded != 8 + 4 + 2 + 1">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">
<g class="pre load6">
<path fill="#FF4136" d="M124.5,57L124.5,57c0,3.9-3.1,7-7,7h-36c-3.9,0-7-3.1-7-7v0c0-3.9,3.1-7,7-7h36
C121.4,50,124.5,53.1,124.5,57z"/>
<path fill="#FF851B" d="M147.7,86.9L147.7,86.9c-2.7,2.7-7.2,2.7-9.9,0l-25.5-25.5c-2.7-2.7-2.7-7.2,0-9.9l0,0
c2.7-2.7,7.2-2.7,9.9,0L147.7,77C150.5,79.8,150.5,84.2,147.7,86.9z"/>
<path fill="#FFDC00" d="M143,74.5L143,74.5c3.9,0,7,3.1,7,7v36c0,3.9-3.1,7-7,7l0,0c-3.9,0-7-3.1-7-7v-36
C136,77.6,139.1,74.5,143,74.5z"/>
<path fill="#2ECC40" d="M148.4,112.4L148.4,112.4c2.7,2.7,2.7,7.2,0,9.9L123,147.7c-2.7,2.7-7.2,2.7-9.9,0h0c-2.7-2.7-2.7-7.2,0-9.9
l25.5-25.5C141.3,109.6,145.7,109.6,148.4,112.4z"/>
<path fill="#39CCCC" d="M125.5,143L125.5,143c0,3.9-3.1,7-7,7h-36c-3.9,0-7-3.1-7-7l0,0c0-3.9,3.1-7,7-7h36 C122.4,136,125.5,139.1,125.5,143z"/>
<path fill="#7FDBFF" d="M52.3,113.1L52.3,113.1c2.7-2.7,7.2-2.7,9.9,0l25.5,25.5c2.7,2.7,2.7,7.2,0,9.9h0c-2.7,2.7-7.2,2.7-9.9,0
L52.3,123C49.5,120.2,49.5,115.8,52.3,113.1z"/>
<path fill="#0074D9" d="M57,75.5L57,75.5c3.9,0,7,3.1,7,7v36c0,3.9-3.1,7-7,7h0c-3.9,0-7-3.1-7-7v-36C50,78.6,53.1,75.5,57,75.5z"/>
<path fill="#F012BE" d="M86.9,52.3L86.9,52.3c2.7,2.7,2.7,7.2,0,9.9L61.5,87.6c-2.7,2.7-7.2,2.7-9.9,0l0,0c-2.7-2.7-2.7-7.2,0-9.9
L77,52.3C79.8,49.5,84.2,49.5,86.9,52.3z"/>
</g>
</svg>
</div>
<div class="login center" ng-show="firstTry || connectionError">
<div class="mt4">
<div ng-if="connectionError">
<h2>Connection Error</h2>
<p>{{ connectionError }}</p>
</div>
<div ng-if="!connectionError">
<h2>Connect to statsd server</h2>
</div>
<form>
<input class="field" type="text" ng-model="address" autofocus/>
<button type="submit" class="btn btn-primary bg-olive" ng-click="refresh()" ng-if="connectionError">Try again</button>
<button type="submit" class="btn btn-primary bg-olive" ng-click="refresh()" ng-if="!connectionError">Connect</button>
</form>
</div>
</div>
<script type="text/ng-template" id="nodes_renderer.html">
<div ng-if="!node.deleted">
<span>
<span class="cursor-pointer" ng-show="node.nodes.length > 0" ng-click="node.expand = !node.expand">
<i class="node-icon fa fa-folder" ng-show="!node.expand"></i>
<i class="node-icon fa fa-folder-open" ng-show="node.expand"></i>
{{ node.title }}
</span>
<span ng-show="node.nodes.length <= 0">
<i class="node-icon fa fa-file-o" ></i> {{ node.title }} <span class="node-value" ng-if="node.name !== 'timers'">{{ node.value }}</span>
</span>
</span>
<span class="cursor-pointer" ng-if="node.level > 1" ng-click="delete(node)"><i class="fa fa-times red"></i></span>
<div class="node-container" ng-if="node.expand">
<div class="node" ng-repeat="node in node.nodes" ng-include="'nodes_renderer.html'"></div>
</div>
</div>
</script>
</body>
</html>