-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
128 lines (117 loc) · 5.58 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
<!DOCTYPE html>
<head>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📈</text></svg>">
<title> SQL Log Analyzer </title>
<script src="./js/simpleSqlParser.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="./js/controllers.js"></script>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body ng-app="queryAnalysisApp" class="font-sans antialiased">
<nav class="flex bg-gray-100 border-b border-gray-200 fixed top-0 inset-x-0 z-50 h-16 items-center text-gray-700">
<div class="w-full max-w-screen-xl relative mx-auto px-6">
<div class="flex items-center -mx-6">
<div class="pl-6 pr-6">
<a class="block lg:mr-4 text-gray-700 text-2xl" href="./">📈 SQL Log {{'Analyz' + 'er'}} </a>
</div>
<div class="flex flex-grow min-w-0 flex-row-reverse">
<div
class="hidden lg:flex lg:items-center lg:justify-between xl:w-1/4 px-6"
>
<div class="flex justify-start items-center text-gray-500">
<a
href="https://sony-mathew.com"
target="_blank"
class="block flex items-center hover:text-gray-700 mr-5"
>
Author
</a>
<a
href="https://github.com/sony-mathew/sql-log-analyzer"
target="_blank"
class="block flex items-center hover:text-gray-700 mr-5"
>
Help
</a>
<a
href="https://github.com/sony-mathew/sql-log-analyzer"
target="_blank"
class="block flex items-center hover:text-gray-700 mr-5"
>
Github
</a>
<a
href="https://github.com/sony-mathew/sql-log-analyzer/issues"
target="_blank"
class="block flex items-center hover:text-gray-700 mr-5"
>
Issues
</a>
</div>
</div>
</div>
</div>
</div>
</nav>
<div class="flex bg-white mt-20 w-full max-w-screen-xl relative mx-auto px-6">
<section id="log-input" ng-controller="LogInput as logi" ng-hide="logi.hide" class="w-full max-w-screen-xl">
<div class="flex flex-col gap-10 pt-6">
<div class="flex flex-col text-gray-700 text-xl">
<div class="text-gray-400 text-opacity-64 text-2xl">Step 1.</div>
<div>Paste the SQL log in the following text box </div>
</div>
<div class="">
<textarea class="rounded border border-gray-400 w-full h-48" name="log_input" class="log_input" ng-model="logi.railsLog"></textarea>
</div>
<div>
<input type="submit" name="submit" value="submit" ng-click="logi.getLog()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
</div>
</div>
</section>
<section id="log-analysis" ng-controller="LogAnalysis as loga" class="w-full max-w-screen-xl">
<div ng-hide="!loga.tables()" class="flex flex-col pt-6">
<div class="flex flex-col text-gray-700 text-xl">
<div class="text-gray-400 text-opacity-64 text-2xl">Step 2.</div>
<div class="flex flex-row gap-6 text-gray-700 text-xl">
<div>Select SQL Table</div>
<select class="rounded-md border border-gray-400 text-l" id="mysql-table" name="mysql_table" ng-change="loga.selectTable()" ng-model="loga.mysqlTable">
<option ng-repeat="table in loga.tables()">{{ table }}</option>
</select>
</div>
</div>
<div ng-hide="!loga.queryTypes()" class="flex flex-col text-gray-700 text-xl pt-6">
<div class="text-gray-400 text-opacity-64 text-2xl">Step 3.</div>
<div class="flex flex-row gap-6 text-gray-700 text-xl">
<div>Select Query Type</div>
<select class="rounded-md border border-gray-400 text-l" id="query-type" name="query_type" ng-change="loga.selectQueryType()" ng-model="loga.tableQueryType">
<option ng-repeat="type in loga.queryTypes()">{{ type }}</option>
</select>
</div>
</div>
<div class="listing pt-6">
<table class="w-full text-left table-collapse">
<thead>
<tr>
<th class="z-20 sticky top-0 text-sm font-semibold text-gray-700 p-0">
<div class="p-2 border-b border-gray-300">#</div>
</th>
<th class="z-20 sticky top-0 text-sm font-semibold text-gray-700 p-0 hidden sm:table-cell">
<div class="p-2 border-b border-gray-300">Query</div>
</th>
</tr>
</thead>
<tr ng-repeat="query in loga.listQ() track by $index">
<td class="font-mono text-sm text-blue-700 hidden sm:table-cell whitespace-normal p-2">
{{ $index + 1}}
</td>
<td class="font-mono text-sm text-blue-700 hidden sm:table-cell whitespace-normal p-2">
{{ query }}
</td>
</tr>
</table>
</div>
</div>
</section>
</div>
</body>
</html>