diff --git a/public/app/plugins/datasource/mssql/CheatSheet.tsx b/public/app/plugins/datasource/mssql/CheatSheet.tsx new file mode 100644 index 00000000000..73849ec7a31 --- /dev/null +++ b/public/app/plugins/datasource/mssql/CheatSheet.tsx @@ -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 ( +
+

MSSQL cheat sheet

+ Time series: + + Optional: + +

Resultsets of time series queries need to be sorted by time.

+ Table: + + Macros: + +

Example of group by and order by with $__timeGroup:

+ 
+        
+          SELECT $__timeGroup(date_time_col, '1h') AS time, sum(value) as value 

+          FROM yourtable
+          

+          GROUP BY $__timeGroup(date_time_col, '1h')
+          

+          ORDER BY 1
+          

+        
+
+ Or build your own conditionals using these macros which just return the values: + +
+ ); +} + +function getStyles(theme: GrafanaTheme2) { + return { + ulPadding: css({ + margin: theme.spacing(1, 0), + paddingLeft: theme.spacing(5), + }), + }; +} diff --git a/public/app/plugins/datasource/mssql/module.ts b/public/app/plugins/datasource/mssql/module.ts index 1f09748e344..7af8a5a3f2f 100644 --- a/public/app/plugins/datasource/mssql/module.ts +++ b/public/app/plugins/datasource/mssql/module.ts @@ -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) .setQueryEditor(SqlQueryEditor) + .setQueryEditorHelp(CheatSheet) .setConfigEditor(ConfigurationEditor); diff --git a/public/app/plugins/datasource/mysql/CheatSheet.tsx b/public/app/plugins/datasource/mysql/CheatSheet.tsx new file mode 100644 index 00000000000..290b1d8f06b --- /dev/null +++ b/public/app/plugins/datasource/mysql/CheatSheet.tsx @@ -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 ( +
+

MySQL cheat sheet

+ Time series: + + Optional: + +

Resultsets of time series queries need to be sorted by time.

+ Table: + + Macros: + +

Example of group by and order by with $__timeGroup:

+ 
+        
+          $__timeGroupAlias(timestamp_col, '1h'), sum(value_double) as value
+          

+          FROM yourtable
+          

+          GROUP BY 1

+          ORDER BY 1
+          

+        
+
+ Or build your own conditionals using these macros which just return the values: + +
+ ); +} + +function getStyles(theme: GrafanaTheme2) { + return { + ulPadding: css({ + margin: theme.spacing(1, 0), + paddingLeft: theme.spacing(5), + }), + }; +} diff --git a/public/app/plugins/datasource/mysql/module.ts b/public/app/plugins/datasource/mysql/module.ts index c53f5b5594c..c47743252d6 100644 --- a/public/app/plugins/datasource/mysql/module.ts +++ b/public/app/plugins/datasource/mysql/module.ts @@ -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) .setQueryEditor(SqlQueryEditor) + .setQueryEditorHelp(CheatSheet) .setConfigEditor(ConfigurationEditor); diff --git a/public/app/plugins/datasource/postgres/CheatSheet.tsx b/public/app/plugins/datasource/postgres/CheatSheet.tsx new file mode 100644 index 00000000000..b7403ced10c --- /dev/null +++ b/public/app/plugins/datasource/postgres/CheatSheet.tsx @@ -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 ( +
+

PostgreSQL cheat sheet

+ Time series: +
    +
  • + return column named time (UTC in seconds or timestamp) +
    • +
  • return column(s) with numeric datatype as values
    • +
+ Optional: +
    +
  • + return column named metric to represent the series name. +
    • +
  • If multiple value columns are returned the metric column is used as prefix.
    • +
  • If no column named metric is found the column name of the value column is used as series name
    • +
+

Resultsets of time series queries need to be sorted by time.

+ Table: +
    +
  • return any set of columns
    • +
+ Macros: +
    +
  • $__time(column) -> column as "e;time"e;
    • +
  • $__timeEpoch -> extract(epoch from column) as "e;time"e;
    • +
  • + $__timeFilter(column) -> column BETWEEN '2017-04-21T05:01:17Z' AND + '2017-04-21T05:01:17Z' +
    • +
  • $__unixEpochFilter(column) -> column >= 1492750877 AND column <= 1492750877
    • +
  • + $__unixEpochNanoFilter(column) -> column >= 1494410783152415214 AND column <= 1494497183142514872 +
    • +
  • + $__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 +
    • +
  • + $__timeGroupAlias(column,'5m') -> (extract(epoch from column)/300)::bigint*300 AS + "e;time"e; +
    • +
  • $__unixEpochGroup(column,'5m') -> floor(column/300)*300
    • +
  • $__unixEpochGroupAlias(column,'5m') -> floor(column/300)*300 AS "e;time"e;
    • +
+

Example of group by and order by with $__timeGroup:

+ 
+        
+          SELECT $__timeGroup(date_time_col, '1h'), sum(value) as value 

+          FROM yourtable
+          

+          GROUP BY time
+          

+          ORDER BY time
+          

+        
+
+ Or build your own conditionals using these macros which just return the values: +
    +
  • $__timeFrom() -> '2017-04-21T05:01:17Z'
    • +
  • $__timeTo() -> '2017-04-21T05:01:17Z'
    • +
  • $__unixEpochFrom() -> 1492750877
    • +
  • $__unixEpochTo() -> 1492750877
    • +
  • $__unixEpochNanoFrom() -> 1494410783152415214
    • +
  • $__unixEpochNanoTo() -> 1494497183142514872
    • +
+
+ ); +} + +function getStyles(theme: GrafanaTheme2) { + return { + ulPadding: css({ + margin: theme.spacing(1, 0), + paddingLeft: theme.spacing(5), + }), + }; +} diff --git a/public/app/plugins/datasource/postgres/module.ts b/public/app/plugins/datasource/postgres/module.ts index 3a258a85b78..067dd49d07c 100644 --- a/public/app/plugins/datasource/postgres/module.ts +++ b/public/app/plugins/datasource/postgres/module.ts @@ -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