Merge branch '7.17' into backport/7.17/pr-123464

x-pack/plugins/transform/public/app/sections/create_transform/components/step_details/step_details_form.tsx

@@ -218,7 +218,7 @@ export const StepDetailsForm: FC<StepDetailsFormProps> = React.memo(
       defaults.isRetentionPolicyEnabled
     );
     const [retentionPolicyDateField, setRetentionPolicyDateField] = useState(
-      isRetentionPolicyAvailable ? dateFieldNames[0] : ''
+      isRetentionPolicyAvailable ? defaults.retentionPolicyDateField : ''
     );
     const [retentionPolicyMaxAge, setRetentionPolicyMaxAge] = useState(
       defaults.retentionPolicyMaxAge

x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/edit_transform_flyout_form.tsx

@@ -55,7 +55,9 @@ export const EditTransformFlyoutForm: FC<EditTransformFlyoutFormProps> = ({
   );
 
   const retentionDateFieldOptions = useMemo(() => {
-    return Array.isArray(dateFieldNames) ? dateFieldNames.map((text: string) => ({ text })) : [];
+    return Array.isArray(dateFieldNames)
+      ? dateFieldNames.map((text: string) => ({ text, value: text }))
+      : [];
   }, [dateFieldNames]);
 
   return (
@@ -181,6 +183,11 @@ export const EditTransformFlyoutForm: FC<EditTransformFlyoutFormProps> = ({
                   onChange={(e) =>
                     dispatch({ field: 'retentionPolicyField', value: e.target.value })
                   }
+                  hasNoInitialSelection={
+                    !retentionDateFieldOptions
+                      .map((d) => d.text)
+                      .includes(formFields.retentionPolicyField.value)
+                  }
                 />
               </EuiFormRow>
             ) : (

x-pack/plugins/uptime/e2e/journeys/alerts/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export * from './tls_alert_flyouts_in_alerting_app';
+export * from './status_alert_flyouts_in_alerting_app';

x-pack/plugins/uptime/e2e/journeys/alerts/status_alert_flyouts_in_alerting_app.ts

@@ -0,0 +1,67 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { journey, step, expect, before } from '@elastic/synthetics';
+import { assertText, byTestId, loginToKibana, waitForLoadingToFinish } from '../utils';
+
+journey('StatusFlyoutInAlertingApp', async ({ page, params }) => {
+  before(async () => {
+    await waitForLoadingToFinish({ page });
+  });
+
+  const baseUrl = `${params.kibanaUrl}/app/management/insightsAndAlerting/triggersActions/rules`;
+
+  step('Go to Alerting app', async () => {
+    await page.goto(`${baseUrl}`, {
+      waitUntil: 'networkidle',
+    });
+    await loginToKibana({ page });
+  });
+
+  step('Open monitor status flyout', async () => {
+    await page.click(byTestId('createFirstAlertButton'));
+    await waitForLoadingToFinish({ page });
+    await page.click(byTestId('"xpack.uptime.alerts.monitorStatus-SelectOption"'));
+    await waitForLoadingToFinish({ page });
+    await assertText({ page, text: 'This alert will apply to approximately 0 monitors.' });
+  });
+
+  step('can add filters', async () => {
+    await page.click('text=Add filter');
+    await page.click(byTestId('"uptimeAlertAddFilter.monitor.type"'));
+    await page.click(byTestId('"uptimeCreateStatusAlert.filter_scheme"'));
+  });
+
+  step('can open query bar', async () => {
+    await page.click(byTestId('"xpack.uptime.alerts.monitorStatus.filterBar"'));
+
+    await page.fill(byTestId('"xpack.uptime.alerts.monitorStatus.filterBar"'), 'monitor.type : ');
+
+    await waitForLoadingToFinish({ page });
+
+    await assertText({ page, text: 'http' });
+
+    const suggestionItem = await page.$(byTestId('autoCompleteSuggestionText'));
+    expect(await suggestionItem?.textContent()).toBe('"http" ');
+
+    await page.click(byTestId('euiFlyoutCloseButton'));
+    await page.click(byTestId('confirmModalConfirmButton'));
+  });
+
+  step('Open tls alert flyout', async () => {
+    await page.click(byTestId('createFirstAlertButton'));
+    await waitForLoadingToFinish({ page });
+    await page.click(byTestId('"xpack.uptime.alerts.tlsCertificate-SelectOption"'));
+    await waitForLoadingToFinish({ page });
+    await assertText({ page, text: 'has a certificate expiring within' });
+  });
+
+  step('Tls alert flyout has setting values', async () => {
+    await assertText({ page, text: '30 days' });
+    await assertText({ page, text: '730 days' });
+  });
+});

x-pack/plugins/uptime/e2e/journeys/alerts/tls_alert_flyouts_in_alerting_app.ts

@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { journey, step, before } from '@elastic/synthetics';
+import { assertText, byTestId, loginToKibana, waitForLoadingToFinish } from '../utils';
+
+journey('TlsFlyoutInAlertingApp', async ({ page, params }) => {
+  before(async () => {
+    await waitForLoadingToFinish({ page });
+  });
+
+  const baseUrl = `${params.kibanaUrl}/app/management/insightsAndAlerting/triggersActions/rules`;
+
+  step('Go to Alerting app', async () => {
+    await page.goto(`${baseUrl}`, {
+      waitUntil: 'networkidle',
+    });
+    await loginToKibana({ page });
+  });
+
+  step('Open tls alert flyout', async () => {
+    await page.click(byTestId('createFirstAlertButton'));
+    await waitForLoadingToFinish({ page });
+    await page.click(byTestId('"xpack.uptime.alerts.tlsCertificate-SelectOption"'));
+    await waitForLoadingToFinish({ page });
+    await assertText({ page, text: 'has a certificate expiring within' });
+  });
+
+  step('Tls alert flyout has setting values', async () => {
+    await assertText({ page, text: '30 days' });
+    await assertText({ page, text: '730 days' });
+  });
+});

x-pack/plugins/uptime/e2e/journeys/index.ts

@@ -6,3 +6,4 @@
  */
 
 export * from './uptime.journey';
+export * from './alerts';

x-pack/plugins/uptime/e2e/journeys/utils.ts

@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { expect, Page } from '@elastic/synthetics';
+
+export async function waitForLoadingToFinish({ page }: { page: Page }) {
+  while (true) {
+    if ((await page.$(byTestId('kbnLoadingMessage'))) === null) break;
+    await page.waitForTimeout(5 * 1000);
+  }
+}
+
+export async function loginToKibana({ page }: { page: Page }) {
+  await page.fill('[data-test-subj=loginUsername]', 'elastic', {
+    timeout: 60 * 1000,
+  });
+  await page.fill('[data-test-subj=loginPassword]', 'changeme');
+
+  await page.click('[data-test-subj=loginSubmit]');
+
+  await waitForLoadingToFinish({ page });
+}
+
+export const byTestId = (testId: string) => {
+  return `[data-test-subj=${testId}]`;
+};
+
+export const assertText = async ({ page, text }: { page: Page; text: string }) => {
+  await page.waitForSelector(`text=${text}`, { timeout: 60 * 1000 });
+  expect(await page.$(`text=${text}`)).toBeTruthy();
+};

x-pack/plugins/uptime/e2e/playwright_start.ts

@@ -13,22 +13,30 @@ import { esArchiverLoad, esArchiverUnload } from './tasks/es_archiver';
 
 import './journeys';
 
+const listOfJourneys = ['uptime', 'TlsFlyoutInAlertingApp', 'StatusFlyoutInAlertingApp'] as const;
+
 export function playwrightRunTests() {
   return async ({ getService }: any) => {
     const result = await playwrightStart(getService);
 
-    if (result && result.uptime.status !== 'succeeded') {
-      throw new Error('Tests failed');
-    }
+    listOfJourneys.forEach((journey) => {
+      if (result?.[journey] && result[journey].status !== 'succeeded') {
+        throw new Error('Tests failed');
+      }
+    });
   };
 }
 
 async function playwrightStart(getService: any) {
   console.log('Loading esArchiver...');
-  await esArchiverLoad('full_heartbeat');
+  const esArchiver = getService('esArchiver');
+
+  esArchiverLoad('full_heartbeat');
 
   const config = getService('config');
 
+  await esArchiver.loadIfNeeded('x-pack/test/functional/es_archives/ml/farequote');
+
   const kibanaUrl = Url.format({
     protocol: config.get('servers.kibana.protocol'),
     hostname: config.get('servers.kibana.hostname'),
@@ -41,7 +49,7 @@ async function playwrightStart(getService: any) {
   });
 
   console.log('Removing esArchiver...');
-  await esArchiverUnload('full_heartbeat');
+  esArchiverUnload('full_heartbeat');
 
   return res;
 }

x-pack/plugins/uptime/public/components/overview/alerts/alerts_containers/alert_tls.tsx

@@ -6,10 +6,11 @@
  */
 
 import { useDispatch, useSelector } from 'react-redux';
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { AlertTlsComponent } from '../alert_tls';
 import { setAlertFlyoutVisible } from '../../../../state/actions';
 import { selectDynamicSettings } from '../../../../state/selectors';
+import { getDynamicSettings } from '../../../../state/actions/dynamic_settings';
 
 export const AlertTls: React.FC<{}> = () => {
   const dispatch = useDispatch();
@@ -18,6 +19,13 @@ export const AlertTls: React.FC<{}> = () => {
     [dispatch]
   );
   const { settings } = useSelector(selectDynamicSettings);
+
+  useEffect(() => {
+    if (typeof settings === 'undefined') {
+      dispatch(getDynamicSettings());
+    }
+  }, [dispatch, settings]);
+
   return (
     <AlertTlsComponent
       ageThreshold={settings?.certAgeThreshold}

x-pack/plugins/uptime/public/components/overview/alerts/monitor_status_alert/add_filter_btn.test.tsx

@@ -24,6 +24,7 @@ describe('AddFilterButton component', () => {
             disabled={false}
             flush="left"
             iconType="plusInCircleFilled"
+            isLoading={false}
             onClick={[Function]}
             size="s"
           >
@@ -90,6 +91,7 @@ describe('AddFilterButton component', () => {
             disabled={false}
             flush="left"
             iconType="plusInCircleFilled"
+            isLoading={false}
             onClick={[Function]}
             size="s"
           >
@@ -143,6 +145,7 @@ describe('AddFilterButton component', () => {
             disabled={true}
             flush="left"
             iconType="plusInCircleFilled"
+            isLoading={false}
             onClick={[Function]}
             size="s"
           >

x-pack/plugins/uptime/public/components/overview/alerts/monitor_status_alert/add_filter_btn.tsx

@@ -8,6 +8,7 @@
 import React, { useState } from 'react';
 import { EuiButtonEmpty, EuiContextMenuItem, EuiContextMenuPanel, EuiPopover } from '@elastic/eui';
 import * as labels from '../translations';
+import { useIndexPattern } from '../../../../contexts/uptime_index_pattern_context';
 
 interface Props {
   newFilters: string[];
@@ -20,6 +21,8 @@ export const AddFilterButton: React.FC<Props> = ({ newFilters, onNewFilter, aler
 
   const getSelectedItems = (fieldName: string) => alertFilters?.[fieldName] ?? [];
 
+  const indexPattern = useIndexPattern();
+
   const onButtonClick = () => {
     setPopover(!isPopoverOpen);
   };
@@ -62,6 +65,7 @@ export const AddFilterButton: React.FC<Props> = ({ newFilters, onNewFilter, aler
       onClick={onButtonClick}
       size="s"
       flush="left"
+      isLoading={!indexPattern}
     >
       {labels.ADD_FILTER}
     </EuiButtonEmpty>

x-pack/plugins/uptime/public/contexts/uptime_index_pattern_context.tsx

@@ -5,29 +5,18 @@
  * 2.0.
  */
 
-import React, { createContext, useContext, useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import React, { createContext, useContext } from 'react';
 import { useFetcher } from '../../../observability/public';
 import { DataPublicPluginStart, IndexPattern } from '../../../../../src/plugins/data/public';
-import { indexStatusSelector, selectDynamicSettings } from '../state/selectors';
-import { getDynamicSettings } from '../state/actions/dynamic_settings';
+import { useHasData } from '../components/overview/empty_state/use_has_data';
 
 export const UptimeIndexPatternContext = createContext({} as IndexPattern);
 
 export const UptimeIndexPatternContextProvider: React.FC<{ data: DataPublicPluginStart }> = ({
   children,
   data: { indexPatterns },
 }) => {
-  const { settings } = useSelector(selectDynamicSettings);
-  const { data: indexStatus } = useSelector(indexStatusSelector);
-
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    if (typeof settings === 'undefined') {
-      dispatch(getDynamicSettings());
-    }
-  }, [dispatch, settings]);
+  const { settings, data: indexStatus } = useHasData();
 
   const heartbeatIndices = settings?.heartbeatIndices || '';
 

x-pack/plugins/uptime/public/state/effects/dynamic_settings.ts

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { takeLatest, put, call } from 'redux-saga/effects';
+import { takeLeading, put, call, takeLatest } from 'redux-saga/effects';
 import { Action } from 'redux-actions';
 import { i18n } from '@kbn/i18n';
 import { fetchEffectFactory } from './fetch_effect';
@@ -25,7 +25,7 @@ import { DynamicSettings } from '../../../common/runtime_types';
 import { kibanaService } from '../kibana_service';
 
 export function* fetchDynamicSettingsEffect() {
-  yield takeLatest(
+  yield takeLeading(
     String(getDynamicSettings),
     fetchEffectFactory(getDynamicSettingsAPI, getDynamicSettingsSuccess, getDynamicSettingsFail)
   );