mirror of
https://github.com/grafana/grafana.git
synced 2026-07-30 08:18:10 -05:00
SQL Datasources: Add back help content (#65383)
This commit is contained in:
Zoltán Bedi
@@ -0,0 +1,91 @@
|
||||
import { css } from '@emotion/css';
|
||||
import React from 'react';
|
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data';
|
||||
import { useStyles2 } from '@grafana/ui';
|
||||
|
||||
export function CheatSheet() {
|
||||
const styles = useStyles2(getStyles);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>MSSQL cheat sheet</h2>
|
||||
Time series:
|
||||
<ul className={styles.ulPadding}>
|
||||
<li>
|
||||
return column named time (in UTC), as a unix time stamp or any sql native date data type. You can use the
|
||||
macros below.
|
||||
</li>
|
||||
<li>any other columns returned will be the time point values.</li>
|
||||
</ul>
|
||||
Optional:
|
||||
<ul className={styles.ulPadding}>
|
||||
<li>
|
||||
return column named <i>metric</i> to represent the series name.
|
||||
</li>
|
||||
<li>If multiple value columns are returned the metric column is used as prefix.</li>
|
||||
<li>If no column named metric is found the column name of the value column is used as series name</li>
|
||||
</ul>
|
||||
<p>Resultsets of time series queries need to be sorted by time.</p>
|
||||
Table:
|
||||
<ul className={styles.ulPadding}>
|
||||
<li>return any set of columns</li>
|
||||
</ul>
|
||||
Macros:
|
||||
<ul className={styles.ulPadding}>
|
||||
<li>$__time(column) -> column AS time</li>
|
||||
<li>$__timeEpoch(column) -> DATEDIFF(second, '1970-01-01', column) AS time</li>
|
||||
<li>
|
||||
$__timeFilter(column) -> column BETWEEN '2017-04-21T05:01:17Z' AND
|
||||
'2017-04-21T05:01:17Z'
|
||||
</li>
|
||||
<li>$__unixEpochFilter(column) -> column >= 1492750877 AND column <= 1492750877</li>
|
||||
<li>
|
||||
$__unixEpochNanoFilter(column) -> column >= 1494410783152415214 AND column <= 1494497183142514872
|
||||
</li>
|
||||
<li>
|
||||
$__timeGroup(column, '5m'[, fillvalue]) -> CAST(ROUND(DATEDIFF(second, '1970-01-01',
|
||||
column)/300.0, 0) as bigint)*300 by setting fillvalue grafana will fill in missing values according to the
|
||||
interval fillvalue can be either a literal value, NULL or previous; previous will fill in the previous seen
|
||||
value or NULL if none has been seen yet
|
||||
</li>
|
||||
<li>
|
||||
$__timeGroupAlias(column, '5m'[, fillvalue]) -> CAST(ROUND(DATEDIFF(second,
|
||||
'1970-01-01', column)/300.0, 0) as bigint)*300 AS [time]
|
||||
</li>
|
||||
<li>$__unixEpochGroup(column,'5m') -> FLOOR(column/300)*300</li>
|
||||
<li>$__unixEpochGroupAlias(column,'5m') -> FLOOR(column/300)*300 AS [time]</li>
|
||||
</ul>
|
||||
<p>Example of group by and order by with $__timeGroup:</p>
|
||||
<pre>
|
||||
<code>
|
||||
SELECT $__timeGroup(date_time_col, '1h') AS time, sum(value) as value <br />
|
||||
FROM yourtable
|
||||
<br />
|
||||
GROUP BY $__timeGroup(date_time_col, '1h')
|
||||
<br />
|
||||
ORDER BY 1
|
||||
<br />
|
||||
</code>
|
||||
</pre>
|
||||
Or build your own conditionals using these macros which just return the values:
|
||||
<ul className={styles.ulPadding}>
|
||||
<li>$__timeFrom() -> '2017-04-21T05:01:17Z'</li>
|
||||
<li>$__timeTo() -> '2017-04-21T05:01:17Z'</li>
|
||||
<li>$__unixEpochFrom() -> 1492750877</li>
|
||||
<li>$__unixEpochTo() -> 1492750877</li>
|
||||
<li>$__unixEpochNanoFrom() -> 1494410783152415214</li>
|
||||
<li>$__unixEpochNanoTo() -> 1494497183142514872</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function getStyles(theme: GrafanaTheme2) {
|
||||
return {
|
||||
ulPadding: css({
|
||||
margin: theme.spacing(1, 0),
|
||||
paddingLeft: theme.spacing(5),
|
||||
}),
|
||||
};
|
||||
}
|
||||
@@ -2,10 +2,12 @@ import { DataSourcePlugin } from '@grafana/data';
|
||||
import { SqlQueryEditor } from 'app/features/plugins/sql/components/QueryEditor';
|
||||
import { SQLQuery } from 'app/features/plugins/sql/types';
|
||||
|
||||
import { CheatSheet } from './CheatSheet';
|
||||
import { ConfigurationEditor } from './configuration/ConfigurationEditor';
|
||||
import { MssqlDatasource } from './datasource';
|
||||
import { MssqlOptions } from './types';
|
||||
|
||||
export const plugin = new DataSourcePlugin<MssqlDatasource, SQLQuery, MssqlOptions>(MssqlDatasource)
|
||||
.setQueryEditor(SqlQueryEditor)
|
||||
.setQueryEditorHelp(CheatSheet)
|
||||
.setConfigEditor(ConfigurationEditor);
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
import { css } from '@emotion/css';
|
||||
import React from 'react';
|
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data';
|
||||
import { useStyles2 } from '@grafana/ui';
|
||||
|
||||
export function CheatSheet() {
|
||||
const styles = useStyles2(getStyles);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>MySQL cheat sheet</h2>
|
||||
Time series:
|
||||
<ul className={styles.ulPadding}>
|
||||
<li>
|
||||
return column named time or time_sec (in UTC), as a unix time stamp or any sql native date data type. You can
|
||||
use the macros below.
|
||||
</li>
|
||||
<li>return column(s) with numeric datatype as values</li>
|
||||
</ul>
|
||||
Optional:
|
||||
<ul className={styles.ulPadding}>
|
||||
<li>
|
||||
return column named <i>metric</i> to represent the series name.
|
||||
</li>
|
||||
<li>If multiple value columns are returned the metric column is used as prefix.</li>
|
||||
<li>If no column named metric is found the column name of the value column is used as series name</li>
|
||||
</ul>
|
||||
<p>Resultsets of time series queries need to be sorted by time.</p>
|
||||
Table:
|
||||
<ul className={styles.ulPadding}>
|
||||
<li>return any set of columns</li>
|
||||
</ul>
|
||||
Macros:
|
||||
<ul className={styles.ulPadding}>
|
||||
<li>$__time(column) -> UNIX_TIMESTAMP(column) as time_sec</li>
|
||||
<li>$__timeEpoch(column) -> UNIX_TIMESTAMP(column) as time_sec</li>
|
||||
<li>$__timeFilter(column) -> column BETWEEN FROM_UNIXTIME(1492750877) AND FROM_UNIXTIME(1492750877)</li>
|
||||
<li>$__unixEpochFilter(column) -> time_unix_epoch > 1492750877 AND time_unix_epoch < 1492750877</li>
|
||||
<li>
|
||||
$__unixEpochNanoFilter(column) -> column >= 1494410783152415214 AND column <= 1494497183142514872
|
||||
</li>
|
||||
<li>
|
||||
$__timeGroup(column,'5m'[, fillvalue]) -> cast(cast(UNIX_TIMESTAMP(column)/(300) as signed)*300
|
||||
as signed) by setting fillvalue grafana will fill in missing values according to the interval fillvalue can be
|
||||
either a literal value, NULL or previous; previous will fill in the previous seen value or NULL if none has
|
||||
been seen yet
|
||||
</li>
|
||||
<li>
|
||||
$__timeGroupAlias(column,'5m') -> cast(cast(UNIX_TIMESTAMP(column)/(300) as signed)*300 as
|
||||
signed) AS "e;time"e;
|
||||
</li>
|
||||
<li>$__unixEpochGroup(column,'5m') -> column DIV 300 * 300</li>
|
||||
<li>$__unixEpochGroupAlias(column,'5m') -> column DIV 300 * 300 AS "e;time"e;</li>
|
||||
</ul>
|
||||
<p>Example of group by and order by with $__timeGroup:</p>
|
||||
<pre>
|
||||
<code>
|
||||
$__timeGroupAlias(timestamp_col, '1h'), sum(value_double) as value
|
||||
<br />
|
||||
FROM yourtable
|
||||
<br />
|
||||
GROUP BY 1<br />
|
||||
ORDER BY 1
|
||||
<br />
|
||||
</code>
|
||||
</pre>
|
||||
Or build your own conditionals using these macros which just return the values:
|
||||
<ul className={styles.ulPadding}>
|
||||
<li>$__timeFrom() -> FROM_UNIXTIME(1492750877)</li>
|
||||
<li>$__timeTo() -> FROM_UNIXTIME(1492750877)</li>
|
||||
<li>$__unixEpochFrom() -> 1492750877</li>
|
||||
<li>$__unixEpochTo() -> 1492750877</li>
|
||||
<li>$__unixEpochNanoFrom() -> 1494410783152415214</li>
|
||||
<li>$__unixEpochNanoTo() -> 1494497183142514872</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function getStyles(theme: GrafanaTheme2) {
|
||||
return {
|
||||
ulPadding: css({
|
||||
margin: theme.spacing(1, 0),
|
||||
paddingLeft: theme.spacing(5),
|
||||
}),
|
||||
};
|
||||
}
|
||||
@@ -2,10 +2,12 @@ import { DataSourcePlugin } from '@grafana/data';
|
||||
import { SqlQueryEditor } from 'app/features/plugins/sql/components/QueryEditor';
|
||||
import { SQLQuery } from 'app/features/plugins/sql/types';
|
||||
|
||||
import { CheatSheet } from './CheatSheet';
|
||||
import { MySqlDatasource } from './MySqlDatasource';
|
||||
import { ConfigurationEditor } from './configuration/ConfigurationEditor';
|
||||
import { MySQLOptions } from './types';
|
||||
|
||||
export const plugin = new DataSourcePlugin<MySqlDatasource, SQLQuery, MySQLOptions>(MySqlDatasource)
|
||||
.setQueryEditor(SqlQueryEditor)
|
||||
.setQueryEditorHelp(CheatSheet)
|
||||
.setConfigEditor(ConfigurationEditor);
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
import { css } from '@emotion/css';
|
||||
import React from 'react';
|
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data';
|
||||
import { useStyles2 } from '@grafana/ui';
|
||||
|
||||
export function CheatSheet() {
|
||||
const styles = useStyles2(getStyles);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>PostgreSQL cheat sheet</h2>
|
||||
Time series:
|
||||
<ul className={styles.ulPadding}>
|
||||
<li>
|
||||
return column named <i>time</i> (UTC in seconds or timestamp)
|
||||
</li>
|
||||
<li>return column(s) with numeric datatype as values</li>
|
||||
</ul>
|
||||
Optional:
|
||||
<ul className={styles.ulPadding}>
|
||||
<li>
|
||||
return column named <i>metric</i> to represent the series name.
|
||||
</li>
|
||||
<li>If multiple value columns are returned the metric column is used as prefix.</li>
|
||||
<li>If no column named metric is found the column name of the value column is used as series name</li>
|
||||
</ul>
|
||||
<p>Resultsets of time series queries need to be sorted by time.</p>
|
||||
Table:
|
||||
<ul className={styles.ulPadding}>
|
||||
<li>return any set of columns</li>
|
||||
</ul>
|
||||
Macros:
|
||||
<ul className={styles.ulPadding}>
|
||||
<li>$__time(column) -> column as "e;time"e;</li>
|
||||
<li>$__timeEpoch -> extract(epoch from column) as "e;time"e;</li>
|
||||
<li>
|
||||
$__timeFilter(column) -> column BETWEEN '2017-04-21T05:01:17Z' AND
|
||||
'2017-04-21T05:01:17Z'
|
||||
</li>
|
||||
<li>$__unixEpochFilter(column) -> column >= 1492750877 AND column <= 1492750877</li>
|
||||
<li>
|
||||
$__unixEpochNanoFilter(column) -> column >= 1494410783152415214 AND column <= 1494497183142514872
|
||||
</li>
|
||||
<li>
|
||||
$__timeGroup(column,'5m'[, fillvalue]) -> (extract(epoch from column)/300)::bigint*300 by setting
|
||||
fillvalue grafana will fill in missing values according to the interval fillvalue can be either a literal
|
||||
value, NULL or previous; previous will fill in the previous seen value or NULL if none has been seen yet
|
||||
</li>
|
||||
<li>
|
||||
$__timeGroupAlias(column,'5m') -> (extract(epoch from column)/300)::bigint*300 AS
|
||||
"e;time"e;
|
||||
</li>
|
||||
<li>$__unixEpochGroup(column,'5m') -> floor(column/300)*300</li>
|
||||
<li>$__unixEpochGroupAlias(column,'5m') -> floor(column/300)*300 AS "e;time"e;</li>
|
||||
</ul>
|
||||
<p>Example of group by and order by with $__timeGroup:</p>
|
||||
<pre>
|
||||
<code>
|
||||
SELECT $__timeGroup(date_time_col, '1h'), sum(value) as value <br />
|
||||
FROM yourtable
|
||||
<br />
|
||||
GROUP BY time
|
||||
<br />
|
||||
ORDER BY time
|
||||
<br />
|
||||
</code>
|
||||
</pre>
|
||||
Or build your own conditionals using these macros which just return the values:
|
||||
<ul className={styles.ulPadding}>
|
||||
<li>$__timeFrom() -> '2017-04-21T05:01:17Z'</li>
|
||||
<li>$__timeTo() -> '2017-04-21T05:01:17Z'</li>
|
||||
<li>$__unixEpochFrom() -> 1492750877</li>
|
||||
<li>$__unixEpochTo() -> 1492750877</li>
|
||||
<li>$__unixEpochNanoFrom() -> 1494410783152415214</li>
|
||||
<li>$__unixEpochNanoTo() -> 1494497183142514872</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function getStyles(theme: GrafanaTheme2) {
|
||||
return {
|
||||
ulPadding: css({
|
||||
margin: theme.spacing(1, 0),
|
||||
paddingLeft: theme.spacing(5),
|
||||
}),
|
||||
};
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import { DataSourcePlugin } from '@grafana/data';
|
||||
import { SQLQuery } from 'app/features/plugins/sql/types';
|
||||
|
||||
import { CheatSheet } from './CheatSheet';
|
||||
import { QueryEditor } from './QueryEditor';
|
||||
import { PostgresConfigEditor } from './configuration/ConfigurationEditor';
|
||||
import { PostgresDatasource } from './datasource';
|
||||
@@ -10,4 +11,5 @@ export const plugin = new DataSourcePlugin<PostgresDatasource, SQLQuery, Postgre
|
||||
PostgresDatasource
|
||||
)
|
||||
.setQueryEditor(QueryEditor)
|
||||
.setQueryEditorHelp(CheatSheet)
|
||||
.setConfigEditor(PostgresConfigEditor);
|
||||
|
||||
Reference in New Issue
Block a user