mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Pluggable components from datasource plugins
- 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 datasource
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user