mirror of https://github.com/grafana/grafana
- when instantiating a datasource, the datasource service checks if the plugin module exports Explore components, and if so, attaches them to the datasource - Explore component makes all major internal pluggable from a datasource `exploreComponents` property - Moved Prometheus query field to promehteus datasource and registered it as an exported Explore component - Added new Start page for Explore, also exported from the datasourcepull/13844/head
David Kaltschmidt
7 years ago
parent
b00e709aee
commit
d0776937b5
@ -0,0 +1,35 @@ |
||||
import React from 'react'; |
||||
|
||||
const CHEAT_SHEET_ITEMS = [ |
||||
{ |
||||
title: 'Request Rate', |
||||
expression: 'rate(http_request_total[5m])', |
||||
label: |
||||
'Given an HTTP request counter, this query calculates the per-second average request rate over the last 5 minutes.', |
||||
}, |
||||
{ |
||||
title: '95th Percentile of Request Latencies', |
||||
expression: 'histogram_quantile(0.95, sum(rate(prometheus_http_request_duration_seconds_bucket[5m])) by (le))', |
||||
label: 'Calculates the 95th percentile of HTTP request rate over 5 minute windows.', |
||||
}, |
||||
{ |
||||
title: 'Alerts Firing', |
||||
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.', |
||||
}, |
||||
]; |
||||
|
||||
export default (props: any) => ( |
||||
<div> |
||||
<h1>PromQL Cheat Sheet</h1> |
||||
{CHEAT_SHEET_ITEMS.map(item => ( |
||||
<div className="cheat-sheet-item" key={item.expression}> |
||||
<div className="cheat-sheet-item__title">{item.title}</div> |
||||
<div className="cheat-sheet-item__expression" onClick={e => props.onClickQuery(item.expression)}> |
||||
<code>{item.expression}</code> |
||||
</div> |
||||
<div className="cheat-sheet-item__label">{item.label}</div> |
||||
</div> |
||||
))} |
||||
</div> |
||||
); |
||||
@ -0,0 +1,60 @@ |
||||
import React, { PureComponent } from 'react'; |
||||
import classNames from 'classnames'; |
||||
|
||||
import PromCheatSheet from './PromCheatSheet'; |
||||
|
||||
const TAB_MENU_ITEMS = [ |
||||
{ |
||||
text: 'Start', |
||||
id: 'start', |
||||
icon: 'fa fa-rocket', |
||||
}, |
||||
]; |
||||
|
||||
export default class PromStart extends PureComponent<any, { active: string }> { |
||||
state = { |
||||
active: 'start', |
||||
}; |
||||
|
||||
onClickTab = active => { |
||||
this.setState({ active }); |
||||
}; |
||||
|
||||
render() { |
||||
const { active } = this.state; |
||||
const customCss = ''; |
||||
|
||||
return ( |
||||
<div style={{ margin: '45px 0', border: '1px solid #ddd', borderRadius: 5 }}> |
||||
<div className="page-header-canvas"> |
||||
<div className="page-container"> |
||||
<div className="page-header"> |
||||
<nav> |
||||
<ul className={`gf-tabs ${customCss}`}> |
||||
{TAB_MENU_ITEMS.map((tab, idx) => { |
||||
const tabClasses = classNames({ |
||||
'gf-tabs-link': true, |
||||
active: tab.id === active, |
||||
}); |
||||
|
||||
return ( |
||||
<li className="gf-tabs-item" key={tab.id}> |
||||
<a className={tabClasses} onClick={() => this.onClickTab(tab.id)}> |
||||
<i className={tab.icon} /> |
||||
{tab.text} |
||||
</a> |
||||
</li> |
||||
); |
||||
})} |
||||
</ul> |
||||
</nav> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div className="page-container page-body"> |
||||
{active === 'start' && <PromCheatSheet onClickQuery={this.props.onClickQuery} />} |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
Loading…
Reference in new issue