mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -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 React, { PureComponent } from 'react';
|
||||||
import { DataSourceHttpSettings } from '@grafana/ui';
|
import { DataSourceHttpSettings, FormLabel, Button, Select } from '@grafana/ui';
|
||||||
import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
|
import { DataSourcePluginOptionsEditorProps, onUpdateDatasourceJsonDataOptionSelect } from '@grafana/data';
|
||||||
import { GraphiteDetails } from './GraphiteDetails';
|
import { GraphiteOptions, GraphiteType } from '../types';
|
||||||
import { GraphiteOptions } from '../types';
|
import styles from './ConfigEditor.styles';
|
||||||
|
|
||||||
export const ConfigEditor = (props: DataSourcePluginOptionsEditorProps<GraphiteOptions>) => {
|
const graphiteVersions = [
|
||||||
const { options, onOptionsChange } = props;
|
{ label: '0.9.x', value: '0.9' },
|
||||||
|
{ label: '1.0.x', value: '1.0' },
|
||||||
|
{ label: '1.1.x', value: '1.1' },
|
||||||
|
];
|
||||||
|
|
||||||
return (
|
const graphiteTypes = Object.entries(GraphiteType).map(([label, value]) => ({
|
||||||
<>
|
label,
|
||||||
<DataSourceHttpSettings
|
value,
|
||||||
defaultUrl="http://localhost:8080"
|
}));
|
||||||
dataSourceConfig={options}
|
|
||||||
onChange={onOptionsChange}
|
export type Props = DataSourcePluginOptionsEditorProps<GraphiteOptions>;
|
||||||
/>
|
|
||||||
<GraphiteDetails value={options} onChange={onOptionsChange} />
|
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