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

Use spinner for duration and end time if snapshotting is still in progress

Browse source
This commit is contained in:
Jen Huang 2019-04-26 12:27:23 -07:00
parent 1ad93a8f0d
commit ad34f63764
3 changed files with 41 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

30
x-pack/plugins/snapshot_restore/public/app/sections/home/snapshot_list/snapshot_details/tabs/tab_summary.tsx
View file

@ -12,10 +12,12 @@ import {
EuiDescriptionListTitle,
EuiFlexGroup,
EuiFlexItem,
EuiLoadingSpinner,
EuiText,
EuiTitle,
} from '@elastic/eui';
import { SNAPSHOT_STATE } from '../../../../../constants';
import { useAppDependencies } from '../../../../../index';
import { formatDate } from '../../../../../services/text';
import { DataPlaceholder } from '../../../../../components';
@ -206,7 +208,13 @@ export const TabSummary: React.SFC<Props> = ({ snapshotDetails }) => {
className="eui-textBreakWord"
data-test-subj="srSnapshotDetailEndTimeDescription"
>
<DataPlaceholder data={endTimeInMillis}>{formatDate(endTimeInMillis)}</DataPlaceholder>
{state === SNAPSHOT_STATE.IN_PROGRESS ? (
<EuiLoadingSpinner size="m" />
) : (
<DataPlaceholder data={endTimeInMillis}>
{formatDate(endTimeInMillis)}
</DataPlaceholder>
)}
</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiFlexGroup>
@ -225,14 +233,18 @@ export const TabSummary: React.SFC<Props> = ({ snapshotDetails }) => {
className="eui-textBreakWord"
data-test-subj="srSnapshotDetailDurationDescription"
>
<DataPlaceholder data={durationInMillis}>
<FormattedMessage
id="xpack.snapshotRestore.snapshotDetails.itemDurationValueLabel"
data-test-subj="srSnapshotDetailsDurationValue"
defaultMessage="{seconds} {seconds, plural, one {second} other {seconds}}"
values={{ seconds: Math.ceil(durationInMillis / 1000) }}
/>
</DataPlaceholder>
{state === SNAPSHOT_STATE.IN_PROGRESS ? (
<EuiLoadingSpinner size="m" />
) : (
<DataPlaceholder data={durationInMillis}>
<FormattedMessage
id="xpack.snapshotRestore.snapshotDetails.itemDurationValueLabel"
data-test-subj="srSnapshotDetailsDurationValue"
defaultMessage="{seconds} {seconds, plural, one {second} other {seconds}}"
values={{ seconds: Math.ceil(durationInMillis / 1000) }}
/>
</DataPlaceholder>
)}
</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiFlexGroup>

26
x-pack/plugins/snapshot_restore/public/app/sections/home/snapshot_list/snapshot_table/snapshot_table.tsx
View file

@ -5,9 +5,10 @@
*/
import React from 'react';
import { EuiButton, EuiInMemoryTable, EuiLink, Query } from '@elastic/eui';
import { EuiButton, EuiInMemoryTable, EuiLink, Query, EuiLoadingSpinner } from '@elastic/eui';
import { SnapshotDetails } from '../../../../../../common/types';
import { SNAPSHOT_STATE } from '../../../../constants';
import { useAppDependencies } from '../../../../index';
import { formatDate } from '../../../../services/text';
import { linkToRepository } from '../../../../services/navigation';
@ -78,15 +79,20 @@ export const SnapshotTable: React.FunctionComponent<Props> = ({
truncateText: true,
sortable: true,
width: '100px',
render: (durationInMillis: number) => (
<DataPlaceholder data={durationInMillis}>
<FormattedMessage
id="xpack.snapshotRestore.snapshotList.table.durationColumnValueLabel"
defaultMessage="{seconds}s"
values={{ seconds: Math.ceil(durationInMillis / 1000) }}
/>
</DataPlaceholder>
),
render: (durationInMillis: number, { state }: SnapshotDetails) => {
if (state === SNAPSHOT_STATE.IN_PROGRESS) {
return <EuiLoadingSpinner size="m" />;
}
return (
<DataPlaceholder data={durationInMillis}>
<FormattedMessage
id="xpack.snapshotRestore.snapshotList.table.durationColumnValueLabel"
defaultMessage="{seconds}s"
values={{ seconds: Math.ceil(durationInMillis / 1000) }}
/>
</DataPlaceholder>
);
},
},
{
field: 'indices',

8
x-pack/plugins/snapshot_restore/public/app/services/text/text.ts
View file

@ -84,10 +84,10 @@ class TextService {
return this.i18n.translate('xpack.snapshotRestore.repositoryForm.sizeNotationPlaceholder', {
defaultMessage: 'Examples: {example1}, {example2}, {example3}, {example4}',
values: {
example1: '1024',
example2: '1g',
example3: '10mb',
example4: '5k',
example1: '1g',
example2: '10mb',
example3: '5k',
example4: '1024B',
},
});
}