Skip to content

Commit 33e8fc4

Browse files
elasticmachineelasticmachine
authored
Merge branch 'master' into embed-mode-options
2 parents 417abf0 + 07e3c9c commit 33e8fc4

24 files changed

Lines changed: 408 additions & 39 deletions

File tree

‎x-pack/.i18nrc.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,8 @@
4848
"xpack.triggersActionsUI": "plugins/triggers_actions_ui",
4949
"xpack.upgradeAssistant": "plugins/upgrade_assistant",
5050
"xpack.uptime": ["plugins/uptime"],
51-
"xpack.watcher": "plugins/watcher"
51+
"xpack.watcher": "plugins/watcher",
52+
"xpack.observability": "plugins/observability"
5253
},
5354
"translations": [
5455
"plugins/translations/translations/zh-CN.json",

‎x-pack/plugins/apm/public/plugin.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export class ApmPlugin implements Plugin<ApmPluginSetup, ApmPluginStart> {
7575
core.application.register({
7676
id: 'apm',
7777
title: 'APM',
78-
order: 8100,
78+
order: 8300,
7979
euiIconType: 'apmApp',
8080
appRoute: '/app/apm',
8181
icon: 'plugins/apm/public/icon.svg',

‎x-pack/plugins/infra/public/plugin.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export class Plugin
6464
defaultMessage: 'Logs',
6565
}),
6666
euiIconType: 'logsApp',
67-
order: 8000,
67+
order: 8100,
6868
appRoute: '/app/logs',
6969
category: DEFAULT_APP_CATEGORIES.observability,
7070
mount: async (params: AppMountParameters) => {
@@ -89,7 +89,7 @@ export class Plugin
8989
defaultMessage: 'Metrics',
9090
}),
9191
euiIconType: 'metricsApp',
92-
order: 8001,
92+
order: 8200,
9393
appRoute: '/app/metrics',
9494
category: DEFAULT_APP_CATEGORIES.observability,
9595
mount: async (params: AppMountParameters) => {

‎x-pack/plugins/observability/public/application/index.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License;
4+
* you may not use this file except in compliance with the Elastic License.
5+
*/
6+
import React from 'react';
7+
import ReactDOM from 'react-dom';
8+
import { EuiThemeProvider } from '../../../../legacy/common/eui_styled_components';
9+
import { AppMountParameters, CoreStart } from '../../../../../src/core/public';
10+
import { Home } from '../pages/home';
11+
import { PluginContext } from '../context/plugin_context';
12+
13+
export const renderApp = (core: CoreStart, { element }: AppMountParameters) => {
14+
const i18nCore = core.i18n;
15+
const isDarkMode = core.uiSettings.get('theme:darkMode');
16+
ReactDOM.render(
17+
<PluginContext.Provider value={{ core }}>
18+
<EuiThemeProvider darkMode={isDarkMode}>
19+
<i18nCore.Context>
20+
<Home />
21+
</i18nCore.Context>
22+
</EuiThemeProvider>
23+
</PluginContext.Provider>,
24+
element
25+
);
26+
return () => {
27+
ReactDOM.unmountComponentAtNode(element);
28+
};
29+
};

‎x-pack/plugins/observability/public/assets/observability_overview.png‎

96 KB
Loading

‎x-pack/plugins/observability/public/context/plugin_context.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License;
4+
* you may not use this file except in compliance with the Elastic License.
5+
*/
6+
7+
import { createContext } from 'react';
8+
import { AppMountContext } from 'kibana/public';
9+
10+
export interface PluginContextValue {
11+
core: AppMountContext['core'];
12+
}
13+
14+
export const PluginContext = createContext({} as PluginContextValue);

‎x-pack/plugins/observability/public/hooks/use_plugin_context.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License;
4+
* you may not use this file except in compliance with the Elastic License.
5+
*/
6+
7+
import { useContext } from 'react';
8+
import { PluginContext } from '../context/plugin_context';
9+
10+
export function usePluginContext() {
11+
return useContext(PluginContext);
12+
}

‎x-pack/plugins/observability/public/pages/home/index.tsx‎

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License;
4+
* you may not use this file except in compliance with the Elastic License.
5+
*/
6+
7+
import {
8+
EuiButton,
9+
EuiCard,
10+
EuiFlexGrid,
11+
EuiFlexGroup,
12+
EuiFlexItem,
13+
EuiHorizontalRule,
14+
EuiIcon,
15+
EuiImage,
16+
EuiSpacer,
17+
EuiText,
18+
EuiTitle,
19+
} from '@elastic/eui';
20+
import { i18n } from '@kbn/i18n';
21+
import React, { useEffect } from 'react';
22+
import styled from 'styled-components';
23+
import { usePluginContext } from '../../hooks/use_plugin_context';
24+
import { appsSection, tryItOutItemsSection } from './section';
25+
26+
const Container = styled.div`
27+
min-height: calc(100vh - 48px);
28+
background: ${(props) => props.theme.eui.euiColorEmptyShade};
29+
`;
30+
31+
const Title = styled.div`
32+
background-color: ${(props) => props.theme.eui.euiPageBackgroundColor};
33+
border-bottom: ${(props) => props.theme.eui.euiBorderThin};
34+
`;
35+
36+
const Page = styled.div`
37+
width: 100%;
38+
max-width: 1200px;
39+
margin: 0 auto;
40+
overflow: hidden;
41+
}
42+
`;
43+
44+
const EuiCardWithoutPadding = styled(EuiCard)`
45+
padding: 0;
46+
`;
47+
48+
export const Home = () => {
49+
const { core } = usePluginContext();
50+
51+
useEffect(() => {
52+
core.chrome.setBreadcrumbs([
53+
{
54+
text: i18n.translate('xpack.observability.home.breadcrumb.observability', {
55+
defaultMessage: 'Observability',
56+
}),
57+
},
58+
{
59+
text: i18n.translate('xpack.observability.home.breadcrumb.gettingStarted', {
60+
defaultMessage: 'Getting started',
61+
}),
62+
},
63+
]);
64+
}, [core]);
65+
66+
return (
67+
<Container>
68+
<Title>
69+
<Page>
70+
<EuiSpacer size="xxl" />
71+
<EuiFlexGroup>
72+
<EuiFlexItem grow={false}>
73+
<EuiIcon type="logoObservability" size="xxl" />
74+
</EuiFlexItem>
75+
<EuiFlexItem>
76+
<EuiTitle size="m">
77+
<h1>
78+
{i18n.translate('xpack.observability.home.title', {
79+
defaultMessage: 'Observability',
80+
})}
81+
</h1>
82+
</EuiTitle>
83+
</EuiFlexItem>
84+
</EuiFlexGroup>
85+
<EuiSpacer size="xxl" />
86+
</Page>
87+
</Title>
88+
<Page>
89+
<EuiSpacer size="xxl" />
90+
<EuiFlexGroup direction="column">
91+
{/* title and description */}
92+
<EuiFlexItem style={{ maxWidth: '50%' }}>
93+
<EuiTitle size="s">
94+
<h2>
95+
{i18n.translate('xpack.observability.home.sectionTitle', {
96+
defaultMessage: 'Observability built on the Elastic Stack',
97+
})}
98+
</h2>
99+
</EuiTitle>
100+
<EuiSpacer size="m" />
101+
<EuiText size="s" color="subdued">
102+
{i18n.translate('xpack.observability.home.sectionsubtitle', {
103+
defaultMessage:
104+
'Bring your logs, metrics, and APM traces together at scale in a single stack so you can monitor and react to events happening anywhere in your environment.',
105+
})}
106+
</EuiText>
107+
</EuiFlexItem>
108+
109+
{/* Apps sections */}
110+
<EuiFlexItem>
111+
<EuiSpacer size="s" />
112+
<EuiFlexGroup>
113+
<EuiFlexItem>
114+
<EuiFlexGrid columns={2}>
115+
{appsSection.map((app) => (
116+
<EuiFlexItem>
117+
<EuiCardWithoutPadding
118+
display="plain"
119+
layout="horizontal"
120+
icon={<EuiIcon size="l" type={app.icon} />}
121+
title={
122+
<EuiTitle size="xs" className="title">
123+
<h3>{app.title}</h3>
124+
</EuiTitle>
125+
}
126+
description={app.description}
127+
/>
128+
</EuiFlexItem>
129+
))}
130+
</EuiFlexGrid>
131+
</EuiFlexItem>
132+
<EuiFlexItem>
133+
<EuiImage
134+
size="xl"
135+
alt="observability overview image"
136+
url={core.http.basePath.prepend(
137+
'/plugins/observability/assets/observability_overview.png'
138+
)}
139+
/>
140+
</EuiFlexItem>
141+
</EuiFlexGroup>
142+
</EuiFlexItem>
143+
144+
{/* Get started button */}
145+
<EuiFlexItem>
146+
<EuiFlexGroup justifyContent="center" gutterSize="none">
147+
<EuiFlexItem grow={false}>
148+
<EuiButton
149+
fill
150+
iconType="sortRight"
151+
iconSide="right"
152+
href={core.http.basePath.prepend('/app/home#/tutorial_directory/logging')}
153+
>
154+
{i18n.translate('xpack.observability.home.getStatedButton', {
155+
defaultMessage: 'Get started',
156+
})}
157+
</EuiButton>
158+
</EuiFlexItem>
159+
</EuiFlexGroup>
160+
</EuiFlexItem>
161+
162+
<EuiHorizontalRule margin="xl" />
163+
164+
{/* Try it out */}
165+
<EuiFlexItem>
166+
<EuiFlexGroup justifyContent="center">
167+
<EuiFlexItem grow={false}>
168+
<EuiTitle size="s">
169+
<h3>
170+
{i18n.translate('xpack.observability.home.tryItOut', {
171+
defaultMessage: 'Try it out',
172+
})}
173+
</h3>
174+
</EuiTitle>
175+
</EuiFlexItem>
176+
</EuiFlexGroup>
177+
</EuiFlexItem>
178+
179+
{/* Try it out sections */}
180+
<EuiFlexItem>
181+
<EuiFlexGroup justifyContent="center">
182+
{tryItOutItemsSection.map((item) => (
183+
<EuiFlexItem grow={false} key={item.id} style={{ width: '260px' }}>
184+
<EuiCard
185+
layout="horizontal"
186+
icon={<EuiIcon size="l" type={item.icon} />}
187+
title={
188+
<EuiTitle size="xs" className="title">
189+
<h3>{item.title}</h3>
190+
</EuiTitle>
191+
}
192+
description={item.description}
193+
target={item.target}
194+
href={item.href}
195+
/>
196+
</EuiFlexItem>
197+
))}
198+
</EuiFlexGroup>
199+
<EuiSpacer />
200+
</EuiFlexItem>
201+
</EuiFlexGroup>
202+
</Page>
203+
</Container>
204+
);
205+
};

‎x-pack/plugins/observability/public/pages/home/section.ts‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License;
4+
* you may not use this file except in compliance with the Elastic License.
5+
*/
6+
import { i18n } from '@kbn/i18n';
7+
8+
interface ISection {
9+
id: string;
10+
title: string;
11+
icon: string;
12+
description: string;
13+
href?: string;
14+
target?: '_blank';
15+
}
16+
17+
export const appsSection: ISection[] = [
18+
{
19+
id: 'logs',
20+
title: i18n.translate('xpack.observability.section.apps.logs.title', {
21+
defaultMessage: 'Logs',
22+
}),
23+
icon: 'logoLogging',
24+
description: i18n.translate('xpack.observability.section.apps.logs.description', {
25+
defaultMessage:
26+
'The Elastic Stack (sometimes known as the ELK Stack) is the most popular open source logging platform.',
27+
}),
28+
},
29+
{
30+
id: 'apm',
31+
title: i18n.translate('xpack.observability.section.apps.apm.title', {
32+
defaultMessage: 'APM',
33+
}),
34+
icon: 'logoAPM',
35+
description: i18n.translate('xpack.observability.section.apps.apm.description', {
36+
defaultMessage:
37+
'See exactly where your application is spending time so you can quickly fix issues and feel good about the code you push.',
38+
}),
39+
},
40+
{
41+
id: 'metrics',
42+
title: i18n.translate('xpack.observability.section.apps.metrics.title', {
43+
defaultMessage: 'Metrics',
44+
}),
45+
icon: 'logoMetrics',
46+
description: i18n.translate('xpack.observability.section.apps.metrics.description', {
47+
defaultMessage:
48+
'Already using the Elastic Stack for logs? Add metrics in just a few steps and correlate metrics and logs in one place.',
49+
}),
50+
},
51+
{
52+
id: 'uptime',
53+
title: i18n.translate('xpack.observability.section.apps.uptime.title', {
54+
defaultMessage: 'Uptime',
55+
}),
56+
icon: 'logoUptime',
57+
description: i18n.translate('xpack.observability.section.apps.uptime.description', {
58+
defaultMessage:
59+
'React to availability issues across your apps and services before they affect users.',
60+
}),
61+
},
62+
];
63+
64+
export const tryItOutItemsSection: ISection[] = [
65+
{
66+
id: 'demo',
67+
title: i18n.translate('xpack.observability.section.tryItOut.demo.title', {
68+
defaultMessage: 'Demo Playground',
69+
}),
70+
icon: 'play',
71+
description: '',
72+
href: 'https://demo.elastic.co/',
73+
target: '_blank',
74+
},
75+
{
76+
id: 'sampleData',
77+
title: i18n.translate('xpack.observability.section.tryItOut.sampleData.title', {
78+
defaultMessage: 'Add sample data',
79+
}),
80+
icon: 'documents',
81+
description: '',
82+
href: '/app/home#/tutorial_directory/sampleData',
83+
},
84+
];

0 commit comments

Comments
 (0)