-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
executable file
·114 lines (96 loc) · 5.37 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
102
103
104
105
106
107
108
109
110
111
112
113
114
<!--
Are you awesome? Font Awesome - http://fortawesome.github.com/Font-Awesome
-->
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Log Analysis</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="/">Log Analysis</a>
</div>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row-fluid">
<div class="span6">
<h2>What do you look for when you're looking at logs?</h2>
<p>
I look for <em>outliers</em>. I want filter out the
log entries that are noisy, and look for the unusual
ones.
</p>
<p>
With Unix, first and foremost, I filter out the
log entries that I'm not intested in.
<code>cat log | grep -v 'boring'</code>. When
that's not enough, I cluster the log entries
by removing their uniqueness. Something like:
<code>cat log | tr '[0-9]' N | sort | uniq -c | sort -n</code>
That produces a histogram of log clusters.
</p>
<p>
The next step is to visualize those clusters
over time, and that's what this page does.
It clusters log entries by text (using the simple
mechanism of removing numbers) and then by
time (building a histogram).
</p>
<h2>Let's do it (all client-side)!</h2>
<div class="hero-unit">
Upload file: <input type="file" id="fileinput" /><br/>
or<br/>
URL: <input value="log_small.txt" id="urlinput" /><button id="urlbutton" class="btn btn-primary">Fetch</button><br/>
</div>
</div>
</div>
<div class="row-fluid">
<!--
<div class="span6" id="build-results">
<textarea>
2012-04-22 10:29:36,793 INFO [WebServerImpl:annotation.DefaultAnnotationHandlerMapping@411] Mapped URL path [/services/{serviceId}/instances/{roleId}/config/revisions/table] onto handler 'configController'
2012-04-22 10:29:37,827 INFO [WebServerImpl:annotation.DefaultAnnotationHandlerMapping@411] Mapped URL path [/services/{serviceId}/instances/{roleId}/config/revisions/table.*] onto handler 'configController'
2012-04-22 10:29:38,828 INFO [WebServerImpl:annotation.DefaultAnnotationHandlerMapping@411] Mapped URL path [/services/{serviceId}/instances/{roleId}/config/revisions/table/] onto handler 'configController'
2012-04-22 10:30:36,828 INFO [WebServerImpl:annotation.DefaultAnnotationHandlerMapping@411] Mapped URL path [/services/{serviceId}/config/revisions/diff] onto handler 'configController'
2012-04-22 10:30:36,828 INFO [WebServerImpl:annotation.DefaultAnnotationHandlerMapping@411] Mapped URL path [/services/{serviceId}/config/revisions/diff.*] onto handler 'configController'
2012-04-22 10:30:36,828 INFO [WebServerImpl:annotation.DefaultAnnotationHandlerMapping@411] Mapped URL path [/services/{serviceId}/config/revisions/diff/] onto handler 'configController'
2012-04-22 10:29:36,828 INFO [WebServerImpl:annotation.DefaultAnnotationHandlerMapping@411] Mapped URL path [/services/{serviceId}/instances/{roleId}/config/revisions/diff] onto handler 'configController'
</textarea>
</div>
</div>
-->
<div class="row-fluid">
<div class="span6" id="viz">
</div>
</div>
<hr>
<footer>
<p>© Cloudera 2012</p>
</footer>
</div> <!-- /container -->
<!--
<a href="https://github.com/philip/logvizjs"><img style="position: absolute; top: 0; right: 0; border: 0; z-index:10000;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
-->
<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> -->
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/vendor/knockout-2.2.0.js"></script>
<script src="js/vendor/knockout.mapping-latest.js"></script>
<script src="js/vendor/underscore-min.js"></script>
<script src="js/vendor/d3.v2.js"></script>
<script src="js/main.js"></script>
</body>
</html>