Catalog Chart Browser

Click "Add your first chart" (or the "+ Add chart" button from the dashboard header) to open the Add chart drawer on the right side of the screen.

The drawer has two tabs:

Catalog Tab

The Catalog tab displays a searchable, browsable list of all pre-built charts available across every built-in dashboard in the app. It includes powerful search and filtering features to help you quickly find the charts you need.

Catalog tab — The Catalog tab shows a searchable, browsable list of all pre-built charts available across every built-in dashboard in the app.

info

Charts from the catalog preserve their original configuration and data source. You cannot edit a catalog chart's query. To build a new chart from scratch, see Building Custom Charts.

---

Catalog Search & Filter Features

Search Charts

The search box at the top of the Catalog tab allows you to quickly filter charts by name, description, or source dashboard:

1. Click the search box — Located at the top of the chart list with the placeholder text "Search all charts…"
2. Type your query — Enter keywords to filter results in real-time
3. Results update immediately — The chart list refreshes as you type

What gets searched:

• Chart names — The display name of each chart
• Chart descriptions — The explanation of what the chart shows
• Source dashboard names — Optional filtering by the original dashboard (e.g., typing "RTP" will also match charts from the RTP dashboard)

Example usage:

Searching for "latency" matches:
- "P99 Latency by Region" (chart name)
- "Request processing latency over time" (chart description)
- Any chart from a dashboard containing "latency" in its name

💡 Pro Tip: Use partial matches! Typing "laten" will still match "latency", and "call" will match "call attempts" or "failed calls".

Search behaviors:

• Case-insensitive — "CALL" matches "Call"

• Real-time filtering — Results update as you type, no need to press Enter

• Clear search — Click the "×" icon in the search box (if available) to clear your query and show all charts

• Empty state — When no charts match your search, you'll see:

  No charts match "{your search query}"

Filter by Source Dashboard

Use the left rail in the Catalog to filter charts by their original dashboard. This sidebar lists all source dashboards with their chart counts:

1. Click a dashboard in the left rail to filter by that dashboard
2. "All charts" shows the complete catalog (default view)
3. Results update immediately — The right panel refreshes to show only matching charts

Available source dashboards:

Dashboard	Chart Count	Description
Home	15	Charts from the Home dashboard
Calls	15	Call traffic and quality metrics
Registration	6	SIP registration activity and trends
Overview	7	Key metrics across the VoIP system
Alerts	9	Alert activity, severity, and sources
Security	6	Security events and network anomalies
Diagnostics	1	System health and troubleshooting
Microanalysis	22	Detailed call and session data
Transport	1	Transport protocol usage and events
QoS	2	Call quality metrics and MOS statistics
Realm	12	Call routing and realm-based activity
SBC Live Data	—	Real-time active calls (Beta)
Connectivity CA	16	Call agent statistics
Connectivity	4	Call flows and connection reliability
Conference	10	Conference activity and participation
Network	16	Network activity and interface stats
System	12	SBC health: load, memory, CPU
Syslog	4	Incoming system logs
RTP	7	Media stream quality and network performance
Cause Analysis	—	Root cause investigation
Report	—	Report dashboard charts
Channels	—	Channel metrics
Basic Alerts	—	Basic alert metrics
Advanced Alerts	—	Advanced alert metrics
Monitor	—	Monitoring data
Status	—	System status charts

ℹ️ Note: Chart counts shown in the filter rail reflect the number of pre-built charts available from each dashboard in the catalog. Dashboards without chart counts currently have no pre-built charts, but may have charts added in future updates.

Filter selection states:

• Active filter — The selected dashboard button shows with an active class and bold text
• "All charts" — Always available, shows the complete catalog
• Multiple selections — Only one dashboard can be selected at a time

Results Display

The chart list displays the following information for each result:

Chart list item structure:

┌─────────────────────────────────────────────────────┐
│ Chart Name                              [Add]       │
│ Chart description text (tooltip on hover)           │
│                                                     │
│ [Dashboard Badge]                                   │
└─────────────────────────────────────────────────────┘

Displayed per chart:

• Chart name — Prominent, trunctated if too long
• Chart description — Shown below name, displayed as tooltip for shorter rows
• Dashboard badge — Shows when using the "All charts" view to indicate source
• Add button — Primary button to add to dashboard, outlined when not added
• Added state — Button changes to "Added" with checkmark icon when chart is already in dashboard

Results header:

• Shows count and context: "All charts" or From {Dashboard Name}
• When searching: "Results for {query}"
• Live update with aria-live="polite" for accessibility

Empty State

When no charts match your combined search and filter criteria:

No charts match "{your search query}"

This message appears centered in the chart list area with padding for clear visibility.

When empty state occurs:

• No search query matches any chart name or description
• Dashboard filter returns no charts (rare, should only happen with custom dashboards)
• Combination of search AND filter yields no results

---

Adding Charts from the Catalog

Once you've found the chart(s) you want:

1. Click "Add" — Next to any chart to add it to your custom dashboard

2. Add multiple charts — Keep adding from the catalog without closing the drawer

3. View counter — Bottom of drawer shows:

   {count} of {max} charts added

4. Limit reached warning — When you reach the maximum, counter shows " — limit reached" and add buttons become disabled

5. Remove charts — Click the "Added" button to toggle a chart off your dashboard (removes it)

6. Click "Done" — When finished, click the "Done" button at the bottom right

Maximum charts per dashboard:

{max_charts}

Search & Filter Summary

Feature	Behavior	Description
Search Box	Top of list	Filters by name, description, source
Dashboard Filter	Left rail	One-at-a-time dashboard selection
Live Results	Real-time	Updates as you type/select
"All charts"	Top filter	Shows complete catalog (default)
Empty State	Centered	"No charts match…" message
Added Badge	Right rail	Dashboard badge when not filtered

---

Navigation & Keyboard

Drawer controls:

• Escape key — Closes the drawer if no unsaved changes
• Backdrop click — Closes the drawer if no unsaved changes
• Static backdrop — Required if you have unsaved builder changes (prevents accidental close)

Tab navigation:

• Catalog tab — Browse and add pre-built charts
• Build new tab — Create custom charts from scratch

---

Next Steps

After adding catalog charts to your dashboard:

→ Building Custom Charts — Learn to create charts from scratch using ES Builder or Prometheus Query Builder

---