mirror of https://github.com/grafana/grafana
NewPanelEdit: Adding repeating options (#22984)
* NewPanelEdit: Adding repeating options * Added all repeat options * reduce strict null errorspull/21622/head^2
Torkel Ödegaard
6 years ago
committed by
GitHub
parent
57c55f7e16
commit
441e87d4d4
@ -0,0 +1,105 @@ |
||||
import React, { useMemo, FC } from 'react'; |
||||
import { PanelModel } from '../../state'; |
||||
import { SelectableValue } from '@grafana/data'; |
||||
import { Forms, DataLinksInlineEditor } from '@grafana/ui'; |
||||
import { OptionsGroup } from './OptionsGroup'; |
||||
import { getPanelLinksVariableSuggestions } from '../../../panel/panellinks/link_srv'; |
||||
import { getVariables } from '../../../variables/state/selectors'; |
||||
|
||||
export const GeneralPanelOptions: FC<{ |
||||
panel: PanelModel; |
||||
onPanelConfigChange: (configKey: string, value: any) => void; |
||||
}> = ({ panel, onPanelConfigChange }) => { |
||||
const linkVariablesSuggestions = useMemo(() => getPanelLinksVariableSuggestions(), []); |
||||
|
||||
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 })); |
||||
|
||||
return ( |
||||
<div> |
||||
<OptionsGroup title="Panel settings"> |
||||
<Forms.Field label="Panel title"> |
||||
<Forms.Input defaultValue={panel.title} onBlur={e => onPanelConfigChange('title', e.currentTarget.value)} /> |
||||
</Forms.Field> |
||||
<Forms.Field label="Description" description="Panel description supports markdown and links."> |
||||
<Forms.TextArea |
||||
defaultValue={panel.description} |
||||
onBlur={e => onPanelConfigChange('description', e.currentTarget.value)} |
||||
/> |
||||
</Forms.Field> |
||||
<Forms.Field label="Transparent" description="Display panel without background."> |
||||
<Forms.Switch |
||||
value={panel.transparent} |
||||
onChange={e => onPanelConfigChange('transparent', e.currentTarget.checked)} |
||||
/> |
||||
</Forms.Field> |
||||
</OptionsGroup> |
||||
<OptionsGroup title="Panel links"> |
||||
<DataLinksInlineEditor |
||||
links={panel.links} |
||||
onChange={links => onPanelConfigChange('links', links)} |
||||
suggestions={linkVariablesSuggestions} |
||||
data={[]} |
||||
/> |
||||
</OptionsGroup> |
||||
<OptionsGroup title="Panel repeats"> |
||||
<Forms.Field |
||||
label="Repeat by variable" |
||||
description="Repeat this panel for each value in the selected variable. |
||||
This is not visible while in edit mode. You need to go back to dashboard and then update the variable or |
||||
reload the dashboard." |
||||
> |
||||
<Forms.Select |
||||
value={panel.repeat} |
||||
onChange={value => onPanelConfigChange('repeat', value.value)} |
||||
options={variableOptions} |
||||
/> |
||||
</Forms.Field> |
||||
{panel.repeat && ( |
||||
<Forms.Field label="Repeat direction"> |
||||
<Forms.RadioButtonGroup |
||||
options={directionOptions} |
||||
value={panel.repeatDirection || 'h'} |
||||
onChange={value => onPanelConfigChange('repeatDirection', value)} |
||||
/> |
||||
</Forms.Field> |
||||
)} |
||||
|
||||
{panel.repeat && panel.repeatDirection === 'h' && ( |
||||
<Forms.Field label="Max per row"> |
||||
<Forms.Select |
||||
options={maxPerRowOptions} |
||||
value={panel.maxPerRow} |
||||
onChange={value => onPanelConfigChange('maxPerRow', value.value)} |
||||
/> |
||||
</Forms.Field> |
||||
)} |
||||
</OptionsGroup> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
function getVariableOptions(): Array<SelectableValue<string>> { |
||||
const options = getVariables().map((item: any) => { |
||||
return { label: item.name, value: item.name }; |
||||
}); |
||||
|
||||
if (options.length === 0) { |
||||
options.unshift({ |
||||
label: 'No template variables found', |
||||
value: null, |
||||
}); |
||||
} |
||||
|
||||
options.unshift({ |
||||
label: 'Disable repeating', |
||||
value: null, |
||||
}); |
||||
|
||||
return options; |
||||
} |
||||
Loading…
Reference in new issue