NewPanelEdit: Fixed missing react keys in list error

pull/23345/head
Torkel Ödegaard 5 years ago
parent 3ec88a013f
commit 09bcdc1020
  1. 15
      public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx
  2. 77
      public/app/features/dashboard/components/PanelEditor/PanelOptionsTab.tsx
  3. 2
      public/app/plugins/panel/table2/TablePanel.tsx
  4. 1
      public/app/plugins/panel/table2/module.tsx

@ -184,11 +184,14 @@ export const TabsBarContent: React.FC<{
</div>
) : (
<>
{tabSelections.map(item => {
return (
<Tab label={item.label} active={activeTab === item.value} onChangeTab={() => setActiveTab(item.value)} />
);
})}
{tabSelections.map(item => (
<Tab
key={item.value}
label={item.label}
active={activeTab === item.value}
onChangeTab={() => setActiveTab(item.value)}
/>
))}
<div className="flex-grow-1" />
</>
)}
@ -219,7 +222,7 @@ const tabSelections: Array<SelectableValue<string>> = [
value: 'options',
},
{
label: 'Data',
label: 'Fields',
value: 'defaults',
},
{

@ -96,49 +96,50 @@ export const PanelOptionsTab: FC<Props> = ({
}
elements.push(
<>
<OptionsGroup title="Panel links" key="panel links" defaultToClosed={true}>
<DataLinksInlineEditor
links={panel.links}
onChange={links => onPanelConfigChange('links', links)}
suggestions={linkVariablesSuggestions}
data={[]}
/>
</OptionsGroup>
<OptionsGroup title="Panel repeats" key="panel repeats" defaultToClosed={true}>
<Forms.Field
label="Repeat by variable"
description="Repeat this panel for each value in the selected variable.
<OptionsGroup title="Panel links" key="panel links" defaultToClosed={true}>
<DataLinksInlineEditor
links={panel.links}
onChange={links => onPanelConfigChange('links', links)}
suggestions={linkVariablesSuggestions}
data={[]}
/>
</OptionsGroup>
);
elements.push(
<OptionsGroup title="Panel repeats" key="panel repeats" defaultToClosed={true}>
<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."
>
>
<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">
<Select
value={panel.repeat}
onChange={value => onPanelConfigChange('repeat', value.value)}
options={variableOptions}
options={maxPerRowOptions}
value={panel.maxPerRow}
onChange={value => onPanelConfigChange('maxPerRow', value.value)}
/>
</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">
<Select
options={maxPerRowOptions}
value={panel.maxPerRow}
onChange={value => onPanelConfigChange('maxPerRow', value.value)}
/>
</Forms.Field>
)}
</OptionsGroup>
</>
)}
</OptionsGroup>
);
return <>{elements}</>;

@ -20,6 +20,6 @@ export class TablePanel extends Component<Props> {
return <div>No Table Data...</div>;
}
return <Table height={height} width={width} data={data.series[0]} noHeader={!options.showHeader} />;
return <Table height={height - 16} width={width} data={data.series[0]} noHeader={!options.showHeader} />;
}
}

@ -15,7 +15,6 @@ export const plugin = new PanelPlugin<Options, CustomFieldConfig>(TablePanel)
min: 20,
max: 300,
},
defaultValue: 1,
})
.addSelect({
id: 'displayMode',

Loading…
Cancel
Save