Skip to content

Commit 64f4fb9

Browse files
TerrifiedBugTerrifiedBug
authored
feat: custom dashboard views (#36)
* feat: add DashboardView model for custom dashboard views Add Prisma schema model and migration for user-scoped custom dashboard views with panel selection, optional filters, and sort ordering. * feat: add dashboard view CRUD procedures Add listViews, createView, updateView, and deleteView tRPC procedures to the dashboard router for managing user-scoped custom dashboard views. * feat: add dashboard tab bar, view builder, and custom view rendering Add a tab bar at the top of the dashboard for switching between the default view and user-created custom views. Includes a view builder dialog for selecting panels and a custom view component that renders the chosen charts and summary cards in a responsive grid. * docs: add custom dashboard views section to dashboard docs Document the custom view workflow: creating, switching, editing, and deleting views, with a stepper guide and panel reference table. * fix: only reset active view when deleting the currently viewed tab Previously, deleting any custom view would unconditionally switch back to the Default tab. Now only resets if the deleted view was active. * fix: address custom dashboards review findings - Replace count-based sortOrder with aggregate max to avoid TOCTOU race - Add withTeamAccess("VIEWER") to createView, updateView, deleteView - Add withAudit middleware to all three view mutations - Pass environmentId through frontend for team context resolution
1 parent ea0ae98 commit 64f4fb9

7 files changed

Lines changed: 1092 additions & 218 deletions

File tree

‎docs/public/user-guide/dashboard.md‎

Lines changed: 31 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -81,41 +81,45 @@ Dashboard data refreshes automatically based on the selected time range:
8181

8282
Pipeline status cards also poll every 15 seconds regardless of the selected time range, so you will see status changes (Running, Stopped, Crashed) promptly.
8383

84-
## Data Volume Analytics
84+
## Custom dashboard views
8585

86-
The **Analytics** page (accessible from the sidebar) provides a dedicated view of data volume across your pipelines. It is designed to help you understand how much data is flowing through your environment and how effectively your pipelines are reducing it over time.
86+
You can create personalized dashboard views that display only the panels you care about. Custom views are saved per-user and persist across sessions.
8787

88-
### Time range selector
88+
### Creating a view
8989

90-
At the top of the page, choose from **1h**, **6h**, **1d**, **7d**, or **30d**. The selected window determines the data shown in the KPI cards, chart, and per-pipeline table. It also sets the previous comparison period -- for example, selecting **1d** compares the last 24 hours against the 24 hours before that.
90+
{% stepper %}
91+
{% step %}
92+
### Open the view builder
93+
Click the **+ New View** button in the tab bar at the top of the dashboard.
94+
{% endstep %}
95+
{% step %}
96+
### Name your view
97+
Enter a short, descriptive name (up to 50 characters).
98+
{% endstep %}
99+
{% step %}
100+
### Select panels
101+
Check the panels you want to include. Panels are grouped into three categories:
91102

92-
### KPI cards
103+
| Category | Available panels |
104+
|----------|-----------------|
105+
| **Pipeline** | Events In/Out, Bytes In/Out, Error Rate, Data Reduction % |
106+
| **System** | CPU Usage, Memory Usage, Disk I/O, Network I/O |
107+
| **Summary** | Node Health Summary, Pipeline Health Summary |
108+
{% endstep %}
109+
{% step %}
110+
### Save
111+
Click **Create**. Your new view will appear as a tab in the tab bar.
112+
{% endstep %}
113+
{% endstepper %}
93114

94-
Three summary cards appear at the top:
115+
### Switching views
95116

96-
| Card | What it shows |
97-
|------|--------------|
98-
| **Total In** | The total bytes received across all pipelines in the selected period. Includes a trend arrow and percentage change compared to the previous period. |
99-
| **Total Out** | The total bytes sent by all sinks. Also shows trend vs. the previous period. |
100-
| **Reduction %** | The data reduction percentage: `(1 - bytesOut / bytesIn) * 100`. Shows the percentage-point change compared to the previous period. Color-coded green (≥50%), amber (20–50%), or red (<20%). |
101-
102-
### Volume over time chart
103-
104-
An area chart shows **Bytes In** (blue) and **Bytes Out** (green) over the selected time window. The X-axis adapts its label format to the time range -- times for shorter windows, dates for longer ones. Hover over data points to see exact values.
105-
106-
### Per-pipeline breakdown table
107-
108-
Below the chart, a table lists every pipeline that processed data during the selected period:
117+
The tab bar at the top of the dashboard shows all your custom views alongside the **Default** view. Click any tab to switch to that view. Each custom view has its own time range picker and filter bar for any chart panels it includes.
109118

110-
| Column | Description |
111-
|--------|------------|
112-
| **Pipeline Name** | The name of the pipeline. |
113-
| **Bytes In** | Total bytes received by that pipeline's sources. |
114-
| **Bytes Out** | Total bytes sent by that pipeline's sinks. |
115-
| **Reduction %** | Per-pipeline reduction percentage, shown with a colored bar. Higher reduction values display a longer, greener bar; lower values show shorter, red-tinted bars. |
119+
### Editing and deleting views
116120

117-
Click any column header to sort the table by that column. Click again to toggle between ascending and descending order.
121+
Hover over a custom view tab to reveal the edit and delete icons. Click the pencil icon to update the view name or panel selection, or click the trash icon to remove the view.
118122

119123
{% hint style="info" %}
120-
The Analytics page auto-refreshes at the same intervals as the dashboard: every 15 seconds for 1h, 60 seconds for 6h, and 120 seconds for longer ranges.
124+
Custom views are scoped to your user account. Other team members will not see your custom views, and you will not see theirs.
121125
{% endhint %}

‎prisma/migrations/20260307100000_add_dashboard_views/migration.sql‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
-- CreateTable
2+
CREATE TABLE "DashboardView" (
3+
"id" TEXT NOT NULL,
4+
"userId" TEXT NOT NULL,
5+
"name" TEXT NOT NULL,
6+
"panels" JSONB NOT NULL,
7+
"filters" JSONB,
8+
"sortOrder" INTEGER NOT NULL DEFAULT 0,
9+
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
10+
"updatedAt" TIMESTAMP(3) NOT NULL,
11+
12+
CONSTRAINT "DashboardView_pkey" PRIMARY KEY ("id")
13+
);
14+
15+
-- CreateIndex
16+
CREATE INDEX "DashboardView_userId_idx" ON "DashboardView"("userId");
17+
18+
-- AddForeignKey
19+
ALTER TABLE "DashboardView" ADD CONSTRAINT "DashboardView_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;

‎prisma/schema.prisma‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ model User {
2727
pipelinesUpdated Pipeline[] @relation("PipelineUpdatedBy")
2828
pipelinesCreated Pipeline[] @relation("PipelineCreatedBy")
2929
vrlSnippets VrlSnippet[]
30+
dashboardViews DashboardView[]
3031
createdAt DateTime @default(now())
3132
}
3233

@@ -561,3 +562,17 @@ model AlertEvent {
561562
@@index([nodeId])
562563
@@index([firedAt])
563564
}
565+
566+
model DashboardView {
567+
id String @id @default(cuid())
568+
userId String
569+
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
570+
name String
571+
panels Json // string[] of panel names
572+
filters Json? // { pipelineIds?: string[], nodeIds?: string[] }
573+
sortOrder Int @default(0)
574+
createdAt DateTime @default(now())
575+
updatedAt DateTime @updatedAt
576+
577+
@@index([userId])
578+
}

0 commit comments

Comments
 (0)