docs: minor fixes to images

docs/sources/features/datasources/influxdb.md

@@ -41,9 +41,7 @@ mode is also more secure as the username & password will never reach the browser
 
 
 ## Query Editor
 ## Query Editor
 
 
-{{< docs-imagebox img="/img/docs/v45/influxdb_query_still.png" class="docs-image--center"
-                  animated-gif="/img/docs/v45/influxdb_query.gif" >}}
-
+{{< docs-imagebox img="/img/docs/v45/influxdb_query_still.png" class="docs-image--block docs-image--no-shadow" animated-gif="/img/docs/v45/influxdb_query.gif" >}}
 
 
 You find the InfluxDB editor in the metrics tab in Graph or Singlestat panel's edit mode. You enter edit mode by clicking the
 You find the InfluxDB editor in the metrics tab in Graph or Singlestat panel's edit mode. You enter edit mode by clicking the
 panel title, then edit. The editor allows you to select metrics and tags.
 panel title, then edit. The editor allows you to select metrics and tags.
@@ -59,10 +57,8 @@ will automatically adjust the filter tag condition to use the InfluxDB regex mat
 
 
 ### Field & Aggregation functions
 ### Field & Aggregation functions
 In the `SELECT` row you can specify what fields and functions you want to use. If you have a
 In the `SELECT` row you can specify what fields and functions you want to use. If you have a
-group by time you need an aggregation function. Some functions like derivative require an aggregation function.
-
-The editor tries simplify and unify this part of the query. For example:
-![](/img/docs/influxdb/select_editor.png)
+group by time you need an aggregation function. Some functions like derivative require an aggregation function. The editor tries simplify and unify this part of the query. For example:<br>
+![](/img/docs/influxdb/select_editor.png)<br>
 
 
 The above will generate the following InfluxDB `SELECT` clause:
 The above will generate the following InfluxDB `SELECT` clause:
 
 

docs/sources/features/datasources/mysql.md

@@ -11,8 +11,7 @@ weight = 7
 
 
 # Using MySQL in Grafana
 # Using MySQL in Grafana
 
 
-> Only available in Grafana v4.3+. This data source is not ready for
-> production use, currently in development (alpha state).
+> Only available in Grafana v4.3+.
 
 
 Grafana ships with a built-in MySQL data source plugin that allow you to query any visualize
 Grafana ships with a built-in MySQL data source plugin that allow you to query any visualize
 data from a MySQL compatible database.
 data from a MySQL compatible database.
@@ -58,8 +57,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/v45/mysql_table_query.png)
-
+{{< docs-imagebox img="/img/docs/v45/mysql_table_query.png" class="docs-image--block" >}}
 
 
 The query:
 The query:
 
 

docs/sources/features/panels/table_panel.md

@@ -12,7 +12,7 @@ weight = 2
 
 
 # Table Panel
 # Table Panel
 
 
-<img src="/assets/img/features/table-panel.png">
+<img class="screenshot" src="/assets/img/features/table-panel.png">
 
 
 The new table panel is very flexible, supporting both multiple modes for time series as well as for
 The new table panel is very flexible, supporting both multiple modes for time series as well as for
 table, annotation and raw JSON data. It also provides date formatting and value formatting and coloring options.
 table, annotation and raw JSON data. It also provides date formatting and value formatting and coloring options.
@@ -23,70 +23,60 @@ 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.
 
 
-{{< 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. `Paging`: Table display options.
 2. `Paging`: Table display options.
 
 
+
 ## Data to Table
 ## Data to Table
 
 
-{{< docs-imagebox img="/img/docs/v45/table_data_options.png" class="docs-image--no-shadow"
-                   max-width="400px">}}
+{{< docs-imagebox img="/img/docs/v45/table_data_options.png" max-width="500px">}}
 
 
 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
 you want in the table. Only applicable for some transforms.
 you want in the table. Only applicable for some transforms.
 
 
-### Time series to rows
+<div class="clearfix"></div>
 
 
-{{< docs-imagebox img="/img/docs/v45/table_ts_to_rows.png" class="docs-image--no-shadow docs-image--center"
-                   >}}
+### Time series to rows
 
 
+{{< docs-imagebox img="/img/docs/v45/table_ts_to_rows.png" class="docs-image--block" >}}
 
 
 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
 
 
-{{< docs-imagebox img="/img/docs/v45/table_ts_to_columns.png" class="docs-image--no-shadow docs-image--center"
-                   >}}
+{{< docs-imagebox img="/img/docs/v45/table_ts_to_columns.png" class="docs-image--block" >}}
 
 
 
 
 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
 
 
-{{< docs-imagebox img="/img/docs/v45/table_ts_to_aggregations.png" class="docs-image--no-shadow docs-image--center"
-                   >}}
+{{< docs-imagebox img="/img/docs/v45/table_ts_to_aggregations.png" class="docs-image--block" >}}
 
 
 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
 
 
-{{< docs-imagebox img="/img/docs/v45/table_annotations.png" class="docs-image--no-shadow docs-image--center"
-                   >}}
+{{< docs-imagebox img="/img/docs/v45/table_annotations.png" class="docs-image--block" >}}
 
 
 
 
 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
-{{< docs-imagebox img="/img/docs/v45/table_json_data.png" class="docs-image--center docs-image--no-shadow"
-                   max-width="500px">}}
 
 
+{{< docs-imagebox img="/img/docs/v45/table_json_data.png" class="docs-image--block" 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.
 
 
 
 
-{{< docs-imagebox img="/img/docs/v45/elastic_raw_doc.png" class="docs-image--no-shadow docs-image--center"
-                   >}}
-
+{{< docs-imagebox img="/img/docs/v45/elastic_raw_doc.png" class="docs-image--block" >}}
 
 
 ## Table Display
 ## Table Display
 
 
-{{< docs-imagebox img="/img/docs/v45/table_paging.png" class="docs-image--no-shadow"
-                   max-width="250px">}}
+{{< docs-imagebox img="/img/docs/v45/table_paging.png" class="docs-image--no-shadow" max-width="350px">}}
 
 
 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.
@@ -97,7 +87,7 @@ 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/v45/table_column_styles.png">
+{{< docs-imagebox img="/img/docs/v45/table_column_styles.png" class="docs-image--no-shadow docs-image--block" >}}
 
 
 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. `Column Header`: Title for the column, when using a Regex the title can include replacement strings like `$1`.
 2. `Column Header`: Title for the column, when using a Regex the title can include replacement strings like `$1`.
@@ -105,4 +95,3 @@ The column styles allow you control how dates and numbers are formatted.
 4. `Thresholds` and `Coloring`: Specify color mode and thresholds limits.
 4. `Thresholds` and `Coloring`: 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.
 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.
 
 
-