github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

Homepage style updates (#30341) (#30612)

Browse source 
* Better responsive handling of home grids

* Update sample data images to match UI updates

* Hide non-existent MSSQL logo so it doesn’t throw errors

* Dark mode images for sample data

* Som layout fixes to tutorials

* remove unused file

* convert synopsis to use EuiCard

* Snaps

* IE fix

* Remove unnecessary inline margin for flex group spacing

* More snaps cuz of the IE fix
This commit is contained in:
Caroline Horn 2019-02-10 19:54:36 -05:00 • committed by GitHub
parent 1066801bb8
commit b0da4eb9bb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
36 changed files with 260 additions and 425 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/legacy/core_plugins/kibana/public/home/_home.scss
View file

@ -1,8 +0,0 @@
.homPage {
max-width: 1200px;
margin: auto;
}
.homSampleDataSetCard {
flex-grow: 0; // IE FIX
}

1
src/legacy/core_plugins/kibana/public/home/_index.scss
View file

@ -1,2 +1 @@
@import './home';
@import './components/index';

60
src/legacy/core_plugins/kibana/public/home/components/__snapshots__/add_data.test.js.snap
View file

@ -50,16 +50,17 @@ exports[`apmUiEnabled 1`] = `
/>
<EuiFlexGroup
alignItems="stretch"
className="homeAddData__flexGroup"
component="div"
direction="row"
gutterSize="none"
justifyContent="flexStart"
responsive={true}
gutterSize="l"
justifyContent="spaceAround"
responsive={false}
wrap={true}
>
<EuiFlexItem
component="div"
grow={true}
grow={false}
>
<EuiCard
className="homAddData__card"
@ -95,7 +96,7 @@ exports[`apmUiEnabled 1`] = `
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={true}
grow={false}
>
<EuiCard
className="homAddData__card"
@ -131,7 +132,7 @@ exports[`apmUiEnabled 1`] = `
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={true}
grow={false}
>
<EuiCard
className="homAddData__card"
@ -167,7 +168,7 @@ exports[`apmUiEnabled 1`] = `
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={true}
grow={false}
>
<EuiCard
className="homAddData__card"
@ -347,16 +348,17 @@ exports[`isNewKibanaInstance 1`] = `
/>
<EuiFlexGroup
alignItems="stretch"
className="homeAddData__flexGroup"
component="div"
direction="row"
gutterSize="none"
justifyContent="flexStart"
responsive={true}
wrap={true}
gutterSize="l"
justifyContent="spaceAround"
responsive={false}
wrap={false}
>
<EuiFlexItem
component="div"
grow={true}
grow={false}
>
<EuiCard
className="homAddData__card"
@ -392,7 +394,7 @@ exports[`isNewKibanaInstance 1`] = `
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={true}
grow={false}
>
<EuiCard
className="homAddData__card"
@ -428,7 +430,7 @@ exports[`isNewKibanaInstance 1`] = `
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={true}
grow={false}
>
<EuiCard
className="homAddData__card"
@ -608,16 +610,17 @@ exports[`mlEnabled 1`] = `
/>
<EuiFlexGroup
alignItems="stretch"
className="homeAddData__flexGroup"
component="div"
direction="row"
gutterSize="none"
justifyContent="flexStart"
responsive={true}
gutterSize="l"
justifyContent="spaceAround"
responsive={false}
wrap={true}
>
<EuiFlexItem
component="div"
grow={true}
grow={false}
>
<EuiCard
className="homAddData__card"
@ -653,7 +656,7 @@ exports[`mlEnabled 1`] = `
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={true}
grow={false}
>
<EuiCard
className="homAddData__card"
@ -689,7 +692,7 @@ exports[`mlEnabled 1`] = `
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={true}
grow={false}
>
<EuiCard
className="homAddData__card"
@ -725,7 +728,7 @@ exports[`mlEnabled 1`] = `
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={true}
grow={false}
>
<EuiCard
className="homAddData__card"
@ -946,16 +949,17 @@ exports[`render 1`] = `
/>
<EuiFlexGroup
alignItems="stretch"
className="homeAddData__flexGroup"
component="div"
direction="row"
gutterSize="none"
justifyContent="flexStart"
responsive={true}
wrap={true}
gutterSize="l"
justifyContent="spaceAround"
responsive={false}
wrap={false}
>
<EuiFlexItem
component="div"
grow={true}
grow={false}
>
<EuiCard
className="homAddData__card"
@ -991,7 +995,7 @@ exports[`render 1`] = `
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={true}
grow={false}
>
<EuiCard
className="homAddData__card"
@ -1027,7 +1031,7 @@ exports[`render 1`] = `
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={true}
grow={false}
>
<EuiCard
className="homAddData__card"

72
src/legacy/core_plugins/kibana/public/home/components/__snapshots__/home.test.js.snap
View file

@ -2,10 +2,10 @@
exports[`home directories should not render directory entry when showOnHomePage is false 1`] = `
<EuiPage
className="homPage"
restrictWidth={false}
restrictWidth={1200}
>
<EuiPageBody
className="eui-displayBlock"
restrictWidth={false}
>
<InjectIntl(AddDataUi)
@ -51,7 +51,7 @@ exports[`home directories should not render directory entry when showOnHomePage
/>
<EuiFlexGrid
columns={2}
gutterSize="l"
gutterSize="s"
responsive={true}
/>
</EuiPanel>
@ -142,10 +142,10 @@ exports[`home directories should not render directory entry when showOnHomePage
exports[`home directories should render ADMIN directory entry in "Manage" panel 1`] = `
<EuiPage
className="homPage"
restrictWidth={false}
restrictWidth={1200}
>
<EuiPageBody
className="eui-displayBlock"
restrictWidth={false}
>
<InjectIntl(AddDataUi)
@ -191,7 +191,7 @@ exports[`home directories should render ADMIN directory entry in "Manage" panel
/>
<EuiFlexGrid
columns={2}
gutterSize="l"
gutterSize="s"
responsive={true}
/>
</EuiPanel>
@ -226,14 +226,10 @@ exports[`home directories should render ADMIN directory entry in "Manage" panel
responsive={true}
>
<EuiFlexItem
className="homHome__synopsisItem"
component="div"
grow={true}
key="index_patterns"
style={
Object {
"minHeight": 64,
}
}
>
<Synopsis
description="Manage the index patterns that help retrieve your data from Elasticsearch."
@ -301,10 +297,10 @@ exports[`home directories should render ADMIN directory entry in "Manage" panel
exports[`home directories should render DATA directory entry in "Explore Data" panel 1`] = `
<EuiPage
className="homPage"
restrictWidth={false}
restrictWidth={1200}
>
<EuiPageBody
className="eui-displayBlock"
restrictWidth={false}
>
<InjectIntl(AddDataUi)
@ -350,18 +346,14 @@ exports[`home directories should render DATA directory entry in "Explore Data" p
/>
<EuiFlexGrid
columns={2}
gutterSize="l"
gutterSize="s"
responsive={true}
>
<EuiFlexItem
className="homHome__synopsisItem"
component="div"
grow={true}
key="dashboard"
style={
Object {
"minHeight": 64,
}
}
>
<Synopsis
description="Display and share a collection of visualizations and saved searches."
@ -460,10 +452,10 @@ exports[`home directories should render DATA directory entry in "Explore Data" p
exports[`home isNewKibanaInstance should safely handle execeptions 1`] = `
<EuiPage
className="homPage"
restrictWidth={false}
restrictWidth={1200}
>
<EuiPageBody
className="eui-displayBlock"
restrictWidth={false}
>
<InjectIntl(AddDataUi)
@ -509,7 +501,7 @@ exports[`home isNewKibanaInstance should safely handle execeptions 1`] = `
/>
<EuiFlexGrid
columns={2}
gutterSize="l"
gutterSize="s"
responsive={true}
/>
</EuiPanel>
@ -600,10 +592,10 @@ exports[`home isNewKibanaInstance should safely handle execeptions 1`] = `
exports[`home isNewKibanaInstance should set isNewKibanaInstance to false when there are index patterns 1`] = `
<EuiPage
className="homPage"
restrictWidth={false}
restrictWidth={1200}
>
<EuiPageBody
className="eui-displayBlock"
restrictWidth={false}
>
<InjectIntl(AddDataUi)
@ -649,7 +641,7 @@ exports[`home isNewKibanaInstance should set isNewKibanaInstance to false when t
/>
<EuiFlexGrid
columns={2}
gutterSize="l"
gutterSize="s"
responsive={true}
/>
</EuiPanel>
@ -740,10 +732,10 @@ exports[`home isNewKibanaInstance should set isNewKibanaInstance to false when t
exports[`home isNewKibanaInstance should set isNewKibanaInstance to true when there are no index patterns 1`] = `
<EuiPage
className="homPage"
restrictWidth={false}
restrictWidth={1200}
>
<EuiPageBody
className="eui-displayBlock"
restrictWidth={false}
>
<InjectIntl(AddDataUi)
@ -789,7 +781,7 @@ exports[`home isNewKibanaInstance should set isNewKibanaInstance to true when th
/>
<EuiFlexGrid
columns={2}
gutterSize="l"
gutterSize="s"
responsive={true}
/>
</EuiPanel>
@ -880,10 +872,10 @@ exports[`home isNewKibanaInstance should set isNewKibanaInstance to true when th
exports[`home should render home component 1`] = `
<EuiPage
className="homPage"
restrictWidth={false}
restrictWidth={1200}
>
<EuiPageBody
className="eui-displayBlock"
restrictWidth={false}
>
<InjectIntl(AddDataUi)
@ -929,7 +921,7 @@ exports[`home should render home component 1`] = `
/>
<EuiFlexGrid
columns={2}
gutterSize="l"
gutterSize="s"
responsive={true}
/>
</EuiPanel>
@ -1020,10 +1012,10 @@ exports[`home should render home component 1`] = `
exports[`home welcome should show the normal home page if loading fails 1`] = `
<EuiPage
className="homPage"
restrictWidth={false}
restrictWidth={1200}
>
<EuiPageBody
className="eui-displayBlock"
restrictWidth={false}
>
<InjectIntl(AddDataUi)
@ -1069,7 +1061,7 @@ exports[`home welcome should show the normal home page if loading fails 1`] = `
/>
<EuiFlexGrid
columns={2}
gutterSize="l"
gutterSize="s"
responsive={true}
/>
</EuiPanel>
@ -1160,10 +1152,10 @@ exports[`home welcome should show the normal home page if loading fails 1`] = `
exports[`home welcome should show the normal home page if welcome screen is disabled locally 1`] = `
<EuiPage
className="homPage"
restrictWidth={false}
restrictWidth={1200}
>
<EuiPageBody
className="eui-displayBlock"
restrictWidth={false}
>
<InjectIntl(AddDataUi)
@ -1209,7 +1201,7 @@ exports[`home welcome should show the normal home page if welcome screen is disa
/>
<EuiFlexGrid
columns={2}
gutterSize="l"
gutterSize="s"
responsive={true}
/>
</EuiPanel>
@ -1307,10 +1299,10 @@ exports[`home welcome should show the welcome screen if enabled, and there are n
exports[`home welcome stores skip welcome setting if skipped 1`] = `
<EuiPage
className="homPage"
restrictWidth={false}
restrictWidth={1200}
>
<EuiPageBody
className="eui-displayBlock"
restrictWidth={false}
>
<InjectIntl(AddDataUi)
@ -1356,7 +1348,7 @@ exports[`home welcome stores skip welcome setting if skipped 1`] = `
/>
<EuiFlexGrid
columns={2}
gutterSize="l"
gutterSize="s"
responsive={true}
/>
</EuiPanel>

241
src/legacy/core_plugins/kibana/public/home/components/__snapshots__/synopsis.test.js.snap
View file

@ -1,213 +1,70 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`props iconType 1`] = `
<a
className="euiLink synopsis"
<EuiCard
betaBadgeLabel={null}
className="homSynopsis__card homSynopsis__card--noPanel"
data-test-subj="homeSynopsisLinkgreat tutorial"
description="this is a great tutorial about..."
href="link_to_item"
>
<EuiFlexGroup
alignItems="stretch"
component="div"
direction="row"
gutterSize="l"
justifyContent="flexStart"
responsive={true}
wrap={false}
>
<EuiFlexItem
component="div"
grow={false}
>
<EuiIcon
color="primary"
size="xl"
type="logoApache"
/>
</EuiFlexItem>
<EuiFlexItem
className="synopsisContent"
component="div"
grow={true}
>
<EuiTitle
className="synopsisTitle"
size="xs"
textTransform="none"
>
<h4>
Great tutorial
</h4>
</EuiTitle>
<EuiText
className="synopsisBody"
grow={true}
size="s"
>
<p>
<EuiTextColor
color="subdued"
component="span"
>
this is a great tutorial about...
</EuiTextColor>
</p>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</a>
icon={
<EuiIcon
size="l"
type="logoApache"
/>
}
layout="horizontal"
textAlign="center"
title="Great tutorial"
titleElement="span"
/>
`;
exports[`props iconUrl 1`] = `
<a
className="euiLink synopsis"
<EuiCard
betaBadgeLabel={null}
className="homSynopsis__card homSynopsis__card--noPanel"
data-test-subj="homeSynopsisLinkgreat tutorial"
description="this is a great tutorial about..."
href="link_to_item"
>
<EuiFlexGroup
alignItems="stretch"
component="div"
direction="row"
gutterSize="l"
justifyContent="flexStart"
responsive={true}
wrap={false}
>
<EuiFlexItem
component="div"
grow={false}
>
<img
alt=""
className="synopsisIcon"
src="icon_url"
/>
</EuiFlexItem>
<EuiFlexItem
className="synopsisContent"
component="div"
grow={true}
>
<EuiTitle
className="synopsisTitle"
size="xs"
textTransform="none"
>
<h4>
Great tutorial
</h4>
</EuiTitle>
<EuiText
className="synopsisBody"
grow={true}
size="s"
>
<p>
<EuiTextColor
color="subdued"
component="span"
>
this is a great tutorial about...
</EuiTextColor>
</p>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</a>
icon={
<img
alt=""
className="synopsisIcon"
src="icon_url"
/>
}
layout="horizontal"
textAlign="center"
title="Great tutorial"
titleElement="span"
/>
`;
exports[`props isBeta 1`] = `
<a
className="euiLink synopsis"
<EuiCard
betaBadgeLabel="Beta"
className="homSynopsis__card homSynopsis__card--noPanel"
data-test-subj="homeSynopsisLinkgreat tutorial"
description="this is a great tutorial about..."
href="link_to_item"
>
<EuiFlexGroup
alignItems="stretch"
component="div"
direction="row"
gutterSize="l"
justifyContent="flexStart"
responsive={true}
wrap={false}
>
<EuiFlexItem
className="synopsisContent"
component="div"
grow={true}
>
<EuiTitle
className="synopsisTitle"
size="xs"
textTransform="none"
>
<h4>
Great tutorial
</h4>
</EuiTitle>
<EuiText
className="synopsisBody"
grow={true}
size="s"
>
<p>
<EuiTextColor
color="subdued"
component="span"
>
this is a great tutorial about...
</EuiTextColor>
</p>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</a>
layout="horizontal"
textAlign="center"
title="Great tutorial"
titleElement="span"
/>
`;
exports[`render 1`] = `
<a
className="euiLink synopsis"
<EuiCard
betaBadgeLabel={null}
className="homSynopsis__card homSynopsis__card--noPanel"
data-test-subj="homeSynopsisLinkgreat tutorial"
description="this is a great tutorial about..."
href="link_to_item"
>
<EuiFlexGroup
alignItems="stretch"
component="div"
direction="row"
gutterSize="l"
justifyContent="flexStart"
responsive={true}
wrap={false}
>
<EuiFlexItem
className="synopsisContent"
component="div"
grow={true}
>
<EuiTitle
className="synopsisTitle"
size="xs"
textTransform="none"
>
<h4>
Great tutorial
</h4>
</EuiTitle>
<EuiText
className="synopsisBody"
grow={true}
size="s"
>
<p>
<EuiTextColor
color="subdued"
component="span"
>
this is a great tutorial about...
</EuiTextColor>
</p>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</a>
layout="horizontal"
textAlign="center"
title="Great tutorial"
titleElement="span"
/>
`;

21
src/legacy/core_plugins/kibana/public/home/components/_add_data.scss
View file

@ -1,6 +1,5 @@
.homAddData__card {
width: 250px;
min-width: 200px;
max-width: 250px;
border: none;
box-shadow: none;
}
@ -18,3 +17,21 @@
.homAddData__footerItem {
text-align: center;
}
@include euiBreakpoint('xs') {
.homAddData__card {
max-width: none;
}
}
@include euiBreakpoint('xs', 's') {
.homeAddData__flexGroup {
flex-wrap: wrap;
}
}
@include euiBreakpoint('l', 'xl') {
.homeAddData__flexGroup {
flex-wrap: nowrap;
}
}

5
src/legacy/core_plugins/kibana/public/home/components/_home.scss Normal file
View file

@ -0,0 +1,5 @@
@include euiBreakpoint('xs', 's', 'm') {
.homHome__synopsisItem {
flex-basis: 100% !important;
}
}

10
src/legacy/core_plugins/kibana/public/home/components/_index.scss
View file

@ -5,8 +5,10 @@
// homChart__legend--small
// homChart__legend-isLoading
@import 'add_data';
@import 'synopsis';
@import 'welcome';
@import './add_data';
@import './home';
@import './sample_data_set_cards';
@import './synopsis';
@import './welcome';
@import 'tutorial/tutorial';
@import './tutorial/tutorial';

3
src/legacy/core_plugins/kibana/public/home/components/_sample_data_set_cards.scss Normal file
View file

@ -0,0 +1,3 @@
.homSampleDataSetCards {
min-height: 1px; // IE Fix
}

33
src/legacy/core_plugins/kibana/public/home/components/_synopsis.scss
View file

@ -1,27 +1,12 @@
// SASSTODO: Move out of being specifically in home
// ML uses these classes as well
.synopsis {
display: flex;
flex-grow: 1;
cursor: pointer;
.homSynopsis__card {
&.homSynopsis__card--noPanel {
// SASSTODO: Add a prop to EuiCard to allow for no "panel" style
border: none;
box-shadow: none;
}
&:hover,
&:focus {
text-decoration: none;
.synopsisTitle {
text-decoration: underline;
}
// SASSTODO: Fix in EUI
.euiCard__content {
padding-top: 0 !important;
}
}
.synopsisTitle {
font-size: $euiSize;
font-weight: normal;
color: $euiColorPrimary;
}
.synopsisIcon {
padding-top: $euiSizeS;
}

10
src/legacy/core_plugins/kibana/public/home/components/add_data.js
View file

@ -74,7 +74,7 @@ const AddDataUi = ({ apmUiEnabled, isNewKibanaInstance, intl, mlEnabled }) => {
});
const getApmCard = () => (
<EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiCard
className="homAddData__card"
icon={<EuiIcon className="homAddData__icon" type="apmApp" />}
@ -96,11 +96,11 @@ const AddDataUi = ({ apmUiEnabled, isNewKibanaInstance, intl, mlEnabled }) => {
);
return (
<EuiFlexGroup wrap gutterSize="none">
<EuiFlexGroup className="homeAddData__flexGroup" wrap={apmUiEnabled} gutterSize="l" justifyContent="spaceAround" responsive={false}>
{apmUiEnabled !== false && getApmCard()}
<EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiCard
className="homAddData__card"
icon={<EuiIcon className="homAddData__icon" type="loggingApp" />}
@ -120,7 +120,7 @@ const AddDataUi = ({ apmUiEnabled, isNewKibanaInstance, intl, mlEnabled }) => {
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiCard
className="homAddData__card"
icon={<EuiIcon className="homAddData__icon" type="monitoringApp" />}
@ -140,7 +140,7 @@ const AddDataUi = ({ apmUiEnabled, isNewKibanaInstance, intl, mlEnabled }) => {
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiCard
className="homAddData__card"
icon={<EuiIcon className="homAddData__icon" type="securityApp" />}

2
src/legacy/core_plugins/kibana/public/home/components/feature_directory.js
View file

@ -116,7 +116,7 @@ export class FeatureDirectory extends React.Component {
render() {
return (
<EuiPage className="homPage">
<EuiPage restrictWidth={1200}>
<EuiPageBody>
<EuiTitle size="l">
<h1>

8
src/legacy/core_plugins/kibana/public/home/components/home.js
View file

@ -116,7 +116,7 @@ export class Home extends Component {
})
.map(directory => {
return (
<EuiFlexItem style={{ minHeight: 64 }} key={directory.id}>
<EuiFlexItem className="homHome__synopsisItem" key={directory.id}>
<Synopsis
description={directory.description}
iconType={directory.icon}
@ -132,8 +132,8 @@ export class Home extends Component {
const { apmUiEnabled, mlEnabled } = this.props;
return (
<EuiPage className="homPage">
<EuiPageBody>
<EuiPage restrictWidth={1200}>
<EuiPageBody className="eui-displayBlock">
<AddData
apmUiEnabled={apmUiEnabled}
@ -155,7 +155,7 @@ export class Home extends Component {
</h3>
</EuiTitle>
<EuiSpacer size="m" />
<EuiFlexGrid columns={2}>
<EuiFlexGrid columns={2} gutterSize="s">
{this.renderDirectories(FeatureCatalogueCategory.DATA)}
</EuiFlexGrid>
</EuiPanel>

8
src/legacy/core_plugins/kibana/public/home/components/sample_data_set_card.js
View file

@ -55,13 +55,14 @@ export class SampleDataSetCard extends React.Component {
switch (this.props.status) {
case INSTALLED_STATUS:
return (
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexGroup gutterSize="none" justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiButtonEmpty
isLoading={this.props.isProcessing}
onClick={this.uninstall}
color="danger"
data-test-subj={`removeSampleDataSet${this.props.id}`}
flush="left"
>
{this.props.isProcessing
? <FormattedMessage
@ -104,7 +105,7 @@ export class SampleDataSetCard extends React.Component {
/>
: <FormattedMessage
id="kbn.home.sampleDataSetCard.addButtonLabel"
defaultMessage="Add"
defaultMessage="Add data"
/>
}
</EuiButton>
@ -134,7 +135,7 @@ export class SampleDataSetCard extends React.Component {
>
<FormattedMessage
id="kbn.home.sampleDataSetCard.default.addButtonLabel"
defaultMessage="Add"
defaultMessage="Add data"
/>
</EuiButton>
</EuiToolTip>
@ -148,6 +149,7 @@ export class SampleDataSetCard extends React.Component {
render() {
return (
<EuiCard
textAlign="left"
className="homSampleDataSetCard"
image={this.props.previewUrl}
title={this.props.name}

11
src/legacy/core_plugins/kibana/public/home/components/sample_data_set_cards.js
View file

@ -40,6 +40,9 @@ import {
} from '../sample_data_client';
import { i18n } from '@kbn/i18n';
import chrome from 'ui/chrome';
const IS_DARK_THEME = chrome.getUiSettingsClient().get('theme:darkMode');
export class SampleDataSetCards extends React.Component {
@ -181,9 +184,13 @@ export class SampleDataSetCards extends React.Component {
});
}
lightOrDarkImage = (sampleDataSet) => {
return IS_DARK_THEME && sampleDataSet.darkPreviewImagePath ? sampleDataSet.darkPreviewImagePath : sampleDataSet.previewImagePath;
}
render() {
return (
<EuiFlexGrid columns={4}>
<EuiFlexGrid columns={3} className="homSampleDataSetCards">
{
this.state.sampleDataSets.map(sampleDataSet => {
return (
@ -196,7 +203,7 @@ export class SampleDataSetCards extends React.Component {
status={sampleDataSet.status}
isProcessing={_.get(this.state.processingStatus, sampleDataSet.id, false)}
statusMsg={sampleDataSet.statusMsg}
previewUrl={this.props.addBasePath(sampleDataSet.previewImagePath)}
previewUrl={this.props.addBasePath(this.lightOrDarkImage(sampleDataSet))}
onInstall={this.install}
onUninstall={this.uninstall}
/>

90
src/legacy/core_plugins/kibana/public/home/components/synopsis.js
View file

@ -19,13 +19,10 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import {
EuiFlexGroup,
EuiFlexItem,
EuiPanel,
EuiTitle,
EuiText,
EuiTextColor,
EuiCard,
EuiIcon,
} from '@elastic/eui';
@ -33,75 +30,38 @@ export function Synopsis({ description, iconUrl, iconType, title, url, wrapInPan
let optionalImg;
if (iconUrl) {
optionalImg = (
<EuiFlexItem grow={false}>
<img
className="synopsisIcon"
src={iconUrl}
alt=""
/>
</EuiFlexItem>
<img
className="synopsisIcon"
src={iconUrl}
alt=""
/>
);
} else if (iconType) {
optionalImg = (
<EuiFlexItem grow={false}>
<EuiIcon
type={iconType}
color="primary"
size="xl"
/>
</EuiFlexItem>
<EuiIcon
type={iconType}
// color="primary"
size="l"
/>
);
}
const content = (
<EuiFlexGroup>
{optionalImg}
<EuiFlexItem className="synopsisContent">
<EuiTitle size="xs" className="synopsisTitle">
<h4>
{title}
</h4>
</EuiTitle>
<EuiText className="synopsisBody" size="s">
<p>
<EuiTextColor color="subdued">
{description}
</EuiTextColor>
</p>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
);
let synopsisDisplay = content;
if (wrapInPanel) {
synopsisDisplay = (
<EuiPanel className="synopsisPanel" betaBadgeLabel={isBeta ? 'BETA' : null}>
{content}
</EuiPanel>
);
}
if (onClick) {
return (
<span
onClick={onClick}
className="euiLink synopsis"
data-test-subj={`homeSynopsisLink${title.toLowerCase()}`}
>
{synopsisDisplay}
</span>
);
}
const classes = classNames('homSynopsis__card', {
'homSynopsis__card--noPanel': !wrapInPanel,
});
return (
<a
<EuiCard
className={classes}
layout="horizontal"
icon={optionalImg}
title={title}
description={description}
onClick={onClick}
href={url}
className="euiLink synopsis"
data-test-subj={`homeSynopsisLink${title.toLowerCase()}`}
>
{synopsisDisplay}
</a>
betaBadgeLabel={isBeta ? 'Beta' : null}
/>
);
}

31
src/legacy/core_plugins/kibana/public/home/components/tutorial/__snapshots__/introduction.test.js.snap
View file

@ -18,15 +18,11 @@ exports[`props exportedFieldsUrl 1`] = `
alignItems="center"
component="div"
direction="row"
gutterSize="s"
gutterSize="l"
justifyContent="flexStart"
responsive={true}
wrap={false}
>
<EuiFlexItem
component="div"
grow={false}
/>
<EuiFlexItem
component="div"
grow={false}
@ -91,7 +87,7 @@ exports[`props iconType 1`] = `
alignItems="center"
component="div"
direction="row"
gutterSize="s"
gutterSize="l"
justifyContent="flexStart"
responsive={true}
wrap={false}
@ -102,11 +98,6 @@ exports[`props iconType 1`] = `
>
<EuiIcon
size="xl"
style={
Object {
"marginRight": 16,
}
}
type="logoElastic"
/>
</EuiFlexItem>
@ -154,15 +145,11 @@ exports[`props isBeta 1`] = `
alignItems="center"
component="div"
direction="row"
gutterSize="s"
gutterSize="l"
justifyContent="flexStart"
responsive={true}
wrap={false}
>
<EuiFlexItem
component="div"
grow={false}
/>
<EuiFlexItem
component="div"
grow={false}
@ -211,15 +198,11 @@ exports[`props previewUrl 1`] = `
alignItems="center"
component="div"
direction="row"
gutterSize="s"
gutterSize="l"
justifyContent="flexStart"
responsive={true}
wrap={false}
>
<EuiFlexItem
component="div"
grow={false}
/>
<EuiFlexItem
component="div"
grow={false}
@ -273,15 +256,11 @@ exports[`render 1`] = `
alignItems="center"
component="div"
direction="row"
gutterSize="s"
gutterSize="l"
justifyContent="flexStart"
responsive={true}
wrap={false}
>
<EuiFlexItem
component="div"
grow={false}
/>
<EuiFlexItem
component="div"
grow={false}

9
src/legacy/core_plugins/kibana/public/home/components/tutorial/__snapshots__/tutorial.test.js.snap
View file

@ -2,8 +2,7 @@
exports[`isCloudEnabled is false should not render instruction toggle when ON_PREM_ELASTIC_CLOUD instructions are not provided 1`] = `
<EuiPage
className="homPage"
restrictWidth={false}
restrictWidth={1200}
>
<EuiPageBody
restrictWidth={false}
@ -57,8 +56,7 @@ exports[`isCloudEnabled is false should not render instruction toggle when ON_PR
exports[`isCloudEnabled is false should render ON_PREM instructions with instruction toggle 1`] = `
<EuiPage
className="homPage"
restrictWidth={false}
restrictWidth={1200}
>
<EuiPageBody
restrictWidth={false}
@ -149,8 +147,7 @@ exports[`isCloudEnabled is false should render ON_PREM instructions with instruc
exports[`should render ELASTIC_CLOUD instructions when isCloudEnabled is true 1`] = `
<EuiPage
className="homPage"
restrictWidth={false}
restrictWidth={1200}
>
<EuiPageBody
restrictWidth={false}

4
src/legacy/core_plugins/kibana/public/home/components/tutorial/_tutorial.scss
View file

@ -2,3 +2,7 @@
background: $euiColorEmptyShade;
padding: $euiSizeL;
}
.homTutorial__instruction {
flex-shrink: 0;
}

2
src/legacy/core_plugins/kibana/public/home/components/tutorial/instruction.js
View file

@ -91,7 +91,7 @@ export function Instruction({ commands, paramValues, textPost, textPre, replaceT
</EuiFlexItem>
<EuiFlexItem
style={{ minWidth: 114 }}
className="homTutorial__instruction"
grow={false}
>
{copyButton}

17
src/legacy/core_plugins/kibana/public/home/components/tutorial/introduction.js
View file

@ -68,11 +68,12 @@ function IntroductionUI({ description, previewUrl, title, exportedFieldsUrl, ico
let icon;
if (iconType) {
icon = (
<EuiIcon
type={iconType}
size="xl"
style={{ marginRight: 16 }}
/>
<EuiFlexItem grow={false}>
<EuiIcon
type={iconType}
size="xl"
/>
</EuiFlexItem>
);
}
let betaBadge;
@ -91,10 +92,8 @@ function IntroductionUI({ description, previewUrl, title, exportedFieldsUrl, ico
<EuiFlexItem>
<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
{icon}
</EuiFlexItem>
<EuiFlexGroup gutterSize="l" alignItems="center">
{icon}
<EuiFlexItem grow={false}>
<EuiTitle size="l">
<h2>

2
src/legacy/core_plugins/kibana/public/home/components/tutorial/tutorial.js
View file

@ -374,7 +374,7 @@ class TutorialUi extends React.Component {
}
return (
<EuiPage className="homPage">
<EuiPage restrictWidth={1200}>
<EuiPageBody>
{content}
</EuiPageBody>

2
src/legacy/core_plugins/kibana/public/home/components/tutorial_directory.js
View file

@ -195,7 +195,7 @@ class TutorialDirectoryUi extends React.Component {
render() {
return (
<EuiPage className="homPage">
<EuiPage restrictWidth={1200}>
<EuiPageBody>
<EuiTitle size="l">
<h1>

BIN
src/legacy/core_plugins/kibana/public/home/sample_data_resources/ecommerce/dashboard.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 80 KiB

After

Width:  |  Height:  |  Size: 99 KiB

Before After
Before After

BIN
src/legacy/core_plugins/kibana/public/home/sample_data_resources/ecommerce/dashboard_dark.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 120 KiB

BIN
src/legacy/core_plugins/kibana/public/home/sample_data_resources/flights/dashboard.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 71 KiB

After

Width:  |  Height:  |  Size: 84 KiB

Before After
Before After

BIN
src/legacy/core_plugins/kibana/public/home/sample_data_resources/flights/dashboard_dark.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 104 KiB

BIN
src/legacy/core_plugins/kibana/public/home/sample_data_resources/logs/dashboard.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 98 KiB

After

Width:  |  Height:  |  Size: 92 KiB

Before After
Before After

BIN
src/legacy/core_plugins/kibana/public/home/sample_data_resources/logs/dashboard_dark.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 106 KiB

2
src/legacy/core_plugins/kibana/server/tutorials/mssql_metrics/index.js
View file

@ -39,7 +39,7 @@ export function mssqlMetricsSpecProvider(server, context) {
learnMoreLink: '{config.docs.beats.metricbeat}/metricbeat-module-mssql.html',
},
}),
euiIconType: 'logoMSSQL',
// euiIconType: 'logoMSSQL',
isBeta: false,
artifacts: {
dashboards: [

1
src/server/sample_data/data_set_schema.js
View file

@ -49,6 +49,7 @@ export const sampleDataSchema = {
name: Joi.string().required(),
description: Joi.string().required(),
previewImagePath: Joi.string().required(),
darkPreviewImagePath: Joi.string(),
// saved object id of main dashboard for sample data set
overviewDashboard: Joi.string().required(),

1
src/server/sample_data/data_sets/ecommerce/index.js
View file

@ -32,6 +32,7 @@ export function ecommerceSpecProvider() {
defaultMessage: 'Sample data, visualizations, and dashboards for tracking eCommerce orders.',
}),
previewImagePath: '/plugins/kibana/home/sample_data_resources/ecommerce/dashboard.png',
darkPreviewImagePath: '/plugins/kibana/home/sample_data_resources/ecommerce/dashboard_dark.png',
overviewDashboard: '722b74f0-b882-11e8-a6d9-e546fe2bba5f',
defaultIndex: 'ff959d40-b880-11e8-a6d9-e546fe2bba5f',
savedObjects: getSavedObjects(),

1
src/server/sample_data/data_sets/flights/index.js
View file

@ -32,6 +32,7 @@ export function flightsSpecProvider() {
defaultMessage: 'Sample data, visualizations, and dashboards for monitoring flight routes.',
}),
previewImagePath: '/plugins/kibana/home/sample_data_resources/flights/dashboard.png',
darkPreviewImagePath: '/plugins/kibana/home/sample_data_resources/flights/dashboard_dark.png',
overviewDashboard: '7adfa750-4c81-11e8-b3d7-01146121b73d',
defaultIndex: 'd3d7af60-4c81-11e8-b3d7-01146121b73d',
savedObjects: getSavedObjects(),

1
src/server/sample_data/data_sets/logs/index.js
View file

@ -32,6 +32,7 @@ export function logsSpecProvider() {
defaultMessage: 'Sample data, visualizations, and dashboards for monitoring web logs.',
}),
previewImagePath: '/plugins/kibana/home/sample_data_resources/logs/dashboard.png',
darkPreviewImagePath: '/plugins/kibana/home/sample_data_resources/logs/dashboard_dark.png',
overviewDashboard: 'edf84fe0-e1a0-11e7-b6d5-4dc382ef7f5b',
defaultIndex: '90943e30-9a47-11e8-b64d-95841ca0b247',
savedObjects: getSavedObjects(),

1
src/server/sample_data/routes/list.js
View file

@ -37,6 +37,7 @@ export const createListRoute = () => ({
name: sampleDataset.name,
description: sampleDataset.description,
previewImagePath: sampleDataset.previewImagePath,
darkPreviewImagePath: sampleDataset.darkPreviewImagePath,
overviewDashboard: sampleDataset.overviewDashboard,
defaultIndex: sampleDataset.defaultIndex,
dataIndices: sampleDataset.dataIndices.map(dataIndexConfig => {

28
x-pack/plugins/ml/public/components/data_recognizer/_data_recognizer.scss
View file

@ -2,4 +2,30 @@ ml-data-recognizer {
.ml-data-recognizer-logo {
width: $euiSizeXL;
}
}
}
// Moved here from /home since it's no longer being used there
.synopsis {
display: flex;
flex-grow: 1;
cursor: pointer;
&:hover,
&:focus {
text-decoration: none;
.synopsisTitle {
text-decoration: underline;
}
}
}
.synopsisTitle {
font-size: $euiSize;
font-weight: normal;
color: $euiColorPrimary;
}
.synopsisIcon {
padding-top: $euiSizeS;
}