feat: expand advanced widget experiences

This commit is contained in:
Thomas Camlong authored and ajnart committed 2026-08-14 12:11:33 +02:00
1 parent 339a0d8e2b
commit 8775597d5a
12 files changed
+26 -10

No files matched your search

@@ -34,7 +34,9 @@ This widget displays your Beszel alert configurations separated by status (trigg
]}
/>
<WidgetInteractionGuide advancedView={false} />
In advanced view, the widget always shows triggered and OK alerts, their descriptions, integration source names, and the complete fetched history. Advanced view requests history even when compact history is disabled and raises the bounded per-integration history request to at least 50 entries, without exceeding 100.
<WidgetInteractionGuide />
### Adding the widget
@@ -4,8 +4,6 @@ description: "Card grid view of all Beszel-monitored systems with real-time metr
hide_title: true
---
import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
import { WidgetHeader } from "@site/src/components/widgets/header";
import { AddingWidget } from "@site/src/components/widgets/adding";
import { WidgetConfig } from "@site/src/components/widgets/configuration";
@@ -37,7 +35,9 @@ Select a system card to open the complete statistics view, including system, fil
]}
/>
<WidgetInteractionGuide advancedView={false} />
In advanced view, every applicable metric is shown even when its compact visibility option is disabled. Each card also shows its integration source, hostname, operating system, CPU model, core count, and total memory. Cards remain selectable to open the complete statistics view.
<WidgetInteractionGuide />
### Adding the widget
@@ -4,8 +4,6 @@ description: "Table view of all Beszel-monitored systems with sortable columns a
hide_title: true
---
import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
import { WidgetHeader } from "@site/src/components/widgets/header";
import { AddingWidget } from "@site/src/components/widgets/adding";
import { WidgetConfig } from "@site/src/components/widgets/configuration";
@@ -38,7 +36,9 @@ Select a system row to open the complete statistics view.
]}
/>
<WidgetInteractionGuide advancedView={false} />
In advanced view, the table removes its compact width budget and shows every Beszel metric even when its compact visibility option is disabled. It also adds the integration source, hostname, operating system, CPU model, core count, and total memory columns. Sorting, saved column order and widths, and row selection continue to work the same way.
<WidgetInteractionGuide />
### Adding the widget
+2
View File
@@ -15,6 +15,8 @@ import { clockWidget } from ".";
The clock widget displays the current date and time in a customizable format.
Advanced view always exposes seconds, the full date, timezone and UTC offset. When weather is enabled, it also shows the configured location, conditions, today's high/low and humidity, wind, sunrise, and sunset from the same cached forecast.
### Screenshots
import localClock from "./img/local.png";
@@ -39,7 +39,9 @@ import { prowlarrIntegration } from "@site/docs/integrations/prowlarr";
- Test all indexers by clicking on the test button.
<WidgetInteractionGuide advancedView={false} />
In advanced view, every indexer is grouped under its integration source and receives an explicit Healthy, Unhealthy, or Disabled status. Safe indexer links and the permission-checked test action behave exactly as they do on the board.
<WidgetInteractionGuide />
### Adding the widget
+5 -1
View File
@@ -26,7 +26,7 @@ import editOn from "./img/edit.png";
<img src={editOn} alt="notebook edit-on" width={128 * 3} />
</div>
<WidgetInteractionGuide advancedView={false} />
<WidgetInteractionGuide />
### Adding the widget
@@ -46,6 +46,10 @@ You can then decide to save your changes or cancel them to exit editing, using t
![](./img/notebook-exit-editing.webp)
### Advanced view
Advanced view keeps the notebook read-only until an authorized user enters editing. While editing, it always shows the complete, unclipped toolbar even when **Show the toolbar** is disabled, and it always displays the document word and character counts regardless of the widget height. Permissions, saving and cancellation, and the **Allow check in read only mode** setting work exactly as they do in the compact widget.
### Notebook toolbar functions
The notebook offers a variety of functions to edit the text and more.
+2 -1
View File
@@ -10,7 +10,8 @@ export const notebookWidget: WidgetDefinition = {
items: [
{
name: "Show the toolbar to help you write markdown",
description: "Upon editing, enables a toolbar at the top with document editing functions.",
description:
"Upon editing in compact mode, enables a toolbar at the top with document editing functions. Advanced view always shows the complete toolbar while editing.",
values: { type: "boolean" },
defaultValue: "yes",
},
@@ -6,6 +6,7 @@ import { optionsBuilder } from "../options";
export const { definition, componentLoader } = createWidgetDefinition("beszelAlerts", {
icon: IconBell,
supportsAdvancedFocus: true,
queryKey: [["widget", "beszel", "getAlerts"]],
queryMatcher(query, scope) {
const hasRuntimeAlertsQuery = scope.runtimeQueries.some(({ path }) => path.at(-1) === "getAlerts");
@@ -6,6 +6,7 @@ import { optionsBuilder } from "../options";
export const { definition, componentLoader } = createWidgetDefinition("beszelSystemGrid", {
icon: IconLayoutGrid,
supportsAdvancedFocus: true,
queryKey: [["widget", "beszel", "getSystems"]],
supportedIntegrations: ["beszel", "mock"],
integrationsRequired: true,
@@ -25,6 +25,7 @@ const sortDirectionOptions = [
export const { definition, componentLoader } = createWidgetDefinition("beszelSystemTable", {
icon: IconTable,
supportsAdvancedFocus: true,
queryKeys: [[["widget", "beszel", "getSystems"]], [["widget", "beszel", "getSystemStats"]]],
queryMatcher: (query, scope) =>
query.path.at(-1) === "getSystems"
@@ -13,6 +13,7 @@ const createOptions = () =>
}));
export const { definition, componentLoader } = createWidgetDefinition("indexerManager", {
supportsAdvancedFocus: true,
icon: IconReportSearch,
contextActions: ({ widgetRuntimeRef, context }) => [
{
+1
View File
@@ -5,6 +5,7 @@ import { optionsBuilder } from "../options";
import { defaultContent } from "./default-content";
export const { definition, componentLoader } = createWidgetDefinition("notebook", {
supportsAdvancedFocus: true,
icon: IconNotes,
createOptions() {
return optionsBuilder.from(