| 1 | # Dashboards Tab |
| 2 | |
| 3 | With **Netdata Cloud**, you can build **custom dashboards** that target your infrastructure's unique needs. Dashboards help you centralize key metrics from any number of distributed systems, offering a clear, interactive overview of your infrastructure. |
| 4 | |
| 5 | Click the **Dashboards** tab in any Room to get started. |
| 6 | |
| 7 | ## Create Your First Dashboard |
| 8 | |
| 9 | To create a new dashboard: |
| 10 | |
| 11 | 1. From the **Dashboards** tab, click the **+** button. |
| 12 | 2. In the modal, enter a name for your dashboard and click **+ Add**. |
| 13 | |
| 14 | You can now add elements to your dashboard: |
| 15 | |
| 16 | ### Add a Chart |
| 17 | |
| 18 | Click the **Add Chart** button at the top right of the dashboard. |
| 19 | |
| 20 | | Step | Action | |
| 21 | |--------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |
| 22 | | **Select Source** | Choose **All Nodes** or a specific node. | |
| 23 | | **Choose Context** | Select the metric context. A preview of the chart will appear. | |
| 24 | | **Configure Chart** | Adjust settings using the [NIDL framework](/docs/dashboards-and-charts/netdata-charts.md#nidl-framework): <br/>- Group by method <br/>- Aggregation function over the data source <br/>- Nodes <br/>- Instances <br/>- Dimensions <br/>- Labels <br/>- Aggregation function over time | |
| 25 | | **Chart Type** | Change the chart type using the [Title bar](/docs/dashboards-and-charts/netdata-charts.md#title-bar). | |
| 26 | | **Dimension Visibility** | Select which dimensions to display and set their order via the [Dimensions bar](/docs/dashboards-and-charts/netdata-charts.md#dimensions-bar). | |
| 27 | |
| 28 | ### Add Text Cards |
| 29 | |
| 30 | Click the **Add Text** button at the top right to add a text card. |
| 31 | |
| 32 | Use text cards to: |
| 33 | |
| 34 | - Document the purpose of the dashboard. |
| 35 | - Add notes for your team members. |
| 36 | |
| 37 | :::tip |
| 38 | |
| 39 | Click the **T** icon in the text box to switch between font sizes. |
| 40 | |
| 41 | ::: |
| 42 | |
| 43 | :::important |
| 44 | |
| 45 | Always click the **Save** button after making changes to your dashboard. |
| 46 | |
| 47 | ::: |
| 48 | |
| 49 | ## Dashboard Layout Overview |
| 50 | |
| 51 | ```mermaid |
| 52 | flowchart TD |
| 53 | A("Dashboard Grid") |
| 54 | A --> B("Chart Element") |
| 55 | A --> C("Text Card") |
| 56 | B --> D("Move / Resize") |
| 57 | C --> D |
| 58 | D --> E("Save Changes") |
| 59 | B --> F("Delete Option") |
| 60 | C --> F |
| 61 | |
| 62 | %% Style definitions |
| 63 | classDef alert fill:#ffeb3b,stroke:#000000,stroke-width:3px,color:#000000,font-size:14px |
| 64 | classDef neutral fill:#f9f9f9,stroke:#000000,stroke-width:3px,color:#000000,font-size:14px |
| 65 | classDef complete fill:#4caf50,stroke:#000000,stroke-width:3px,color:#000000,font-size:14px |
| 66 | classDef database fill:#2196F3,stroke:#000000,stroke-width:3px,color:#000000,font-size:14px |
| 67 | |
| 68 | %% Apply styles |
| 69 | class A alert |
| 70 | class B,C neutral |
| 71 | class D,F complete |
| 72 | class E database |
| 73 | ``` |
| 74 | |
| 75 | :::tip |
| 76 | |
| 77 | The diagram above shows how charts and text cards interact within the dashboard layout. Use **drag & drop to move elements and resize** them as needed. Save your layout to keep changes. Remove elements using the delete option. |
| 78 | |
| 79 | ::: |
| 80 | |
| 81 | :::tip |
| 82 | |
| 83 | Keep related charts close together to improve visual correlation between metrics. |
| 84 | |
| 85 | ::: |
| 86 | |
| 87 | ## Using Your Dashboard |
| 88 | |
| 89 | Dashboards are interactive and flexible. You can design them to fit your needs using any combination of charts and text cards. |
| 90 | |
| 91 | ### Chart Interaction |
| 92 | |
| 93 | Charts on custom dashboards are [fully interactive](/docs/dashboards-and-charts/netdata-charts.md): |
| 94 | |
| 95 | - Zoom, pan, and highlight timeframes. |
| 96 | - Synchronize charts across contexts and nodes. |
| 97 | |
| 98 | ### Text Cards |
| 99 | |
| 100 | Text cards allow you to explain the arrangement or intent behind the dashboard. Share insights with your team directly on the dashboard. |
| 101 | |
| 102 | ## Organizing Dashboard Elements |
| 103 | |
| 104 | ### Move Elements |
| 105 | |
| 106 | | Action | How to Do It | |
| 107 | |--------------------------|-------------------------------------------------------------------------------------------------| |
| 108 | | **Move a chart or card** | Click and hold **Drag & drop** at the top right of the element, then move it to a new location. | |
| 109 | | **Resize an element** | Click and drag from the bottom-right corner of the element. | |
| 110 | |
| 111 | :::tip |
| 112 | |
| 113 | Elements automatically align to the grid system after moving or resizing. |
| 114 | |
| 115 | ::: |
| 116 | |
| 117 | ## Chart Management Actions |
| 118 | |
| 119 | | Action | How to Perform | |
| 120 | |----------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |
| 121 | | **Go to chart** | Use the 3-dot icon on any chart → click **Go-to-Chart**. Navigate directly to the chart in the [Metrics tab](/docs/dashboards-and-charts/metrics-tab-and-single-node-tabs.md) or the single-node dashboard. | |
| 122 | | **Rename a chart** | Use the 3-dot icon on any chart → click **Rename**. | |
| 123 | | **Remove a chart or card** | Use the 3-dot icon on the element → click **Remove**. | |
| 124 | |
| 125 | ## Managing Your Dashboard |
| 126 | |
| 127 | | Action | How to Perform | |
| 128 | |------------------------|-----------------------------------------------------------------| |
| 129 | | **View dashboards** | Click the **Dashboards** tab in any Room. | |
| 130 | | **Delete a dashboard** | Select the dashboard → click the 🗑️ icon or **Delete** button. | |
| 131 | | **Save changes** | Click the **Save** button after making any edits. | |
| 132 | |
| 133 | :::note |
| 134 | |
| 135 | If multiple users edit the same dashboard at once, the second user who clicks **Save** will be prompted to either overwrite or reload the dashboard to see the latest changes. |
| 136 | |
| 137 | ::: |
| 138 | |
| 139 | ## TV Mode |
| 140 | |
| 141 | **TV Mode** generates shareable, token-authenticated URLs for displaying dashboards on large screens without requiring a login. This is ideal for displaying critical metrics on TVs, wallboards, or shared monitors in operations centers and team spaces. |
| 142 | |
| 143 | ### How to Use TV Mode |
| 144 | |
| 145 | 1. Open the dashboard you want to display. |
| 146 | 2. Click the **TV Mode** button in the dashboard action bar (located next to the **Save** button). |
| 147 | 3. A modal will appear with a generated URL that includes an embedded access token and preserves your current time range settings. |
| 148 | 4. Copy the URL and open it in a browser on your display device. |
| 149 | |
| 150 | ### How It Works |
| 151 | |
| 152 | When you generate a TV Mode URL: |
| 153 | |
| 154 | - **Automatic Token Creation**: Netdata Cloud automatically creates an API token with full scope (`scope:all`) for authentication. |
| 155 | - **Embedded Authentication**: The generated URL includes the access token, allowing the dashboard to load without requiring a login. |
| 156 | - **Time Range Preservation**: The URL captures your current time range settings, so viewers see the same data timeframe you selected. |
| 157 | - **Optimized Display**: The dashboard renders in a TV-optimized display mode for large screens. |
| 158 | |
| 159 | ### Use Cases |
| 160 | |
| 161 | TV Mode is perfect for: |
| 162 | |
| 163 | - **Network Operations Centers (NOCs)**: Display critical infrastructure metrics on large screens for 24/7 monitoring. |
| 164 | - **Operations Centers**: Keep teams informed with real-time system health and performance dashboards. |
| 165 | - **Team Spaces**: Share dashboards on shared screens or wallboards for collaborative monitoring. |
| 166 | - **Wallboard-Style Monitoring**: Create persistent displays for continuous metric visibility. |
| 167 | |
| 168 | ### Security Considerations |
| 169 | |
| 170 | :::warning |
| 171 | |
| 172 | TV Mode URLs contain unique access tokens that provide full access to your Netdata Cloud dashboards and are embedded directly in the URL. Treat these URLs like secrets and **share them only with trusted users**. |
| 173 | |
| 174 | ::: |
| 175 | |
| 176 | - **Token Security**: Anyone with the TV Mode URL can access the dashboard without authentication. |
| 177 | - **Token Management**: TV Mode tokens can be viewed and revoked in **User Settings > API Tokens**. Learn more in the [API Tokens documentation](/docs/netdata-cloud/authentication-and-authorization/api-tokens.md). |
| 178 | - **Safe Handling**: Because the access token is in the URL, it can appear in browser history, logs, screenshots, clipboard managers, or HTTP Referer headers. Avoid posting TV Mode URLs in tickets, chats, or other shared channels, and revoke the token immediately if the URL is exposed. |
| 179 | - **Revocation & Lifecycle**: TV Mode tokens do not expire automatically; manage their lifecycle by revoking tokens when they're no longer needed. |
| 180 | |
| 181 | ## Minimum Browser Viewport Requirement |
| 182 | |
| 183 | Due to the visual complexity of individual charts, dashboards require a **minimum browser viewport width of 800px**. |
| 184 | |
| 185 | ## Next Steps |
| 186 | |
| 187 | After designing your dashboards, [invite your team](/docs/netdata-cloud/organize-your-infrastructure-invite-your-team.md#set-up-team-access) to collaborate. Add new users to the same Room so they can view and interact with your dashboards effortlessly. |