Mark McDowall
2 months ago
parent
8a8ea4eb94
commit
9276bd7a16
@ -0,0 +1,9 @@
|
||||
import Backup from 'typings/Backup';
|
||||
import AppSectionState, { Error } from './AppSectionState';
|
||||
|
||||
interface BackupAppState extends AppSectionState<Backup> {
|
||||
isRestoring: boolean;
|
||||
restoreError?: Error;
|
||||
}
|
||||
|
||||
export default BackupAppState;
|
||||
@ -1,164 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import Icon from 'Components/Icon';
|
||||
import IconButton from 'Components/Link/IconButton';
|
||||
import Link from 'Components/Link/Link';
|
||||
import ConfirmModal from 'Components/Modal/ConfirmModal';
|
||||
import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
|
||||
import TableRowCell from 'Components/Table/Cells/TableRowCell';
|
||||
import TableRow from 'Components/Table/TableRow';
|
||||
import { icons, kinds } from 'Helpers/Props';
|
||||
import formatBytes from 'Utilities/Number/formatBytes';
|
||||
import translate from 'Utilities/String/translate';
|
||||
import RestoreBackupModalConnector from './RestoreBackupModalConnector';
|
||||
import styles from './BackupRow.css';
|
||||
|
||||
class BackupRow extends Component {
|
||||
|
||||
//
|
||||
// Lifecycle
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
isRestoreModalOpen: false,
|
||||
isConfirmDeleteModalOpen: false
|
||||
};
|
||||
}
|
||||
|
||||
//
|
||||
// Listeners
|
||||
|
||||
onRestorePress = () => {
|
||||
this.setState({ isRestoreModalOpen: true });
|
||||
};
|
||||
|
||||
onRestoreModalClose = () => {
|
||||
this.setState({ isRestoreModalOpen: false });
|
||||
};
|
||||
|
||||
onDeletePress = () => {
|
||||
this.setState({ isConfirmDeleteModalOpen: true });
|
||||
};
|
||||
|
||||
onConfirmDeleteModalClose = () => {
|
||||
this.setState({ isConfirmDeleteModalOpen: false });
|
||||
};
|
||||
|
||||
onConfirmDeletePress = () => {
|
||||
const {
|
||||
id,
|
||||
onDeleteBackupPress
|
||||
} = this.props;
|
||||
|
||||
this.setState({ isConfirmDeleteModalOpen: false }, () => {
|
||||
onDeleteBackupPress(id);
|
||||
});
|
||||
};
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
const {
|
||||
id,
|
||||
type,
|
||||
name,
|
||||
path,
|
||||
size,
|
||||
time
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
isRestoreModalOpen,
|
||||
isConfirmDeleteModalOpen
|
||||
} = this.state;
|
||||
|
||||
let iconClassName = icons.SCHEDULED;
|
||||
let iconTooltip = translate('Scheduled');
|
||||
|
||||
if (type === 'manual') {
|
||||
iconClassName = icons.INTERACTIVE;
|
||||
iconTooltip = translate('Manual');
|
||||
} else if (type === 'update') {
|
||||
iconClassName = icons.UPDATE;
|
||||
iconTooltip = translate('BeforeUpdate');
|
||||
}
|
||||
|
||||
return (
|
||||
<TableRow key={id}>
|
||||
<TableRowCell className={styles.type}>
|
||||
{
|
||||
<Icon
|
||||
name={iconClassName}
|
||||
title={iconTooltip}
|
||||
/>
|
||||
}
|
||||
</TableRowCell>
|
||||
|
||||
<TableRowCell>
|
||||
<Link
|
||||
to={`${window.Sonarr.urlBase}${path}`}
|
||||
noRouter={true}
|
||||
>
|
||||
{name}
|
||||
</Link>
|
||||
</TableRowCell>
|
||||
|
||||
<TableRowCell>
|
||||
{formatBytes(size)}
|
||||
</TableRowCell>
|
||||
|
||||
<RelativeDateCell
|
||||
date={time}
|
||||
/>
|
||||
|
||||
<TableRowCell className={styles.actions}>
|
||||
<IconButton
|
||||
title={translate('RestoreBackup')}
|
||||
name={icons.RESTORE}
|
||||
onPress={this.onRestorePress}
|
||||
/>
|
||||
|
||||
<IconButton
|
||||
title={translate('DeleteBackup')}
|
||||
name={icons.DELETE}
|
||||
onPress={this.onDeletePress}
|
||||
/>
|
||||
</TableRowCell>
|
||||
|
||||
<RestoreBackupModalConnector
|
||||
isOpen={isRestoreModalOpen}
|
||||
id={id}
|
||||
name={name}
|
||||
onModalClose={this.onRestoreModalClose}
|
||||
/>
|
||||
|
||||
<ConfirmModal
|
||||
isOpen={isConfirmDeleteModalOpen}
|
||||
kind={kinds.DANGER}
|
||||
title={translate('DeleteBackup')}
|
||||
message={translate('DeleteBackupMessageText', {
|
||||
name
|
||||
})}
|
||||
confirmLabel={translate('Delete')}
|
||||
onConfirm={this.onConfirmDeletePress}
|
||||
onCancel={this.onConfirmDeleteModalClose}
|
||||
/>
|
||||
</TableRow>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
BackupRow.propTypes = {
|
||||
id: PropTypes.number.isRequired,
|
||||
type: PropTypes.string.isRequired,
|
||||
name: PropTypes.string.isRequired,
|
||||
path: PropTypes.string.isRequired,
|
||||
size: PropTypes.number.isRequired,
|
||||
time: PropTypes.string.isRequired,
|
||||
onDeleteBackupPress: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default BackupRow;
|
||||
@ -0,0 +1,127 @@
|
||||
import React, { useCallback, useMemo, useState } from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import Icon from 'Components/Icon';
|
||||
import IconButton from 'Components/Link/IconButton';
|
||||
import Link from 'Components/Link/Link';
|
||||
import ConfirmModal from 'Components/Modal/ConfirmModal';
|
||||
import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
|
||||
import TableRowCell from 'Components/Table/Cells/TableRowCell';
|
||||
import TableRow from 'Components/Table/TableRow';
|
||||
import { icons, kinds } from 'Helpers/Props';
|
||||
import { deleteBackup } from 'Store/Actions/systemActions';
|
||||
import { BackupType } from 'typings/Backup';
|
||||
import formatBytes from 'Utilities/Number/formatBytes';
|
||||
import translate from 'Utilities/String/translate';
|
||||
import RestoreBackupModal from './RestoreBackupModal';
|
||||
import styles from './BackupRow.css';
|
||||
|
||||
interface BackupRowProps {
|
||||
id: number;
|
||||
type: BackupType;
|
||||
name: string;
|
||||
path: string;
|
||||
size: number;
|
||||
time: string;
|
||||
}
|
||||
|
||||
function BackupRow({ id, type, name, path, size, time }: BackupRowProps) {
|
||||
const dispatch = useDispatch();
|
||||
const [isRestoreModalOpen, setIsRestoreModalOpen] = useState(false);
|
||||
const [isConfirmDeleteModalOpen, setIsConfirmDeleteModalOpen] =
|
||||
useState(false);
|
||||
|
||||
const { iconClassName, iconTooltip } = useMemo(() => {
|
||||
if (type === 'manual') {
|
||||
return {
|
||||
iconClassName: icons.INTERACTIVE,
|
||||
iconTooltip: translate('Manual'),
|
||||
};
|
||||
}
|
||||
|
||||
if (type === 'update') {
|
||||
return {
|
||||
iconClassName: icons.UPDATE,
|
||||
iconTooltip: translate('BeforeUpdate'),
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
iconClassName: icons.SCHEDULED,
|
||||
iconTooltip: translate('Scheduled'),
|
||||
};
|
||||
}, [type]);
|
||||
|
||||
const handleRestorePress = useCallback(() => {
|
||||
setIsRestoreModalOpen(true);
|
||||
}, []);
|
||||
|
||||
const handleRestoreModalClose = useCallback(() => {
|
||||
setIsRestoreModalOpen(false);
|
||||
}, []);
|
||||
|
||||
const handleDeletePress = useCallback(() => {
|
||||
setIsConfirmDeleteModalOpen(true);
|
||||
}, []);
|
||||
|
||||
const handleConfirmDeleteModalClose = useCallback(() => {
|
||||
setIsConfirmDeleteModalOpen(false);
|
||||
}, []);
|
||||
|
||||
const handleConfirmDeletePress = useCallback(() => {
|
||||
dispatch(deleteBackup({ id }));
|
||||
setIsConfirmDeleteModalOpen(false);
|
||||
}, [id, dispatch]);
|
||||
|
||||
return (
|
||||
<TableRow key={id}>
|
||||
<TableRowCell className={styles.type}>
|
||||
<Icon name={iconClassName} title={iconTooltip} />
|
||||
</TableRowCell>
|
||||
|
||||
<TableRowCell>
|
||||
<Link to={`${window.Sonarr.urlBase}${path}`} noRouter={true}>
|
||||
{name}
|
||||
</Link>
|
||||
</TableRowCell>
|
||||
|
||||
<TableRowCell>{formatBytes(size)}</TableRowCell>
|
||||
|
||||
<RelativeDateCell date={time} />
|
||||
|
||||
<TableRowCell className={styles.actions}>
|
||||
<IconButton
|
||||
title={translate('RestoreBackup')}
|
||||
name={icons.RESTORE}
|
||||
onPress={handleRestorePress}
|
||||
/>
|
||||
|
||||
<IconButton
|
||||
title={translate('DeleteBackup')}
|
||||
name={icons.DELETE}
|
||||
onPress={handleDeletePress}
|
||||
/>
|
||||
</TableRowCell>
|
||||
|
||||
<RestoreBackupModal
|
||||
isOpen={isRestoreModalOpen}
|
||||
id={id}
|
||||
name={name}
|
||||
onModalClose={handleRestoreModalClose}
|
||||
/>
|
||||
|
||||
<ConfirmModal
|
||||
isOpen={isConfirmDeleteModalOpen}
|
||||
kind={kinds.DANGER}
|
||||
title={translate('DeleteBackup')}
|
||||
message={translate('DeleteBackupMessageText', {
|
||||
name,
|
||||
})}
|
||||
confirmLabel={translate('Delete')}
|
||||
onConfirm={handleConfirmDeletePress}
|
||||
onCancel={handleConfirmDeleteModalClose}
|
||||
/>
|
||||
</TableRow>
|
||||
);
|
||||
}
|
||||
|
||||
export default BackupRow;
|
||||
@ -1,179 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import Alert from 'Components/Alert';
|
||||
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
|
||||
import PageContent from 'Components/Page/PageContent';
|
||||
import PageContentBody from 'Components/Page/PageContentBody';
|
||||
import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
|
||||
import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
|
||||
import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
|
||||
import Table from 'Components/Table/Table';
|
||||
import TableBody from 'Components/Table/TableBody';
|
||||
import { icons, kinds } from 'Helpers/Props';
|
||||
import translate from 'Utilities/String/translate';
|
||||
import BackupRow from './BackupRow';
|
||||
import RestoreBackupModalConnector from './RestoreBackupModalConnector';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
name: 'type',
|
||||
isVisible: true
|
||||
},
|
||||
{
|
||||
name: 'name',
|
||||
label: () => translate('Name'),
|
||||
isVisible: true
|
||||
},
|
||||
{
|
||||
name: 'size',
|
||||
label: () => translate('Size'),
|
||||
isVisible: true
|
||||
},
|
||||
{
|
||||
name: 'time',
|
||||
label: () => translate('Time'),
|
||||
isVisible: true
|
||||
},
|
||||
{
|
||||
name: 'actions',
|
||||
isVisible: true
|
||||
}
|
||||
];
|
||||
|
||||
class Backups extends Component {
|
||||
|
||||
//
|
||||
// Lifecycle
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
isRestoreModalOpen: false
|
||||
};
|
||||
}
|
||||
|
||||
//
|
||||
// Listeners
|
||||
|
||||
onRestorePress = () => {
|
||||
this.setState({ isRestoreModalOpen: true });
|
||||
};
|
||||
|
||||
onRestoreModalClose = () => {
|
||||
this.setState({ isRestoreModalOpen: false });
|
||||
};
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
const {
|
||||
isFetching,
|
||||
isPopulated,
|
||||
error,
|
||||
items,
|
||||
backupExecuting,
|
||||
onBackupPress,
|
||||
onDeleteBackupPress
|
||||
} = this.props;
|
||||
|
||||
const hasBackups = isPopulated && !!items.length;
|
||||
const noBackups = isPopulated && !items.length;
|
||||
|
||||
return (
|
||||
<PageContent title={translate('Backups')}>
|
||||
<PageToolbar>
|
||||
<PageToolbarSection>
|
||||
<PageToolbarButton
|
||||
label={translate('BackupNow')}
|
||||
iconName={icons.BACKUP}
|
||||
isSpinning={backupExecuting}
|
||||
onPress={onBackupPress}
|
||||
/>
|
||||
|
||||
<PageToolbarButton
|
||||
label={translate('RestoreBackup')}
|
||||
iconName={icons.RESTORE}
|
||||
onPress={this.onRestorePress}
|
||||
/>
|
||||
</PageToolbarSection>
|
||||
</PageToolbar>
|
||||
|
||||
<PageContentBody>
|
||||
{
|
||||
isFetching && !isPopulated &&
|
||||
<LoadingIndicator />
|
||||
}
|
||||
|
||||
{
|
||||
!isFetching && !!error &&
|
||||
<Alert kind={kinds.DANGER}>
|
||||
{translate('BackupsLoadError')}
|
||||
</Alert>
|
||||
}
|
||||
|
||||
{
|
||||
noBackups &&
|
||||
<Alert kind={kinds.INFO}>
|
||||
{translate('NoBackupsAreAvailable')}
|
||||
</Alert>
|
||||
}
|
||||
|
||||
{
|
||||
hasBackups &&
|
||||
<Table
|
||||
columns={columns}
|
||||
>
|
||||
<TableBody>
|
||||
{
|
||||
items.map((item) => {
|
||||
const {
|
||||
id,
|
||||
type,
|
||||
name,
|
||||
path,
|
||||
size,
|
||||
time
|
||||
} = item;
|
||||
|
||||
return (
|
||||
<BackupRow
|
||||
key={id}
|
||||
id={id}
|
||||
type={type}
|
||||
name={name}
|
||||
path={path}
|
||||
size={size}
|
||||
time={time}
|
||||
onDeleteBackupPress={onDeleteBackupPress}
|
||||
/>
|
||||
);
|
||||
})
|
||||
}
|
||||
</TableBody>
|
||||
</Table>
|
||||
}
|
||||
</PageContentBody>
|
||||
|
||||
<RestoreBackupModalConnector
|
||||
isOpen={this.state.isRestoreModalOpen}
|
||||
onModalClose={this.onRestoreModalClose}
|
||||
/>
|
||||
</PageContent>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Backups.propTypes = {
|
||||
isFetching: PropTypes.bool.isRequired,
|
||||
isPopulated: PropTypes.bool.isRequired,
|
||||
error: PropTypes.object,
|
||||
items: PropTypes.array.isRequired,
|
||||
backupExecuting: PropTypes.bool.isRequired,
|
||||
onBackupPress: PropTypes.func.isRequired,
|
||||
onDeleteBackupPress: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default Backups;
|
||||
@ -0,0 +1,156 @@
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import AppState from 'App/State/AppState';
|
||||
import * as commandNames from 'Commands/commandNames';
|
||||
import Alert from 'Components/Alert';
|
||||
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
|
||||
import PageContent from 'Components/Page/PageContent';
|
||||
import PageContentBody from 'Components/Page/PageContentBody';
|
||||
import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
|
||||
import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
|
||||
import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
|
||||
import Column from 'Components/Table/Column';
|
||||
import Table from 'Components/Table/Table';
|
||||
import TableBody from 'Components/Table/TableBody';
|
||||
import usePrevious from 'Helpers/Hooks/usePrevious';
|
||||
import { icons, kinds } from 'Helpers/Props';
|
||||
import { executeCommand } from 'Store/Actions/commandActions';
|
||||
import { fetchBackups } from 'Store/Actions/systemActions';
|
||||
import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
|
||||
import translate from 'Utilities/String/translate';
|
||||
import BackupRow from './BackupRow';
|
||||
import RestoreBackupModal from './RestoreBackupModal';
|
||||
|
||||
const columns: Column[] = [
|
||||
{
|
||||
name: 'type',
|
||||
label: '',
|
||||
isVisible: true,
|
||||
},
|
||||
{
|
||||
name: 'name',
|
||||
label: () => translate('Name'),
|
||||
isVisible: true,
|
||||
},
|
||||
{
|
||||
name: 'size',
|
||||
label: () => translate('Size'),
|
||||
isVisible: true,
|
||||
},
|
||||
{
|
||||
name: 'time',
|
||||
label: () => translate('Time'),
|
||||
isVisible: true,
|
||||
},
|
||||
{
|
||||
name: 'actions',
|
||||
label: '',
|
||||
isVisible: true,
|
||||
},
|
||||
];
|
||||
|
||||
function Backups() {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const { isFetching, isPopulated, error, items } = useSelector(
|
||||
(state: AppState) => state.system.backups
|
||||
);
|
||||
|
||||
const isBackupExecuting = useSelector(
|
||||
createCommandExecutingSelector(commandNames.BACKUP)
|
||||
);
|
||||
|
||||
const [isRestoreModalOpen, setIsRestoreModalOpen] = useState(false);
|
||||
|
||||
const wasBackupExecuting = usePrevious(isBackupExecuting);
|
||||
const hasBackups = isPopulated && !!items.length;
|
||||
const noBackups = isPopulated && !items.length;
|
||||
|
||||
const handleBackupPress = useCallback(() => {
|
||||
dispatch(
|
||||
executeCommand({
|
||||
name: commandNames.BACKUP,
|
||||
})
|
||||
);
|
||||
}, [dispatch]);
|
||||
|
||||
const handleRestorePress = useCallback(() => {
|
||||
setIsRestoreModalOpen(true);
|
||||
}, []);
|
||||
|
||||
const handleRestoreModalClose = useCallback(() => {
|
||||
setIsRestoreModalOpen(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(fetchBackups());
|
||||
}, [dispatch]);
|
||||
|
||||
useEffect(() => {
|
||||
if (wasBackupExecuting && !isBackupExecuting) {
|
||||
dispatch(fetchBackups());
|
||||
}
|
||||
}, [isBackupExecuting, wasBackupExecuting, dispatch]);
|
||||
|
||||
return (
|
||||
<PageContent title={translate('Backups')}>
|
||||
<PageToolbar>
|
||||
<PageToolbarSection>
|
||||
<PageToolbarButton
|
||||
label={translate('BackupNow')}
|
||||
iconName={icons.BACKUP}
|
||||
isSpinning={isBackupExecuting}
|
||||
onPress={handleBackupPress}
|
||||
/>
|
||||
|
||||
<PageToolbarButton
|
||||
label={translate('RestoreBackup')}
|
||||
iconName={icons.RESTORE}
|
||||
onPress={handleRestorePress}
|
||||
/>
|
||||
</PageToolbarSection>
|
||||
</PageToolbar>
|
||||
|
||||
<PageContentBody>
|
||||
{isFetching && !isPopulated ? <LoadingIndicator /> : null}
|
||||
|
||||
{!isFetching && !!error ? (
|
||||
<Alert kind={kinds.DANGER}>{translate('BackupsLoadError')}</Alert>
|
||||
) : null}
|
||||
|
||||
{noBackups ? (
|
||||
<Alert kind={kinds.INFO}>{translate('NoBackupsAreAvailable')}</Alert>
|
||||
) : null}
|
||||
|
||||
{hasBackups ? (
|
||||
<Table columns={columns}>
|
||||
<TableBody>
|
||||
{items.map((item) => {
|
||||
const { id, type, name, path, size, time } = item;
|
||||
|
||||
return (
|
||||
<BackupRow
|
||||
key={id}
|
||||
id={id}
|
||||
type={type}
|
||||
name={name}
|
||||
path={path}
|
||||
size={size}
|
||||
time={time}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
) : null}
|
||||
</PageContentBody>
|
||||
|
||||
<RestoreBackupModal
|
||||
isOpen={isRestoreModalOpen}
|
||||
onModalClose={handleRestoreModalClose}
|
||||
/>
|
||||
</PageContent>
|
||||
);
|
||||
}
|
||||
|
||||
export default Backups;
|
||||
@ -1,84 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import * as commandNames from 'Commands/commandNames';
|
||||
import { executeCommand } from 'Store/Actions/commandActions';
|
||||
import { deleteBackup, fetchBackups } from 'Store/Actions/systemActions';
|
||||
import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
|
||||
import Backups from './Backups';
|
||||
|
||||
function createMapStateToProps() {
|
||||
return createSelector(
|
||||
(state) => state.system.backups,
|
||||
createCommandExecutingSelector(commandNames.BACKUP),
|
||||
(backups, backupExecuting) => {
|
||||
const {
|
||||
isFetching,
|
||||
isPopulated,
|
||||
error,
|
||||
items
|
||||
} = backups;
|
||||
|
||||
return {
|
||||
isFetching,
|
||||
isPopulated,
|
||||
error,
|
||||
items,
|
||||
backupExecuting
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function createMapDispatchToProps(dispatch, props) {
|
||||
return {
|
||||
dispatchFetchBackups() {
|
||||
dispatch(fetchBackups());
|
||||
},
|
||||
|
||||
onDeleteBackupPress(id) {
|
||||
dispatch(deleteBackup({ id }));
|
||||
},
|
||||
|
||||
onBackupPress() {
|
||||
dispatch(executeCommand({
|
||||
name: commandNames.BACKUP
|
||||
}));
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
class BackupsConnector extends Component {
|
||||
|
||||
//
|
||||
// Lifecycle
|
||||
|
||||
componentDidMount() {
|
||||
this.props.dispatchFetchBackups();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (prevProps.backupExecuting && !this.props.backupExecuting) {
|
||||
this.props.dispatchFetchBackups();
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Backups
|
||||
{...this.props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
BackupsConnector.propTypes = {
|
||||
backupExecuting: PropTypes.bool.isRequired,
|
||||
dispatchFetchBackups: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default connect(createMapStateToProps, createMapDispatchToProps)(BackupsConnector);
|
||||
@ -1,31 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import Modal from 'Components/Modal/Modal';
|
||||
import RestoreBackupModalContentConnector from './RestoreBackupModalContentConnector';
|
||||
|
||||
function RestoreBackupModal(props) {
|
||||
const {
|
||||
isOpen,
|
||||
onModalClose,
|
||||
...otherProps
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onModalClose={onModalClose}
|
||||
>
|
||||
<RestoreBackupModalContentConnector
|
||||
{...otherProps}
|
||||
onModalClose={onModalClose}
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
RestoreBackupModal.propTypes = {
|
||||
isOpen: PropTypes.bool.isRequired,
|
||||
onModalClose: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default RestoreBackupModal;
|
||||
@ -0,0 +1,36 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import Modal from 'Components/Modal/Modal';
|
||||
import { clearRestoreBackup } from 'Store/Actions/systemActions';
|
||||
import RestoreBackupModalContent, {
|
||||
RestoreBackupModalContentProps,
|
||||
} from './RestoreBackupModalContent';
|
||||
|
||||
interface RestoreBackupModalProps extends RestoreBackupModalContentProps {
|
||||
isOpen: boolean;
|
||||
onModalClose: () => void;
|
||||
}
|
||||
|
||||
function RestoreBackupModal({
|
||||
isOpen,
|
||||
onModalClose,
|
||||
...otherProps
|
||||
}: RestoreBackupModalProps) {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const handleModalClose = useCallback(() => {
|
||||
dispatch(clearRestoreBackup());
|
||||
onModalClose();
|
||||
}, [dispatch, onModalClose]);
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onModalClose={handleModalClose}>
|
||||
<RestoreBackupModalContent
|
||||
{...otherProps}
|
||||
onModalClose={handleModalClose}
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export default RestoreBackupModal;
|
||||
@ -1,15 +0,0 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { clearRestoreBackup } from 'Store/Actions/systemActions';
|
||||
import RestoreBackupModal from './RestoreBackupModal';
|
||||
|
||||
function createMapDispatchToProps(dispatch, props) {
|
||||
return {
|
||||
onModalClose() {
|
||||
dispatch(clearRestoreBackup());
|
||||
|
||||
props.onModalClose();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(null, createMapDispatchToProps)(RestoreBackupModal);
|
||||
@ -1,241 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import TextInput from 'Components/Form/TextInput';
|
||||
import Icon from 'Components/Icon';
|
||||
import Button from 'Components/Link/Button';
|
||||
import SpinnerButton from 'Components/Link/SpinnerButton';
|
||||
import ModalBody from 'Components/Modal/ModalBody';
|
||||
import ModalContent from 'Components/Modal/ModalContent';
|
||||
import ModalFooter from 'Components/Modal/ModalFooter';
|
||||
import ModalHeader from 'Components/Modal/ModalHeader';
|
||||
import { icons, kinds } from 'Helpers/Props';
|
||||
import translate from 'Utilities/String/translate';
|
||||
import styles from './RestoreBackupModalContent.css';
|
||||
|
||||
function getErrorMessage(error) {
|
||||
if (!error || !error.responseJSON || !error.responseJSON.message) {
|
||||
return translate('ErrorRestoringBackup');
|
||||
}
|
||||
|
||||
return error.responseJSON.message;
|
||||
}
|
||||
|
||||
function getStepIconProps(isExecuting, hasExecuted, error) {
|
||||
if (isExecuting) {
|
||||
return {
|
||||
name: icons.SPINNER,
|
||||
isSpinning: true
|
||||
};
|
||||
}
|
||||
|
||||
if (hasExecuted) {
|
||||
return {
|
||||
name: icons.CHECK,
|
||||
kind: kinds.SUCCESS
|
||||
};
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return {
|
||||
name: icons.FATAL,
|
||||
kinds: kinds.DANGER,
|
||||
title: getErrorMessage(error)
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
name: icons.PENDING
|
||||
};
|
||||
}
|
||||
|
||||
class RestoreBackupModalContent extends Component {
|
||||
|
||||
//
|
||||
// Lifecycle
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
file: null,
|
||||
path: '',
|
||||
isRestored: false,
|
||||
isRestarted: false,
|
||||
isReloading: false
|
||||
};
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const {
|
||||
isRestoring,
|
||||
restoreError,
|
||||
isRestarting,
|
||||
dispatchRestart
|
||||
} = this.props;
|
||||
|
||||
if (prevProps.isRestoring && !isRestoring && !restoreError) {
|
||||
this.setState({ isRestored: true }, () => {
|
||||
dispatchRestart();
|
||||
});
|
||||
}
|
||||
|
||||
if (prevProps.isRestarting && !isRestarting) {
|
||||
this.setState({
|
||||
isRestarted: true,
|
||||
isReloading: true
|
||||
}, () => {
|
||||
location.reload();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Listeners
|
||||
|
||||
onPathChange = ({ value, files }) => {
|
||||
this.setState({
|
||||
file: files[0],
|
||||
path: value
|
||||
});
|
||||
};
|
||||
|
||||
onRestorePress = () => {
|
||||
const {
|
||||
id,
|
||||
onRestorePress
|
||||
} = this.props;
|
||||
|
||||
onRestorePress({
|
||||
id,
|
||||
file: this.state.file
|
||||
});
|
||||
};
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
const {
|
||||
id,
|
||||
name,
|
||||
isRestoring,
|
||||
restoreError,
|
||||
isRestarting,
|
||||
onModalClose
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
path,
|
||||
isRestored,
|
||||
isRestarted,
|
||||
isReloading
|
||||
} = this.state;
|
||||
|
||||
const isRestoreDisabled = (
|
||||
(!id && !path) ||
|
||||
isRestoring ||
|
||||
isRestarting ||
|
||||
isReloading
|
||||
);
|
||||
|
||||
return (
|
||||
<ModalContent onModalClose={onModalClose}>
|
||||
<ModalHeader>
|
||||
Restore Backup
|
||||
</ModalHeader>
|
||||
|
||||
<ModalBody>
|
||||
{
|
||||
!!id && translate('WouldYouLikeToRestoreBackup', {
|
||||
name
|
||||
})
|
||||
}
|
||||
|
||||
{
|
||||
!id &&
|
||||
<TextInput
|
||||
type="file"
|
||||
name="path"
|
||||
value={path}
|
||||
onChange={this.onPathChange}
|
||||
/>
|
||||
}
|
||||
|
||||
<div className={styles.steps}>
|
||||
<div className={styles.step}>
|
||||
<div className={styles.stepState}>
|
||||
<Icon
|
||||
size={20}
|
||||
{...getStepIconProps(isRestoring, isRestored, restoreError)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{translate('Restore')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.step}>
|
||||
<div className={styles.stepState}>
|
||||
<Icon
|
||||
size={20}
|
||||
{...getStepIconProps(isRestarting, isRestarted)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{translate('Restart')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.step}>
|
||||
<div className={styles.stepState}>
|
||||
<Icon
|
||||
size={20}
|
||||
{...getStepIconProps(isReloading, false)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{translate('Reload')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ModalBody>
|
||||
|
||||
<ModalFooter>
|
||||
<div className={styles.additionalInfo}>
|
||||
{translate('RestartReloadNote')}
|
||||
</div>
|
||||
|
||||
<Button onPress={onModalClose}>
|
||||
{translate('Cancel')}
|
||||
</Button>
|
||||
|
||||
<SpinnerButton
|
||||
kind={kinds.WARNING}
|
||||
isDisabled={isRestoreDisabled}
|
||||
isSpinning={isRestoring}
|
||||
onPress={this.onRestorePress}
|
||||
>
|
||||
{translate('Restore')}
|
||||
</SpinnerButton>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
RestoreBackupModalContent.propTypes = {
|
||||
id: PropTypes.number,
|
||||
name: PropTypes.string,
|
||||
path: PropTypes.string,
|
||||
isRestoring: PropTypes.bool.isRequired,
|
||||
restoreError: PropTypes.object,
|
||||
isRestarting: PropTypes.bool.isRequired,
|
||||
dispatchRestart: PropTypes.func.isRequired,
|
||||
onRestorePress: PropTypes.func.isRequired,
|
||||
onModalClose: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default RestoreBackupModalContent;
|
||||
@ -0,0 +1,198 @@
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { Error } from 'App/State/AppSectionState';
|
||||
import AppState from 'App/State/AppState';
|
||||
import TextInput from 'Components/Form/TextInput';
|
||||
import Icon, { IconName, IconProps } from 'Components/Icon';
|
||||
import Button from 'Components/Link/Button';
|
||||
import SpinnerButton from 'Components/Link/SpinnerButton';
|
||||
import ModalBody from 'Components/Modal/ModalBody';
|
||||
import ModalContent from 'Components/Modal/ModalContent';
|
||||
import ModalFooter from 'Components/Modal/ModalFooter';
|
||||
import ModalHeader from 'Components/Modal/ModalHeader';
|
||||
import usePrevious from 'Helpers/Hooks/usePrevious';
|
||||
import { icons, kinds } from 'Helpers/Props';
|
||||
import { restart, restoreBackup } from 'Store/Actions/systemActions';
|
||||
import { FileInputChanged } from 'typings/inputs';
|
||||
import translate from 'Utilities/String/translate';
|
||||
import styles from './RestoreBackupModalContent.css';
|
||||
|
||||
function getErrorMessage(error: Error) {
|
||||
if (
|
||||
!error ||
|
||||
!error.responseJSON ||
|
||||
!('message' in error.responseJSON) ||
|
||||
!error.responseJSON.message
|
||||
) {
|
||||
return translate('ErrorRestoringBackup');
|
||||
}
|
||||
|
||||
return error.responseJSON.message;
|
||||
}
|
||||
|
||||
function getStepIconProps(
|
||||
isExecuting: boolean,
|
||||
hasExecuted: boolean,
|
||||
error?: Error
|
||||
): {
|
||||
name: IconName;
|
||||
kind?: IconProps['kind'];
|
||||
title?: string;
|
||||
isSpinning?: boolean;
|
||||
} {
|
||||
if (isExecuting) {
|
||||
return {
|
||||
name: icons.SPINNER,
|
||||
isSpinning: true,
|
||||
};
|
||||
}
|
||||
|
||||
if (hasExecuted) {
|
||||
return {
|
||||
name: icons.CHECK,
|
||||
kind: 'success',
|
||||
};
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return {
|
||||
name: icons.FATAL,
|
||||
kind: 'danger',
|
||||
title: getErrorMessage(error),
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
name: icons.PENDING,
|
||||
};
|
||||
}
|
||||
|
||||
export interface RestoreBackupModalContentProps {
|
||||
id?: number;
|
||||
name?: string;
|
||||
onModalClose: () => void;
|
||||
}
|
||||
|
||||
function RestoreBackupModalContent({
|
||||
id,
|
||||
name,
|
||||
onModalClose,
|
||||
}: RestoreBackupModalContentProps) {
|
||||
const { isRestoring, restoreError } = useSelector(
|
||||
(state: AppState) => state.system.backups
|
||||
);
|
||||
|
||||
const { isRestarting } = useSelector((state: AppState) => state.app);
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const [path, setPath] = useState('');
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [isRestored, setIsRestored] = useState(false);
|
||||
const [isRestarted, setIsRestarted] = useState(false);
|
||||
const [isReloading, setIsReloading] = useState(false);
|
||||
const wasRestoring = usePrevious(isRestoring);
|
||||
const wasRestarting = usePrevious(isRestarting);
|
||||
|
||||
const isRestoreDisabled =
|
||||
(!id && !path) || isRestoring || isRestarting || isReloading;
|
||||
|
||||
const handlePathChange = useCallback(({ value, files }: FileInputChanged) => {
|
||||
if (!files?.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
setPath(value);
|
||||
setFile(files[0]);
|
||||
}, []);
|
||||
|
||||
const handleRestorePress = useCallback(() => {
|
||||
dispatch(restoreBackup({ id, file }));
|
||||
}, [id, file, dispatch]);
|
||||
|
||||
useEffect(() => {
|
||||
if (wasRestoring && !isRestoring && !restoreError) {
|
||||
setIsRestored(true);
|
||||
dispatch(restart());
|
||||
}
|
||||
}, [isRestoring, wasRestoring, restoreError, dispatch]);
|
||||
|
||||
useEffect(() => {
|
||||
if (wasRestarting && !isRestarting) {
|
||||
setIsRestarted(true);
|
||||
setIsReloading(true);
|
||||
window.location.reload();
|
||||
}
|
||||
}, [isRestarting, wasRestarting, dispatch]);
|
||||
|
||||
return (
|
||||
<ModalContent onModalClose={onModalClose}>
|
||||
<ModalHeader>Restore Backup</ModalHeader>
|
||||
|
||||
<ModalBody>
|
||||
{id && name ? (
|
||||
translate('WouldYouLikeToRestoreBackup', {
|
||||
name,
|
||||
})
|
||||
) : (
|
||||
<TextInput
|
||||
type="file"
|
||||
name="path"
|
||||
value={path}
|
||||
onChange={handlePathChange}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className={styles.steps}>
|
||||
<div className={styles.step}>
|
||||
<div className={styles.stepState}>
|
||||
<Icon
|
||||
size={20}
|
||||
{...getStepIconProps(isRestoring, isRestored, restoreError)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>{translate('Restore')}</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.step}>
|
||||
<div className={styles.stepState}>
|
||||
<Icon
|
||||
size={20}
|
||||
{...getStepIconProps(isRestarting, isRestarted)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>{translate('Restart')}</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.step}>
|
||||
<div className={styles.stepState}>
|
||||
<Icon size={20} {...getStepIconProps(isReloading, false)} />
|
||||
</div>
|
||||
|
||||
<div>{translate('Reload')}</div>
|
||||
</div>
|
||||
</div>
|
||||
</ModalBody>
|
||||
|
||||
<ModalFooter>
|
||||
<div className={styles.additionalInfo}>
|
||||
{translate('RestartReloadNote')}
|
||||
</div>
|
||||
|
||||
<Button onPress={onModalClose}>{translate('Cancel')}</Button>
|
||||
|
||||
<SpinnerButton
|
||||
kind={kinds.WARNING}
|
||||
isDisabled={isRestoreDisabled}
|
||||
isSpinning={isRestoring}
|
||||
onPress={handleRestorePress}
|
||||
>
|
||||
{translate('Restore')}
|
||||
</SpinnerButton>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
);
|
||||
}
|
||||
|
||||
export default RestoreBackupModalContent;
|
||||
@ -1,37 +0,0 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import { restart, restoreBackup } from 'Store/Actions/systemActions';
|
||||
import RestoreBackupModalContent from './RestoreBackupModalContent';
|
||||
|
||||
function createMapStateToProps() {
|
||||
return createSelector(
|
||||
(state) => state.system.backups,
|
||||
(state) => state.app.isRestarting,
|
||||
(backups, isRestarting) => {
|
||||
const {
|
||||
isRestoring,
|
||||
restoreError
|
||||
} = backups;
|
||||
|
||||
return {
|
||||
isRestoring,
|
||||
restoreError,
|
||||
isRestarting
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function createMapDispatchToProps(dispatch, props) {
|
||||
return {
|
||||
onRestorePress(payload) {
|
||||
dispatch(restoreBackup(payload));
|
||||
},
|
||||
|
||||
dispatchRestart() {
|
||||
dispatch(restart());
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(createMapStateToProps, createMapDispatchToProps)(RestoreBackupModalContent);
|
||||
@ -0,0 +1,13 @@
|
||||
import ModelBase from 'App/ModelBase';
|
||||
|
||||
export type BackupType = 'manual' | 'scheduled' | 'update';
|
||||
|
||||
interface Backup extends ModelBase {
|
||||
name: string;
|
||||
path: string;
|
||||
type: BackupType;
|
||||
size: number;
|
||||
time: string;
|
||||
}
|
||||
|
||||
export default Backup;
|
||||
Loading…
Reference in new issue