mirror of
https://github.com/grafana/grafana.git
synced 2024-11-25 18:30:41 -06:00
Graphite: Update config editor (#22553)
* update config editor * inlining * move inline styles * removed inline style but emotion not working * fix styles, update types const
This commit is contained in:
Shavonn Brown
GitHub
parent
23d72d25e4
commit
b761679d80
@ -0,0 +1,10 @@
|
||||
import { css } from 'emotion';
|
||||
|
||||
const styles = {
|
||||
helpbtn: css`
|
||||
margin-left: 8px;
|
||||
margin-top: 5px;
|
||||
`,
|
||||
};
|
||||
|
||||
export default styles;
|
||||
@ -1,20 +1,104 @@
|
||||
import React from 'react';
|
||||
import { DataSourceHttpSettings } from '@grafana/ui';
|
||||
import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
|
||||
import { GraphiteDetails } from './GraphiteDetails';
|
||||
import { GraphiteOptions } from '../types';
|
||||
import React, { PureComponent } from 'react';
|
||||
import { DataSourceHttpSettings, FormLabel, Button, Select } from '@grafana/ui';
|
||||
import { DataSourcePluginOptionsEditorProps, onUpdateDatasourceJsonDataOptionSelect } from '@grafana/data';
|
||||
import { GraphiteOptions, GraphiteType } from '../types';
|
||||
import styles from './ConfigEditor.styles';
|
||||
|
||||
export const ConfigEditor = (props: DataSourcePluginOptionsEditorProps<GraphiteOptions>) => {
|
||||
const { options, onOptionsChange } = props;
|
||||
const graphiteVersions = [
|
||||
{ label: '0.9.x', value: '0.9' },
|
||||
{ label: '1.0.x', value: '1.0' },
|
||||
{ label: '1.1.x', value: '1.1' },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<DataSourceHttpSettings
|
||||
defaultUrl="http://localhost:8080"
|
||||
dataSourceConfig={options}
|
||||
onChange={onOptionsChange}
|
||||
/>
|
||||
<GraphiteDetails value={options} onChange={onOptionsChange} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
const graphiteTypes = Object.entries(GraphiteType).map(([label, value]) => ({
|
||||
label,
|
||||
value,
|
||||
}));
|
||||
|
||||
export type Props = DataSourcePluginOptionsEditorProps<GraphiteOptions>;
|
||||
|
||||
interface State {
|
||||
showMetricTankHelp: boolean;
|
||||
}
|
||||
|
||||
export class ConfigEditor extends PureComponent<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
showMetricTankHelp: false,
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const { options, onOptionsChange } = this.props;
|
||||
const { showMetricTankHelp } = this.state;
|
||||
|
||||
const currentVersion =
|
||||
graphiteVersions.find(item => item.value === options.jsonData.graphiteVersion) ?? graphiteVersions[2];
|
||||
|
||||
return (
|
||||
<>
|
||||
<DataSourceHttpSettings
|
||||
defaultUrl="http://localhost:8080"
|
||||
dataSourceConfig={options}
|
||||
onChange={onOptionsChange}
|
||||
/>
|
||||
<h3 className="page-heading">Graphite details</h3>
|
||||
<div className="gf-form-group">
|
||||
<div className="gf-form-inline">
|
||||
<div className="gf-form">
|
||||
<FormLabel tooltip="This option controls what functions are available in the Graphite query editor.">
|
||||
Version
|
||||
</FormLabel>
|
||||
<Select
|
||||
value={currentVersion}
|
||||
options={graphiteVersions}
|
||||
width={8}
|
||||
onChange={onUpdateDatasourceJsonDataOptionSelect(this.props, 'graphiteVersion')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="gf-form-inline">
|
||||
<div className="gf-form">
|
||||
<FormLabel>Type</FormLabel>
|
||||
<Select
|
||||
options={graphiteTypes}
|
||||
value={graphiteTypes.find(type => type.value === options.jsonData.graphiteType)}
|
||||
width={8}
|
||||
onChange={onUpdateDatasourceJsonDataOptionSelect(this.props, 'graphiteType')}
|
||||
/>
|
||||
|
||||
<div className={styles.helpbtn}>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
this.setState((prevState: State) => ({ showMetricTankHelp: !prevState.showMetricTankHelp }))
|
||||
}
|
||||
>
|
||||
Help <i className={showMetricTankHelp ? 'fa fa-caret-down' : 'fa fa-caret-right'} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{showMetricTankHelp && (
|
||||
<div className="grafana-info-box m-t-2">
|
||||
<div className="alert-body">
|
||||
<p>
|
||||
There are different types of Graphite compatible backends. Here you can specify the type you are
|
||||
using. If you are using{' '}
|
||||
<a href="https://github.com/grafana/metrictank" className="pointer" target="_blank">
|
||||
Metrictank
|
||||
</a>{' '}
|
||||
then select that here. This will enable Metrictank specific features like query processing meta data.
|
||||
Metrictank is a multi-tenant timeseries engine for Graphite and friends.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,107 +0,0 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { DataSourceSettings, SelectableValue } from '@grafana/data';
|
||||
import { Button, FormLabel, Select } from '@grafana/ui';
|
||||
import { GraphiteOptions, GraphiteType } from '../types';
|
||||
|
||||
const graphiteVersions = [
|
||||
{ label: '0.9.x', value: '0.9' },
|
||||
{ label: '1.0.x', value: '1.0' },
|
||||
{ label: '1.1.x', value: '1.1' },
|
||||
];
|
||||
|
||||
const graphiteTypes = Object.keys(GraphiteType).map((key: string) => ({
|
||||
label: key,
|
||||
value: (GraphiteType as any)[key],
|
||||
}));
|
||||
|
||||
interface Props {
|
||||
value: DataSourceSettings<GraphiteOptions>;
|
||||
onChange: (value: DataSourceSettings<GraphiteOptions>) => void;
|
||||
}
|
||||
|
||||
interface State {
|
||||
showMetricTankHelp: boolean;
|
||||
}
|
||||
|
||||
export class GraphiteDetails extends PureComponent<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
showMetricTankHelp: false,
|
||||
};
|
||||
}
|
||||
|
||||
onChangeHandler = (key: keyof GraphiteOptions) => (newValue: SelectableValue) => {
|
||||
const { value, onChange } = this.props;
|
||||
onChange({
|
||||
...value,
|
||||
jsonData: {
|
||||
...value.jsonData,
|
||||
[key]: newValue.value,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { value } = this.props;
|
||||
const { showMetricTankHelp } = this.state;
|
||||
|
||||
const currentVersion =
|
||||
graphiteVersions.find(item => item.value === value.jsonData.graphiteVersion) ?? graphiteVersions[2];
|
||||
|
||||
return (
|
||||
<>
|
||||
<h3 className="page-heading">Graphite details</h3>
|
||||
<div className="gf-form-group">
|
||||
<div className="gf-form">
|
||||
<FormLabel tooltip="This option controls what functions are available in the Graphite query editor.">
|
||||
Version
|
||||
</FormLabel>
|
||||
<Select
|
||||
value={currentVersion}
|
||||
options={graphiteVersions}
|
||||
width={8}
|
||||
onChange={this.onChangeHandler('graphiteVersion')}
|
||||
/>
|
||||
</div>
|
||||
<div className="gf-form-inline">
|
||||
<FormLabel>Type</FormLabel>
|
||||
<Select
|
||||
options={graphiteTypes}
|
||||
value={graphiteTypes.find(type => type.value === value.jsonData.graphiteType)}
|
||||
width={8}
|
||||
onChange={this.onChangeHandler('graphiteType')}
|
||||
/>
|
||||
|
||||
<Button
|
||||
style={{ marginLeft: '8px', marginTop: '5px' }}
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
this.setState((prevState: State) => ({ showMetricTankHelp: !prevState.showMetricTankHelp }))
|
||||
}
|
||||
>
|
||||
Help <i className={showMetricTankHelp ? 'fa fa-caret-down' : 'fa fa-caret-right'} />
|
||||
</Button>
|
||||
</div>
|
||||
{showMetricTankHelp && (
|
||||
<div className="grafana-info-box m-t-2">
|
||||
<div className="alert-body">
|
||||
<p>
|
||||
There are different types of Graphite compatible backends. Here you can specify the type you are
|
||||
using. If you are using{' '}
|
||||
<a href="https://github.com/grafana/metrictank" className="pointer" target="_blank">
|
||||
Metrictank
|
||||
</a>{' '}
|
||||
then select that here. This will enable Metrictank specific features like query processing meta data.
|
||||
Metrictank is a multi-tenant timeseries engine for Graphite and friends.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user