[Monitor management] Enable check for public beta

x-pack/plugins/uptime/common/config.ts

@@ -21,28 +21,12 @@ const serviceConfig = schema.object({
 
 const uptimeConfig = schema.object({
   index: schema.maybe(schema.string()),
-  ui: schema.maybe(
-    schema.object({
-      monitorManagement: schema.maybe(
-        schema.object({
-          enabled: schema.boolean(),
-        })
-      ),
-    })
-  ),
   service: schema.maybe(serviceConfig),
 });
 
 export const config: PluginConfigDescriptor = {
-  exposeToBrowser: {
-    ui: true,
-  },
   schema: uptimeConfig,
 };
 
 export type UptimeConfig = TypeOf<typeof uptimeConfig>;
 export type ServiceConfig = TypeOf<typeof serviceConfig>;
-
-export interface UptimeUiConfig {
-  ui?: TypeOf<typeof config.schema>['ui'];
-}

x-pack/plugins/uptime/common/constants/rest_api.ts

@@ -42,4 +42,5 @@ export enum API_URLS {
   SYNTHETICS_MONITORS = '/internal/uptime/service/monitors',
   RUN_ONCE_MONITOR = '/internal/uptime/service/monitors/run_once',
   TRIGGER_MONITOR = '/internal/uptime/service/monitors/trigger',
+  SERVICE_ALLOWED = '/internal/uptime/service/allowed',
 }

x-pack/plugins/uptime/common/types/synthetics_monitor.ts

@@ -15,3 +15,7 @@ export interface MonitorIdParam {
 export type SyntheticsMonitorSavedObject = SimpleSavedObject<SyntheticsMonitor> & {
   updated_at: string;
 };
+
+export interface SyntheticsServiceAllowed {
+  serviceAllowed: boolean;
+}

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

@@ -63,7 +63,6 @@ async function config({ readConfigFile }: FtrConfigProviderContext) {
             : 'localKibanaIntegrationTestsUser'
         }`,
         `--xpack.uptime.service.password=${servicPassword}`,
-        '--xpack.uptime.ui.monitorManagement.enabled=true',
       ],
     },
   };

x-pack/plugins/uptime/public/apps/plugin.ts

@@ -48,7 +48,6 @@ import {
 } from '../components/fleet_package';
 import { LazySyntheticsCustomAssetsExtension } from '../components/fleet_package/lazy_synthetics_custom_assets_extension';
 import { Start as InspectorPluginStart } from '../../../../../src/plugins/inspector/public';
-import { UptimeUiConfig } from '../../common/config';
 import { CasesUiStart } from '../../../cases/public';
 
 export interface ClientPluginsSetup {
@@ -87,7 +86,6 @@ export class UptimePlugin
   constructor(private readonly initContext: PluginInitializerContext) {}
 
   public setup(core: CoreSetup<ClientPluginsStart, unknown>, plugins: ClientPluginsSetup): void {
-    const config = this.initContext.config.get<UptimeUiConfig>();
     if (plugins.home) {
       plugins.home.featureCatalogue.register({
         id: PLUGIN.ID,
@@ -215,14 +213,7 @@ export class UptimePlugin
         const [coreStart, corePlugins] = await core.getStartServices();
 
         const { renderApp } = await import('./render_app');
-        return renderApp(
-          coreStart,
-          plugins,
-          corePlugins,
-          params,
-          config,
-          this.initContext.env.mode.dev
-        );
+        return renderApp(coreStart, plugins, corePlugins, params, this.initContext.env.mode.dev);
       },
     });
   }

x-pack/plugins/uptime/public/apps/render_app.tsx

@@ -17,15 +17,13 @@ import {
 } from '../../common/constants';
 import { UptimeApp, UptimeAppProps } from './uptime_app';
 import { ClientPluginsSetup, ClientPluginsStart } from './plugin';
-import { UptimeUiConfig } from '../../common/config';
 import { uptimeOverviewNavigatorParams } from './locators/overview';
 
 export function renderApp(
   core: CoreStart,
   plugins: ClientPluginsSetup,
   startPlugins: ClientPluginsStart,
   appMountParameters: AppMountParameters,
-  config: UptimeUiConfig,
   isDev: boolean
 ) {
   const {
@@ -77,7 +75,6 @@ export function renderApp(
     setBadge,
     appMountParameters,
     setBreadcrumbs: core.chrome.setBreadcrumbs,
-    config,
   };
 
   ReactDOM.render(<UptimeApp {...props} />, appMountParameters.element);

x-pack/plugins/uptime/public/apps/uptime_app.tsx

@@ -35,7 +35,6 @@ import { EuiThemeProvider } from '../../../../../src/plugins/kibana_react/common
 import { Storage } from '../../../../../src/plugins/kibana_utils/public';
 import { UptimeIndexPatternContextProvider } from '../contexts/uptime_index_pattern_context';
 import { InspectorContextProvider } from '../../../observability/public';
-import { UptimeUiConfig } from '../../common/config';
 
 export interface UptimeAppColors {
   danger: string;
@@ -64,7 +63,6 @@ export interface UptimeAppProps {
   commonlyUsedRanges: CommonlyUsedRange[];
   setBreadcrumbs: (crumbs: ChromeBreadcrumb[]) => void;
   appMountParameters: AppMountParameters;
-  config: UptimeUiConfig;
   isDev: boolean;
 }
 
@@ -80,7 +78,6 @@ const Application = (props: UptimeAppProps) => {
     setBadge,
     startPlugins,
     appMountParameters,
-    config,
   } = props;
 
   useEffect(() => {
@@ -138,11 +135,8 @@ const Application = (props: UptimeAppProps) => {
                               >
                                 <InspectorContextProvider>
                                   <UptimeAlertsFlyoutWrapper />
-                                  <PageRouter config={config} />
-                                  <ActionMenu
-                                    appMountParameters={appMountParameters}
-                                    config={config}
-                                  />
+                                  <PageRouter />
+                                  <ActionMenu appMountParameters={appMountParameters} />
                                 </InspectorContextProvider>
                               </RedirectAppLinks>
                             </div>

x-pack/plugins/uptime/public/components/common/header/action_menu.tsx

@@ -9,19 +9,12 @@ import React from 'react';
 import { HeaderMenuPortal } from '../../../../../observability/public';
 import { AppMountParameters } from '../../../../../../../src/core/public';
 import { ActionMenuContent } from './action_menu_content';
-import { UptimeConfig } from '../../../../common/config';
 
-export const ActionMenu = ({
-  appMountParameters,
-  config,
-}: {
-  appMountParameters: AppMountParameters;
-  config: UptimeConfig;
-}) => (
+export const ActionMenu = ({ appMountParameters }: { appMountParameters: AppMountParameters }) => (
   <HeaderMenuPortal
     setHeaderActionMenu={appMountParameters.setHeaderActionMenu}
     theme$={appMountParameters.theme$}
   >
-    <ActionMenuContent config={config} />
+    <ActionMenuContent />
   </HeaderMenuPortal>
 );

x-pack/plugins/uptime/public/components/common/header/action_menu_content.test.tsx

@@ -12,7 +12,7 @@ import { ActionMenuContent } from './action_menu_content';
 
 describe('ActionMenuContent', () => {
   it('renders alerts dropdown', async () => {
-    const { getByLabelText, getByText } = render(<ActionMenuContent config={{}} />);
+    const { getByLabelText, getByText } = render(<ActionMenuContent />);
 
     const alertsDropdown = getByLabelText('Open alerts and rules context menu');
     fireEvent.click(alertsDropdown);
@@ -24,15 +24,15 @@ describe('ActionMenuContent', () => {
   });
 
   it('renders settings link', () => {
-    const { getByRole, getByText } = render(<ActionMenuContent config={{}} />);
+    const { getByRole, getByText } = render(<ActionMenuContent />);
 
     const settingsAnchor = getByRole('link', { name: 'Navigate to the Uptime settings page' });
     expect(settingsAnchor.getAttribute('href')).toBe('/settings');
     expect(getByText('Settings'));
   });
 
   it('renders exploratory view link', () => {
-    const { getByLabelText, getByText } = render(<ActionMenuContent config={{}} />);
+    const { getByLabelText, getByText } = render(<ActionMenuContent />);
 
     const analyzeAnchor = getByLabelText(
       'Navigate to the "Explore Data" view to visualize Synthetics/User data'
@@ -43,7 +43,7 @@ describe('ActionMenuContent', () => {
   });
 
   it('renders Add Data link', () => {
-    const { getByLabelText, getByText } = render(<ActionMenuContent config={{}} />);
+    const { getByLabelText, getByText } = render(<ActionMenuContent />);
 
     const addDataAnchor = getByLabelText('Navigate to a tutorial about adding Uptime data');
 

x-pack/plugins/uptime/public/components/common/header/action_menu_content.tsx

@@ -24,7 +24,6 @@ import {
 import { stringifyUrlParams } from '../../../lib/helper/stringify_url_params';
 import { InspectorHeaderLink } from './inspector_header_link';
 import { monitorStatusSelector } from '../../../state/selectors';
-import { UptimeConfig } from '../../../../common/config';
 
 const ADD_DATA_LABEL = i18n.translate('xpack.uptime.addDataButtonLabel', {
   defaultMessage: 'Add data',
@@ -39,7 +38,7 @@ const ANALYZE_MESSAGE = i18n.translate('xpack.uptime.analyzeDataButtonLabel.mess
     'Explore Data allows you to select and filter result data in any dimension and look for the cause or impact of performance problems.',
 });
 
-export function ActionMenuContent({ config }: { config: UptimeConfig }): React.ReactElement {
+export function ActionMenuContent(): React.ReactElement {
   const kibana = useKibana();
   const { basePath } = useUptimeSettingsContext();
   const params = useGetUrlParams();
@@ -77,23 +76,21 @@ export function ActionMenuContent({ config }: { config: UptimeConfig }): React.R
 
   return (
     <EuiHeaderLinks gutterSize="xs">
-      {config.ui?.monitorManagement?.enabled && (
-        <EuiHeaderLink
-          aria-label={i18n.translate('xpack.uptime.page_header.manageLink.label', {
-            defaultMessage: 'Navigate to the Uptime monitor management page',
-          })}
-          color="text"
-          data-test-subj="management-page-link"
-          href={history.createHref({
-            pathname: MONITOR_MANAGEMENT_ROUTE + '/all',
-          })}
-        >
-          <FormattedMessage
-            id="xpack.uptime.page_header.manageLink"
-            defaultMessage="Monitor management"
-          />
-        </EuiHeaderLink>
-      )}
+      <EuiHeaderLink
+        aria-label={i18n.translate('xpack.uptime.page_header.manageLink.label', {
+          defaultMessage: 'Navigate to the Uptime monitor management page',
+        })}
+        color="text"
+        data-test-subj="management-page-link"
+        href={history.createHref({
+          pathname: MONITOR_MANAGEMENT_ROUTE + '/all',
+        })}
+      >
+        <FormattedMessage
+          id="xpack.uptime.page_header.manageLink"
+          defaultMessage="Monitor management"
+        />
+      </EuiHeaderLink>
 
       <EuiHeaderLink
         aria-label={i18n.translate('xpack.uptime.page_header.settingsLink.label', {

x-pack/plugins/uptime/public/components/monitor_management/add_monitor_btn.tsx

@@ -10,15 +10,22 @@ import { i18n } from '@kbn/i18n';
 import { EuiButton, EuiFlexItem } from '@elastic/eui';
 import { useHistory } from 'react-router-dom';
 import { MONITOR_ADD_ROUTE } from '../../../common/constants';
+import { useSyntheticsServiceAllowed } from './hooks/use_service_allowed';
+import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
 
-export const AddMonitorBtn = ({ isDisabled }: { isDisabled: boolean }) => {
+export const AddMonitorBtn = () => {
   const history = useHistory();
 
+  const { isAllowed, loading } = useSyntheticsServiceAllowed();
+
+  const canSave: boolean = !!useKibana().services?.application?.capabilities.uptime.save;
+
   return (
     <EuiFlexItem style={{ alignItems: 'flex-end' }} grow={false} data-test-subj="addMonitorButton">
       <EuiButton
         fill
-        isDisabled={isDisabled}
+        isLoading={loading}
+        isDisabled={!canSave || !isAllowed}
         iconType="plus"
         data-test-subj="addMonitorBtn"
         href={history.createHref({

x-pack/plugins/uptime/public/components/monitor_management/hooks/use_inline_errors.test.tsx

@@ -71,6 +71,9 @@ describe('useInlineErrors', function () {
           list: { monitors: [], page: 1, perPage: 10, total: null },
           loading: { monitorList: false, serviceLocations: false },
           locations: [],
+          syntheticsService: {
+            loading: false,
+          },
         },
         1641081600000,
         true,

x-pack/plugins/uptime/public/components/monitor_management/hooks/use_inline_errors_count.test.tsx

@@ -70,6 +70,9 @@ describe('useInlineErrorsCount', function () {
           list: { monitors: [], page: 1, perPage: 10, total: null },
           loading: { monitorList: false, serviceLocations: false },
           locations: [],
+          syntheticsService: {
+            loading: false,
+          },
         },
         1641081600000,
       ],

x-pack/plugins/uptime/public/components/monitor_management/hooks/use_locations.test.tsx

@@ -45,6 +45,9 @@ describe('useExpViewTimeRange', function () {
           monitorList: false,
           serviceLocations: loading,
         },
+        syntheticsService: {
+          loading: false,
+        },
       },
     };
 

x-pack/plugins/uptime/public/components/monitor_management/hooks/use_service_allowed.ts

@@ -0,0 +1,21 @@
+/*
+ * 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 { useDispatch, useSelector } from 'react-redux';
+import { useEffect } from 'react';
+import { syntheticsServiceAllowedSelector } from '../../../state/selectors';
+import { getSyntheticsServiceAllowed } from '../../../state/actions';
+
+export const useSyntheticsServiceAllowed = () => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(getSyntheticsServiceAllowed.get());
+  }, [dispatch]);
+
+  return useSelector(syntheticsServiceAllowedSelector);
+};

x-pack/plugins/uptime/public/components/monitor_management/monitor_list/invalid_monitors.tsx

@@ -6,8 +6,10 @@
  */
 
 import React from 'react';
+import { useSelector } from 'react-redux';
 import { MonitorManagementList, MonitorManagementListPageState } from './monitor_list';
 import { MonitorManagementListResult, Ping } from '../../../../common/runtime_types';
+import { monitorManagementListSelector } from '../../../state/selectors';
 
 interface Props {
   loading: boolean;
@@ -31,6 +33,8 @@ export const InvalidMonitors = ({
 
   const startIndex = (pageIndex - 1) * pageSize;
 
+  const monitorList = useSelector(monitorManagementListSelector);
+
   return (
     <MonitorManagementList
       pageState={pageState}
@@ -43,7 +47,8 @@ export const InvalidMonitors = ({
         },
         error: { monitorList: null, serviceLocations: null },
         loading: { monitorList: summariesLoading, serviceLocations: false },
-        locations: [],
+        locations: monitorList.locations,
+        syntheticsService: monitorList.syntheticsService,
       }}
       onPageStateChange={onPageStateChange}
       onUpdate={onUpdate}

x-pack/plugins/uptime/public/components/monitor_management/monitor_list/monitor_list.test.tsx

@@ -51,6 +51,9 @@ describe('<MonitorManagementList />', () => {
         monitorList: true,
         serviceLocations: false,
       },
+      syntheticsService: {
+        loading: false,
+      },
     } as MonitorManagementListState,
   };