diff options
author | Joel Hans <joel@netdata.cloud> | 2020-05-14 06:50:01 -0700 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-05-14 06:50:01 -0700 |
commit | 9d712b513566f1f90f6031f16c25953c5d836891 (patch) | |
tree | 9aa1340a8b3529271941ce7cb809bbc65c42453a /web | |
parent | 4609d5b3dd1ad4d26daae52aaa5bda1948be288e (diff) |
Docs: Remove old Cloud/dashboard and replace with new Cloud/dashboard (#8874)
* Add options to daemon, clean up claiming
* Caught one more old conf
* Remove cloud docs
* I did a lot of things
* Rewrite tutorial step 3
* Remove my nodes menu, sync what-is-netdata
* Restore ACLK/claim/daemon docs to be handled by docs-go-live
* Fix up what-is-netdata
* More cleanup of README/what-is-netdata
* Restore daemon/config/README.md
* Fix frontmatter
* Change title, fix broken link
* Copyediting fixes
* Remove symbols
* Add a few more GIFs
* Fix hash
* Fix other hash
* Fix wording in web gui
* Address Andrew's and Jacek's comments
Diffstat (limited to 'web')
-rw-r--r-- | web/README.md | 20 | ||||
-rw-r--r-- | web/gui/README.md | 88 |
2 files changed, 47 insertions, 61 deletions
diff --git a/web/README.md b/web/README.md index 59c90c6ff6..fe4be00d0c 100644 --- a/web/README.md +++ b/web/README.md @@ -50,8 +50,7 @@ forward or backward in time, or selecting a specific timeframe for more in-depth analysis. Whenever you use a chart in this way, Netdata synchronizes all the other charts -to match it. Chart synchronization even works between separate Netdata agents if you connect -them using the [**My nodes** menu](/registry/README.md)! +to match it. You can change how charts show their metrics in a few different ways, each of which have a few methods: @@ -66,14 +65,19 @@ which have a few methods: Here's how chart synchronization looks while zooming and panning: -![Animated GIF of the standard Netdata dashboard being manipulated and -synchronizing -charts](https://user-images.githubusercontent.com/2662304/48309003-b4fb3b80-e578-11e8-86f6-f505c7059c15.gif) +![Animated GIF of the standard Netdata dashboard being manipulated and synchronizing +charts](https://user-images.githubusercontent.com/1153921/80839230-b034a800-8baf-11ea-9cb2-99c1e10f0f85.gif) You can also perform all these actions using the small rewind/play/fast-forward/zoom-in/zoom-out buttons that appear in the bottom-right corner of each chart. +Additionally, resize charts by clicking-and-dragging the icon on the bottom-right corner of any chart. To restore the +chart to its original height, double-click the same icon. + +![Animated GIF of resizing a chart and resetting it to the default +height](https://user-images.githubusercontent.com/1153921/80842459-7d41e280-8bb6-11ea-9488-1bc29f94d7f2.gif) + ## Charts, contexts, families Before customizing the standard web dashboard, creating a custom dashboard, @@ -191,7 +195,8 @@ To improve clarity on charts, Netdata dashboards present **positive** values for metrics representing `read`, `input`, `inbound`, `received` and **negative** values for metrics representing `write`, `output`, `outbound`, `sent`. -![positive-and-negative-values](https://user-images.githubusercontent.com/2662304/48309090-7c5c6180-e57a-11e8-8e03-3a7538c14223.gif) +![Screenshot showing positive and negative +values](https://user-images.githubusercontent.com/1153921/81870401-9d649080-952a-11ea-80e3-4a7b480252ee.gif) _Netdata charts showing the bandwidth and packets of a network interface. `received` is positive and `sent` is negative._ @@ -201,7 +206,8 @@ _Netdata charts showing the bandwidth and packets of a network interface. Netdata charts automatically zoom vertically, to visualize the variation of each metric within the visible timeframe. -![non-zero-based](https://user-images.githubusercontent.com/2662304/48309139-3d2f1000-e57c-11e8-9a44-b91758134b00.gif) +![Animated GIF showing the auso-scaling Y +axis](https://user-images.githubusercontent.com/1153921/80838276-8084a080-8bad-11ea-8167-8d5ab2fb1be1.gif) _A zero-based `stacked` chart, automatically switches to an auto-scaled `area` chart when a single dimension is selected._ diff --git a/web/gui/README.md b/web/gui/README.md index 3b0eb08977..8e541164bd 100644 --- a/web/gui/README.md +++ b/web/gui/README.md @@ -1,25 +1,30 @@ <!-- --- title: "The standard web dashboard" -date: 2020-03-11 +date: 2020-05-04 custom_edit_url: https://github.com/netdata/netdata/edit/master/web/gui/README.md --- --> # The standard web dashboard -The standard web dashboard is the heart of Netdata's performance troubleshooting -toolkit. You've probably seen it before: +The standard web dashboard is the heart of Netdata's performance troubleshooting toolkit. You've probably seen it +before: -![A GIF of the standard Netdata web -dashboard](https://user-images.githubusercontent.com/2662304/48307727-9175c800-e55b-11e8-92d8-a581d60a4889.gif) +![The Netdata dashboard in +action](https://user-images.githubusercontent.com/1153921/80827388-b9fee100-8b98-11ea-8f60-0d7824667cd3.gif) Learn more about how dashboards work and how they're populated using the `dashboards.js` file in our [web dashboards overview](/web/README.md). -By default, Netdata starts a web server for its dashboard at port `19999`. Open -up your web browser of choice and navigate to `http://SERVER-IP:19999`, or -`http://localhost:19999` on `localhost`. +By default, Netdata starts a web server for its dashboard at port `19999`. Open up your web browser of choice and +navigate to `http://NODE:19999`, replacing `NODE` with the IP address or hostname of your Agent. If you're unsure, try +`http://localhost:19999` first. + +> In v1.21 of the Agent, we replaced the legacy dashboard with a refactored dashboard written in React. By using React, +> we simplify our code and give our engineers better tools to add new features and fix bugs. The only UI change with +> this dashboard is the top navigation and left-hand navigation for [Cloud integration](/docs/agent-cloud.md). The old +> dashboard is still accessible at the `http://NODE:19999/old` subfolder. Netdata uses an [internal, static-threaded web server](/web/server/README.md) to host the HTML, CSS, and JavaScript files that make up the standard dashboard. You don't @@ -27,26 +32,16 @@ have to configure anything to access it, although you can adjust [your settings](/web/server/README.md#other-netdataconf-web-section-options) in the `netdata.conf` file, or run Netdata behind an Nginx proxy, and so on. -<details markdown="1"><summary>Want to see the dashboard and its features in action? Check out our video.</summary> -<iframe width="720" height="405" src="https://www.youtube.com/embed/Ob6-Wkb6ZBA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -</details> - -## New React Dashboard - -We've been working on refactoring the standard dashboard code to simplify the process of adding new features and fixing bugs. - -The new dashboard is added to the codebase, but the old version is still here. If you want to use it, run `/usr/libexec/netdata/netdata-switch-dashboard.sh classic`. To switch back, do `netdata-switch-dashboard.sh react`. Currently, the refactored dashboard doesn't include any noticeable changes in UI. - ## Navigating the standard dashboard Beyond charts, the standard dashboard can be broken down into three key areas: 1. [**Sections**](#sections) -2. [**Menus/submenus**](#menus) -3. [**Nodes menu**](#nodes-menu) +2. [**Metrics menus/submenus**](#metrics-menus) +3. [**Cloud menus: Spaces, War Rooms, and Visited nodes)**](#cloud-menus-spaces-war-rooms-and-visited-nodes) ![Annotated screenshot of the -dashboard](https://user-images.githubusercontent.com/1153921/62810777-ef681980-bab3-11e9-9310-ec7a0c9f4faa.png) +dashboard](https://user-images.githubusercontent.com/1153921/80834497-ac9c2380-8ba5-11ea-83c4-b323dd89557f.png) ### Sections @@ -58,56 +53,41 @@ broken down into [contexts](/web/README.md#contexts) and An example of the **Memory** section on a Linux desktop system. ![Screenshot of the Memory section of the Netdata -dashboard](https://user-images.githubusercontent.com/1153921/62811044-1410c100-bab5-11e9-91cc-414cf6c23985.png) +dashboard](https://user-images.githubusercontent.com/1153921/80834530-bcb40300-8ba5-11ea-9219-cd554577844e.png) All sections and their associated charts appear on a single "page," so all you need to do to view different sections is scroll up and down the page. But it's -usually quicker to use the [menus](#menus). +usually quicker to use the [menus](#metrics-menus). -### Menus +### Metrics menus -**Menus** appears on the right-hand side of the standard dashboard. Netdata -generates a menu for each section, and menus link to the section they're -associated with. +**Metrics menus** appears on the right-hand side of the standard dashboard. Netdata generates a menu for each section, +and menus link to the section they're associated with. -![Screenshot of the -menu](https://user-images.githubusercontent.com/1153921/62811361-38b96880-bab6-11e9-8d41-4d9b29778e86.png) +![A screenshot of metrics menus](https://user-images.githubusercontent.com/1153921/80834638-f08f2880-8ba5-11ea-99ae-f610b2885fd6.png) -Most menu items will contain several **submenu** entries, which represent any +Most metrics menu items will contain several **submenu** entries, which represent any [families](/web/README.md#families) from that section. Netdata automatically generates these submenu entries. Here's a **Disks** menu with several submenu entries for each disk drive and partition Netdata recognizes. -![Screenshot of some -submenus](https://user-images.githubusercontent.com/1153921/62811428-70281500-bab6-11e9-9a61-ecd0a7aba453.png) - -### Nodes menu - -The nodes menu appears in the top-left corner of the standard dashboard and is -labeled with the hostname of the system Netdata is monitoring. - -Clicking on it will display a drop-down menu of any nodes you might have -connected via the [Netdata registry](/registry/README.md). By default, you'll find -nothing under the **My nodes** heading, but you can try out any of the demo -Netdata nodes to see how the nodes menu works. - -![Screenshot of the default (empty) nodes -menu](https://user-images.githubusercontent.com/1153921/62795508-c3d13900-ba8b-11e9-98ed-f0be1b201340.png) +![Screenshot of some metrics +submenus](https://user-images.githubusercontent.com/1153921/80834697-11577e00-8ba6-11ea-979c-92fd19cdb480.png) -Once you add nodes via [Netdata Cloud](/docs/netdata-cloud/README.md) or a [private -registry](/registry/README.md#run-your-own-registry), you will see them appear under -the **My nodes** heading. +### Cloud menus (Spaces, War Rooms, and Visited nodes) -![Screenshot of a nodes menu populated by registry -agents](https://user-images.githubusercontent.com/1153921/62795509-c3d13900-ba8b-11e9-8459-e85bf71f7ceb.png) +The dashboard also features a menu related to Cloud functionality. You can view your existing Spaces or create new ones +via the vertical column of boxes. This menu also displays the name of your current Space, shows a list of any War Rooms +you've added you your Space, and lists your Visited nodes. If you click on a War Room's name, the dashboard redirects +you to the Netdata Cloud web interface. -The nodes menu will also show the master netdata node and all slave nodes -streaming to that master, if you have [configured streaming](/streaming/README.md). +![A screenshot of the Cloud +menus](https://user-images.githubusercontent.com/1153921/80837210-3f8b8c80-8bab-11ea-9c75-128c2d823ef8.png) -![Screenshot of a nodes menu populated by streaming -agents.](https://user-images.githubusercontent.com/1153921/62965774-90a7e600-bdba-11e9-8b80-495f35b29ecb.png) +If you want to know more about how Cloud populates this menu, and the Agent-Cloud integration at a high level, see our +document on [using the Agent with Netdata Cloud](/docs/agent-cloud.md). ## Customizing the standard dashboard |