DBmon

Demo

Average render time for entire page: 0s

cluster1130s0s1ms1ms4ms
cluster1slave140s1ms3ms3ms4ms
cluster2121ms2ms3ms3ms6ms
cluster2slave141ms1ms3ms4ms4ms
cluster3141ms1ms2ms2ms2ms
cluster3slave80s1ms2ms2ms4ms
cluster4130s1ms1ms3ms4ms
cluster4slave121ms1ms2ms7ms8ms
cluster5101ms1ms2ms5ms6ms
cluster5slave130s0s0s0s1ms
cluster6130s0s0s2ms5ms
cluster6slave131ms1ms2ms3ms4ms

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.