Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Logs onboarding] Custom logs flow #155821

Closed
wants to merge 4 commits into from
Closed

[Logs onboarding] Custom logs flow #155821

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
98c897b
wip
ogupte Apr 26, 2023
814cfa3
[CI] Auto-commit changed files from 'node scripts/precommit_hook.js -…
kibanamachine Apr 26, 2023
e62407d
[CI] Auto-commit changed files from 'node scripts/lint_ts_projects --…
kibanamachine Apr 26, 2023
15452a6
wip
ogupte Apr 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 34 additions & 36 deletions x-pack/plugins/observability_onboarding/public/application/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,20 +17,23 @@ import {
KibanaContextProvider,
KibanaThemeProvider,
RedirectAppLinks,
useKibana,
useUiSetting$,
} from '@kbn/kibana-react-plugin/public';
import { useBreadcrumbs } from '@kbn/observability-plugin/public';
import { RouterProvider, createRouter } from '@kbn/typed-react-router-config';
import { Route } from '@kbn/shared-ux-router';
import { euiDarkVars, euiLightVars } from '@kbn/ui-theme';
import React from 'react';
import ReactDOM from 'react-dom';
import { Redirect, RouteComponentProps, RouteProps } from 'react-router-dom';
import { Home } from '../components/app/home';
import {
Router,
Switch,
RouteComponentProps,
RouteProps,
} from 'react-router-dom';
import {
ObservabilityOnboardingPluginSetupDeps,
ObservabilityOnboardingPluginStartDeps,
} from '../plugin';
import { routes } from '../routes';

export type BreadcrumbTitle<
T extends { [K in keyof T]?: string | undefined } = {}
Expand All @@ -49,33 +52,33 @@ export const onBoardingTitle = i18n.translate(
}
);

export const onboardingRoutes: RouteDefinition[] = [
{
exact: true,
path: '/',
render: () => <Redirect to="/observabilityOnboarding" />,
breadcrumb: onBoardingTitle,
},
];
export const breadcrumbsApp = {
id: 'observabilityOnboarding',
label: onBoardingTitle,
};

function App() {
return (
<>
<Switch>
{Object.keys(routes).map((key) => {
const path = key as keyof typeof routes;
const { handler, exact } = routes[path];
const Wrapper = () => {
return handler();
};
return (
<Route key={path} path={path} exact={exact} component={Wrapper} />
);
})}
</Switch>
</>
);
}

