maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Home less to sass (2) (#22160)

Browse source
This commit is contained in:
Caroline Horn 2018-08-21 18:28:15 -04:00 committed by GitHub
parent 8718d1ee4d
commit 3175253056
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
39 changed files with 624 additions and 383 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

329
packages/kbn-ui-framework/dist/ui_framework.css vendored
View file

File diff suppressed because it is too large Load diff

7
packages/kbn-ui-framework/src/components/button/button_group/_button_group.scss
View file

@ -42,3 +42,10 @@
text-align: center;
}
}
// KuiButtonGroup doesn't pass down className, so can't create custom classname
// So this little gem was being applied in Home/components/tutorial
.eui-textCenter > .kuiButtonGroup,
.text-center > .kuiButtonGroup {
display: inline-block;
}

2
src/core_plugins/kibana/public/dashboard/panel/_dashboard_panel.scss
View file

@ -104,7 +104,7 @@
color: $euiColorDarkShade;
transition: color $euiAnimSpeedFast $euiAnimSlightResistance;
flex: 1 1 auto;
@include truncate;
@include euiTextTruncate;
// flexbox fix for IE10
// http://stackoverflow.com/questions/22008135/internet-explorer-10-does-not-apply-flexbox-on-inline-elements

13
src/core_plugins/kibana/public/home/_home.scss Normal file
View file

@ -0,0 +1,13 @@
home-app {
background-color: $euiColorLightestShade;
}
.homPage {
min-height: 100vh;
max-width: 1200px;
margin: auto;
}
.homSampleDataSetCard {
flex-grow: 0; // IE FIX
}

2
src/core_plugins/kibana/public/home/_index.scss Normal file
View file

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

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

