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

[Infra UI] Don't show sidenav while loading. (#27119) (#27208)

Browse source 
* Don't show sidenav while loading.

* Remove useless use of cast.
This commit is contained in:
Sonja Krause-Harder 2018-12-14 18:46:53 +01:00 • committed by GitHub
parent 067d1fb8d8
commit a0e3a1f0ef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 93 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

85
x-pack/plugins/infra/public/components/metrics/side_nav.tsx Normal file
View file

@ -0,0 +1,85 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import React from 'react';
import styled from 'styled-components';
import { EuiHideFor, EuiPageSideBar, EuiShowFor, EuiSideNav } from '@elastic/eui';
import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
import { InfraMetricLayout, InfraMetricLayoutSection } from '../../pages/metrics/layouts/types';
interface Props {
layouts: InfraMetricLayout[];
loading: boolean;
nodeName: string;
handleClick: (section: InfraMetricLayoutSection) => () => void;
intl: InjectedIntl;
}
export const MetricsSideNav = injectI18n(
class extends React.PureComponent<Props> {
public static displayName = 'MetricsSideNav';
public readonly state = {
isOpenOnMobile: false,
};
public render() {
let content;
let mobileContent;
if (!this.props.loading) {
const entries = this.props.layouts.map(item => {
return {
name: item.label,
id: item.id,
items: item.sections.map(section => ({
id: section.id,
name: section.label,
onClick: this.props.handleClick(section),
})),
};
});
content = <EuiSideNav items={entries} />;
mobileContent = (
<EuiSideNav
items={entries}
mobileTitle={this.props.nodeName}
toggleOpenOnMobile={this.toggleOpenOnMobile}
isOpenOnMobile={this.state.isOpenOnMobile}
/>
);
}
return (
<EuiPageSideBar>
<EuiHideFor sizes={['xs', 's']}>
<SideNavContainer>{content}</SideNavContainer>
</EuiHideFor>
<EuiShowFor sizes={['xs', 's']}>{mobileContent}</EuiShowFor>
</EuiPageSideBar>
);
}
private toggleOpenOnMobile = () => {
this.setState({
isOpenOnMobile: !this.state.isOpenOnMobile,
});
};
}
);
const SideNavContainer = styled.div`
position: fixed;
z-index: 1;
height: 88vh;
background-color: #f5f5f5;
padding-left: 16px;
margin-left: -16px;
overflow-y: auto;
overflow-x: hidden;
`;

58
x-pack/plugins/infra/public/pages/metrics/index.tsx
View file

@ -12,9 +12,6 @@ import {
EuiPageContent,
EuiPageHeader,
EuiPageHeaderSection,
EuiPageSideBar,
EuiShowFor,
EuiSideNav,
EuiTitle,
} from '@elastic/eui';
import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
@ -24,6 +21,7 @@ import { AutoSizer } from '../../components/auto_sizer';
import { InfrastructureBetaBadgeHeaderSection } from '../../components/beta_badge_header_section';
import { Header } from '../../components/header';
import { Metrics } from '../../components/metrics';
import { MetricsSideNav } from '../../components/metrics/side_nav';
import { MetricsTimeControls } from '../../components/metrics/time_controls';
import { ColumnarPage, PageContent } from '../../components/page';
import { WithMetadata } from '../../containers/metadata/with_metadata';
@ -61,9 +59,6 @@ export const MetricDetail = withTheme(
injectI18n(
class extends React.PureComponent<Props> {
public static displayName = 'MetricDetailPage';
public readonly state = {
isSideNavOpenOnMobile: false,
};
public render() {
const { intl } = this.props;
@ -112,7 +107,7 @@ export const MetricDetail = withTheme(
nodeType={nodeType}
nodeId={nodeName}
>
{({ filteredLayouts }) => {
{({ filteredLayouts, loading: metadataLoading }) => {
return (
<WithMetrics
layouts={filteredLayouts}
@ -125,34 +120,14 @@ export const MetricDetail = withTheme(
if (error) {
return <ErrorPageBody message={error} />;
}
const sideNav = filteredLayouts.map(item => {
return {
name: item.label,
id: item.id,
items: item.sections.map(section => ({
id: section.id as string,
name: section.label,
onClick: this.handleClick(section),
})),
};
});
return (
<EuiPage style={{ flex: '1 0 auto' }}>
<EuiPageSideBar>
<EuiHideFor sizes={['xs', 's']}>
<EuiSideNavContainer>
<EuiSideNav items={sideNav} />
</EuiSideNavContainer>
</EuiHideFor>
<EuiShowFor sizes={['xs', 's']}>
<EuiSideNav
items={sideNav}
mobileTitle={nodeName}
toggleOpenOnMobile={this.toggleOpenOnMobile}
isOpenOnMobile={this.state.isSideNavOpenOnMobile}
/>
</EuiShowFor>
</EuiPageSideBar>
<MetricsSideNav
layouts={filteredLayouts}
loading={metadataLoading}
nodeName={nodeName}
handleClick={this.handleClick}
/>
<AutoSizer content={false} bounds detectAnyWindowResize>
{({ measureRef, bounds: { width = 0 } }) => {
return (
@ -218,27 +193,10 @@ export const MetricDetail = withTheme(
el.scrollIntoView();
}
};
private toggleOpenOnMobile = () => {
this.setState({
isSideNavOpenOnMobile: !this.state.isSideNavOpenOnMobile,
});
};
}
)
);
const EuiSideNavContainer = styled.div`
position: fixed;
z-index: 1;
height: 88vh;
background-color: #f5f5f5;
padding-left: 16px;
margin-left: -16px;
overflow-y: auto;
overflow-x: hidden;
`;
const MetricsDetailsPageColumn = styled.div`
flex: 1 0 0%;
display: flex;