Backports the following commits to 6.x: - [Infra UI] Work around IE11 flexbox alignment problems (#25224)
This commit is contained in:
parent
9b04e556be
commit
f55b39d195
|
@ -6,6 +6,7 @@
|
||||||
|
|
||||||
import { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
|
import { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
|
||||||
interface EmptyPageProps {
|
interface EmptyPageProps {
|
||||||
message: string;
|
message: string;
|
||||||
|
@ -22,7 +23,7 @@ export const EmptyPage: React.SFC<EmptyPageProps> = ({
|
||||||
title,
|
title,
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<EuiEmptyPrompt
|
<CenteredEmptyPrompt
|
||||||
title={<h2>{title}</h2>}
|
title={<h2>{title}</h2>}
|
||||||
body={<p>{message}</p>}
|
body={<p>{message}</p>}
|
||||||
actions={
|
actions={
|
||||||
|
@ -33,3 +34,7 @@ export const EmptyPage: React.SFC<EmptyPageProps> = ({
|
||||||
{...rest}
|
{...rest}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const CenteredEmptyPrompt = styled(EuiEmptyPrompt)`
|
||||||
|
align-self: center;
|
||||||
|
`;
|
||||||
|
|
|
@ -11,16 +11,16 @@ export const ColumnarPage = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
flex: 1 0 0;
|
flex: 1 0 0%;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const PageContent = styled.div`
|
export const PageContent = styled.div`
|
||||||
flex: 1 0 0;
|
flex: 1 0 0%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
background-color: ${props => props.theme.eui.euiColorEmptyShade};
|
background-color: ${props => props.theme.eui.euiColorEmptyShade};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const FlexPage = styled(EuiPage)`
|
export const FlexPage = styled(EuiPage)`
|
||||||
flex: 1 0 0;
|
flex: 1 0 0%;
|
||||||
`;
|
`;
|
||||||
|
|
|
@ -96,7 +96,7 @@ export class Waffle extends React.Component<Props, {}> {
|
||||||
return <InfraLoadingPanel height="100%" width="100%" text="Loading data" />;
|
return <InfraLoadingPanel height="100%" width="100%" text="Loading data" />;
|
||||||
} else if (!loading && map && map.length === 0) {
|
} else if (!loading && map && map.length === 0) {
|
||||||
return (
|
return (
|
||||||
<EuiEmptyPrompt
|
<CenteredEmptyPrompt
|
||||||
title={<h2>There is no data to display.</h2>}
|
title={<h2>There is no data to display.</h2>}
|
||||||
titleSize="m"
|
titleSize="m"
|
||||||
body={<p>Try adjusting your time or filter.</p>}
|
body={<p>Try adjusting your time or filter.</p>}
|
||||||
|
@ -206,7 +206,7 @@ export class Waffle extends React.Component<Props, {}> {
|
||||||
}
|
}
|
||||||
|
|
||||||
const WaffleMapOuterContiner = styled.div`
|
const WaffleMapOuterContiner = styled.div`
|
||||||
flex: 1 0 0;
|
flex: 1 0 0%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -222,3 +222,7 @@ const WaffleMapInnerContainer = styled.div`
|
||||||
align-content: flex-start;
|
align-content: flex-start;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const CenteredEmptyPrompt = styled(EuiEmptyPrompt)`
|
||||||
|
align-self: center;
|
||||||
|
`;
|
||||||
|
|
|
@ -117,7 +117,7 @@ export class InfraKibanaFrameworkAdapter implements InfraFrameworkAdapter {
|
||||||
template: `
|
template: `
|
||||||
<div
|
<div
|
||||||
id="${ROOT_ELEMENT_ID}"
|
id="${ROOT_ELEMENT_ID}"
|
||||||
style="display: flex; flex-direction: column; align-items: stretch; flex: 1 0 0; overflow: hidden;"
|
style="display: flex; flex-direction: column; align-items: stretch; flex: 1 0 0%; overflow: hidden;"
|
||||||
></div>
|
></div>
|
||||||
`,
|
`,
|
||||||
}));
|
}));
|
||||||
|
@ -140,7 +140,7 @@ export class InfraKibanaFrameworkAdapter implements InfraFrameworkAdapter {
|
||||||
uiRoutes.otherwise({
|
uiRoutes.otherwise({
|
||||||
reloadOnSearch: false,
|
reloadOnSearch: false,
|
||||||
template:
|
template:
|
||||||
'<infra-ui-kibana-adapter style="display: flex; align-items: stretch; flex: 1 0 0;"></infra-ui-kibana-adapter>',
|
'<infra-ui-kibana-adapter style="display: flex; align-items: stretch; flex: 1 0 0%;"></infra-ui-kibana-adapter>',
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -106,14 +106,14 @@ export const LogsPageContent: React.SFC = () => (
|
||||||
);
|
);
|
||||||
|
|
||||||
const LogPageEventStreamColumn = styled.div`
|
const LogPageEventStreamColumn = styled.div`
|
||||||
flex: 1 0 0;
|
flex: 1 0 0%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const LogPageMinimapColumn = styled.div`
|
const LogPageMinimapColumn = styled.div`
|
||||||
flex: 1 0 0;
|
flex: 1 0 0%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
min-width: 100px;
|
min-width: 100px;
|
||||||
max-width: 100px;
|
max-width: 100px;
|
||||||
|
|
|
@ -222,7 +222,7 @@ const EuiSideNavContainer = styled.div`
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const MetricsDetailsPageColumn = styled.div`
|
const MetricsDetailsPageColumn = styled.div`
|
||||||
flex: 1 0 0;
|
flex: 1 0 0%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
`;
|
`;
|
||||||
|
|
Loading…
Reference in a new issue