forked from fcamblor/mysql-slow-query-log-visualizer
-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
150 lines (143 loc) · 8.93 KB
/
index.html
File metadata and controls
150 lines (143 loc) · 8.93 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MySQL Slow Query Log Visualizer</title>
<link rel="stylesheet" href="css/style.css">
<script src="vendor/jquery-3.7.1.min.js"></script>
<script src="vendor/chartjs/chart.umd.js"></script>
<script src="vendor/lodash.min.js"></script>
<script src="vendor/clipboard.min.js"></script>
<script src="vendor/list.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id="githubLink">
<a href="https://github.com/shoulders/mysql-slow-query-log-visualizer" target="_blank" rel="noopener">
<img src="images/github-mark-white.png" alt="GitHub"><br />Instructions
</a>
</div>
<div id="information" class="information-block">
<h1>MySQL Slow Query Log Visualizer</h1>
<em>If you need to process very large files (>500MB), you will have to call Chrome with <strong>--js-flags="--max-old-space-size=5000"</strong> parameter to increase memory allocatable by Chrome to 5GB</em>
</div>
<div id="dropZone">Drop log file here</div>
<div id="logInformation" class="information-block" hidden>
<h2>Log Information</h2>
<ul>
<li><span class="item-title">Server: </span><span id="logInformationServerDetails">Not available</span></li>
<li><span class="item-title">File: </span><span id="logInformationFile">Not available</span></li>
<li><span class="item-title">Records: </span><span id="logInformationRecordCount">Not available</span></li>
<li><span class="item-title">Start Date: </span><span id="logInformationStartDate">Not available</span></li>
<li><span class="item-title">End Date: </span><span id="logInformationEndDate">Not available</span></li>
</ul>
</div>
<!-- Global Chart -->
<div id="globalChartContainer" class="chart-container" hidden>
<div class="information-block">
<h2>GLOBAL CHART</h2>
<ul>
<li>
<span class="item-title">Group By: </span>
<select id="globalChartTimeScale">
<option value="month">Month</option>
<option value="week">Week</option>
<option value="day">Day</option>
<option value="hour" selected>Hour</option>
<option value="minute">Minute</option>
<option value="aggregatedWeekdays">Aggregated Weekdays</option>
<option value="aggregatedWeekdayHours">Aggregated Weekday Hours</option>
<option value="aggregatedDays">Aggregated Days</option>
<option value="aggregatedHours">Aggregated Hours</option>
</select>
</li>
<li><span class="item-title">Displaying: </span><span id="globalChartRecordCount"></span> queries</li>
<li><button id="resetFilter" onclick="resetPage();">Reset Filter</button></li>
</ul>
</div>
<canvas id="globalChart" class="chart"></canvas>
</div>
<br /><br />
<!-- Working Chart -->
<div id="workingChartContainer" class="chart-container" hidden>
<div class="information-block">
<h2>WORKING CHART</h2>
<ul>
<li>
<span class="item-title">Group By: </span>
<select id="workingChartTimeScale">
<option value="month">Month</option>
<option value="week">Week</option>
<option value="day">Day</option>
<option value="hour" selected>Hour</option>
<option value="minute">Minute</option>
</select>
</li>
<li><span class="item-title">Displaying: </span><span id="workingChartRecordCount"></span> queries</li>
<li id="appliedFilter"><span class="item-title">Chart Range: </span><span class="item-subtitle">start</span> = <span id="filterStart"></span>, <span class="item-subtitle">end</span> = <span id="filterEnd"></span></li>
</ul>
</div>
<canvas id="workingChart" class="chart"></canvas>
</div>
<!-- Table -->
<div id="logListContainer" hidden>
<table id="logList">
<thead class="header">
<tr id="search">
<th colspan="10">
<span class="list-search">
Showing <span id="listItemsCountShowing"></span> of <span id="listItemsCountShowingOf"></span> records
(Filtered: <span id="listItemsCountFiltered"></span> / Visible: <span id="listItemsCountVisible"></span> / Total: <span id="listItemsCountTotal"></span>)
<label for="logListSearch">Filter:</label>
<input id="logListSearch" />
</span>
<div class="pagination-container">
<a class="prevnext-button pagination-prev page" href="#" hidden><</a><ul class="pagination pagination-top"></ul><a class="prevnext-button pagination-next page" href="#" hidden>></a>
</div>
</th>
</tr>
<tr>
<th scope="col" class="sort asc" data-sort="time"><p>Time<br>(Local)</p><span class="sort-icon"></span></th>
<th scope="col" class="sort" data-sort="query_duration"><p>Query Duration<br>(Seconds)</p><span class="sort-icon"></span></th>
<th scope="col" class="sort" data-sort="lock_duration"><p>Lock Duration<br>(Seconds)</p><span class="sort-icon"></span></th>
<th scope="col" class="sort" data-sort="rows_sent"><p>Rows Sent</p><span class="sort-icon"></span></th>
<th scope="col" class="sort" data-sort="rows_examined"><p>Rows Examined</p><span class="sort-icon"></span></th>
<th scope="col" class="sort" data-sort="db_name"><p>DB Name</p><span class="sort-icon"></span></th>
<th scope="col" class="sort" data-sort="query_pattern_global_occurences"><p>Query Pattern Occurences<br>(Global Data)<br>(Stripped WHERE)</p><span class="sort-icon"></span></th>
<th scope="col" class="sort" data-sort="query_pattern_filtered_occurences"><p>Query Pattern Occurences<br>(Working Data)<br>(Stripped WHERE)</p><span class="sort-icon"></span></th>
<th scope="col" class="sort" data-sort="query_string"><p>Query String</p><span class="sort-icon"></span></th>
<th scope="col" class="sort" data-sort="query_with_stripped_where_clauses"><p>Query String<br>(Stripped WHERE)</p><span class="sort-icon"></span></th>
</tr>
</thead>
<tbody class="list">
<tr id="logListItem">
<th scope="row" class="date"></th>
<td class="query_duration"></td>
<td class="lock_duration"></td>
<td class="rows_sent"></td>
<td class="rows_examined"></td>
<td class="db_name"></td>
<td class="query_pattern_global_occurences"></td>
<td class="query_pattern_filtered_occurences"></td>
<td class="qs"><pre class="query_string"></pre></td>
<td class="qs"><pre class="query_with_stripped_where_clauses"></pre></td>
</tr>
</tbody>
<tfoot>
<th colspan="10">
<div class="pagination-container">
<a class="prevnext-button pagination-prev page" href="#" hidden><</a><ul class="pagination pagination-bottom"></ul><a class="prevnext-button pagination-next page" href="#" hidden>></a>
</div>
<div id="noRecords" hidden>No Records</div>
</th>
</tfoot>
</table>
</div>
<div id="footer">
<p>MySQL Slow Query Log Visualizer</p>
<p>© 2015 <a href="http://www.4sh.fr">4SH</a> and <a href="http://www.neurofuzzy.net">Neurofuzzy Consulting</a></p>
<p>© 2025 - shoulders from <a href="https://quantunmwarp.com/">QuantumWarp</a></p>
</div>
</body>
</html>