From c5001b1f55d836f71336c5ab035bfbe9e6d93f25 Mon Sep 17 00:00:00 2001 From: "dave.snider@gmail.com" Date: Fri, 12 Jan 2018 15:59:54 -0800 Subject: [PATCH] Homepage / index pattern design cleanup (#16005) Rebuilds most of the homepage using EUI components. Adjusts styles to be closer to mocks. --- .../home/components/feature_directory.js | 55 ++-- .../kibana/public/home/components/home.js | 52 ++-- .../kibana/public/home/components/synopsis.js | 73 ++++-- .../public/home/components/synopsis.less | 20 +- .../__snapshots__/content.test.js.snap | 2 +- .../__snapshots__/tutorial.test.js.snap | 248 ++++++++++-------- .../home/components/tutorial/content.js | 2 +- .../home/components/tutorial/copy_button.js | 8 +- .../home/components/tutorial/instruction.js | 6 +- .../home/components/tutorial/introduction.js | 37 +-- .../components/tutorial/introduction.less | 3 - .../home/components/tutorial/tutorial.js | 29 +- .../home/components/tutorial/tutorial.less | 9 - .../home/components/tutorial_directory.js | 67 ++--- src/core_plugins/kibana/public/home/home.less | 7 +- .../create_index_pattern_wizard.html | 7 +- ui_framework/dist/ui_framework.css | 2 +- .../src/global_styling/reset/_reset.scss | 8 +- 18 files changed, 350 insertions(+), 285 deletions(-) delete mode 100644 src/core_plugins/kibana/public/home/components/tutorial/introduction.less diff --git a/src/core_plugins/kibana/public/home/components/feature_directory.js b/src/core_plugins/kibana/public/home/components/feature_directory.js index c79ac1078b5d6..df85c96afcfc6 100644 --- a/src/core_plugins/kibana/public/home/components/feature_directory.js +++ b/src/core_plugins/kibana/public/home/components/feature_directory.js @@ -2,11 +2,15 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Synopsis } from './synopsis'; import { - KuiTabs, - KuiTab, - KuiFlexItem, - KuiFlexGrid, -} from 'ui_framework/components'; + EuiTabs, + EuiTab, + EuiFlexItem, + EuiFlexGrid, + EuiPage, + EuiTitle, + EuiSpacer, +} from '@elastic/eui'; + import { FeatureCatalogueCategory } from 'ui/registry/feature_catalogue'; const ALL_TAB_ID = 'all'; @@ -51,14 +55,14 @@ export class FeatureDirectory extends React.Component { renderTabs = () => { return this.tabs.map((tab, index) => ( - this.onSelectedTabChanged(tab.id)} isSelected={tab.id === this.state.selectedTabId} key={index} > {tab.name} - + )); } @@ -75,37 +79,36 @@ export class FeatureDirectory extends React.Component { }) .map((directory) => { return ( - + - + ); }); }; render() { return ( -
-
-
-

- Directory -

-
-
- - {this.renderTabs()} - - - { this.renderDirectories() } - -
-
-
+ + +

+ Directory +

+ + + + {this.renderTabs()} + + + + { this.renderDirectories() } + + ); } } diff --git a/src/core_plugins/kibana/public/home/components/home.js b/src/core_plugins/kibana/public/home/components/home.js index 4b1e53f2ff7cc..cffdfaab7d7c0 100644 --- a/src/core_plugins/kibana/public/home/components/home.js +++ b/src/core_plugins/kibana/public/home/components/home.js @@ -20,6 +20,7 @@ import { EuiFlexItem, EuiFlexGrid, EuiText, + EuiTextColor, } from '@elastic/eui'; import { FeatureCatalogueCategory } from 'ui/registry/feature_catalogue'; @@ -56,7 +57,7 @@ export function Home({ addBasePath, directories }) { return (
- + - Add data + Add log data - + - Add data + Add metric data - +

- Security Analytics + Security analytics

@@ -129,7 +130,7 @@ export function Home({ addBasePath, directories }) { buttonType="secondary" href={addBasePath(`${kbnBaseUrl}#/home/tutorial_directory/security`)} > - Add data + Add security events @@ -149,33 +150,32 @@ export function Home({ addBasePath, directories }) {

Add Data to Kibana

 + +

+ Use these solutions to quickly turn your data into pre-built dashboards and monitoring systems. +

+ - - -

+ + +

Data already in Elasticsearch?

- - - - - Set up index patterns - - - - + + + + + + Set up index patterns + + -

- These turnkey solutions will help you quickly add data into Kibana and turn it into - pre-built dashboards and monitoring systems. -

+ + { renderPromo() } diff --git a/src/core_plugins/kibana/public/home/components/synopsis.js b/src/core_plugins/kibana/public/home/components/synopsis.js index a336d777860e0..0c2bda748d616 100644 --- a/src/core_plugins/kibana/public/home/components/synopsis.js +++ b/src/core_plugins/kibana/public/home/components/synopsis.js @@ -2,39 +2,66 @@ import './synopsis.less'; import React from 'react'; import PropTypes from 'prop-types'; import { - KuiFlexGroup, - KuiFlexItem -} from 'ui_framework/components'; + EuiFlexGroup, + EuiFlexItem, + EuiPanel, + EuiTitle, + EuiText, + EuiTextColor, +} from '@elastic/eui'; -export function Synopsis({ description, iconUrl, title, url }) { - let img; +export function Synopsis({ description, iconUrl, title, url, wrapInPanel }) { + let optionalImg; if (iconUrl) { - img = ( - + optionalImg = ( + + + ); } + const content = ( + + {optionalImg} + + +

+ {title} +

+ + +

+ + {description} + +

+ + + + ); + + let synopsisDisplay = content; + if (wrapInPanel) { + synopsisDisplay = ( + + {content} + + ); + } + + + return ( - - {img} - -

- {title} -

-

- {description} -

- - + {synopsisDisplay} ); } diff --git a/src/core_plugins/kibana/public/home/components/synopsis.less b/src/core_plugins/kibana/public/home/components/synopsis.less index 583270d2384c5..2bbc652b02aa5 100644 --- a/src/core_plugins/kibana/public/home/components/synopsis.less +++ b/src/core_plugins/kibana/public/home/components/synopsis.less @@ -1,19 +1,33 @@ @import (reference) "~ui/styles/variables.less"; +.synopsis { + display: flex; + flex-grow: 1; +} + .synopsis:hover { text-decoration: none; - .kuiTextTitle { + .synopsisTitle { text-decoration: underline; } } -.synopsisContent { - margin-left: 10px !important; +.synopsis:focus { + text-decoration: none; + + .synopsisPanel { + border: solid 1px @globalColorBlue; + } + + .synopsisBody { + text-decoration: none; + } } .synopsisTitle { font-size: 16px; font-weight: normal; + color: @globalColorBlue; } .synopsisIcon { diff --git a/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/content.test.js.snap b/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/content.test.js.snap index 95d8e79fb5eef..73ee924f266a7 100644 --- a/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/content.test.js.snap +++ b/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/content.test.js.snap @@ -2,7 +2,7 @@ exports[`should render content with markdown 1`] = `
I am some content with markdown

diff --git a/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/tutorial.test.js.snap b/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/tutorial.test.js.snap index 72a0209d9d6f4..8f40f1838e3f8 100644 --- a/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/tutorial.test.js.snap +++ b/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/tutorial.test.js.snap @@ -1,133 +1,151 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`should render ELASTIC_CLOUD instructions when isCloudEnabled is true 1`] = ` -
-
- - Home - - / - + / + + Add Data + + +
+ + +
+ + - Add Data - -
- -
-
- -
-
+
-
+ `; exports[`should render ON_PREM instructions with instructions cloud toggle when isCloudEnabled is false 1`] = ` -
-
- - Home - - / - + / + + Add Data + + +
+ + +
- Add Data - -
- -
- -
-
- -
+ + + +
-
+ `; diff --git a/src/core_plugins/kibana/public/home/components/tutorial/content.js b/src/core_plugins/kibana/public/home/components/tutorial/content.js index abba5839bb30a..43fffd688babb 100644 --- a/src/core_plugins/kibana/public/home/components/tutorial/content.js +++ b/src/core_plugins/kibana/public/home/components/tutorial/content.js @@ -21,7 +21,7 @@ markdownIt.renderer.rules.link_open = function (tokens, idx, options, env, self) }; export function Content({ className, text }) { - const classes = classNames('kuiText kuiSubduedText tutorialContent markdown-body', className); + const classes = classNames('euiText euiTextColor--subdued tutorialContent markdown-body', className); return (
} > - Copy snippet - + ); } diff --git a/src/core_plugins/kibana/public/home/components/tutorial/instruction.js b/src/core_plugins/kibana/public/home/components/tutorial/instruction.js index 02fef8807c2ca..106609942da62 100644 --- a/src/core_plugins/kibana/public/home/components/tutorial/instruction.js +++ b/src/core_plugins/kibana/public/home/components/tutorial/instruction.js @@ -24,7 +24,7 @@ export function Instruction({ commands, paramValues, textPost, textPre, replaceT if (textPost) { post = (
- + @@ -43,7 +43,7 @@ export function Instruction({ commands, paramValues, textPost, textPre, replaceT ); commandBlock = (
- + {cmdText} @@ -71,6 +71,8 @@ export function Instruction({ commands, paramValues, textPost, textPre, replaceT {post} + +
); } diff --git a/src/core_plugins/kibana/public/home/components/tutorial/introduction.js b/src/core_plugins/kibana/public/home/components/tutorial/introduction.js index 29dbf17c5c3ec..c5ed87312dcdb 100644 --- a/src/core_plugins/kibana/public/home/components/tutorial/introduction.js +++ b/src/core_plugins/kibana/public/home/components/tutorial/introduction.js @@ -1,15 +1,10 @@ -import './introduction.less'; import React from 'react'; import PropTypes from 'prop-types'; import { Content } from './content'; - +import { EuiTitle, EuiFlexItem, EuiFlexGroup, EuiSpacer, EuiImage } from '@elastic/eui'; import { KuiLinkButton, } from 'ui_framework/components'; -import { - EuiImage, - EuiSpacer, -} from '@elastic/eui'; export function Introduction({ description, previewUrl, title, exportedFieldsUrl }) { let img; @@ -42,23 +37,19 @@ export function Introduction({ description, previewUrl, title, exportedFieldsUrl ); } return ( -
-
- -
-

- {title} -

- - {exportedFields} -
- -
- {img} -
- -
-
+ + + +

{title}

+ + + + {exportedFields} + + + {img} + + ); } diff --git a/src/core_plugins/kibana/public/home/components/tutorial/introduction.less b/src/core_plugins/kibana/public/home/components/tutorial/introduction.less deleted file mode 100644 index cd3b8d106fef8..0000000000000 --- a/src/core_plugins/kibana/public/home/components/tutorial/introduction.less +++ /dev/null @@ -1,3 +0,0 @@ -.introduction { - margin: 24px; -} diff --git a/src/core_plugins/kibana/public/home/components/tutorial/tutorial.js b/src/core_plugins/kibana/public/home/components/tutorial/tutorial.js index df59059c44b28..f99208fc7bdad 100644 --- a/src/core_plugins/kibana/public/home/components/tutorial/tutorial.js +++ b/src/core_plugins/kibana/public/home/components/tutorial/tutorial.js @@ -5,6 +5,7 @@ import PropTypes from 'prop-types'; import { Introduction } from './introduction'; import { InstructionSet } from './instruction_set'; import { RadioButtonGroup } from './radio_button_group'; +import { EuiSpacer, EuiPage, EuiPanel, EuiLink, EuiText } from '@elastic/eui'; const INSTRUCTIONS_TYPE = { ELASTIC_CLOUD: 'elasticCloud', @@ -157,9 +158,11 @@ export class Tutorial extends React.Component { if (this.state.notFound) { content = (
-

- Unable to find tutorial {this.props.tutorialId} -

+ +

+ Unable to find tutorial {this.props.tutorialId} +

+
); } @@ -185,23 +188,25 @@ export class Tutorial extends React.Component { exportedFieldsUrl={exportedFieldsUrl} /> -
+ +
{this.renderInstructionSetsToggle()}
-
+ + {this.renderInstructionSets(instructions)} -
+
); } return ( -
-
- Home / Add Data - {content} -
-
+ + + Home / Add Data + + {content} + ); } } diff --git a/src/core_plugins/kibana/public/home/components/tutorial/tutorial.less b/src/core_plugins/kibana/public/home/components/tutorial/tutorial.less index ddc39e54f04f0..855a6a0f97746 100644 --- a/src/core_plugins/kibana/public/home/components/tutorial/tutorial.less +++ b/src/core_plugins/kibana/public/home/components/tutorial/tutorial.less @@ -1,12 +1,3 @@ -.tutorialContent { - /* - * 1. remove bottom margin placed on p element by bootstrap - */ - p { - margin-bottom: 0; /* 1 */ - } -} - .text-center > .kuiButtonGroup { display: inline-block !important; } diff --git a/src/core_plugins/kibana/public/home/components/tutorial_directory.js b/src/core_plugins/kibana/public/home/components/tutorial_directory.js index c8ab44334bc7a..dbb4a6dc92615 100644 --- a/src/core_plugins/kibana/public/home/components/tutorial_directory.js +++ b/src/core_plugins/kibana/public/home/components/tutorial_directory.js @@ -1,12 +1,18 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Synopsis } from './synopsis'; + import { - KuiTabs, - KuiTab, - KuiFlexItem, - KuiFlexGrid, -} from 'ui_framework/components'; + EuiPage, + EuiTabs, + EuiTab, + EuiFlexItem, + EuiFlexGrid, + EuiSpacer, + EuiTitle, +} from '@elastic/eui'; + + import { getTutorials } from '../load_tutorials'; const ALL = 'all'; @@ -55,14 +61,14 @@ export class TutorialDirectory extends React.Component { renderTabs = () => { return this.tabs.map((tab, index) => ( - this.onSelectedTabChanged(tab.id)} isSelected={tab.id === this.state.selectedTabId} key={index} > {tab.name} - + )); } @@ -76,40 +82,41 @@ export class TutorialDirectory extends React.Component { }) .map((tutorial) => { return ( - + - + ); }); }; render() { return ( -
-
- -
- Home -

- Add Data to Kibana -

-
- -
- - {this.renderTabs()} - - - { this.renderTutorials() } - -
- -
-
+ + + Home + + +

+ Add Data to Kibana +

+ + + + + + {this.renderTabs()} + + + + { this.renderTutorials() } + + + ); } } diff --git a/src/core_plugins/kibana/public/home/home.less b/src/core_plugins/kibana/public/home/home.less index df4ed0ddfb0ca..b6e372103e5dc 100644 --- a/src/core_plugins/kibana/public/home/home.less +++ b/src/core_plugins/kibana/public/home/home.less @@ -1,8 +1,13 @@ @import (reference) "~ui/styles/variables.less"; -.home { +home-app { background-color: @globalColorLightestGray; +} + +.home { min-height: 100vh; + max-width: 1200px; + margin: auto; } .kuiCard__descriptionTitle img { diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.html b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.html index 732458288d59f..b2eb9d18a43eb 100644 --- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.html +++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.html @@ -39,6 +39,7 @@

@@ -83,16 +84,16 @@

ng-if="!controller.isFetchingExistingIndices" >
-

+

Couldn't find any Elasticsearch data

-

+

You'll need to index some data into Elasticsearch before you can create an index pattern.