Add quick-fetch convenience buttons to Historical Thing Updates

Adds "Last 10" / "Last 100" buttons when in By Revision mode and
"Last 1h" / "Last 24h" buttons when in By Timestamp mode. Each button
sets the from/to range and immediately triggers a fetch.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: thjaeckle

ui/modules/things/thingUpdates.html

@@ -46,6 +46,18 @@ <h5 data-bs-toggle="collapse" data-bs-target="#collapseThingUpdates">
                         <input type="radio" class="btn-check" name="historicalRangeMode" id="historicalRangeModeTimestamp">
                         <label class="btn btn-outline-secondary btn-sm" for="historicalRangeModeTimestamp">By Timestamp</label>
                     </div>
+                    <span class="ms-2" id="quickFetchRevisionButtons">
+                        <button class="btn btn-outline-primary btn-sm" id="buttonLastNRevisions10"
+                            data-bs-toggle="tooltip" title="Fetch the last 10 revisions">Last 10</button>
+                        <button class="btn btn-outline-primary btn-sm" id="buttonLastNRevisions100"
+                            data-bs-toggle="tooltip" title="Fetch the last 100 revisions">Last 100</button>
+                    </span>
+                    <span class="ms-2" id="quickFetchTimestampButtons" hidden>
+                        <button class="btn btn-outline-primary btn-sm" id="buttonLastTime1h"
+                            data-bs-toggle="tooltip" title="Fetch events from the last hour">Last 1h</button>
+                        <button class="btn btn-outline-primary btn-sm" id="buttonLastTime24h"
+                            data-bs-toggle="tooltip" title="Fetch events from the last 24 hours">Last 24h</button>
+                    </span>
                 </div>
                 <div id="historicalRevisionRange">
                     <div class="input-group input-group-sm mb-1">

ui/modules/things/thingUpdates.ts

@@ -53,6 +53,12 @@ type DomElements = {
   historicalToTimestamp: HTMLInputElement,
   buttonFromOldestTimestamp: HTMLButtonElement,
   buttonToMostRecentTimestamp: HTMLButtonElement,
+  quickFetchRevisionButtons: HTMLSpanElement,
+  buttonLastNRevisions10: HTMLButtonElement,
+  buttonLastNRevisions100: HTMLButtonElement,
+  quickFetchTimestampButtons: HTMLSpanElement,
+  buttonLastTime1h: HTMLButtonElement,
+  buttonLastTime24h: HTMLButtonElement,
   inputHistoricalRqlFilter: HTMLInputElement,
   buttonFetchHistorical: HTMLButtonElement,
   buttonStopHistorical: HTMLButtonElement,
@@ -82,6 +88,12 @@ let dom: DomElements = {
   historicalToTimestamp: null,
   buttonFromOldestTimestamp: null,
   buttonToMostRecentTimestamp: null,
+  quickFetchRevisionButtons: null,
+  buttonLastNRevisions10: null,
+  buttonLastNRevisions100: null,
+  quickFetchTimestampButtons: null,
+  buttonLastTime1h: null,
+  buttonLastTime24h: null,
   inputHistoricalRqlFilter: null,
   buttonFetchHistorical: null,
   buttonStopHistorical: null,
@@ -153,6 +165,11 @@ export function ready() {
     dom.historicalToRevision.value = String(probedMaxRevision);
     dom.historicalToRevisionSlider.value = String(probedMaxRevision);
   };
+  dom.buttonLastNRevisions10.onclick = () => quickFetchLastRevisions(10);
+  dom.buttonLastNRevisions100.onclick = () => quickFetchLastRevisions(100);
+  dom.buttonLastTime1h.onclick = () => quickFetchLastTime(1);
+  dom.buttonLastTime24h.onclick = () => quickFetchLastTime(24);
+
   dom.buttonFromOldestTimestamp.onclick = () => {
     if (probedOldestTimestamp) {
       dom.historicalFromTimestamp.value = probedOldestTimestamp;
@@ -432,6 +449,26 @@ function onRangeModeChange() {
   const byRevision = dom.historicalRangeModeRevision.checked;
   dom.historicalRevisionRange.hidden = !byRevision;
   dom.historicalTimestampRange.hidden = byRevision;
+  dom.quickFetchRevisionButtons.hidden = !byRevision;
+  dom.quickFetchTimestampButtons.hidden = byRevision;
+}
+
+function quickFetchLastRevisions(count: number) {
+  const from = Math.max(probedMinRevision, probedMaxRevision - count + 1);
+  const to = probedMaxRevision;
+  dom.historicalFromRevision.value = String(from);
+  dom.historicalFromRevisionSlider.value = String(from);
+  dom.historicalToRevision.value = String(to);
+  dom.historicalToRevisionSlider.value = String(to);
+  onFetchHistorical();
+}
+
+function quickFetchLastTime(hours: number) {
+  const now = new Date();
+  const from = new Date(now.getTime() - hours * 60 * 60 * 1000);
+  dom.historicalFromTimestamp.value = Utils.toDatetimeLocalValue(from.toISOString());
+  dom.historicalToTimestamp.value = Utils.toDatetimeLocalValue(now.toISOString());
+  onFetchHistorical();
 }
 
 function onFetchHistorical() {