Skip to content

Commit

Permalink
[Synthetics] Adjust content (elastic#156029)
Browse files Browse the repository at this point in the history
## Summary

Resolves elastic#155936
Relates to elastic#152915
Resolves elastic#150944
Resolves elastic#156166

Copy fixes:

- Alerting config: Address Typo
(elastic#152915 (comment))
- Alerting config: Address success toast wording
- Getting started ("Create your first monitor") locations: Repeated text
between placeholder and hint text. To address this, I changed the
helptext to give more detail
- Private locations -> "Monitors" column: replaced `Running` with
`configured`
- Overview page: Search bar placeholder: `url` is now uppercase `URL`
- Monitor status alert - Updates text for viewer user to be consistent
with other tooltips
- Run once errors - Remove extra error toast
- Run once errors - Remove excess phrase from error
- Sync errors - Made content more user friendly
- Synthetics App - replace references to Monitor Management with
Synthetics App
- Enable/disable - clarify when actions apply to all monitors
- Project monitors - add reference to enabling/disabling alerting on
project monitor page
- Enablement - Adjust content for less privileged users

Some screenshots of the fixes are below. These are not exhaustive
<img width="1417" alt="Screen Shot 2023-04-25 at 12 12 38 PM"
src="https://user-images.githubusercontent.com/11356435/234906460-529d48d4-f682-4d45-b439-7bd7189c37ea.png">
<img width="772" alt="Screen Shot 2023-04-25 at 12 12 31 PM"
src="https://user-images.githubusercontent.com/11356435/234906462-b85d6fe0-2d32-42f0-81fb-2f528c5c0d87.png">
<img width="909" alt="Screen Shot 2023-04-25 at 12 12 10 PM"
src="https://user-images.githubusercontent.com/11356435/234906466-49286af9-29c4-4bcb-9d10-dc84bcddd66f.png">
<img width="1414" alt="Screen Shot 2023-04-25 at 11 59 57 AM"
src="https://user-images.githubusercontent.com/11356435/234906468-48b27002-5771-42df-9ee5-5852dabeaaeb.png">
<img width="623" alt="Screen Shot 2023-04-25 at 11 57 53 AM"
src="https://user-images.githubusercontent.com/11356435/234906470-4ea5acf7-bff2-41af-a679-7e4b9f43c377.png">
<img width="735" alt="Screen Shot 2023-04-27 at 4 16 17 PM"
src="https://user-images.githubusercontent.com/11356435/234982914-128af18e-204a-4df6-a791-ac3155d8b5b9.png">
<img width="1240" alt="Screen Shot 2023-04-28 at 2 09 29 PM"
src="https://user-images.githubusercontent.com/11356435/235223171-f2177983-f8cc-45a3-8ff8-76850508e63e.png">
<img width="602" alt="Screen Shot 2023-04-28 at 11 12 49 AM"
src="https://user-images.githubusercontent.com/11356435/235223288-7b01dd85-2311-4b42-bb91-92e4a4f454e3.png">
<img width="552" alt="Screen Shot 2023-04-28 at 11 12 25 AM"
src="https://user-images.githubusercontent.com/11356435/235223290-00cc6a8c-7f9c-46f1-b8ae-5c98eaeaa35d.png">
<img width="1448" alt="Screen Shot 2023-04-28 at 2 56 58 PM"
src="https://user-images.githubusercontent.com/11356435/235230906-093d720c-9ac9-4cf1-b04a-34a1409d7379.png">

---------

Co-authored-by: florent-leborgne <[email protected]>
Co-authored-by: Kibana Machine <[email protected]>
(cherry picked from commit 589ea3a)
  • Loading branch information
dominiqueclarke committed May 2, 2023
1 parent e5a60a8 commit 0b9f0be
Show file tree
Hide file tree
Showing 30 changed files with 72 additions and 150 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ export const PreconfiguredAgentPoliciesSchema = schema.arrayOf(
if (value === 'synthetics') {
return i18n.translate('xpack.fleet.config.disableSynthetics', {
defaultMessage:
'Synthetics package is not supported via kibana.yml config. Please use synthetics app to create monitors in private locations. https://www.elastic.co/guide/en/observability/current/synthetics-private-location.html',
'Synthetics package is not supported via kibana.yml config. Please use Synthetics App to create monitors in private locations. https://www.elastic.co/guide/en/observability/current/synthetics-private-location.html',
});
}
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ journey(`MonitorManagementList`, async ({ page, params }) => {

const pageBaseUrl = 'http://localhost:5620/app/synthetics/monitors';
const searchBarInput = page.locator(
'[placeholder="Search by name, url, host, tag, project or location"]'
'[placeholder="Search by name, URL, host, tag, project or location"]'
);

page.setDefaultTimeout(60 * 1000);
Expand Down Expand Up @@ -72,12 +72,12 @@ journey(`MonitorManagementList`, async ({ page, params }) => {
await page.click('span >> text="Journey / Page"');
await page.click('[aria-label="Apply the selected filters for Type"]');
expect(page.url()).toBe(`${pageBaseUrl}?monitorTypes=%5B%22browser%22%5D`);
await page.click('[placeholder="Search by name, url, host, tag, project or location"]');
await page.click('[placeholder="Search by name, URL, host, tag, project or location"]');
await Promise.all([
page.waitForNavigation({
url: `${pageBaseUrl}?monitorTypes=%5B%22browser%22%5D&query=3`,
}),
page.fill('[placeholder="Search by name, url, host, tag, project or location"]', '3'),
page.fill('[placeholder="Search by name, URL, host, tag, project or location"]', '3'),
]);
await page.click('text=1-1');
await page.waitForSelector('text=Showing 1-1 of 1 Configuration');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -100,8 +100,8 @@ export const ToggleAlertFlyoutButton = () => {
};

const noWritePermissionsTooltipContent = i18n.translate(
'xpack.synthetics.alertDropdown.noWritePermissions',
'xpack.synthetics.alertDropdown.noPermissions',
{
defaultMessage: 'You need read-write access to Uptime to create alerts in this app.',
defaultMessage: 'You do not have sufficient permissions to perform this action.',
}
);
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,7 @@ const TAGS_LABEL = i18n.translate('xpack.synthetics.management.monitorList.tags'
});

const ENABLED_LABEL = i18n.translate('xpack.synthetics.detailsPanel.monitorDetails.enabled', {
defaultMessage: 'Enabled',
defaultMessage: 'Enabled (all locations)',
});

const MONITOR_TYPE_LABEL = i18n.translate(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,13 +51,13 @@ const REQUEST_ACCESS_LABEL = i18n.translate('xpack.synthetics.monitorManagement.
});

export const MONITOR_MANAGEMENT_LABEL = i18n.translate('xpack.synthetics.monitorManagement.label', {
defaultMessage: 'Monitor Management',
defaultMessage: 'Synthetics App',
});

const LOADING_MONITOR_MANAGEMENT_LABEL = i18n.translate(
'xpack.synthetics.monitorManagement.loading.label',
{
defaultMessage: 'Loading Monitor Management',
defaultMessage: 'Loading Synthetics App',
}
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const ServiceLocationsField = ({
<EuiFormRow
fullWidth
label={LOCATIONS_LABEL}
helpText={!errors?.[ConfigKey.LOCATIONS] ? SELECT_ONE_OR_MORE_LOCATIONS : undefined}
helpText={!errors?.[ConfigKey.LOCATIONS] ? SELECT_ONE_OR_MORE_LOCATIONS_DETAILS : undefined}
isInvalid={!!errors?.[ConfigKey.LOCATIONS]}
error={SELECT_ONE_OR_MORE_LOCATIONS}
>
Expand Down Expand Up @@ -70,6 +70,13 @@ const SELECT_ONE_OR_MORE_LOCATIONS = i18n.translate(
}
);

const SELECT_ONE_OR_MORE_LOCATIONS_DETAILS = i18n.translate(
'xpack.synthetics.monitorManagement.selectOneOrMoreLocationsDetails',
{
defaultMessage: 'Select locations where monitors will be executed.',
}
);

const LOCATIONS_LABEL = i18n.translate('xpack.synthetics.monitorManagement.locationsLabel', {
defaultMessage: 'Locations',
});
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const ReadOnlyCallout = ({ projectId }: { projectId?: string }) => {
<p>
<FormattedMessage
id="xpack.synthetics.project.readOnly.callout.content"
defaultMessage="This monitor was added from an external project: {projectId}. From this page, you can only enable, disable, or remove it. To make configuration changes, you have to edit its source file and push it again from that project."
defaultMessage="This monitor was added from an external project: {projectId}. From this page, you can only enable and disable the monitor and its alerts, or remove it. To make configuration changes, you have to edit its source file and push it again from that project."
values={{ projectId: <strong>{projectId}</strong> }}
/>
</p>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,5 +56,5 @@ export function SearchField() {
}

const PLACEHOLDER_TEXT = i18n.translate('xpack.synthetics.monitorManagement.filter.placeholder', {
defaultMessage: `Search by name, url, host, tag, project or location`,
defaultMessage: `Search by name, URL, host, tag, project or location`,
});
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { i18n } from '@kbn/i18n';
export const LOADING_LABEL = i18n.translate(
'xpack.synthetics.monitorManagement.manageMonitorLoadingLabel',
{
defaultMessage: 'Loading Monitor Management',
defaultMessage: 'Loading Synthetics App',
}
);

Expand All @@ -24,43 +24,43 @@ export const LEARN_MORE_LABEL = i18n.translate(
export const CALLOUT_MANAGEMENT_DISABLED = i18n.translate(
'xpack.synthetics.monitorManagement.callout.disabled',
{
defaultMessage: 'Monitor Management is currently disabled',
defaultMessage: 'Synthetics App is currently disabled',
}
);

export const CALLOUT_MANAGEMENT_CONTACT_ADMIN = i18n.translate(
'xpack.synthetics.monitorManagement.callout.disabled.adminContact',
{
defaultMessage: 'Monitor Management will be enabled when an admin visits the Synthetics app.',
defaultMessage: 'Synthetics App will be enabled when an admin visits the Synthetics app.',
}
);

export const CALLOUT_MANAGEMENT_DESCRIPTION = i18n.translate(
'xpack.synthetics.monitorManagement.callout.description.disabled',
{
defaultMessage:
"Monitor Management requires a valid API key to run your monitors on Elastic's global managed testing locations. If you already had enabled Monitor Management previously, the API key may no longer be valid.",
"Synthetics App requires a valid API key to run your monitors on Elastic's global managed testing locations. If you already had enabled Synthetics App previously, the API key may no longer be valid.",
}
);

export const ERROR_HEADING_BODY = i18n.translate(
'xpack.synthetics.monitorManagement.editMonitorError.description',
{
defaultMessage: 'Monitor Management settings could not be loaded. Please contact Support.',
defaultMessage: 'Synthetics App settings could not be loaded. Please contact Support.',
}
);

export const SYNTHETICS_ENABLE_LABEL = i18n.translate(
'xpack.synthetics.monitorManagement.syntheticsEnableLabel.management',
{
defaultMessage: 'Enable Monitor Management',
defaultMessage: 'Enable Synthetics App',
}
);

export const ERROR_HEADING_LABEL = i18n.translate(
'xpack.synthetics.monitorManagement.editMonitorError',
{
defaultMessage: 'Error loading Monitor Management',
defaultMessage: 'Error loading Synthetics App',
}
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export const MonitorAsyncError = () => {
title={
<FormattedMessage
id="xpack.synthetics.monitorManagement.monitorSync.failure.title"
defaultMessage="Monitors failed to sync with the Synthetics service"
defaultMessage="Some monitors are not running correctly"
/>
}
color="warning"
Expand All @@ -33,7 +33,7 @@ export const MonitorAsyncError = () => {
<p>
<FormattedMessage
id="xpack.synthetics.monitorManagement.monitorSync.failure.content"
defaultMessage="There was a problem syncing your monitors for one or more locations:"
defaultMessage="There was a problem running your monitors for one or more locations:"
/>
</p>
<ul>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,47 +7,25 @@

import { i18n } from '@kbn/i18n';

export const SYNTHETICS_ENABLE_SUCCESS = i18n.translate(
'xpack.synthetics.monitorManagement.syntheticsEnableSuccess',
export const SYNTHETICS_APP_ENABLEMENT_TITLE = i18n.translate(
'xpack.synthetics.emptyState.enablement.title',
{
defaultMessage: 'Monitor Management enabled successfully.',
defaultMessage: 'Monitor the status of your services and applications with Synthetics',
}
);

export const SYNTHETICS_DISABLE_SUCCESS = i18n.translate(
'xpack.synthetics.monitorManagement.syntheticsDisabledSuccess',
{
defaultMessage: 'Monitor Management disabled successfully.',
}
);

export const MONITOR_MANAGEMENT_ENABLEMENT_LABEL = i18n.translate(
'xpack.synthetics.monitorManagement.emptyState.enablement.enabled.title',
{
defaultMessage: 'Enable Monitor Management',
}
);

export const SYNTHETICS_APP_DISABLED_LABEL = i18n.translate(
'xpack.synthetics.emptyState.enablement.disabled.title',
{
defaultMessage: 'Synthetics App is disabled',
}
);

export const MONITOR_MANAGEMENT_ENABLEMENT_MESSAGE = i18n.translate(
'xpack.synthetics.monitorManagement.emptyState.enablement',
export const MONITOR_MANAGEMENT_DISABLED_MESSAGE = i18n.translate(
'xpack.synthetics.emptyState.enablement.disabledDescription',
{
defaultMessage:
'Enable Monitor Management to run lightweight and real-browser monitors from hosted testing locations around the world. Enabling Monitor Management will generate an API key to allow the Synthetics Service to write back to your Elasticsearch cluster.',
'Run automated checks based on real-browser simulations and lightweight endpoint pings to measure the experience of your users from any location worldwide.',
}
);

export const MONITOR_MANAGEMENT_DISABLED_MESSAGE = i18n.translate(
'xpack.synthetics.emptyState.enablement.disabledDescription',
export const MONITOR_MANAGEMENT_CONTACT_ADMINISTRATOR = i18n.translate(
'xpack.synthetics.emptyState.enablement.contactAdministrator',
{
defaultMessage:
'Synthetics App is currently disabled. Synthetics App allows you to run lightweight and real-browser monitors from hosted testing locations around the world. To enable Synthetics App, please contact an administrator.',
defaultMessage: 'Only administrators can enable this feature.',
}
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,55 +5,24 @@
* 2.0.
*/

import React, { useState, useEffect, useRef } from 'react';
import React from 'react';
import { EuiEmptyPrompt, EuiTitle, EuiLink } from '@elastic/eui';
import { useEnablement } from '../../../../hooks/use_enablement';
import { kibanaService } from '../../../../../../utils/kibana_service';
import * as labels from './labels';

export const EnablementEmptyState = () => {
const { error, enablement, loading } = useEnablement();
const [shouldFocusEnablementButton, setShouldFocusEnablementButton] = useState(false);
const [isEnabling, setIsEnabling] = useState(false);
const { enablement, loading } = useEnablement();
const { isEnabled } = enablement;
const isEnabledRef = useRef(isEnabled);
const buttonRef = useRef<HTMLButtonElement>(null);

useEffect(() => {
if (!isEnabled && isEnabledRef.current === true) {
/* shift focus to enable button when enable toggle disappears. Prevent
* focus loss on the page */
setShouldFocusEnablementButton(true);
}
isEnabledRef.current = Boolean(isEnabled);
}, [isEnabled]);

useEffect(() => {
if (isEnabling && isEnabled) {
setIsEnabling(false);
kibanaService.toasts.addSuccess({
title: labels.SYNTHETICS_ENABLE_SUCCESS,
toastLifeTimeMs: 3000,
});
} else if (isEnabling && error) {
setIsEnabling(false);
kibanaService.toasts.addSuccess({
title: labels.SYNTHETICS_DISABLE_SUCCESS,
toastLifeTimeMs: 3000,
});
}
}, [isEnabled, isEnabling, error]);

useEffect(() => {
if (shouldFocusEnablementButton) {
buttonRef.current?.focus();
}
}, [shouldFocusEnablementButton]);

return !isEnabled && !loading ? (
<EuiEmptyPrompt
title={<h2>{labels.SYNTHETICS_APP_DISABLED_LABEL}</h2>}
body={<p>{labels.MONITOR_MANAGEMENT_DISABLED_MESSAGE}</p>}
title={<h2>{labels.SYNTHETICS_APP_ENABLEMENT_TITLE}</h2>}
body={
<>
<p>{labels.MONITOR_MANAGEMENT_DISABLED_MESSAGE}</p>
<p>{labels.MONITOR_MANAGEMENT_CONTACT_ADMINISTRATOR}</p>
</>
}
footer={
<>
<EuiTitle size="xxs">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ describe('ActionsPopover', () => {
locationId={testMonitor.location.id}
/>
);
const enableButton = getByText('Disable monitor');
const enableButton = getByText('Disable monitor (all locations)');
fireEvent.click(enableButton);
expect(updateMonitorEnabledState).toHaveBeenCalledTimes(1);
expect(updateMonitorEnabledState.mock.calls[0]).toEqual([false]);
Expand All @@ -162,7 +162,7 @@ describe('ActionsPopover', () => {
locationId={testMonitor.location.id}
/>
);
const enableButton = getByText('Enable monitor');
const enableButton = getByText('Enable monitor (all locations)');
fireEvent.click(enableButton);
expect(updateMonitorEnabledState).toHaveBeenCalledTimes(1);
expect(updateMonitorEnabledState.mock.calls[0]).toEqual([true]);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -350,28 +350,28 @@ const loadingLabel = (isEnabled: boolean) =>
const enableMonitorLabel = i18n.translate(
'xpack.synthetics.overview.actions.enableLabelEnableMonitor',
{
defaultMessage: 'Enable monitor',
defaultMessage: 'Enable monitor (all locations)',
}
);

const disableMonitorLabel = i18n.translate(
'xpack.synthetics.overview.actions.enableLabelDisableMonitor',
{
defaultMessage: 'Disable monitor',
defaultMessage: 'Disable monitor (all locations)',
}
);

const disableAlertLabel = i18n.translate(
'xpack.synthetics.overview.actions.disableLabelDisableAlert',
{
defaultMessage: 'Disable status alerts',
defaultMessage: 'Disable status alerts (all locations)',
}
);

const enableMonitorAlertLabel = i18n.translate(
'xpack.synthetics.overview.actions.enableLabelDisableAlert',
{
defaultMessage: 'Enable status alerts',
defaultMessage: 'Enable status alerts (all locations)',
}
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -391,7 +391,7 @@ const PREVIOUS_PERIOD_SERIES_NAME = i18n.translate(
);

const ENABLED_ITEM_TEXT = i18n.translate('xpack.synthetics.monitorList.enabledItemText', {
defaultMessage: 'Enabled',
defaultMessage: 'Enabled (all locations)',
});

const CLOSE_FLYOUT_TEXT = i18n.translate('xpack.synthetics.monitorList.closeFlyoutText', {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export const getMonitorsRoute = (
},
{
title: i18n.translate('xpack.synthetics.monitorManagementRoute.title', {
defaultMessage: 'Monitor Management | {baseTitle}',
defaultMessage: 'Synthetics Management | {baseTitle}',
values: { baseTitle },
}),
path: MONITORS_ROUTE,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export const AlertDefaultsForm = () => {
description={
<FormattedMessage
id="xpack.synthetics.settings.defaultConnectors.description"
defaultMessage="Selector one or more connectors to be used for alerts. These settings will be applied to all synthetics based alerts."
defaultMessage="Select one or more connectors to be used for alerts. These settings apply to all synthetics-based alerts."
/>
}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export const alertFormI18n = {
inputPlaceHolder: i18n.translate(
'xpack.synthetics.sourceConfiguration.alertDefaultForm.selectConnector',
{
defaultMessage: 'Please select one or more connectors',
defaultMessage: 'Select one or more connectors',
}
),
emailPlaceHolder: i18n.translate(
Expand Down
Loading

0 comments on commit 0b9f0be

Please sign in to comment.