From 2edb28ad4f21b7869d567ee6f63d898c4d5b2356 Mon Sep 17 00:00:00 2001 From: Maryam Saeidi Date: Tue, 23 Jul 2024 10:42:42 +0200 Subject: [PATCH] [ResponseOps] Bring back EuiThemeProvider to fix o11y and stack monitoring rules in stack management (#188724) Related to https://github.com/elastic/kibana/issues/186969 and elastic/response-ops-team#218 ## Summary This PR brings back EuiThemeProvider to fix o11y and stack monitoring rules in stack management. ## To check/do - [x] Add an APM test that fails without this fix - [x] Check if this solves the related SDH for [CPU Usage](https://github.com/elastic/sdh-kibana/issues/4829) - Yes, it will solve that issue ([comment](https://github.com/elastic/sdh-kibana/issues/4829#issuecomment-2242509680)) - [x] Smoke test **ALL** rule types in stack management - Can we load the rule form? - Can we adjust all the input fields without error? - Does it work both with and without data in the preview chart? (cherry picked from commit ed32c980722efa113e70f0f409ee95e36a9f7a15) --- .../ui_components/popover_expression.tsx | 4 +- .../components/alerting/utils/fields.tsx | 20 +++++- .../sections/rule_form/rule_form.tsx | 42 +++++++------ .../alert_create_flyout.ts | 63 +++++++++++++++++++ 4 files changed, 107 insertions(+), 22 deletions(-) diff --git a/x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/popover_expression.tsx b/x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/popover_expression.tsx index 1a77c964c0777..08ead26ffa8e0 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/popover_expression.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/popover_expression.tsx @@ -14,10 +14,11 @@ interface Props { value: React.ReactNode; children?: React.ReactNode; color?: ExpressionColor; + dataTestSubj?: string; } export function PopoverExpression(props: Props) { - const { title, value, children, color } = props; + const { title, value, children, color, dataTestSubj } = props; const [popoverOpen, setPopoverOpen] = useState(false); return ( @@ -27,6 +28,7 @@ export function PopoverExpression(props: Props) { closePopover={() => setPopoverOpen(false)} button={ + + + (null); const flyoutBodyOverflowRef = useRef(null); @@ -765,24 +769,26 @@ export const RuleForm = ({ } > - + + + ) : null} diff --git a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alert_create_flyout.ts b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alert_create_flyout.ts index bce5e28c1430a..75832524bda1a 100644 --- a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alert_create_flyout.ts +++ b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alert_create_flyout.ts @@ -8,6 +8,9 @@ import expect from '@kbn/expect'; import { asyncForEach } from '@kbn/std'; import { omit } from 'lodash'; +import { apm, timerange } from '@kbn/apm-synthtrace-client'; +import { ApmSynthtraceEsClient } from '@kbn/apm-synthtrace'; +import { getApmSynthtraceEsClient } from '../../../common/utils/synthtrace/apm_es_client'; import { FtrProviderContext } from '../../ftr_provider_context'; import { generateUniqueKey } from '../../lib/get_test_data'; @@ -20,6 +23,8 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { const retry = getService('retry'); const rules = getService('rules'); const toasts = getService('toasts'); + const esClient = getService('es'); + const apmSynthtraceKibanaClient = getService('apmSynthtraceKibanaClient'); async function getAlertsByName(name: string) { const { @@ -71,6 +76,12 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { await nameInput.click(); } + async function defineAPMErrorCountRule(ruleName: string) { + await pageObjects.triggersActionsUI.clickCreateAlertButton(); + await testSubjects.click(`apm.error_rate-SelectOption`); + await testSubjects.setValue('ruleNameInput', ruleName); + } + async function defineAlwaysFiringAlert(alertName: string) { await pageObjects.triggersActionsUI.clickCreateAlertButton(); await testSubjects.click('test.always-firing-SelectOption'); @@ -82,6 +93,45 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { } describe('create alert', function () { + let apmSynthtraceEsClient: ApmSynthtraceEsClient; + before(async () => { + const version = (await apmSynthtraceKibanaClient.installApmPackage()).version; + apmSynthtraceEsClient = await getApmSynthtraceEsClient({ + client: esClient, + packageVersion: version, + }); + const opbeansJava = apm + .service({ name: 'opbeans-java', environment: 'production', agentName: 'java' }) + .instance('instance'); + + const opbeansNode = apm + .service({ name: 'opbeans-node', environment: 'production', agentName: 'node' }) + .instance('instance'); + + const events = timerange('now-15m', 'now') + .ratePerMinute(1) + .generator((timestamp) => { + return [ + opbeansJava + .transaction({ transactionName: 'tx-java' }) + .timestamp(timestamp) + .duration(100) + .failure() + .errors(opbeansJava.error({ message: 'a java error' }).timestamp(timestamp + 50)), + + opbeansNode + .transaction({ transactionName: 'tx-node' }) + .timestamp(timestamp) + .duration(100) + .success(), + ]; + }); + + return Promise.all([apmSynthtraceEsClient.index(events)]); + }); + + after(() => apmSynthtraceEsClient.clean()); + beforeEach(async () => { await pageObjects.common.navigateToApp('triggersActions'); await testSubjects.click('rulesTab'); @@ -321,6 +371,19 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { await discardNewRuleCreation(); }); + // Related issue that this test is trying to prevent: + // https://github.com/elastic/kibana/issues/186969 + it('should successfully show the APM error count rule flyout', async () => { + const ruleName = generateUniqueKey(); + await defineAPMErrorCountRule(ruleName); + + await testSubjects.existOrFail('apmServiceField'); + await testSubjects.existOrFail('apmEnvironmentField'); + await testSubjects.existOrFail('apmErrorGroupingKeyField'); + + await discardNewRuleCreation(); + }); + it('should successfully test valid es_query alert', async () => { const alertName = generateUniqueKey(); await defineEsQueryAlert(alertName);