Skip to content

N
nexpie-grafana-theme
Commit dcfc74ef by Peter Holmberg Committed by GitHub
Options

ReactMigration: Migrate Prometheus config page to React (#20248) 

* add basic components

* adding onchange handler for Prom settings

* move options outside component

* reorder imports

* Add missing setting
parent ba7049dd
Showing with 153 additions and 89 deletions
public/app/plugins/datasource/prometheus/config_ctrl.ts deleted 100644 → 0
export class PrometheusConfigCtrl {
static templateUrl = 'public/app/plugins/datasource/prometheus/partials/config.html';
current: any;
/** @ngInject */
constructor($scope: any) {
this.current.jsonData.httpMethod = this.current.jsonData.httpMethod || 'GET';
}
}
public/app/plugins/datasource/prometheus/configuration/ConfigEditor.tsx 0 → 100644
import React from 'react';
import { DataSourceHttpSettings } from '@grafana/ui';
import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
import { PromSettings } from './PromSettings';
import { PromOptions } from '../types';
export type Props = DataSourcePluginOptionsEditorProps<PromOptions>;
export const ConfigEditor = (props: Props) => {
const { options, onOptionsChange } = props;
return (
<>
<DataSourceHttpSettings
defaultUrl="http://localhost:9090"
dataSourceConfig={options}
onChange={onOptionsChange}
/>
<PromSettings value={options} onChange={onOptionsChange} />
</>
);
};
public/app/plugins/datasource/prometheus/configuration/PromSettings.tsx 0 → 100644
import React, { SyntheticEvent } from 'react';
import { EventsWithValidation, FormField, FormLabel, Input, regexValidation, Select } from '@grafana/ui';
import { DataSourceSettings } from '@grafana/data';
import { PromOptions } from '../types';
const httpOptions = [{ value: 'GET', label: 'GET' }, { value: 'POST', label: 'POST' }];
type Props = {
value: DataSourceSettings<PromOptions>;
onChange: (value: DataSourceSettings<PromOptions>) => void;
};
export const PromSettings = (props: Props) => {
const { value, onChange } = props;
return (
<>
<div className="gf-form-group">
<div className="gf-form-inline">
<div className="gf-form">
<FormField
label="Scrape interval"
labelWidth={13}
placeholder="15s"
inputEl={
<Input
className="width-6"
value={value.jsonData.timeInterval}
spellCheck={false}
onChange={onChangeHandler('timeInterval', value, onChange)}
validationEvents={{
[EventsWithValidation.onBlur]: [
regexValidation(
/^\d+(ms|[Mwdhmsy])$/,
'Value is not valid, you can use number with time unit specifier: y, M, w, d, h, m, s'
),
],
}}
/>
}
tooltip="Set this to your global scrape interval defined in your Prometheus config file. This will be used as a lower limit for the
Prometheus step query parameter."
/>
</div>
</div>
<div className="gf-form-inline">
<div className="gf-form">
<FormField
label="Query timeout"
labelWidth={13}
inputEl={
<Input
className="width-6"
value={value.jsonData.queryTimeout}
onChange={onChangeHandler('queryTimeout', value, onChange)}
spellCheck={false}
placeholder="60s"
validationEvents={{
[EventsWithValidation.onBlur]: [
regexValidation(
/^\d+(ms|[Mwdhmsy])$/,
'Value is not valid, you can use number with time unit specifier: y, M, w, d, h, m, s'
),
],
}}
/>
}
tooltip="Set the Prometheus query timeout."
/>
</div>
</div>
<div className="gf-form">
<FormLabel
width={13}
tooltip="Specify the HTTP Method to query Prometheus. (POST is only available in Prometheus >= v2.1.0)"
>
HTTP Method
</FormLabel>
<Select
options={httpOptions}
value={httpOptions.find(o => o.value === value.jsonData.httpMethod)}
onChange={onChangeHandler('httpMethod', value, onChange)}
width={7}
/>
</div>
</div>
<h3 className="page-heading">Misc</h3>
<div className="gf-form-group">
<div className="gf-form-inline">
<div className="gf-form max-width-30">
<FormField
label="Custom query parameters"
labelWidth={14}
tooltip="Add Custom parameters to Prometheus or Thanos queries."
inputEl={
<Input
className="width-25"
value={value.jsonData.customQueryParameters}
onChange={onChangeHandler('customQueryParameters', value, onChange)}
spellCheck={false}
placeholder="Example: max_source_resolution=5m&timeout=10"
/>
}
/>
</div>
</div>
</div>
</>
);
};
const onChangeHandler = (key: keyof PromOptions, value: Props['value'], onChange: Props['onChange']) => (
event: SyntheticEvent<HTMLInputElement | HTMLSelectElement>
) => {
onChange({
...value,
jsonData: {
...value.jsonData,
[key]: event.currentTarget.value,
},
});
};
public/app/plugins/datasource/prometheus/module.ts
import { DataSourcePlugin } from '@grafana/data';
import { PrometheusDatasource } from './datasource';
import { PromQueryEditor } from './components/PromQueryEditor';
import { PrometheusConfigCtrl } from './config_ctrl';
import { PromQueryEditor } from './components/PromQueryEditor';
import PromCheatSheet from './components/PromCheatSheet';
import PromQueryField from './components/PromQueryField';
import { ConfigEditor } from './configuration/ConfigEditor';
class PrometheusAnnotationsQueryCtrl {
static templateUrl = 'partials/annotations.editor.html';
}
export {
PrometheusDatasource as Datasource,
PromQueryEditor as QueryEditor,
PrometheusConfigCtrl as ConfigCtrl,
PrometheusAnnotationsQueryCtrl as AnnotationsQueryCtrl,
PromQueryField as ExploreQueryField,
PromCheatSheet as ExploreStartPage,
};
export const plugin = new DataSourcePlugin(PrometheusDatasource)
.setQueryCtrl(PromQueryEditor)
.setConfigEditor(ConfigEditor)
.setExploreLogsQueryField(PromQueryField)
.setAnnotationQueryCtrl(PrometheusAnnotationsQueryCtrl)
.setExploreStartPage(PromCheatSheet);
public/app/plugins/datasource/prometheus/partials/config.html deleted 100644 → 0
<datasource-http-settings current="ctrl.current" suggest-url="http://localhost:9090">
</datasource-http-settings>
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-8">Scrape interval</span>
<input
type="text"
class="gf-form-input width-8 gf-form-input--has-help-icon"
ng-model="ctrl.current.jsonData.timeInterval"
spellcheck='false'
placeholder="15s"
ng-pattern="/^\d+[Mwdhmsy]$/"
></input>
<info-popover mode="right-absolute">
Set this to your global scrape interval defined in your Prometheus config file. This will be used as a lower limit for the
Prometheus step query parameter.
</info-popover>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-8">Query timeout</span>
<input
type="text"
class="gf-form-input width-8 gf-form-input--has-help-icon"
ng-model="ctrl.current.jsonData.queryTimeout"
spellcheck="false"
placeholder="60s"
ng-pattern="/^\d+[Mwdhmsy]$/"
></input>
<info-popover mode="right-absolute">
Set the Prometheus query timeout.
</info-popover>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-8">HTTP Method</label>
<div class="gf-form-select-wrapper width-8 gf-form-select-wrapper--has-help-icon">
<select class="gf-form-input" ng-model="ctrl.current.jsonData.httpMethod" ng-options="method for method in ['GET', 'POST']"></select>
<info-popover mode="right-absolute">
Specify the HTTP Method to query Prometheus. (POST is only available in Prometheus >= v2.1.0)
</info-popover>
</div>
</div>
</div>
<h3 class="page-heading">Misc</h3>
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form max-width-30">
<span class="gf-form-label width-13">Custom query parameters</span>
<input
type="text"
class="gf-form-input gf-form-input--has-help-icon"
ng-model="ctrl.current.jsonData.customQueryParameters"
spellcheck="false"
placeholder="Example: max_source_resolution=5m&timeout=10"
></input>
<info-popover mode="right-absolute">
Add Custom parameters to Prometheus or Thanos queries.
</info-popover>
</div>
</div>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment