diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json index c586d9da7..ca06c9687 100644 --- a/public/locales/en/translations.json +++ b/public/locales/en/translations.json @@ -494,6 +494,12 @@ "logout": "Sync Stopped", "message": { "canceled": "Canceled old Sync Watcher" + }, + "estimated_time": { + "started_at": "Sync started at: ", + "spent_time": "Spent time: ", + "left_time": "Left time: ", + "estimating": "Estimating..." } }, "sum": "Sum", diff --git a/src/components/Header/SyncMode/SyncMode.container.js b/src/components/Header/SyncMode/SyncMode.container.js index 9afff44a8..8738f5091 100644 --- a/src/components/Header/SyncMode/SyncMode.container.js +++ b/src/components/Header/SyncMode/SyncMode.container.js @@ -3,13 +3,14 @@ import { connect } from 'react-redux' import { withTranslation } from 'react-i18next' import { startSyncNow, stopSyncNow } from 'state/sync/actions' -import { getSyncProgress, getIsSyncing } from 'state/sync/selectors' +import { getSyncProgress, getIsSyncing, getEstimatedSyncTime } from 'state/sync/selectors' import SyncMode from './SyncMode' const mapStateToProps = state => ({ isSyncing: getIsSyncing(state), syncProgress: getSyncProgress(state), + estimatedSyncTime: getEstimatedSyncTime(state), }) const mapDispatchToProps = { diff --git a/src/components/Header/SyncMode/SyncMode.helpers.js b/src/components/Header/SyncMode/SyncMode.helpers.js index e5d37b607..f6b83a96c 100644 --- a/src/components/Header/SyncMode/SyncMode.helpers.js +++ b/src/components/Header/SyncMode/SyncMode.helpers.js @@ -1,7 +1,33 @@ import React from 'react' import { Spinner } from '@blueprintjs/core' +import _isNull from 'lodash/isNull' import Icon from 'icons' +import { getFormattedTime } from 'utils/dates' + +const getEstimatedSyncTime = ({ + leftTime = null, + spentTime = null, + syncStartedAt = null, +}, t) => { + const start = _isNull(syncStartedAt) + ? t('sync.estimated_time.estimating') + : getFormattedTime(syncStartedAt, 'MMMM DD, YYYY HH:mm') + + const spent = _isNull(spentTime) + ? t('sync.estimated_time.estimating') + : getFormattedTime(spentTime, 'mm:ss') + + const left = _isNull(leftTime) + ? t('sync.estimated_time.estimating') + : getFormattedTime(leftTime, 'mm:ss') + + return { + start, + spent, + left, + } +} export const getSyncTitle = (isSyncing) => ( isSyncing @@ -9,11 +35,30 @@ export const getSyncTitle = (isSyncing) => ( : 'sync.start' ) -export const getSyncTooltipMessage = (isSyncing) => ( - isSyncing - ? 'sync.insync_tooltip' - : 'sync.start_sync_tooltip' -) +export const getSyncTooltipContent = (t, isSyncing, estimatedSyncTime) => { + const { start, spent, left } = getEstimatedSyncTime(estimatedSyncTime, t) + + if (isSyncing) { + return ( + <> +
{t('sync.insync_tooltip')}
++ {t('sync.estimated_time.started_at')} + {start} +
++ {t('sync.estimated_time.spent_time')} + {spent} +
++ {t('sync.estimated_time.left_time')} + {left} +
+ > + ) + } + return <>{t('sync.start_sync_tooltip')}> +} export const getSyncIcon = (isSyncing, syncProgress) => { if (isSyncing) { @@ -32,5 +77,5 @@ export const getSyncIcon = (isSyncing, syncProgress) => { export default { getSyncIcon, getSyncTitle, - getSyncTooltipMessage, + getSyncTooltipContent, } diff --git a/src/components/Header/SyncMode/SyncMode.js b/src/components/Header/SyncMode/SyncMode.js index 892c57acf..cfed143d6 100644 --- a/src/components/Header/SyncMode/SyncMode.js +++ b/src/components/Header/SyncMode/SyncMode.js @@ -10,7 +10,7 @@ import config from 'config' import { getSyncIcon, getSyncTitle, - getSyncTooltipMessage, + getSyncTooltipContent, } from './SyncMode.helpers' const SyncMode = ({ @@ -19,6 +19,7 @@ const SyncMode = ({ stopSyncNow, syncProgress, startSyncNow, + estimatedSyncTime, }) => { const handleSync = () => { if (isSyncing) { @@ -38,8 +39,8 @@ const SyncMode = ({ <>