mirror of https://github.com/grafana/grafana
ReactMigration: Migrate Graphite config page to React (#20444)
* adding configeditor * fix method signature and add state for metrictankhelper * fix onChangeHandler * prettier fix * remove config and fix autoversion * adding optional parameter to make this build * set default version if none specified * Graphite: removed version detectionpull/20747/head
Peter Holmberg
6 years ago
committed by
Torkel Ödegaard
parent
02d7d00560
commit
c5ff7fa580
@ -1,48 +0,0 @@ |
||||
import DatasourceSrv from 'app/features/plugins/datasource_srv'; |
||||
import { GraphiteType } from './types'; |
||||
|
||||
export class GraphiteConfigCtrl { |
||||
static templateUrl = 'public/app/plugins/datasource/graphite/partials/config.html'; |
||||
datasourceSrv: any; |
||||
current: any; |
||||
graphiteTypes: any; |
||||
|
||||
/** @ngInject */ |
||||
constructor($scope: any, datasourceSrv: DatasourceSrv) { |
||||
this.datasourceSrv = datasourceSrv; |
||||
this.current.jsonData = this.current.jsonData || {}; |
||||
this.current.jsonData.graphiteVersion = this.current.jsonData.graphiteVersion || '0.9'; |
||||
this.current.jsonData.graphiteType = this.current.jsonData.graphiteType || GraphiteType.Default; |
||||
this.autoDetectGraphiteVersion(); |
||||
this.graphiteTypes = Object.keys(GraphiteType).map((key: string) => ({ |
||||
name: key, |
||||
value: (GraphiteType as any)[key], |
||||
})); |
||||
} |
||||
|
||||
autoDetectGraphiteVersion() { |
||||
if (!this.current.id) { |
||||
return; |
||||
} |
||||
|
||||
this.datasourceSrv |
||||
.loadDatasource(this.current.name) |
||||
.then((ds: any) => { |
||||
return ds.getVersion(); |
||||
}) |
||||
.then((version: any) => { |
||||
if (!version) { |
||||
return; |
||||
} |
||||
|
||||
this.graphiteVersions.push({ name: version, value: version }); |
||||
this.current.jsonData.graphiteVersion = version; |
||||
}); |
||||
} |
||||
|
||||
graphiteVersions = [ |
||||
{ name: '0.9.x', value: '0.9' }, |
||||
{ name: '1.0.x', value: '1.0' }, |
||||
{ name: '1.1.x', value: '1.1' }, |
||||
]; |
||||
} |
||||
@ -0,0 +1,20 @@ |
||||
import React from 'react'; |
||||
import { DataSourceHttpSettings } from '@grafana/ui'; |
||||
import { DataSourcePluginOptionsEditorProps } from '@grafana/data'; |
||||
import { GraphiteDetails } from './GraphiteDetails'; |
||||
import { GraphiteOptions } from '../types'; |
||||
|
||||
export const ConfigEditor = (props: DataSourcePluginOptionsEditorProps<GraphiteOptions>) => { |
||||
const { options, onOptionsChange } = props; |
||||
|
||||
return ( |
||||
<> |
||||
<DataSourceHttpSettings |
||||
defaultUrl="http://localhost:8080" |
||||
dataSourceConfig={options} |
||||
onChange={onOptionsChange} |
||||
/> |
||||
<GraphiteDetails value={options} onChange={onOptionsChange} /> |
||||
</> |
||||
); |
||||
}; |
||||
@ -0,0 +1,107 @@ |
||||
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> |
||||
</> |
||||
); |
||||
} |
||||
} |
||||
@ -1,14 +1,13 @@ |
||||
import { GraphiteDatasource } from './datasource'; |
||||
import { GraphiteQueryCtrl } from './query_ctrl'; |
||||
import { GraphiteConfigCtrl } from './config_ctrl'; |
||||
import { DataSourcePlugin } from '@grafana/data'; |
||||
import { ConfigEditor } from './configuration/ConfigEditor'; |
||||
|
||||
class AnnotationsQueryCtrl { |
||||
static templateUrl = 'partials/annotations.editor.html'; |
||||
} |
||||
|
||||
export { |
||||
GraphiteDatasource as Datasource, |
||||
GraphiteQueryCtrl as QueryCtrl, |
||||
GraphiteConfigCtrl as ConfigCtrl, |
||||
AnnotationsQueryCtrl, |
||||
}; |
||||
export const plugin = new DataSourcePlugin(GraphiteDatasource) |
||||
.setQueryCtrl(GraphiteQueryCtrl) |
||||
.setConfigEditor(ConfigEditor) |
||||
.setAnnotationQueryCtrl(AnnotationsQueryCtrl); |
||||
|
||||
@ -1,45 +0,0 @@ |
||||
<datasource-http-settings |
||||
current="ctrl.current" |
||||
suggest-url="http://localhost:8080"> |
||||
</datasource-http-settings> |
||||
|
||||
<h3 class="page-heading">Graphite details</h3> |
||||
|
||||
<div class="gf-form-group"> |
||||
<div class="gf-form"> |
||||
<span class="gf-form-label width-8"> |
||||
Version |
||||
<info-popover mode="right-normal" position="top center"> |
||||
This option controls what functions are available in the Graphite query editor. |
||||
</info-popover> |
||||
</span> |
||||
<span class="gf-form-select-wrapper"> |
||||
<select class="gf-form-input gf-size-auto" ng-model="ctrl.current.jsonData.graphiteVersion" ng-options="f.value as f.name for f in ctrl.graphiteVersions"></select> |
||||
</span> |
||||
</div> |
||||
<div class="gf-form-inline"> |
||||
<span class="gf-form-label width-8">Type</span> |
||||
<span class="gf-form-select-wrapper"> |
||||
<select class="gf-form-input gf-size-auto" ng-model="ctrl.current.jsonData.graphiteType" ng-options="f.value as f.name |
||||
for f in ctrl.graphiteTypes"></select> |
||||
</span> |
||||
<div class="gf-form"> |
||||
<label class="gf-form-label query-keyword pointer" ng-click="ctrl.showMetrictankHelp = !ctrl.showMetrictankHelp"> |
||||
Help |
||||
<i class="fa fa-caret-down" ng-show="ctrl.showMetrictankHelp"></i> |
||||
<i class="fa fa-caret-right" ng-hide="ctrl.showMetrictankHelp"> </i> |
||||
</label> |
||||
</div> |
||||
<div ng-if="ctrl.showMetrictankHelp" class="grafana-info-box m-t-2"> |
||||
<div class="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" class="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> |
||||
</div> |
||||
Loading…
Reference in new issue