@cryptotaxi247 / netdata-1 / commits / 6a600de8d

docs(web/gui): remove legacy dashboard description (#18841)

Ilya Mashchenko committed Oct 22, 2024 at 11:18 UTC 6a600de8d4b8d18074e712886f69087b7dd54e59
1 file changed +2 -161
src/web/gui/README.md
+2 -161
@@ -1,163 +1,4 @@
1 # Legacy Agent dashboard
2
3 -> ⚠️ You're checking the documentation for the legacy Agent dashboard. For the current version please check [Accessing Netdata Dashboards](/docs/dashboards-and-charts/README.md).
4 -
5 -
6 -The local Netdata Agent dashboard is the heart of Netdata's performance troubleshooting toolkit. You've probably seen it
7 -before:
8 -
9 -![The Netdata dashboard in
10 -action](https://user-images.githubusercontent.com/1153921/101513938-fae28380-3939-11eb-9434-8ad86a39be62.gif)
11 -
12 -Learn more about how dashboards work and how they're populated using the `dashboards.js` file in our [web dashboards
13 -overview](/src/web/README.md).
14 -
15 -By default, Netdata starts a web server for its dashboard at port `19999`. Open up your web browser of choice and
16 -navigate to `http://NODE:19999`, replacing `NODE` with the IP address or hostname of your Agent. If installed on localhost,
17 -you can access it through `http://localhost:19999`.
18 -
19 -Netdata uses an [internal, static-threaded web server](/src/web/server/README.md) to host the HTML, CSS, and JavaScript
20 -files that make up the local Agent dashboard. You don't have to configure anything to access it, although you can adjust
21 -[your settings](/src/web/server/README.md#other-netdataconf-web-section-options) in the `netdata.conf` file, or run Netdata
22 -behind an [Nginx proxy](/docs/netdata-agent/configuration/running-the-netdata-agent-behind-a-reverse-proxy/Running-behind-nginx.md), and so on.
23 -
24 -## Navigating the local dashboard
25 -
26 -Beyond charts, the local dashboard can be broken down into three key areas:
27 -
28 -- [Navigating the local dashboard](#navigating-the-local-dashboard)
29 - - [Sections](#sections)
30 - - [Time \& date picker](#time--date-picker)
31 - - [Metrics menus](#metrics-menus)
32 - - [Cloud menus (Spaces, Rooms, and Visited nodes)](#cloud-menus-spaces-rooms-and-visited-nodes)
33 -- [Customizing the local dashboard](#customizing-the-local-dashboard)
34 -- [Custom dashboards](#custom-dashboards)
35 -
36 -![Annotated screenshot of the local Agent
37 -dashboard](https://user-images.githubusercontent.com/1153921/101509403-f7e59400-3935-11eb-9abd-cbecfa3ee49a.png)
38 -
39 -### Sections
40 -
41 -Netdata is broken up into multiple **sections**, such as **System Overview**,
42 -**CPU**, **Disk**, and more. Inside each section you'll find a number of charts,
43 -broken down into [contexts](/src/web/README.md#contexts) and
44 -[families](/src/web/README.md#families).
45 -
46 -An example of the **Memory** section on a Linux desktop system.
47 -
48 -![Screenshot of the Memory section of the Netdata
49 -dashboard](https://user-images.githubusercontent.com/1153921/101508423-e354cc00-3934-11eb-9b33-3ad57a5988b4.png)
50 -
51 -All sections and their associated charts appear on a single page, so all you need to do to view different sections is
52 -scroll up and down. But it's usually quicker to use the [menus](#metrics-menus).
53 -
54 -### Time & date picker
55 -
56 -The local dashboard features a time & date picker to help you visualize specific timeframes of historical metrics. The
57 -picker chooses an appropriate default to always show per-second granularity based on the width of your browser's
58 -viewport.
59 -
60 -![The time & date picker in the local Agent
61 -dashboard](https://user-images.githubusercontent.com/1153921/101507784-2c585080-3934-11eb-9d6e-eff30b8553e4.png)
62 -
63 -Use the Quick Selector to show metrics from the last 5 minutes, 15 minutes, 30 minutes, 2 hours, 6 hours, or 12 hours.
64 -
65 -Beneath the Quick Selector is an input field and dropdown you use in combination to select a specific timeframe of
66 -minutes, hours, days, or months. Enter a number and choose the appropriate unit of time.
67 -
68 -Use the calendar to select multiple days. Click on a date to begin the timeframe selection, then an ending date.
69 -
70 -Click **Apply** to re-render all visualizations with new metrics data, or **Clear** to restore the default timeframe.
71 -
72 -[Increase the metrics retention policy](/docs/netdata-agent/configuration/optimizing-metrics-database/change-metrics-storage.md) for your node to see more historical
73 -timeframes.
74 -
75 -### Metrics menus
76 -
77 -**Metrics menus** appears on the right-hand side of the local Agent dashboard. Netdata generates a menu for each
78 -section, and menus link to the section they're associated with.
79 -
80 -![A screenshot of metrics menus](https://user-images.githubusercontent.com/1153921/80834638-f08f2880-8ba5-11ea-99ae-f610b2885fd6.png)
81 -
82 -Most metrics menu items will contain several **submenu** entries, which represent any
83 -[families](/src/web/README.md#families) from that section. Netdata automatically
84 -generates these submenu entries.
85 -
86 -Here's a **Disks** menu with several submenu entries for each disk drive and
87 -partition Netdata recognizes.
88 -
89 -![Screenshot of some metrics
90 -submenus](https://user-images.githubusercontent.com/1153921/80834697-11577e00-8ba6-11ea-979c-92fd19cdb480.png)
91 -
92 -### Cloud menus (Spaces, Rooms, and Visited nodes)
93 -
94 -The dashboard also features a menu related to Netdata Cloud functionality. You can view your existing Spaces or create
95 -new ones via the left vertical column of boxes. This menu also displays the name of your current Space, shows a list of
96 -any Rooms you've added you your Space, and lists any notes you recently visited via their Agent dashboards. Click on
97 -a Room's name to jump to the Netdata Cloud web interface.
98 -
99 -![A screenshot of the Cloud
100 -menus](https://user-images.githubusercontent.com/1153921/80837210-3f8b8c80-8bab-11ea-9c75-128c2d823ef8.png)
101 -
102 -## Customizing the local dashboard
103 -
104 -Netdata stores information about individual charts in the `dashboard_info.js`
105 -file. This file includes section and subsection headings, descriptions, colors,
106 -titles, tooltips, and other information for Netdata to render on the dashboard.
107 -
108 -For example, here is how `dashboard_info.js` defines the **System Overview**
109 -section.
110 -
111 -```javascript
112 -netdataDashboard.menu = {
113 - 'system': {
114 - title: 'System Overview',
115 - icon: '<i class="fas fa-bookmark"></i>',
116 - info: 'Overview of the key system metrics.'
117 - },
118 -```
119 -
120 -If you want to customize this information, you should avoid editing
121 -`dashboard_info.js` directly. These changes are not persistent; Netdata will
122 -overwrite the file when it's updated. Instead, you should create a new file with
123 -your customizations.
124 -
125 -We created an example file at `dashboard_info_custom_example.js`. You can
126 -copy this to a new file with a name of your choice in the `web/` directory. This
127 -directory changes based on your operating system and installation method. If
128 -you're on a Linux system, it should be at `/usr/share/netdata/web/`.
129 -
130 -```shell
131 -cd /usr/share/netdata/web/
132 -sudo cp dashboard_info_custom_example.js your_dashboard_info_file.js
133 -```
134 -
135 -Edit the file with your customizations. For example:
136 -
137 -```javascript
138 -customDashboard.menu = {
139 - system: {
140 - title: "Testing, testing, 1 2 3",
141 - icon: '<i class="fas fa-thumbs-up"></i>',
142 - info: "This is overwritten info for the system overview section!"
143 - }
144 -};
145 -```
146 -
147 -Finally, tell Netdata where you placed your customization file by replacing
148 -`your_dashboard_info_file.js` below.
149 -
150 -```text
151 -[web]
152 - custom dashboard_info.js = your_dashboard_info_file.js
153 -```
154 -
155 -Once you restart Netdata, refresh the dashboard to find your custom
156 -configuration:
157 -
158 -![Screenshot of overwritten text from dashboard_info.js
159 -file](https://user-images.githubusercontent.com/1153921/62798924-570e6c80-ba94-11e9-9578-869753bec39c.png)
160 -
161 -## Custom dashboards
162 -
163 -For information on creating custom dashboards from scratch, see the [custom dashboards](/src/web/gui/custom/README.md) guide.
3 +> ⚠️ You're checking the documentation for the legacy Agent dashboard.
4 +> For the current version, check [Accessing Netdata Dashboards](/docs/dashboards-and-charts/README.md).