[Alerting UI] Replaced AlertsContextProvider with KibanaContextProvider and exposed components in API#84604
Conversation
…er and exposed components in API
|
Pinging @elastic/kibana-alerting-services (Team:Alerting Services) |
|
Pinging @elastic/uptime (Team:uptime) |
|
Pinging @elastic/apm-ui (Team:apm) |
Zacqary
left a comment
There was a problem hiding this comment.
Code looks good; Logs and Metrics UIs seem to work as expected
ymao1
left a comment
There was a problem hiding this comment.
All the changes look great! Stack alerts section all seems to work as expected.
When I look in Metrics, in Metrics Explorer tab and create an alert. There are a few percentage expressions to fill in. When I click on any of the percentages to populate, the flyout closes and reopens.
x-pack/plugins/infra/public/alerting/metric_threshold/components/alert_flyout.tsx
Outdated
Show resolved
Hide resolved
chrisronline
left a comment
There was a problem hiding this comment.
LGTM for Stack Monitoring
mikecote
left a comment
There was a problem hiding this comment.
Changes LGTM! I left a few comments regarding the typing and docs
| charts?: ChartsPluginSetup; | ||
| data?: DataPublicPluginStart; |
There was a problem hiding this comment.
Since these are required plugins for triggers actions ui to work, we will always have a value for them (similar to TriggersAndActionsUiServices). We should be able to remove the empty or data?. type checks in other files as well.
| charts?: ChartsPluginSetup; | |
| data?: DataPublicPluginStart; | |
| charts: ChartsPluginSetup; | |
| data: DataPublicPluginStart; |
| metadata: { test: 'some value', fields: ['test'] }, | ||
| }} | ||
| > | ||
| <AlertAdd consumer={'watcher'} addFlyoutVisible={alertFlyoutVisible} |
There was a problem hiding this comment.
Since this is the Embed the Create Alert flyout within any Kibana plugin section of the docs, should we explain how to do it using the plugin start contract?
| } | ||
| ``` | ||
|
|
||
| |Property|Description| |
There was a problem hiding this comment.
This table below should also be removed?
| } | ||
| ``` | ||
|
|
||
| |Property|Description| |
There was a problem hiding this comment.
This table below should also be removed?
| getAddAlertFlyout: ( | ||
| props: Omit<AlertAddProps, 'actionTypeRegistry' | 'alertTypeRegistry'> | ||
| ) => ReactElement<AlertAddProps> | null; | ||
| getEditAlertFlyout: ( | ||
| props: Omit<AlertEditProps, 'actionTypeRegistry' | 'alertTypeRegistry'> | ||
| ) => ReactElement<AlertEditProps> | null; |
There was a problem hiding this comment.
nit: it seems these functions don't have a scenario that returns null.
| getAddAlertFlyout: ( | |
| props: Omit<AlertAddProps, 'actionTypeRegistry' | 'alertTypeRegistry'> | |
| ) => ReactElement<AlertAddProps> | null; | |
| getEditAlertFlyout: ( | |
| props: Omit<AlertEditProps, 'actionTypeRegistry' | 'alertTypeRegistry'> | |
| ) => ReactElement<AlertEditProps> | null; | |
| getAddAlertFlyout: ( | |
| props: Omit<AlertAddProps, 'actionTypeRegistry' | 'alertTypeRegistry'> | |
| ) => ReactElement<AlertAddProps>; | |
| getEditAlertFlyout: ( | |
| props: Omit<AlertEditProps, 'actionTypeRegistry' | 'alertTypeRegistry'> | |
| ) => ReactElement<AlertEditProps>; |
| charts?: ChartsPluginSetup; | ||
| dataFieldsFormats?: FieldFormatsStart; |
There was a problem hiding this comment.
I think these will always have a value once the changes in x-pack/plugins/triggers_actions_ui/public/types.ts is done.
| charts?: ChartsPluginSetup; | |
| dataFieldsFormats?: FieldFormatsStart; | |
| charts: ChartsPluginSetup; | |
| dataFieldsFormats: FieldFormatsStart; |
|
|
||
| if (index && index.length > 0) { | ||
| const currentEsFields = await getFields(http, index); | ||
| const currentEsFields = await getFields(http!, index); |
There was a problem hiding this comment.
I wonder if there will be scenarios where http is undefined now?
| if (!data) { | ||
| throw new Error('KibanaContext has not been initalized correctly.'); | ||
| } |
There was a problem hiding this comment.
We should be able to remove this and some further checks below once the changes in x-pack/plugins/triggers_actions_ui/public/types.ts are done.
| const AddAlertFlyout = useMemo( | ||
| () => | ||
| alertType && | ||
| triggersActionsUi.getAddAlertFlyout({ | ||
| consumer: 'apm', | ||
| addFlyoutVisible, | ||
| setAddFlyoutVisibility, | ||
| alertTypeId: alertType, | ||
| canChangeTrigger: false, | ||
| }), | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| [addFlyoutVisible, alertType] | ||
| ); | ||
| return <>{AddAlertFlyout}</>; |
There was a problem hiding this comment.
Is there a reason why this cannot be a component that the alerting UI exports?
There was a problem hiding this comment.
From the code reducing prospective it sounds right to expose it as component, but our decision was to live the details of the flyout usage to the end plugin - as a result it can be without memoizations or with the own dependancies list.
There was a problem hiding this comment.
So the memoization is not needed?
There was a problem hiding this comment.
This looks ok, but since it's not a component could we make the variable lowercase? Also why are we disabling exhaustive-deps? If there's a good reason for that please add a comment explaining why.
| <ApmAppRoot | ||
| apmPluginContextValue={apmPluginContextValue} | ||
| startDeps={startDeps} | ||
| />, |
There was a problem hiding this comment.
Ideally startDeps is part of the plugin context value, similar to plugins. We've not named the properties here appropriately but we'll change that separately from this PR.
There was a problem hiding this comment.
Sounds right for me, I had the similar thoughts, but decided not to modify your plugin context. Are you OK to have it for this PR as it is currently implemented?
kindsun
left a comment
There was a problem hiding this comment.
Geo alerts changes lgtm!
- code review
smith
left a comment
There was a problem hiding this comment.
See my comment on the add flyout component. Other than that everything looks ok. We can follow-up later with the dependency props.
| const AddAlertFlyout = useMemo( | ||
| () => | ||
| alertType && | ||
| triggersActionsUi.getAddAlertFlyout({ | ||
| consumer: 'apm', | ||
| addFlyoutVisible, | ||
| setAddFlyoutVisibility, | ||
| alertTypeId: alertType, | ||
| canChangeTrigger: false, | ||
| }), | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| [addFlyoutVisible, alertType] | ||
| ); | ||
| return <>{AddAlertFlyout}</>; |
There was a problem hiding this comment.
This looks ok, but since it's not a component could we make the variable lowercase? Also why are we disabling exhaustive-deps? If there's a good reason for that please add a comment explaining why.
💚 Build SucceededMetrics [docs]Module Count
Async chunks
Distributable file count
Page load bundle
History
To update your PR or re-run it, just comment with: |
…or-disable-searchable-snapshot-fields * 'master' of github.com:elastic/kibana: (29 commits) HTTP CRUD+ API for Index Patterns (elastic#83576) Don't list packages in devDependencies already listed in dependencies (elastic#85120) Remove unused devDependencies (elastic#85121) [ILM] Reposition form toggles (elastic#85143) [APM] Make sure jest script can be run from anywhere (elastic#85111) Add EuiButtonEmptyTo components (elastic#85213) skip flaky suite (elastic#85216) skip flaky suite (elastic#83775) skip flaky suite (elastic#83774) skip flaky suite (elastic#83773) skip flaky suite (elastic#83793) skip flaky suite (elastic#85215) skip flaky suite (elastic#85217) [Usage Collection] Kibana Overview Page UI Metrics (elastic#81937) [Alerting UI] Replaced AlertsContextProvider with KibanaContextProvider and exposed components in API (elastic#84604) skip flaky suite (elastic#85208) [Security Solutions][Detection Engine] Fixes cypress errors by using latest signals mapping (elastic#84600) Small fixes to Kibana search bar (elastic#85079) Change link text to say Fleet (elastic#85083) [Metrics UI] Refactor Process List API to fetch only top processes (elastic#84716) ... # Conflicts: # x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/hot_phase.tsx # x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/searchable_snapshot_field/searchable_snapshot_field.tsx
Uh oh!
There was an error while loading. Please reload this page.