Skip to content

N
nexpie-grafana-theme
Commit 165a0471 by Torkel Ödegaard Committed by GitHub
Options

NewPanelEdit: Minor edit mode fixes (#23666) 

* Minor edit mode fixes

* Updated
parent 539edba3
Showing with 58 additions and 70 deletions
packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx
...@@ -17,52 +17,40 @@ interface DataLinksInlineEditorProps { ...@@ -17,52 +17,40 @@ interface DataLinksInlineEditorProps {
export const DataLinksInlineEditor: React.FC<DataLinksInlineEditorProps> = ({ links, onChange, suggestions, data }) => { export const DataLinksInlineEditor: React.FC<DataLinksInlineEditorProps> = ({ links, onChange, suggestions, data }) => {
const theme = useTheme(); const theme = useTheme();
const [editIndex, setEditIndex] = useState(); const [editIndex, setEditIndex] = useState<number | null>(null);
const isEditing = editIndex !== null && editIndex !== undefined;
const styles = getDataLinksInlineEditorStyles(theme); const styles = getDataLinksInlineEditorStyles(theme);
const linksSafe: DataLink[] = links ?? [];
const isEditing = editIndex !== null && linksSafe[editIndex] !== undefined;
const onDataLinkChange = (index: number, link: DataLink) => { const onDataLinkChange = (index: number, link: DataLink) => {
if (!links) { const update = cloneDeep(linksSafe);
return;
}
const update = cloneDeep(links);
update[index] = link; update[index] = link;
onChange(update); onChange(update);
}; };
const onDataLinkAdd = () => { const onDataLinkAdd = () => {
let update = cloneDeep(links); let update = cloneDeep(linksSafe);
if (update) {
update.push({ update.push({
title: '', title: '',
url: '', url: '',
}); });
} else {
update = [
{
title: '',
url: '',
},
];
}
setEditIndex(update.length - 1); setEditIndex(update.length - 1);
onChange(update); onChange(update);
}; };
const onDataLinkRemove = (index: number) => { const onDataLinkRemove = (index: number) => {
if (!links) { const update = cloneDeep(linksSafe);
return;
}
const update = cloneDeep(links);
update.splice(index, 1); update.splice(index, 1);
onChange(update); onChange(update);
}; };
return ( return (
<> <>
{links && links.length > 0 && ( {linksSafe.length > 0 && (
<div className={styles.wrapper}> <div className={styles.wrapper}>
{links.map((l, i) => { {linksSafe.map((l, i) => {
return ( return (
<DataLinksListItem <DataLinksListItem
key={`${l.title}/${i}`} key={`${l.title}/${i}`}
...@@ -79,17 +67,17 @@ export const DataLinksInlineEditor: React.FC<DataLinksInlineEditorProps> = ({ li ...@@ -79,17 +67,17 @@ export const DataLinksInlineEditor: React.FC<DataLinksInlineEditorProps> = ({ li
</div> </div>
)} )}
{isEditing && ( {isEditing && editIndex !== null && (
<Modal <Modal
title="Edit data link" title="Edit link"
isOpen={isEditing} isOpen={true}
onDismiss={() => { onDismiss={() => {
setEditIndex(null); setEditIndex(null);
}} }}
> >
<DataLinkEditorModalContent <DataLinkEditorModalContent
index={editIndex} index={editIndex}
link={links![editIndex]} link={linksSafe[editIndex]}
data={data} data={data}
onChange={onDataLinkChange} onChange={onDataLinkChange}
onClose={() => setEditIndex(null)} onClose={() => setEditIndex(null)}
...@@ -99,7 +87,7 @@ export const DataLinksInlineEditor: React.FC<DataLinksInlineEditorProps> = ({ li ...@@ -99,7 +87,7 @@ export const DataLinksInlineEditor: React.FC<DataLinksInlineEditorProps> = ({ li
)} )}
<Button size="sm" icon="plus" onClick={onDataLinkAdd} variant="secondary"> <Button size="sm" icon="plus" onClick={onDataLinkAdd} variant="secondary">
Add data link Add link
</Button> </Button>
</> </>
); );
......
packages/grafana-ui/src/utils/standardEditors.tsx
...@@ -4,7 +4,6 @@ import { ...@@ -4,7 +4,6 @@ import {
dataLinksOverrideProcessor, dataLinksOverrideProcessor,
FieldConfigPropertyItem, FieldConfigPropertyItem,
FieldType, FieldType,
identityOverrideProcessor,
NumberFieldConfigSettings, NumberFieldConfigSettings,
numberOverrideProcessor, numberOverrideProcessor,
standardEditorsRegistry, standardEditorsRegistry,
...@@ -107,7 +106,6 @@ export const getStandardFieldConfigs = () => { ...@@ -107,7 +106,6 @@ export const getStandardFieldConfigs = () => {
id: 'decimals', id: 'decimals',
path: 'decimals', path: 'decimals',
name: 'Decimals', name: 'Decimals',
description: '',
editor: standardEditorsRegistry.get('number').editor as any, editor: standardEditorsRegistry.get('number').editor as any,
override: standardEditorsRegistry.get('number').editor as any, override: standardEditorsRegistry.get('number').editor as any,
...@@ -128,7 +126,6 @@ export const getStandardFieldConfigs = () => { ...@@ -128,7 +126,6 @@ export const getStandardFieldConfigs = () => {
id: 'thresholds', id: 'thresholds',
path: 'thresholds', path: 'thresholds',
name: 'Thresholds', name: 'Thresholds',
description: '',
editor: standardEditorsRegistry.get('thresholds').editor as any, editor: standardEditorsRegistry.get('thresholds').editor as any,
override: standardEditorsRegistry.get('thresholds').editor as any, override: standardEditorsRegistry.get('thresholds').editor as any,
...@@ -142,7 +139,7 @@ export const getStandardFieldConfigs = () => { ...@@ -142,7 +139,7 @@ export const getStandardFieldConfigs = () => {
], ],
}, },
shouldApply: field => field.type === FieldType.number, shouldApply: field => field.type === FieldType.number,
category: ['Color & thresholds'], category: ['Thresholds'],
getItemsCount: value => (value ? value.steps.length : 0), getItemsCount: value => (value ? value.steps.length : 0),
}; };
...@@ -150,7 +147,6 @@ export const getStandardFieldConfigs = () => { ...@@ -150,7 +147,6 @@ export const getStandardFieldConfigs = () => {
id: 'mappings', id: 'mappings',
path: 'mappings', path: 'mappings',
name: 'Value mappings', name: 'Value mappings',
description: '',
editor: standardEditorsRegistry.get('mappings').editor as any, editor: standardEditorsRegistry.get('mappings').editor as any,
override: standardEditorsRegistry.get('mappings').editor as any, override: standardEditorsRegistry.get('mappings').editor as any,
...@@ -183,8 +179,7 @@ export const getStandardFieldConfigs = () => { ...@@ -183,8 +179,7 @@ export const getStandardFieldConfigs = () => {
const links: FieldConfigPropertyItem<any, DataLink[], StringFieldConfigSettings> = { const links: FieldConfigPropertyItem<any, DataLink[], StringFieldConfigSettings> = {
id: 'links', id: 'links',
path: 'links', path: 'links',
name: 'DataLinks', name: 'Data links',
description: 'Manage date links',
editor: standardEditorsRegistry.get('links').editor as any, editor: standardEditorsRegistry.get('links').editor as any,
override: standardEditorsRegistry.get('links').editor as any, override: standardEditorsRegistry.get('links').editor as any,
process: dataLinksOverrideProcessor, process: dataLinksOverrideProcessor,
...@@ -196,22 +191,22 @@ export const getStandardFieldConfigs = () => { ...@@ -196,22 +191,22 @@ export const getStandardFieldConfigs = () => {
getItemsCount: value => (value ? value.length : 0), getItemsCount: value => (value ? value.length : 0),
}; };
const color: FieldConfigPropertyItem<any, string, StringFieldConfigSettings> = { // const color: FieldConfigPropertyItem<any, string, StringFieldConfigSettings> = {
id: 'color', // id: 'color',
path: 'color', // path: 'color',
name: 'Color', // name: 'Color',
description: 'Customise color', // description: 'Customise color',
editor: standardEditorsRegistry.get('color').editor as any, // editor: standardEditorsRegistry.get('color').editor as any,
override: standardEditorsRegistry.get('color').editor as any, // override: standardEditorsRegistry.get('color').editor as any,
process: identityOverrideProcessor, // process: identityOverrideProcessor,
settings: { // settings: {
placeholder: '-', // placeholder: '-',
}, // },
shouldApply: () => true, // shouldApply: () => true,
category: ['Color & thresholds'], // category: ['Color & thresholds'],
}; // };
return [unit, min, max, decimals, title, noValue, color, thresholds, mappings, links]; return [unit, min, max, decimals, title, noValue, thresholds, mappings, links];
}; };
/** /**
......
public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
...@@ -66,7 +66,7 @@ export const DynamicConfigValueEditor: React.FC<DynamicConfigValueEditorProps> = ...@@ -66,7 +66,7 @@ export const DynamicConfigValueEditor: React.FC<DynamicConfigValueEditorProps> =
} else { } else {
editor = ( editor = (
<div> <div>
<Field label={renderLabel()()} description={item.description}> <Field label={renderLabel()} description={item.description}>
<item.override <item.override
value={property.value} value={property.value}
onChange={value => { onChange={value => {
......
public/app/features/dashboard/components/PanelEditor/FieldConfigEditor.tsx
...@@ -92,6 +92,7 @@ export const OverrideFieldConfigEditor: React.FC<Props> = props => { ...@@ -92,6 +92,7 @@ export const OverrideFieldConfigEditor: React.FC<Props> = props => {
icon="plus" icon="plus"
label="Add override" label="Add override"
size="md" size="md"
variant="secondary"
options={fieldMatchersUI options={fieldMatchersUI
.list() .list()
.map<SelectableValue<string>>(i => ({ label: i.name, value: i.id, description: i.description }))} .map<SelectableValue<string>>(i => ({ label: i.name, value: i.id, description: i.description }))}
...@@ -142,10 +143,11 @@ export const DefaultFieldConfigEditor: React.FC<Props> = ({ data, onChange, conf ...@@ -142,10 +143,11 @@ export const DefaultFieldConfigEditor: React.FC<Props> = ({ data, onChange, conf
); );
const renderEditor = useCallback( const renderEditor = useCallback(
(item: FieldConfigPropertyItem) => { (item: FieldConfigPropertyItem, categoryItemCount: number) => {
if (item.isCustom && item.showIf && !item.showIf(config.defaults.custom)) { if (item.isCustom && item.showIf && !item.showIf(config.defaults.custom)) {
return null; return null;
} }
const defaults = config.defaults; const defaults = config.defaults;
const value = item.isCustom const value = item.isCustom
? defaults.custom ? defaults.custom
...@@ -153,11 +155,14 @@ export const DefaultFieldConfigEditor: React.FC<Props> = ({ data, onChange, conf ...@@ -153,11 +155,14 @@ export const DefaultFieldConfigEditor: React.FC<Props> = ({ data, onChange, conf
: undefined : undefined
: (defaults as any)[item.path]; : (defaults as any)[item.path];
const label = ( const label =
<Label description={item.description} category={item.category?.slice(1)}> categoryItemCount > 1 ? (
{item.name} <Label description={item.description} category={item.category?.slice(1)}>
</Label> {item.name}
); </Label>
) : (
undefined
);
return ( return (
<Field label={label} key={`${item.id}/${item.isCustom}`}> <Field label={label} key={`${item.id}/${item.isCustom}`}>
...@@ -194,11 +199,9 @@ export const DefaultFieldConfigEditor: React.FC<Props> = ({ data, onChange, conf ...@@ -194,11 +199,9 @@ export const DefaultFieldConfigEditor: React.FC<Props> = ({ data, onChange, conf
}} }}
key={`${k}/${i}`} key={`${k}/${i}`}
> >
<> {groupedConfigs[k].map(c => {
{groupedConfigs[k].map(c => { return renderEditor(c, groupedConfigs[k].length);
return renderEditor(c); })}
})}
</>
</OptionsGroup> </OptionsGroup>
); );
})} })}
......
public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx
...@@ -8,7 +8,7 @@ import { css } from 'emotion'; ...@@ -8,7 +8,7 @@ import { css } from 'emotion';
import { PanelOptionsTab } from './PanelOptionsTab'; import { PanelOptionsTab } from './PanelOptionsTab';
import { DashNavButton } from 'app/features/dashboard/components/DashNav/DashNavButton'; import { DashNavButton } from 'app/features/dashboard/components/DashNav/DashNavButton';
export const OptionsPaneContent: React.FC<{ interface Props {
plugin: PanelPlugin; plugin: PanelPlugin;
panel: PanelModel; panel: PanelModel;
data: PanelData; data: PanelData;
...@@ -18,7 +18,9 @@ export const OptionsPaneContent: React.FC<{ ...@@ -18,7 +18,9 @@ export const OptionsPaneContent: React.FC<{
onFieldConfigsChange: (config: FieldConfigSource) => void; onFieldConfigsChange: (config: FieldConfigSource) => void;
onPanelOptionsChanged: (options: any) => void; onPanelOptionsChanged: (options: any) => void;
onPanelConfigChange: (configKey: string, value: any) => void; onPanelConfigChange: (configKey: string, value: any) => void;
}> = ({ }
export const OptionsPaneContent: React.FC<Props> = ({
plugin, plugin,
panel, panel,
data, data,
...@@ -28,7 +30,7 @@ export const OptionsPaneContent: React.FC<{ ...@@ -28,7 +30,7 @@ export const OptionsPaneContent: React.FC<{
onPanelConfigChange, onPanelConfigChange,
onClose, onClose,
dashboard, dashboard,
}) => { }: Props) => {
const theme = useTheme(); const theme = useTheme();
const styles = getStyles(theme); const styles = getStyles(theme);
const [activeTab, setActiveTab] = useState('options'); const [activeTab, setActiveTab] = useState('options');
......
public/app/features/dashboard/components/PanelEditor/OverrideEditor.tsx
...@@ -161,7 +161,7 @@ export const OverrideEditor: React.FC<OverrideEditorProps> = ({ ...@@ -161,7 +161,7 @@ export const OverrideEditor: React.FC<OverrideEditorProps> = ({
<ValuePicker <ValuePicker
label="Add override property" label="Add override property"
variant="secondary" variant="secondary"
size="md" size="sm"
icon="plus" icon="plus"
options={configPropertiesOptions} options={configPropertiesOptions}
onChange={o => { onChange={o => {
......
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