mirror of https://github.com/grafana/grafana
Canvas: Add actions support (#90677)
Co-authored-by: Leon Sorokin <leeoniya@gmail.com>pull/93082/head^2
Adela Almasan
10 months ago
committed by
GitHub
parent
b89f3f8115
commit
af48d3db1e
@ -0,0 +1,70 @@ |
|||||||
|
import { ScopedVars } from './ScopedVars'; |
||||||
|
import { DataFrame, Field, ValueLinkConfig } from './dataFrame'; |
||||||
|
import { InterpolateFunction } from './panel'; |
||||||
|
import { SelectableValue } from './select'; |
||||||
|
|
||||||
|
export interface Action<T = ActionType.Fetch, TOptions = FetchOptions> { |
||||||
|
type: T; |
||||||
|
title: string; |
||||||
|
options: TOptions; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Processed Action Model. The values are ready to use |
||||||
|
*/ |
||||||
|
export interface ActionModel<T = any> { |
||||||
|
title: string; |
||||||
|
onClick: (event: any, origin?: any) => void; |
||||||
|
} |
||||||
|
|
||||||
|
interface FetchOptions { |
||||||
|
method: HttpRequestMethod; |
||||||
|
url: string; |
||||||
|
body?: string; |
||||||
|
queryParams?: Array<[string, string]>; |
||||||
|
headers?: Array<[string, string]>; |
||||||
|
} |
||||||
|
|
||||||
|
export enum ActionType { |
||||||
|
Fetch = 'fetch', |
||||||
|
} |
||||||
|
|
||||||
|
export enum HttpRequestMethod { |
||||||
|
POST = 'POST', |
||||||
|
PUT = 'PUT', |
||||||
|
GET = 'GET', |
||||||
|
} |
||||||
|
|
||||||
|
export const httpMethodOptions: SelectableValue[] = [ |
||||||
|
{ label: HttpRequestMethod.POST, value: HttpRequestMethod.POST }, |
||||||
|
{ label: HttpRequestMethod.PUT, value: HttpRequestMethod.PUT }, |
||||||
|
{ label: HttpRequestMethod.GET, value: HttpRequestMethod.GET }, |
||||||
|
]; |
||||||
|
|
||||||
|
export const contentTypeOptions: SelectableValue[] = [ |
||||||
|
{ label: 'application/json', value: 'application/json' }, |
||||||
|
{ label: 'text/plain', value: 'text/plain' }, |
||||||
|
{ label: 'application/xml', value: 'application/xml' }, |
||||||
|
{ label: 'application/x-www-form-urlencoded', value: 'application/x-www-form-urlencoded' }, |
||||||
|
]; |
||||||
|
|
||||||
|
export const defaultActionConfig: Action = { |
||||||
|
type: ActionType.Fetch, |
||||||
|
title: '', |
||||||
|
options: { |
||||||
|
url: '', |
||||||
|
method: HttpRequestMethod.POST, |
||||||
|
body: '{}', |
||||||
|
queryParams: [], |
||||||
|
headers: [['Content-Type', 'application/json']], |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
export type ActionsArgs = { |
||||||
|
frame: DataFrame; |
||||||
|
field: Field; |
||||||
|
fieldScopedVars: ScopedVars; |
||||||
|
replaceVariables: InterpolateFunction; |
||||||
|
actions: Action[]; |
||||||
|
config: ValueLinkConfig; |
||||||
|
}; |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
import { ActionModel, Field } from '@grafana/data'; |
||||||
|
|
||||||
|
import { Button, ButtonProps } from '../Button'; |
||||||
|
|
||||||
|
type ActionButtonProps = ButtonProps & { |
||||||
|
action: ActionModel<Field>; |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* @internal |
||||||
|
*/ |
||||||
|
export function ActionButton({ action, ...buttonProps }: ActionButtonProps) { |
||||||
|
return ( |
||||||
|
<Button variant="primary" size="sm" onClick={action.onClick} {...buttonProps}> |
||||||
|
{action.title} |
||||||
|
</Button> |
||||||
|
); |
||||||
|
} |
||||||
|
@ -0,0 +1,185 @@ |
|||||||
|
import { css } from '@emotion/css'; |
||||||
|
import { memo } from 'react'; |
||||||
|
|
||||||
|
import { Action, GrafanaTheme2, httpMethodOptions, HttpRequestMethod, VariableSuggestion } from '@grafana/data'; |
||||||
|
import { Field } from '@grafana/ui/src/components/Forms/Field'; |
||||||
|
import { InlineField } from '@grafana/ui/src/components/Forms/InlineField'; |
||||||
|
import { InlineFieldRow } from '@grafana/ui/src/components/Forms/InlineFieldRow'; |
||||||
|
import { RadioButtonGroup } from '@grafana/ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup'; |
||||||
|
import { JSONFormatter } from '@grafana/ui/src/components/JSONFormatter/JSONFormatter'; |
||||||
|
import { useStyles2 } from '@grafana/ui/src/themes'; |
||||||
|
|
||||||
|
import { HTMLElementType, SuggestionsInput } from '../transformers/suggestionsInput/SuggestionsInput'; |
||||||
|
|
||||||
|
import { ParamsEditor } from './ParamsEditor'; |
||||||
|
|
||||||
|
interface ActionEditorProps { |
||||||
|
index: number; |
||||||
|
value: Action; |
||||||
|
onChange: (index: number, action: Action) => void; |
||||||
|
suggestions: VariableSuggestion[]; |
||||||
|
} |
||||||
|
|
||||||
|
const LABEL_WIDTH = 13; |
||||||
|
|
||||||
|
export const ActionEditor = memo(({ index, value, onChange, suggestions }: ActionEditorProps) => { |
||||||
|
const styles = useStyles2(getStyles); |
||||||
|
|
||||||
|
const onTitleChange = (title: string) => { |
||||||
|
onChange(index, { ...value, title }); |
||||||
|
}; |
||||||
|
|
||||||
|
const onUrlChange = (url: string) => { |
||||||
|
onChange(index, { |
||||||
|
...value, |
||||||
|
options: { |
||||||
|
...value.options, |
||||||
|
url, |
||||||
|
}, |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
const onBodyChange = (body: string) => { |
||||||
|
onChange(index, { |
||||||
|
...value, |
||||||
|
options: { |
||||||
|
...value.options, |
||||||
|
body, |
||||||
|
}, |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
const onMethodChange = (method: HttpRequestMethod) => { |
||||||
|
onChange(index, { |
||||||
|
...value, |
||||||
|
options: { |
||||||
|
...value.options, |
||||||
|
method, |
||||||
|
}, |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
const onQueryParamsChange = (queryParams: Array<[string, string]>) => { |
||||||
|
onChange(index, { |
||||||
|
...value, |
||||||
|
options: { |
||||||
|
...value.options, |
||||||
|
queryParams, |
||||||
|
}, |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
const onHeadersChange = (headers: Array<[string, string]>) => { |
||||||
|
onChange(index, { |
||||||
|
...value, |
||||||
|
options: { |
||||||
|
...value.options, |
||||||
|
headers, |
||||||
|
}, |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
const renderJSON = (data = '{}') => { |
||||||
|
try { |
||||||
|
const json = JSON.parse(data); |
||||||
|
return <JSONFormatter json={json} />; |
||||||
|
} catch (error) { |
||||||
|
if (error instanceof Error) { |
||||||
|
return `Invalid JSON provided: ${error.message}`; |
||||||
|
} else { |
||||||
|
return 'Invalid JSON provided'; |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const shouldRenderJSON = |
||||||
|
value.options.method !== HttpRequestMethod.GET && |
||||||
|
value.options.headers?.some(([name, value]) => name === 'Content-Type' && value === 'application/json'); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={styles.listItem}> |
||||||
|
<Field label="Title"> |
||||||
|
<SuggestionsInput |
||||||
|
value={value.title} |
||||||
|
onChange={onTitleChange} |
||||||
|
suggestions={suggestions} |
||||||
|
autoFocus={value.title === ''} |
||||||
|
placeholder="Action title" |
||||||
|
/> |
||||||
|
</Field> |
||||||
|
|
||||||
|
<InlineFieldRow> |
||||||
|
<InlineField label="Method" labelWidth={LABEL_WIDTH} grow={true}> |
||||||
|
<RadioButtonGroup<HttpRequestMethod> |
||||||
|
value={value?.options.method} |
||||||
|
options={httpMethodOptions} |
||||||
|
onChange={onMethodChange} |
||||||
|
fullWidth |
||||||
|
/> |
||||||
|
</InlineField> |
||||||
|
</InlineFieldRow> |
||||||
|
|
||||||
|
<InlineFieldRow> |
||||||
|
<InlineField label="URL" labelWidth={LABEL_WIDTH} grow={true}> |
||||||
|
<SuggestionsInput |
||||||
|
value={value.options.url} |
||||||
|
onChange={onUrlChange} |
||||||
|
suggestions={suggestions} |
||||||
|
placeholder="URL" |
||||||
|
/> |
||||||
|
</InlineField> |
||||||
|
</InlineFieldRow> |
||||||
|
|
||||||
|
<Field label="Query parameters" className={styles.fieldGap}> |
||||||
|
<ParamsEditor |
||||||
|
value={value?.options.queryParams ?? []} |
||||||
|
onChange={onQueryParamsChange} |
||||||
|
suggestions={suggestions} |
||||||
|
/> |
||||||
|
</Field> |
||||||
|
|
||||||
|
<Field label="Headers"> |
||||||
|
<ParamsEditor |
||||||
|
value={value?.options.headers ?? []} |
||||||
|
onChange={onHeadersChange} |
||||||
|
suggestions={suggestions} |
||||||
|
contentTypeHeader={true} |
||||||
|
/> |
||||||
|
</Field> |
||||||
|
|
||||||
|
{value?.options.method !== HttpRequestMethod.GET && ( |
||||||
|
<Field label="Body"> |
||||||
|
<SuggestionsInput |
||||||
|
value={value.options.body} |
||||||
|
onChange={onBodyChange} |
||||||
|
suggestions={suggestions} |
||||||
|
type={HTMLElementType.TextAreaElement} |
||||||
|
/> |
||||||
|
</Field> |
||||||
|
)} |
||||||
|
|
||||||
|
{shouldRenderJSON && ( |
||||||
|
<> |
||||||
|
<br /> |
||||||
|
{renderJSON(value?.options.body)} |
||||||
|
</> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
); |
||||||
|
}); |
||||||
|
|
||||||
|
const getStyles = (theme: GrafanaTheme2) => ({ |
||||||
|
listItem: css({ |
||||||
|
marginBottom: theme.spacing(), |
||||||
|
}), |
||||||
|
infoText: css({ |
||||||
|
paddingBottom: theme.spacing(2), |
||||||
|
marginLeft: '66px', |
||||||
|
color: theme.colors.text.secondary, |
||||||
|
}), |
||||||
|
fieldGap: css({ |
||||||
|
marginTop: theme.spacing(2), |
||||||
|
}), |
||||||
|
}); |
||||||
|
|
||||||
|
ActionEditor.displayName = 'ActionEditor'; |
||||||
@ -0,0 +1,52 @@ |
|||||||
|
import { useState } from 'react'; |
||||||
|
|
||||||
|
import { Action, DataFrame, VariableSuggestion } from '@grafana/data'; |
||||||
|
import { Button } from '@grafana/ui/src/components/Button'; |
||||||
|
import { Modal } from '@grafana/ui/src/components/Modal/Modal'; |
||||||
|
|
||||||
|
import { ActionEditor } from './ActionEditor'; |
||||||
|
|
||||||
|
interface ActionEditorModalContentProps { |
||||||
|
action: Action; |
||||||
|
index: number; |
||||||
|
data: DataFrame[]; |
||||||
|
onSave: (index: number, action: Action) => void; |
||||||
|
onCancel: (index: number) => void; |
||||||
|
getSuggestions: () => VariableSuggestion[]; |
||||||
|
} |
||||||
|
|
||||||
|
export const ActionEditorModalContent = ({ |
||||||
|
action, |
||||||
|
index, |
||||||
|
onSave, |
||||||
|
onCancel, |
||||||
|
getSuggestions, |
||||||
|
}: ActionEditorModalContentProps) => { |
||||||
|
const [dirtyAction, setDirtyAction] = useState(action); |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<ActionEditor |
||||||
|
value={dirtyAction} |
||||||
|
index={index} |
||||||
|
onChange={(index, action) => { |
||||||
|
setDirtyAction(action); |
||||||
|
}} |
||||||
|
suggestions={getSuggestions()} |
||||||
|
/> |
||||||
|
<Modal.ButtonRow> |
||||||
|
<Button variant="secondary" onClick={() => onCancel(index)} fill="outline"> |
||||||
|
Cancel |
||||||
|
</Button> |
||||||
|
<Button |
||||||
|
onClick={() => { |
||||||
|
onSave(index, dirtyAction); |
||||||
|
}} |
||||||
|
disabled={dirtyAction.title.trim() === '' || dirtyAction.options.url.trim() === ''} |
||||||
|
> |
||||||
|
Save |
||||||
|
</Button> |
||||||
|
</Modal.ButtonRow> |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
@ -0,0 +1,192 @@ |
|||||||
|
import { css } from '@emotion/css'; |
||||||
|
import { DragDropContext, Droppable, DropResult } from '@hello-pangea/dnd'; |
||||||
|
import { cloneDeep } from 'lodash'; |
||||||
|
import { ReactNode, useEffect, useState } from 'react'; |
||||||
|
|
||||||
|
import { Action, DataFrame, GrafanaTheme2, defaultActionConfig, VariableSuggestion } from '@grafana/data'; |
||||||
|
import { Button } from '@grafana/ui/src/components/Button'; |
||||||
|
import { Modal } from '@grafana/ui/src/components/Modal/Modal'; |
||||||
|
import { useStyles2 } from '@grafana/ui/src/themes'; |
||||||
|
|
||||||
|
import { ActionEditorModalContent } from './ActionEditorModalContent'; |
||||||
|
import { ActionListItem } from './ActionsListItem'; |
||||||
|
|
||||||
|
interface ActionsInlineEditorProps { |
||||||
|
actions?: Action[]; |
||||||
|
onChange: (actions: Action[]) => void; |
||||||
|
data: DataFrame[]; |
||||||
|
getSuggestions: () => VariableSuggestion[]; |
||||||
|
showOneClick?: boolean; |
||||||
|
} |
||||||
|
|
||||||
|
export const ActionsInlineEditor = ({ |
||||||
|
actions, |
||||||
|
onChange, |
||||||
|
data, |
||||||
|
getSuggestions, |
||||||
|
showOneClick = false, |
||||||
|
}: ActionsInlineEditorProps) => { |
||||||
|
const [editIndex, setEditIndex] = useState<number | null>(null); |
||||||
|
const [isNew, setIsNew] = useState(false); |
||||||
|
|
||||||
|
const [actionsSafe, setActionsSafe] = useState<Action[]>([]); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
setActionsSafe(actions ?? []); |
||||||
|
}, [actions]); |
||||||
|
|
||||||
|
const styles = useStyles2(getActionsInlineEditorStyle); |
||||||
|
const isEditing = editIndex !== null; |
||||||
|
|
||||||
|
const onActionChange = (index: number, action: Action) => { |
||||||
|
if (isNew) { |
||||||
|
if (action.title.trim() === '') { |
||||||
|
setIsNew(false); |
||||||
|
setEditIndex(null); |
||||||
|
return; |
||||||
|
} else { |
||||||
|
setEditIndex(null); |
||||||
|
setIsNew(false); |
||||||
|
} |
||||||
|
} |
||||||
|
const update = cloneDeep(actionsSafe); |
||||||
|
update[index] = action; |
||||||
|
onChange(update); |
||||||
|
|
||||||
|
setEditIndex(null); |
||||||
|
}; |
||||||
|
|
||||||
|
const onActionAdd = () => { |
||||||
|
let update = cloneDeep(actionsSafe); |
||||||
|
setEditIndex(update.length); |
||||||
|
setIsNew(true); |
||||||
|
}; |
||||||
|
|
||||||
|
const onActionCancel = (index: number) => { |
||||||
|
if (isNew) { |
||||||
|
setIsNew(false); |
||||||
|
} |
||||||
|
setEditIndex(null); |
||||||
|
}; |
||||||
|
|
||||||
|
const onActionRemove = (index: number) => { |
||||||
|
const update = cloneDeep(actionsSafe); |
||||||
|
update.splice(index, 1); |
||||||
|
onChange(update); |
||||||
|
}; |
||||||
|
|
||||||
|
const onDragEnd = (result: DropResult) => { |
||||||
|
if (!actions || !result.destination) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const update = cloneDeep(actionsSafe); |
||||||
|
const action = update[result.source.index]; |
||||||
|
|
||||||
|
update.splice(result.source.index, 1); |
||||||
|
update.splice(result.destination.index, 0, action); |
||||||
|
|
||||||
|
setActionsSafe(update); |
||||||
|
onChange(update); |
||||||
|
}; |
||||||
|
|
||||||
|
const renderFirstAction = (actionsJSX: ReactNode, key: string) => { |
||||||
|
if (showOneClick) { |
||||||
|
return ( |
||||||
|
<div className={styles.oneClickOverlay} key={key}> |
||||||
|
<span className={styles.oneClickSpan}>One-click action</span> {actionsJSX} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
return actionsJSX; |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<DragDropContext onDragEnd={onDragEnd}> |
||||||
|
<Droppable droppableId="sortable-actions" direction="vertical"> |
||||||
|
{(provided) => ( |
||||||
|
<div className={styles.wrapper} ref={provided.innerRef} {...provided.droppableProps}> |
||||||
|
{actionsSafe.map((action, idx) => { |
||||||
|
const key = `${action.title}/${idx}`; |
||||||
|
|
||||||
|
const actionsJSX = ( |
||||||
|
<div className={styles.itemWrapper} key={key}> |
||||||
|
<ActionListItem |
||||||
|
key={key} |
||||||
|
index={idx} |
||||||
|
action={action} |
||||||
|
onChange={onActionChange} |
||||||
|
onEdit={() => setEditIndex(idx)} |
||||||
|
onRemove={() => onActionRemove(idx)} |
||||||
|
data={data} |
||||||
|
itemKey={key} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
); |
||||||
|
|
||||||
|
if (idx === 0) { |
||||||
|
return renderFirstAction(actionsJSX, key); |
||||||
|
} |
||||||
|
|
||||||
|
return actionsJSX; |
||||||
|
})} |
||||||
|
{provided.placeholder} |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Droppable> |
||||||
|
</DragDropContext> |
||||||
|
|
||||||
|
{isEditing && editIndex !== null && ( |
||||||
|
<Modal |
||||||
|
title="Edit action" |
||||||
|
isOpen={true} |
||||||
|
closeOnBackdropClick={false} |
||||||
|
onDismiss={() => { |
||||||
|
onActionCancel(editIndex); |
||||||
|
}} |
||||||
|
> |
||||||
|
<ActionEditorModalContent |
||||||
|
index={editIndex} |
||||||
|
action={isNew ? defaultActionConfig : actionsSafe[editIndex]} |
||||||
|
data={data} |
||||||
|
onSave={onActionChange} |
||||||
|
onCancel={onActionCancel} |
||||||
|
getSuggestions={getSuggestions} |
||||||
|
/> |
||||||
|
</Modal> |
||||||
|
)} |
||||||
|
|
||||||
|
<Button size="sm" icon="plus" onClick={onActionAdd} variant="secondary" className={styles.button}> |
||||||
|
Add action |
||||||
|
</Button> |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const getActionsInlineEditorStyle = (theme: GrafanaTheme2) => ({ |
||||||
|
wrapper: css({ |
||||||
|
marginBottom: theme.spacing(2), |
||||||
|
display: 'flex', |
||||||
|
flexDirection: 'column', |
||||||
|
}), |
||||||
|
oneClickOverlay: css({ |
||||||
|
height: 'auto', |
||||||
|
border: `2px dashed ${theme.colors.text.link}`, |
||||||
|
fontSize: 10, |
||||||
|
color: theme.colors.text.primary, |
||||||
|
marginBottom: theme.spacing(1), |
||||||
|
}), |
||||||
|
oneClickSpan: css({ |
||||||
|
padding: 10, |
||||||
|
// Negates the padding on the span from moving the underlying link
|
||||||
|
marginBottom: -10, |
||||||
|
display: 'inline-block', |
||||||
|
}), |
||||||
|
itemWrapper: css({ |
||||||
|
padding: '4px 8px 8px 8px', |
||||||
|
}), |
||||||
|
button: css({ |
||||||
|
marginLeft: theme.spacing(1), |
||||||
|
}), |
||||||
|
}); |
||||||
@ -0,0 +1,111 @@ |
|||||||
|
import { css, cx } from '@emotion/css'; |
||||||
|
import { Draggable } from '@hello-pangea/dnd'; |
||||||
|
|
||||||
|
import { Action, DataFrame, GrafanaTheme2 } from '@grafana/data'; |
||||||
|
import { Icon } from '@grafana/ui/src/components/Icon/Icon'; |
||||||
|
import { IconButton } from '@grafana/ui/src/components/IconButton/IconButton'; |
||||||
|
import { useStyles2 } from '@grafana/ui/src/themes'; |
||||||
|
|
||||||
|
export interface ActionsListItemProps { |
||||||
|
index: number; |
||||||
|
action: Action; |
||||||
|
data: DataFrame[]; |
||||||
|
onChange: (index: number, action: Action) => void; |
||||||
|
onEdit: () => void; |
||||||
|
onRemove: () => void; |
||||||
|
isEditing?: boolean; |
||||||
|
itemKey: string; |
||||||
|
} |
||||||
|
|
||||||
|
export const ActionListItem = ({ action, onEdit, onRemove, index, itemKey }: ActionsListItemProps) => { |
||||||
|
const styles = useStyles2(getActionListItemStyles); |
||||||
|
const { title = '' } = action; |
||||||
|
|
||||||
|
const hasTitle = title.trim() !== ''; |
||||||
|
|
||||||
|
return ( |
||||||
|
<Draggable key={itemKey} draggableId={itemKey} index={index}> |
||||||
|
{(provided) => ( |
||||||
|
<> |
||||||
|
<div |
||||||
|
className={cx(styles.wrapper, styles.dragRow)} |
||||||
|
ref={provided.innerRef} |
||||||
|
{...provided.draggableProps} |
||||||
|
key={index} |
||||||
|
> |
||||||
|
<div className={styles.linkDetails}> |
||||||
|
<div className={cx(styles.url, !hasTitle && styles.notConfigured)}> |
||||||
|
{hasTitle ? title : 'Action title not provided'} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className={styles.icons}> |
||||||
|
<IconButton name="pen" onClick={onEdit} className={styles.icon} tooltip="Edit action title" /> |
||||||
|
<IconButton name="times" onClick={onRemove} className={styles.icon} tooltip="Remove action title" /> |
||||||
|
<div className={styles.dragIcon} {...provided.dragHandleProps}> |
||||||
|
<Icon name="draggabledots" size="lg" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
)} |
||||||
|
</Draggable> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const getActionListItemStyles = (theme: GrafanaTheme2) => { |
||||||
|
return { |
||||||
|
wrapper: css({ |
||||||
|
display: 'flex', |
||||||
|
flexGrow: 1, |
||||||
|
alignItems: 'center', |
||||||
|
justifyContent: 'space-between', |
||||||
|
width: '100%', |
||||||
|
padding: '5px 0 5px 10px', |
||||||
|
borderRadius: theme.shape.radius.default, |
||||||
|
background: theme.colors.background.secondary, |
||||||
|
gap: 8, |
||||||
|
}), |
||||||
|
linkDetails: css({ |
||||||
|
display: 'flex', |
||||||
|
flexDirection: 'column', |
||||||
|
flexGrow: 1, |
||||||
|
}), |
||||||
|
errored: css({ |
||||||
|
color: theme.colors.error.text, |
||||||
|
fontStyle: 'italic', |
||||||
|
}), |
||||||
|
notConfigured: css({ |
||||||
|
fontStyle: 'italic', |
||||||
|
}), |
||||||
|
title: css({ |
||||||
|
color: theme.colors.text.primary, |
||||||
|
fontSize: theme.typography.size.sm, |
||||||
|
fontWeight: theme.typography.fontWeightMedium, |
||||||
|
}), |
||||||
|
url: css({ |
||||||
|
color: theme.colors.text.secondary, |
||||||
|
fontSize: theme.typography.size.sm, |
||||||
|
whiteSpace: 'nowrap', |
||||||
|
overflow: 'hidden', |
||||||
|
textOverflow: 'ellipsis', |
||||||
|
maxWidth: `calc(100% - 100px)`, |
||||||
|
}), |
||||||
|
dragIcon: css({ |
||||||
|
cursor: 'grab', |
||||||
|
color: theme.colors.text.secondary, |
||||||
|
margin: theme.spacing(0, 0.5), |
||||||
|
}), |
||||||
|
icon: css({ |
||||||
|
color: theme.colors.text.secondary, |
||||||
|
}), |
||||||
|
dragRow: css({ |
||||||
|
position: 'relative', |
||||||
|
}), |
||||||
|
icons: css({ |
||||||
|
display: 'flex', |
||||||
|
padding: 6, |
||||||
|
alignItems: 'center', |
||||||
|
gap: 8, |
||||||
|
}), |
||||||
|
}; |
||||||
|
}; |
||||||
@ -0,0 +1,130 @@ |
|||||||
|
import { css } from '@emotion/css'; |
||||||
|
import { useEffect, useState } from 'react'; |
||||||
|
|
||||||
|
import { contentTypeOptions, GrafanaTheme2, VariableSuggestion } from '@grafana/data'; |
||||||
|
import { IconButton } from '@grafana/ui/src/components/IconButton/IconButton'; |
||||||
|
import { Input } from '@grafana/ui/src/components/Input/Input'; |
||||||
|
import { Stack } from '@grafana/ui/src/components/Layout/Stack/Stack'; |
||||||
|
import { Select } from '@grafana/ui/src/components/Select/Select'; |
||||||
|
import { useStyles2 } from '@grafana/ui/src/themes'; |
||||||
|
|
||||||
|
import { SuggestionsInput } from '../transformers/suggestionsInput/SuggestionsInput'; |
||||||
|
|
||||||
|
interface Props { |
||||||
|
onChange: (v: Array<[string, string]>) => void; |
||||||
|
value: Array<[string, string]>; |
||||||
|
suggestions: VariableSuggestion[]; |
||||||
|
contentTypeHeader?: boolean; |
||||||
|
} |
||||||
|
|
||||||
|
export const ParamsEditor = ({ value, onChange, suggestions, contentTypeHeader = false }: Props) => { |
||||||
|
const styles = useStyles2(getStyles); |
||||||
|
|
||||||
|
const headersContentType = value.find(([key, value]) => key === 'Content-Type'); |
||||||
|
|
||||||
|
const [paramName, setParamName] = useState(''); |
||||||
|
const [paramValue, setParamValue] = useState(''); |
||||||
|
const [contentTypeParamValue, setContentTypeParamValue] = useState(''); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (contentTypeParamValue !== '') { |
||||||
|
setContentTypeParamValue(contentTypeParamValue); |
||||||
|
} else if (headersContentType) { |
||||||
|
setContentTypeParamValue(headersContentType[1]); |
||||||
|
} |
||||||
|
}, [contentTypeParamValue, headersContentType]); |
||||||
|
|
||||||
|
// forces re-init of first SuggestionsInput(s), since they are stateful and don't respond to 'value' prop changes to be able to clear them :(
|
||||||
|
const [entryKey, setEntryKey] = useState(Math.random().toString()); |
||||||
|
|
||||||
|
const changeParamValue = (paramValue: string) => { |
||||||
|
setParamValue(paramValue); |
||||||
|
}; |
||||||
|
|
||||||
|
const changeParamName = (paramName: string) => { |
||||||
|
setParamName(paramName); |
||||||
|
}; |
||||||
|
|
||||||
|
const removeParam = (key: string) => () => { |
||||||
|
const updatedParams = value.filter((param) => param[0] !== key); |
||||||
|
onChange(updatedParams); |
||||||
|
}; |
||||||
|
|
||||||
|
const addParam = (contentType?: [string, string]) => { |
||||||
|
let newParams: Array<[string, string]>; |
||||||
|
|
||||||
|
if (value) { |
||||||
|
newParams = value.filter((e) => e[0] !== (contentType ? contentType[0] : paramName)); |
||||||
|
} else { |
||||||
|
newParams = []; |
||||||
|
} |
||||||
|
|
||||||
|
newParams.push(contentType ?? [paramName, paramValue]); |
||||||
|
newParams.sort((a, b) => a[0].localeCompare(b[0])); |
||||||
|
onChange(newParams); |
||||||
|
|
||||||
|
setParamName(''); |
||||||
|
setParamValue(''); |
||||||
|
setEntryKey(Math.random().toString()); |
||||||
|
}; |
||||||
|
|
||||||
|
const changeContentTypeParamValue = (value: string) => { |
||||||
|
setContentTypeParamValue(value); |
||||||
|
addParam(['Content-Type', value]); |
||||||
|
}; |
||||||
|
|
||||||
|
const isAddParamsDisabled = paramName === '' || paramValue === ''; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Stack direction="row" key={entryKey}> |
||||||
|
<SuggestionsInput |
||||||
|
value={paramName} |
||||||
|
onChange={changeParamName} |
||||||
|
suggestions={suggestions} |
||||||
|
placeholder="Key" |
||||||
|
style={{ width: 332 }} |
||||||
|
/> |
||||||
|
<SuggestionsInput |
||||||
|
value={paramValue} |
||||||
|
onChange={changeParamValue} |
||||||
|
suggestions={suggestions} |
||||||
|
placeholder="Value" |
||||||
|
style={{ width: 332 }} |
||||||
|
/> |
||||||
|
<IconButton aria-label="add" name="plus-circle" onClick={() => addParam()} disabled={isAddParamsDisabled} /> |
||||||
|
</Stack> |
||||||
|
|
||||||
|
<Stack direction="column"> |
||||||
|
{Array.from(value.filter((param) => param[0] !== 'Content-Type') || []).map((entry) => ( |
||||||
|
<Stack key={entry[0]} direction="row"> |
||||||
|
<Input disabled value={entry[0]} /> |
||||||
|
<Input disabled value={entry[1]} /> |
||||||
|
<IconButton aria-label="delete" onClick={removeParam(entry[0])} name="trash-alt" /> |
||||||
|
</Stack> |
||||||
|
))} |
||||||
|
</Stack> |
||||||
|
|
||||||
|
{contentTypeHeader && ( |
||||||
|
<div className={styles.extraHeader}> |
||||||
|
<Stack direction="row"> |
||||||
|
<Input value={'Content-Type'} disabled /> |
||||||
|
<Select |
||||||
|
onChange={(select) => changeContentTypeParamValue(select.value as string)} |
||||||
|
options={contentTypeOptions} |
||||||
|
value={contentTypeParamValue} |
||||||
|
/> |
||||||
|
</Stack> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const getStyles = (theme: GrafanaTheme2) => ({ |
||||||
|
extraHeader: css({ |
||||||
|
marginTop: theme.spacing(1), |
||||||
|
marginBottom: theme.spacing(1), |
||||||
|
maxWidth: 673, |
||||||
|
}), |
||||||
|
}); |
||||||
@ -0,0 +1,148 @@ |
|||||||
|
import { |
||||||
|
Action, |
||||||
|
ActionModel, |
||||||
|
AppEvents, |
||||||
|
DataContextScopedVar, |
||||||
|
DataFrame, |
||||||
|
DataLink, |
||||||
|
Field, |
||||||
|
FieldType, |
||||||
|
getFieldDataContextClone, |
||||||
|
InterpolateFunction, |
||||||
|
ScopedVars, |
||||||
|
textUtil, |
||||||
|
ValueLinkConfig, |
||||||
|
} from '@grafana/data'; |
||||||
|
import { BackendSrvRequest, getBackendSrv } from '@grafana/runtime'; |
||||||
|
import { appEvents } from 'app/core/core'; |
||||||
|
|
||||||
|
import { HttpRequestMethod } from '../../plugins/panel/canvas/panelcfg.gen'; |
||||||
|
import { createAbsoluteUrl, RelativeUrl } from '../alerting/unified/utils/url'; |
||||||
|
|
||||||
|
/** @internal */ |
||||||
|
export const getActions = ( |
||||||
|
frame: DataFrame, |
||||||
|
field: Field, |
||||||
|
fieldScopedVars: ScopedVars, |
||||||
|
replaceVariables: InterpolateFunction, |
||||||
|
actions: Action[], |
||||||
|
config: ValueLinkConfig |
||||||
|
): Array<ActionModel<Field>> => { |
||||||
|
if (!actions || actions.length === 0) { |
||||||
|
return []; |
||||||
|
} |
||||||
|
|
||||||
|
const actionModels = actions.map((action: Action) => { |
||||||
|
const dataContext: DataContextScopedVar = getFieldDataContextClone(frame, field, fieldScopedVars); |
||||||
|
const actionScopedVars = { |
||||||
|
...fieldScopedVars, |
||||||
|
__dataContext: dataContext, |
||||||
|
}; |
||||||
|
|
||||||
|
const boundReplaceVariables: InterpolateFunction = (value, scopedVars, format) => { |
||||||
|
return replaceVariables(value, { ...actionScopedVars, ...scopedVars }, format); |
||||||
|
}; |
||||||
|
|
||||||
|
// We are not displaying reduction result
|
||||||
|
if (config.valueRowIndex !== undefined && !isNaN(config.valueRowIndex)) { |
||||||
|
dataContext.value.rowIndex = config.valueRowIndex; |
||||||
|
} else { |
||||||
|
dataContext.value.calculatedValue = config.calculatedValue; |
||||||
|
} |
||||||
|
|
||||||
|
let actionModel: ActionModel<Field> = { title: '', onClick: (e) => {} }; |
||||||
|
|
||||||
|
actionModel = { |
||||||
|
title: replaceVariables(action.title || '', actionScopedVars), |
||||||
|
onClick: (evt: MouseEvent, origin: Field) => { |
||||||
|
buildActionOnClick(action, boundReplaceVariables); |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
return actionModel; |
||||||
|
}); |
||||||
|
|
||||||
|
return actionModels.filter((action): action is ActionModel => !!action); |
||||||
|
}; |
||||||
|
|
||||||
|
/** @internal */ |
||||||
|
const buildActionOnClick = (action: Action, replaceVariables: InterpolateFunction) => { |
||||||
|
try { |
||||||
|
const url = new URL(getUrl(replaceVariables(action.options.url))); |
||||||
|
|
||||||
|
const requestHeaders: Record<string, string> = {}; |
||||||
|
|
||||||
|
let request: BackendSrvRequest = { |
||||||
|
url: url.toString(), |
||||||
|
method: action.options.method, |
||||||
|
data: getData(action, replaceVariables), |
||||||
|
headers: requestHeaders, |
||||||
|
}; |
||||||
|
|
||||||
|
if (action.options.headers) { |
||||||
|
action.options.headers.forEach(([name, value]) => { |
||||||
|
requestHeaders[replaceVariables(name)] = replaceVariables(value); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
if (action.options.queryParams) { |
||||||
|
action.options.queryParams?.forEach(([name, value]) => { |
||||||
|
url.searchParams.append(replaceVariables(name), replaceVariables(value)); |
||||||
|
}); |
||||||
|
|
||||||
|
request.url = url.toString(); |
||||||
|
} |
||||||
|
|
||||||
|
requestHeaders['X-Grafana-Action'] = '1'; |
||||||
|
request.headers = requestHeaders; |
||||||
|
|
||||||
|
getBackendSrv() |
||||||
|
.fetch(request) |
||||||
|
.subscribe({ |
||||||
|
error: (error) => { |
||||||
|
appEvents.emit(AppEvents.alertError, ['An error has occurred. Check console output for more details.']); |
||||||
|
console.error(error); |
||||||
|
}, |
||||||
|
complete: () => { |
||||||
|
appEvents.emit(AppEvents.alertSuccess, ['API call was successful']); |
||||||
|
}, |
||||||
|
}); |
||||||
|
} catch (error) { |
||||||
|
appEvents.emit(AppEvents.alertError, ['An error has occurred. Check console output for more details.']); |
||||||
|
console.error(error); |
||||||
|
return; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
/** @internal */ |
||||||
|
// @TODO update return type
|
||||||
|
export const getActionsDefaultField = (dataLinks: DataLink[] = [], actions: Action[] = []) => { |
||||||
|
return { |
||||||
|
name: 'Default field', |
||||||
|
type: FieldType.string, |
||||||
|
config: { links: dataLinks, actions: actions }, |
||||||
|
values: [], |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
/** @internal */ |
||||||
|
const getUrl = (endpoint: string) => { |
||||||
|
const isRelativeUrl = endpoint.startsWith('/'); |
||||||
|
if (isRelativeUrl) { |
||||||
|
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
|
||||||
|
const sanitizedRelativeURL = textUtil.sanitizeUrl(endpoint) as RelativeUrl; |
||||||
|
endpoint = createAbsoluteUrl(sanitizedRelativeURL, []); |
||||||
|
} |
||||||
|
|
||||||
|
return endpoint; |
||||||
|
}; |
||||||
|
|
||||||
|
/** @internal */ |
||||||
|
const getData = (action: Action, replaceVariables: InterpolateFunction) => { |
||||||
|
let data: string | undefined = action.options.body ? replaceVariables(action.options.body) : '{}'; |
||||||
|
if (action.options.method === HttpRequestMethod.GET) { |
||||||
|
data = undefined; |
||||||
|
} |
||||||
|
|
||||||
|
return data; |
||||||
|
}; |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
import { StandardEditorProps, OneClickMode, Action, VariableSuggestionsScope } from '@grafana/data'; |
||||||
|
import { CanvasElementOptions } from 'app/features/canvas/element'; |
||||||
|
|
||||||
|
import { ActionsInlineEditor } from '../../../../../features/actions/ActionsInlineEditor'; |
||||||
|
|
||||||
|
type Props = StandardEditorProps<Action[], CanvasElementOptions>; |
||||||
|
|
||||||
|
export function ActionsEditor({ value, onChange, item, context }: Props) { |
||||||
|
const oneClickMode = item.settings?.oneClickMode; |
||||||
|
|
||||||
|
return ( |
||||||
|
<ActionsInlineEditor |
||||||
|
actions={value} |
||||||
|
onChange={onChange} |
||||||
|
getSuggestions={() => (context.getSuggestions ? context.getSuggestions(VariableSuggestionsScope.Values) : [])} |
||||||
|
data={[]} |
||||||
|
showOneClick={oneClickMode === OneClickMode.Action} |
||||||
|
/> |
||||||
|
); |
||||||
|
} |
||||||
Loading…
Reference in new issue