@ -52,11 +52,11 @@ exports[`apmUiEnabled 1`] = `
grow={true}
>
<EuiCard
className="addDataCard"
className="homAddData__card"
description="APM automatically collects in-depth performance metrics and errors from inside your applications."
footer={
<EuiButton
className="addDataButton"
className="homAddData__button"
color="primary"
fill={false}
href="#/home/tutorial/apm"
@ -68,7 +68,7 @@ exports[`apmUiEnabled 1`] = `
}
icon={
<EuiIcon
className="addDataIcon"
className="homAddData__icon"
size="m"
type="apmApp"
/>
@ -84,11 +84,11 @@ exports[`apmUiEnabled 1`] = `
grow={true}
>
<EuiCard
className="addDataCard"
className="homAddData__card"
description="Ingest logs from popular data sources and easily visualize in preconfigured dashboards."
footer={
<EuiButton
className="addDataButton"
className="homAddData__button"
color="primary"
fill={false}
href="#/home/tutorial_directory/logging"
@ -100,7 +100,7 @@ exports[`apmUiEnabled 1`] = `
}
icon={
<EuiIcon
className="addDataIcon"
className="homAddData__icon"
size="m"
type="loggingApp"
/>
@ -116,11 +116,11 @@ exports[`apmUiEnabled 1`] = `
grow={true}
>
<EuiCard
className="addDataCard"
className="homAddData__card"
description="Collect metrics from the operating system and services running on your servers."
footer={
<EuiButton
className="addDataButton"
className="homAddData__button"
color="primary"
fill={false}
href="#/home/tutorial_directory/metrics"
@ -132,7 +132,7 @@ exports[`apmUiEnabled 1`] = `
}
icon={
<EuiIcon
className="addDataIcon"
className="homAddData__icon"
size="m"
type="monitoringApp"
/>
@ -148,11 +148,11 @@ exports[`apmUiEnabled 1`] = `
grow={true}
>
<EuiCard
className="addDataCard"
className="homAddData__card"
description="Centralize security events for interactive investigation in ready-to-go visualizations."
footer={
<EuiButton
className="addDataButton"
className="homAddData__button"
color="primary"
fill={false}
href="#/home/tutorial_directory/security"
@ -164,7 +164,7 @@ exports[`apmUiEnabled 1`] = `
}
icon={
<EuiIcon
className="addDataIcon"
className="homAddData__icon"
size="m"
type="securityApp"
/>
@ -190,7 +190,7 @@ exports[`apmUiEnabled 1`] = `
wrap={false}
>
<EuiFlexItem
className="addDataFooterItem"
className="homAddData__footerItem"
component="div"
grow={true}
>
@ -221,7 +221,7 @@ exports[`apmUiEnabled 1`] = `
</EuiText>
</EuiFlexItem>
<EuiFlexItem
className="addDataFooterItem"
className="homAddData__footerItem"
component="div"
grow={true}
>
@ -307,11 +307,11 @@ exports[`isNewKibanaInstance 1`] = `
grow={true}
>
<EuiCard
className="addDataCard"
className="homAddData__card"
description="Ingest logs from popular data sources and easily visualize in preconfigured dashboards."
footer={
<EuiButton
className="addDataButton"
className="homAddData__button"
color="primary"
fill={false}
href="#/home/tutorial_directory/logging"
@ -323,7 +323,7 @@ exports[`isNewKibanaInstance 1`] = `
}
icon={
<EuiIcon
className="addDataIcon"
className="homAddData__icon"
size="m"
type="loggingApp"
/>
@ -339,11 +339,11 @@ exports[`isNewKibanaInstance 1`] = `
grow={true}
>
<EuiCard
className="addDataCard"
className="homAddData__card"
description="Collect metrics from the operating system and services running on your servers."
footer={
<EuiButton
className="addDataButton"
className="homAddData__button"
color="primary"
fill={false}
href="#/home/tutorial_directory/metrics"
@ -355,7 +355,7 @@ exports[`isNewKibanaInstance 1`] = `
}
icon={
<EuiIcon
className="addDataIcon"
className="homAddData__icon"
size="m"
type="monitoringApp"
/>
@ -371,11 +371,11 @@ exports[`isNewKibanaInstance 1`] = `
grow={true}
>
<EuiCard
className="addDataCard"
className="homAddData__card"
description="Centralize security events for interactive investigation in ready-to-go visualizations."
footer={
<EuiButton
className="addDataButton"
className="homAddData__button"
color="primary"
fill={false}
href="#/home/tutorial_directory/security"
@ -387,7 +387,7 @@ exports[`isNewKibanaInstance 1`] = `
}
icon={
<EuiIcon
className="addDataIcon"
className="homAddData__icon"
size="m"
type="securityApp"
/>
@ -413,7 +413,7 @@ exports[`isNewKibanaInstance 1`] = `
wrap={false}
>
<EuiFlexItem
className="addDataFooterItem addDataFooterItem_highlight"
className="homAddData__footerItem homAddData__footerItem--highlight"
component="div"
grow={true}
>
@ -444,7 +444,7 @@ exports[`isNewKibanaInstance 1`] = `
</EuiText>
</EuiFlexItem>
<EuiFlexItem
className="addDataFooterItem addDataFooterItem_highlight"
className="homAddData__footerItem homAddData__footerItem--highlight"
component="div"
grow={true}
>
@ -530,11 +530,11 @@ exports[`render 1`] = `
grow={true}
>
<EuiCard
className="addDataCard"
className="homAddData__card"
description="Ingest logs from popular data sources and easily visualize in preconfigured dashboards."
footer={
<EuiButton
className="addDataButton"
className="homAddData__button"
color="primary"
fill={false}
href="#/home/tutorial_directory/logging"
@ -546,7 +546,7 @@ exports[`render 1`] = `
}
icon={
<EuiIcon
className="addDataIcon"
className="homAddData__icon"
size="m"
type="loggingApp"
/>
@ -562,11 +562,11 @@ exports[`render 1`] = `
grow={true}
>
<EuiCard
className="addDataCard"
className="homAddData__card"
description="Collect metrics from the operating system and services running on your servers."
footer={
<EuiButton
className="addDataButton"
className="homAddData__button"
color="primary"
fill={false}
href="#/home/tutorial_directory/metrics"
@ -578,7 +578,7 @@ exports[`render 1`] = `
}
icon={
<EuiIcon
className="addDataIcon"
className="homAddData__icon"
size="m"
type="monitoringApp"
/>
@ -594,11 +594,11 @@ exports[`render 1`] = `
grow={true}
>
<EuiCard
className="addDataCard"
className="homAddData__card"
description="Centralize security events for interactive investigation in ready-to-go visualizations."
footer={
<EuiButton
className="addDataButton"
className="homAddData__button"
color="primary"
fill={false}
href="#/home/tutorial_directory/security"
@ -610,7 +610,7 @@ exports[`render 1`] = `
}
icon={
<EuiIcon
className="addDataIcon"
className="homAddData__icon"
size="m"
type="securityApp"
/>
@ -636,7 +636,7 @@ exports[`render 1`] = `
wrap={false}
>
<EuiFlexItem
className="addDataFooterItem"
className="homAddData__footerItem"
component="div"
grow={true}
>
@ -667,7 +667,7 @@ exports[`render 1`] = `
</EuiText>
</EuiFlexItem>
<EuiFlexItem
className="addDataFooterItem"
className="homAddData__footerItem"
component="div"
grow={true}
>

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

@ -2,7 +2,7 @@
exports[`home directories should not render directory entry when showOnHomePage is false 1`] = `
<EuiPage
className="home"
className="homPage"
restrictWidth={false}
>
<EuiPageBody
@ -120,7 +120,7 @@ exports[`home directories should not render directory entry when showOnHomePage
exports[`home directories should render ADMIN directory entry in "Manage" panel 1`] = `
<EuiPage
className="home"
className="homPage"
restrictWidth={false}
>
<EuiPageBody
@ -257,7 +257,7 @@ 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="home"
className="homPage"
restrictWidth={false}
>
<EuiPageBody
@ -394,7 +394,7 @@ exports[`home directories should render DATA directory entry in "Explore Data" p
exports[`home isNewKibanaInstance should safely handle execeptions 1`] = `
<EuiPage
className="home"
className="homPage"
restrictWidth={false}
>
<EuiPageBody
@ -512,7 +512,7 @@ exports[`home isNewKibanaInstance should safely handle execeptions 1`] = `
exports[`home isNewKibanaInstance should set isNewKibanaInstance to false when there are index patterns 1`] = `
<EuiPage
className="home"
className="homPage"
restrictWidth={false}
>
<EuiPageBody
@ -630,7 +630,7 @@ 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="home"
className="homPage"
restrictWidth={false}
>
<EuiPageBody
@ -748,7 +748,7 @@ exports[`home isNewKibanaInstance should set isNewKibanaInstance to true when th
exports[`home should not contain RecentlyAccessed panel when there is no recentlyAccessed history 1`] = `
<EuiPage
className="home"
className="homPage"
restrictWidth={false}
>
<EuiPageBody
@ -866,7 +866,7 @@ exports[`home should not contain RecentlyAccessed panel when there is no recentl
exports[`home should render home component 1`] = `
<EuiPage
className="home"
className="homPage"
restrictWidth={false}
>
<EuiPageBody
@ -1000,7 +1000,7 @@ exports[`home should render home component 1`] = `
exports[`home welcome should show the normal home page if loading fails 1`] = `
<EuiPage
className="home"
className="homPage"
restrictWidth={false}
>
<EuiPageBody
@ -1118,7 +1118,7 @@ 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="home"
className="homPage"
restrictWidth={false}
>
<EuiPageBody
@ -1243,7 +1243,7 @@ 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="home"
className="homPage"
restrictWidth={false}
>
<EuiPageBody

14
src/core_plugins/kibana/public/home/components/__snapshots__/recently_accessed.test.js.snap
View file

@ -31,7 +31,7 @@ exports[`render 1`] = `
wrap={true}
>
<EuiFlexItem
className="recentlyAccessedFlexItem"
className="homRecentlyAccessed__flexItem"
component="div"
grow={false}
>
@ -48,7 +48,7 @@ exports[`render 1`] = `
key="0"
>
<EuiFlexItem
className="recentlyAccessedItem"
className="homRecentlyAccessed__item"
component="div"
grow={false}
style={
@ -58,11 +58,12 @@ exports[`render 1`] = `
}
>
<EuiToolTip
anchorClassName="homRecentlyAccessed__anchor"
content="label0"
position="bottom"
>
<EuiLink
className="recentlyAccessedLongLink"
className="homRecentlyAccessed__longLink"
color="primary"
href="link0"
type="button"
@ -76,7 +77,7 @@ exports[`render 1`] = `
key="1"
>
<EuiFlexItem
className="recentlyAccessedSeparator"
className="homRecentlyAccessed__separator"
component="div"
grow={false}
>
@ -91,7 +92,7 @@ exports[`render 1`] = `
</EuiText>
</EuiFlexItem>
<EuiFlexItem
className="recentlyAccessedItem"
className="homRecentlyAccessed__item"
component="div"
grow={false}
style={
@ -101,11 +102,12 @@ exports[`render 1`] = `
}
>
<EuiToolTip
anchorClassName="homRecentlyAccessed__anchor"
content="label1"
position="bottom"
>
<EuiLink
className="recentlyAccessedLongLink"
className="homRecentlyAccessed__longLink"
color="primary"
href="link1"
type="button"

20
src/core_plugins/kibana/public/home/components/_add_data.scss Normal file
View file

@ -0,0 +1,20 @@
.homAddData__card {
width: 250px;
min-width: 200px;
border: none;
box-shadow: none;
}
.homAddData__icon {
width: $euiSizeXL * 2;
height: $euiSizeXL * 2;
}
.homAddData__footerItem--highlight {
background-color: tintOrShade($euiColorPrimary, 90%, 70%);
padding: $euiSize;
}
.homAddData__footerItem {
text-align: center;
}

14
src/core_plugins/kibana/public/home/components/_index.scss Normal file
View file

@ -0,0 +1,14 @@
// Prefix all styles with "hom" to avoid conflicts.
// Examples
// homChart
// homChart__legend
// homChart__legend--small
// homChart__legend-isLoading
@import 'add_data';
@import 'recently_accessed';
@import 'synopsis';
@import 'welcome';
@import 'tutorial/tutorial';
@import 'tutorial/radio_button_group';

29
src/core_plugins/kibana/public/home/components/_recently_accessed.scss Normal file
View file

@ -0,0 +1,29 @@
@include euiBreakpoint('xs', 's') {
.homRecentlyAccessed__separator {
display: none;
}
}
.homRecentlyAccessed__item {
overflow: hidden;
max-width: 300px;
}
.homRecentlyAccessed__anchor {
overflow: hidden;
text-overflow: ellipsis;
}
.homRecentlyAccessed__longLink {
@include euiTextTruncate;
line-height: normal;
}
.homRecentlyAccessed__flexItem {
max-width: 1000px;
}
.homRecentlyAccessed__dropdownLink,
.homRecentlyAccessed__dropdownLabel {
white-space: nowrap;
}

27
src/core_plugins/kibana/public/home/components/_synopsis.scss Normal file
View file

@ -0,0 +1,27 @@
// SASSTODO: Move out of being specifically in home
// ML uses these classes as well
.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;
}

68
src/core_plugins/kibana/public/home/components/_welcome.scss Normal file
View file

@ -0,0 +1,68 @@
.homWelcome {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: $euiZLevel9 + 1000;
background: inherit;
background-image: linear-gradient(0deg, $euiColorLightestShade 0%, $euiColorEmptyShade 100%);
opacity: 0;
overflow: auto;
animation: homWelcome_FadeIn $euiAnimSpeedExtraSlow $euiAnimSlightResistance 0s forwards;
}
.homWelcome::before {
// SASSTODO: webpack pipeline isn't setup to handle image urls in SASS yet
// content: url(../assets/bg_top_branded.svg);
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
.homWelcome::after {
// SASSTODO: webpack pipeline isn't setup to handle image urls in SASS yet
// content: url(../assets/bg_bottom_branded.svg);
position: fixed;
bottom: -2px; // Hides an odd space at the bottom of the svg
left: 0;
z-index: 1;
}
.homWelcome__header {
position: relative;
padding: $euiSizeXL;
z-index: 10;
}
.homWelcome__logo {
margin-bottom: $euiSizeXL;
@include kibanaCircleLogo;
@include euiBottomShadowMedium;
}
.homWelcome__footerAction {
margin-right: $euiSizeS;
}
.homWelcome__content {
position: relative;
margin: auto;
max-width: 512px;
padding-left: $euiSizeXL;
padding-right: $euiSizeXL;
z-index: 10;
}
@keyframes homWelcome_FadeIn {
from {
opacity: 0;
transform: translateY(200px), scale(0.75);
}
to {
opacity: 1;
transform: translateY(0), scale(1);
}
}

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

@ -17,7 +17,6 @@
* under the License.
*/
import './add_data.less';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
@ -42,13 +41,13 @@ export function AddData({ apmUiEnabled, isNewKibanaInstance }) {
const getApmCard = () => (
<EuiFlexItem>
<EuiCard
className="addDataCard"
icon={<EuiIcon className="addDataIcon" type="apmApp" />}
className="homAddData__card"
icon={<EuiIcon className="homAddData__icon" type="apmApp" />}
title="APM"
description="APM automatically collects in-depth performance metrics and errors from inside your applications."
footer={
<EuiButton
className="addDataButton"
className="homAddData__button"
href="#/home/tutorial/apm"
>
Add APM
@ -65,13 +64,13 @@ export function AddData({ apmUiEnabled, isNewKibanaInstance }) {
<EuiFlexItem>
<EuiCard
className="addDataCard"
icon={<EuiIcon className="addDataIcon" type="loggingApp" />}
className="homAddData__card"
icon={<EuiIcon className="homAddData__icon" type="loggingApp" />}
title="Logging"
description="Ingest logs from popular data sources and easily visualize in preconfigured dashboards."
footer={
<EuiButton
className="addDataButton"
className="homAddData__button"
href="#/home/tutorial_directory/logging"
>
Add log data
@ -82,13 +81,13 @@ export function AddData({ apmUiEnabled, isNewKibanaInstance }) {
<EuiFlexItem>
<EuiCard
className="addDataCard"
icon={<EuiIcon className="addDataIcon" type="monitoringApp" />}
className="homAddData__card"
icon={<EuiIcon className="homAddData__icon" type="monitoringApp" />}
title="Metrics"
description="Collect metrics from the operating system and services running on your servers."
footer={
<EuiButton
className="addDataButton"
className="homAddData__button"
href="#/home/tutorial_directory/metrics"
>
Add metric data
@ -99,13 +98,13 @@ export function AddData({ apmUiEnabled, isNewKibanaInstance }) {
<EuiFlexItem>
<EuiCard
className="addDataCard"
icon={<EuiIcon className="addDataIcon" type="securityApp" />}
className="homAddData__card"
icon={<EuiIcon className="homAddData__icon" type="securityApp" />}
title="Security Analytics"
description="Centralize security events for interactive investigation in ready-to-go visualizations."
footer={
<EuiButton
className="addDataButton"
className="homAddData__button"
href="#/home/tutorial_directory/security"
>
Add security events
@ -117,7 +116,7 @@ export function AddData({ apmUiEnabled, isNewKibanaInstance }) {
);
};
const footerItemClasses = classNames('addDataFooterItem', { 'addDataFooterItem_highlight': isNewKibanaInstance });
const footerItemClasses = classNames('homAddData__footerItem', { 'homAddData__footerItem--highlight': isNewKibanaInstance });
return (
<EuiPanel paddingSize="l">

25
src/core_plugins/kibana/public/home/components/add_data.less
View file

@ -1,25 +0,0 @@
.addDataCard {
width: 250px;
min-width: 200px;
border: none;
box-shadow: none;
}
.addDataIcon {
width: 64px;
height: 64px;
}
.addDataButton {
line-height: normal;
}
.addDataFooterItem_highlight {
background-color: #e6f2f6;
padding-top: 16px;
padding-bottom: 16px;
}
.addDataFooterItem {
text-align: center;
}

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

@ -76,7 +76,6 @@ export class FeatureDirectory extends React.Component {
renderTabs = () => {
return this.tabs.map((tab, index) => (
<EuiTab
className="homeDirectoryTab"
onClick={() => this.onSelectedTabChanged(tab.id)}
isSelected={tab.id === this.state.selectedTabId}
key={index}
@ -114,7 +113,7 @@ export class FeatureDirectory extends React.Component {
render() {
return (
<EuiPage className="home">
<EuiPage className="homPage">
<EuiPageBody>
<EuiTitle size="l">
<h1>

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

@ -141,7 +141,7 @@ export class Home extends Component {
}
return (
<EuiPage className="home">
<EuiPage className="homPage">
<EuiPageBody>
{recentlyAccessedPanel}

14
src/core_plugins/kibana/public/home/components/recently_accessed.js
View file

@ -17,7 +17,6 @@
* under the License.
*/
import './recently_accessed.less';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
@ -74,7 +73,7 @@ export class RecentlyAccessed extends Component {
data-test-subj={`moreRecentlyAccessedItem${this.props.recentlyAccessed[i].id}`}
>
<EuiLink
className="recentlyAccessedDropwdownLink"
className="homRecentlyAccessed__dropdownLink"
href={this.props.recentlyAccessed[i].link}
>
{this.props.recentlyAccessed[i].label}
@ -90,7 +89,7 @@ export class RecentlyAccessed extends Component {
data-test-subj="openMoreRecentlyAccessedPopover"
>
<EuiTextColor
className="recentlyAccessedDropdownLabel"
className="homRecentlyAccessed__dropdownLabel"
color="subdued"
>
{`${dropdownLinks.length} more`}
@ -127,7 +126,7 @@ export class RecentlyAccessed extends Component {
let separator;
if (includeSeparator) {
separator = (
<EuiFlexItem grow={false} className="recentlyAccessedSeparator">
<EuiFlexItem grow={false} className="homRecentlyAccessed__separator">
<EuiText>
<EuiIcon
type="dot"
@ -147,16 +146,17 @@ export class RecentlyAccessed extends Component {
<React.Fragment key={recentlyAccessedItem.id}>
{separator}
<EuiFlexItem
className="recentlyAccessedItem"
className="homRecentlyAccessed__item"
style={style}
grow={false}
>
<EuiToolTip
anchorClassName="homRecentlyAccessed__anchor"
position="bottom"
content={recentlyAccessedItem.label}
>
<EuiLink
className="recentlyAccessedLongLink"
className="homRecentlyAccessed__longLink"
href={recentlyAccessedItem.link}
>
{recentlyAccessedItem.label}
@ -205,7 +205,7 @@ export class RecentlyAccessed extends Component {
<EuiSpacer size="s"/>
<EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd" wrap>
<EuiFlexItem grow={false} className="recentlyAccessedFlexItem">
<EuiFlexItem grow={false} className="homRecentlyAccessed__flexItem">
<EuiFlexGroup>
{this.renderRecentlyAccessed()}
</EuiFlexGroup>

35
src/core_plugins/kibana/public/home/components/recently_accessed.less
View file

@ -1,35 +0,0 @@
@media only screen and (max-width: 768px) {
.recentlyAccessedSeparator {
display: none;
}
}
.recentlyAccessedItem {
overflow: hidden;
max-width: 300px;
.euiToolTipAnchor {
overflow: hidden;
text-overflow: ellipsis;
}
}
.recentlyAccessedLongLink {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: normal;
}
.recentlyAccessedFlexItem {
max-width: 1000px;
}
.recentlyAccessedDropwdownLink {
white-space: nowrap;
height: 18px;
}
.recentlyAccessedDropdownLabel {
white-space: nowrap;
}

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

@ -145,7 +145,7 @@ export class SampleDataSetCard extends React.Component {
render() {
return (
<EuiCard
className="sampleDataSetCard"
className="homSampleDataSetCard"
image={this.props.previewUrl}
title={this.props.name}
description={this.props.description}

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

@ -17,7 +17,6 @@
* under the License.
*/
import './synopsis.less';
import React from 'react';
import PropTypes from 'prop-types';
import {

36
src/core_plugins/kibana/public/home/components/synopsis.less
View file

@ -1,36 +0,0 @@
@import (reference) "~ui/styles/variables.less";
.synopsis {
display: flex;
flex-grow: 1;
cursor: pointer;
}
.synopsis:hover {
text-decoration: none;
.synopsisTitle {
text-decoration: underline;
}
}
.synopsis:focus {
text-decoration: none;
.synopsisPanel {
border: solid 1px @globalColorBlue;
}
.synopsisBody {
text-decoration: none;
}
}
.synopsisTitle {
font-size: 16px;
font-weight: normal;
color: @globalColorBlue;
}
.synopsisIcon {
padding-top: 8px;
}

2
src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/content.test.js.snap
View file

@ -2,7 +2,7 @@
exports[`should render content with markdown 1`] = `
<Markdown
className="euiText euiTextColor--subdued tutorialContent"
className="euiText"
markdown="I am *some* [content](https://en.wikipedia.org/wiki/Content) with \`markdown\`"
openLinksInNewTab={true}
whiteListedRules={

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

@ -36,6 +36,7 @@ exports[`props exportedFieldsUrl 1`] = `
>
<h2>
Great tutorial
 
</h2>
</EuiTitle>
</EuiFlexItem>
@ -113,6 +114,7 @@ exports[`props iconType 1`] = `
>
<h2>
Great tutorial
 
</h2>
</EuiTitle>
</EuiFlexItem>
@ -164,19 +166,14 @@ exports[`props isBeta 1`] = `
>
<h2>
Great tutorial
 
<EuiBetaBadge
label="Beta"
tooltipPosition="top"
/>
</h2>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={false}
>
<EuiBetaBadge
className="tutorialIntroBadge"
label="BETA"
tooltipPosition="top"
/>
</EuiFlexItem>
</EuiFlexGroup>
<Content
text="this is a great tutorial about..."
@ -225,6 +222,7 @@ exports[`props previewUrl 1`] = `
>
<h2>
Great tutorial
 
</h2>
</EuiTitle>
</EuiFlexItem>
@ -285,6 +283,7 @@ exports[`render 1`] = `
>
<h2>
Great tutorial
 
</h2>
</EuiTitle>
</EuiFlexItem>

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

@ -2,7 +2,7 @@
exports[`isCloudEnabled is false should not render instruction toggle when ON_PREM_ELASTIC_CLOUD instructions are not provided 1`] = `
<EuiPage
className="home"
className="homPage"
restrictWidth={false}
>
<EuiPageBody
@ -38,7 +38,7 @@ exports[`isCloudEnabled is false should not render instruction toggle when ON_PR
size="l"
/>
<div
className="text-center"
className="eui-textCenter"
/>
<EuiSpacer
size="l"
@ -78,7 +78,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="home"
className="homPage"
restrictWidth={false}
>
<EuiPageBody
@ -115,7 +115,7 @@ exports[`isCloudEnabled is false should render ON_PREM instructions with instruc
size="l"
/>
<div
className="text-center"
className="eui-textCenter"
>
<RadioButtonGroup
buttons={
@ -173,7 +173,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="home"
className="homPage"
restrictWidth={false}
>
<EuiPageBody
@ -210,7 +210,7 @@ exports[`should render ELASTIC_CLOUD instructions when isCloudEnabled is true 1`
size="l"
/>
<div
className="text-center"
className="eui-textCenter"
/>
<EuiSpacer
size="l"

10
src/core_plugins/kibana/public/home/components/tutorial/_radio_button_group.scss Normal file
View file

@ -0,0 +1,10 @@
// remove space between buttons
.homRadioButtonGroup__button {
margin-left: 0px !important;
// give primary button same border as secondary button so they are even heights when placed side-by-side
&.kuiButton--primary {
border: solid 1px $euiColorPrimary;
}
}

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

@ -0,0 +1,4 @@
.homTutorial__notFoundPanel {
background: $euiColorEmptyShade;
padding: $euiSizeL;
}

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

@ -26,7 +26,7 @@ const whiteListedRules = ['backticks', 'emphasis', 'link', 'list'];
export function Content({ text }) {
return (
<Markdown
className="euiText euiTextColor--subdued tutorialContent"
className="euiText"
markdown={text}
openLinksInNewTab={true}
whiteListedRules={whiteListedRules}

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

@ -81,7 +81,7 @@ export function Instruction({ commands, paramValues, textPost, textPre, replaceT
}
return (
<div className="instruction">
<div>
<EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd">
<EuiFlexItem grow={false}>

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

@ -73,9 +73,7 @@ export function Introduction({ description, previewUrl, title, exportedFieldsUrl
let betaBadge;
if (isBeta) {
betaBadge = (
<EuiFlexItem grow={false}>
<EuiBetaBadge className="tutorialIntroBadge" label="BETA" />
</EuiFlexItem>
<EuiBetaBadge label="Beta" />
);
}
return (
@ -90,11 +88,11 @@ export function Introduction({ description, previewUrl, title, exportedFieldsUrl
<EuiFlexItem grow={false}>
<EuiTitle size="l">
<h2>
{title}
{title} &nbsp;
{betaBadge}
</h2>
</EuiTitle>
</EuiFlexItem>
{betaBadge}
</EuiFlexGroup>
<Content text={description} />

4
src/core_plugins/kibana/public/home/components/tutorial/radio_button_group.js
View file

@ -17,7 +17,6 @@
* under the License.
*/
import './radio_button_group.less';
import React from 'react';
import PropTypes from 'prop-types';
import {
@ -59,7 +58,7 @@ export class RadioButtonGroup extends React.Component {
}
return (
<KuiButton
className="kuiRadioButton"
className="homRadioButtonGroup__button"
buttonType={buttonType}
onClick={handleOnClick}
key={index}
@ -74,7 +73,6 @@ export class RadioButtonGroup extends React.Component {
render = () => {
return (
<KuiButtonGroup
className="radioButtonGroup"
isUnited
>
{this.renderButtons()}

10
src/core_plugins/kibana/public/home/components/tutorial/radio_button_group.less
View file

@ -1,10 +0,0 @@
// remove space between buttons
.kuiRadioButton {
margin-left: 0px !important;
}
// give primary button same border as secondary button so they are even heights when placed side-by-side
.kuiRadioButton.kuiButton--primary {
border: solid 1px #0079a5;
}

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

@ -17,7 +17,6 @@
* under the License.
*/
import './tutorial.less';
import _ from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';
@ -281,7 +280,7 @@ export class Tutorial extends React.Component {
let content;
if (this.state.notFound) {
content = (
<div className="homePanel">
<div className="homTutorial__notFoundPanel">
<EuiText>
<p>
Unable to find tutorial {this.props.tutorialId}
@ -315,7 +314,7 @@ export class Tutorial extends React.Component {
/>
<EuiSpacer />
<div className="text-center">
<div className="eui-textCenter">
{this.renderInstructionSetsToggle()}
</div>
@ -329,7 +328,7 @@ export class Tutorial extends React.Component {
);
}
return (
<EuiPage className="home">
<EuiPage className="homPage">
<EuiPageBody>
<div>

8
src/core_plugins/kibana/public/home/components/tutorial/tutorial.less
View file

@ -1,8 +0,0 @@
.text-center > .kuiButtonGroup {
display: inline-block !important;
}
.homePanel {
background: white;
padding: 24px;
}

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

@ -149,7 +149,6 @@ export class TutorialDirectory extends React.Component {
renderTabs = () => {
return this.tabs.map((tab, index) => (
<EuiTab
className="homeDirectoryTab"
onClick={() => this.onSelectedTabChanged(tab.id)}
isSelected={tab.id === this.state.selectedTabId}
key={index}
@ -214,7 +213,7 @@ export class TutorialDirectory extends React.Component {
render() {
return (
<EuiPage className="home">
<EuiPage className="homPage">
<EuiPageBody>
<a className="kuiLink" href="#/home">Home</a>

26
src/core_plugins/kibana/public/home/components/welcome.js
View file

@ -41,7 +41,7 @@ import {
* Shows a full-screen welcome page that gives helpful quick links to beginners.
*/
export class Welcome extends React.Component {
hideOnEsc = (e) => {
hideOnEsc = e => {
if (e.key === 'Escape') {
this.props.onSkip();
}
@ -59,21 +59,23 @@ export class Welcome extends React.Component {
const { urlBasePath, onSkip } = this.props;
return (
<div className="home-welcome">
<header className="home-welcome-header">
<div className="home-welcome-content eui-textCenter">
<div className="homWelcome">
<header className="homWelcome__header">
<div className="homWelcome__content eui-textCenter">
<EuiSpacer size="xxl" />
<span className="home-welcome-logo">
<span className="homWelcome__logo">
<EuiIcon type="logoKibana" size="xxl" />
</span>
<EuiTitle size="l" className="home-welcome-title">
<EuiTitle size="l" className="homWelcome__title">
<h1>Welcome to Kibana</h1>
</EuiTitle>
<EuiText size="s" className="welcome-subtitle">Your window into the Elastic Stack</EuiText>
<EuiText size="s" color="subdued" className="homWelcome__subtitle">
<p>Your window into the Elastic Stack</p>
</EuiText>
<EuiSpacer size="xl" />
</div>
</header>
<div className="home-welcome-content home-welcome-body">
<div className="homWelcome__content homWelcome-body">
<EuiFlexGroup gutterSize="l">
<EuiFlexItem>
<EuiCard
@ -82,24 +84,24 @@ export class Welcome extends React.Component {
title="Let's get started"
description="We noticed that you don't have any data in your cluster.
You can try our sample data and dashboards or jump in with your own data."
footer={(
footer={
<footer>
<EuiButton
fill
className="home-welcome-footer-action"
className="homWelcome__footerAction"
href="#/home/tutorial_directory/sampleData"
>
Try our sample data
</EuiButton>
<EuiButtonEmpty
className="home-welcome-footer-action"
className="homWelcome__footerAction"
onClick={onSkip}
data-test-subj="skipWelcomeScreen"
>
Explore on my own
</EuiButtonEmpty>
</footer>
)}
}
/>
</EuiFlexItem>
</EuiFlexGroup>

105
src/core_plugins/kibana/public/home/home.less
View file

@ -1,108 +1,7 @@
@import (reference) "~ui/styles/variables.less";
home-app {
background-color: @globalColorLightestGray;
}
.home {
min-height: 100vh;
max-width: 1200px;
margin: auto;
}
.homeDirectory {
background: @white;
margin: 0;
border-left: 1px solid @globalColorLightGray;
border-right: 1px solid @globalColorLightGray;
border-bottom: 1px solid @globalColorLightGray;
padding: 16px;
}
.homeDirectoryTab {
background-color: @globalColorLightestGray;
}
.sampleDataSetCard {
flex-grow: 0;
}
.home-welcome {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100000;
background: inherit;
// When sassified, should pull in EUI colors: $euiColorLightestShade, $euiColorEmptyShade
background-image: linear-gradient(0deg, @globalColorLightestGray 0%, white 100%);
color: inherit;
opacity: 0;
overflow: auto;
animation: homeFadeIn 0.5s ease-in 0s forwards;
}
.home-welcome::before {
.homWelcome::before {
content: url(../assets/bg_top_branded.svg);
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
.home-welcome::after {
.homWelcome::after {
content: url(../assets/bg_bottom_branded.svg);
position: fixed;
bottom: -2px; // Hides an odd space at the bottom of the svg
left: 0;
z-index: 1;
}
.home-welcome-header {
position: relative;
padding: 32px;
z-index: 10;
}
.home-welcome-logo {
display: inline-block;
margin-bottom: 24px;
background-color: white;
border-radius: 100%;
padding: 16px;
box-shadow: 0 4px 16px -6px rgba(0, 0, 0, 0.75);
}
.home-welcome-title {
color: inherit;
font-weight: 400;
}
.home-welcome-footer-action {
margin-right: 8px;
}
.welcome-subtitle {
opacity: 0.75;
}
.home-welcome-content {
position: relative;
margin: auto;
max-width: 512px;
padding-left: 32px;
padding-right: 32px;
z-index: 10;
}
@keyframes homeFadeIn {
from {
opacity: 0;
transform: translateY(200px), scale(0.75);
}
to {
opacity: 1;
transform: translateY(0), scale(1);
}
}

5
src/core_plugins/kibana/public/index.scss
View file

@ -1,7 +1,10 @@
@import '../../../../src/ui/public/styles/styling_constants';
// Discover styles
@import 'discover/index';
@import './discover/index';
// Home styles
@import './home/index';
// Dashboard styles
// MUST STAY AT THE BOTTOM BECAUSE OF DARK THEME IMPORTS

16
src/ui/public/styles/_styling_constants.scss
View file

@ -6,8 +6,16 @@
@import '../../../../node_modules/@elastic/eui/src/global_styling/mixins/index';
// EUI TODO: Add this
@mixin truncate($style: ellipsis) {
white-space: nowrap;
text-overflow: $style;
overflow: hidden;
@mixin kibanaCircleLogo() {
display: inline-block;
@include size($euiSizeXXL * 2);
line-height: $euiSizeXXL * 2;
text-align: center;
background-color: $euiColorEmptyShade;
border-radius: 100%;
padding: $euiSize;
.euiIcon {
vertical-align: baseline;
}
}