successfully render first slo pages

elastic · Mar 6, 2024 · 634b68d · 634b68d
1 parent 41fc81c
commit 634b68d
Show file tree

Hide file tree

Showing 10 changed files with 88 additions and 39 deletions.
diff --git a/x-pack/plugins/observability_solution/observability/public/plugin.ts b/x-pack/plugins/observability_solution/observability/public/plugin.ts
@@ -204,15 +204,15 @@ export class Plugin
         },
       ],
     },
-    {
-      id: 'slos',
-      title: i18n.translate('xpack.observability.slosLinkTitle', {
-        defaultMessage: 'SLOs',
-      }),
-      visibleIn: [],
-      order: 8002,
-      path: SLOS_PATH,
-    },
+    // {
+    //   id: 'slos',
+    //   title: i18n.translate('xpack.observability.slosLinkTitle', {
+    //     defaultMessage: 'SLOs',
+    //   }),
+    //   visibleIn: [],
+    //   order: 8002,
+    //   path: SLOS_PATH,
+    // },
     getCasesDeepLinks({
       basePath: CASES_PATH,
       extend: {
@@ -377,6 +377,16 @@ export class Plugin
                     ]
                   : [];
 
+              const sloLink = [
+                {
+                  label: i18n.translate('xpack.observability.sloLinkTitle', {
+                    defaultMessage: 'SLOs',
+                  }),
+                  app: 'observabilitySLO',
+                  path: '/slos',
+                },
+              ];
+
               // Reformat the visible links to be NavigationEntry objects instead of
               // AppDeepLink objects.
               //
@@ -399,7 +409,7 @@ export class Plugin
                 {
                   label: '',
                   sortKey: 100,
-                  entries: [...overviewLink, ...otherLinks, ...aiAssistantLink],
+                  entries: [...overviewLink, ...sloLink, ...otherLinks, ...aiAssistantLink],
                 },
               ];
             })

diff --git a/x-pack/plugins/observability_solution/slo/common/locators/paths.ts b/x-pack/plugins/observability_solution/slo/common/locators/paths.ts
@@ -4,7 +4,8 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-
+export const BASE_PATH = '/app/observabilitySLO';
+export const ROOT_PATH = '/' as const;
 export const SLOS_PATH = '/slos' as const;
 export const SLOS_WELCOME_PATH = '/slos/welcome' as const;
 export const SLO_DETAIL_PATH = '/slos/:sloId' as const;
@@ -13,16 +14,17 @@ export const SLO_EDIT_PATH = '/slos/edit/:sloId' as const;
 export const SLOS_OUTDATED_DEFINITIONS_PATH = '/slos/outdated-definitions' as const;
 
 export const paths = {
-  slos: `${SLOS_PATH}`,
-  slosWelcome: `${SLOS_WELCOME_PATH}`,
-  slosOutdatedDefinitions: `${SLOS_OUTDATED_DEFINITIONS_PATH}`,
-  sloCreate: `${SLO_CREATE_PATH}`,
-  sloCreateWithEncodedForm: (encodedParams: string) => `${SLO_CREATE_PATH}?_a=${encodedParams}`,
-  sloEdit: (sloId: string) => `${SLOS_PATH}/edit/${encodeURI(sloId)}`,
+  slos: `${BASE_PATH}${SLOS_PATH}`,
+  slosWelcome: `${BASE_PATH}${SLOS_WELCOME_PATH}`,
+  slosOutdatedDefinitions: `${BASE_PATH}${SLOS_OUTDATED_DEFINITIONS_PATH}`,
+  sloCreate: `${BASE_PATH}${SLO_CREATE_PATH}`,
+  sloCreateWithEncodedForm: (encodedParams: string) =>
+    `${BASE_PATH}${SLO_CREATE_PATH}?_a=${encodedParams}`,
+  sloEdit: (sloId: string) => `${BASE_PATH}${SLOS_PATH}/edit/${encodeURI(sloId)}`,
   sloEditWithEncodedForm: (sloId: string, encodedParams: string) =>
-    `${SLOS_PATH}/edit/${encodeURI(sloId)}?_a=${encodedParams}`,
+    `${BASE_PATH}${SLOS_PATH}/edit/${encodeURI(sloId)}?_a=${encodedParams}`,
   sloDetails: (sloId: string, instanceId?: string) =>
     !!instanceId
-      ? `${SLOS_PATH}/${encodeURI(sloId)}?instanceId=${encodeURI(instanceId)}`
-      : `${SLOS_PATH}/${encodeURI(sloId)}`,
+      ? `${BASE_PATH}${SLOS_PATH}/${encodeURI(sloId)}?instanceId=${encodeURI(instanceId)}`
+      : `${BASE_PATH}${SLOS_PATH}/${encodeURI(sloId)}`,
 };
