mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
OpenTsdb: Migrate Config Editor to React (#20808)
This commit is contained in:
parent
64916cd7a9
commit
aa9d00d019
@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
import { DataSourceHttpSettings } from '@grafana/ui';
|
||||
import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
|
||||
import { OpenTsdbDetails } from './OpenTsdbDetails';
|
||||
import { OpenTsdbOptions } from '../types';
|
||||
|
||||
export const ConfigEditor = (props: DataSourcePluginOptionsEditorProps<OpenTsdbOptions>) => {
|
||||
const { options, onOptionsChange } = props;
|
||||
|
||||
return (
|
||||
<>
|
||||
<DataSourceHttpSettings
|
||||
defaultUrl="http://localhost:4242"
|
||||
dataSourceConfig={options}
|
||||
onChange={onOptionsChange}
|
||||
/>
|
||||
<OpenTsdbDetails value={options} onChange={onOptionsChange} />
|
||||
</>
|
||||
);
|
||||
};
|
@ -0,0 +1,60 @@
|
||||
import React from 'react';
|
||||
import { FormLabel, Select } from '@grafana/ui';
|
||||
import { DataSourceSettings, SelectableValue } from '@grafana/data';
|
||||
import { OpenTsdbOptions } from '../types';
|
||||
|
||||
const tsdbVersions = [
|
||||
{ label: '<=2.1', value: 1 },
|
||||
{ label: '==2.2', value: 2 },
|
||||
{ label: '==2.3', value: 3 },
|
||||
];
|
||||
|
||||
const tsdbResolutions = [
|
||||
{ label: 'second', value: 1 },
|
||||
{ label: 'millisecond', value: 2 },
|
||||
];
|
||||
|
||||
interface Props {
|
||||
value: DataSourceSettings<OpenTsdbOptions>;
|
||||
onChange: (value: DataSourceSettings<OpenTsdbOptions>) => void;
|
||||
}
|
||||
|
||||
export const OpenTsdbDetails = (props: Props) => {
|
||||
const { onChange, value } = props;
|
||||
|
||||
return (
|
||||
<>
|
||||
<h5>OpenTSDB settings</h5>
|
||||
<div className="gf-form">
|
||||
<FormLabel width={7}>Version</FormLabel>
|
||||
<Select
|
||||
options={tsdbVersions}
|
||||
value={tsdbVersions.find(version => version.value === value.jsonData.tsdbVersion) ?? tsdbVersions[0]}
|
||||
onChange={onChangeHandler('tsdbVersion', value, onChange)}
|
||||
/>
|
||||
</div>
|
||||
<div className="gf-form">
|
||||
<FormLabel width={7}>Resolution</FormLabel>
|
||||
<Select
|
||||
options={tsdbResolutions}
|
||||
value={
|
||||
tsdbResolutions.find(resolution => resolution.value === value.jsonData.tsdbResolution) ?? tsdbResolutions[0]
|
||||
}
|
||||
onChange={onChangeHandler('tsdbResolution', value, onChange)}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const onChangeHandler = (key: keyof OpenTsdbOptions, value: Props['value'], onChange: Props['onChange']) => (
|
||||
newValue: SelectableValue
|
||||
) => {
|
||||
onChange({
|
||||
...value,
|
||||
jsonData: {
|
||||
...value.jsonData,
|
||||
[key]: newValue.value,
|
||||
},
|
||||
});
|
||||
};
|
@ -1,22 +0,0 @@
|
||||
export class OpenTsConfigCtrl {
|
||||
static templateUrl = 'public/app/plugins/datasource/opentsdb/partials/config.html';
|
||||
current: any;
|
||||
|
||||
/** @ngInject */
|
||||
constructor($scope: any) {
|
||||
this.current.jsonData = this.current.jsonData || {};
|
||||
this.current.jsonData.tsdbVersion = this.current.jsonData.tsdbVersion || 1;
|
||||
this.current.jsonData.tsdbResolution = this.current.jsonData.tsdbResolution || 1;
|
||||
}
|
||||
|
||||
tsdbVersions = [
|
||||
{ name: '<=2.1', value: 1 },
|
||||
{ name: '==2.2', value: 2 },
|
||||
{ name: '==2.3', value: 3 },
|
||||
];
|
||||
|
||||
tsdbResolutions = [
|
||||
{ name: 'second', value: 1 },
|
||||
{ name: 'millisecond', value: 2 },
|
||||
];
|
||||
}
|
@ -1,10 +1,11 @@
|
||||
import angular, { IQService } from 'angular';
|
||||
import _ from 'lodash';
|
||||
import { dateMath, DataQueryRequest } from '@grafana/data';
|
||||
import { dateMath, DataQueryRequest, DataSourceApi } from '@grafana/data';
|
||||
import { BackendSrv } from 'app/core/services/backend_srv';
|
||||
import { TemplateSrv } from 'app/features/templating/template_srv';
|
||||
import { OpenTsdbOptions, OpenTsdbQuery } from './types';
|
||||
|
||||
export default class OpenTsDatasource {
|
||||
export default class OpenTsDatasource extends DataSourceApi<OpenTsdbQuery, OpenTsdbOptions> {
|
||||
type: any;
|
||||
url: any;
|
||||
name: any;
|
||||
@ -24,6 +25,7 @@ export default class OpenTsDatasource {
|
||||
private backendSrv: BackendSrv,
|
||||
private templateSrv: TemplateSrv
|
||||
) {
|
||||
super(instanceSettings);
|
||||
this.type = 'opentsdb';
|
||||
this.url = instanceSettings.url;
|
||||
this.name = instanceSettings.name;
|
||||
|
@ -1,14 +1,13 @@
|
||||
import OpenTsDatasource from './datasource';
|
||||
import { OpenTsQueryCtrl } from './query_ctrl';
|
||||
import { OpenTsConfigCtrl } from './config_ctrl';
|
||||
import { DataSourcePlugin } from '@grafana/data';
|
||||
import { ConfigEditor } from './components/ConfigEditor';
|
||||
|
||||
class AnnotationsQueryCtrl {
|
||||
static templateUrl = 'partials/annotations.editor.html';
|
||||
}
|
||||
|
||||
export {
|
||||
OpenTsDatasource as Datasource,
|
||||
OpenTsQueryCtrl as QueryCtrl,
|
||||
OpenTsConfigCtrl as ConfigCtrl,
|
||||
AnnotationsQueryCtrl,
|
||||
};
|
||||
export const plugin = new DataSourcePlugin(OpenTsDatasource)
|
||||
.setQueryCtrl(OpenTsQueryCtrl)
|
||||
.setConfigEditor(ConfigEditor)
|
||||
.setAnnotationQueryCtrl(AnnotationsQueryCtrl);
|
||||
|
@ -1,19 +0,0 @@
|
||||
<datasource-http-settings current="ctrl.current" suggest-url="http://localhost:4242"></datasource-http-settings>
|
||||
|
||||
<h5>OpenTSDB settings</h5>
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-7">
|
||||
Version
|
||||
</span>
|
||||
<span class="gf-form-select-wrapper">
|
||||
<select class="gf-form-input gf-size-auto" ng-model="ctrl.current.jsonData.tsdbVersion" ng-options="v.value as v.name for v in ctrl.tsdbVersions"></select>
|
||||
</span>
|
||||
</div>
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-7">
|
||||
Resolution
|
||||
</span>
|
||||
<span class="gf-form-select-wrapper">
|
||||
<select class="gf-form-input gf-size-auto" ng-model="ctrl.current.jsonData.tsdbResolution" ng-options="v.value as v.name for v in ctrl.tsdbResolutions"></select>
|
||||
</span>
|
||||
</div>
|
8
public/app/plugins/datasource/opentsdb/types.ts
Normal file
8
public/app/plugins/datasource/opentsdb/types.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import { DataQuery, DataSourceJsonData } from '@grafana/data';
|
||||
|
||||
export interface OpenTsdbQuery extends DataQuery {}
|
||||
|
||||
export interface OpenTsdbOptions extends DataSourceJsonData {
|
||||
tsdbVersion: number;
|
||||
tsdbResolution: number;
|
||||
}
|
Loading…
Reference in New Issue
Block a user