79 lines
1.7 KiB
Plaintext
79 lines
1.7 KiB
Plaintext
package site
|
|
|
|
import (
|
|
"fmt"
|
|
datastar "github.com/starfederation/datastar/sdk/go"
|
|
"time"
|
|
)
|
|
|
|
templ pageDBmon(dbs []*DbmonDatabase, mutationRate float64, renderTime time.Duration) {
|
|
<div
|
|
id="contents"
|
|
class="flex flex-col gap-4 p-4 w-full overflow-scroll"
|
|
data-signals={ fmt.Sprintf("{mutationRate: %d}", int(100*mutationRate)) }
|
|
data-on-load={ datastar.GetSSE("/examples/dbmon/updates") }
|
|
>
|
|
@dbmonFPS(renderTime)
|
|
<div style="display: flex;">
|
|
<label>mutations: <span data-text="$mutationRate"></span>%</label>
|
|
<input
|
|
class="range"
|
|
type="range"
|
|
min="1"
|
|
max="100"
|
|
data-bind="mutationRate"
|
|
data-on-click={ datastar.PostSSE("/examples/dbmon/inputs") }
|
|
/>
|
|
</div>
|
|
<div id="dbmon">
|
|
@dbmonApp(dbs)
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
templ dbmonFPS(fps time.Duration) {
|
|
<div id="fps">
|
|
Average render time for entire page: { fmt.Sprint( fps) }
|
|
</div>
|
|
}
|
|
|
|
templ dbmonPopover(query string) {
|
|
<div class="popover">
|
|
<div class="popover-content">{ query }</div>
|
|
<div class="arrow"></div>
|
|
</div>
|
|
}
|
|
|
|
templ dbmonQuery(query string, elapsed time.Duration) {
|
|
<td class="text-xs font-mono">
|
|
<div class="tooltip" data-tip={ query }>
|
|
{ elapsed.String() }
|
|
</div>
|
|
</td>
|
|
}
|
|
|
|
templ dbmonDatabase(db *DbmonDatabase) {
|
|
{{ t5q := db.top5Queries() }}
|
|
<tr>
|
|
<td class="dbname">{ db.name }</td>
|
|
<td class={ dbmonCounterClasses(len(db.queries)) }>
|
|
<span class={ dbmonCounterClasses(len(db.queries)) }>
|
|
{ fmt.Sprintf("%d", len(db.queries)) }
|
|
</span>
|
|
</td>
|
|
for _, q := range t5q {
|
|
@dbmonQuery(q.query, q.elapsed)
|
|
}
|
|
</tr>
|
|
}
|
|
|
|
templ dbmonApp(dbs []*DbmonDatabase) {
|
|
<table id="app" className="table table-xs w-full">
|
|
<tbody>
|
|
for _, db := range dbs {
|
|
@dbmonDatabase(db)
|
|
}
|
|
</tbody>
|
|
</table>
|
|
}
|