mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
* replace KuiCard with EuiCard in kibana home * fix button styling * update snapshots caused by new EUI version from rebase * allow flex group to wrap
This commit is contained in:
Nathan Reese
GitHub
parent
87d0bcdcc5
commit
2dfd8b750b
7 changed files with 475 additions and 120 deletions
|
|
@ -0,0 +1,387 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`apmUiEnabled 1`] = `
|
||||
<EuiPanel
|
||||
grow={true}
|
||||
hasShadow={false}
|
||||
paddingSize="l"
|
||||
>
|
||||
<EuiFlexGroup
|
||||
alignItems="stretch"
|
||||
component="div"
|
||||
gutterSize="l"
|
||||
justifyContent="flexStart"
|
||||
responsive={true}
|
||||
wrap={false}
|
||||
>
|
||||
<EuiFlexItem
|
||||
component="div"
|
||||
grow={true}
|
||||
>
|
||||
<EuiTitle
|
||||
size="m"
|
||||
>
|
||||
<h3>
|
||||
Add Data to Kibana
|
||||
</h3>
|
||||
</EuiTitle>
|
||||
<EuiText
|
||||
grow={true}
|
||||
>
|
||||
<p>
|
||||
Use these solutions to quickly turn your data into pre-built dashboards and monitoring systems.
|
||||
</p>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiSpacer
|
||||
size="l"
|
||||
/>
|
||||
<EuiFlexGroup
|
||||
alignItems="stretch"
|
||||
component="div"
|
||||
gutterSize="none"
|
||||
justifyContent="flexStart"
|
||||
responsive={true}
|
||||
wrap={true}
|
||||
>
|
||||
<EuiFlexItem
|
||||
component="div"
|
||||
grow={true}
|
||||
>
|
||||
<EuiCard
|
||||
className="addDataCard"
|
||||
description="APM automatically collects in-depth performance metrics and errors from inside your applications."
|
||||
footer={
|
||||
<EuiButton
|
||||
className="addDataButton"
|
||||
color="primary"
|
||||
fill={false}
|
||||
href="#/home/tutorial/apm"
|
||||
iconSide="left"
|
||||
type="button"
|
||||
>
|
||||
Add APM
|
||||
</EuiButton>
|
||||
}
|
||||
icon={
|
||||
<EuiIcon
|
||||
className="addDataIcon"
|
||||
size="m"
|
||||
type="apmApp"
|
||||
/>
|
||||
}
|
||||
textAlign="center"
|
||||
title="APM"
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
component="div"
|
||||
grow={true}
|
||||
>
|
||||
<EuiCard
|
||||
className="addDataCard"
|
||||
description="Ingest logs from popular data sources and easily visualize in preconfigured dashboards."
|
||||
footer={
|
||||
<EuiButton
|
||||
className="addDataButton"
|
||||
color="primary"
|
||||
fill={false}
|
||||
href="#/home/tutorial_directory/logging"
|
||||
iconSide="left"
|
||||
type="button"
|
||||
>
|
||||
Add log data
|
||||
</EuiButton>
|
||||
}
|
||||
icon={
|
||||
<EuiIcon
|
||||
className="addDataIcon"
|
||||
size="m"
|
||||
type="loggingApp"
|
||||
/>
|
||||
}
|
||||
textAlign="center"
|
||||
title="Logging"
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
component="div"
|
||||
grow={true}
|
||||
>
|
||||
<EuiCard
|
||||
className="addDataCard"
|
||||
description="Collect metrics from the operating system and services running on your servers."
|
||||
footer={
|
||||
<EuiButton
|
||||
className="addDataButton"
|
||||
color="primary"
|
||||
fill={false}
|
||||
href="#/home/tutorial_directory/metrics"
|
||||
iconSide="left"
|
||||
type="button"
|
||||
>
|
||||
Add metric data
|
||||
</EuiButton>
|
||||
}
|
||||
icon={
|
||||
<EuiIcon
|
||||
className="addDataIcon"
|
||||
size="m"
|
||||
type="monitoringApp"
|
||||
/>
|
||||
}
|
||||
textAlign="center"
|
||||
title="Metrics"
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
component="div"
|
||||
grow={true}
|
||||
>
|
||||
<EuiCard
|
||||
className="addDataCard"
|
||||
description="Centralize security events for interactive investigation in ready-to-go visualizations."
|
||||
footer={
|
||||
<EuiButton
|
||||
className="addDataButton"
|
||||
color="primary"
|
||||
fill={false}
|
||||
href="#/home/tutorial_directory/security"
|
||||
iconSide="left"
|
||||
type="button"
|
||||
>
|
||||
Add security events
|
||||
</EuiButton>
|
||||
}
|
||||
icon={
|
||||
<EuiIcon
|
||||
className="addDataIcon"
|
||||
size="m"
|
||||
type="securityApp"
|
||||
/>
|
||||
}
|
||||
textAlign="center"
|
||||
title="Security Analytics"
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiFlexGroup
|
||||
alignItems="stretch"
|
||||
component="div"
|
||||
gutterSize="l"
|
||||
justifyContent="center"
|
||||
responsive={true}
|
||||
wrap={false}
|
||||
>
|
||||
<EuiFlexItem
|
||||
component="div"
|
||||
grow={false}
|
||||
>
|
||||
<EuiText
|
||||
grow={true}
|
||||
>
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"height": 38,
|
||||
}
|
||||
}
|
||||
>
|
||||
Data already in Elasticsearch?
|
||||
</span>
|
||||
<EuiLink
|
||||
color="primary"
|
||||
href="#/management/kibana/index"
|
||||
style={
|
||||
Object {
|
||||
"marginLeft": 8,
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
Set up index patterns
|
||||
</EuiLink>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiPanel>
|
||||
`;
|
||||
|
||||
exports[`render 1`] = `
|
||||
<EuiPanel
|
||||
grow={true}
|
||||
hasShadow={false}
|
||||
paddingSize="l"
|
||||
>
|
||||
<EuiFlexGroup
|
||||
alignItems="stretch"
|
||||
component="div"
|
||||
gutterSize="l"
|
||||
justifyContent="flexStart"
|
||||
responsive={true}
|
||||
wrap={false}
|
||||
>
|
||||
<EuiFlexItem
|
||||
component="div"
|
||||
grow={true}
|
||||
>
|
||||
<EuiTitle
|
||||
size="m"
|
||||
>
|
||||
<h3>
|
||||
Add Data to Kibana
|
||||
</h3>
|
||||
</EuiTitle>
|
||||
<EuiText
|
||||
grow={true}
|
||||
>
|
||||
<p>
|
||||
Use these solutions to quickly turn your data into pre-built dashboards and monitoring systems.
|
||||
</p>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiSpacer
|
||||
size="l"
|
||||
/>
|
||||
<EuiFlexGroup
|
||||
alignItems="stretch"
|
||||
component="div"
|
||||
gutterSize="none"
|
||||
justifyContent="flexStart"
|
||||
responsive={true}
|
||||
wrap={true}
|
||||
>
|
||||
<EuiFlexItem
|
||||
component="div"
|
||||
grow={true}
|
||||
>
|
||||
<EuiCard
|
||||
className="addDataCard"
|
||||
description="Ingest logs from popular data sources and easily visualize in preconfigured dashboards."
|
||||
footer={
|
||||
<EuiButton
|
||||
className="addDataButton"
|
||||
color="primary"
|
||||
fill={false}
|
||||
href="#/home/tutorial_directory/logging"
|
||||
iconSide="left"
|
||||
type="button"
|
||||
>
|
||||
Add log data
|
||||
</EuiButton>
|
||||
}
|
||||
icon={
|
||||
<EuiIcon
|
||||
className="addDataIcon"
|
||||
size="m"
|
||||
type="loggingApp"
|
||||
/>
|
||||
}
|
||||
textAlign="center"
|
||||
title="Logging"
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
component="div"
|
||||
grow={true}
|
||||
>
|
||||
<EuiCard
|
||||
className="addDataCard"
|
||||
description="Collect metrics from the operating system and services running on your servers."
|
||||
footer={
|
||||
<EuiButton
|
||||
className="addDataButton"
|
||||
color="primary"
|
||||
fill={false}
|
||||
href="#/home/tutorial_directory/metrics"
|
||||
iconSide="left"
|
||||
type="button"
|
||||
>
|
||||
Add metric data
|
||||
</EuiButton>
|
||||
}
|
||||
icon={
|
||||
<EuiIcon
|
||||
className="addDataIcon"
|
||||
size="m"
|
||||
type="monitoringApp"
|
||||
/>
|
||||
}
|
||||
textAlign="center"
|
||||
title="Metrics"
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
component="div"
|
||||
grow={true}
|
||||
>
|
||||
<EuiCard
|
||||
className="addDataCard"
|
||||
description="Centralize security events for interactive investigation in ready-to-go visualizations."
|
||||
footer={
|
||||
<EuiButton
|
||||
className="addDataButton"
|
||||
color="primary"
|
||||
fill={false}
|
||||
href="#/home/tutorial_directory/security"
|
||||
iconSide="left"
|
||||
type="button"
|
||||
>
|
||||
Add security events
|
||||
</EuiButton>
|
||||
}
|
||||
icon={
|
||||
<EuiIcon
|
||||
className="addDataIcon"
|
||||
size="m"
|
||||
type="securityApp"
|
||||
/>
|
||||
}
|
||||
textAlign="center"
|
||||
title="Security Analytics"
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiFlexGroup
|
||||
alignItems="stretch"
|
||||
component="div"
|
||||
gutterSize="l"
|
||||
justifyContent="center"
|
||||
responsive={true}
|
||||
wrap={false}
|
||||
>
|
||||
<EuiFlexItem
|
||||
component="div"
|
||||
grow={false}
|
||||
>
|
||||
<EuiText
|
||||
grow={true}
|
||||
>
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"height": 38,
|
||||
}
|
||||
}
|
||||
>
|
||||
Data already in Elasticsearch?
|
||||
</span>
|
||||
<EuiLink
|
||||
color="primary"
|
||||
href="#/management/kibana/index"
|
||||
style={
|
||||
Object {
|
||||
"marginLeft": 8,
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
Set up index patterns
|
||||
</EuiLink>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiPanel>
|
||||
`;
|
||||
|
|
@ -5,7 +5,6 @@ exports[`directories should not render directory entry when showOnHomePage is fa
|
|||
className="home"
|
||||
>
|
||||
<AddData
|
||||
addBasePath={[Function]}
|
||||
apmUiEnabled={true}
|
||||
/>
|
||||
<EuiSpacer
|
||||
|
|
@ -114,7 +113,6 @@ exports[`directories should render ADMIN directory entry in "Manage" panel 1`] =
|
|||
className="home"
|
||||
>
|
||||
<AddData
|
||||
addBasePath={[Function]}
|
||||
apmUiEnabled={true}
|
||||
/>
|
||||
<EuiSpacer
|
||||
|
|
@ -241,7 +239,6 @@ exports[`directories should render DATA directory entry in "Explore Data" panel
|
|||
className="home"
|
||||
>
|
||||
<AddData
|
||||
addBasePath={[Function]}
|
||||
apmUiEnabled={true}
|
||||
/>
|
||||
<EuiSpacer
|
||||
|
|
@ -368,7 +365,6 @@ exports[`should not contain RecentlyAccessed panel when there is no recentlyAcce
|
|||
className="home"
|
||||
>
|
||||
<AddData
|
||||
addBasePath={[Function]}
|
||||
apmUiEnabled={true}
|
||||
/>
|
||||
<EuiSpacer
|
||||
|
|
@ -493,7 +489,6 @@ exports[`should render home component 1`] = `
|
|||
/>
|
||||
</React.Fragment>
|
||||
<AddData
|
||||
addBasePath={[Function]}
|
||||
apmUiEnabled={true}
|
||||
/>
|
||||
<EuiSpacer
|
||||
|
|
|
|||
|
|
@ -1,13 +1,6 @@
|
|||
import './add_data.less';
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {
|
||||
KuiCardGroup,
|
||||
KuiCard,
|
||||
KuiCardDescription,
|
||||
KuiCardDescriptionTitle,
|
||||
KuiCardDescriptionText,
|
||||
KuiCardFooter,
|
||||
} from '@kbn/ui-framework/components';
|
||||
|
||||
import {
|
||||
EuiButton,
|
||||
|
|
@ -18,126 +11,88 @@ import {
|
|||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiText,
|
||||
EuiCard,
|
||||
EuiIcon,
|
||||
} from '@elastic/eui';
|
||||
|
||||
export function AddData({ addBasePath, apmUiEnabled }) {
|
||||
export function AddData({ apmUiEnabled }) {
|
||||
|
||||
const renderCards = () => {
|
||||
const cardStyle = {
|
||||
width: '250px',
|
||||
'minWidth': '200px',
|
||||
'border': 'none'
|
||||
};
|
||||
|
||||
const getApmCard = () => (
|
||||
<KuiCard style={cardStyle}>
|
||||
<KuiCardDescription>
|
||||
<KuiCardDescriptionTitle>
|
||||
<img
|
||||
src={addBasePath('/plugins/kibana/assets/app_apm.svg')}
|
||||
/>
|
||||
<p>
|
||||
APM
|
||||
</p>
|
||||
</KuiCardDescriptionTitle>
|
||||
|
||||
<KuiCardDescriptionText>
|
||||
APM automatically collects in-depth performance metrics and errors from inside your applications.
|
||||
</KuiCardDescriptionText>
|
||||
</KuiCardDescription>
|
||||
|
||||
<KuiCardFooter>
|
||||
<EuiButton
|
||||
href="#/home/tutorial/apm"
|
||||
>
|
||||
Add APM
|
||||
</EuiButton>
|
||||
</KuiCardFooter>
|
||||
</KuiCard>
|
||||
<EuiFlexItem>
|
||||
<EuiCard
|
||||
className="addDataCard"
|
||||
icon={<EuiIcon className="addDataIcon" type="apmApp" />}
|
||||
title="APM"
|
||||
description="APM automatically collects in-depth performance metrics and errors from inside your applications."
|
||||
footer={
|
||||
<EuiButton
|
||||
className="addDataButton"
|
||||
href="#/home/tutorial/apm"
|
||||
>
|
||||
Add APM
|
||||
</EuiButton>
|
||||
}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="kuiVerticalRhythm">
|
||||
<KuiCardGroup>
|
||||
<EuiFlexGroup wrap gutterSize="none">
|
||||
|
||||
{apmUiEnabled !== false && getApmCard()}
|
||||
{apmUiEnabled !== false && getApmCard()}
|
||||
|
||||
<KuiCard style={cardStyle}>
|
||||
<KuiCardDescription>
|
||||
<KuiCardDescriptionTitle>
|
||||
<img
|
||||
src={addBasePath('/plugins/kibana/assets/app_logging.svg')}
|
||||
/>
|
||||
<p>
|
||||
Logging
|
||||
</p>
|
||||
</KuiCardDescriptionTitle>
|
||||
|
||||
<KuiCardDescriptionText>
|
||||
Ingest logs from popular data sources and easily visualize in preconfigured dashboards.
|
||||
</KuiCardDescriptionText>
|
||||
</KuiCardDescription>
|
||||
|
||||
<KuiCardFooter>
|
||||
<EuiFlexItem>
|
||||
<EuiCard
|
||||
className="addDataCard"
|
||||
icon={<EuiIcon className="addDataIcon" type="loggingApp" />}
|
||||
title="Logging"
|
||||
description="Ingest logs from popular data sources and easily visualize in preconfigured dashboards."
|
||||
footer={
|
||||
<EuiButton
|
||||
className="addDataButton"
|
||||
href="#/home/tutorial_directory/logging"
|
||||
>
|
||||
Add log data
|
||||
</EuiButton>
|
||||
</KuiCardFooter>
|
||||
</KuiCard>
|
||||
}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
|
||||
<KuiCard style={cardStyle}>
|
||||
<KuiCardDescription>
|
||||
<KuiCardDescriptionTitle>
|
||||
<img
|
||||
src={addBasePath('/plugins/kibana/assets/app_monitoring.svg')}
|
||||
/>
|
||||
<p>
|
||||
Metrics
|
||||
</p>
|
||||
</KuiCardDescriptionTitle>
|
||||
|
||||
<KuiCardDescriptionText>
|
||||
Collect metrics from the operating system and services running on your servers.
|
||||
</KuiCardDescriptionText>
|
||||
</KuiCardDescription>
|
||||
|
||||
<KuiCardFooter>
|
||||
<EuiFlexItem>
|
||||
<EuiCard
|
||||
className="addDataCard"
|
||||
icon={<EuiIcon className="addDataIcon" type="monitoringApp" />}
|
||||
title="Metrics"
|
||||
description="Collect metrics from the operating system and services running on your servers."
|
||||
footer={
|
||||
<EuiButton
|
||||
className="addDataButton"
|
||||
href="#/home/tutorial_directory/metrics"
|
||||
>
|
||||
Add metric data
|
||||
</EuiButton>
|
||||
</KuiCardFooter>
|
||||
</KuiCard>
|
||||
}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
|
||||
<KuiCard style={cardStyle}>
|
||||
<KuiCardDescription>
|
||||
<KuiCardDescriptionTitle>
|
||||
<img
|
||||
src={addBasePath('/plugins/kibana/assets/app_security.svg')}
|
||||
/>
|
||||
<p>
|
||||
Security Analytics
|
||||
</p>
|
||||
</KuiCardDescriptionTitle>
|
||||
|
||||
<KuiCardDescriptionText>
|
||||
Centralize security events for interactive investigation in ready-to-go visualizations.
|
||||
</KuiCardDescriptionText>
|
||||
</KuiCardDescription>
|
||||
|
||||
<KuiCardFooter>
|
||||
<EuiFlexItem>
|
||||
<EuiCard
|
||||
className="addDataCard"
|
||||
icon={<EuiIcon className="addDataIcon" type="securityApp" />}
|
||||
title="Security Analytics"
|
||||
description="Centralize security events for interactive investigation in ready-to-go visualizations."
|
||||
footer={
|
||||
<EuiButton
|
||||
className="addDataButton"
|
||||
href="#/home/tutorial_directory/security"
|
||||
>
|
||||
Add security events
|
||||
</EuiButton>
|
||||
</KuiCardFooter>
|
||||
</KuiCard>
|
||||
</KuiCardGroup>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -181,6 +136,5 @@ export function AddData({ addBasePath, apmUiEnabled }) {
|
|||
}
|
||||
|
||||
AddData.propTypes = {
|
||||
addBasePath: PropTypes.func.isRequired,
|
||||
apmUiEnabled: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
|
|
|||
15
src/core_plugins/kibana/public/home/components/add_data.less
Normal file
15
src/core_plugins/kibana/public/home/components/add_data.less
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
.addDataCard {
|
||||
width: 250px;
|
||||
min-width: 200px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.addDataIcon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.addDataButton {
|
||||
line-height: normal;
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import { AddData } from './add_data';
|
||||
|
||||
test('render', () => {
|
||||
const component = shallow(<AddData
|
||||
apmUiEnabled={false}
|
||||
/>);
|
||||
expect(component).toMatchSnapshot(); // eslint-disable-line
|
||||
});
|
||||
|
||||
test('apmUiEnabled', () => {
|
||||
const component = shallow(<AddData
|
||||
apmUiEnabled={true}
|
||||
/>);
|
||||
expect(component).toMatchSnapshot(); // eslint-disable-line
|
||||
});
|
||||
|
|
@ -57,7 +57,6 @@ export function Home({ addBasePath, directories, apmUiEnabled, recentlyAccessed
|
|||
{recentlyAccessedPanel}
|
||||
|
||||
<AddData
|
||||
addBasePath={addBasePath}
|
||||
apmUiEnabled={apmUiEnabled}
|
||||
/>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,18 +10,6 @@ home-app {
|
|||
margin: auto;
|
||||
}
|
||||
|
||||
.kuiCard__descriptionTitle img {
|
||||
display: inline-block;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.kuiCardGroup .kuiCard {
|
||||
flex: 1 1 0 !important;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.homeDirectory {
|
||||
background: @white;
|
||||
margin: 0;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue