Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Synthetics] Adjust content #156029

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
1ddb593
adjust content
dominiqueclarke Apr 27, 2023
59afd3a
Update x-pack/plugins/synthetics/public/apps/synthetics/components/se…
dominiqueclarke Apr 27, 2023
e1932b6
adjust content
dominiqueclarke Apr 27, 2023
3219781
Merge branch 'fix/synthetics-content-adjustments' of https://github.c…
dominiqueclarke Apr 27, 2023
b52d45f
Merge branch 'main' into fix/synthetics-content-adjustments
dominiqueclarke Apr 27, 2023
914dc4e
Merge branch 'main' into fix/synthetics-content-adjustments
dominiqueclarke Apr 27, 2023
1565df8
adjust tooltip content
dominiqueclarke Apr 27, 2023
67c2792
Merge branch 'main' of github.com:elastic/kibana into fix/synthetics-…
dominiqueclarke Apr 27, 2023
fe1e4b4
adjust error content for run once
dominiqueclarke Apr 27, 2023
7bcda42
Merge branch 'fix/synthetics-content-adjustments' of https://github.c…
dominiqueclarke Apr 27, 2023
30ba191
remove unused translations
dominiqueclarke Apr 27, 2023
3ecd1f2
replace references to monitor management with synthetics app
dominiqueclarke Apr 28, 2023
4416340
adjust content
dominiqueclarke Apr 28, 2023
7a2e857
clarify actions that are applied to all locations
dominiqueclarke Apr 28, 2023
b2460d3
remove unused translations
dominiqueclarke Apr 28, 2023
950e39e
adjust monitor sync error content
dominiqueclarke Apr 28, 2023
a75c318
update tests
dominiqueclarke Apr 28, 2023
82be10e
adjust read only callout text
dominiqueclarke Apr 28, 2023
6640fe9
adjust enablement message for less privileged users
dominiqueclarke Apr 28, 2023
a907f9c
remove unused translations
dominiqueclarke Apr 28, 2023
590804b
Merge branch 'main' into fix/synthetics-content-adjustments
dominiqueclarke Apr 28, 2023
8c72f1b
Update x-pack/plugins/synthetics/public/apps/synthetics/components/mo…
dominiqueclarke May 2, 2023
f1810ee
Update x-pack/plugins/synthetics/public/apps/synthetics/components/se…
dominiqueclarke May 2, 2023
6d29e64
Update x-pack/plugins/synthetics/public/apps/synthetics/components/se…
dominiqueclarke May 2, 2023
8c40515
Update x-pack/plugins/synthetics/public/apps/synthetics/components/se…
dominiqueclarke May 2, 2023
7d75707
Update x-pack/plugins/synthetics/public/apps/synthetics/components/se…
dominiqueclarke May 2, 2023
d0a155a
Merge branch 'main' into fix/synthetics-content-adjustments
kibanamachine May 2, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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.',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we also show the "Enable Synthetics" button, but in a disabled state? Just so that this sentence makes more sense. Up to you, just my 2 cents here :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There actually isn't an Enable Synthetics button at all any more, now we have an automatic workflow.

Do you think having a dummy button here would still be helpful?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that having the button makes it clearer that an admin navigating to this page would do the trick, so yes.
If a user with no admin right comes here, they'll see "Only admins can enable the feature", but without the button it doesn't hint on where admins need to go when the user goes to ask them.

Not sure if I'm clear with my explanations, maybe that's not so relevant :) Maybe an alternative to the disabled button would be to explain how the admin can enable the feature: "Only administrators can enable this feature by navigating to this page." ? But that sounds a lot more wordy than the disabled button.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@paulb-elastic Any thoughts here?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Might be too late, so feel free to ignore my comment. I guess the only thing about seeing a disabled button is that the admin might wonder how to the page where the button is, but there isn't one (as it's done automatically).

I'm not too worried either way - if it's already been added, then that's ok, if not, then I'm ok going without it.

}
);

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."
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 👍 👍

/>
}
>
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