function ObservabilityOnboardingApp() {
const [darkMode] = useUiSetting$<boolean>('theme:darkMode');

const { http } = useKibana<ObservabilityOnboardingPluginStartDeps>().services;
const basePath = http.basePath.get();

useBreadcrumbs([
{
text: onBoardingTitle,
href: basePath + '/app/observabilityOnboarding',
},
{
text: i18n.translate('xpack.observability_onboarding.breadcrumbs.logs', {
defaultMessage: 'Logs',
}),
},
]);

return (
<ThemeProvider
theme={(outerTheme?: Theme) => ({
Expand All @@ -85,14 +88,12 @@ function ObservabilityOnboardingApp() {
})}
>
<div className={APP_WRAPPER_CLASS} data-test-subj="csmMainContainer">
<Home />
<App />
</div>
</ThemeProvider>
);
}

export const observabilityOnboardingRouter = createRouter({});

export function ObservabilityOnboardingAppRoot({
appMountParameters,
core,
Expand Down Expand Up @@ -131,14 +132,11 @@ export function ObservabilityOnboardingAppRoot({
}}
>
<i18nCore.Context>
<RouterProvider
history={history}
router={observabilityOnboardingRouter}
>
<Router history={history}>
<EuiErrorBoundary>
<ObservabilityOnboardingApp />
</EuiErrorBoundary>
</RouterProvider>
</Router>
</i18nCore.Context>
</KibanaThemeProvider>
</KibanaContextProvider>
Expand Down
167 changes: 84 additions & 83 deletions x-pack/plugins/observability_onboarding/public/components/app/home/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,95 +5,96 @@
* 2.0.
*/

import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
import React, { ComponentType, useRef, useState } from 'react';
import {
FilmstripFrame,
FilmstripTransition,
TransitionState,
} from '../../shared/filmstrip_transition';
import {
Provider as WizardProvider,
Step as WizardStep,
} from './logs_onboarding_wizard';
import { HorizontalSteps } from './logs_onboarding_wizard/horizontal_steps';
import { PageTitle } from './logs_onboarding_wizard/page_title';

export function Home({ animated = true }: { animated?: boolean }) {
if (animated) {
return <AnimatedTransitionsWizard />;
}
return <StillTransitionsWizard />;
}

function StillTransitionsWizard() {
return (
<WizardProvider>
<EuiFlexGroup alignItems="center" justifyContent="spaceAround">
<EuiFlexItem grow={false}>
<WizardStep />
</EuiFlexItem>
</EuiFlexGroup>
</WizardProvider>
);
}
EuiFlexGroup,
EuiFlexItem,
EuiSpacer,
EuiTitle,
EuiText,
EuiCard,
EuiIcon,
EuiHorizontalRule,
EuiButtonEmpty,
} from '@elastic/eui';
import { useBreadcrumbs } from '@kbn/observability-plugin/public';
import React from 'react';
import { useKibanaNavigation } from '../../../hooks/use_kibana_navigation';
import { breadcrumbsApp } from '../../../application/app';

const TRANSITION_DURATION = 180;
export function Home() {
useBreadcrumbs([], breadcrumbsApp);

function AnimatedTransitionsWizard() {
const [transition, setTransition] = useState<TransitionState>('ready');
const TransitionComponent = useRef<ComponentType>(() => null);
const navigateToKibanaUrl = useKibanaNavigation();

function onChangeStep({
direction,
StepComponent,
}: {
direction: 'back' | 'next';
StepComponent: ComponentType;
}) {
setTransition(direction);
TransitionComponent.current = StepComponent;
setTimeout(() => {
setTransition('ready');
}, TRANSITION_DURATION + 10);
}
const handleClickLogsOnboarding = () => {
navigateToKibanaUrl('/app/observabilityOnboarding/logs');
};

return (
<WizardProvider
transitionDuration={TRANSITION_DURATION}
onChangeStep={onChangeStep}
<EuiFlexGroup
direction="column"
alignItems="center"
style={{ margin: 'auto', maxWidth: 800 }}
>
<EuiFlexGroup direction="column" alignItems="center">
<EuiFlexItem grow={false}>
<EuiSpacer size="l" />
<PageTitle />
</EuiFlexItem>
<EuiFlexItem grow={false} style={{ width: '50%' }}>
<HorizontalSteps />
</EuiFlexItem>
<EuiFlexItem grow={1} style={{ width: '50%' }}>
<FilmstripTransition
duration={TRANSITION_DURATION}
transition={transition}
>
<FilmstripFrame position="left">
{
// eslint-disable-next-line react/jsx-pascal-case
transition === 'back' ? <TransitionComponent.current /> : null
}
</FilmstripFrame>
<FilmstripFrame position="center">
<WizardStep />
</FilmstripFrame>
<FilmstripFrame position="right">
{
// eslint-disable-next-line react/jsx-pascal-case
transition === 'next' ? <TransitionComponent.current /> : null
}
</FilmstripFrame>
</FilmstripTransition>
</EuiFlexItem>
</EuiFlexGroup>
</WizardProvider>
<EuiFlexItem grow={false}>
<EuiSpacer size="l" />
<EuiTitle size="l">
<h1>Get started with Observability</h1>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiText color="subdued" style={{ textAlign: 'center' }}>
<p>
Monitor and gain insights across your cloud-native and distributed
systems, bringing together application, infrastructure, and user
telemetry data for end-to-end observability on a single platform.
</p>
</EuiText>
<EuiSpacer size="xl" />
</EuiFlexItem>
<EuiFlexItem grow={false} style={{ width: 400 }}>
<EuiCard
layout="vertical"
icon={<EuiIcon size="xl" type="logoLogging" />}
title="Collect and analyse logs"
betaBadgeProps={{ label: 'Quick Start' }}
description="Choose what logs to collect, and onboard your data in up to 5 minutes to start analysing it straight away."
onClick={handleClickLogsOnboarding}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiHorizontalRule margin="l" />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexGroup alignItems="center">
<EuiFlexItem>
<EuiCard
title="Integrations"
betaBadgeProps={{ label: 'Integrations' }}
description="Explore 300+ ways of ingesting data"
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiCard
title="Setup guide"
betaBadgeProps={{ label: 'Setup guide' }}
description="Monitor kubernetes clusters"
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiCard
title="Sample data"
betaBadgeProps={{ label: 'Sample data' }}
description="Explore data, visualizations, and dashboards samples"
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonEmpty href="/app/observability/overview">
Skip for now
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
);
}
Loading