-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
153 lines (153 loc) · 8.34 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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SAR Charts</title>
<link rel="icon" type="image/x-icon" href="./images/favicon.ico">
<link rel="stylesheet" type="text/css" href="./css/bootswatch.min.css">
<link rel="stylesheet" type="text/css" href="./css/jquery-ui.theme.min.css">
<link rel="stylesheet" type="text/css" href="./css/slate.min.css">
<link rel="stylesheet" type="text/css" href="./css/main.min.css">
<link rel="stylesheet" type="text/css" href="./css/Chart.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
<img class="mr-3" src="./images/tux.png" alt="" width="48" height="48">
<a class="navbar-brand mr-auto mr-lg-0" href="/">SAR Charts</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse offcanvas-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" id="menu-start" href="/">Home</a>
</li>
<li class="nav-item nav-graph d-none dropdown">
<a class="nav-link nav-menu dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="menu-resume">Resume <span class="caret"></span></a>
<div class="dropdown-menu" aria-labelledby="menu-resume"></div>
</li>
<li class="nav-item nav-graph d-none dropdown">
<a class="nav-link nav-menu dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="menu-cpu">CPU <span class="caret"></span></a>
<div class="dropdown-menu" aria-labelledby="menu-cpu"></div>
</li>
<li class="nav-item nav-graph d-none dropdown">
<a class="nav-link nav-menu dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="menu-disk">Disks <span class="caret"></span></a>
<div class="dropdown-menu" aria-labelledby="menu-disk"></div>
</li>
<li class="nav-item nav-graph d-none dropdown">
<a class="nav-link nav-menu dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="menu-mem">Memory <span class="caret"></span></a>
<div class="dropdown-menu" aria-labelledby="menu-mem"></div>
</li>
<li class="nav-item nav-graph d-none dropdown">
<a class="nav-link nav-menu dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="menu-net">Network <span class="caret"></span></a>
<div class="dropdown-menu" aria-labelledby="menu-net"></div>
</li>
<li class="nav-item nav-graph d-none dropdown">
<a class="nav-link nav-menu dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="menu-tasks">Processes <span class="caret"></span></a>
<div class="dropdown-menu" aria-labelledby="menu-tasks"></div>
</li>
<li class="nav-item nav-graph d-none dropdown">
<a class="nav-link nav-menu dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="menu-sys">System <span class="caret"></span></a>
<div class="dropdown-menu" aria-labelledby="menu-sys"></div>
</li>
<li class="nav-item nav-pdf d-none">
<a class="nav-link nav-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="menu-pdf">PDF export</span></a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="https://github.com/Shadok/sarcharts">GitHub</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div id="alert" class="d-none"></div>
<div id="infos" class="my-3 p-3 bg-secondary text-white rounded shadow-sm row">You can zoom on the graphs by selecting an area of one of them, then unzoom with a double-click.</div>
<div id="start" class="my-3 p-3 bg-primary rounded shadow-sm row">
<div class="col-lg-6">
<p>SAR Charts is a web interface for displaying data, provided by SAR (System Activity Report, from the sysstat package) on Linux and Unix servers, with graphs.</p>
<h4>SAR file importation</h4>
<form>
<div class="form-row">
<div class="form-group col-sm-6">
<input type="file" class="form-control-file" name="sarfile-upload" accept="text/plain" id="sarfile-upload" accept=".txt">
</div>
<div class="form-group col-sm-6">
<button type="submit" class="btn btn-success btn-sm" id="submit-manual">Submit</button>
<img src="./images/loading.gif" alt="" class="d-none" id="sarfile-manual-loading">
</div>
</div>
<div class="row">
<div class="col-sm-12">• Sample files to download for testing:</div>
</div>
<div class="row">
<div class="col-sm-4">
<ul>
<li><a href="./examples/sa28_server_aix6.1.txt" title="AIX 6.1 sar example file">AIX 6.1</a></li>
<li><a href="./examples/sa05_server_rhel5.txt" title="RHEL 5 sar example file">RHEL 5</a></li>
</ul>
</div>
<div class="col-sm-4">
<ul>
<li><a href="./examples/sa31_server_rhel7.6.txt" title="RHEL 7.6 sar example file">RHEL 7.6</a></li>
<li><a href="./examples/sa17_server_sol5.8.txt" title="Solaris 5.8 sar example file">Solaris 5.8</a></li>
</ul>
</div>
<div class="col-sm-4">
<ul>
<li><a href="./examples/sa17_server_sol5.10.txt" title="Solaris 5.10 sar example file">Solaris 5.10</a></li>
<li><a href="./examples/sa18_server_ubuntu18.04.txt" title="Ubuntu 18.04 sar example file">Ubuntu 18.04</a></li>
</ul>
</div>
</div>
<div class="row mt-3">
<div class="col-sm-12">SAR Charts supports single and multiple days files !<br>Too much data in a single file can make graphs unreadable without zoom.</div>
</div>
</form>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<div class="card-text">
<h5>How to export a SAR file</h5>
<span class="text-secondary">The location of the files varies according to the distribution: /var/log/sa, /var/log/sysstat, /var/adm/sa...</span><br>
For a single file:<br>
<span class="text-secondary"># sar -A -p -f <path>/saXX > /tmp/saXX_$(uname -n).txt</span><br>
For multiple files:
<ul>
<li>One file per day : <span class="text-secondary"># cd <path> && find . -name 'sa??' -type f -exec sh -c 'for f; do sar -A -p -f ${f} > /tmp/${f}_$(uname -n).txt; done' _ {} +</span></li>
<li>One file combined : <span class="text-secondary"># cd <path> && ls sa?? | xargs -i sar -A -p -f {} > /tmp/sar_$(uname -n).txt</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="graph-resume" class="my-3 p-3 bg-primary rounded shadow-sm row d-none"></div>
<div id="graph-cpu" class="my-3 p-3 bg-primary rounded shadow-sm row d-none"></div>
<div id="graph-disk" class="my-3 p-3 bg-primary rounded shadow-sm row d-none"></div>
<div id="graph-net" class="my-3 p-3 bg-primary rounded shadow-sm row d-none"></div>
<div id="graph-mem" class="my-3 p-3 bg-primary rounded shadow-sm row d-none"></div>
<div id="graph-tasks" class="my-3 p-3 bg-primary rounded shadow-sm row d-none"></div>
<div id="graph-sys" class="my-3 p-3 bg-primary rounded shadow-sm row d-none"></div>
</div>
<footer class="footer">
<div class="container text-center">
<span class="text-muted">SARCharts by Shadok - <a href="https://github.com/Shadok/sarcharts" title="GitHub">GitHub</a></span>
</div>
</footer>
<script src="./js/jquery.min.js"></script>
<script src="./js/jquery-ui.custom.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/main.min.js"></script>
<script src="./js/lang.min.js"></script>
<script src="./js/Chart.bundle.min.js"></script>
<script src="./js/chartjs-plugin-zoom.min.js"></script>
<script src="./js/hammer.min.js"></script>
<script src="./js/jspdf.min.js"></script>
</body>
</html>