root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 243 Packages Projects Releases Wiki Activity

Docs image updates (#9225) 

* replaced old images and gifs with new ones

* replaced images, changed some text especially for column styles

* replaced and added images and gifs
This commit is contained in:
Patrick O'Carroll 2017-09-13 16:29:53 +02:00 committed by Torkel Ödegaard
parent 85bd1861d6
commit d71456b96f
4 changed files with 40 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/sources/features/datasources/graphite.md
View File

@ -68,6 +68,10 @@ Some functions like aliasByNode support an optional second argument. To add this
You can reference queries by the row “letter” that they’re on (similar to Microsoft Excel). If you add a second query to a graph, you can reference the first query simply by typing in #A. This provides an easy and convenient way to build compounded queries. You can reference queries by the row “letter” that they’re on (similar to Microsoft Excel). If you add a second query to a graph, you can reference the first query simply by typing in #A. This provides an easy and convenient way to build compounded queries.
{{< docs-imagebox img="/img/docs/v45/graphite_nested_queries_still.png" class="docs-image--center"
animated-gif="/img/docs/v45/graphite_nested_queries.gif" >}}
## Point consolidation ## Point consolidation
All Graphite metrics are consolidated so that Graphite doesn't return more data points than there are pixels in the graph. By default, All Graphite metrics are consolidated so that Graphite doesn't return more data points than there are pixels in the graph. By default,

2
docs/sources/features/datasources/mysql.md
View File

@ -58,7 +58,7 @@ If the `Format as` query option is set to `Table` then you can basically do any
Query editor with example query: Query editor with example query:
![](/img/docs/v43/mysql_table_query.png) ![](/img/docs/v45/mysql_table_query.png)
The query: The query:

3
docs/sources/features/datasources/prometheus.md
View File

@ -39,7 +39,8 @@ Name | Description
Open a graph in edit mode by click the title > Edit (or by pressing `e` key while hovering over panel). Open a graph in edit mode by click the title > Edit (or by pressing `e` key while hovering over panel).
![](/img/docs/v43/prometheus_query_editor.png) {{< docs-imagebox img="/img/docs/v45/prometheus_query_editor_still.png" class="docs-image--center"
animated-gif="/img/docs/v45/prometheus_query_editor.gif" >}}
Name | Description Name | Description
------- | -------- ------- | --------

51
docs/sources/features/panels/table_panel.md
View File

@ -23,15 +23,16 @@ To view table panels in action and test different configurations with sample dat
The table panel has many ways to manipulate your data for optimal presentation. The table panel has many ways to manipulate your data for optimal presentation.
<img class="no-shadow" src="/img/docs/v2/table-config2.png"> {{< docs-imagebox img="/img/docs/v45/table_options.png" class="docs-image--center docs-image--no-shadow"
max-width="600px">}}
1. `Data`: Control how your query is transformed into a table. 1. `Data`: Control how your query is transformed into a table.
2. `Table Display`: Table display options. 2. `Paging`: Table display options.
3. `Column Styles`: Column value formatting and display options.
## Data to Table ## Data to Table
<img class="no-shadow" src="/img/docs/v2/table-data-options.png"> {{< docs-imagebox img="/img/docs/v45/table_data_options.png" class="docs-image--no-shadow"
max-width="400px">}}
The data section contains the **To Table Transform (1)**. This is the primary option for how your data/metric The data section contains the **To Table Transform (1)**. This is the primary option for how your data/metric
query should be transformed into a table format. The **Columns (2)** option allows you to select what columns query should be transformed into a table format. The **Columns (2)** option allows you to select what columns
@ -39,38 +40,53 @@ you want in the table. Only applicable for some transforms.
### Time series to rows ### Time series to rows
<img src="/img/docs/v2/table_ts_to_rows2.png"> {{< docs-imagebox img="/img/docs/v45/table_ts_to_rows.png" class="docs-image--no-shadow docs-image--center"
>}}
In the most simple mode you can turn time series to rows. This means you get a `Time`, `Metric` and a `Value` column. Where `Metric` is the name of the time series. In the most simple mode you can turn time series to rows. This means you get a `Time`, `Metric` and a `Value` column. Where `Metric` is the name of the time series.
### Time series to columns ### Time series to columns
![](/img/docs/v2/table_ts_to_columns2.png) {{< docs-imagebox img="/img/docs/v45/table_ts_to_columns.png" class="docs-image--no-shadow docs-image--center"
>}}
This transform allows you to take multiple time series and group them by time. Which will result in the primary column being `Time` and a column for each time series. This transform allows you to take multiple time series and group them by time. Which will result in the primary column being `Time` and a column for each time series.
### Time series aggregations ### Time series aggregations
![](/img/docs/v2/table_ts_to_aggregations2.png) {{< docs-imagebox img="/img/docs/v45/table_ts_to_aggregations.png" class="docs-image--no-shadow docs-image--center"
>}}
This table transformation will lay out your table into rows by metric, allowing columns of `Avg`, `Min`, `Max`, `Total`, `Current` and `Count`. More than one column can be added. This table transformation will lay out your table into rows by metric, allowing columns of `Avg`, `Min`, `Max`, `Total`, `Current` and `Count`. More than one column can be added.
### Annotations ### Annotations
![](/img/docs/v2/table_annotations.png)
{{< docs-imagebox img="/img/docs/v45/table_annotations.png" class="docs-image--no-shadow docs-image--center"
>}}
If you have annotations enabled in the dashboard you can have the table show them. If you configure this If you have annotations enabled in the dashboard you can have the table show them. If you configure this
mode then any queries you have in the metrics tab will be ignored. mode then any queries you have in the metrics tab will be ignored.
### JSON Data ### JSON Data
![](/img/docs/v2/table_json_data.png) {{< docs-imagebox img="/img/docs/v45/table_json_data.png" class="docs-image--center docs-image--no-shadow"
max-width="500px">}}
If you have an Elasticsearch **Raw Document** query or an Elasticsearch query without a `date histogram` use this If you have an Elasticsearch **Raw Document** query or an Elasticsearch query without a `date histogram` use this
transform mode and pick the columns using the **Columns** section. transform mode and pick the columns using the **Columns** section.
![](/img/docs/v2/elastic_raw_doc.png)
{{< docs-imagebox img="/img/docs/v45/elastic_raw_doc.png" class="docs-image--no-shadow docs-image--center"
>}}
## Table Display ## Table Display
<img class="no-shadow" src="/img/docs/v2/table-display.png"> {{< docs-imagebox img="/img/docs/v45/table_paging.png" class="docs-image--no-shadow"
max-width="250px">}}
1. `Pagination (Page Size)`: The table display fields allow you to control The `Pagination` (page size) is the threshold at which the table rows will be broken into pages. For example, if your table had 95 records with a pagination value of 10, your table would be split across 9 pages. 1. `Pagination (Page Size)`: The table display fields allow you to control The `Pagination` (page size) is the threshold at which the table rows will be broken into pages. For example, if your table had 95 records with a pagination value of 10, your table would be split across 9 pages.
2. `Scroll`: The `scroll bar` checkbox toggles the ability to scroll within the panel, when unchecked, the panel height will grow to display all rows. 2. `Scroll`: The `scroll bar` checkbox toggles the ability to scroll within the panel, when unchecked, the panel height will grow to display all rows.
@ -81,13 +97,12 @@ transform mode and pick the columns using the **Columns** section.
The column styles allow you control how dates and numbers are formatted. The column styles allow you control how dates and numbers are formatted.
<img class="no-shadow" src="/img/docs/v2/Column-Options.png"> <img class="no-shadow" src="/img/docs/v45/table_column_styles.png">
1. `Name or regex`: The Name or Regex field controls what columns the rule should be applied to. The regex or name filter will be matched against the column name not against column values. 1. `Name or regex`: The Name or Regex field controls what columns the rule should be applied to. The regex or name filter will be matched against the column name not against column values.
2. `Type`: The three supported types of types are `Number`, `String` and `Date`. 2. `Column Header`: Title for the column, when using a Regex the title can include replacement strings like `$1`.
3. `Title`: Title for the column, when using a Regex the title can include replacement strings like `$1`. 3. `Add column style rule`: Add new column rule.
4. `Format`: Specify date format. Only available when `Type` is set to `Date`. 4. `Thresholds` and `Coloring`: Specify color mode and thresholds limits.
5. `Coloring` and `Thresholds`: Specify color mode and thresholds limits. 5. `Type`: The three supported types of types are `Number`, `String` and `Date`. `Unit` and `Decimals`: Specify unit and decimal precision for numbers.`Format`: Specify date format for dates.
6. `Unit` and `Decimals`: Specify unit and decimal precision for numbers.
7. `Add column style rule`: Add new column rule.