import React, { FC, useMemo } from 'react'; import { DashboardModel, PanelModel } from '../../state'; import { FieldConfigSource, PanelData, PanelPlugin, SelectableValue } from '@grafana/data'; import { Counter, DataLinksInlineEditor, Field, Input, RadioButtonGroup, Select, Switch, TextArea } from '@grafana/ui'; import { OptionsGroup } from './OptionsGroup'; import { getPanelLinksVariableSuggestions } from '../../../panel/panellinks/link_srv'; import { getVariables } from '../../../variables/state/selectors'; import { PanelOptionsEditor } from './PanelOptionsEditor'; import { AngularPanelOptions } from './AngularPanelOptions'; interface Props { panel: PanelModel; plugin: PanelPlugin; data: PanelData; dashboard: DashboardModel; onPanelConfigChange: (configKey: string, value: any) => void; onPanelOptionsChanged: (options: any) => void; onFieldConfigsChange: (config: FieldConfigSource) => void; } export const PanelOptionsTab: FC = ({ panel, plugin, data, dashboard, onPanelConfigChange, onPanelOptionsChanged, onFieldConfigsChange, }) => { const elements: JSX.Element[] = []; const linkVariablesSuggestions = useMemo(() => getPanelLinksVariableSuggestions(), []); const panelLinksCount = panel && panel.links ? panel.links.length : 0; const variableOptions = getVariableOptions(); const directionOptions = [ { label: 'Horizontal', value: 'h' }, { label: 'Vertical', value: 'v' }, ]; const maxPerRowOptions = [2, 3, 4, 6, 8, 12].map(value => ({ label: value.toString(), value })); // Fist common panel settings Title, description elements.push( onPanelConfigChange('title', e.currentTarget.value)} />