docs: add Beszel, SQLite backup, and Custom widgets documentation (#5930)

2026-06-12 13:56:53 +02:00
1 parent d16571d4c4
commit 7567842c4c
@@ -0,0 +1,39 @@
+---
+title: 'Beszel Alerts'
+description: 'View Beszel alert configurations and history with triggered/ok status indicators.'
+hide_title: true
+---
+
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { beszelAlertsWidget } from '.';
+import { beszelIntegration } from '@site/docs/integrations/beszel';
+
+import beszelAlerts from './img/beszel-alerts.png';
+
+<WidgetHeader
+  widget={beszelAlertsWidget}
+  categories={['System Monitoring', 'Alerts']}
+/>
+
+This widget displays your Beszel alert configurations separated by status (triggered and ok). It also shows alert history with timestamps. Alerts are updated in real time via WebSocket subscriptions.
+
+### Screenshots
+
+<img src={beszelAlerts} alt="Beszel Alerts widget showing triggered and ok alerts with history" />
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: beszelIntegration,
+  note: "Displays alert configurations and trigger history"
+}]} />
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+<WidgetConfig configuration={beszelAlertsWidget.configuration} />
@@ -0,0 +1,25 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconBell } from "@tabler/icons-react";
+
+export const beszelAlertsWidget: WidgetDefinition = {
+  icon: IconBell,
+  name: "Beszel Alerts",
+  description: "View Beszel alert configurations and history with triggered/ok status indicators.",
+  path: "../../widgets/beszel-alerts",
+  configuration: {
+    items: [
+      {
+        name: "Show history",
+        description: "Displays the alert trigger history",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Max history items",
+        description: "Maximum number of history entries to display (1-100)",
+        values: "Number (1-100)",
+        defaultValue: "10",
+      },
+    ],
+  },
+};
@@ -0,0 +1,39 @@
+---
+title: 'Beszel Systems (Grid)'
+description: 'Card grid view of all Beszel-monitored systems with real-time metrics.'
+hide_title: true
+---
+
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { beszelSystemGridWidget } from '.';
+import { beszelIntegration } from '@site/docs/integrations/beszel';
+
+import beszelSystemGrid from './img/beszel-system-grid.png';
+
+<WidgetHeader
+  widget={beszelSystemGridWidget}
+  categories={['System Monitoring']}
+/>
+
+This widget displays all your Beszel-monitored systems as a responsive card grid. Each card shows real-time metrics like CPU, memory, disk, network, temperature, and more. Cards adapt their layout based on available space.
+
+### Screenshots
+
+<img src={beszelSystemGrid} alt="Beszel System Grid widget showing system cards with metrics" />
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: beszelIntegration,
+  note: "Displays all monitored systems as a card grid"
+}]} />
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+<WidgetConfig configuration={beszelSystemGridWidget.configuration} />
@@ -0,0 +1,88 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconLayoutGrid } from "@tabler/icons-react";
+
+export const beszelSystemGridWidget: WidgetDefinition = {
+  icon: IconLayoutGrid,
+  name: "Beszel Systems (Grid)",
+  description: "Card grid view of all Beszel-monitored systems with real-time metrics.",
+  path: "../../widgets/beszel-system-grid",
+  configuration: {
+    items: [
+      {
+        name: "Status filter",
+        description: "Filter systems by their current status",
+        values: {
+          type: "select",
+          options: ["All Systems", "Up", "Down", "Paused"],
+        },
+        defaultValue: "All Systems",
+      },
+      {
+        name: "Show CPU",
+        description: "Displays CPU usage on each system card",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show memory",
+        description: "Displays memory usage on each system card",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show disk",
+        description: "Displays disk usage on each system card",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show GPU",
+        description: "Displays GPU usage on each system card",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show load average",
+        description: "Displays system load average",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show network",
+        description: "Displays network throughput",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show temperature",
+        description: "Displays system temperature",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show battery",
+        description: "Displays battery level (if available)",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show services",
+        description: "Displays running Docker services count",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show uptime",
+        description: "Displays system uptime",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show agent version",
+        description: "Displays the Beszel agent version",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+    ],
+  },
+};
@@ -0,0 +1,39 @@
+---
+title: 'Beszel System Stats'
+description: 'Time-series charts for CPU, memory, disk, network, and Docker container metrics from Beszel.'
+hide_title: true
+---
+
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { beszelSystemStatsWidget } from '.';
+import { beszelIntegration } from '@site/docs/integrations/beszel';
+
+import beszelSystemStats from './img/beszel-system-stats.png';
+
+<WidgetHeader
+  widget={beszelSystemStatsWidget}
+  categories={['System Monitoring', 'Charts']}
+/>
+
+This widget displays time-series charts for a selected Beszel system, including CPU, memory, disk, network, and Docker container metrics. Data is cached and refreshed periodically. You can select a time period ranging from 1 hour to 30 days.
+
+### Screenshots
+
+<img src={beszelSystemStats} alt="Beszel System Stats widget showing CPU, memory, disk and network charts" />
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: beszelIntegration,
+  note: "Displays time-series charts for a selected system"
+}]} />
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+<WidgetConfig configuration={beszelSystemStatsWidget.configuration} />
@@ -0,0 +1,70 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconChartAreaLine } from "@tabler/icons-react";
+
+export const beszelSystemStatsWidget: WidgetDefinition = {
+  icon: IconChartAreaLine,
+  name: "Beszel System Stats",
+  description: "Time-series charts for CPU, memory, disk, network, and Docker container metrics from Beszel.",
+  path: "../../widgets/beszel-system-stats",
+  configuration: {
+    items: [
+      {
+        name: "Time period",
+        description: "The time range for chart data",
+        values: {
+          type: "select",
+          options: ["1 Hour", "12 Hours", "24 Hours", "1 Week", "30 Days"],
+        },
+        defaultValue: "1 Hour",
+      },
+      {
+        name: "Show CPU",
+        description: "Displays the CPU usage chart",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show memory",
+        description: "Displays the memory usage chart",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show disk",
+        description: "Displays the disk usage chart",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show disk I/O",
+        description: "Displays the disk I/O chart",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show network",
+        description: "Displays the network chart",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show Docker CPU",
+        description: "Displays Docker container CPU usage chart",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show Docker memory",
+        description: "Displays Docker container memory usage chart",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show Docker network",
+        description: "Displays Docker container network chart",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+    ],
+  },
+};
@@ -0,0 +1,34 @@
+---
+title: 'Beszel Systems (Table)'
+description: 'Table view of all Beszel-monitored systems with sortable columns and status indicators.'
+hide_title: true
+---
+
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { beszelSystemTableWidget } from '.';
+import { beszelIntegration } from '@site/docs/integrations/beszel';
+
+
+<WidgetHeader
+  widget={beszelSystemTableWidget}
+  categories={['System Monitoring']}
+/>
+
+This widget displays all your Beszel-monitored systems in a sortable data table. Each row shows system metrics like CPU, memory, disk, network, temperature, and more. Columns can be toggled on or off, and the table supports sorting by any column.
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: beszelIntegration,
+  note: "Displays all monitored systems in a sortable table"
+}]} />
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+<WidgetConfig configuration={beszelSystemTableWidget.configuration} />
@@ -0,0 +1,106 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconTable } from "@tabler/icons-react";
+
+export const beszelSystemTableWidget: WidgetDefinition = {
+  icon: IconTable,
+  name: "Beszel Systems (Table)",
+  description: "Table view of all Beszel-monitored systems with sortable columns and status indicators.",
+  path: "../../widgets/beszel-system-table",
+  configuration: {
+    items: [
+      {
+        name: "Status filter",
+        description: "Filter systems by their current status",
+        values: {
+          type: "select",
+          options: ["All Systems", "Up", "Down", "Paused"],
+        },
+        defaultValue: "All Systems",
+      },
+      {
+        name: "Sort by",
+        description: "Default column to sort the table by",
+        values: {
+          type: "select",
+          options: ["System", "CPU", "Memory", "Disk", "GPU", "Load Avg", "Net", "Temp", "Services", "Uptime", "Agent"],
+        },
+        defaultValue: "System",
+      },
+      {
+        name: "Sort direction",
+        description: "Default sort direction",
+        values: {
+          type: "select",
+          options: ["Ascending", "Descending"],
+        },
+        defaultValue: "Ascending",
+      },
+      {
+        name: "Show CPU",
+        description: "Displays the CPU column",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show memory",
+        description: "Displays the memory column",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show disk",
+        description: "Displays the disk column",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show GPU",
+        description: "Displays the GPU column",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show load average",
+        description: "Displays the load average column",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show network",
+        description: "Displays the network column",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show temperature",
+        description: "Displays the temperature column",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show battery",
+        description: "Displays the battery column",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show services",
+        description: "Displays the services column",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show uptime",
+        description: "Displays the uptime column",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show agent version",
+        description: "Displays the agent version column",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+    ],
+  },
+};
@@ -0,0 +1,29 @@
+---
+title: 'Custom API'
+description: 'Displays data from a custom API endpoint using configurable display types and optional JSX templates.'
+hide_title: true
+---
+
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { customApiWidget } from '.';
+
+
+<WidgetHeader
+  widget={customApiWidget}
+  categories={['Custom', 'API']}
+/>
+
+This widget fetches data from a custom API endpoint defined in [Custom Widgets management](/docs/management/custom-widgets) and renders it using configurable display types.
+
+Custom API widgets are created and configured through the admin management page. Each widget definition specifies the API endpoint, authentication, display type, and refresh interval.
+
+See the [Custom Widgets documentation](/docs/management/custom-widgets) for full details on creating and configuring custom widgets.
+
+### Adding the widget
+
+<AddingWidget />
+
+:::note
+Custom API widgets must first be created in **Management → Custom Widgets** before they appear in the widget picker.
+:::
@@ -0,0 +1,9 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconApi } from "@tabler/icons-react";
+
+export const customApiWidget: WidgetDefinition = {
+  icon: IconApi,
+  name: "Custom API",
+  description: "Displays data from a custom API endpoint using configurable display types and optional JSX templates.",
+  path: "../../widgets/custom-api",
+};