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

Graphite: Rollup Indicator (#22738)

Browse Source 
* WIP: Rollup indiator progress

* Progress

* Progress, can now open inspector with right tab

* changed type and made inspect

* Showing stats

* Progress

* Progress

* Getting ready for v1

* Added option and fixed some strict nulls

* Updated

* Fixed test
This commit is contained in:
Torkel Ödegaard
2020-03-18 13:00:14 +01:00
committed by GitHub
parent 579abad9cc
commit 044ec40112
21 changed files with 631 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
public/app/plugins/datasource/graphite/configuration/ConfigEditor.tsx
View File

@@ -1,8 +1,11 @@
import React, { PureComponent } from 'react';
import { DataSourceHttpSettings, FormLabel, Button, Select } from '@grafana/ui';
import { DataSourcePluginOptionsEditorProps, onUpdateDatasourceJsonDataOptionSelect } from '@grafana/data';
import { DataSourceHttpSettings, FormLabel, Select, Switch } from '@grafana/ui';
import {
DataSourcePluginOptionsEditorProps,
onUpdateDatasourceJsonDataOptionSelect,
onUpdateDatasourceJsonDataOptionChecked,
} from '@grafana/data';
import { GraphiteOptions, GraphiteType } from '../types';
import styles from './ConfigEditor.styles';
const graphiteVersions = [
{ label: '0.9.x', value: '0.9' },
@@ -17,22 +20,27 @@ const graphiteTypes = Object.entries(GraphiteType).map(([label, value]) => ({
export type Props = DataSourcePluginOptionsEditorProps<GraphiteOptions>;
interface State {
showMetricTankHelp: boolean;
}
export class ConfigEditor extends PureComponent<Props, State> {
export class ConfigEditor extends PureComponent<Props> {
constructor(props: Props) {
super(props);
this.state = {
showMetricTankHelp: false,
};
}
renderTypeHelp = () => {
return (
<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>
);
};
render() {
const { options, onOptionsChange } = this.props;
const { showMetricTankHelp } = this.state;
const currentVersion =
graphiteVersions.find(item => item.value === options.jsonData.graphiteVersion) ?? graphiteVersions[2];
@@ -61,39 +69,25 @@ export class ConfigEditor extends PureComponent<Props, State> {
</div>
<div className="gf-form-inline">
<div className="gf-form">
<FormLabel>Type</FormLabel>
<FormLabel tooltip={this.renderTypeHelp}>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>
{options.jsonData.graphiteType === GraphiteType.Metrictank && (
<div className="gf-form-inline">
<div className="gf-form">
<Switch
label="Rollup indicator"
labelClass={'width-10'}
tooltip="Shows up as an info icon in panel headers when data is aggregated"
checked={options.jsonData.rollupIndicatorEnabled}
onChange={onUpdateDatasourceJsonDataOptionChecked(this.props, 'rollupIndicatorEnabled')}
/>
</div>
</div>
)}