Added drill down option from the stats page

database.go

@@ -48,6 +48,7 @@ type Database interface {
 	GetHatchetNames() ([]string, error)
 	GetHatchetsWithTime() ([]HatchetEntry, error)
 	GetLogs(opts ...string) ([]LegacyLog, error)
+	GetLogsByPattern(op, ns, filter string, topN int) ([]LegacyLog, error)
 	GetOpsCounts(duration string) ([]NameValue, error)
 	GetReslenByAppName(appname string, duration string) ([]NameValue, error)
 	GetReslenByNamespace(ip string, duration string) ([]NameValue, error)

logs_handler.go

@@ -6,6 +6,7 @@ import (
 	"fmt"
 	"log"
 	"net/http"
+	"net/url"
 	"strings"
 
 	"github.com/julienschmidt/httprouter"
@@ -103,5 +104,42 @@ func LogsHandler(w http.ResponseWriter, r *http.Request, params httprouter.Param
 			return
 		}
 		return
+	} else if attr == "pattern" {
+		op := r.URL.Query().Get("op")
+		ns := r.URL.Query().Get("ns")
+		filter, err := url.QueryUnescape(r.URL.Query().Get("filter"))
+		if err != nil {
+			filter = r.URL.Query().Get("filter")
+		}
+		download := r.URL.Query().Get("download")
+		topN := ToInt(r.URL.Query().Get("topN"))
+		if topN == 0 {
+			topN = TOP_N
+		}
+		logstrs, err := dbase.GetLogsByPattern(op, ns, filter, topN)
+		if err != nil {
+			renderErrorPage(w, r, hatchetName, err.Error())
+			return
+		}
+		templ, err := GetLogTableTemplate(attr, download)
+		if err != nil {
+			renderErrorPage(w, r, hatchetName, err.Error())
+			return
+		}
+		doc := map[string]interface{}{
+			"Hatchet":   hatchetName,
+			"Merge":     info.Merge,
+			"Logs":      logstrs,
+			"Op":        op,
+			"Namespace": ns,
+			"Filter":    filter,
+			"Summary":   summary,
+			"Version":   GetLogv2().version,
+		}
+		if err = templ.Execute(w, doc); err != nil {
+			renderErrorPage(w, r, hatchetName, err.Error())
+			return
+		}
+		return
 	}
 }

logs_template.go

@@ -23,6 +23,8 @@ func GetLogTableTemplate(attr string, download string) (*template.Template, erro
 	}
 	if attr == "slowops" {
 		html += getSlowOpsLogsTable(download)
+	} else if attr == "pattern" {
+		html += getPatternLogsTable(download)
 	} else {
 		html += getLegacyLogsTable()
 	}
@@ -192,6 +194,121 @@ function syntaxHighlight(json) {
 	return template
 }
 
