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

Management design sidenav cleanup (#28222)

Browse source 
Adjustments so nav menu works better with large screens.
This commit is contained in:
dave.snider@gmail.com 2019-01-16 10:03:41 -08:00 • committed by GitHub
parent 43429554d4
commit d9b922ef4b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 286 additions and 314 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/legacy/core_plugins/kibana/public/management/_hacks.scss
View file

@ -18,7 +18,6 @@ kbn-management-objects, kbn-management-app, .tab-management {
#management-landing {
display: flex;
flex-grow: 1;
}
.kbn-management-tab:first-letter {
@ -43,4 +42,9 @@ kbn-management-objects-view {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
// Hack because the management wrapper is flat HTML and needs a class
.mgtPage__body {
max-width: map-get($euiBreakpoints, 'xl');
}

4
src/legacy/core_plugins/kibana/public/management/app.html
View file

@ -1,4 +1,4 @@
<div class="app-container euiPage">
<div class="euiPage mgtPage">
<div id="management-sidenav" class="euiPageSideBar" style="position: static;"></div>
<main class="management-container euiPageBody euiPageBody--restrictWidth-default" ng-transclude></main>
<main class="euiPageBody euiPageBody--restrictWidth-default mgtPage__body" ng-transclude></main>
</div>

4
src/legacy/core_plugins/kibana/public/management/index.js
View file

@ -61,7 +61,7 @@ export function updateLandingPage(version) {
}
render(
<EuiPageContent verticalPosition="center" horizontalPosition="center">
<EuiPageContent horizontalPosition="center">
<I18nProvider>
<div>
<div className="eui-textCenter">
@ -114,7 +114,7 @@ export function updateSidebar(
<SidebarNav
sections={items}
selectedId={id}
style={{ width: 192 }}
className="mgtSideNav"
/>
</I18nProvider>,
node,

6
src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/__jest__/__snapshots__/objects_table.test.js.snap
View file

@ -175,12 +175,6 @@ exports[`ObjectsTable should render normally 1`] = `
<EuiPageContent
horizontalPosition="center"
panelPaddingSize="l"
style={
Object {
"maxWidth": 1000,
}
}
verticalPosition="center"
>
<Header
filteredCount={4}

2
src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/objects_table.js
View file

@ -592,9 +592,7 @@ class ObjectsTableUI extends Component {
return (
<EuiPageContent
verticalPosition="center"
horizontalPosition="center"
style={{ maxWidth: 1000 }}
>
{this.renderFlyout()}
{this.renderRelationships()}

11
src/ui/public/chrome/directives/header_global_nav/_header_global_nav.scss
View file

@ -15,3 +15,14 @@
top: 65px;
}
}
// Mobile header is smaller
@include euiBreakpoint('xs','s') {
.header-global-wrapper + .app-wrapper {
top: 50px;
.euiFlyout {
top: 50px;
}
}
}

1
src/ui/public/management/_index.scss Normal file
View file

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

1
src/ui/public/management/components/_index.scss Normal file
View file

@ -0,0 +1 @@
@import './sidebar_nav';

10
src/ui/public/management/components/_sidebar_nav.scss Normal file
View file

@ -0,0 +1,10 @@
.mgtSidebarNav {
width: 192px;
}
@include euiBreakpoint('xs','s') {
.mgtSideBarNav {
width: auto;
margin-bottom: $euiSize;
}
}

2
src/ui/public/management/components/sidebar_nav.tsx
View file

@ -77,7 +77,7 @@ export class SidebarNav extends React.Component<SidebarNavProps, SidebarNavState
isOpenOnMobile={this.state.isSideNavOpenOnMobile}
toggleOpenOnMobile={this.toggleOpenOnMobile}
items={sideNavItems(this.props.sections, this.props.selectedId)}
style={{ width: 192, paddingBottom: '16px' }}
className="mgtSideBarNav"
/>
);
}

37
x-pack/plugins/beats_management/public/components/layouts/no_data.tsx
View file

@ -7,14 +7,7 @@
import React from 'react';
import { withRouter } from 'react-router-dom';
import {
EuiEmptyPrompt,
EuiFlexGroup,
EuiFlexItem,
EuiPage,
EuiPageBody,
EuiPageContent,
} from '@elastic/eui';
import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiPageContent } from '@elastic/eui';
interface LayoutProps {
title: string;
@ -25,22 +18,18 @@ interface LayoutProps {
export const NoDataLayout: React.SFC<LayoutProps> = withRouter<any>(
({ actionSection, title, modalClosePath, children, history }) => {
return (
<EuiPage>
<EuiPageBody>
<EuiFlexGroup justifyContent="spaceAround" style={{ marginTop: 50 }}>
<EuiFlexItem grow={false}>
<EuiPageContent>
<EuiEmptyPrompt
iconType="logoBeats"
title={<h2>{title}</h2>}
body={children}
actions={actionSection}
/>
</EuiPageContent>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPageBody>
</EuiPage>
<EuiFlexGroup justifyContent="spaceAround">
<EuiFlexItem grow={false}>
<EuiPageContent>
<EuiEmptyPrompt
iconType="logoBeats"
title={<h2>{title}</h2>}
body={children}
actions={actionSection}
/>
</EuiPageContent>
</EuiFlexItem>
</EuiFlexGroup>
);
}
) as any;

40
x-pack/plugins/beats_management/public/components/layouts/walkthrough.tsx
View file

@ -7,8 +7,6 @@
import React from 'react';
import {
EuiPage,
EuiPageBody,
EuiPageContent,
EuiPageContentBody,
// @ts-ignore
@ -35,26 +33,22 @@ export const WalkthroughLayout: React.SFC<LayoutProps> = ({
}) => {
const indexOfCurrent = walkthroughSteps.findIndex(step => activePath === step.id);
return (
<EuiPage>
<EuiPageBody>
<EuiPageContent>
<EuiTitle>
<h1 style={{ textAlign: 'center' }}>{title}</h1>
</EuiTitle>
<br />
<br />
<EuiStepsHorizontal
steps={walkthroughSteps.map((step, i) => ({
title: step.name,
isComplete: i <= indexOfCurrent,
onClick: () => goTo(step.id),
}))}
/>
<br />
<br />
<EuiPageContentBody>{children}</EuiPageContentBody>
</EuiPageContent>
</EuiPageBody>
</EuiPage>
<EuiPageContent>
<EuiTitle>
<h1 style={{ textAlign: 'center' }}>{title}</h1>
</EuiTitle>
<br />
<br />
<EuiStepsHorizontal
steps={walkthroughSteps.map((step, i) => ({
title: step.name,
isComplete: i <= indexOfCurrent,
onClick: () => goTo(step.id),
}))}
/>
<br />
<br />
<EuiPageContentBody>{children}</EuiPageContentBody>
</EuiPageContent>
);
};

2
x-pack/plugins/beats_management/public/pages/walkthrough/initial/finish.tsx
View file

@ -46,7 +46,7 @@ class FinishWalkthrough extends React.Component<
const { goTo } = this.props;
return (
<EuiFlexGroup justifyContent="spaceAround" style={{ marginTop: 50 }}>
<EuiFlexGroup justifyContent="spaceAround">
<EuiFlexItem grow={false}>
<EuiPageContent>
<EuiEmptyPrompt

12
x-pack/plugins/cross_cluster_replication/public/app/_app.scss
View file

@ -1,15 +1,3 @@
/**
* 1. Encapsulate this fix to avoid modifying global styling.
*/
.ccrPageContent {
max-width: 1000px !important;
width: 100% !important;
.euiText .euiButton--warning {
color: $euiColorWarning; // [1]
}
}
.ccrFollowerIndicesFormRow {
padding-bottom: 0;
}

103
x-pack/plugins/cross_cluster_replication/public/app/sections/auto_follow_pattern_add/auto_follow_pattern_add.js
View file

@ -11,8 +11,6 @@ import chrome from 'ui/chrome';
import { MANAGEMENT_BREADCRUMB } from 'ui/management';
import {
EuiPage,
EuiPageBody,
EuiPageContent,
EuiButton,
EuiCallOut,
@ -122,63 +120,56 @@ export const AutoFollowPatternAdd = injectI18n(
const { saveAutoFollowPattern, apiStatus, apiError, intl } = this.props;
return (
<EuiPage>
<EuiPageBody>
<EuiPageContent
horizontalPosition="center"
className="ccrPageContent"
>
<AutoFollowPatternPageTitle
title={(
<FormattedMessage
id="xpack.crossClusterReplication.autoFollowPattern.addTitle"
defaultMessage="Add auto-follow pattern"
/>
)}
<EuiPageContent>
<AutoFollowPatternPageTitle
title={(
<FormattedMessage
id="xpack.crossClusterReplication.autoFollowPattern.addTitle"
defaultMessage="Add auto-follow pattern"
/>
)}
/>
<RemoteClustersProvider>
{({ isLoading, error, remoteClusters }) => {
if (isLoading) {
return (
<SectionLoading>
<FormattedMessage
id="xpack.crossClusterReplication.autoFollowPatternCreateForm.loadingRemoteClusters"
defaultMessage="Loading remote clusters..."
/>
</SectionLoading>
);
}
if (error) {
const title = intl.formatMessage({
id: 'xpack.crossClusterReplication.autoFollowPatternCreateForm.loadingRemoteClustersErrorTitle',
defaultMessage: 'Error loading remote clusters',
});
return <SectionError title={title} error={error} />;
}
if (!remoteClusters.length) {
return this.renderEmptyClusters();
}
if (remoteClusters.every(cluster => cluster.isConnected === false)) {
return this.renderNoConnectedCluster();
}
return (
<AutoFollowPatternForm
apiStatus={apiStatus}
apiError={apiError}
remoteClusters={remoteClusters}
saveAutoFollowPattern={saveAutoFollowPattern}
<RemoteClustersProvider>
{({ isLoading, error, remoteClusters }) => {
if (isLoading) {
return (
<SectionLoading>
<FormattedMessage
id="xpack.crossClusterReplication.autoFollowPatternCreateForm.loadingRemoteClusters"
defaultMessage="Loading remote clusters..."
/>
);
}}
</RemoteClustersProvider>
</EuiPageContent>
</EuiPageBody>
</EuiPage>
</SectionLoading>
);
}
if (error) {
const title = intl.formatMessage({
id: 'xpack.crossClusterReplication.autoFollowPatternCreateForm.loadingRemoteClustersErrorTitle',
defaultMessage: 'Error loading remote clusters',
});
return <SectionError title={title} error={error} />;
}
if (!remoteClusters.length) {
return this.renderEmptyClusters();
}
if (remoteClusters.every(cluster => cluster.isConnected === false)) {
return this.renderNoConnectedCluster();
}
return (
<AutoFollowPatternForm
apiStatus={apiStatus}
apiError={apiError}
remoteClusters={remoteClusters}
saveAutoFollowPattern={saveAutoFollowPattern}
/>
);
}}
</RemoteClustersProvider>
</EuiPageContent>
);
}
}

23
x-pack/plugins/cross_cluster_replication/public/app/sections/home/home.js
View file

@ -16,7 +16,6 @@ import {
EuiButton,
EuiFlexGroup,
EuiFlexItem,
EuiPage,
EuiPageBody,
EuiPageContent,
EuiSpacer,
@ -122,17 +121,17 @@ export const CrossClusterReplicationHome = injectI18n(
render() {
return (
<EuiPage>
<EuiPageBody>
<EuiPageContent>
{this.getHeaderSection()}
{this.getUnauthorizedSection()}
<Switch>
<Route exact path={`${BASE_PATH}/auto_follow_patterns`} component={AutoFollowPatternList} />
</Switch>
</EuiPageContent>
</EuiPageBody>
</EuiPage>
<EuiPageBody>
<EuiPageContent
horizontalPosition="center"
>
{this.getHeaderSection()}
{this.getUnauthorizedSection()}
<Switch>
<Route exact path={`${BASE_PATH}/auto_follow_patterns`} component={AutoFollowPatternList} />
</Switch>
</EuiPageContent>
</EuiPageBody>
);
}
}

162
x-pack/plugins/index_lifecycle_management/__jest__/components/__snapshots__/policy_table.test.js.snap
View file

@ -47,101 +47,95 @@ Array [
exports[`policy table should show empty state when there are not any policies 1`] = `
<div
class="euiPage"
class="euiPageBody"
>
<div
class="euiPageBody"
class="euiPanel euiPanel--paddingLarge euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter"
>
<div
class="euiPanel euiPanel--paddingLarge euiPageContent"
>
<div>
<div
class="policyTable__horizontalScroll"
class="euiSpacer euiSpacer--l"
/>
<div
class="euiEmptyPrompt"
>
<svg
class="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon--app"
focusable="false"
height="32"
viewBox="0 0 32 32"
width="32"
xmlns="http://www.w3.org/2000/svg"
>
<path
class="euiIcon__fillSecondary"
d="M16 21a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"
/>
<path
d="M20 32h-8v-4.06a1 1 0 0 0-1.61-.67l-2.88 2.87-5.65-5.65 2.87-2.87a.92.92 0 0 0 .2-1 .93.93 0 0 0-.86-.6H0V12h4.06a.92.92 0 0 0 .85-.58.94.94 0 0 0-.19-1L1.86 7.51l5.65-5.65 2.87 2.87A1 1 0 0 0 12 4.06V0h8v4.06a1 1 0 0 0 1.61.67l2.87-2.87 5.66 5.66-2.87 2.87a.92.92 0 0 0-.2 1 .93.93 0 0 0 .86.6H32v8h-4.06a.92.92 0 0 0-.85.58.94.94 0 0 0 .19 1l2.87 2.87-5.66 5.66-2.87-2.87a1 1 0 0 0-1.61.67L20 32zm-6-2h4v-2.06a3 3 0 0 1 5-2.08l1.46 1.46 2.83-2.83L25.86 23a3 3 0 0 1 2.08-5H30v-4h-2.06a3 3 0 0 1-2.08-5l1.46-1.46-2.83-2.85L23 6.14a3 3 0 0 1-5-2.08V2h-4v2.06a3 3 0 0 1-5 2.08L7.51 4.69 4.69 7.51 6.14 9a3 3 0 0 1-2.08 5H2v4h2.06a3 3 0 0 1 2.08 5l-1.45 1.49 2.83 2.83L9 25.86a3 3 0 0 1 5 2.08V30z"
/>
</svg>
<div
class="euiSpacer euiSpacer--s"
/>
<span
class="euiTextColor euiTextColor--subdued"
>
<h1
class="euiTitle euiTitle--medium"
>
Create your first index lifecycle policy
</h1>
<div
class="euiSpacer euiSpacer--m"
/>
<div
class="euiText euiText--medium"
>
<p>
An index lifecycle policy helps you manage your indices as they age.
</p>
</div>
</span>
<div
class="euiSpacer euiSpacer--l"
/>
<div
class="euiEmptyPrompt"
>
<svg
class="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon--app"
focusable="false"
height="32"
viewBox="0 0 32 32"
width="32"
xmlns="http://www.w3.org/2000/svg"
>
<path
class="euiIcon__fillSecondary"
d="M16 21a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"
/>
<path
d="M20 32h-8v-4.06a1 1 0 0 0-1.61-.67l-2.88 2.87-5.65-5.65 2.87-2.87a.92.92 0 0 0 .2-1 .93.93 0 0 0-.86-.6H0V12h4.06a.92.92 0 0 0 .85-.58.94.94 0 0 0-.19-1L1.86 7.51l5.65-5.65 2.87 2.87A1 1 0 0 0 12 4.06V0h8v4.06a1 1 0 0 0 1.61.67l2.87-2.87 5.66 5.66-2.87 2.87a.92.92 0 0 0-.2 1 .93.93 0 0 0 .86.6H32v8h-4.06a.92.92 0 0 0-.85.58.94.94 0 0 0 .19 1l2.87 2.87-5.66 5.66-2.87-2.87a1 1 0 0 0-1.61.67L20 32zm-6-2h4v-2.06a3 3 0 0 1 5-2.08l1.46 1.46 2.83-2.83L25.86 23a3 3 0 0 1 2.08-5H30v-4h-2.06a3 3 0 0 1-2.08-5l1.46-1.46-2.83-2.85L23 6.14a3 3 0 0 1-5-2.08V2h-4v2.06a3 3 0 0 1-5 2.08L7.51 4.69 4.69 7.51 6.14 9a3 3 0 0 1-2.08 5H2v4h2.06a3 3 0 0 1 2.08 5l-1.45 1.49 2.83 2.83L9 25.86a3 3 0 0 1 5 2.08V30z"
/>
</svg>
<div
class="euiSpacer euiSpacer--s"
/>
<span
class="euiTextColor euiTextColor--subdued"
>
<h1
class="euiTitle euiTitle--medium"
>
Create your first index lifecycle policy
</h1>
<div
class="euiSpacer euiSpacer--m"
/>
<div
class="euiText euiText--medium"
>
<p>
An index lifecycle policy helps you manage your indices as they age.
</p>
</div>
</span>
<div
class="euiSpacer euiSpacer--l"
/>
<div
class="euiSpacer euiSpacer--s"
/>
<a
class="euiButton euiButton--primary euiButton--fill"
data-test-subj="createPolicyButton"
href="#/management/elasticsearch/index_lifecycle_management/policies/edit"
>
<span
class="euiButton__content"
>
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium euiButton__icon"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882z"
fill-rule="evenodd"
/>
</svg>
<span
class="euiButton__text"
>
Create policy
</span>
</span>
</a>
</div>
<div
class="euiSpacer euiSpacer--m"
class="euiSpacer euiSpacer--s"
/>
<a
class="euiButton euiButton--primary euiButton--fill"
data-test-subj="createPolicyButton"
href="#/management/elasticsearch/index_lifecycle_management/policies/edit"
>
<span
class="euiButton__content"
>
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium euiButton__icon"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882z"
fill-rule="evenodd"
/>
</svg>
<span
class="euiButton__text"
>
Create policy
</span>
</span>
</a>
</div>
<div
class="euiSpacer euiSpacer--m"
/>
</div>
</div>
</div>

99
x-pack/plugins/index_lifecycle_management/public/sections/policy_table/components/policy_table/policy_table.js
View file

@ -23,7 +23,6 @@ import {
EuiFlexGroup,
EuiFlexItem,
EuiLoadingSpinner,
EuiPage,
EuiPopover,
EuiContextMenu,
EuiSpacer,
@ -393,7 +392,7 @@ export class PolicyTableUi extends Component {
tableContent = <EuiLoadingSpinner size="m" />;
} else if (totalNumberOfPolicies > 0) {
tableContent = (
<EuiTable>
<EuiTable className="policyTable__horizontalScroll">
<EuiTableHeader>{this.buildHeader()}</EuiTableHeader>
<EuiTableBody>{this.buildRows()}</EuiTableBody>
</EuiTable>
@ -441,56 +440,54 @@ export class PolicyTableUi extends Component {
}
return (
<EuiPage>
<EuiPageBody>
<EuiPageContent>
<div className="policyTable__horizontalScroll">
{this.renderConfirmModal()}
{totalNumberOfPolicies || !policyListLoaded ? (
<Fragment>
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem grow={false}>
<EuiFlexGroup alignItems="center" gutterSize="m">
<EuiFlexItem grow={false}>
<EuiTitle size="l">
<h1>
<FormattedMessage
id="xpack.indexLifecycleMgmt.policyTable.sectionHeading"
defaultMessage="Index lifecycle policies"
/>
</h1>
</EuiTitle>
</EuiFlexItem>
<EuiPageBody>
<EuiPageContent verticalPosition="center" horizontalPosition="center">
<div>
{this.renderConfirmModal()}
{totalNumberOfPolicies || !policyListLoaded ? (
<Fragment>
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem grow={false}>
<EuiFlexGroup alignItems="center" gutterSize="m">
<EuiFlexItem grow={false}>
<EuiTitle size="l">
<h1>
<FormattedMessage
id="xpack.indexLifecycleMgmt.policyTable.sectionHeading"
defaultMessage="Index lifecycle policies"
/>
</h1>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiBetaBadge label="Beta" />
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
{totalNumberOfPolicies ? (
<EuiFlexItem grow={false}>{this.renderCreatePolicyButton()}</EuiFlexItem>
) : null}
</EuiFlexGroup>
<EuiSpacer size="s" />
<EuiText>
<p>
<FormattedMessage
id="xpack.indexLifecycleMgmt.policyTable.sectionDescription"
defaultMessage="Manage your indices as they age. Attach a policy to automate
when and how to transition an index through its lifecycle."
/>
</p>
</EuiText>
</Fragment>
) : null}
<EuiSpacer />
{content}
<EuiSpacer size="m" />
{totalNumberOfPolicies && totalNumberOfPolicies > 10 ? this.renderPager() : null}
</div>
</EuiPageContent>
</EuiPageBody>
</EuiPage>
<EuiFlexItem grow={false}>
<EuiBetaBadge label="Beta" />
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
{totalNumberOfPolicies ? (
<EuiFlexItem grow={false}>{this.renderCreatePolicyButton()}</EuiFlexItem>
) : null}
</EuiFlexGroup>
<EuiSpacer size="s" />
<EuiText>
<p>
<FormattedMessage
id="xpack.indexLifecycleMgmt.policyTable.sectionDescription"
defaultMessage="Manage your indices as they age. Attach a policy to automate
when and how to transition an index through its lifecycle."
/>
</p>
</EuiText>
</Fragment>
) : null}
<EuiSpacer />
{content}
<EuiSpacer size="m" />
{totalNumberOfPolicies && totalNumberOfPolicies > 10 ? this.renderPager() : null}
</div>
</EuiPageContent>
</EuiPageBody>
);
}
}

17
x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_list.js
View file

@ -18,7 +18,6 @@ import {
EuiLoadingKibana,
EuiLoadingSpinner,
EuiOverlayMask,
EuiPage,
EuiPageBody,
EuiPageContent,
EuiPageContentHeader,
@ -288,15 +287,15 @@ export const RemoteClusterList = injectI18n(
}
return (
<EuiPage>
<EuiPageBody>
<EuiPageContent>
{content}
<EuiPageBody>
<EuiPageContent
horizontalPosition="center"
>
{content}
{this.renderBlockingAction()}
</EuiPageContent>
</EuiPageBody>
</EuiPage>
{this.renderBlockingAction()}
</EuiPageContent>
</EuiPageBody>
);
}
}

2
x-pack/plugins/reporting/public/views/management/jobs.html
View file

@ -1,3 +1,3 @@
<kbn-management-app section="kibana/reporting">
<div id="reportListingAnchor" class="euiPageBody--restrictWidth-default"></div>
<div id="reportListingAnchor"></div>
</kbn-management-app>

4
x-pack/plugins/rollup/public/crud_app/_crud_app.scss
View file

@ -4,3 +4,7 @@
.rollupJobWizardStepActions {
align-items: flex-end;
}
.rollupJobsRoot {
display: flex;
}

2
x-pack/plugins/rollup/public/crud_app/main.html
View file

@ -1,3 +1,3 @@
<kbn-management-app section="elasticsearch/rollup_jobs">
<div id="rollupJobsReactRoot"></div>
<div id="rollupJobsReactRoot" class="rollupJobsRoot"></div>
</kbn-management-app>

4
x-pack/plugins/rollup/public/crud_app/sections/job_create/job_create.js
View file

@ -494,9 +494,7 @@ export class JobCreateUi extends Component {
return (
<Fragment>
<EuiPageContent
horizontalPosition="center"
>
<EuiPageContent>
<EuiPageContentHeader>
<EuiTitle size="m">
<h1>

1
x-pack/plugins/rollup/public/crud_app/sections/job_list/job_list.js
View file

@ -270,7 +270,6 @@ export class JobListUi extends Component {
return (
<EuiPageContent
horizontalPosition="center"
verticalPosition="center"
>
{content}
</EuiPageContent>

3
x-pack/plugins/spaces/public/views/management/_manage_spaces.scss
View file

@ -9,3 +9,6 @@
margin-right: auto;
flex-grow: 0;
}
.spcGridPage {
max-width: map-get($euiBreakpoints, 'xl');
}

2
x-pack/plugins/spaces/public/views/management/spaces_grid/__snapshots__/spaces_grid_pages.test.tsx.snap
View file

@ -2,7 +2,7 @@
exports[`SpacesGridPage renders as expected 1`] = `
<div
className="spcGridPage euiPage--restrictWidth-default"
className="spcGridPage"
>
<EuiPageContent
horizontalPosition="center"

2
x-pack/plugins/spaces/public/views/management/spaces_grid/spaces_grid_page.tsx
View file

@ -67,7 +67,7 @@ class SpacesGridPageUI extends Component<Props, State> {
public render() {
return (
<div className="spcGridPage euiPage--restrictWidth-default">
<div className="spcGridPage">
<EuiPageContent horizontalPosition="center">{this.getPageContent()}</EuiPageContent>
<SecureSpaceMessage userProfile={this.props.userProfile} />
{this.getConfirmDeleteModal()}

38
x-pack/plugins/upgrade_assistant/public/app.tsx
View file

@ -4,33 +4,31 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React from 'react';
import React, { Fragment } from 'react';
import { EuiPage, EuiPageBody, EuiPageHeader, EuiPageHeaderSection, EuiTitle } from '@elastic/eui';
import { EuiPageHeader, EuiPageHeaderSection, EuiTitle } from '@elastic/eui';
import { FormattedMessage, injectI18nProvider } from '@kbn/i18n/react';
import { NEXT_MAJOR_VERSION } from '../common/version';
import { UpgradeAssistantTabs } from './components/tabs';
export const RootComponentUI: React.StatelessComponent = () => (
<EuiPage restrictWidth data-test-subj="upgradeAssistantRoot">
<EuiPageBody>
<EuiPageHeader>
<EuiPageHeaderSection>
<EuiTitle size="l">
<h1>
<FormattedMessage
id="xpack.upgradeAssistant.appTitle"
defaultMessage="{version} Upgrade Assistant"
values={{ version: `${NEXT_MAJOR_VERSION}.0` }}
/>
</h1>
</EuiTitle>
</EuiPageHeaderSection>
</EuiPageHeader>
<UpgradeAssistantTabs />
</EuiPageBody>
</EuiPage>
<Fragment>
<EuiPageHeader>
<EuiPageHeaderSection>
<EuiTitle size="l">
<h1>
<FormattedMessage
id="xpack.upgradeAssistant.appTitle"
defaultMessage="{version} Upgrade Assistant"
values={{ version: `${NEXT_MAJOR_VERSION}.0` }}
/>
</h1>
</EuiTitle>
</EuiPageHeaderSection>
</EuiPageHeader>
<UpgradeAssistantTabs />
</Fragment>
);
export const RootComponent = injectI18nProvider(RootComponentUI);