Registry: add a reusable function registry (#17047)

public/app/core/components/PermissionList/AddPermission.tsx

@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import { UserPicker } from 'app/core/components/Select/UserPicker';
 import { TeamPicker, Team } from 'app/core/components/Select/TeamPicker';
-import { Select, SelectOptionItem } from '@grafana/ui';
+import { Select } from '@grafana/ui';
+import { SelectableValue } from '@grafana/data';
 import { User } from 'app/types';
 import {
   dashboardPermissionLevels,
@@ -61,7 +62,7 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
     this.setState({ teamId: team && !Array.isArray(team) ? team.id : 0 });
   };
 
-  onPermissionChanged = (permission: SelectOptionItem<PermissionLevel>) => {
+  onPermissionChanged = (permission: SelectableValue<PermissionLevel>) => {
     this.setState({ permission: permission.value });
   };
 

public/app/core/components/PermissionList/PermissionListItem.tsx

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
-import { Select, SelectOptionItem } from '@grafana/ui';
+import { Select } from '@grafana/ui';
+import { SelectableValue } from '@grafana/data';
 import { dashboardPermissionLevels, DashboardAcl, PermissionLevel } from 'app/types/acl';
 import { FolderInfo } from 'app/types';
 
@@ -39,7 +40,7 @@ interface Props {
 }
 
 export default class PermissionsListItem extends PureComponent<Props> {
-  onPermissionChanged = (option: SelectOptionItem<PermissionLevel>) => {
+  onPermissionChanged = (option: SelectableValue<PermissionLevel>) => {
     this.props.onPermissionChanged(this.props.item, option.value);
   };
 

public/app/core/components/Select/DataSourcePicker.tsx

@@ -2,7 +2,8 @@
 import React, { PureComponent } from 'react';
 
 // Components
-import { Select, SelectOptionItem } from '@grafana/ui';
+import { Select } from '@grafana/ui';
+import { SelectableValue } from '@grafana/data';
 
 // Types
 import { DataSourceSelectItem } from '@grafana/ui';
@@ -28,7 +29,7 @@ export class DataSourcePicker extends PureComponent<Props> {
     super(props);
   }
 
-  onChange = (item: SelectOptionItem<string>) => {
+  onChange = (item: SelectableValue<string>) => {
     const ds = this.props.datasources.find(ds => ds.name === item.value);
     this.props.onChange(ds);
   };

public/app/core/components/Select/MetricSelect.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import _ from 'lodash';
 
-import { Select, SelectOptionItem } from '@grafana/ui';
+import { Select } from '@grafana/ui';
+import { SelectableValue } from '@grafana/data';
 import { Variable } from 'app/types/templates';
 
 export interface Props {
   onChange: (value: string) => void;
-  options: Array<SelectOptionItem<string>>;
+  options: Array<SelectableValue<string>>;
   isSearchable: boolean;
   value: string;
   placeholder?: string;
@@ -15,7 +16,7 @@ export interface Props {
 }
 
 interface State {
-  options: Array<SelectOptionItem<string>>;
+  options: Array<SelectableValue<string>>;
 }
 
 export class MetricSelect extends React.Component<Props, State> {

public/app/features/explore/AdHocFilter.tsx

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
-import { Select, GrafanaTheme, ThemeContext, SelectOptionItem } from '@grafana/ui';
+import { Select, GrafanaTheme, ThemeContext } from '@grafana/ui';
 import { css, cx } from 'emotion';
+import { SelectableValue } from '@grafana/data';
 
 const getStyles = (theme: GrafanaTheme) => ({
   keyValueContainer: css`
@@ -33,7 +34,7 @@ export const AdHocFilter: React.FunctionComponent<Props> = props => {
   const theme = useContext(ThemeContext);
   const styles = getStyles(theme);
 
-  const onChange = (changeType: ChangeType) => (item: SelectOptionItem<string>) => {
+  const onChange = (changeType: ChangeType) => (item: SelectableValue<string>) => {
     const { onKeyChanged, onValueChanged, onOperatorChanged } = props;
     switch (changeType) {
       case ChangeType.Key:

public/app/features/explore/ExploreToolbar.tsx

@@ -3,8 +3,8 @@ import { connect } from 'react-redux';
 import { hot } from 'react-hot-loader';
 
 import { ExploreId, ExploreMode } from 'app/types/explore';
-import { DataSourceSelectItem, SelectOptionItem } from '@grafana/ui';
-import { RawTimeRange, TimeZone, TimeRange, LoadingState } from '@grafana/data';
+import { DataSourceSelectItem } from '@grafana/ui';
+import { RawTimeRange, TimeZone, TimeRange, LoadingState, SelectableValue } from '@grafana/data';
 import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
 import { StoreState } from 'app/types/store';
 import {
@@ -67,8 +67,8 @@ interface StateProps {
   selectedDatasource: DataSourceSelectItem;
   splitted: boolean;
   refreshInterval: string;
-  supportedModeOptions: Array<SelectOptionItem<ExploreMode>>;
-  selectedModeOption: SelectOptionItem<ExploreMode>;
+  supportedModeOptions: Array<SelectableValue<ExploreMode>>;
+  selectedModeOption: SelectableValue<ExploreMode>;
   hasLiveOption: boolean;
   isLive: boolean;
 }
@@ -258,7 +258,7 @@ const mapStateToProps = (state: StoreState, { exploreId }: OwnProps): StateProps
   const hasLiveOption =
     datasourceInstance && datasourceInstance.meta && datasourceInstance.meta.streaming ? true : false;
 
-  const supportedModeOptions: Array<SelectOptionItem<ExploreMode>> = [];
+  const supportedModeOptions: Array<SelectableValue<ExploreMode>> = [];
   let selectedModeOption = null;
   for (const supportedMode of supportedModes) {
     switch (supportedMode) {

public/app/features/teams/TeamMemberRow.test.tsx

@@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
 import { TeamMember, TeamPermissionLevel } from '../../types';
 import { getMockTeamMember } from './__mocks__/teamMocks';
 import { TeamMemberRow, Props } from './TeamMemberRow';
-import { SelectOptionItem } from '@grafana/ui';
+import { SelectableValue } from '@grafana/data';
 
 const setup = (propOverrides?: object) => {
   const props: Props = {
@@ -80,7 +80,7 @@ describe('Functions', () => {
     };
     const { instance } = setup({ member });
     const permission = TeamPermissionLevel.Admin;
-    const item: SelectOptionItem<TeamPermissionLevel> = { value: permission };
+    const item: SelectableValue<TeamPermissionLevel> = { value: permission };
     const expectedTeamMemeber = { ...member, permission };
 
     instance.onPermissionChange(item, member);

public/app/features/teams/TeamMemberRow.tsx

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
-import { DeleteButton, Select, SelectOptionItem } from '@grafana/ui';
+import { DeleteButton, Select } from '@grafana/ui';
+import { SelectableValue } from '@grafana/data';
 
 import { TeamMember, teamsPermissionLevels, TeamPermissionLevel } from 'app/types';
 import { WithFeatureToggle } from 'app/core/components/WithFeatureToggle';
@@ -27,7 +28,7 @@ export class TeamMemberRow extends PureComponent<Props> {
     this.props.removeTeamMember(member.userId);
   }
 
-  onPermissionChange = (item: SelectOptionItem<TeamPermissionLevel>, member: TeamMember) => {
+  onPermissionChange = (item: SelectableValue<TeamPermissionLevel>, member: TeamMember) => {
     const permission = item.value;
     const updatedTeamMember = { ...member, permission };
 

public/app/plugins/datasource/input/InputQueryEditor.tsx

@@ -5,8 +5,8 @@ import React, { PureComponent } from 'react';
 import { InputDatasource, describeDataFrame } from './InputDatasource';
 import { InputQuery, InputOptions } from './types';
 
-import { FormLabel, Select, QueryEditorProps, SelectOptionItem, TableInputCSV } from '@grafana/ui';
-import { DataFrame, toCSV } from '@grafana/data';
+import { FormLabel, Select, QueryEditorProps, TableInputCSV } from '@grafana/ui';
+import { DataFrame, toCSV, SelectableValue } from '@grafana/data';
 
 type Props = QueryEditorProps<InputDatasource, InputQuery, InputOptions>;
 
@@ -30,7 +30,7 @@ export class InputQueryEditor extends PureComponent<Props, State> {
     this.setState({ text });
   }
 
-  onSourceChange = (item: SelectOptionItem<string>) => {
+  onSourceChange = (item: SelectableValue<string>) => {
     const { datasource, query, onChange, onRunQuery } = this.props;
     let data: DataFrame[] | undefined = undefined;
     if (item.value === 'panel') {

public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx

@@ -1,9 +1,6 @@
 // Libraries
 import React, { PureComponent } from 'react';
 
-// Components
-// import { Select, SelectOptionItem } from '@grafana/ui';
-
 // Types
 import { QueryEditorProps } from '@grafana/ui';
 import { LokiDatasource } from '../datasource';
@@ -37,7 +34,7 @@ export class LokiQueryEditor extends PureComponent<Props> {
   //   });
   // };
   //
-  // onFormatChanged = (option: SelectOptionItem) => {
+  // onFormatChanged = (option: SelectableValue) => {
   //   this.props.onChange({
   //     ...this.state.query,
   //     resultFormat: option.value,
@@ -47,7 +44,7 @@ export class LokiQueryEditor extends PureComponent<Props> {
   render() {
     // const { query } = this.state;
     // const { datasource } = this.props;
-    // const formatOptions: SelectOptionItem[] = [
+    // const formatOptions: SelectableValue[] = [
     //   { label: 'Time Series', value: 'time_series' },
     //   { label: 'Table', value: 'table' },
     // ];

public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx

@@ -2,33 +2,32 @@ import _ from 'lodash';
 import React, { PureComponent } from 'react';
 
 // Types
-import { FormLabel, Select, SelectOptionItem, Switch } from '@grafana/ui';
-import { QueryEditorProps, DataSourceStatus } from '@grafana/ui';
+import { FormLabel, Select, Switch, QueryEditorProps, DataSourceStatus } from '@grafana/ui';
+import { SelectableValue } from '@grafana/data';
 
 import { PrometheusDatasource } from '../datasource';
 import { PromQuery, PromOptions } from '../types';
 
 import PromQueryField from './PromQueryField';
 import PromLink from './PromLink';
-
 export type Props = QueryEditorProps<PrometheusDatasource, PromQuery, PromOptions>;
 
-const FORMAT_OPTIONS: Array<SelectOptionItem<string>> = [
+const FORMAT_OPTIONS: Array<SelectableValue<string>> = [
   { label: 'Time series', value: 'time_series' },
   { label: 'Table', value: 'table' },
   { label: 'Heatmap', value: 'heatmap' },
 ];
 
-const INTERVAL_FACTOR_OPTIONS: Array<SelectOptionItem<number>> = _.map([1, 2, 3, 4, 5, 10], (value: number) => ({
+const INTERVAL_FACTOR_OPTIONS: Array<SelectableValue<number>> = _.map([1, 2, 3, 4, 5, 10], (value: number) => ({
   value,
   label: '1/' + value,
 }));
 
 interface State {
   legendFormat: string;
-  formatOption: SelectOptionItem<string>;
+  formatOption: SelectableValue<string>;
   interval: string;
-  intervalFactorOption: SelectOptionItem<number>;
+  intervalFactorOption: SelectableValue<number>;
   instant: boolean;
 }
 
@@ -58,7 +57,7 @@ export class PromQueryEditor extends PureComponent<Props, State> {
     this.query.expr = query.expr;
   };
 
-  onFormatChange = (option: SelectOptionItem<string>) => {
+  onFormatChange = (option: SelectableValue<string>) => {
     this.query.format = option.value;
     this.setState({ formatOption: option }, this.onRunQuery);
   };
@@ -75,7 +74,7 @@ export class PromQueryEditor extends PureComponent<Props, State> {
     this.setState({ interval });
   };
 
-  onIntervalFactorChange = (option: SelectOptionItem<number>) => {
+  onIntervalFactorChange = (option: SelectableValue<number>) => {
     this.query.intervalFactor = option.value;
     this.setState({ intervalFactorOption: option }, this.onRunQuery);
   };

public/app/plugins/datasource/stackdriver/components/Alignments.tsx

@@ -3,12 +3,12 @@ import _ from 'lodash';
 
 import { MetricSelect } from 'app/core/components/Select/MetricSelect';
 import { TemplateSrv } from 'app/features/templating/template_srv';
-import { SelectOptionItem } from '@grafana/ui';
+import { SelectableValue } from '@grafana/data';
 
 export interface Props {
   onChange: (perSeriesAligner: any) => void;
   templateSrv: TemplateSrv;
-  alignOptions: Array<SelectOptionItem<string>>;
+  alignOptions: Array<SelectableValue<string>>;
   perSeriesAligner: string;
 }
 

public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx

@@ -13,8 +13,7 @@ import { Help } from './Help';
 import { StackdriverQuery, MetricDescriptor } from '../types';
 import { getAlignmentPickerData } from '../functions';
 import StackdriverDatasource from '../datasource';
-import { SelectOptionItem } from '@grafana/ui';
-import { TimeSeries } from '@grafana/data';
+import { TimeSeries, SelectableValue } from '@grafana/data';
 
 export interface Props {
   onQueryChange: (target: StackdriverQuery) => void;
@@ -26,7 +25,7 @@ export interface Props {
 }
 
 interface State extends StackdriverQuery {
-  alignOptions: Array<SelectOptionItem<string>>;
+  alignOptions: Array<SelectableValue<string>>;
   lastQuery: string;
   lastQueryError: string;
   [key: string]: any;

public/app/plugins/datasource/testdata/QueryEditor.tsx

@@ -6,7 +6,8 @@ import _ from 'lodash';
 import { getBackendSrv } from '@grafana/runtime';
 
 // Components
-import { FormLabel, Select, SelectOptionItem } from '@grafana/ui';
+import { FormLabel, Select } from '@grafana/ui';
+import { SelectableValue } from '@grafana/data';
 
 // Types
 import { QueryEditorProps } from '@grafana/ui';
@@ -40,7 +41,7 @@ export class QueryEditor extends PureComponent<Props> {
     this.setState({ scenarioList: scenarioList, current: current });
   }
 
-  onScenarioChange = (item: SelectOptionItem<string>) => {
+  onScenarioChange = (item: SelectableValue<string>) => {
     this.props.onChange({
       ...this.props.query,
       scenarioId: item.value,

public/app/plugins/panel/bargauge/types.ts

@@ -1,17 +1,18 @@
-import { VizOrientation, SelectOptionItem, SingleStatBaseOptions } from '@grafana/ui';
+import { VizOrientation, SingleStatBaseOptions } from '@grafana/ui';
 import { standardGaugeFieldOptions } from '../gauge/types';
+import { SelectableValue } from '@grafana/data';
 
 export interface BarGaugeOptions extends SingleStatBaseOptions {
   displayMode: 'basic' | 'lcd' | 'gradient';
 }
 
-export const displayModes: Array<SelectOptionItem<string>> = [
+export const displayModes: Array<SelectableValue<string>> = [
   { value: 'gradient', label: 'Gradient' },
   { value: 'lcd', label: 'Retro LCD' },
   { value: 'basic', label: 'Basic' },
 ];
 
-export const orientationOptions: Array<SelectOptionItem<VizOrientation>> = [
+export const orientationOptions: Array<SelectableValue<VizOrientation>> = [
   { value: VizOrientation.Horizontal, label: 'Horizontal' },
   { value: VizOrientation.Vertical, label: 'Vertical' },
 ];

public/app/plugins/panel/gauge/GaugeMigrations.ts

@@ -1,11 +1,10 @@
-import { Field, getFieldReducers } from '@grafana/data';
-import { PanelModel } from '@grafana/ui';
+import { Field, fieldReducers } from '@grafana/data';
+import { PanelModel, FieldDisplayOptions } from '@grafana/ui';
 import { GaugeOptions } from './types';
 import {
   sharedSingleStatMigrationCheck,
   migrateOldThresholds,
 } from '@grafana/ui/src/components/SingleStatShared/SingleStatBaseOptions';
-import { FieldDisplayOptions } from '@grafana/ui/src/utils/fieldDisplay';
 
 export const gaugePanelMigrationCheck = (panel: PanelModel<GaugeOptions>): Partial<GaugeOptions> => {
   if (!panel.options) {
@@ -33,7 +32,7 @@ export const gaugePanelMigrationCheck = (panel: PanelModel<GaugeOptions>): Parti
 
     // Make sure the stats have a valid name
     if (valueOptions.stat) {
-      fieldOptions.calcs = getFieldReducers([valueOptions.stat]).map(s => s.id);
+      fieldOptions.calcs = [fieldReducers.get(valueOptions.stat).id];
     }
     field.min = old.minValue;
     field.max = old.maxValue;

public/app/plugins/panel/singlestat2/FontSizeEditor.tsx

@@ -2,10 +2,11 @@
 import React, { PureComponent } from 'react';
 
 // Components
-import { FormLabel, Select, PanelOptionsGroup, SelectOptionItem } from '@grafana/ui';
+import { FormLabel, Select, PanelOptionsGroup } from '@grafana/ui';
 
 // Types
 import { SingleStatOptions } from './types';
+import { SelectableValue } from '@grafana/data';
 
 const labelWidth = 6;
 
@@ -20,13 +21,13 @@ const fontSizeOptions = percents.map(v => {
 });
 
 export class FontSizeEditor extends PureComponent<Props> {
-  setPrefixFontSize = (v: SelectOptionItem<string>) =>
+  setPrefixFontSize = (v: SelectableValue<string>) =>
     this.props.onChange({ ...this.props.options, prefixFontSize: v.value });
 
-  setValueFontSize = (v: SelectOptionItem<string>) =>
+  setValueFontSize = (v: SelectableValue<string>) =>
     this.props.onChange({ ...this.props.options, valueFontSize: v.value });
 
-  setPostfixFontSize = (v: SelectOptionItem<string>) =>
+  setPostfixFontSize = (v: SelectableValue<string>) =>
     this.props.onChange({ ...this.props.options, postfixFontSize: v.value });
 
   render() {

public/app/plugins/panel/text2/TextPanelEditor.tsx

@@ -2,19 +2,20 @@
 import React, { PureComponent, ChangeEvent } from 'react';
 
 // Components
-import { PanelEditorProps, PanelOptionsGroup, Select, SelectOptionItem } from '@grafana/ui';
+import { PanelEditorProps, PanelOptionsGroup, Select } from '@grafana/ui';
+import { SelectableValue } from '@grafana/data';
 
 // Types
 import { TextOptions, TextMode } from './types';
 
 export class TextPanelEditor extends PureComponent<PanelEditorProps<TextOptions>> {
-  modes: Array<SelectOptionItem<TextMode>> = [
+  modes: Array<SelectableValue<TextMode>> = [
     { value: 'markdown', label: 'Markdown' },
     { value: 'text', label: 'Text' },
     { value: 'html', label: 'HTML' },
   ];
 
-  onModeChange = (item: SelectOptionItem<TextMode>) =>
+  onModeChange = (item: SelectableValue<TextMode>) =>
     this.props.onOptionsChange({ ...this.props.options, mode: item.value });
 
   onContentChange = (evt: ChangeEvent<HTMLTextAreaElement>) => {