how-dashboard-works.mdx 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. ---
  2. title: "How the dashboard works"
  3. description: "Learn how to navigate Netdata's preconfigured dashboard to get started exploring, visualizing, and troubleshooting in real time."
  4. type: explanation
  5. custom_edit_url: https://github.com/netdata/netdata/edit/master/docs/dashboard/how-dashboard-works.mdx
  6. ---
  7. # How the dashboard works
  8. Because Netdata is a monitoring and _troubleshooting_ platform, a dashboard with real-time, meaningful, and
  9. context-aware charts is essential.
  10. As soon as you [install Netdata](/docs/get-started.mdx), it autodetects hardware, OS, containers, services, and
  11. applications running on your node and builds a dashboard on a single, scrollable webpage. This page features hundreds of
  12. charts, which are preconfigured to save you time from learning a query language, all stacked on top of one another. This
  13. vertical rhythm is designed to encourage exploration and help you visually identify connections between the metrics
  14. visualized in different charts.
  15. It's essential to understand the core concepts and features of Netdata's dashboard if you want to maximize your Netdata
  16. experience right after installation.
  17. ## Open the dashboard
  18. Access Netdata's dashboard by navigating to `http://NODE:19999` in your browser, replacing `NODE` with either
  19. `localhost` or the hostname/IP address of a remote node.
  20. ![Animated GIF of navigating to the
  21. dashboard](https://user-images.githubusercontent.com/1153921/80825153-abaec600-8b94-11ea-8b17-1b770a2abaa9.gif)
  22. Many features of the internal web server that serves the dashboard are [configurable](/web/server/README.md), including
  23. the listen port, enforced TLS, and even disabling the dashboard altogether.
  24. ## Sections and menus
  25. As mentioned in the introduction, Netdata automatically organizes all the metrics it collects from your node, and places
  26. them into **sections** of closely related charts.
  27. The first section on any dashboard is the **System Overview**, followed by **CPUs**, **Memory**, and so on.
  28. These sections populate the **menu**, which is on the right-hand side of the dashboard. Instead of manually scrolling up
  29. and down to explore the dashboard, it's generally faster to click on the relevant menu item to jump to that position on
  30. the dashboard.
  31. Many menu items also contain a **submenu**, with links to additional categories. For example, the **Disks** section is often separated into multiple groups based on the number of disk drives/partitions on your node, which are also known as a family.
  32. ![Animated GIF of using Netdata's menus and
  33. submenus](https://user-images.githubusercontent.com/1153921/80832425-7c528600-8ba1-11ea-8140-d0a17a62009b.gif)
  34. ## Charts
  35. Every **chart** in the Netdata dashboard is [fully interactive](/docs/dashboard/interact-charts.mdx). Netdata
  36. synchronizes your interactions to help you understand exactly how a node behaved in any timeframe, whether that's
  37. seconds or days.
  38. A chart is an individual, interactive, always-updating graphic displaying one or more collected/calculated metrics,
  39. which are generated by [collectors](/docs/collect/how-collectors-work.md).
  40. ![Animated GIF of the standard Netdata dashboard being manipulated and synchronizing
  41. charts](https://user-images.githubusercontent.com/1153921/80839230-b034a800-8baf-11ea-9cb2-99c1e10f0f85.gif)
  42. Hover over any chart to temporarily pause it and see the exact metrics values presented as different dimensions. Click
  43. or tap to stop the chart from automatically updating with new metrics, thereby locking it to a single timeframe.
  44. Double-click it to resume auto-updating.
  45. Let's cover two of the most important ways to interact with charts: panning through time and zooming.
  46. To pan through time, **click and hold** (or touch and hold) on any chart, then **drag your mouse** (or finger) to the
  47. left or right. Drag to the right to pan backward through time, or drag to the left to pan forward in time. Think of it
  48. like pushing the current timeframe off the screen to see what came before or after.
  49. To zoom, press and hold `Shift`, then use your mouse's scroll wheel, or a two-finger pinch if you're using a touchpad.
  50. See [interact with charts](/docs/dashboard/interact-charts.mdx) for all the possible ways to interact with the charts on
  51. your dashboard.
  52. ## Alarms
  53. Many of the preconfigured charts on the Netdata dashboard also come with preconfigured alarms. Netdata sends three
  54. primary alarm states via alarms: `CLEAR`, `WARNING`, and `CRITICAL`. If an alarm moves from a `CLEAR` state to either
  55. `WARNING` or `CRITICAL`, Netdata creates a notification to let you know exactly what's going on. There are [other alarm
  56. states](/health/REFERENCE.md#alarm-statuses) as well.
  57. The easiest way to see alarms is by clicking on the alarm icon ![Alarms
  58. icon](https://raw.githubusercontent.com/netdata/netdata-ui/98e31799c1ec0983f433537ff16d2ac2b0d994aa/src/components/icon/assets/alarm.svg)
  59. in the top panel to open the alarms panel, which shows you all the active alarms. The other **All** tab shows every
  60. active alarm, and the **Log** tab shows a historical record of exactly when alarms triggered and to which state.
  61. ![Animated GIF of looking at raised alarms and the alarm
  62. log](https://user-images.githubusercontent.com/1153921/80842482-8c289500-8bb6-11ea-9791-600cfdbe82ce.gif)
  63. Learn more about [viewing active alarms](/docs/monitor/view-active-alarms.md), [configuring
  64. alarms](/docs/monitor/configure-alarms.md), or [enabling a new notification
  65. method](/docs/monitor/enable-notifications.md).
  66. ## What's next?
  67. Learn more about [interacting with charts](/docs/dashboard/interact-charts.mdx) to quickly pan through time, zoom, and
  68. show/hide dimensions to best understand the state of your node in any timeframe. A complete understanding of [chart
  69. dimensions, contexts, and families](/docs/dashboard/dimensions-contexts-families.mdx) will also help with how Netdata
  70. organizes its dashboard and operates [alarms](/docs/monitor/configure-alarms.md).
  71. ### Further reading & related information
  72. - Dashboard
  73. - **[How the dashboard works](/docs/dashboard/how-dashboard-works.mdx)**
  74. - [Interact with charts](/docs/dashboard/interact-charts.mdx)
  75. - [Chart dimensions, contexts, and families](/docs/dashboard/dimensions-contexts-families.mdx)
  76. - [Select timeframes to visualize](/docs/dashboard/visualization-date-and-time-controls.mdx)
  77. - [Import, export, and print a snapshot](/docs/dashboard/import-export-print-snapshot.mdx)
  78. - [Customize the standard dashboard](/docs/dashboard/customize.mdx)
  79. - [HTTP API](/web/api/README.md)
  80. - [Custom dashboards](/web/gui/custom/README.md)