/
ui.tmpl
61 lines (57 loc) · 1.92 KB
/
ui.tmpl
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
<!DOCTYPE html>
<html><head>
<title>Tailscale SQL Playground</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="/static/style.css" />
<link rel="icon" href="/static/favicon.ico" />
</head><body id="tsql">
<div class="logo">
<img src="/static/logo.svg" width=64 height=64 />
<span>TailSQL</span>
</div>
<div id="input"><div id="nut"></div>{{with .Version}}
<div class="version">
<span>Version: {{.}}</span>
</div>{{end}}
<form id="qform" method="GET">
<textarea name="q" rows=10 cols=90 id="query">{{- .Query -}} </textarea><br />
<span class="uihint">Hint: Use shift-enter to submit your query</span>
<div class="action">
<span><button id="send-query" class="ctrl" title="query">Query</button></span>
<span><button class="ctrl" id="dl-button" title="download">Download as CSV</button></span>
<span><label>Source: <select id="sources" class="ctrl" name="src">{{range $s := .Sources}}
<option class="ctrl" value="{{$s.Source}}"{{if eq $.Source .Source}} selected{{end}}>{{$s.Label}}</option>
{{end}}</select></label></span>
</div>
</form>
</div>
{{with .Links}}<div class="meta">
<span class="label">Links:</span>{{range .}}
<span><a href="{{.URL}}" target="_blank">{{.Anchor}}</a></span>{{end}}
</div>{{end}}
{{with .Error}}
<div id="error" class="output"><div class="error">
<span>Error:</span>
<span>{{.}}</span>
</div></div>{{end -}}
{{with .Output}}
<hr />
<div id="output" class="output">
<div class="details">
<span>Query time: {{.Elapsed}}</span>
<span>{{.NumRows}} rows{{if .More}} fetched (additional rows not loaded){{else}} total{{end}}</span>{{if .Trunc}}
<span>(display is truncated)</span>{{end}}
</div>
<table>
<tr>{{range .Columns}}
<th>{{.}}</th>{{end}}
</tr>
{{range .Rows -}}
<tr>{{range .}}
<td>{{.}}</td>{{end}}
</tr>{{end}}
</table></div>
{{end -}}
<script type="module" src="/static/script.js"></script>
</body>
</html>