Update sources UI
Nora
parent
0b174bce95
commit
c2778ab95e
|
|
@ -8,116 +8,24 @@ menu:
|
|||
weight: 1
|
||||
---
|
||||
|
||||
|
||||
InfluxDB offers a complete dashboard solution for visualizing your data and monitoring your infrastructure:
|
||||
|
||||
* View [pre-created dashboards](/chronograf/latest/guides/using-precreated-dashboards) from the Host List page. Dashboards are available depending on which Telegraf input plugins you have enabled. These pre-created dashboards cannot be cloned or edited.
|
||||
* Create custom dashboards from scratch by building queries in the Data Explorer, as described [below](#build-a-dashboard).
|
||||
* Import dashboard templates when you add or update a connection in Chronograf. See [Dashboard templates](#dashboard-templates) for details.
|
||||
Like dashboards and buckets, data sources are scoped by organization. When you first access the user interface, you'll be prompted to add a data source. You can also do so anytime using the steps below.
|
||||
|
||||
|
||||
By the end of this guide, you'll be aware of the tools available to you for creating dashboards similar to this example:
|
||||
**To add data to a bucket**:
|
||||
1. Click in the **Organizations** icon in the navigation bar.
|
||||
2. Select the **Buckets** tab.
|
||||
3. Next to the name of a bucket, click **Add Data**.
|
||||
4. Select **Streaming**, **Line Protocol**, or **Scraping** from the data source options.
|
||||
5. Click **Continue**.
|
||||
6. Follow the prompts add your data source.
|
||||
|
||||
|
||||
|
||||
## Requirements
|
||||
|
||||
To perform the tasks in this guide, you must have a working Chronograf instance that is connected to an InfluxDB source.
|
||||
Data is accessed using the Telegraf [system ](https://github.com/influxdata/telegraf/tree/master/plugins/inputs/system) input plugins.
|
||||
For more information, see [Configuring Chronograf](/chronograf/latest/administration/configuration).
|
||||
|
||||
## Build a Dashboard
|
||||
|
||||
Click **Dashboards** in the navigation bar and then click the **Create Dashboard** button.
|
||||
A new dashboard is created and ready to begin adding cells.
|
||||
|
||||
### Step 1: Name your dashboard
|
||||
|
||||
Click **Name This Dashboard** and type a new name. In this guide, "ChronoDash" is used.
|
||||
|
||||
### Step 2: Enter cell editor mode
|
||||
|
||||
In the first cell, titled "Untitled Cell", click **Edit**
|
||||
to open the cell editor mode.
|
||||
|
||||
|
||||
|
||||
### Step 3: Create your query
|
||||
|
||||
Click the **Add a Query** button to create an [InfluxQL](/influxdb/latest/query_language/) query.
|
||||
In query editor mode, use the builder to select from your existing data and allow Chronograf to format the query for you.
|
||||
Alternatively, manually enter and edit a query.
|
||||
Chronograf allows you to move seamlessly between using the builder and manually editing the query; when possible, the interface automatically populates the builder with the information from your raw query.
|
||||
|
||||
For our example, the query builder is used to generate a query that shows the average idle CPU usage grouped by host (in this case, there are three hosts).
|
||||
By default, Chronograf applies the [`MEAN()` function](/influxdb/latest/query_language/functions/#mean) to the data, groups averages into auto-generated time intervals (`:interval:`), and shows data for the past hour (`:dashboardTime:`).
|
||||
Those defaults are configurable using the query builder or by manually editing the query.
|
||||
|
||||
In addition, the time range (`:dashboardTime:`) is [configurable on the dashboard](#step-6-configure-your-dashboard).
|
||||
|
||||
|
||||
|
||||
### Step 4: Choose your visualization type
|
||||
|
||||
Chronograf supports many different [visualization types](/chronograf/latest/guides/visualization-types/). To choose a visualization type, click **Visualization** and select **Step-Plot Graph**.
|
||||
|
||||
|
||||
|
||||
### Step 5: Save your cell
|
||||
Click **Save** (the green checkmark icon) to save your cell.
|
||||
|
||||
{{% note %}}
|
||||
If you navigate away from this page without clicking Save, your work will not be saved.
|
||||
{{% /note %}}
|
||||
|
||||
### Step 6: Configure your dashboard
|
||||
|
||||
#### Customize cells:
|
||||
* You can change the name of the cell from "Untitled Cell" by returning to the cell editor mode, clicking on the name, and renaming it. Remember to save your changes.
|
||||
* **Move** your cell around by clicking its top bar and dragging it around the page
|
||||
* **Resize** your cell by clicking and dragging its bottom right corner
|
||||
|
||||
#### Explore cell data:
|
||||
* **Zoom** in on your cell by clicking and dragging your mouse over the area of interest
|
||||
* **Pan** over your cell data by pressing the shift key and clicking and dragging your mouse over the graph
|
||||
* **Reset** your cell by double-clicking your mouse in the cell window
|
||||
|
||||
{{% note %}}
|
||||
These tips only apply to the line, stacked, step-plot, and line+stat [visualization types](/chronograf/latest/guides/visualization-types/).
|
||||
{{% /note %}}
|
||||
|
||||
#### Configure dashboard-wide settings:
|
||||
* You can change the dashboard's *auto-refresh interval* at the top of the page - the default interval selected is **Every 15 seconds**.
|
||||
* You can also modify the dashboard's *time range* at the top of the page - the default range is **Past 15 minutes**.
|
||||
|
||||
Now, you are free to experiment and complete your dashboard by creating, editing, and repositioning more cells!
|
||||
|
||||
## Dashboard templates
|
||||
|
||||
Select from a variety of dashboard templates to import and customize based on which Telegraf plugins you have enabled, such as the following examples:
|
||||
|
||||
* <img src="/img/chronograf/v1.7/protoboard-kubernetes.png" style="width:100%; max-width:600px;">
|
||||
* <img src="/img/chronograf/v1.7/protoboard-mysql.png" style="width:100%; max-width:600px;">
|
||||
* <img src="/img/chronograf/v1.7/protoboard-system.png" style="width:100%; max-width:600px;">
|
||||
* <img src="/img/chronograf/v1.7/protoboard-vsphere.png" style="width:100%; max-width:600px;">
|
||||
|
||||
**To import dashboard templates:**
|
||||
|
||||
1. From the Configuration page, click **Add Connection** or select an existing connection to edit it.
|
||||
2. In the **InfluxDB Connection** window, enter or verify your connection details and click **Add** or **Update Connection**.
|
||||
3. In the **Dashboards** window, select from the available dashboard templates to import based on which Telegraf plugins you have enabled.
|
||||
|
||||
<img src="/img/chronograf/v1.7/protoboard-select.png" style="width:100%; max-width:500px;">
|
||||
4. Click **Create (x) Dashboards**.
|
||||
5. Edit, clone, or configure the dashboards as needed.
|
||||
|
||||
|
||||
## Extra Tips
|
||||
|
||||
### Full screen mode
|
||||
View your dashboard in full screen mode by clicking on the full screen icon in the top right corner of your dashboard.
|
||||
To exit full screen mode, press the Esc key.
|
||||
|
||||
### Template variables
|
||||
Dashboards support template variables.
|
||||
See the [Dashboard Template Variables](/chronograf/latest/guides/dashboard-template-variables/) guide for more information.
|
||||
**To manage Telegraf configurations**:
|
||||
1. 1. Click in the **Organizations** icon in the navigation bar.
|
||||
2. Select the **Telegraf** tab. A list of existing Telegraf configurations appears.
|
||||
3. To add a new Telegraf configuration:
|
||||
* Click **Create Configuration** in the upper right.
|
||||
* Select the Telegraf plugins you want to use to collect data.
|
||||
* Click **Continue**.
|
||||
* Follow the instructions on the **Listen for Streaming Data** page that appears to complete your configuration.
|
||||
4. To delete a Telegraf configuration, hover over its name in the list and click **Delete**.
|
||||
5. To view details of a Telegraf configuration, hover over its name in the list and click **Download Config**.
|
||||
|
|
|
|||
Loading…
Reference in New Issue