Add documentation for time & date picker in Agent and Cloud (#10347)
* Add new documentation for time & date pickers * Update GIFs * GIF in main README * Fixes for Amy and Odysseas
Joel Hans committed
Dec 15, 2020 at 07:31 UTC
50e8edabaa2f02c3345ce3eff9d45a85c51d5fb2
4 files changed
+84
-49
README.md
+1
-1
@@ -55,7 +55,7 @@ Netdata](https://user-images.githubusercontent.com/1153921/96495792-2e881380-11f
55
## Features
56
57
58
+action](https://user-images.githubusercontent.com/1153921/101513938-fae28380-3939-11eb-9434-8ad86a39be62.gif)
59
60
Here's what you can expect from Netdata:
61
docs/visualize/interact-dashboards-charts.md
+27
-3
@@ -13,9 +13,6 @@ metrics, and you interact with both of them the same way.
13
> If you're not sure which option is best for you, see our [single-node](/docs/quickstart/single-node.md) and
14
> [infrastructure](/docs/quickstart/infrastructure.md) quickstart guides.
15
16
-
18
-
16
Netdata dashboards are single, scrollable pages with many charts stacked on top of one another. As you scroll up or
17
down, charts appearing in your browser's viewport automatically load and update every second.
18
@@ -24,6 +21,31 @@ automatically generated based on which [collectors](/docs/collect/how-collectors
21
Netdata starts up. Sections also appear in the right-hand **menu**, along with submenus based on the contexts and
22
families Netdata creates for your node.
23
24
+## Choose timeframes to visualize
25
+
26
+Both the local Agent dashboard and Netdata Cloud feature time & date pickers to help you visualize specific points in
27
+time. In Netdata Cloud, the picker appears in the [Overview](/docs/visualize/overview-infrastructure.md), [Nodes
28
+view](https://learn.netdata.cloud/docs/cloud/visualize/nodes), [new
29
+dashboards](https://learn.netdata.cloud/docs/cloud/visualize/dashboards), and any single-node dashboards you visit.
30
+
31
+Local Agent dashboard:
32
+
33
+
35
+
36
+Netdata Cloud:
37
+
38
+
40
+
41
+Their behavior is identical. Use the Quick Selector to visualize generic timeframes, or use the calendar or inputs to
42
+select days, hours, minutes or seconds. Click **Apply** to re-render all visualizations with new metrics data, or
43
+**Clear** to restore the default timeframe.
44
+
45
+See reference documentation for the [local Agent dashboard](/web/gui/README.md#time--date-picker) and [Netdata
46
+Cloud](https://learn.netdata.cloud/docs/cloud/war-rooms#time--date-picker) for additional context about how the time &
47
+date picker behaves in each environment.
48
+
49
## Charts, dimensions, families, and contexts
50
51
A **chart** is an interactive visualization of one or more collected/calculated metrics. You can see the name (also
@@ -99,5 +121,7 @@ to get informed when something goes wrong in your infrastructure.
121
- [Netdata Agent · Web dashboards overview](/web/README.md)
122
- [Netdata Cloud · War Rooms](https://learn.netdata.cloud/docs/cloud/war-rooms)
123
- [Netdata Cloud · Overview](https://learn.netdata.cloud/docs/cloud/visualize/overview)
124
+- [Netdata Cloud · Nodes](https://learn.netdata.cloud/docs/cloud/visualize/nodes)
125
+- [Netdata Cloud · Build new dashboards](https://learn.netdata.cloud/docs/cloud/visualize/dashboards)
126
127
[](<>)
web/README.md
+7
-9
@@ -1,6 +1,6 @@
1
<!--
2
title: "Dashboards"
3
-description: "Netdata comes bundled with hundreds of real-time, context-aware charts that help your monitor health and performance without configuration."
3
+description: "Every Netdata Agent comes bundled with hundreds of interactive, customizable charts designed by monitoring and troubleshooting experts."
4
custom_edit_url: https://github.com/netdata/netdata/edit/master/web/README.md
5
-->
6
@@ -14,11 +14,10 @@ team and the community, but you can also customize them yourself.
14
15
There are two primary ways to view Netdata's dashboards:
16
17
-1. The [standard web dashboard](/web/gui/README.md) that comes pre-configured with every
18
- Netdata installation. You can see it at `http://SERVER-IP:19999`, or
19
- `http://localhost:19999` on `localhost`. You can customize the contents and
20
- colors of the standard dashboard [using
21
- JavaScript](/web/gui/README.md#customizing-the-standard-dashboard).
17
+1. The [local Agent dashboard](/web/gui/README.md) that comes pre-configured with every Netdata installation. You can
18
+ see it at `http://NODE:19999`, replacing `NODE` with `localhost`, the hostname of your node, or its IP address. You
19
+ can customize the contents and colors of the standard dashboard [using
20
+ JavaScript](/web/gui/README.md#customizing-the-standard-dashboard).
21
22
2. The [`dashboard.js` JavaScript library](#dashboardjs), which helps you
23
[customize the standard dashboards](/web/gui/README.md#customizing-the-standard-dashboard)
@@ -27,9 +26,8 @@ There are two primary ways to view Netdata's dashboards:
26
27
You can also view all the data Netdata collects through the [REST API v1](/web/api/).
28
30
-No matter where you use Netdata's charts, you'll want to know how to
31
-[use](#using-charts) them. You'll also want to understand how Netdata defines
32
-[charts](#charts), [dimensions](#dimensions), [families](#families), and
29
+No matter where you use Netdata's charts, you'll want to know how to [use](#using-charts) them. You'll also want to
30
+understand how Netdata defines [charts](#charts), [dimensions](#dimensions), [families](#families), and
31
[contexts](#contexts).
32
33
## Using charts
web/gui/README.md
+49
-36
@@ -1,47 +1,40 @@
1
<!--
2
----
3
-title: "The standard web dashboard"
4
-date: 2020-05-04
2
+title: "Local Agent dashboard"
3
+description: "The local Netdata Agent dashboard is the heart of health monitoring and performance troubleshooting, with hundreds of real-time charts."
4
custom_edit_url: https://github.com/netdata/netdata/edit/master/web/gui/README.md
6
----
5
-->
6
9
-# The standard web dashboard
7
+# Local Agent dashboard
8
11
-The standard web dashboard is the heart of Netdata's performance troubleshooting toolkit. You've probably seen it
9
+The local Netdata Agent dashboard is the heart of Netdata's performance troubleshooting toolkit. You've probably seen it
10
before:
11
12
13
+action](https://user-images.githubusercontent.com/1153921/101513938-fae28380-3939-11eb-9434-8ad86a39be62.gif)
14
17
-Learn more about how dashboards work and how they're populated using the
18
-`dashboards.js` file in our [web dashboards overview](/web/README.md).
15
+Learn more about how dashboards work and how they're populated using the `dashboards.js` file in our [web dashboards
16
+overview](/web/README.md).
17
18
By default, Netdata starts a web server for its dashboard at port `19999`. Open up your web browser of choice and
19
navigate to `http://NODE:19999`, replacing `NODE` with the IP address or hostname of your Agent. If you're unsure, try
20
`http://localhost:19999` first.
21
24
-> In v1.21 of the Agent, we replaced the legacy dashboard with a refactored dashboard written in React. By using React,
25
-> we simplify our code and give our engineers better tools to add new features and fix bugs. The only UI change with
26
-> this dashboard is the top navigation and left-hand navigation for [Cloud integration](/docs/agent-cloud.md). The old
27
-> dashboard is still accessible at the `http://NODE:19999/old` subfolder.
22
+Netdata uses an [internal, static-threaded web server](/web/server/README.md) to host the HTML, CSS, and JavaScript
23
+files that make up the local Agent dashboard. You don't have to configure anything to access it, although you can adjust
24
+[your settings](/web/server/README.md#other-netdataconf-web-section-options) in the `netdata.conf` file, or run Netdata
25
+behind an [Nginx proxy](https://learn.netdata.cloud/docs/agent/running-behind-nginx), and so on.
26
29
-Netdata uses an [internal, static-threaded web server](/web/server/README.md) to host the
30
-HTML, CSS, and JavaScript files that make up the standard dashboard. You don't
31
-have to configure anything to access it, although you can adjust [your
32
-settings](/web/server/README.md#other-netdataconf-web-section-options) in the
33
-`netdata.conf` file, or run Netdata behind an Nginx proxy, and so on.
27
+## Navigating the local dashboard
28
35
-## Navigating the standard dashboard
36
-
37
-Beyond charts, the standard dashboard can be broken down into three key areas:
29
+Beyond charts, the local dashboard can be broken down into three key areas:
30
31
1. [**Sections**](#sections)
40
-2. [**Metrics menus/submenus**](#metrics-menus)
41
-3. [**Cloud menus: Spaces, War Rooms, and Visited nodes)**](#cloud-menus-spaces-war-rooms-and-visited-nodes)
32
+2. [**Time & date picker](#time--date-picker)
33
+3. [**Metrics menus/submenus**](#metrics-menus)
34
+4. [**Netdata Cloud menus: Spaces, War Rooms, and Visited nodes)**](#cloud-menus-spaces-war-rooms-and-visited-nodes)
35
43
-
36
+
38
39
### Sections
40
@@ -53,16 +46,36 @@ broken down into [contexts](/web/README.md#contexts) and
46
An example of the **Memory** section on a Linux desktop system.
47
48
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
+
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
58
-All sections and their associated charts appear on a single "page," so all you
59
-need to do to view different sections is scroll up and down the page. But it's
60
-usually quicker to use the [menus](#metrics-menus).
72
+[Increase the metrics retention policy](/docs/store/change-metrics-storage.md) for your node to see more historical
73
+timeframes.
74
75
### Metrics menus
76
64
-**Metrics menus** appears on the right-hand side of the standard dashboard. Netdata generates a menu for each section,
65
-and menus link to the section they're associated with.
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
81
@@ -78,10 +91,10 @@ submenus](https://user-images.githubusercontent.com/1153921/80834697-11577e00-8b
91
92
### Cloud menus (Spaces, War Rooms, and Visited nodes)
93
81
-The dashboard also features a menu related to Cloud functionality. You can view your existing Spaces or create new ones
82
-via the vertical column of boxes. This menu also displays the name of your current Space, shows a list of any War Rooms
83
-you've added you your Space, and lists your Visited nodes. If you click on a War Room's name, the dashboard redirects
84
-you to the Netdata Cloud web interface.
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 War Rooms you've added you your Space, and lists any notes you recently visited via their Agent dashboards. Click on
97
+a War Room's name to jump to the Netdata Cloud web interface.
98
99
@@ -89,7 +102,7 @@ menus](https://user-images.githubusercontent.com/1153921/80837210-3f8b8c80-8bab-
102
If you want to know more about how Cloud populates this menu, and the Agent-Cloud integration at a high level, see our
103
document on [using the Agent with Netdata Cloud](/docs/agent-cloud.md).
104
92
-## Customizing the standard dashboard
105
+## Customizing the local dashboard
106
107
Netdata stores information about individual charts in the `dashboard_info.js`
108
file. This file includes section and subsection headings, descriptions, colors,