diff --git a/x-pack/plugins/observability_solution/slo/kibana.jsonc b/x-pack/plugins/observability_solution/slo/kibana.jsonc
@@ -32,7 +32,8 @@
       "embeddable",
       "presentationUtil",
       "features",
-      "licensing"
+      "licensing",
+      "observabilityAIAssistant"
     ],
     "requiredBundles": [
       "kibanaReact",

diff --git a/x-pack/plugins/observability_solution/slo/public/application.tsx b/x-pack/plugins/observability_solution/slo/public/application.tsx
@@ -17,6 +17,7 @@ import { Router, Routes, Route } from '@kbn/shared-ux-router';
 import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
 import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
 import { Storage } from '@kbn/kibana-utils-plugin/public';
+import { ObservabilityRuleTypeRegistry } from '@kbn/observability-plugin/public';
 
 import { PluginContext } from './context/plugin_context'; // TODO SLO: rethink about this one, now it is a copy paste
 
@@ -52,15 +53,18 @@ export const renderApp = ({
   isDev,
   kibanaVersion,
   isServerless,
+  observabilityRuleTypeRegistry,
 }: {
   core: CoreStart;
   plugins: SloPublicPluginsStart;
   appMountParameters: AppMountParameters;
+  observabilityRuleTypeRegistry: ObservabilityRuleTypeRegistry;
   ObservabilityPageTemplate: React.ComponentType<LazyObservabilityPageTemplateProps>;
   isDev?: boolean;
   kibanaVersion: string;
   isServerless?: boolean;
 }) => {
+  console.log(observabilityRuleTypeRegistry, '!!observabilityRuleTypeRegistry');
   const { element, history, theme$ } = appMountParameters;
   const i18nCore = core.i18n;
   const isDarkMode = core.theme.getTheme().darkMode;
@@ -93,6 +97,7 @@ export const renderApp = ({
                   // isDev,
                   appMountParameters,
                   ObservabilityPageTemplate,
+                  observabilityRuleTypeRegistry,
                 }}
               >
                 <Router history={history}>
@@ -103,10 +108,7 @@ export const renderApp = ({
                         data-test-subj="observabilityMainContainer"
                       >
                         <QueryClientProvider client={queryClient}>
-                          <>
-                            <h1>Hello</h1>
-                            <App />
-                          </>
+                          <App />
                         </QueryClientProvider>
                       </RedirectAppLinks>
                     </i18nCore.Context>

diff --git a/x-pack/plugins/observability_solution/slo/public/context/plugin_context.tsx b/x-pack/plugins/observability_solution/slo/public/context/plugin_context.tsx
@@ -8,14 +8,14 @@
 import { createContext } from 'react';
 import type { AppMountParameters } from '@kbn/core/public';
 import type { LazyObservabilityPageTemplateProps } from '@kbn/observability-shared-plugin/public';
-import type { ObservabilityRuleTypeRegistry } from '../../rules/create_observability_rule_type_registry';
+import type { ObservabilityRuleTypeRegistry } from '@kbn/observability-plugin/public';
 import type { ConfigSchema } from '../../plugin';
 
 export interface PluginContextValue {
   isDev?: boolean;
   // config: ConfigSchema;
   appMountParameters?: AppMountParameters;
-  // observabilityRuleTypeRegistry: ObservabilityRuleTypeRegistry;
+  observabilityRuleTypeRegistry: ObservabilityRuleTypeRegistry;
   ObservabilityPageTemplate: React.ComponentType<LazyObservabilityPageTemplateProps>;
 }
 

diff --git a/.../observability_solution/slo/public/pages/slos/components/common/burn_rate_rule_flyout.tsx b/.../observability_solution/slo/public/pages/slos/components/common/burn_rate_rule_flyout.tsx
@@ -32,31 +32,31 @@ export function BurnRateRuleFlyout({
     triggersActionsUi: { getAddRuleFlyout: AddRuleFlyout },
   } = useKibana().services;
 
-  const filteredRuleTypes = useGetFilteredRuleTypes();
+  // const filteredRuleTypes = useGetFilteredRuleTypes();
 
   const queryClient = useQueryClient();
 
   const handleSavedRule = async () => {
     if (setIsAddRuleFlyoutOpen) {
       queryClient.invalidateQueries({ queryKey: sloKeys.rules(), exact: false });
     } else {
-      navigateToUrl(basePath.prepend(paths.observability.slos));
+      navigateToUrl(basePath.prepend(paths.slos));
     }
   };
 
   const handleCloseRuleFlyout = async () => {
     if (setIsAddRuleFlyoutOpen) {
       setIsAddRuleFlyoutOpen(false);
     } else {
-      navigateToUrl(basePath.prepend(paths.observability.slos));
+      navigateToUrl(basePath.prepend(paths.slos));
     }
   };
 
   return isAddRuleFlyoutOpen && slo ? (
     <AddRuleFlyout
       canChangeTrigger={canChangeTrigger}
       consumer={sloFeatureId}
-      filteredRuleTypes={filteredRuleTypes}
+      // filteredRuleTypes={filteredRuleTypes}
       ruleTypeId={SLO_BURN_RATE_RULE_TYPE_ID}
       initialValues={{ name: `${slo.name} Burn Rate rule`, params: { sloId: slo.id } }}
       onSave={handleSavedRule}

diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slos/slos.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slos/slos.tsx
@@ -45,7 +45,7 @@ export function SlosPage() {
   useBreadcrumbs([
     {
       href: basePath.prepend(paths.slos),
-      text: i18n.translate('xpack.observability.breadcrumbs.slosLinkText', {
+      text: i18n.translate('xpack.slo.breadcrumbs.slosLinkText', {
         defaultMessage: 'SLOs',
       }),
       deepLinkId: 'observability-overview:slos',
@@ -62,9 +62,7 @@ export function SlosPage() {
     <ObservabilityPageTemplate
       data-test-subj="slosPage"
       pageHeader={{
-        pageTitle: i18n.translate('xpack.slos.heading', {
-          defaultMessage: 'SLOs',
-        }),
+        pageTitle: i18n.translate('xpack.slo.slosPage.', { defaultMessage: 'SLOs' }),
         rightSideItems: [<CreateSloBtn />, <FeedbackButton />],
       }}
       topSearchBar={<SloListSearchBar />}

diff --git a/x-pack/plugins/observability_solution/slo/public/plugin.ts b/x-pack/plugins/observability_solution/slo/public/plugin.ts
@@ -4,6 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+import { i18n } from '@kbn/i18n';
 
 import {
   App,
@@ -22,7 +23,8 @@ import type { SloPublicSetup, SloPublicStart } from './types';
 import { SloDetailsLocatorDefinition } from './locators/slo_details';
 import { SloEditLocatorDefinition } from './locators/slo_edit';
 import { SloListLocatorDefinition } from './locators/slo_list';
-import { getCreateSLOFlyoutLazy } from './pages/slo_edit/shared_flyout/get_create_slo_flyout';
+import { BASE_PATH } from '../common/locators/paths';
+// import { getCreateSLOFlyoutLazy } from './pages/slo_edit/shared_flyout/get_create_slo_flyout';
 
 export class SloPlugin
   implements Plugin<SloPublicSetup, SloPublicStart, SloPublicPluginsSetup, SloPublicPluginsStart>
@@ -42,11 +44,13 @@ export class SloPlugin
       const { renderApp } = await import('./application');
       const [coreStart, pluginsStart] = await coreSetup.getStartServices();
       const { ruleTypeRegistry, actionTypeRegistry } = pluginsStart.triggersActionsUi;
+      const { observabilityRuleTypeRegistry } = pluginsStart.observability;
 
       return renderApp({
         appMountParameters: params,
         core: coreStart,
         // isDev: this.initContext.env.mode.dev,
+        observabilityRuleTypeRegistry,
         kibanaVersion,
         ObservabilityPageTemplate: pluginsStart.observabilityShared.navigation.PageTemplate,
         plugins: { ...pluginsStart, ruleTypeRegistry, actionTypeRegistry },
@@ -59,7 +63,7 @@ export class SloPlugin
       title: PLUGIN_NAME,
       order: 8001, // 8100 adds it after Cases, 8000 adds it before alerts, 8001 adds it after Alerts
       euiIconType: 'logoObservability',
-      appRoute: '/app/slos',
+      appRoute: BASE_PATH,
       category: DEFAULT_APP_CATEGORIES.observability,
       // Do I need deep links
       mount,
@@ -124,7 +128,7 @@ export class SloPlugin
 
   // TODO SLO: register alert table configuration
   public start(coreStart: CoreStart, plugins: SloPublicPluginsStart) {
-    const kibanaVersion = this.initContext.env.packageInfo.version;
+    // const kibanaVersion = this.initContext.env.packageInfo.version;
     const { ruleTypeRegistry, actionTypeRegistry } = plugins.triggersActionsUi;
     return {
       // getCreateSLOFlyout: getCreateSLOFlyoutLazy({

diff --git a/x-pack/plugins/observability_solution/slo/public/routes/routes.tsx b/x-pack/plugins/observability_solution/slo/public/routes/routes.tsx
@@ -6,6 +6,8 @@
  */
 
 import React from 'react';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { useHistory, useLocation } from 'react-router-dom';
 import { SlosPage } from '../pages/slos/slos';
 import { SlosWelcomePage } from '../pages/slos_welcome/slos_welcome';
 import { SloDetailsPage } from '../pages/slo_details/slo_details';
@@ -17,10 +19,35 @@ import {
   SLO_CREATE_PATH,
   SLO_DETAIL_PATH,
   SLO_EDIT_PATH,
+  ROOT_PATH,
 } from '../../common/locators/paths';
 import { SlosOutdatedDefinitions } from '../pages/slo_outdated_definitions';
 
+// Note: React Router DOM <Redirect> component was not working here
+// so I've recreated this simple version for this purpose.
+function SimpleRedirect({ to, redirectToApp }: { to: string; redirectToApp?: string }) {
+  const {
+    application: { navigateToApp },
+  } = useKibana().services;
+  const history = useHistory();
+  const { search, hash } = useLocation();
+
+  if (redirectToApp) {
+    navigateToApp(redirectToApp, { path: `/${search}${hash}`, replace: true });
+  } else if (to) {
+    history.replace(to);
+  }
+  return null;
+}
+
 export const routes = {
+  [ROOT_PATH]: {
+    handler: () => {
+      return <SimpleRedirect to={SLOS_PATH} />;
+    },
+    params: {},
+    exact: true,
+  },
   [SLOS_PATH]: {
     handler: () => {
       console.log('!!Slos Page');

diff --git a/x-pack/plugins/observability_solution/slo/public/types.ts b/x-pack/plugins/observability_solution/slo/public/types.ts
@@ -33,8 +33,11 @@ import {
   RuleTypeRegistryContract,
 } from '@kbn/triggers-actions-ui-plugin/public';
 import type { CloudStart } from '@kbn/cloud-plugin/public';
+import {
+  ObservabilityAIAssistantPluginSetup,
+  ObservabilityAIAssistantPluginStart,
+} from '@kbn/observability-ai-assistant-plugin/public';
 import { SloPlugin } from './plugin';
-
 export interface SloPublicPluginsSetup {
   data: DataPublicPluginSetup;
   observability: ObservabilityPublicSetup;
@@ -46,6 +49,7 @@ export interface SloPublicPluginsSetup {
   uiActions: UiActionsSetup;
   serverless?: ServerlessPluginSetup;
   presentationUtil?: PresentationUtilPluginStart;
+  observabilityAIAssistant: ObservabilityAIAssistantPluginSetup;
 }
 
 export interface SloPublicPluginsStart {
@@ -64,6 +68,7 @@ export interface SloPublicPluginsStart {
   data: DataPublicPluginStart;
   dataViews: DataViewsPublicPluginStart;
   ruleTypeRegistry: RuleTypeRegistryContract;
+  observabilityAIAssistant: ObservabilityAIAssistantPluginStart;
 }
 
 export type SloPublicSetup = ReturnType<SloPlugin['setup']>;