DBmon
HTML #
1<div
2 id="demo"
3 data-on-load="@get('/examples/dbmon/updates')"
4 data-signals-_editing__ifmissing="false"
5>
6 <p>
7 Average render time for entire page: { renderTime }
8 </p>
9 <div role="group">
10 <label>
11 Mutation Rate %
12 <input
13 type="number"
14 min="0"
15 max="100"
16 value="20"
17 data-on-focus="$_editing = true"
18 data-on-blur="@put('/examples/dbmon/inputs'); $_editing = false"
19 data-attr-data-bind-mutation-rate="$_editing"
20 data-attr-data-bind-_mutation-rate="!$_editing"
21 />
22 </label>
23 <label>
24 FPS
25 <input
26 type="number"
27 min="1"
28 max="144"
29 value="60"
30 data-on-focus="$_editing = true"
31 data-on-blur="@put('/examples/dbmon/inputs'); $_editing = false"
32 data-attr-data-bind-fps="$_editing"
33 data-attr-data-bind-_fps="!$_editing"
34 />
35 </label>
36 </div>
37 <table style="table-layout: fixed; width: 100%; word-break: break-all">
38 <tbody>
39 <!-- Dynamic rows generated by server -->
40 <tr>
41 <td>cluster1</td>
42 <td style="background-color: var(--_active-color)" class="success">
43 8
44 </td>
45 <td aria-description="SELECT blah from something">
46 12ms
47 </td>
48 <!-- More query cells... -->
49 </tr>
50 <!-- More database rows... -->
51 </tbody>
52 </table>
53</div>
Explanation #
Per a conversation on the discord server there was a desire to port an old React Conf talk, DBMon, to Datastar.
The logic is 1:1 but all done on the backend, and since it’s Go, it’s an interesting comparison to the SPA based approach. We’ve limited purely since the site is run on a free tier server and don’t want to be a bad user. If you run the site from source you can easily 10x the rows without major issues.
Note #
If you open your Network tab in DevTools we are leveraging ZSTD compression so the data rate is relatively low for the contents.