[Uptime] Move uptime to new solution nav (elastic#100905) (elastic#10…

…1271)

* Expose options to customize the route matching

* Add more comments

* move uptime to new solution nav

* push

* update test

* add an extra breadcrumb

Co-authored-by: Felix Stürmer <stuermer@weltenwort.de>

Co-authored-by: Shahzad <shahzad.muhammad@elastic.co>
Co-authored-by: Felix Stürmer <stuermer@weltenwort.de>

x-pack/plugins/uptime/kibana.json

@@ -8,7 +8,6 @@
   "optionalPlugins": [
     "data",
     "home",
-    "observability",
     "ml",
     "fleet"
   ],
@@ -18,7 +17,8 @@
     "features",
     "licensing",
     "triggersActionsUi",
-    "usageCollection"
+    "usageCollection",
+    "observability"
   ],
   "server": true,
   "ui": true,
@@ -31,4 +31,4 @@
     "data",
     "ml"
   ]
-}
+}

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

@@ -12,6 +12,8 @@ import {
   PluginInitializerContext,
   AppMountParameters,
 } from 'kibana/public';
+import { of } from 'rxjs';
+import { i18n } from '@kbn/i18n';
 import { DEFAULT_APP_CATEGORIES } from '../../../../../src/core/public';
 import {
   FeatureCatalogueCategory,
@@ -28,7 +30,11 @@ import {
 } from '../../../../../src/plugins/data/public';
 import { alertTypeInitializers } from '../lib/alert_types';
 import { FleetStart } from '../../../fleet/public';
-import { FetchDataParams, ObservabilityPublicSetup } from '../../../observability/public';
+import {
+  FetchDataParams,
+  ObservabilityPublicSetup,
+  ObservabilityPublicStart,
+} from '../../../observability/public';
 import { PLUGIN } from '../../common/constants/plugin';
 import { IStorageWrapper } from '../../../../../src/plugins/kibana_utils/public';
 import {
@@ -48,6 +54,7 @@ export interface ClientPluginsStart {
   data: DataPublicPluginStart;
   triggersActionsUi: TriggersAndActionsUIPublicPluginStart;
   fleet?: FleetStart;
+  observability: ObservabilityPublicStart;
 }
 
 export interface UptimePluginServices extends Partial<CoreStart> {
@@ -83,21 +90,46 @@ export class UptimePlugin
       return UptimeDataHelper(coreStart);
     };
 
-    if (plugins.observability) {
-      plugins.observability.dashboard.register({
-        appName: 'synthetics',
-        hasData: async () => {
-          const dataHelper = await getUptimeDataHelper();
-          const status = await dataHelper.indexStatus();
-          return { hasData: status.docCount > 0, indices: status.indices };
-        },
-        fetchData: async (params: FetchDataParams) => {
-          const dataHelper = await getUptimeDataHelper();
-          return await dataHelper.overviewData(params);
-        },
-      });
-    }
+    plugins.observability.dashboard.register({
+      appName: 'synthetics',
+      hasData: async () => {
+        const dataHelper = await getUptimeDataHelper();
+        const status = await dataHelper.indexStatus();
+        return { hasData: status.docCount > 0, indices: status.indices };
+      },
+      fetchData: async (params: FetchDataParams) => {
+        const dataHelper = await getUptimeDataHelper();
+        return await dataHelper.overviewData(params);
+      },
+    });
 
+    plugins.observability.navigation.registerSections(
+      of([
+        {
+          label: 'Uptime',
+          sortKey: 200,
+          entries: [
+            {
+              label: i18n.translate('xpack.uptime.overview.heading', {
+                defaultMessage: 'Monitoring overview',
+              }),
+              app: 'uptime',
+              path: '/',
+              matchFullPath: true,
+              ignoreTrailingSlash: true,
+            },
+            {
+              label: i18n.translate('xpack.uptime.certificatesPage.heading', {
+                defaultMessage: 'TLS Certificates',
+              }),
+              app: 'uptime',
+              path: '/certificates',
+              matchFullPath: true,
+            },
+          ],
+        },
+      ])
+    );
     core.application.register({
       id: PLUGIN.ID,
       euiIconType: 'logoObservability',

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

@@ -122,6 +122,7 @@ const Application = (props: UptimeAppProps) => {
               storage,
               data: startPlugins.data,
               triggersActionsUi: startPlugins.triggersActionsUi,
+              observability: startPlugins.observability,
             }}
           >
             <Router history={appMountParameters.history}>

x-pack/plugins/uptime/public/components/certificates/certificate_title.tsx

@@ -0,0 +1,25 @@
+/*
+ * 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 React from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { useSelector } from 'react-redux';
+import { certificatesSelector } from '../../state/certificates/certificates';
+
+export const CertificateTitle = () => {
+  const { data: certificates } = useSelector(certificatesSelector);
+
+  return (
+    <FormattedMessage
+      id="xpack.uptime.certificates.heading"
+      defaultMessage="TLS Certificates ({total})"
+      values={{
+        total: <span data-test-subj="uptimeCertTotal">{certificates?.total ?? 0}</span>,
+      }}
+    />
+  );
+};

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

@@ -49,7 +49,7 @@ describe('ActionMenuContent', () => {
 
     // this href value is mocked, so it doesn't correspond to the real link
     // that Kibana core services will provide
-    expect(addDataAnchor.getAttribute('href')).toBe('/app/uptime');
+    expect(addDataAnchor.getAttribute('href')).toBe('/home#/tutorial/uptimeMonitors');
     expect(getByText('Add data'));
   });
 });

x-pack/plugins/uptime/public/components/monitor/monitor_title.test.tsx

@@ -48,38 +48,6 @@ describe('MonitorTitle component', () => {
     },
   };
 
-  const defaultTCPMonitorStatus: Ping = {
-    docId: 'few213kl',
-    timestamp: moment(new Date()).subtract(15, 'm').toString(),
-    monitor: {
-      duration: {
-        us: 1234567,
-      },
-      id: 'tcp',
-      status: 'up',
-      type: 'tcp',
-    },
-    url: {
-      full: 'https://www.elastic.co/',
-    },
-  };
-
-  const defaultICMPMonitorStatus: Ping = {
-    docId: 'few213kl',
-    timestamp: moment(new Date()).subtract(15, 'm').toString(),
-    monitor: {
-      duration: {
-        us: 1234567,
-      },
-      id: 'icmp',
-      status: 'up',
-      type: 'icmp',
-    },
-    url: {
-      full: 'https://www.elastic.co/',
-    },
-  };
-
   const defaultBrowserMonitorStatus: Ping = {
     docId: 'few213kl',
     timestamp: moment(new Date()).subtract(15, 'm').toString(),
@@ -145,37 +113,4 @@ describe('MonitorTitle component', () => {
     expect(betaLink.href).toBe('https://www.elastic.co/what-is/synthetic-monitoring');
     expect(screen.getByText('Browser (BETA)')).toBeInTheDocument();
   });
-
-  it('does not render beta disclaimer for http', () => {
-    render(<MonitorPageTitle />, {
-      state: { monitorStatus: { status: defaultMonitorStatus, loading: false } },
-    });
-    expect(screen.getByText('HTTP ping')).toBeInTheDocument();
-    expect(screen.queryByText(/BETA/)).not.toBeInTheDocument();
-    expect(
-      screen.queryByRole('link', { name: 'See more External link (opens in a new tab or window)' })
-    ).not.toBeInTheDocument();
-  });
-
-  it('does not render beta disclaimer for tcp', () => {
-    render(<MonitorPageTitle />, {
-      state: { monitorStatus: { status: defaultTCPMonitorStatus, loading: false } },
-    });
-    expect(screen.getByText('TCP ping')).toBeInTheDocument();
-    expect(screen.queryByText(/BETA/)).not.toBeInTheDocument();
-    expect(
-      screen.queryByRole('link', { name: 'See more External link (opens in a new tab or window)' })
-    ).not.toBeInTheDocument();
-  });
-
-  it('renders badge and does not render beta disclaimer for icmp', () => {
-    render(<MonitorPageTitle />, {
-      state: { monitorStatus: { status: defaultICMPMonitorStatus, loading: false } },
-    });
-    expect(screen.getByText('ICMP ping')).toBeInTheDocument();
-    expect(screen.queryByText(/BETA/)).not.toBeInTheDocument();
-    expect(
-      screen.queryByRole('link', { name: 'See more External link (opens in a new tab or window)' })
-    ).not.toBeInTheDocument();
-  });
 });