import React from 'react' ; import { FormattedMessage } from '@kbn/i18n-react' ; import { EuiDescriptionList , EuiDescriptionListDescription , EuiDescriptionListTitle , EuiFlexGroup , EuiFlexItem , EuiLink , EuiLoadingSpinner , } from '@elastic/eui' ; import { SnapshotDetails } from '../../../../../../../common/types' ; import { SNAPSHOT_STATE } from '../../../../../constants' ; import { DataPlaceholder , FormattedDateTime , CollapsibleIndicesList , CollapsibleDataStreamsList , } from '../../../../../components' ; import { linkToPolicy } from '../../../../../services/navigation' ; import { SnapshotState } from './snapshot_state' ; import { useServices } from '../../../../../app_context' ; import { reactRouterNavigate } from '../../../../../../../../../../src/plugins/kibana_react/public' ; interface Props { snapshotDetails : SnapshotDetails ; } export const TabSummary = ( { snapshotDetails } ) => { const { versionId , version , includeGlobalState , dataStreams , indices , state , startTimeInMillis , endTimeInMillis , durationInMillis , uuid , policyName , } = snapshotDetails ; const { history } = useServices ( ) ; return ( < EuiDescriptionList textStyle = "reverse" > < EuiFlexGroup > < EuiFlexItem data - test - subj = "version" > < EuiDescriptionListTitle data - test - subj = "title" > < FormattedMessage id = "xpack.snapshotRestore.snapshotDetails.itemVersionLabel" defaultMessage = "Version / Version ID" / > < /EuiDescriptionListTitle> < EuiDescriptionListDescription className = "eui-textBreakWord" data - test - subj = "value" > { version } / { versionId } < /EuiDescriptionListDescription> < /EuiFlexItem> < EuiFlexItem data - test - subj = "uuid" > < EuiDescriptionListTitle data - test - subj = "title" > < FormattedMessage id = "xpack.snapshotRestore.snapshotDetails.itemUuidLabel" defaultMessage = "UUID" / > < /EuiDescriptionListTitle> < EuiDescriptionListDescription className = "eui-textBreakWord" data - test - subj = "value" > { uuid } < /EuiDescriptionListDescription> < /EuiFlexItem> < /EuiFlexGroup> < EuiFlexGroup > < EuiFlexItem data - test - subj = "state" > < EuiDescriptionListTitle data - test - subj = "title" > < FormattedMessage id = "xpack.snapshotRestore.snapshotDetails.itemStateLabel" defaultMessage = "State" / > < /EuiDescriptionListTitle> < EuiDescriptionListDescription className = "eui-textBreakWord" data - test - subj = "value" > < SnapshotState state = { state } /> < /EuiDescriptionListDescription> < /EuiFlexItem> < EuiFlexItem data - test - subj = "includeGlobalState" > < EuiDescriptionListTitle data - test - subj = "title" > < FormattedMessage id = "xpack.snapshotRestore.snapshotDetails.itemIncludeGlobalStateLabel" defaultMessage = "Includes global state" / > < /EuiDescriptionListTitle> < EuiDescriptionListDescription className = "eui-textBreakWord" data - test - subj = "value" > { includeGlobalState ? ( < FormattedMessage id = "xpack.snapshotRestore.snapshotDetails.itemIncludeGlobalStateYesLabel" defaultMessage = "Yes" / > ) : ( < FormattedMessage id = "xpack.snapshotRestore.snapshotDetails.itemIncludeGlobalStateNoLabel" defaultMessage = "No" / > ) } < /EuiDescriptionListDescription> < /EuiFlexItem> < /EuiFlexGroup> < EuiFlexGroup > < EuiFlexItem data - test - subj = "indices" > < EuiDescriptionListTitle data - test - subj = "title" > < FormattedMessage id = "xpack.snapshotRestore.snapshotDetails.itemIndicesLabel" defaultMessage = "Indices ({indicesCount})" values = { { indicesCount : indices . length } } /> < /EuiDescriptionListTitle> < EuiDescriptionListDescription className = "eui-textBreakWord" data - test - subj = "value" > < CollapsibleIndicesList indices = { indices } /> < /EuiDescriptionListDescription> < /EuiFlexItem> < /EuiFlexGroup> < EuiFlexGroup > < EuiFlexItem data - test - subj = "dataStreams" > < EuiDescriptionListTitle data - test - subj = "title" > < FormattedMessage id = "xpack.snapshotRestore.snapshotDetails.itemDataStreamsLabel" defaultMessage = "Data streams ({dataStreamsCount})" values = { { dataStreamsCount : dataStreams . length } } /> < /EuiDescriptionListTitle> < EuiDescriptionListDescription className = "eui-textBreakWord" data - test - subj = "value" > < CollapsibleDataStreamsList dataStreams = { dataStreams } /> < /EuiDescriptionListDescription> < /EuiFlexItem> < /EuiFlexGroup> < EuiFlexGroup > < EuiFlexItem data - test - subj = "startTime" > < EuiDescriptionListTitle data - test - subj = "title" > < FormattedMessage id = "xpack.snapshotRestore.snapshotDetails.itemStartTimeLabel" defaultMessage = "Start time" / > < /EuiDescriptionListTitle> < EuiDescriptionListDescription className = "eui-textBreakWord" data - test - subj = "value" > < DataPlaceholder data = { startTimeInMillis } > < FormattedDateTime epochMs = { startTimeInMillis } /> < /DataPlaceholder> < /EuiDescriptionListDescription> < /EuiFlexItem> < EuiFlexItem data - test - subj = "endTime" > < EuiDescriptionListTitle data - test - subj = "title" > < FormattedMessage id = "xpack.snapshotRestore.snapshotDetails.itemEndTimeLabel" defaultMessage = "End time" / > < /EuiDescriptionListTitle> < EuiDescriptionListDescription className = "eui-textBreakWord" data - test - subj = "value" > { state === SNAPSHOT_STATE . IN_PROGRESS ? ( < EuiLoadingSpinner size = "m" / > ) : ( < DataPlaceholder data = { endTimeInMillis } > < FormattedDateTime epochMs = { endTimeInMillis } /> < /DataPlaceholder>)} < /EuiDescriptionListDescription> < /EuiFlexItem> < /EuiFlexGroup> < EuiFlexGroup > < EuiFlexItem data - test - subj = "duration" > < EuiDescriptionListTitle data - test - subj = "title" > < FormattedMessage id = "xpack.snapshotRestore.snapshotDetails.itemDurationLabel" defaultMessage = "Duration" / > < /EuiDescriptionListTitle> < EuiDescriptionListDescription className = "eui-textBreakWord" data - test - subj = "value" > { 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> { policyName ? ( < EuiFlexItem data - test - subj = "policy" > < EuiDescriptionListTitle data - test - subj = "title" > < FormattedMessage id = "xpack.snapshotRestore.snapshotDetails.createdByLabel" defaultMessage = "Created by" / > < /EuiDescriptionListTitle> < EuiDescriptionListDescription className = "eui-textBreakWord" data - test - subj = "value" > < EuiLink { ... reactRouterNavigate ( history , linkToPolicy ( policyName ) ) } > { policyName } < /EuiLink> < /EuiDescriptionListDescription> < /EuiFlexItem>) : null} < /EuiFlexGroup> < /EuiDescriptionList>); } ;