110 lines
3.4 KiB
TypeScript
110 lines
3.4 KiB
TypeScript
import * as React from 'react';
|
|
|
|
import { SelectableValue } from '@grafana/data';
|
|
import { DashboardLink } from '@grafana/schema';
|
|
import { CollapsableSection, TagsInput, Select, Field, Input, Checkbox, Button } from '@grafana/ui';
|
|
|
|
import { LINK_ICON_MAP, NEW_LINK } from './utils';
|
|
|
|
const linkTypeOptions = [
|
|
{ value: 'dashboards', label: 'Dashboards' },
|
|
{ value: 'link', label: 'Link' },
|
|
];
|
|
|
|
const linkIconOptions = Object.keys(LINK_ICON_MAP).map((key) => ({ label: key, value: key }));
|
|
|
|
interface DashboardLinkFormProps {
|
|
link: DashboardLink;
|
|
onUpdate: (link: DashboardLink) => void;
|
|
onGoBack: () => void;
|
|
}
|
|
|
|
export function DashboardLinkForm({ link, onUpdate, onGoBack }: DashboardLinkFormProps) {
|
|
const onTagsChange = (tags: string[]) => {
|
|
onUpdate({ ...link, tags: tags });
|
|
};
|
|
|
|
const onTypeChange = (selectedItem: SelectableValue) => {
|
|
const update = { ...link, type: selectedItem.value };
|
|
|
|
// clear props that are no longe revant for this type
|
|
if (update.type === 'dashboards') {
|
|
update.url = '';
|
|
update.tooltip = '';
|
|
} else {
|
|
update.tags = [];
|
|
}
|
|
|
|
onUpdate(update);
|
|
};
|
|
|
|
const onIconChange = (selectedItem: SelectableValue) => {
|
|
onUpdate({ ...link, icon: selectedItem.value });
|
|
};
|
|
|
|
const onChange = (ev: React.FocusEvent<HTMLInputElement>) => {
|
|
const target = ev.currentTarget;
|
|
onUpdate({
|
|
...link,
|
|
[target.name]: target.type === 'checkbox' ? target.checked : target.value,
|
|
});
|
|
};
|
|
|
|
const isNew = link.title === NEW_LINK.title;
|
|
|
|
return (
|
|
<div style={{ maxWidth: '600px' }}>
|
|
<Field label="Title">
|
|
<Input name="title" id="title" value={link.title} onChange={onChange} autoFocus={isNew} />
|
|
</Field>
|
|
<Field label="Type">
|
|
<Select inputId="link-type-input" value={link.type} options={linkTypeOptions} onChange={onTypeChange} />
|
|
</Field>
|
|
{link.type === 'dashboards' && (
|
|
<>
|
|
<Field label="With tags">
|
|
<TagsInput tags={link.tags} onChange={onTagsChange} />
|
|
</Field>
|
|
</>
|
|
)}
|
|
{link.type === 'link' && (
|
|
<>
|
|
<Field label="URL">
|
|
<Input name="url" value={link.url} onChange={onChange} />
|
|
</Field>
|
|
<Field label="Tooltip">
|
|
<Input name="tooltip" value={link.tooltip} onChange={onChange} placeholder="Open dashboard" />
|
|
</Field>
|
|
<Field label="Icon">
|
|
<Select value={link.icon} options={linkIconOptions} onChange={onIconChange} />
|
|
</Field>
|
|
</>
|
|
)}
|
|
<CollapsableSection label="Options" isOpen={true}>
|
|
{link.type === 'dashboards' && (
|
|
<Field>
|
|
<Checkbox label="Show as dropdown" name="asDropdown" value={link.asDropdown} onChange={onChange} />
|
|
</Field>
|
|
)}
|
|
<Field>
|
|
<Checkbox label="Include current time range" name="keepTime" value={link.keepTime} onChange={onChange} />
|
|
</Field>
|
|
<Field>
|
|
<Checkbox
|
|
label="Include current template variable values"
|
|
name="includeVars"
|
|
value={link.includeVars}
|
|
onChange={onChange}
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<Checkbox label="Open link in new tab" name="targetBlank" value={link.targetBlank} onChange={onChange} />
|
|
</Field>
|
|
</CollapsableSection>
|
|
<Button variant="secondary" onClick={onGoBack}>
|
|
Back to list
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|