From 634b68d273e284eef1b836072394a2808b200494 Mon Sep 17 00:00:00 2001 From: Panagiota Mitsopoulou Date: Wed, 6 Mar 2024 00:09:38 +0100 Subject: [PATCH] successfully render first slo pages --- .../observability/public/plugin.ts | 30 ++++++++++++------- .../slo/common/locators/paths.ts | 22 +++++++------- .../observability_solution/slo/kibana.jsonc | 3 +- .../slo/public/application.tsx | 10 ++++--- .../slo/public/context/plugin_context.tsx | 4 +-- .../common/burn_rate_rule_flyout.tsx | 8 ++--- .../slo/public/pages/slos/slos.tsx | 6 ++-- .../slo/public/plugin.ts | 10 +++++-- .../slo/public/routes/routes.tsx | 27 +++++++++++++++++ .../slo/public/types.ts | 7 ++++- 10 files changed, 88 insertions(+), 39 deletions(-) diff --git a/x-pack/plugins/observability_solution/observability/public/plugin.ts b/x-pack/plugins/observability_solution/observability/public/plugin.ts index 6fbaaae7f375e..c7b626dda33f6 100644 --- 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 index a7dc31f9c36c4..1a2a86d787c1a 100644 --- 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 index e7f65402f659a..c2377b3efca12 100644 --- 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 index 8173215232502..6a6e0290aa3f3 100644 --- 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; 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, }} > @@ -103,10 +108,7 @@ export const renderApp = ({ data-test-subj="observabilityMainContainer" > - <> -

Hello

- - + 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 index 12bd1d332173d..2bc6752b159af 100644 --- 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; } diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/burn_rate_rule_flyout.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/burn_rate_rule_flyout.tsx index 85d0471277e2a..3fd5bb764ca39 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/burn_rate_rule_flyout.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/burn_rate_rule_flyout.tsx @@ -32,7 +32,7 @@ export function BurnRateRuleFlyout({ triggersActionsUi: { getAddRuleFlyout: AddRuleFlyout }, } = useKibana().services; - const filteredRuleTypes = useGetFilteredRuleTypes(); + // const filteredRuleTypes = useGetFilteredRuleTypes(); const queryClient = useQueryClient(); @@ -40,7 +40,7 @@ export function BurnRateRuleFlyout({ if (setIsAddRuleFlyoutOpen) { queryClient.invalidateQueries({ queryKey: sloKeys.rules(), exact: false }); } else { - navigateToUrl(basePath.prepend(paths.observability.slos)); + navigateToUrl(basePath.prepend(paths.slos)); } }; @@ -48,7 +48,7 @@ export function BurnRateRuleFlyout({ if (setIsAddRuleFlyoutOpen) { setIsAddRuleFlyoutOpen(false); } else { - navigateToUrl(basePath.prepend(paths.observability.slos)); + navigateToUrl(basePath.prepend(paths.slos)); } }; @@ -56,7 +56,7 @@ export function BurnRateRuleFlyout({ , ], }} topSearchBar={} diff --git a/x-pack/plugins/observability_solution/slo/public/plugin.ts b/x-pack/plugins/observability_solution/slo/public/plugin.ts index 8d7705a631a2c..4b2fb7b085b4f 100644 --- 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 @@ -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 index dd16cbd795259..8aac8e7e19779 100644 --- 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 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 ; + }, + 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 index 4ac0b15e9f18c..78451eba0f39b 100644 --- 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;