8000 user experience enhancement by simagix · Pull Request #4 · simagix/hatchet · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

user experience enhancement #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 4, 2023
Merged

user experience enhancement #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 29 additions & 6 deletions chart_templ.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,41 @@ type NameValue struct {
Value int
}

func getFooter() string {
str := fmt.Sprintf(`<div class="footer"><img width='32' valign="middle" src='data:image/png;base64,%v'>Hatchet</img></div>`,
func getFooter(attr string, chartType string) string {
str := fmt.Sprintf(`
<script>
function setChartType() {
var sel = document.getElementById('nextChart')
var attr = '%v';
var chartType = '%v';

if(attr == "slowops" && (chartType == "" || chartType == "stats")) {
sel.selectedIndex = 1;
} else if(attr == "pieChart" && chartType == "counts") {
sel.selectedIndex = 2;
} else if(attr == "pieChart" && chartType == "accepted") {
sel.selectedIndex = 3;
} else if(attr == "connections" && chartType == "time") {
sel.selectedIndex = 4;
} else if(attr == "connections" && chartType == "total") {
sel.selectedIndex = 5;
}
}
</script>`, attr, chartType);
str += fmt.Sprintf(`<div class="footer"><img width='32' valign="middle" src='data:image/png;base64,%v'>Hatchet</img></div>`,
hatchetImage)
return str
}

// GetChartTemplate returns HTML
func GetChartTemplate(attr string) (*template.Template, error) {
func GetChartTemplate(attr string, chartType string) (*template.Template, error) {
var html string
if attr == "connections" {
html = headers + menuHTML + getFooter() + getConnectionsChart() + "</body></html>"
html = headers + menuHTML + getFooter(attr, chartType) + getConnectionsChart() + "</body></html>"
} else if attr == "pieChart" {
html = headers + menuHTML + getFooter() + getPieChart() + "</body></html>"
html = headers + menuHTML + getFooter(attr, chartType) + getPieChart() + "</body></html>"
} else {
html = headers + menuHTML + getFooter() + getOpCountsChart() + "</body></html>"
html = headers + menuHTML + getFooter(attr, chartType) + getOpCountsChart() + "</body></html>"
}
return template.New("hatchet").Funcs(template.FuncMap{
"epoch": func(d string, s string) int64 {
Expand All @@ -39,6 +59,7 @@ func GetChartTemplate(attr string) (*template.Template, error) {
func getOpCountsChart() string {
template := `
<script>
setChartType();
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

Expand Down Expand Up @@ -76,6 +97,7 @@ func getOpCountsChart() string {
func getPieChart() string {
template := `
<script>
setChartType();
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

Expand Down Expand Up @@ -108,6 +130,7 @@ func getPieChart() string {
func getConnectionsChart() string {
template := `
<script>
setChartType();
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

Expand Down
25 changes: 15 additions & 10 deletions html_handler.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,12 +49,13 @@ func htmlHandler(w http.ResponseWriter, r *http.Request) {
json.NewEncoder(w).Encode(map[string]interface{}{"ok": 0, "error": err.Error()})
return
}
templ, err := GetChartTemplate(attr)
templ, err := GetChartTemplate(attr, chartType)
if err != nil {
json.NewEncoder(w).Encode(map[string]interface{}{"ok": 0, "error": err.Error()})
return
}
doc := map[string]interface{}{"Table": tableName, "OpCounts": docs, "Summary": summary}
doc := map[string]interface{}{"Table": tableName, "OpCounts": docs,
"Summary": summary, "Attr": attr, "Chart": chartType}
if err = templ.Execute(w, doc); err != nil {
json.NewEncoder(w).Encode(map[string]interface{}{"ok": 0, "error": err.Error()})
return
Expand All @@ -66,12 +67,13 @@ func htmlHandler(w http.ResponseWriter, r *http.Request) {
json.NewEncoder(w).Encode(map[string]interface{}{"ok": 0, "error": err.Error()})
return
}
templ, err := GetChartTemplate("pieChart")
templ, err := GetChartTemplate("pieChart", chartType)
if err != nil {
json.NewEncoder(w).Encode(map[string]interface{}{"ok": 0, "error": err.Error()})
return
}
doc := map[string]interface{}{"Table": tableName, "NameValues": docs, "Title": "Ops Counts", "Summary": summary}
doc := map[string]interface{}{"Table": tableName, "NameValues": docs, "Title": "Ops Counts",
"Summary": summary, "Attr": attr, "Chart": chartType}
if err = templ.Execute(w, doc); err != nil {
json.NewEncoder(w).Encode(map[string]interface{}{"ok": 0, "error": err.Error()})
return
Expand All @@ -88,12 +90,13 @@ func htmlHandler(w http.ResponseWriter, r *http.Request) {
json.NewEncoder(w).Encode(map[string]interface{}{"ok": 0, "error": err.Error()})
return
}
templ, err := GetChartTemplate("pieChart")
templ, err := GetChartTemplate("pieChart", chartType)
if err != nil {
json.NewEncoder(w).Encode(map[string]interface{}{"ok": 0, "error": err.Error()})
return
}
doc := map[string]interface{}{"Table": tableName, "NameValues": docs, "Title": "Accepted Connections", "Summary": summary}
doc := map[string]interface{}{"Table": tableName, "NameValues": docs, "Title": "Accepted Connections",
"Summary": summary, "Attr": attr, "Chart": chartType}
if err = templ.Execute(w, doc); err != nil {
json.NewEncoder(w).Encode(map[string]interface{}{"ok": 0, "error": err.Error()})
return
Expand All @@ -105,21 +108,21 @@ func htmlHandler(w http.ResponseWriter, r *http.Request) {
json.NewEncoder(w).Encode(map[string]interface{}{"ok": 0, "error": err.Error()})
return
}
templ, err := GetChartTemplate(attr)
templ, err := GetChartTemplate(attr, chartType)
if err != nil {
json.NewEncoder(w).Encode(map[string]interface{}{"ok": 0, "error": err.Error()})
return
}
if len(docs) == 0 {
docs = []Remote{{IP: "No data", Accepted: 0, Ended: 0}}
}
doc := map[string]interface{}{"Table": tableName, "Remote": docs, "Summary": summary}
doc := map[string]interface{}{"Table": tableName, "Remote": docs,
"Summary": summary, "Attr": attr, "Chart": chartType}
if err = templ.Execute(w, doc); err != nil {
json.NewEncoder(w).Encode(map[string]interface{}{"ok": 0, "error": err.Error()})
return
}
return

}
} else if category == "logs" && attr == "slowops" {
topN := ToInt(r.URL.Query().Get("topN"))
Expand Down Expand Up @@ -197,7 +200,9 @@ func htmlHandler(w http.ResponseWriter, r *http.Request) {
json.NewEncoder(w).Encode(map[string]interface{}{"ok": 0, "error": err.Error()})
return
}
doc := map[string]interface{}{"Table": tableName, "Logs": logs}
summary := getTableSummary(tableName)
doc := map[string]interface{}{"Table": tableName, "Logs": logs, "LogLength": len(logs),
"Summary": summary, "Context": context, "Component": component, "Severity": severity}
if err = templ.Execute(w, doc); err != nil {
json.NewEncoder(w).Encode(map[string]interface{}{"ok": 0, "error": err.Error()})
return
Expand Down
79 changes: 49 additions & 30 deletions log_templ.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@
package hatchet

import (
"fmt"
"html/template"
"regexp"
"strings"
)

// GetLogsTemplate returns HTML
Expand All @@ -25,6 +27,31 @@ func GetLegacyLogTemplate() (*template.Template, error) {
"add": func(a int, b int) int {
return a + b
},
"getComponentOptions": func(item string) template.HTML {
arr := []string{}
comps := []string{"ACCESS", "ASIO", "COMMAND", "CONNPOOL", "CONTROL", "ELECTION", "FTDC", "INDEX", "INITSYNC", "NETWORK",
"QUERY", "RECOVERY", "REPL", "SHARDING", "STORAGE", "WRITE"}
for _, v := range comps {
selected := ""
if v == item {
selected = "SELECTED"
}
arr = append(arr, fmt.Sprintf("<option value='%v' %v>%v</option>", v, selected, v))
}
return template.HTML(strings.Join(arr, "\n"))
},
"getSeverityOptions": func(item string) template.HTML {
arr := []string{}
servs := [][2]string{{"FATAL", "F"}, {"ERROR", "E"}, {"WARN", "W"}, {"INFO", "I"}, {"DEBUG", "D"}, {"DEBUG2", "D2"}}
for _, v := range servs {
selected := ""
if v[1] == item {
selected = "SELECTED"
}
arr = append(arr, fmt.Sprintf("<option value='%v' %v>%v</option>", v[1], selected, v[0]))
}
return template.HTML(strings.Join(arr, "\n"))
},
"highligtLog": func(log string) template.HTML {
return template.HTML(highlightLog(log))
}}).Parse(html)
Expand Down Expand Up @@ -62,41 +89,32 @@ func getLogsTable() string {

func getLegacyLogTable() string {
template := `
<div align='center' width='100%'>
<select id='component' class="btn2" style="float: left;">
<br/>
<div style="float: left;">
<label>component: </label>
<select id='component'>
<option value=''>select a component</option>
<option value='ACCESS'>ACCESS</option>
<option value='ASIO'>ASIO</option>
<option value='COMMAND'>COMMAND</option>
<option value='CONNPOOL'>CONNPOOL</option>
<option value='CONTROL'>CONTROL</option>
<option value='ELECTION'>ELECTION</option>
<option value='FTDC'>FTDC</option>
<option value='INDEX'>INDEX</option>
<option value='INITSYNC'>INITSYNC</option>
<option value='NETWORK'>NETWORK</option>
<option value='QUERY'>QUERY</option>
<option value='RECOVERY'>RECOVERY</option>
<option value='REPL'>REPL</option>
<option value='SHARDING'>SHARDING</option>
<option value='STORAGE'>STORAGE</option>
<option value='WRITE'>WRITE</option>
{{getComponentOptions .Component}}
</select>
</div>

<select id='severity' class="btn2" style="float: center;">
<div style="float: left; padding: 0px 0px 0px 20px;">
<label>&nbsp;severity: </label>
<select id='severity'>
<option value=''>select a severity</option>
<option value='F'>Fatal</option>
<option value='E'>Error</option>
<option value='W'>Warn</option>
<option value='I'>Info</option>
{{getSeverityOptions .Severity}}
</select>
</div>

<button id="find" class="btn" style="float: right;">Find</button>
<input id='context' type='text' class="btn2" style="float: right;" size='25'/>
<label class="btn2" style="float: right;">context: </label>
<div style="float: left; padding: 0px 0px 0px 20px;">
<label>&nbsp;context: </label>
<input id='context' type='text' value='{{.Context}}' size='25'/>
<button id="find" class="button" style="float: right;">Find</button>
</div>
<p/>
<div align='center'>

<br/><h4 align='left'>{{.Summary}}</h4>
<div>
{{ if gt .LogLength 0 }}
<table width='100%'>
<tr>
<th>#</th>
Expand All @@ -106,7 +124,7 @@ func getLegacyLogTable() string {
<th>context</th>
<th>message</th>
</tr>
{{range $n, $value := .Logs}}
{{range $n, $value := .Logs}}
<tr>
<td align='right'>{{ add $n 1 }}</td>
<td>{{ $value.Timestamp }}</td>
Expand All @@ -115,8 +133,9 @@ func getLegacyLogTable() string {
<td>{{ $value.Context }}</td>
<td>{{ highligtLog $value.Message }}</td>
</tr>
{{end}}
{{end}}
</table>
{{end}}
</div>

<script>
Expand Down
49 changes: 27 additions & 22 deletions template.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ const headers = `<!DOCTYPE html>
font-size: 11px;
}
th {
background-color: #ddd;
background-color: #fff;
font-weight:bold;
}
tr:nth-child(even) {background-color: #f2f2f2;}
Expand All @@ -83,24 +83,28 @@ const headers = `<!DOCTYPE html>
}
.btn2 {
background-color: #f2f2f2;
color: #000;
padding: 5px;
color: #4285F4;
cursor: pointer;
font F438 -size: 14px;
font-size: .8em;
padding: 5px;
border-radius: .25em;
}
.btn2:hover {
color: #DB4437;
cursor: hand;
cursor: hand;
}
.button {
background-color: #f2f2f2;
border: none;
font-family: "Trebuchet MS";
background-color: #4285F4;
border: none;
outline:none;
color: #000;
padding: 5px 5px;
color: #f2f2f2;
padding: 5px 15px;
margin: 2px 10px;
cursor: pointer;
font-size: 16px;
font-size: 1em;
font-weight: bold;
border-radius: .25em;
}
h1 {
font-family: "Trebuchet MS";
Expand Down Expand Up @@ -130,13 +134,11 @@ const headers = `<!DOCTYPE html>
color: #000;
text-align: center;
}
select {
appearance: auto;
input, select, textarea {
font-family: "Trebuchet MS";
background-color: #4285F4;
color: #f2f2f2;
outline: 0;
border: 0;
appearance: auto;
background-color: #fff;
color: #4285F4;
cursor: pointer;
border-radius: .25em;
font-size: 1em;
Expand Down Expand Up @@ -171,6 +173,14 @@ const menuHTML = `
}
</script>
<div align='center'>
<button id="stats" return false;"
class="btn" style="float: left;"><i class="fa fa-info"></i> Stats</button>
<button id="logs" return false;"
class="btn" style="float: left;"><i class="fa fa-list"></i> Top N</button>

<button id="title" return false;"
class="btn" style="float: center;"><i class="fa fa-home"></i> Hatchet</button>

<button id="search" return false;"
class="btn" style="float: right;"><i class="fa fa-search"></i></button>
<select id='nextChart' style="float: right;" >
Expand All @@ -181,12 +191,7 @@ const menuHTML = `
<option value='/tables/{{.Table}}/charts/connections?type=time'>conns by time</option>
<option value='/tables/{{.Table}}/charts/connections?type=total'>conns by total</option>
</select>
<button id="title" return false;"
class="btn" style="float: center;"><i class="fa fa-home"></i> Hatchet</button>
<button id="stats" return false;"
class="btn" style="float: left;"><i class="fa fa-info"></i> Stats</button>
<button id="logs" return false;"
class="btn" style="float: left;"><i class="fa fa-list"></i> Top N</button>
<button class="btn" style="float: right;"><i class="fa fa-bar-chart"></i></button>
</div>
`

Expand Down
2 changes: 1 addition & 1 deletion version
View file 5054
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
0.1.1
0.1.2
0