mirror of
https://github.com/grafana/grafana.git
synced 2025-08-03 04:22:13 +08:00
47f8717149
* update eslint, tsconfig + esbuild to handle new jsx transform * remove thing that breaks the new jsx transform * remove react imports * adjust grafana-icons build * is this the correct syntax? * try this * well this was much easier than expected... * change grafana-plugin-configs webpack config * fixes * fix lockfile * fix 2 more violations * use path.resolve instead of require.resolve * remove react import * fix react imports * more fixes * remove React import * remove import React from docs * remove another react import
89 lines
3.3 KiB
TypeScript
89 lines
3.3 KiB
TypeScript
import { css } from '@emotion/css';
|
|
|
|
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 "time"</li>
|
|
<li>$__timeEpoch -> extract(epoch from 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]) -> (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
|
|
"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'), 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),
|
|
}),
|
|
};
|
|
}
|