Init new files and create connections (#11099)
Joel Hans committed
May 17, 2021 at 07:47 UTC
e75a06ce37e84a3a50a4ea1c4db6f391b9a708fa
6 files changed
+212
-8
docs/dashboard/customize.mdx
new
+93
@@ -0,0 +1,93 @@
1
+---
2
+title: "Customize the standard dashboard"
3
+description: "Netdata's preconfigured dashboard offers many customization options, such as choosing when charts are updated, your preferred theme, and custom text to document processes, and more."
4
+type: how-to
5
+custom_edit_url: https://github.com/netdata/netdata/edit/master/docs/dashboard/customize.mdx
6
+---
7
+
8
+# Customize the standard dashboard
9
+
10
+While the [Netdata dashboard](/docs/dashboard/how-dashboard-works.mdx) comes preconfigured with hundreds of charts and
11
+thousands of metrics, you may want to alter your experience based on a particular use case or preferences.
12
+
13
+## Dashboard settings
14
+
15
+To change dashboard settings, click the on the **settings** icon 
17
+in the top panel.
18
+
19
+These settings only affect how the dashboard behaves in your browser. They take effect immediately and are permanently
20
+saved to browser local storage (except the refresh on focus / always option). Some settings are applied immediately, and
21
+others are only reflected after the dashboard is refreshed, which happens automatically.
22
+
23
+Here are a few popular settings:
24
+
25
+### Change chart legend position
26
+
27
+Find this setting under the **Visual** tab. By default, Netdata places the [legend of
28
+dimensions](/docs/dashboards/charts-dimensions-contexts-families.mdx#dimensions) _below_ charts. Click this toggle to
29
+move the legend to the _right_ of charts.
30
+
31
+### Change theme
32
+
33
+Find this setting under the **Visual** tab. Choose between Dark (the default) and White.
34
+
35
+## Customize the standard dashboard
36
+
37
+Netdata stores information about individual charts in the `dashboard_info.js` file. This file includes section and
38
+subsection headings, descriptions, colors, titles, tooltips, and other information for Netdata to render on the
39
+dashboard.
40
+
41
+One common use case for customizing the standard dashboard is adding internal "documentation" a section or specific
42
+chart that can then be read by anyone with access to that dashboard.
43
+
44
+For example, here is how `dashboard_info.js` defines the **System Overview** section.
45
+
46
+```javascript
47
+netdataDashboard.menu = {
48
+ 'system': {
49
+ title: 'System Overview',
50
+ icon: '<i class="fas fa-bookmark"></i>',
51
+ info: 'Overview of the key system metrics.'
52
+ },
53
+```
54
+
55
+If you want to customize this information, use the example `dashboard_info_custom_example.js` as a starting point.
56
+First, navigate to the web server's directory. If you're on a Linux system, this should be at `/usr/share/netdata/web/`.
57
+Copy the example file, then ensure that its permissions match the rest of the web server, which is `netdata:netdata` by
58
+default.
59
+
60
+```bash
61
+cd /usr/share/netdata/web/
62
+sudo cp dashboard_info_custom_example.js your_dashboard_info_file.js
63
+sudo chown netdata:netdata your_dashboard_info_file.js
64
+```
65
+
66
+Edit the file with customizations to the `title`, `icon`, and `info` fields. Replace the string after `fas fa-` with any
67
+icon from [Font Awesome](https://fontawesome.com/cheatsheet) to customize the icons that appear throughout the
68
+dashboard.
69
+
70
+Save the file, then navigate to your [Netdata config directory](/docs/configure/nodes.md) to edit `netdata.conf`. Add
71
+the following line to the `[web]` section to tell Netdata where to find your custom configuration.
72
+
73
+```conf
74
+[web]
75
+ custom dashboard_info.js = your_dashboard_info_file.js
76
+```
77
+
78
+Reload your browser tab to see your custom configuration.
79
+
80
+## What's next?
81
+
82
+If you're keen on continuing to customize your Netdata experience, check out our docs on [building new custom
83
+dashboards](/web/gui/custom/README.md) with HTML, CSS, and JavaScript.
84
+
85
+### Further reading & related information
86
+
87
+- Dashboard
88
+ - [How the dashboard works](/docs/dashboard/how-dashboard-works.mdx)
89
+ - [Interact with charts](/docs/dashboard/interact-charts.mdx)
90
+ - [Chart dimensions, contexts, and families](/docs/dashboard/dimensions-contexts-families.mdx)
91
+ - [Select timeframes to visualize](/docs/dashboard/select-timeframes.mdx)
92
+ - [Import, export, and print a snapshot](/docs/dashboard/import-export-print-snapshot.mdx)
93
+ - **[Customize the standard dashboard](/docs/dashboard/customize.mdx)**
docs/dashboard/dimensions-contexts-families.mdx
+7
-2
@@ -87,5 +87,10 @@ process or a query language to create charts, there are a lot of ways to tweak t
87
88
### Further reading & related information
89
90
-- [How the dashboard works](/docs/dashboard/how-dashboard-works.mdx)
91
-- [Interact with charts](/docs/dashboard/interact-charts.mdx)
90
+- Dashboard
91
+ - [How the dashboard works](/docs/dashboard/how-dashboard-works.mdx)
92
+ - [Interact with charts](/docs/dashboard/interact-charts.mdx)
93
+ - **[Chart dimensions, contexts, and families](/docs/dashboard/dimensions-contexts-families.mdx)**
94
+ - [Select timeframes to visualize](/docs/dashboard/select-timeframes.mdx)
95
+ - [Import, export, and print a snapshot](/docs/dashboard/import-export-print-snapshot.mdx)
96
+ - [Customize the standard dashboard](/docs/dashboard/customize.mdx)
docs/dashboard/how-dashboard-works.mdx
+7
@@ -101,5 +101,12 @@ organizes its dashboard and operates [alarms](/docs/monitor/configure-alarms.md)
101
102
### Further reading & related information
103
104
+- Dashboard
105
+ - **[How the dashboard works](/docs/dashboard/how-dashboard-works.mdx)**
106
+ - [Interact with charts](/docs/dashboard/interact-charts.mdx)
107
+ - [Chart dimensions, contexts, and families](/docs/dashboard/dimensions-contexts-families.mdx)
108
+ - [Select timeframes to visualize](/docs/dashboard/select-timeframes.mdx)
109
+ - [Import, export, and print a snapshot](/docs/dashboard/import-export-print-snapshot.mdx)
110
+ - [Customize the standard dashboard](/docs/dashboard/customize.mdx)
111
- [HTTP API](/web/api/README.md)
112
- [Custom dashboards](/web/gui/custom/README.md)
docs/dashboard/import-export-print-snapshot.mdx
new
+83
@@ -0,0 +1,83 @@
1
+---
2
+title: "Import, export, and print a snapshot"
3
+description: "Snapshots can be incredibly useful for diagnosing anomalies after they've already happened, and are interoperable with any other node running Netdata."
4
+type: how-to
5
+custom_edit_url: https://github.com/netdata/netdata/edit/master/docs/dashboard/import-export-print-snapshot.mdx
6
+---
7
+
8
+# Import, export, and print snapshots
9
+
10
+Netdata can export snapshots of the contents of your dashboard at a given time, which you can then import into any other
11
+node running Netdata. Or, you can create a print-ready version of your dashboard to save to PDF or actually print to
12
+paper.
13
+
14
+Snapshots can be incredibly useful for diagnosing anomalies after they've already happened. Let's say Netdata triggered
15
+a warning alarm while you were asleep. In the morning, you can [pick the
16
+timeframe](/docs/dashboards/pick-timeframes.mdx) when the alarm triggered, export a snapshot, and send it to a colleague
17
+for further analysis.
18
+
19
+Or, send the Netdata team a snapshot of your dashboard when [filing a bug
20
+report](https://github.com/netdata/netdata/issues/new?assignees=&labels=bug%2C+needs+triage&template=bug_report.md) on
21
+GitHub.
22
+
23
+
25
+
26
+## Import a snapshot
27
+
28
+To import a snapshot, click on the **import** icon 
30
+in the top panel.
31
+
32
+Select the Netdata snapshot file to import. Once the file is loaded, the modal updates with information about the
33
+snapshot and the system from which it was taken. Click **Import** to begin to process.
34
+
35
+Netdata takes the data embedded inside the snapshot and re-creates a static replica on your dashboard. When the import
36
+finishes, you're free to move around and examine the charts.
37
+
38
+Some caveats and tips to keep in mind:
39
+
40
+- Only metrics in the export timeframe are available to you. If you zoom out or pan through time, you'll see the
41
+ beginning and end of the snapshot.
42
+- Charts won't update with new inforamtion, as you're looking at a static replica, not the live dashboard.
43
+- The import is only temporary. Reload your browser tab to return to your node's real-time dashboard.
44
+
45
+## Export a snapshot
46
+
47
+To export a snapshot, first pan/zoom any chart to an appropriate _visible timeframe_. The export snapshot will only
48
+contain the metrics you see in charts, so choose the most relevant timeframe.
49
+
50
+Next, click on the **export** icon 
52
+in the top panel.
53
+
54
+Select the metrics resolution to export. The default is 1-second, equal to how often Netdata collects and stores
55
+metrics. Lowering the resolution will reduce the number of data points, and thus the snapshot's overall size.
56
+
57
+Edit the snapshot file name and select your desired compression method. Click on **Export**. When the export is
58
+complete, your browser will prompt you to save the `.snapshot` file to your machine.
59
+
60
+## Print a snapshot
61
+
62
+To print a snapshot, click on the **print** icon 
64
+in the top panel.
65
+
66
+When you click **Print**, Netdata opens a new window to render every chart. This might take some time. When finished,
67
+Netdata opens a browser print dialog for you to save to PDF or print.
68
+
69
+## What's next?
70
+
71
+Now that you understand snapshots, now is a good time to delve deeper into some of the dashboard's lesser-known
72
+features, such as [customization](/docs/dashboard/customize.mdx) or [building new, custom
73
+dashboards](/web/gui/custom/README.md).
74
+
75
+### Further reading & related information
76
+
77
+- Dashboard
78
+ - [How the dashboard works](/docs/dashboard/how-dashboard-works.mdx)
79
+ - [Interact with charts](/docs/dashboard/interact-charts.mdx)
80
+ - [Chart dimensions, contexts, and families](/docs/dashboard/dimensions-contexts-families.mdx)
81
+ - [Select timeframes to visualize](/docs/dashboard/select-timeframes.mdx)
82
+ - **[Import, export, and print a snapshot](/docs/dashboard/import-export-print-snapshot.mdx)**
83
+ - [Customize the standard dashboard](/docs/dashboard/customize.mdx)
\ No newline at end of file
docs/dashboard/interact-charts.mdx
+10
@@ -125,3 +125,13 @@ If you feel comfortable with the [dashboard](/docs/dashboard/how-dashboard-works
125
recommend moving on to learning about [configuration](/docs/configure/nodes.md). While Netdata doesn't _require_ a
126
complicated setup process or a query language to create charts, there are a lot of ways to tweak the experience to match
127
your needs.
128
+
129
+### Further reading & related information
130
+
131
+- Dashboard
132
+ - [How the dashboard works](/docs/dashboard/how-dashboard-works.mdx)
133
+ - **[Interact with charts](/docs/dashboard/interact-charts.mdx)**
134
+ - [Chart dimensions, contexts, and families](/docs/dashboard/dimensions-contexts-families.mdx)
135
+ - [Select timeframes to visualize](/docs/dashboard/select-timeframes.mdx)
136
+ - [Import, export, and print a snapshot](/docs/dashboard/import-export-print-snapshot.mdx)
137
+ - [Customize the standard dashboard](/docs/dashboard/customize.mdx)
docs/dashboard/select-timeframes.mdx
+12
-6
@@ -67,13 +67,19 @@ depth of historical metrics.
67
68
## What's next?
69
70
-<!-- We recommend you dive deeper into some additional dashboard features, such as [import/exporting
71
-snapshots](/docs/dashboards/import-export-snapshots.mdx) or
72
-[customization](/docs/dashboards/customize-standard-dashboard.mdx). -->
73
-
70
+One useful next step after selecting a timeframe is [exporting the
71
+metrics](/docs/dashboard/import-export-print-snapshot.mdx) into a snapshot file, which can then be shared and imported
72
+into any other Netdata dashboard.
73
74
+There are also many ways to [customize](/docs/dashboard/customize.mdx) the standard dashboard experience, from changing
75
+the theme to editing the text that accompanies every section of charts.
76
77
### Further reading & related information
78
78
-- [Interact with charts](/docs/dashboard/interact-charts.mdx)
79
-- [Database engine reference](/database/engine/README.md)
79
+- Dashboard
80
+ - [How the dashboard works](/docs/dashboard/how-dashboard-works.mdx)
81
+ - [Interact with charts](/docs/dashboard/interact-charts.mdx)
82
+ - [Chart dimensions, contexts, and families](/docs/dashboard/dimensions-contexts-families.mdx)
83
+ - **[Select timeframes to visualize](/docs/dashboard/select-timeframes.mdx)**
84
+ - [Import, export, and print a snapshot](/docs/dashboard/import-export-print-snapshot.mdx)
85
+ - [Customize the standard dashboard](/docs/dashboard/customize.mdx)