+func getPatternLogsTable(download string) string {
+	tmpl := `
+<script>
+	function downloadPattern() {
+		anchor = document.createElement('a');
+		anchor.download = '{{.Hatchet}}_pattern.html';
+		anchor.href = '/hatchets/{{.Hatchet}}/logs/pattern?op={{.Op}}&ns={{.Namespace}}&filter={{.Filter}}&download=true';
+		anchor.dataset.downloadurl = ['text/html', anchor.download, anchor.href].join(':');
+		anchor.click();
+	}
+</script>`
+	if download == "" {
+		tmpl += `
+<!-- Header Bar -->
+<div style='display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;'>
+	<div>
+		<h2 style='margin: 0 0 4px 0; color: #444; font-size: 1.4em;'>
+			<i class='fa fa-list' style='color: #1565c0;'></i> Pattern Operations
+		</h2>
+		<div style='font-size: 0.85em; color: #666;'>
+			<span style='margin-right: 16px;'><b>op:</b> {{.Op}}</span>
+			<span style='margin-right: 16px;'><b>namespace:</b> {{.Namespace}}</span>
+			<span><b>pattern:</b> <code style='background:#f4f4f4; padding: 1px 4px; border-radius:3px;'>{{.Filter}}</code></span>
+		</div>
+	</div>
+	<div style='display: flex; gap: 8px; align-items: center;'>
+		<a href='/hatchets/{{.Hatchet}}/stats/slowops'
+			style='font-size:0.85em; color:#1565c0; text-decoration:none;'>
+			<i class='fa fa-arrow-left'></i> Back to Slow Query Patterns
+		</a>
+		<button id="download" onClick="downloadPattern(); return false;"
+			class="download-btn"><i class="fa fa-download"></i> Download</button>
+	</div>
+</div>`
+	} else {
+		tmpl += `<div align='center'>{{.Summary}}</div>`
+	}
+	tmpl += `
+<div align='center'>
+	<table width='100%'>
+		<tr>
+			<th>#</th>
+		{{ if .Merge }}
+			<th>M</th>
+		{{ end }}
+			<th>date</th>
+			<th>S</th>
+			<th>component</th>
+			<th>context</th>
+			<th>message</th>
+			<th style='width: 40px;'></th>
+		</tr>
+{{$hatchet := .Hatchet}}
+{{$merge := .Merge}}
+{{range $n, $value := .Logs}}
+		<tr>
+			<td align='right'>{{ add $n 1 }}</td>
+		{{ if $merge }}
+			<td>{{ getMarkerHTML $value.Marker }}</td>
+		{{ end }}
+			<td>{{ formatDateTime $value.Timestamp }}</td>
+			<td>{{ $value.Severity }}</td>
+			<td>{{ $value.Component }}</td>
+			<td><a href='/hatchets/{{$hatchet}}/logs/all?context={{$value.Context}}'>{{ $value.Context }}</a></td>
+			<td class='break'>{{ highlightLog $value.Message }}</td>
+			<td align='center'><button id='btn-pattern-{{$n}}' class='json-toggle-btn' onclick='toggleJsonView("pattern-{{$n}}")' title='View formatted JSON'>{}</button></td>
+		</tr>
+		<tr id='json-pattern-{{$n}}' class='json-row'>
+			<td colspan='{{ if $merge }}8{{ else }}7{{ end }}' style='padding: 0 10px;'>
+				<pre class='json-content' id='json-content-pattern-{{$n}}'>{{ $value.Message }}</pre>
+			</td>
+		</tr>
+{{end}}
+	</table>
+	<div style='clear: left;' align='center'><hr/><p/>{{.Version}}</div>
+</div>
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+	document.querySelectorAll('.json-content').forEach(function(el) {
+		try {
+			var json = JSON.parse(el.textContent);
+			el.innerHTML = syntaxHighlight(JSON.stringify(json, null, 2));
+		} catch(e) {}
+	});
+});
+
+function syntaxHighlight(json) {
+	json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+	return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
+		var cls = 'json-number';
+		if (/^"/.test(match)) {
+			if (/:$/.test(match)) {
+				cls = 'json-key';
+				if (/planSummary|errMsg|durationMillis/i.test(match)) {
+					cls = 'json-key json-highlight';
+				}
+			} else {
+				cls = 'json-string';
+				if (/COLLSCAN/.test(match)) {
+					cls = 'json-error';
+				}
+			}
+		} else if (/true|false/.test(match)) {
+			cls = 'json-boolean';
+		} else if (/null/.test(match)) {
+			cls = 'json-null';
+		}
+		return '<span class="' + cls + '">' + match + '</span>';
+	});
+}
+</script>
+`
+	return tmpl
+}
+
 func getLegacyLogsTable() string {
 	template := `
 <!-- Header Bar -->

mongo_logs.go

@@ -252,3 +252,39 @@ func (ptr *MongoDB) GetSlowestLogs(topN int) ([]LegacyLog, error) {
 	}
 	return docs, err
 }
+
+func (ptr *MongoDB) GetLogsByPattern(op, ns, filter string, topN int) ([]LegacyLog, error) {
+	collection := ptr.db.Collection(ptr.hatchetName)
+	pipeline := []bson.M{
+		{
+			"$match": bson.M{
+				"op":     op,
+				"ns":     ns,
+				"filter": filter,
+			},
+		},
+		{
+			"$sort": bson.M{
+				"milli": -1,
+			},
+		},
+		{
+			"$limit": topN,
+		},
+	}
+	cursor, err := collection.Aggregate(context.Background(), pipeline)
+	if err != nil {
+		return nil, err
+	}
+	defer cursor.Close(context.Background())
+
+	var docs []LegacyLog
+	for cursor.Next(context.Background()) {
+		var doc LegacyLog
+		if err = cursor.Decode(&doc); err != nil {
+			return nil, err
+		}
+		docs = append(docs, doc)
+	}
+	return docs, err
+}

sqlite3_query.go

@@ -228,6 +228,31 @@ func (ptr *SQLite3DB) GetSlowestLogs(topN int) ([]LegacyLog, error) {
 	return docs, err
 }
 
+func (ptr *SQLite3DB) GetLogsByPattern(op, ns, filter string, topN int) ([]LegacyLog, error) {
+	docs := []LegacyLog{}
+	query := fmt.Sprintf(`SELECT date, severity, component, context, message, marker
+			FROM %v WHERE op = ? AND ns = ? AND filter = ?
+			ORDER BY milli DESC LIMIT %v`,
+		ptr.hatchetName, topN)
+	if ptr.verbose {
+		explain(ptr.db, query)
+	}
+	rows, err := ptr.db.Query(query, op, ns, filter)
+	if err != nil {
+		return docs, err
+	}
+	defer rows.Close()
+	for rows.Next() {
+		var doc LegacyLog
+		if err = rows.Scan(&doc.Timestamp, &doc.Severity, &doc.Component, &doc.Context, &doc.Message,
+			&doc.Marker); err != nil {
+			return docs, err
+		}
+		docs = append(docs, doc)
+	}
+	return docs, err
+}
+
 func (ptr *SQLite3DB) GetAverageOpTime(op string, duration string) ([]OpCount, error) {
 	docs := []OpCount{}
 	db := ptr.db

stats_template.go

@@ -8,6 +8,7 @@ package hatchet
 import (
 	"fmt"
 	"html/template"
+	"net/url"
 	"strings"
 
 	"golang.org/x/text/language"
@@ -40,6 +41,9 @@ func GetStatsTableTemplate(collscan bool, orderBy string, download string) (*tem
 		},
 		"getMarkerHTML": func(marker int) template.HTML {
 			return template.HTML(GetMarkerHTML(marker))
+		},
+		"urlEncode": func(s string) string {
+			return url.QueryEscape(s)
 		}}).Parse(html)
 }
 
@@ -184,9 +188,10 @@ func getStatsTable(collscan bool, orderBy string, download string) string {
 	} else {
 		html += "<th valign='middle'>index</th>"
 	}
-	html += `<th>query pattern</th><th style='width: 40px;'></th>
+	html += `<th>query pattern</th><th style='width: 70px;'></th>
 		</tr>
 {{$merge := .Merge}}
+{{$hatchet := .Hatchet}}
 {{range $n, $value := .Ops}}
 		<tr>
 		{{if $merge}}
@@ -212,7 +217,12 @@ func getStatsTable(collscan bool, orderBy string, download string) string {
 			<td>{{ $value.Index }}</td>
 		{{end}}
 			<td class='break'>{{ $value.QueryPattern }}</td>
-			<td align='center'><button id='btn-stats-{{$n}}' class='stats-json-btn' onclick='toggleStatsJson({{$n}})' title='View formatted'>{}</button></td>
+			<td align='center' style='white-space: nowrap;'>
+			<button id='btn-stats-{{$n}}' class='stats-json-btn' onclick='toggleStatsJson({{$n}})' title='View formatted'>{}</button>
+			<a href='/hatchets/{{$hatchet}}/logs/pattern?op={{$value.Op}}&ns={{$value.Namespace}}&filter={{urlEncode $value.QueryPattern}}' title='View matching operations'>
+				<button class='stats-json-btn' onclick='return true;'><i class='fa fa-list'></i></button>
+			</a>
+		</td>
 		</tr>
 		<tr id='json-stats-{{$n}}' class='stats-json-row'>
 			<td colspan='11' style='padding: 5px 10px;'>