From d630e9bcb35e889dff57f993fa184ffacfb9bb10 Mon Sep 17 00:00:00 2001 From: Adela Almasan <88068998+adela-almasan@users.noreply.github.com> Date: Mon, 23 Sep 2024 09:41:05 -0600 Subject: [PATCH] Chore: Update Action interface (#93248) Co-authored-by: Ryan McKinley --- packages/grafana-data/src/types/action.ts | 20 +++++---- public/app/features/actions/ActionEditor.tsx | 42 +++++++++---------- .../actions/ActionEditorModalContent.tsx | 2 +- public/app/features/actions/utils.ts | 16 +++---- public/app/plugins/panel/canvas/migrations.ts | 12 +++++- 5 files changed, 51 insertions(+), 41 deletions(-) diff --git a/packages/grafana-data/src/types/action.ts b/packages/grafana-data/src/types/action.ts index cfd4d2fff33..a3cb099ebe8 100644 --- a/packages/grafana-data/src/types/action.ts +++ b/packages/grafana-data/src/types/action.ts @@ -3,10 +3,18 @@ import { DataFrame, Field, ValueLinkConfig } from './dataFrame'; import { InterpolateFunction } from './panel'; import { SelectableValue } from './select'; -export interface Action { - type: T; +export enum ActionType { + Fetch = 'fetch', +} + +export interface Action { + type: ActionType; title: string; - options: TOptions; + + // Options for the selected type + // Currently this is required because there is only one valid type (fetch) + // once multiple types are valid, usage of this will need to be optional + [ActionType.Fetch]: FetchOptions; } /** @@ -25,10 +33,6 @@ interface FetchOptions { headers?: Array<[string, string]>; } -export enum ActionType { - Fetch = 'fetch', -} - export enum HttpRequestMethod { POST = 'POST', PUT = 'PUT', @@ -51,7 +55,7 @@ export const contentTypeOptions: SelectableValue[] = [ export const defaultActionConfig: Action = { type: ActionType.Fetch, title: '', - options: { + fetch: { url: '', method: HttpRequestMethod.POST, body: '{}', diff --git a/public/app/features/actions/ActionEditor.tsx b/public/app/features/actions/ActionEditor.tsx index 5680bfc738d..fc7b006a8fc 100644 --- a/public/app/features/actions/ActionEditor.tsx +++ b/public/app/features/actions/ActionEditor.tsx @@ -32,8 +32,8 @@ export const ActionEditor = memo(({ index, value, onChange, suggestions }: Actio const onUrlChange = (url: string) => { onChange(index, { ...value, - options: { - ...value.options, + fetch: { + ...value.fetch, url, }, }); @@ -42,8 +42,8 @@ export const ActionEditor = memo(({ index, value, onChange, suggestions }: Actio const onBodyChange = (body: string) => { onChange(index, { ...value, - options: { - ...value.options, + fetch: { + ...value.fetch, body, }, }); @@ -52,8 +52,8 @@ export const ActionEditor = memo(({ index, value, onChange, suggestions }: Actio const onMethodChange = (method: HttpRequestMethod) => { onChange(index, { ...value, - options: { - ...value.options, + fetch: { + ...value.fetch, method, }, }); @@ -62,8 +62,8 @@ export const ActionEditor = memo(({ index, value, onChange, suggestions }: Actio const onQueryParamsChange = (queryParams: Array<[string, string]>) => { onChange(index, { ...value, - options: { - ...value.options, + fetch: { + ...value.fetch, queryParams, }, }); @@ -72,8 +72,8 @@ export const ActionEditor = memo(({ index, value, onChange, suggestions }: Actio const onHeadersChange = (headers: Array<[string, string]>) => { onChange(index, { ...value, - options: { - ...value.options, + fetch: { + ...value.fetch, headers, }, }); @@ -93,8 +93,8 @@ export const ActionEditor = memo(({ index, value, onChange, suggestions }: Actio }; const shouldRenderJSON = - value.options.method !== HttpRequestMethod.GET && - value.options.headers?.some(([name, value]) => name === 'Content-Type' && value === 'application/json'); + value.fetch.method !== HttpRequestMethod.GET && + value.fetch.headers?.some(([name, value]) => name === 'Content-Type' && value === 'application/json'); return (
@@ -111,7 +111,7 @@ export const ActionEditor = memo(({ index, value, onChange, suggestions }: Actio - value={value?.options.method} + value={value?.fetch.method} options={httpMethodOptions} onChange={onMethodChange} fullWidth @@ -122,7 +122,7 @@ export const ActionEditor = memo(({ index, value, onChange, suggestions }: Actio - + - {value?.options.method !== HttpRequestMethod.GET && ( + {value?.fetch.method !== HttpRequestMethod.GET && (
- {renderJSON(value?.options.body)} + {renderJSON(value?.fetch.body)} )}
diff --git a/public/app/features/actions/ActionEditorModalContent.tsx b/public/app/features/actions/ActionEditorModalContent.tsx index bff95ca61c6..21fa3eeaff0 100644 --- a/public/app/features/actions/ActionEditorModalContent.tsx +++ b/public/app/features/actions/ActionEditorModalContent.tsx @@ -42,7 +42,7 @@ export const ActionEditorModalContent = ({ onClick={() => { onSave(index, dirtyAction); }} - disabled={dirtyAction.title.trim() === '' || dirtyAction.options.url.trim() === ''} + disabled={dirtyAction.title.trim() === '' || dirtyAction.fetch.url.trim() === ''} > Save diff --git a/public/app/features/actions/utils.ts b/public/app/features/actions/utils.ts index 91fad121b3b..f33fa82eb9a 100644 --- a/public/app/features/actions/utils.ts +++ b/public/app/features/actions/utils.ts @@ -68,25 +68,25 @@ export const getActions = ( /** @internal */ const buildActionOnClick = (action: Action, replaceVariables: InterpolateFunction) => { try { - const url = new URL(getUrl(replaceVariables(action.options.url))); + const url = new URL(getUrl(replaceVariables(action.fetch.url))); const requestHeaders: Record = {}; let request: BackendSrvRequest = { url: url.toString(), - method: action.options.method, + method: action.fetch.method, data: getData(action, replaceVariables), headers: requestHeaders, }; - if (action.options.headers) { - action.options.headers.forEach(([name, value]) => { + if (action.fetch.headers) { + action.fetch.headers.forEach(([name, value]) => { requestHeaders[replaceVariables(name)] = replaceVariables(value); }); } - if (action.options.queryParams) { - action.options.queryParams?.forEach(([name, value]) => { + if (action.fetch.queryParams) { + action.fetch.queryParams?.forEach(([name, value]) => { url.searchParams.append(replaceVariables(name), replaceVariables(value)); }); @@ -139,8 +139,8 @@ const getUrl = (endpoint: string) => { /** @internal */ const getData = (action: Action, replaceVariables: InterpolateFunction) => { - let data: string | undefined = action.options.body ? replaceVariables(action.options.body) : '{}'; - if (action.options.method === HttpRequestMethod.GET) { + let data: string | undefined = action.fetch.body ? replaceVariables(action.fetch.body) : '{}'; + if (action.fetch.method === HttpRequestMethod.GET) { data = undefined; } diff --git a/public/app/plugins/panel/canvas/migrations.ts b/public/app/plugins/panel/canvas/migrations.ts index c4fe614aab3..13af6799c11 100644 --- a/public/app/plugins/panel/canvas/migrations.ts +++ b/public/app/plugins/panel/canvas/migrations.ts @@ -68,14 +68,24 @@ export const canvasMigrationHandler = (panel: PanelModel): Partial => { } } - // migrate oneClickLinks to oneClickMode const root = panel.options?.root; if (root?.elements) { for (const element of root.elements) { + // migrate oneClickLinks to oneClickMode if (element.oneClickLinks) { element.oneClickMode = OneClickMode.Link; delete element.oneClickLinks; } + + // migrate action options to new format (fetch) + if (element.actions) { + for (const action of element.actions) { + if (action.options) { + action.fetch = { ...action.options }; + delete action.options; + } + } + } } } }