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

[Uptime] Fix Snapshot component loading state header (#41023)

Browse source 
* Pull the loading state for Snapshot out of the panel to match the regular component.

* Improve layout of loading component to reflect normal component.
This commit is contained in:
Justin Kambic 2019-07-17 08:27:23 -04:00 • committed by GitHub
parent 487afa42db
commit fbfec23d15
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 53 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

103
x-pack/legacy/plugins/uptime/public/components/functional/snapshot_loading.tsx
View file

@ -5,62 +5,65 @@
*/
// @ts-ignore missing typings for EuiStat
import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiStat, EuiTitle } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiStat, EuiTitle, EuiSpacer } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import React from 'react';
import React, { Fragment } from 'react';
export const SnapshotLoading = () => (
<EuiFlexGroup gutterSize="s">
<EuiFlexItem grow={4}>
<EuiPanel paddingSize="s" style={{ height: 170 }}>
<EuiFlexGroup direction="column">
<EuiFlexItem grow={false}>
<EuiTitle size="xs">
<h5>
<FormattedMessage
id="xpack.uptime.snapshot.endpointStatusLoadingTitle"
defaultMessage="Current status"
/>
</h5>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGroup gutterSize="xl">
<EuiFlexItem grow={false}>
<EuiStat
description={i18n.translate('xpack.uptime.snapshot.stats.upDescription', {
defaultMessage: 'Up',
})}
textAlign="center"
title="-"
titleColor="secondary"
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiStat
description={i18n.translate('xpack.uptime.snapshot.stats.downDescription', {
defaultMessage: 'Down',
})}
textAlign="center"
title="-"
titleColor="danger"
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiStat
description={i18n.translate('xpack.uptime.snapshot.stats.totalDescription', {
defaultMessage: 'Total',
})}
textAlign="center"
title="-"
titleColor="subdued"
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
<Fragment>
<EuiTitle size="xs">
<h5>
<FormattedMessage
id="xpack.uptime.snapshot.endpointStatusLoadingTitle"
defaultMessage="Current status"
/>
</h5>
</EuiTitle>
<EuiPanel paddingSize="s" style={{ height: 170 }}>
<EuiFlexGroup direction="column">
<EuiFlexItem grow={false}>
<EuiSpacer size="s" />
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGroup justifyContent="spaceEvenly" gutterSize="s">
<EuiFlexItem>
<EuiStat
description={i18n.translate('xpack.uptime.snapshot.stats.upDescription', {
defaultMessage: 'Up',
})}
textAlign="center"
title="-"
titleColor="secondary"
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiStat
description={i18n.translate('xpack.uptime.snapshot.stats.downDescription', {
defaultMessage: 'Down',
})}
textAlign="center"
title="-"
titleColor="danger"
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiStat
description={i18n.translate('xpack.uptime.snapshot.stats.totalDescription', {
defaultMessage: 'Total',
})}
textAlign="center"
title="-"
titleColor="subdued"
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
</Fragment>
</EuiFlexItem>
</EuiFlexGroup>
);