IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Explore: adds PrometheusExploreQueryEditor (#20195)

Browse Source 
* Explore: updates prom query field styles with flex-grow

* Explore: adds prometheus explore query editor

* Explore: updates step input width in prom explore query editor

* Explore: updates prom explore query editor step field input placeholder to auto

* Explore: updates prom explore query editor to include history

* Explore: updates prom explore query editor, removes unused lodash import

* Explore: updates step spacing in prom explore query editor

* Explore: updates prom explore query editor - moves logic to query field

* Explore: updates prom query field - adds step field with conditional rendering

* Explore: updates promql cheat sheet with step description

* Explore: updates prom cheat sheet  step description

* Explore: updates styles - adds query row break class

* Explore: moves back step markup to PromExploreQueryEditor
This commit is contained in:
Lukas Siatka
2019-12-23 11:42:31 +01:00
committed by David
parent 7e8f4d0b0e
commit 1de24cc929
5 changed files with 128 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
public/app/plugins/datasource/prometheus/components/PromCheatSheet.tsx
View File

@@ -18,20 +18,27 @@ const CHEAT_SHEET_ITEMS = [
expression: 'sort_desc(sum(sum_over_time(ALERTS{alertstate="firing"}[24h])) by (alertname))',
label: 'Sums up the alerts that have been firing over the last 24 hours.',
},
{
title: 'Step',
label:
'Defines the graph resolution using a duration format (15s, 1m, 3h, ...). Small steps create high-resolution graphs but can be slow over larger time ranges. Using a longer step lowers the resolution and smooths the graph by producing fewer datapoints. If no step is given the resolution is calculated automatically.',
},
];
export default (props: ExploreStartPageProps) => (
<div>
<h2>PromQL Cheat Sheet</h2>
{CHEAT_SHEET_ITEMS.map(item => (
<div className="cheat-sheet-item" key={item.expression}>
{CHEAT_SHEET_ITEMS.map((item, index) => (
<div className="cheat-sheet-item" key={index}>
<div className="cheat-sheet-item__title">{item.title}</div>
<div
className="cheat-sheet-item__example"
onClick={e => props.onClickExample({ refId: 'A', expr: item.expression } as DataQuery)}
>
<code>{item.expression}</code>
</div>
{item.expression ? (
<div
className="cheat-sheet-item__example"
onClick={e => props.onClickExample({ refId: 'A', expr: item.expression } as DataQuery)}
>
<code>{item.expression}</code>
</div>
) : null}
<div className="cheat-sheet-item__label">{item.label}</div>
</div>
))}