= (props: Props) => ;
+
+const defaultProps = {
+ slo: buildSlo(),
+ historicalSummary: historicalSummaryData.find((datum) => datum.sloId === HEALTHY_ROLLING_SLO)!
+ .data,
+ historicalSummaryLoading: false,
+};
+
+export const WithHistoricalData = Template.bind({});
+WithHistoricalData.args = { ...defaultProps };
+
+export const WithLoadingData = Template.bind({});
+WithLoadingData.args = { ...defaultProps, historicalSummaryLoading: true };
diff --git a/x-pack/plugins/observability_solution/slos/public/pages/slos/components/slo_summary.tsx b/x-pack/plugins/observability_solution/slos/public/pages/slos/components/slo_summary.tsx
new file mode 100644
index 0000000000000..77d23d6301aed
--- /dev/null
+++ b/x-pack/plugins/observability_solution/slos/public/pages/slos/components/slo_summary.tsx
@@ -0,0 +1,97 @@
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem, EuiStat } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { HistoricalSummaryResponse, SLOWithSummaryResponse } from '@kbn/slo-schema';
+
+import { useSloFormattedSummary } from '../hooks/use_slo_summary';
+import { formatHistoricalData } from '../../../utils/slo/chart_data_formatter';
+import { SloSparkline } from './slo_sparkline';
+
+export interface Props {
+ slo: SLOWithSummaryResponse;
+ historicalSummary?: HistoricalSummaryResponse[];
+ historicalSummaryLoading: boolean;
+}
+
+export function SloSummary({ slo, historicalSummary = [], historicalSummaryLoading }: Props) {
+ const { sliValue, sloTarget, errorBudgetRemaining } = useSloFormattedSummary(slo);
+ const isSloFailed = slo.summary.status === 'VIOLATED' || slo.summary.status === 'DEGRADING';
+ const titleColor = isSloFailed ? 'danger' : '';
+ const errorBudgetBurnDownData = formatHistoricalData(historicalSummary, 'error_budget_remaining');
+ const historicalSliData = formatHistoricalData(historicalSummary, 'sli_value');
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/x-pack/plugins/observability_solution/slos/public/pages/slos/components/slos_view.tsx b/x-pack/plugins/observability_solution/slos/public/pages/slos/components/slos_view.tsx
new file mode 100644
index 0000000000000..1b5618a6b43b4
--- /dev/null
+++ b/x-pack/plugins/observability_solution/slos/public/pages/slos/components/slos_view.tsx
@@ -0,0 +1,54 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+import { EuiFlexItem } from '@elastic/eui';
+import { SLOWithSummaryResponse } from '@kbn/slo-schema';
+import React from 'react';
+// import { SloListCardView } from './card_view/slos_card_view';
+// import { SloListCompactView } from './compact_view/slo_list_compact_view';
+// import { SloListEmpty } from './slo_list_empty';
+// import { SloListError } from './slo_list_error';
+// import { SloListView } from './slo_list_view/slo_list_view';
+import { SLOView } from './toggle_slo_view';
+
+export interface Props {
+ sloList: SLOWithSummaryResponse[];
+ loading: boolean;
+ error: boolean;
+ sloView: SLOView;
+}
+
+export function SlosView() {
+ return (
+
+ {i18n.translate('xpack.slos.slosView.div.slosViewLabel', { defaultMessage: 'Slos View' })}
+
+ );
+}
+
+// export function SlosView({ sloList, loading, error, sloView }: Props) {
+// if (!loading && !error && sloList.length === 0) {
+// return ;
+// }
+// if (!loading && error) {
+// return ;
+// }
+
+// return sloView === 'cardView' ? (
+//
+//
+//
+// ) : (
+//
+// {sloView === 'compactView' && (
+//
+// )}
+// {sloView === 'listView' && }
+//
+// );
+// }
diff --git a/x-pack/plugins/observability_solution/slos/public/pages/slos/components/toggle_slo_view.tsx b/x-pack/plugins/observability_solution/slos/public/pages/slos/components/toggle_slo_view.tsx
new file mode 100644
index 0000000000000..7859bdc9f592d
--- /dev/null
+++ b/x-pack/plugins/observability_solution/slos/public/pages/slos/components/toggle_slo_view.tsx
@@ -0,0 +1,107 @@
+/*
+ * 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 { EuiButtonGroup, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { FindSLOResponse } from '@kbn/slo-schema';
+import React from 'react';
+import type { SearchState } from '../../../hooks/use_url_search_state';
+import { SLOSortBy } from './common/sort_by_select';
+import { SloGroupBy } from './slo_list_group_by';
+export type SLOView = 'cardView' | 'listView' | 'compactView';
+
+interface Props {
+ onChangeView: (view: SLOView) => void;
+ onStateChange: (newState: Partial) => void;
+ sloView: SLOView;
+ state: SearchState;
+ sloList?: FindSLOResponse;
+ loading: boolean;
+}
+
+const toggleButtonsIcons = [
+ {
+ id: `cardView`,
+ label: 'Card View',
+ iconType: 'apps',
+ 'data-test-subj': 'sloCardViewButton',
+ },
+ {
+ id: `listView`,
+ label: 'List View',
+ iconType: 'list',
+ 'data-test-subj': 'sloListViewButton',
+ },
+ {
+ iconType: 'tableDensityCompact',
+ id: 'compactView',
+ label: i18n.translate('xpack.slos.listView.compactViewLabel', {
+ defaultMessage: 'Compact view',
+ }),
+ },
+];
+
+export function ToggleSLOView({
+ sloView,
+ onChangeView,
+ onStateChange,
+ sloList,
+ state,
+ loading,
+}: Props) {
+ const total = sloList?.total ?? 0;
+ const pageSize = sloList?.perPage ?? 0;
+ const pageIndex = sloList?.page ?? 1;
+
+ const rangeStart = total === 0 ? 0 : pageSize * (pageIndex - 1) + 1;
+ const rangeEnd = Math.min(total, pageSize * (pageIndex - 1) + pageSize);
+
+ return (
+
+
+ {!state.groupBy && (
+
+
+ )}
+
+
+
+
+
+
+
+
+ onChangeView(id as SLOView)}
+ isIconOnly
+ isDisabled={loading}
+ />
+
+
+ );
+}
diff --git a/x-pack/plugins/observability_solution/slos/public/pages/slos/slos.tsx b/x-pack/plugins/observability_solution/slos/public/pages/slos/slos.tsx
new file mode 100644
index 0000000000000..9d8f545054c51
--- /dev/null
+++ b/x-pack/plugins/observability_solution/slos/public/pages/slos/slos.tsx
@@ -0,0 +1,89 @@
+/*
+ * 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.
+ */
+
+/*
+ * 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, { useEffect } from 'react';
+import { useBreadcrumbs } from '@kbn/observability-shared-plugin/public';
+
+import { i18n } from '@kbn/i18n';
+// apm does it like this
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { FeedbackButton } from './components/common/feedback_button';
+import { CreateSloBtn } from './components/common/create_slo_btn';
+import { SloListSearchBar } from './components/slo_list_search_bar';
+// For now copy from observability
+// import { useKibana } from '../../utils/kibana_react';
+
+import { usePluginContext } from '../../hooks/use_plugin_context';
+import { useLicense } from '../../hooks/use_license';
+import { useFetchSloList } from '../../hooks/use_fetch_slo_list';
+import { SloList } from './components/slo_list';
+import { paths } from '../../../common/locators/paths';
+// import { HeaderMenu } from '../overview/components/header_menu/header_menu';
+// import { SloOutdatedCallout } from '../../components/slo/slo_outdated_callout';
+
+export const SLO_PAGE_ID = 'slo-page-container';
+
+export function SlosPage() {
+ console.log('!!slos page');
+ const {
+ application: { navigateToUrl },
+ http: { basePath },
+ } = useKibana().services;
+ const { ObservabilityPageTemplate } = usePluginContext();
+ const { hasAtLeast } = useLicense();
+
+ const {
+ isLoading,
+ isError,
+ data: sloList,
+ } = useFetchSloList({
+ perPage: 0,
+ });
+ const { total } = sloList ?? { total: 0 };
+
+ useBreadcrumbs([
+ {
+ href: basePath.prepend(paths.slos),
+ text: i18n.translate('xpack.slos.breadcrumbs.slosLinkText', { defaultMessage: 'SLOs' }),
+ deepLinkId: 'observability-overview:slos',
+ },
+ ]);
+
+ useEffect(() => {
+ if ((!isLoading && total === 0) || hasAtLeast('platinum') === false || isError) {
+ navigateToUrl(basePath.prepend(paths.slosWelcome));
+ }
+ }, [basePath, hasAtLeast, isError, isLoading, navigateToUrl, total]);
+
+ return (
+ , ],
+ }}
+ topSearchBar={}
+ >
+ {/* */}
+ {/* */}
+
+
+ );
+}
+
+// export function SlosPage() {
+// return (
+// {i18n.translate('xpack.slos.slosPage.div.helloLabel', { defaultMessage: 'Hello' })}
+// );
+// }
diff --git a/x-pack/plugins/observability_solution/slos/public/plugin.ts b/x-pack/plugins/observability_solution/slos/public/plugin.ts
new file mode 100644
index 0000000000000..e62d29151c181
--- /dev/null
+++ b/x-pack/plugins/observability_solution/slos/public/plugin.ts
@@ -0,0 +1,57 @@
+/*
+ * 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 {
+ AppMountParameters,
+ CoreSetup,
+ CoreStart,
+ DEFAULT_APP_CATEGORIES,
+ Plugin,
+} from '@kbn/core/public';
+import { from } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { SlosPluginSetupDeps, SlosPluginStartDeps } from './types'; // TODO move later to type
+import { PLUGIN_NAME } from '../common';
+import type { SlosPluginSetup, SlosPluginStart } from './types';
+
+export class SlosPlugin implements Plugin {
+ public setup(core: CoreSetup, plugins: SlosPluginSetupDeps) /* : SlosPluginSetup*/ {
+ // plugins.observabilityShared.navigation.registerSections(from(core.getStartServices()).pipe(
+ // map(([]) => {
+ // return [
+ // ...(capabilities.slos.show ? [ { label: 'SLOs new'}] : [])
+ // ]
+ // })
+ // ));
+ // Register an application into the side navigation menu
+ core.application.register({
+ id: 'slos',
+ 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',
+ category: DEFAULT_APP_CATEGORIES.observability,
+ // Do I need deep links
+ async mount(params: AppMountParameters) {
+ const { renderApp } = await import('./application');
+ const [coreStart, depsStart] = await core.getStartServices();
+ return renderApp({
+ core: coreStart,
+ plugins: depsStart as SlosPluginStartDeps,
+ appMountParameters: params,
+ ObservabilityPageTemplate: depsStart.observabilityShared.navigation.PageTemplate,
+ });
+ },
+ });
+ }
+
+ public start(core: CoreStart, plugins: SlosPluginStartDeps) /* : SlosPluginStart*/ {
+ return {};
+ }
+
+ public stop() {}
+}
diff --git a/x-pack/plugins/observability_solution/slos/public/routes/routes.tsx b/x-pack/plugins/observability_solution/slos/public/routes/routes.tsx
new file mode 100644
index 0000000000000..45d705ce96348
--- /dev/null
+++ b/x-pack/plugins/observability_solution/slos/public/routes/routes.tsx
@@ -0,0 +1,95 @@
+/*
+ * 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 { useHistory, useLocation } from 'react-router-dom';
+// import { useKibana } from '../utils/kibana_react';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { SlosPage } from '../pages/slos/slos';
+// import { SlosWelcomePage } from '../pages/slos_welcome/slos_welcome';
+// import { SloDetailsPage } from '../pages/slo_details/slo_details';
+// import { SloEditPage } from '../pages/slo_edit/slo_edit';
+// import { SlosOutdatedDefinitions } from '../pages/slo_outdated_definitions';
+
+import {
+ SLOS_OUTDATED_DEFINITIONS_PATH,
+ SLOS_PATH,
+ SLOS_WELCOME_PATH,
+ SLO_CREATE_PATH,
+ SLO_DETAIL_PATH,
+ SLO_EDIT_PATH,
+} from '../../common/locators/paths';
+
+// 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');
+ return ;
+ },
+ params: {},
+ exact: true,
+ },
+ // [SLO_CREATE_PATH]: {
+ // handler: () => {
+ // return ;
+ // },
+ // params: {},
+ // exact: true,
+ // },
+ // [SLOS_WELCOME_PATH]: {
+ // handler: () => {
+ // return ;
+ // },
+ // params: {},
+ // exact: true,
+ // },
+ // [SLOS_OUTDATED_DEFINITIONS_PATH]: {
+ // handler: () => {
+ // return ;
+ // },
+ // params: {},
+ // exact: true,
+ // },
+ // [SLO_EDIT_PATH]: {
+ // handler: () => {
+ // return ;
+ // },
+ // params: {},
+ // exact: true,
+ // },
+ // [SLO_DETAIL_PATH]: {
+ // handler: () => {
+ // return ;
+ // },
+ // params: {},
+ // exact: true,
+ // },
+};
diff --git a/x-pack/plugins/observability_solution/slos/public/types.ts b/x-pack/plugins/observability_solution/slos/public/types.ts
new file mode 100644
index 0000000000000..3126608768699
--- /dev/null
+++ b/x-pack/plugins/observability_solution/slos/public/types.ts
@@ -0,0 +1,37 @@
+/*
+ * 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 {
+ ObservabilityPublicSetup,
+ ObservabilityPublicStart,
+} from '@kbn/observability-plugin/public';
+import type {
+ ObservabilitySharedPluginSetup,
+ ObservabilitySharedPluginStart,
+} from '@kbn/observability-shared-plugin/public';
+import type {
+ TriggersAndActionsUIPublicPluginSetup,
+ TriggersAndActionsUIPublicPluginStart,
+} from '@kbn/triggers-actions-ui-plugin/public';
+import type { NavigationPublicPluginStart } from '@kbn/navigation-plugin/public';
+import { SlosPlugin } from './plugin';
+
+export interface SlosPluginSetupDeps {
+ observability: ObservabilityPublicSetup;
+ observabilityShared: ObservabilitySharedPluginSetup;
+ triggersActionsUi: TriggersAndActionsUIPublicPluginSetup;
+}
+
+export interface SlosPluginStartDeps {
+ observability: ObservabilityPublicStart;
+ observabilityShared: ObservabilitySharedPluginStart;
+ triggersActionsUi: TriggersAndActionsUIPublicPluginStart;
+ navigation: NavigationPublicPluginStart;
+}
+
+export type SlosPluginSetup = ReturnType;
+export type SlosPluginStart = void;
diff --git a/x-pack/plugins/observability_solution/slos/public/utils/labels.ts b/x-pack/plugins/observability_solution/slos/public/utils/labels.ts
new file mode 100644
index 0000000000000..b220ac6337a1d
--- /dev/null
+++ b/x-pack/plugins/observability_solution/slos/public/utils/labels.ts
@@ -0,0 +1,30 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+export const INDICATOR_CUSTOM_KQL = i18n.translate('xpack.slos.indicators.customKql', {
+ defaultMessage: 'Custom KQL',
+});
+
+export const INDICATOR_CUSTOM_METRIC = i18n.translate('xpack.slos.indicators.customMetric', {
+ defaultMessage: 'Custom Metric',
+});
+
+export const INDICATOR_TIMESLICE_METRIC = i18n.translate('xpack.slos.indicators.timesliceMetric', {
+ defaultMessage: 'Timeslice Metric',
+});
+
+export const INDICATOR_HISTOGRAM = i18n.translate('xpack.slos.indicators.histogram', {
+ defaultMessage: 'Histogram Metric',
+});
+
+export const INDICATOR_APM_LATENCY = i18n.translate('xpack.slos.indicators.apmLatency', {
+ defaultMessage: 'APM latency',
+});
+
+export const INDICATOR_APM_AVAILABILITY = i18n.translate('xpack.slos.indicators.apmAvailability', {
+ defaultMessage: 'APM availability',
+});
diff --git a/x-pack/plugins/observability_solution/slos/server/index.ts b/x-pack/plugins/observability_solution/slos/server/index.ts
new file mode 100644
index 0000000000000..5d79cec7fa115
--- /dev/null
+++ b/x-pack/plugins/observability_solution/slos/server/index.ts
@@ -0,0 +1,11 @@
+import { PluginInitializerContext } from '../../../src/core/server';
+
+// This exports static code and TypeScript types,
+// as well as, Kibana Platform `plugin()` initializer.
+
+export async function plugin(initializerContext: PluginInitializerContext) {
+ const { SlosPlugin } = await import('./plugin');
+ return new SlosPlugin(initializerContext);
+}
+
+export type { SlosPluginSetup, SlosPluginStart } from './types';
diff --git a/x-pack/plugins/observability_solution/slos/server/plugin.ts b/x-pack/plugins/observability_solution/slos/server/plugin.ts
new file mode 100644
index 0000000000000..1d1df3919504f
--- /dev/null
+++ b/x-pack/plugins/observability_solution/slos/server/plugin.ts
@@ -0,0 +1,35 @@
+import {
+ PluginInitializerContext,
+ CoreSetup,
+ CoreStart,
+ Plugin,
+ Logger,
+} from '../../../src/core/server';
+
+import { SlosPluginSetup, SlosPluginStart } from './types';
+import { defineRoutes } from './routes';
+
+export class SlosPlugin implements Plugin {
+ private readonly logger: Logger;
+
+ constructor(initializerContext: PluginInitializerContext) {
+ this.logger = initializerContext.logger.get();
+ }
+
+ public setup(core: CoreSetup) {
+ this.logger.debug('slos: Setup');
+ const router = core.http.createRouter();
+
+ // Register server side APIs
+ defineRoutes(router);
+
+ return {};
+ }
+
+ public start(core: CoreStart) {
+ this.logger.debug('slos: Started');
+ return {};
+ }
+
+ public stop() {}
+}
diff --git a/x-pack/plugins/observability_solution/slos/server/routes/index.ts b/x-pack/plugins/observability_solution/slos/server/routes/index.ts
new file mode 100644
index 0000000000000..b13370fee031a
--- /dev/null
+++ b/x-pack/plugins/observability_solution/slos/server/routes/index.ts
@@ -0,0 +1,17 @@
+import { IRouter } from '../../../../src/core/server';
+
+export function defineRoutes(router: IRouter) {
+ router.get(
+ {
+ path: '/api/slos/example',
+ validate: false,
+ },
+ async (context, request, response) => {
+ return response.ok({
+ body: {
+ time: new Date().toISOString(),
+ },
+ });
+ }
+ );
+}
diff --git a/x-pack/plugins/observability_solution/slos/server/types.ts b/x-pack/plugins/observability_solution/slos/server/types.ts
new file mode 100644
index 0000000000000..d2ba45cddc097
--- /dev/null
+++ b/x-pack/plugins/observability_solution/slos/server/types.ts
@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface SlosPluginSetup {}
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface SlosPluginStart {}
diff --git a/x-pack/plugins/observability_solution/slos/tsconfig.json b/x-pack/plugins/observability_solution/slos/tsconfig.json
new file mode 100644
index 0000000000000..7034c98b7da48
--- /dev/null
+++ b/x-pack/plugins/observability_solution/slos/tsconfig.json
@@ -0,0 +1,22 @@
+{
+ "extends": "../../../../tsconfig.base.json",
+ "compilerOptions": {
+ "outDir": "target/types"
+ },
+ "include": [
+ "common/**/*",
+ "public/**/*",
+ "server/**/*",
+ "../../../typings/**/*"
+ ],
+ "exclude": [
+ "target/**/*"
+ ],
+ "kbn_references": [
+ "@kbn/i18n",
+ "@kbn/i18n-react",
+ "@kbn/shared-ux-router",
+ "@kbn/core",
+ "@kbn/navigation-plugin",
+ ]
+}
diff --git a/yarn.lock b/yarn.lock
index 0b461a53619e4..3055f742b6735 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6149,6 +6149,10 @@
version "0.0.0"
uid ""
+"@kbn/slos-plugin@link:x-pack/plugins/observability_solution/slos":
+ version "0.0.0"
+ uid ""
+
"@kbn/slo-schema@link:x-pack/packages/kbn-slo-schema":
version "0.0.0"
uid ""