Archive-Team
/
sonarr-repo-only
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Convert System to TypeScript

This commit is contained in:
Mark McDowall 2024-07-26 23:16:03 -07:00
parent ebc5cdb335
commit f1045685a0
33 changed files with 960 additions and 1385 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/App/State/SettingsAppState.ts
View File

@ -20,7 +20,9 @@ import UiSettings from 'typings/Settings/UiSettings';
export interface DownloadClientAppState
extends AppSectionState<DownloadClient>,
AppSectionDeleteState,
AppSectionSaveState {}
AppSectionSaveState {
isTestingAll: boolean;
}
export type GeneralAppState = AppSectionItemState<General>;
@ -32,7 +34,9 @@ export interface ImportListAppState
export interface IndexerAppState
extends AppSectionState<Indexer>,
AppSectionDeleteState,
AppSectionSaveState {}
AppSectionSaveState {
isTestingAll: boolean;
}
export interface NotificationAppState
extends AppSectionState<Notification>,

9
frontend/src/App/State/SystemAppState.ts
View File

@ -1,13 +1,22 @@
import DiskSpace from 'typings/DiskSpace';
import Health from 'typings/Health';
import SystemStatus from 'typings/SystemStatus';
import Task from 'typings/Task';
import Update from 'typings/Update';
import AppSectionState, { AppSectionItemState } from './AppSectionState';
export type DiskSpaceAppState = AppSectionState<DiskSpace>;
export type HealthAppState = AppSectionState<Health>;
export type SystemStatusAppState = AppSectionItemState<SystemStatus>;
export type UpdateAppState = AppSectionState<Update>;
export type TaskAppState = AppSectionState<Task>;
interface SystemAppState {
diskSpace: DiskSpaceAppState;
health: HealthAppState;
updates: UpdateAppState;
status: SystemStatusAppState;
tasks: TaskAppState;
}
export default SystemAppState;

4
frontend/src/Components/Page/Sidebar/PageSidebar.js
View File

@ -9,7 +9,7 @@ import Scroller from 'Components/Scroller/Scroller';
import { icons } from 'Helpers/Props';
import locationShape from 'Helpers/Props/Shapes/locationShape';
import dimensions from 'Styles/Variables/dimensions';
import HealthStatusConnector from 'System/Status/Health/HealthStatusConnector';
import HealthStatus from 'System/Status/Health/HealthStatus';
import translate from 'Utilities/String/translate';
import MessagesConnector from './Messages/MessagesConnector';
import PageSidebarItem from './PageSidebarItem';
@ -147,7 +147,7 @@ const links = [
{
title: () => translate('Status'),
to: '/system/status',
statusComponent: HealthStatusConnector
statusComponent: HealthStatus
},
{
title: () => translate('Tasks'),

1
frontend/src/Components/Table/Column.ts
View File

@ -6,6 +6,7 @@ type PropertyFunction<T> = () => T;
interface Column {
name: string;
label: string | PropertyFunction<string> | React.ReactNode;
className?: string;
columnLabel?: string;
isSortable?: boolean;
isVisible: boolean;

135
frontend/src/System/Status/About/About.js
View File

@ -1,135 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import DescriptionList from 'Components/DescriptionList/DescriptionList';
import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
import FieldSet from 'Components/FieldSet';
import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
import titleCase from 'Utilities/String/titleCase';
import translate from 'Utilities/String/translate';
import StartTime from './StartTime';
import styles from './About.css';
class About extends Component {
//
// Render
render() {
const {
version,
packageVersion,
packageAuthor,
isNetCore,
isDocker,
runtimeVersion,
databaseVersion,
databaseType,
migrationVersion,
appData,
startupPath,
mode,
startTime,
timeFormat,
longDateFormat
} = this.props;
return (
<FieldSet legend={translate('About')}>
<DescriptionList className={styles.descriptionList}>
<DescriptionListItem
title={translate('Version')}
data={version}
/>
{
packageVersion &&
<DescriptionListItem
title={translate('PackageVersion')}
data={(packageAuthor ?
<InlineMarkdown data={translate('PackageVersionInfo', {
packageVersion,
packageAuthor
})}
/> :
packageVersion
)}
/>
}
{
isNetCore &&
<DescriptionListItem
title={translate('DotNetVersion')}
data={`Yes (${runtimeVersion})`}
/>
}
{
isDocker &&
<DescriptionListItem
title={translate('Docker')}
data={'Yes'}
/>
}
<DescriptionListItem
title={translate('Database')}
data={`${titleCase(databaseType)} ${databaseVersion}`}
/>
<DescriptionListItem
title={translate('DatabaseMigration')}
data={migrationVersion}
/>
<DescriptionListItem
title={translate('AppDataDirectory')}
data={appData}
/>
<DescriptionListItem
title={translate('StartupDirectory')}
data={startupPath}
/>
<DescriptionListItem
title={translate('Mode')}
data={titleCase(mode)}
/>
<DescriptionListItem
title={translate('Uptime')}
data={
<StartTime
startTime={startTime}
timeFormat={timeFormat}
longDateFormat={longDateFormat}
/>
}
/>
</DescriptionList>
</FieldSet>
);
}
}
About.propTypes = {
version: PropTypes.string.isRequired,
packageVersion: PropTypes.string,
packageAuthor: PropTypes.string,
isNetCore: PropTypes.bool.isRequired,
runtimeVersion: PropTypes.string.isRequired,
isDocker: PropTypes.bool.isRequired,
databaseType: PropTypes.string.isRequired,
databaseVersion: PropTypes.string.isRequired,
migrationVersion: PropTypes.number.isRequired,
appData: PropTypes.string.isRequired,
startupPath: PropTypes.string.isRequired,
mode: PropTypes.string.isRequired,
startTime: PropTypes.string.isRequired,
timeFormat: PropTypes.string.isRequired,
longDateFormat: PropTypes.string.isRequired
};
export default About;

103
frontend/src/System/Status/About/About.tsx Normal file
View File

@ -0,0 +1,103 @@
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import AppState from 'App/State/AppState';
import DescriptionList from 'Components/DescriptionList/DescriptionList';
import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
import FieldSet from 'Components/FieldSet';
import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
import { fetchStatus } from 'Store/Actions/systemActions';
import titleCase from 'Utilities/String/titleCase';
import translate from 'Utilities/String/translate';
import StartTime from './StartTime';
import styles from './About.css';
function About() {
const dispatch = useDispatch();
const { item } = useSelector((state: AppState) => state.system.status);
const {
version,
packageVersion,
packageAuthor,
isNetCore,
isDocker,
runtimeVersion,
databaseVersion,
databaseType,
migrationVersion,
appData,
startupPath,
mode,
startTime,
} = item;
useEffect(() => {
dispatch(fetchStatus());
}, [dispatch]);
return (
<FieldSet legend={translate('About')}>
<DescriptionList className={styles.descriptionList}>
<DescriptionListItem title={translate('Version')} data={version} />
{packageVersion && (
<DescriptionListItem
title={translate('PackageVersion')}
data={
packageAuthor ? (
<InlineMarkdown
data={translate('PackageVersionInfo', {
packageVersion,
packageAuthor,
})}
/>
) : (
packageVersion
)
}
/>
)}
{isNetCore ? (
<DescriptionListItem
title={translate('DotNetVersion')}
data={`Yes (${runtimeVersion})`}
/>
) : null}
{isDocker ? (
<DescriptionListItem title={translate('Docker')} data={'Yes'} />
) : null}
<DescriptionListItem
title={translate('Database')}
data={`${titleCase(databaseType)} ${databaseVersion}`}
/>
<DescriptionListItem
title={translate('DatabaseMigration')}
data={migrationVersion}
/>
<DescriptionListItem
title={translate('AppDataDirectory')}
data={appData}
/>
<DescriptionListItem
title={translate('StartupDirectory')}
data={startupPath}
/>
<DescriptionListItem title={translate('Mode')} data={titleCase(mode)} />
<DescriptionListItem
title={translate('Uptime')}
data={<StartTime startTime={startTime} />}
/>
</DescriptionList>
</FieldSet>
);
}
export default About;

52
frontend/src/System/Status/About/AboutConnector.js
View File

@ -1,52 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { fetchStatus } from 'Store/Actions/systemActions';
import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
import About from './About';
function createMapStateToProps() {
return createSelector(
(state) => state.system.status,
createUISettingsSelector(),
(status, uiSettings) => {
return {
...status.item,
timeFormat: uiSettings.timeFormat,
longDateFormat: uiSettings.longDateFormat
};
}
);
}
const mapDispatchToProps = {
fetchStatus
};
class AboutConnector extends Component {
//
// Lifecycle
componentDidMount() {
this.props.fetchStatus();
}
//
// Render
render() {
return (
<About
{...this.props}
/>
);
}
}
AboutConnector.propTypes = {
fetchStatus: PropTypes.func.isRequired
};
export default connect(createMapStateToProps, mapDispatchToProps)(AboutConnector);

93
frontend/src/System/Status/About/StartTime.js
View File

@ -1,93 +0,0 @@
import moment from 'moment';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import formatDateTime from 'Utilities/Date/formatDateTime';
import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
function getUptime(startTime) {
return formatTimeSpan(moment().diff(startTime));
}
class StartTime extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
const {
startTime,
timeFormat,
longDateFormat
} = props;
this._timeoutId = null;
this.state = {
uptime: getUptime(startTime),
startTime: formatDateTime(startTime, longDateFormat, timeFormat, { includeSeconds: true })
};
}
componentDidMount() {
this._timeoutId = setTimeout(this.onTimeout, 1000);
}
componentDidUpdate(prevProps) {
const {
startTime,
timeFormat,
longDateFormat
} = this.props;
if (
startTime !== prevProps.startTime ||
timeFormat !== prevProps.timeFormat ||
longDateFormat !== prevProps.longDateFormat
) {
this.setState({
uptime: getUptime(startTime),
startTime: formatDateTime(startTime, longDateFormat, timeFormat, { includeSeconds: true })
});
}
}
componentWillUnmount() {
if (this._timeoutId) {
this._timeoutId = clearTimeout(this._timeoutId);
}
}
//
// Listeners
onTimeout = () => {
this.setState({ uptime: getUptime(this.props.startTime) });
this._timeoutId = setTimeout(this.onTimeout, 1000);
};
//
// Render
render() {
const {
uptime,
startTime
} = this.state;
return (
<span title={startTime}>
{uptime}
</span>
);
}
}
StartTime.propTypes = {
startTime: PropTypes.string.isRequired,
timeFormat: PropTypes.string.isRequired,
longDateFormat: PropTypes.string.isRequired
};
export default StartTime;

44
frontend/src/System/Status/About/StartTime.tsx Normal file
View File

@ -0,0 +1,44 @@
import moment from 'moment';
import React, { useEffect, useMemo, useState } from 'react';
import { useSelector } from 'react-redux';
import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
import formatDateTime from 'Utilities/Date/formatDateTime';
import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
interface StartTimeProps {
startTime: string;
}
function StartTime(props: StartTimeProps) {
const { startTime } = props;
const { timeFormat, longDateFormat } = useSelector(
createUISettingsSelector()
);
const [time, setTime] = useState(Date.now());
const { formattedStartTime, uptime } = useMemo(() => {
return {
uptime: formatTimeSpan(moment(time).diff(startTime)),
formattedStartTime: formatDateTime(
startTime,
longDateFormat,
timeFormat,
{
includeSeconds: true,
}
),
};
}, [startTime, time, longDateFormat, timeFormat]);
useEffect(() => {
const interval = setInterval(() => setTime(Date.now()), 1000);
return () => {
clearInterval(interval);
};
}, [setTime]);
return <span title={formattedStartTime}>{uptime}</span>;
}
export default StartTime;

121
frontend/src/System/Status/DiskSpace/DiskSpace.js
View File

@ -1,121 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import FieldSet from 'Components/FieldSet';
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import ProgressBar from 'Components/ProgressBar';
import TableRowCell from 'Components/Table/Cells/TableRowCell';
import Table from 'Components/Table/Table';
import TableBody from 'Components/Table/TableBody';
import TableRow from 'Components/Table/TableRow';
import { kinds, sizes } from 'Helpers/Props';
import formatBytes from 'Utilities/Number/formatBytes';
import translate from 'Utilities/String/translate';
import styles from './DiskSpace.css';
const columns = [
{
name: 'path',
label: () => translate('Location'),
isVisible: true
},
{
name: 'freeSpace',
label: () => translate('FreeSpace'),
isVisible: true
},
{
name: 'totalSpace',
label: () => translate('TotalSpace'),
isVisible: true
},
{
name: 'progress',
isVisible: true
}
];
class DiskSpace extends Component {
//
// Render
render() {
const {
isFetching,
items
} = this.props;
return (
<FieldSet legend={translate('DiskSpace')}>
{
isFetching &&
<LoadingIndicator />
}
{
!isFetching &&
<Table
columns={columns}
>
<TableBody>
{
items.map((item) => {
const {
freeSpace,
totalSpace
} = item;
const diskUsage = (100 - freeSpace / totalSpace * 100);
let diskUsageKind = kinds.PRIMARY;
if (diskUsage > 90) {
diskUsageKind = kinds.DANGER;
} else if (diskUsage > 80) {
diskUsageKind = kinds.WARNING;
}
return (
<TableRow key={item.path}>
<TableRowCell>
{item.path}
{
item.label &&
` (${item.label})`
}
</TableRowCell>
<TableRowCell className={styles.space}>
{formatBytes(freeSpace)}
</TableRowCell>
<TableRowCell className={styles.space}>
{formatBytes(totalSpace)}
</TableRowCell>
<TableRowCell className={styles.space}>
<ProgressBar
progress={diskUsage}
kind={diskUsageKind}
size={sizes.MEDIUM}
/>
</TableRowCell>
</TableRow>
);
})
}
</TableBody>
</Table>
}
</FieldSet>
);
}
}
DiskSpace.propTypes = {
isFetching: PropTypes.bool.isRequired,
items: PropTypes.array.isRequired
};
export default DiskSpace;

111
frontend/src/System/Status/DiskSpace/DiskSpace.tsx Normal file
View File

@ -0,0 +1,111 @@
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { createSelector } from 'reselect';
import AppState from 'App/State/AppState';
import FieldSet from 'Components/FieldSet';
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import ProgressBar from 'Components/ProgressBar';
import TableRowCell from 'Components/Table/Cells/TableRowCell';
import Column from 'Components/Table/Column';
import Table from 'Components/Table/Table';
import TableBody from 'Components/Table/TableBody';
import TableRow from 'Components/Table/TableRow';
import { kinds, sizes } from 'Helpers/Props';
import { fetchDiskSpace } from 'Store/Actions/systemActions';
import formatBytes from 'Utilities/Number/formatBytes';
import translate from 'Utilities/String/translate';
import styles from './DiskSpace.css';
const columns: Column[] = [
{
name: 'path',
label: () => translate('Location'),
isVisible: true,
},
{
name: 'freeSpace',
label: () => translate('FreeSpace'),
isVisible: true,
},
{
name: 'totalSpace',
label: () => translate('TotalSpace'),
isVisible: true,
},
{
name: 'progress',
label: '',
isVisible: true,
},
];
function createDiskSpaceSelector() {
return createSelector(
(state: AppState) => state.system.diskSpace,
(diskSpace) => {
return diskSpace;
}
);
}
function DiskSpace() {
const dispatch = useDispatch();
const { isFetching, items } = useSelector(createDiskSpaceSelector());
useEffect(() => {
dispatch(fetchDiskSpace());
}, [dispatch]);
return (
<FieldSet legend={translate('DiskSpace')}>
{isFetching ? <LoadingIndicator /> : null}
{isFetching ? null : (
<Table columns={columns}>
<TableBody>
{items.map((item) => {
const { freeSpace, totalSpace } = item;
const diskUsage = 100 - (freeSpace / totalSpace) * 100;
let diskUsageKind = kinds.PRIMARY;
if (diskUsage > 90) {
diskUsageKind = kinds.DANGER;
} else if (diskUsage > 80) {
diskUsageKind = kinds.WARNING;
}
return (
<TableRow key={item.path}>
<TableRowCell>
{item.path}
{item.label && ` (${item.label})`}
</TableRowCell>
<TableRowCell className={styles.space}>
{formatBytes(freeSpace)}
</TableRowCell>
<TableRowCell className={styles.space}>
{formatBytes(totalSpace)}
</TableRowCell>
<TableRowCell className={styles.space}>
<ProgressBar
progress={diskUsage}
kind={diskUsageKind}
size={sizes.MEDIUM}
/>
</TableRowCell>
</TableRow>
);
})}
</TableBody>
</Table>
)}
</FieldSet>
);
}
export default DiskSpace;

54
frontend/src/System/Status/DiskSpace/DiskSpaceConnector.js
View File

@ -1,54 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { fetchDiskSpace } from 'Store/Actions/systemActions';
import DiskSpace from './DiskSpace';
function createMapStateToProps() {
return createSelector(
(state) => state.system.diskSpace,
(diskSpace) => {
const {
isFetching,
items
} = diskSpace;
return {
isFetching,
items
};
}
);
}
const mapDispatchToProps = {
fetchDiskSpace
};
class DiskSpaceConnector extends Component {
//
// Lifecycle
componentDidMount() {
this.props.fetchDiskSpace();
}
//
// Render
render() {
return (
<DiskSpace
{...this.props}
/>
);
}
}
DiskSpaceConnector.propTypes = {
fetchDiskSpace: PropTypes.func.isRequired
};
export default connect(createMapStateToProps, mapDispatchToProps)(DiskSpaceConnector);

242
frontend/src/System/Status/Health/Health.js
View File

@ -1,242 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import Alert from 'Components/Alert';
import FieldSet from 'Components/FieldSet';
import Icon from 'Components/Icon';
import IconButton from 'Components/Link/IconButton';
import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
import TableRowCell from 'Components/Table/Cells/TableRowCell';
import Table from 'Components/Table/Table';
import TableBody from 'Components/Table/TableBody';
import TableRow from 'Components/Table/TableRow';
import { icons, kinds } from 'Helpers/Props';
import titleCase from 'Utilities/String/titleCase';
import translate from 'Utilities/String/translate';
import styles from './Health.css';
function getInternalLink(source) {
switch (source) {
case 'IndexerRssCheck':
case 'IndexerSearchCheck':
case 'IndexerStatusCheck':
case 'IndexerJackettAllCheck':
case 'IndexerLongTermStatusCheck':
return (
<IconButton
name={icons.SETTINGS}
title={translate('Settings')}
to="/settings/indexers"
/>
);
case 'DownloadClientCheck':
case 'DownloadClientStatusCheck':
case 'ImportMechanismCheck':
return (
<IconButton
name={icons.SETTINGS}
title={translate('Settings')}
to="/settings/downloadclients"
/>
);
case 'NotificationStatusCheck':
return (
<IconButton
name={icons.SETTINGS}
title={translate('Settings')}
to="/settings/connect"
/>
);
case 'RootFolderCheck':
return (
<IconButton
name={icons.SERIES_CONTINUING}
title={translate('SeriesEditor')}
to="/serieseditor"
/>
);
case 'UpdateCheck':
return (
<IconButton
name={icons.UPDATE}
title={translate('Updates')}
to="/system/updates"
/>
);
default:
return;
}
}
function getTestLink(source, props) {
switch (source) {
case 'IndexerStatusCheck':
case 'IndexerLongTermStatusCheck':
return (
<SpinnerIconButton
name={icons.TEST}
title={translate('TestAll')}
isSpinning={props.isTestingAllIndexers}
onPress={props.dispatchTestAllIndexers}
/>
);
case 'DownloadClientCheck':
case 'DownloadClientStatusCheck':
return (
<SpinnerIconButton
name={icons.TEST}
title={translate('TestAll')}
isSpinning={props.isTestingAllDownloadClients}
onPress={props.dispatchTestAllDownloadClients}
/>
);
default:
break;
}
}
const columns = [
{
className: styles.status,
name: 'type',
isVisible: true
},
{
name: 'message',
label: () => translate('Message'),
isVisible: true
},
{
name: 'actions',
label: () => translate('Actions'),
isVisible: true
}
];
class Health extends Component {
//
// Render
render() {
const {
isFetching,
isPopulated,
items
} = this.props;
const healthIssues = !!items.length;
return (
<FieldSet
legend={
<div className={styles.legend}>
{translate('Health')}
{
isFetching && isPopulated &&
<LoadingIndicator
className={styles.loading}
size={20}
/>
}
</div>
}
>
{
isFetching && !isPopulated &&
<LoadingIndicator />
}
{
!healthIssues &&
<div className={styles.healthOk}>
{translate('NoIssuesWithYourConfiguration')}
</div>
}
{
healthIssues &&
<Table
columns={columns}
>
<TableBody>
{
items.map((item) => {
const internalLink = getInternalLink(item.source);
const testLink = getTestLink(item.source, this.props);
let kind = kinds.WARNING;
switch (item.type.toLowerCase()) {
case 'error':
kind = kinds.DANGER;
break;
default:
case 'warning':
kind = kinds.WARNING;
break;
case 'notice':
kind = kinds.INFO;
break;
}
return (
<TableRow key={`health${item.message}`}>
<TableRowCell>
<Icon
name={icons.DANGER}
kind={kind}
title={titleCase(item.type)}
/>
</TableRowCell>
<TableRowCell>{item.message}</TableRowCell>
<TableRowCell>
<IconButton
name={icons.WIKI}
to={item.wikiUrl}
title={translate('ReadTheWikiForMoreInformation')}
/>
{
internalLink
}
{
!!testLink &&
testLink
}
</TableRowCell>
</TableRow>
);
})
}
</TableBody>
</Table>
}
{
healthIssues &&
<Alert kind={kinds.INFO}>
<InlineMarkdown data={translate('HealthMessagesInfoBox', { link: '/system/logs/files' })} />
</Alert>
}
</FieldSet>
);
}
}
Health.propTypes = {
isFetching: PropTypes.bool.isRequired,
isPopulated: PropTypes.bool.isRequired,
items: PropTypes.array.isRequired,
isTestingAllDownloadClients: PropTypes.bool.isRequired,
isTestingAllIndexers: PropTypes.bool.isRequired,
dispatchTestAllDownloadClients: PropTypes.func.isRequired,
dispatchTestAllIndexers: PropTypes.func.isRequired
};
export default Health;

174
frontend/src/System/Status/Health/Health.tsx Normal file
View File

@ -0,0 +1,174 @@
import React, { useCallback, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import AppState from 'App/State/AppState';
import Alert from 'Components/Alert';
import FieldSet from 'Components/FieldSet';
import Icon from 'Components/Icon';
import IconButton from 'Components/Link/IconButton';
import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
import TableRowCell from 'Components/Table/Cells/TableRowCell';
import Column from 'Components/Table/Column';
import Table from 'Components/Table/Table';
import TableBody from 'Components/Table/TableBody';
import TableRow from 'Components/Table/TableRow';
import { icons, kinds } from 'Helpers/Props';
import {
testAllDownloadClients,
testAllIndexers,
} from 'Store/Actions/settingsActions';
import { fetchHealth } from 'Store/Actions/systemActions';
import titleCase from 'Utilities/String/titleCase';
import translate from 'Utilities/String/translate';
import createHealthSelector from './createHealthSelector';
import HealthItemLink from './HealthItemLink';
import styles from './Health.css';
const columns: Column[] = [
{
className: styles.status,
name: 'type',
label: '',
isVisible: true,
},
{
name: 'message',
label: () => translate('Message'),
isVisible: true,
},
{
name: 'actions',
label: () => translate('Actions'),
isVisible: true,
},
];
function Health() {
const dispatch = useDispatch();
const { isFetching, isPopulated, items } = useSelector(
createHealthSelector()
);
const isTestingAllDownloadClients = useSelector(
(state: AppState) => state.settings.downloadClients.isTestingAll
);
const isTestingAllIndexers = useSelector(
(state: AppState) => state.settings.indexers.isTestingAll
);
const healthIssues = !!items.length;
const handleTestAllDownloadClientsPress = useCallback(() => {
dispatch(testAllDownloadClients());
}, [dispatch]);
const handleTestAllIndexersPress = useCallback(() => {
dispatch(testAllIndexers());
}, [dispatch]);
useEffect(() => {
dispatch(fetchHealth());
}, [dispatch]);
return (
<FieldSet
legend={
<div className={styles.legend}>
{translate('Health')}
{isFetching && isPopulated ? (
<LoadingIndicator className={styles.loading} size={20} />
) : null}
</div>
}
>
{isFetching && !isPopulated ? <LoadingIndicator /> : null}
{isPopulated && !healthIssues ? (
<div className={styles.healthOk}>
{translate('NoIssuesWithYourConfiguration')}
</div>
) : null}
{healthIssues ? (
<>
<Table columns={columns}>
<TableBody>
{items.map((item) => {
const source = item.source;
let kind = kinds.WARNING;
switch (item.type.toLowerCase()) {
case 'error':
kind = kinds.DANGER;
break;
default:
case 'warning':
kind = kinds.WARNING;
break;
case 'notice':
kind = kinds.INFO;
break;
}
return (
<TableRow key={`health${item.message}`}>
<TableRowCell>
<Icon
name={icons.DANGER}
kind={kind}
title={titleCase(item.type)}
/>
</TableRowCell>
<TableRowCell>{item.message}</TableRowCell>
<TableRowCell>
<IconButton
name={icons.WIKI}
to={item.wikiUrl}
title={translate('ReadTheWikiForMoreInformation')}
/>
<HealthItemLink source={source} />
{source === 'IndexerStatusCheck' ||
source === 'IndexerLongTermStatusCheck' ? (
<SpinnerIconButton
name={icons.TEST}
title={translate('TestAll')}
isSpinning={isTestingAllIndexers}
onPress={handleTestAllIndexersPress}
/>
) : null}
{source === 'DownloadClientCheck' ||
source === 'DownloadClientStatusCheck' ? (
<SpinnerIconButton
name={icons.TEST}
title={translate('TestAll')}
isSpinning={isTestingAllDownloadClients}
onPress={handleTestAllDownloadClientsPress}
/>
) : null}
</TableRowCell>
</TableRow>
);
})}
</TableBody>
</Table>
<Alert kind={kinds.INFO}>
<InlineMarkdown
data={translate('HealthMessagesInfoBox', {
link: '/system/logs/files',
})}
/>
</Alert>
</>
) : null}
</FieldSet>
);
}
export default Health;

68
frontend/src/System/Status/Health/HealthConnector.js
View File

@ -1,68 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { testAllDownloadClients, testAllIndexers } from 'Store/Actions/settingsActions';
import { fetchHealth } from 'Store/Actions/systemActions';
import Health from './Health';
function createMapStateToProps() {
return createSelector(
(state) => state.system.health,
(state) => state.settings.downloadClients.isTestingAll,
(state) => state.settings.indexers.isTestingAll,
(health, isTestingAllDownloadClients, isTestingAllIndexers) => {
const {
isFetching,
isPopulated,
items
} = health;
return {
isFetching,
isPopulated,
items,
isTestingAllDownloadClients,
isTestingAllIndexers
};
}
);
}
const mapDispatchToProps = {
dispatchFetchHealth: fetchHealth,
dispatchTestAllDownloadClients: testAllDownloadClients,
dispatchTestAllIndexers: testAllIndexers
};
class HealthConnector extends Component {
//
// Lifecycle
componentDidMount() {
this.props.dispatchFetchHealth();
}
//
// Render
render() {
const {
dispatchFetchHealth,
...otherProps
} = this.props;
return (
<Health
{...otherProps}
/>
);
}
}
HealthConnector.propTypes = {
dispatchFetchHealth: PropTypes.func.isRequired
};
export default connect(createMapStateToProps, mapDispatchToProps)(HealthConnector);

65
frontend/src/System/Status/Health/HealthItemLink.tsx Normal file
View File

@ -0,0 +1,65 @@
import React from 'react';
import IconButton from 'Components/Link/IconButton';
import { icons } from 'Helpers/Props';
import translate from 'Utilities/String/translate';
interface HealthItemLinkProps {
source: string;
}
function HealthItemLink(props: HealthItemLinkProps) {
const { source } = props;
switch (source) {
case 'IndexerRssCheck':
case 'IndexerSearchCheck':
case 'IndexerStatusCheck':
case 'IndexerJackettAllCheck':
case 'IndexerLongTermStatusCheck':
return (
<IconButton
name={icons.SETTINGS}
title={translate('Settings')}
to="/settings/indexers"
/>
);
case 'DownloadClientCheck':
case 'DownloadClientStatusCheck':
case 'ImportMechanismCheck':
return (
<IconButton
name={icons.SETTINGS}
title={translate('Settings')}
to="/settings/downloadclients"
/>
);
case 'NotificationStatusCheck':
return (
<IconButton
name={icons.SETTINGS}
title={translate('Settings')}
to="/settings/connect"
/>
);
case 'RootFolderCheck':
return (
<IconButton
name={icons.SERIES_CONTINUING}
title={translate('SeriesEditor')}
to="/serieseditor"
/>
);
case 'UpdateCheck':
return (
<IconButton
name={icons.UPDATE}
title={translate('Updates')}
to="/system/updates"
/>
);
default:
return null;
}
}
export default HealthItemLink;

56
frontend/src/System/Status/Health/HealthStatus.tsx Normal file
View File

@ -0,0 +1,56 @@
import React, { useEffect, useMemo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import AppState from 'App/State/AppState';
import PageSidebarStatus from 'Components/Page/Sidebar/PageSidebarStatus';
import usePrevious from 'Helpers/Hooks/usePrevious';
import { fetchHealth } from 'Store/Actions/systemActions';
import createHealthSelector from './createHealthSelector';
function HealthStatus() {
const dispatch = useDispatch();
const { isConnected, isReconnecting } = useSelector(
(state: AppState) => state.app
);
const { isPopulated, items } = useSelector(createHealthSelector());
const wasReconnecting = usePrevious(isReconnecting);
const { count, errors, warnings } = useMemo(() => {
let errors = false;
let warnings = false;
items.forEach((item) => {
if (item.type === 'error') {
errors = true;
}
if (item.type === 'warning') {
warnings = true;
}
});
return {
count: items.length,
errors,
warnings,
};
}, [items]);
useEffect(() => {
if (!isPopulated) {
dispatch(fetchHealth());
}
}, [isPopulated, dispatch]);
useEffect(() => {
if (isConnected && wasReconnecting) {
dispatch(fetchHealth());
}
}, [isConnected, wasReconnecting, dispatch]);
return (
<PageSidebarStatus count={count} errors={errors} warnings={warnings} />
);
}
export default HealthStatus;

79
frontend/src/System/Status/Health/HealthStatusConnector.js
View File

@ -1,79 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import PageSidebarStatus from 'Components/Page/Sidebar/PageSidebarStatus';
import { fetchHealth } from 'Store/Actions/systemActions';
function createMapStateToProps() {
return createSelector(
(state) => state.app,
(state) => state.system.health,
(app, health) => {
const count = health.items.length;
let errors = false;
let warnings = false;
health.items.forEach((item) => {
if (item.type === 'error') {
errors = true;
}
if (item.type === 'warning') {
warnings = true;
}
});
return {
isConnected: app.isConnected,
isReconnecting: app.isReconnecting,
isPopulated: health.isPopulated,
count,
errors,
warnings
};
}
);
}
const mapDispatchToProps = {
fetchHealth
};
class HealthStatusConnector extends Component {
//
// Lifecycle
componentDidMount() {
if (!this.props.isPopulated) {
this.props.fetchHealth();
}
}
componentDidUpdate(prevProps) {
if (this.props.isConnected && prevProps.isReconnecting) {
this.props.fetchHealth();
}
}
//
// Render
render() {
return (
<PageSidebarStatus
{...this.props}
/>
);
}
}
HealthStatusConnector.propTypes = {
isConnected: PropTypes.bool.isRequired,
isReconnecting: PropTypes.bool.isRequired,
isPopulated: PropTypes.bool.isRequired,
fetchHealth: PropTypes.func.isRequired
};
export default connect(createMapStateToProps, mapDispatchToProps)(HealthStatusConnector);

13
frontend/src/System/Status/Health/createHealthSelector.ts Normal file
View File

@ -0,0 +1,13 @@
import { createSelector } from 'reselect';
import AppState from 'App/State/AppState';
function createHealthSelector() {
return createSelector(
(state: AppState) => state.system.health,
(health) => {
return health;
}
);
}
export default createHealthSelector;

101
frontend/src/System/Status/MoreInfo/MoreInfo.js
View File

@ -1,101 +0,0 @@
import React, { Component } from 'react';
import DescriptionList from 'Components/DescriptionList/DescriptionList';
import DescriptionListItemDescription from 'Components/DescriptionList/DescriptionListItemDescription';
import DescriptionListItemTitle from 'Components/DescriptionList/DescriptionListItemTitle';
import FieldSet from 'Components/FieldSet';
import Link from 'Components/Link/Link';
import translate from 'Utilities/String/translate';
class MoreInfo extends Component {
//
// Render
render() {
return (
<FieldSet legend={translate('MoreInfo')}>
<DescriptionList>
<DescriptionListItemTitle>
{translate('HomePage')}
</DescriptionListItemTitle>
<DescriptionListItemDescription>
<Link to="https://sonarr.tv/">sonarr.tv</Link>
</DescriptionListItemDescription>
<DescriptionListItemTitle>
{translate('Wiki')}
</DescriptionListItemTitle>
<DescriptionListItemDescription>
<Link to="https://wiki.servarr.com/sonarr">wiki.servarr.com/sonarr</Link>
</DescriptionListItemDescription>
<DescriptionListItemTitle>
{translate('Forums')}
</DescriptionListItemTitle>
<DescriptionListItemDescription>
<Link to="https://forums.sonarr.tv/">forums.sonarr.tv</Link>
</DescriptionListItemDescription>
<DescriptionListItemTitle>
{translate('Twitter')}
</DescriptionListItemTitle>
<DescriptionListItemDescription>
<Link to="https://twitter.com/sonarrtv">@sonarrtv</Link>
</DescriptionListItemDescription>
<DescriptionListItemTitle>
{translate('Discord')}
</DescriptionListItemTitle>
<DescriptionListItemDescription>
<Link to="https://discord.sonarr.tv/">discord.sonarr.tv</Link>
</DescriptionListItemDescription>
<DescriptionListItemTitle>
{translate('IRC')}
</DescriptionListItemTitle>
<DescriptionListItemDescription>
<Link to="irc://irc.libera.chat/#sonarr">
{translate('IRCLinkText')}
</Link>
</DescriptionListItemDescription>
<DescriptionListItemDescription>
<Link to="https://web.libera.chat/?channels=#sonarr">
{translate('LiberaWebchat')}
</Link>
</DescriptionListItemDescription>
<DescriptionListItemTitle>
{translate('Donations')}
</DescriptionListItemTitle>
<DescriptionListItemDescription>
<Link to="https://sonarr.tv/donate">sonarr.tv/donate</Link>
</DescriptionListItemDescription>
<DescriptionListItemTitle>
{translate('Source')}
</DescriptionListItemTitle>
<DescriptionListItemDescription>
<Link to="https://github.com/Sonarr/Sonarr/">github.com/Sonarr/Sonarr</Link>
</DescriptionListItemDescription>
<DescriptionListItemTitle>
{translate('FeatureRequests')}
</DescriptionListItemTitle>
<DescriptionListItemDescription>
<Link to="https://forums.sonarr.tv/">forums.sonarr.tv</Link>
</DescriptionListItemDescription>
<DescriptionListItemDescription>
<Link to="https://github.com/Sonarr/Sonarr/issues">github.com/Sonarr/Sonarr/issues</Link>
</DescriptionListItemDescription>
</DescriptionList>
</FieldSet>
);
}
}
MoreInfo.propTypes = {
};
export default MoreInfo;

92
frontend/src/System/Status/MoreInfo/MoreInfo.tsx Normal file
View File

@ -0,0 +1,92 @@
import React from 'react';
import DescriptionList from 'Components/DescriptionList/DescriptionList';
import DescriptionListItemDescription from 'Components/DescriptionList/DescriptionListItemDescription';
import DescriptionListItemTitle from 'Components/DescriptionList/DescriptionListItemTitle';
import FieldSet from 'Components/FieldSet';
import Link from 'Components/Link/Link';
import translate from 'Utilities/String/translate';
function MoreInfo() {
return (
<FieldSet legend={translate('MoreInfo')}>
<DescriptionList>
<DescriptionListItemTitle>
{translate('HomePage')}
</DescriptionListItemTitle>
<DescriptionListItemDescription>
<Link to="https://sonarr.tv/">sonarr.tv</Link>
</DescriptionListItemDescription>
<DescriptionListItemTitle>{translate('Wiki')}</DescriptionListItemTitle>
<DescriptionListItemDescription>
<Link to="https://wiki.servarr.com/sonarr">
wiki.servarr.com/sonarr
</Link>
</DescriptionListItemDescription>
<DescriptionListItemTitle>
{translate('Forums')}
</DescriptionListItemTitle>
<DescriptionListItemDescription>
<Link to="https://forums.sonarr.tv/">forums.sonarr.tv</Link>
</DescriptionListItemDescription>
<DescriptionListItemTitle>
{translate('Twitter')}
</DescriptionListItemTitle>
<DescriptionListItemDescription>
<Link to="https://twitter.com/sonarrtv">@sonarrtv</Link>
</DescriptionListItemDescription>
<DescriptionListItemTitle>
{translate('Discord')}
</DescriptionListItemTitle>
<DescriptionListItemDescription>
<Link to="https://discord.sonarr.tv/">discord.sonarr.tv</Link>
</DescriptionListItemDescription>
<DescriptionListItemTitle>{translate('IRC')}</DescriptionListItemTitle>
<DescriptionListItemDescription>
<Link to="irc://irc.libera.chat/#sonarr">
{translate('IRCLinkText')}
</Link>
</DescriptionListItemDescription>
<DescriptionListItemDescription>
<Link to="https://web.libera.chat/?channels=#sonarr">
{translate('LiberaWebchat')}
</Link>
</DescriptionListItemDescription>
<DescriptionListItemTitle>
{translate('Donations')}
</DescriptionListItemTitle>
<DescriptionListItemDescription>
<Link to="https://sonarr.tv/donate">sonarr.tv/donate</Link>
</DescriptionListItemDescription>
<DescriptionListItemTitle>
{translate('Source')}
</DescriptionListItemTitle>
<DescriptionListItemDescription>
<Link to="https://github.com/Sonarr/Sonarr/">
github.com/Sonarr/Sonarr
</Link>
</DescriptionListItemDescription>
<DescriptionListItemTitle>
{translate('FeatureRequests')}
</DescriptionListItemTitle>
<DescriptionListItemDescription>
<Link to="https://forums.sonarr.tv/">forums.sonarr.tv</Link>
</DescriptionListItemDescription>
<DescriptionListItemDescription>
<Link to="https://github.com/Sonarr/Sonarr/issues">
github.com/Sonarr/Sonarr/issues
</Link>
</DescriptionListItemDescription>
</DescriptionList>
</FieldSet>
);
}
export default MoreInfo;

14
frontend/src/System/Status/Status.js → frontend/src/System/Status/Status.tsx
View File

@ -2,13 +2,12 @@ import React, { Component } from 'react';
import PageContent from 'Components/Page/PageContent';
import PageContentBody from 'Components/Page/PageContentBody';
import translate from 'Utilities/String/translate';
import AboutConnector from './About/AboutConnector';
import DiskSpaceConnector from './DiskSpace/DiskSpaceConnector';
import HealthConnector from './Health/HealthConnector';
import About from './About/About';
import DiskSpace from './DiskSpace/DiskSpace';
import Health from './Health/Health';
import MoreInfo from './MoreInfo/MoreInfo';
class Status extends Component {
//
// Render
@ -16,15 +15,14 @@ class Status extends Component {
return (
<PageContent title={translate('Status')}>
<PageContentBody>
<HealthConnector />
<DiskSpaceConnector />
<AboutConnector />
<Health />
<DiskSpace />
<About />
<MoreInfo />
</PageContentBody>
</PageContent>
);
}
}
export default Status;

203
frontend/src/System/Tasks/Scheduled/ScheduledTaskRow.js
View File

@ -1,203 +0,0 @@
import moment from 'moment';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
import TableRowCell from 'Components/Table/Cells/TableRowCell';
import TableRow from 'Components/Table/TableRow';
import { icons } from 'Helpers/Props';
import formatDate from 'Utilities/Date/formatDate';
import formatDateTime from 'Utilities/Date/formatDateTime';
import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
import styles from './ScheduledTaskRow.css';
function getFormattedDates(props) {
const {
lastExecution,
nextExecution,
interval,
showRelativeDates,
shortDateFormat
} = props;
const isDisabled = interval === 0;
if (showRelativeDates) {
return {
lastExecutionTime: moment(lastExecution).fromNow(),
nextExecutionTime: isDisabled ? '-' : moment(nextExecution).fromNow()
};
}
return {
lastExecutionTime: formatDate(lastExecution, shortDateFormat),
nextExecutionTime: isDisabled ? '-' : formatDate(nextExecution, shortDateFormat)
};
}
class ScheduledTaskRow extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this.state = getFormattedDates(props);
this._updateTimeoutId = null;
}
componentDidMount() {
this.setUpdateTimer();
}
componentDidUpdate(prevProps) {
const {
lastExecution,
nextExecution
} = this.props;
if (
lastExecution !== prevProps.lastExecution ||
nextExecution !== prevProps.nextExecution
) {
this.setState(getFormattedDates(this.props));
}
}
componentWillUnmount() {
if (this._updateTimeoutId) {
this._updateTimeoutId = clearTimeout(this._updateTimeoutId);
}
}
//
// Listeners
setUpdateTimer() {
const { interval } = this.props;
const timeout = interval < 60 ? 10000 : 60000;
this._updateTimeoutId = setTimeout(() => {
this.setState(getFormattedDates(this.props));
this.setUpdateTimer();
}, timeout);
}
//
// Render
render() {
const {
name,
interval,
lastExecution,
lastStartTime,
lastDuration,
nextExecution,
isQueued,
isExecuting,
longDateFormat,
timeFormat,
onExecutePress
} = this.props;
const {
lastExecutionTime,
nextExecutionTime
} = this.state;
const isDisabled = interval === 0;
const executeNow = !isDisabled && moment().isAfter(nextExecution);
const hasNextExecutionTime = !isDisabled && !executeNow;
const duration = moment.duration(interval, 'minutes').humanize().replace(/an?(?=\s)/, '1');
const hasLastStartTime = moment(lastStartTime).isAfter('2010-01-01');
return (
<TableRow>
<TableRowCell>{name}</TableRowCell>
<TableRowCell
className={styles.interval}
>
{isDisabled ? 'disabled' : duration}
</TableRowCell>
<TableRowCell
className={styles.lastExecution}
title={formatDateTime(lastExecution, longDateFormat, timeFormat)}
>
{lastExecutionTime}
</TableRowCell>
{
!hasLastStartTime &&
<TableRowCell className={styles.lastDuration}>-</TableRowCell>
}
{
hasLastStartTime &&
<TableRowCell
className={styles.lastDuration}
title={lastDuration}
>
{formatTimeSpan(lastDuration)}
</TableRowCell>
}
{
isDisabled &&
<TableRowCell className={styles.nextExecution}>-</TableRowCell>
}
{
executeNow && isQueued &&
<TableRowCell className={styles.nextExecution}>queued</TableRowCell>
}
{
executeNow && !isQueued &&
<TableRowCell className={styles.nextExecution}>now</TableRowCell>
}
{
hasNextExecutionTime &&
<TableRowCell
className={styles.nextExecution}
title={formatDateTime(nextExecution, longDateFormat, timeFormat, { includeSeconds: true })}
>
{nextExecutionTime}
</TableRowCell>
}
<TableRowCell
className={styles.actions}
>
<SpinnerIconButton
name={icons.REFRESH}
spinningName={icons.REFRESH}
isSpinning={isExecuting}
onPress={onExecutePress}
/>
</TableRowCell>
</TableRow>
);
}
}
ScheduledTaskRow.propTypes = {
name: PropTypes.string.isRequired,
interval: PropTypes.number.isRequired,
lastExecution: PropTypes.string.isRequired,
lastStartTime: PropTypes.string.isRequired,
lastDuration: PropTypes.string.isRequired,
nextExecution: PropTypes.string.isRequired,
isQueued: PropTypes.bool.isRequired,
isExecuting: PropTypes.bool.isRequired,
showRelativeDates: PropTypes.bool.isRequired,
shortDateFormat: PropTypes.string.isRequired,
longDateFormat: PropTypes.string.isRequired,
timeFormat: PropTypes.string.isRequired,
onExecutePress: PropTypes.func.isRequired
};
export default ScheduledTaskRow;

170
frontend/src/System/Tasks/Scheduled/ScheduledTaskRow.tsx Normal file
View File

@ -0,0 +1,170 @@
import moment from 'moment';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
import TableRowCell from 'Components/Table/Cells/TableRowCell';
import TableRow from 'Components/Table/TableRow';
import usePrevious from 'Helpers/Hooks/usePrevious';
import { icons } from 'Helpers/Props';
import { executeCommand } from 'Store/Actions/commandActions';
import { fetchTask } from 'Store/Actions/systemActions';
import createCommandSelector from 'Store/Selectors/createCommandSelector';
import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
import { isCommandExecuting } from 'Utilities/Command';
import formatDate from 'Utilities/Date/formatDate';
import formatDateTime from 'Utilities/Date/formatDateTime';
import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
import styles from './ScheduledTaskRow.css';
interface ScheduledTaskRowProps {
id: number;
taskName: string;
name: string;
interval: number;
lastExecution: string;
lastStartTime: string;
lastDuration: string;
nextExecution: string;
}
function ScheduledTaskRow(props: ScheduledTaskRowProps) {
const {
id,
taskName,
name,
interval,
lastExecution,
lastStartTime,
lastDuration,
nextExecution,
} = props;
const dispatch = useDispatch();
const { showRelativeDates, longDateFormat, shortDateFormat, timeFormat } =
useSelector(createUISettingsSelector());
const command = useSelector(createCommandSelector(taskName));
const [time, setTime] = useState(Date.now());
const isQueued = !!(command && command.status === 'queued');
const isExecuting = isCommandExecuting(command);
const wasExecuting = usePrevious(isExecuting);
const isDisabled = interval === 0;
const executeNow = !isDisabled && moment().isAfter(nextExecution);
const hasNextExecutionTime = !isDisabled && !executeNow;
const hasLastStartTime = moment(lastStartTime).isAfter('2010-01-01');
const duration = useMemo(() => {
return moment
.duration(interval, 'minutes')
.humanize()
.replace(/an?(?=\s)/, '1');
}, [interval]);
const { lastExecutionTime, nextExecutionTime } = useMemo(() => {
const isDisabled = interval === 0;
if (showRelativeDates && time) {
return {
lastExecutionTime: moment(lastExecution).fromNow(),
nextExecutionTime: isDisabled ? '-' : moment(nextExecution).fromNow(),
};
}
return {
lastExecutionTime: formatDate(lastExecution, shortDateFormat),
nextExecutionTime: isDisabled
? '-'
: formatDate(nextExecution, shortDateFormat),
};
}, [
time,
interval,
lastExecution,
nextExecution,
showRelativeDates,
shortDateFormat,
]);
const handleExecutePress = useCallback(() => {
dispatch(
executeCommand({
name: taskName,
})
);
}, [taskName, dispatch]);
useEffect(() => {
if (!isExecuting && wasExecuting) {
setTimeout(() => {
dispatch(fetchTask({ id }));
}, 1000);
}
}, [id, isExecuting, wasExecuting, dispatch]);
useEffect(() => {
const interval = setInterval(() => setTime(Date.now()), 1000);
return () => {
clearInterval(interval);
};
}, [setTime]);
return (
<TableRow>
<TableRowCell>{name}</TableRowCell>
<TableRowCell className={styles.interval}>
{isDisabled ? 'disabled' : duration}
</TableRowCell>
<TableRowCell
className={styles.lastExecution}
title={formatDateTime(lastExecution, longDateFormat, timeFormat)}
>
{lastExecutionTime}
</TableRowCell>
{hasLastStartTime ? (
<TableRowCell className={styles.lastDuration} title={lastDuration}>
{formatTimeSpan(lastDuration)}
</TableRowCell>
) : (
<TableRowCell className={styles.lastDuration}>-</TableRowCell>
)}
{isDisabled ? (
<TableRowCell className={styles.nextExecution}>-</TableRowCell>
) : null}
{executeNow && isQueued ? (
<TableRowCell className={styles.nextExecution}>queued</TableRowCell>
) : null}
{executeNow && !isQueued ? (
<TableRowCell className={styles.nextExecution}>now</TableRowCell>
) : null}
{hasNextExecutionTime ? (
<TableRowCell
className={styles.nextExecution}
title={formatDateTime(nextExecution, longDateFormat, timeFormat, {
includeSeconds: true,
})}
>
{nextExecutionTime}
</TableRowCell>
) : null}
<TableRowCell className={styles.actions}>
<SpinnerIconButton
name={icons.REFRESH}
spinningName={icons.REFRESH}
isSpinning={isExecuting}
onPress={handleExecutePress}
/>
</TableRowCell>
</TableRow>
);
}
export default ScheduledTaskRow;

92
frontend/src/System/Tasks/Scheduled/ScheduledTaskRowConnector.js
View File

@ -1,92 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { executeCommand } from 'Store/Actions/commandActions';
import { fetchTask } from 'Store/Actions/systemActions';
import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
import { findCommand, isCommandExecuting } from 'Utilities/Command';
import ScheduledTaskRow from './ScheduledTaskRow';
function createMapStateToProps() {
return createSelector(
(state, { taskName }) => taskName,
createCommandsSelector(),
createUISettingsSelector(),
(taskName, commands, uiSettings) => {
const command = findCommand(commands, { name: taskName });
return {
isQueued: !!(command && command.state === 'queued'),
isExecuting: isCommandExecuting(command),
showRelativeDates: uiSettings.showRelativeDates,
shortDateFormat: uiSettings.shortDateFormat,
longDateFormat: uiSettings.longDateFormat,
timeFormat: uiSettings.timeFormat
};
}
);
}
function createMapDispatchToProps(dispatch, props) {
const taskName = props.taskName;
return {
dispatchFetchTask() {
dispatch(fetchTask({
id: props.id
}));
},
onExecutePress() {
dispatch(executeCommand({
name: taskName
}));
}
};
}
class ScheduledTaskRowConnector extends Component {
//
// Lifecycle
componentDidUpdate(prevProps) {
const {
isExecuting,
dispatchFetchTask
} = this.props;
if (!isExecuting && prevProps.isExecuting) {
// Give the host a moment to update after the command completes
setTimeout(() => {
dispatchFetchTask();
}, 1000);
}
}
//
// Render
render() {
const {
dispatchFetchTask,
...otherProps
} = this.props;
return (
<ScheduledTaskRow
{...otherProps}
/>
);
}
}
ScheduledTaskRowConnector.propTypes = {
id: PropTypes.number.isRequired,
isExecuting: PropTypes.bool.isRequired,
dispatchFetchTask: PropTypes.func.isRequired
};
export default connect(createMapStateToProps, createMapDispatchToProps)(ScheduledTaskRowConnector);

85
frontend/src/System/Tasks/Scheduled/ScheduledTasks.js
View File

@ -1,85 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
import FieldSet from 'Components/FieldSet';
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import Table from 'Components/Table/Table';
import TableBody from 'Components/Table/TableBody';
import translate from 'Utilities/String/translate';
import ScheduledTaskRowConnector from './ScheduledTaskRowConnector';
const columns = [
{
name: 'name',
label: () => translate('Name'),
isVisible: true
},
{
name: 'interval',
label: () => translate('Interval'),
isVisible: true
},
{
name: 'lastExecution',
label: () => translate('LastExecution'),
isVisible: true
},
{
name: 'lastDuration',
label: () => translate('LastDuration'),
isVisible: true
},
{
name: 'nextExecution',
label: () => translate('NextExecution'),
isVisible: true
},
{
name: 'actions',
isVisible: true
}
];
function ScheduledTasks(props) {
const {
isFetching,
isPopulated,
items
} = props;
return (
<FieldSet legend={translate('Scheduled')}>
{
isFetching && !isPopulated &&
<LoadingIndicator />
}
{
isPopulated &&
<Table
columns={columns}
>
<TableBody>
{
items.map((item) => {
return (
<ScheduledTaskRowConnector
key={item.id}
{...item}
/>
);
})
}
</TableBody>
</Table>
}
</FieldSet>
);
}
ScheduledTasks.propTypes = {
isFetching: PropTypes.bool.isRequired,
isPopulated: PropTypes.bool.isRequired,
items: PropTypes.array.isRequired
};
export default ScheduledTasks;

73
frontend/src/System/Tasks/Scheduled/ScheduledTasks.tsx Normal file
View File

@ -0,0 +1,73 @@
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import AppState from 'App/State/AppState';
import FieldSet from 'Components/FieldSet';
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import Column from 'Components/Table/Column';
import Table from 'Components/Table/Table';
import TableBody from 'Components/Table/TableBody';
import { fetchTasks } from 'Store/Actions/systemActions';
import translate from 'Utilities/String/translate';
import ScheduledTaskRow from './ScheduledTaskRow';
const columns: Column[] = [
{
name: 'name',
label: () => translate('Name'),
isVisible: true,
},
{
name: 'interval',
label: () => translate('Interval'),
isVisible: true,
},
{
name: 'lastExecution',
label: () => translate('LastExecution'),
isVisible: true,
},
{
name: 'lastDuration',
label: () => translate('LastDuration'),
isVisible: true,
},
{
name: 'nextExecution',
label: () => translate('NextExecution'),
isVisible: true,
},
{
name: 'actions',
label: '',
isVisible: true,
},
];
function ScheduledTasks() {
const dispatch = useDispatch();
const { isFetching, isPopulated, items } = useSelector(
(state: AppState) => state.system.tasks
);
useEffect(() => {
dispatch(fetchTasks());
}, [dispatch]);
return (
<FieldSet legend={translate('Scheduled')}>
{isFetching && !isPopulated && <LoadingIndicator />}
{isPopulated && (
<Table columns={columns}>
<TableBody>
{items.map((item) => {
return <ScheduledTaskRow key={item.id} {...item} />;
})}
</TableBody>
</Table>
)}
</FieldSet>
);
}
export default ScheduledTasks;

46
frontend/src/System/Tasks/Scheduled/ScheduledTasksConnector.js
View File

@ -1,46 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { fetchTasks } from 'Store/Actions/systemActions';
import ScheduledTasks from './ScheduledTasks';
function createMapStateToProps() {
return createSelector(
(state) => state.system.tasks,
(tasks) => {
return tasks;
}
);
}
const mapDispatchToProps = {
dispatchFetchTasks: fetchTasks
};
class ScheduledTasksConnector extends Component {
//
// Lifecycle
componentDidMount() {
this.props.dispatchFetchTasks();
}
//
// Render
render() {
return (
<ScheduledTasks
{...this.props}
/>
);
}
}
ScheduledTasksConnector.propTypes = {
dispatchFetchTasks: PropTypes.func.isRequired
};
export default connect(createMapStateToProps, mapDispatchToProps)(ScheduledTasksConnector);

4
frontend/src/System/Tasks/Tasks.js → frontend/src/System/Tasks/Tasks.tsx
View File

@ -3,13 +3,13 @@ import PageContent from 'Components/Page/PageContent';
import PageContentBody from 'Components/Page/PageContentBody';
import translate from 'Utilities/String/translate';
import QueuedTasks from './Queued/QueuedTasks';
import ScheduledTasksConnector from './Scheduled/ScheduledTasksConnector';
import ScheduledTasks from './Scheduled/ScheduledTasks';
function Tasks() {
return (
<PageContent title={translate('Tasks')}>
<PageContentBody>
<ScheduledTasksConnector />
<ScheduledTasks />
<QueuedTasks />
</PageContentBody>
</PageContent>

8
frontend/src/typings/DiskSpace.ts Normal file
View File

@ -0,0 +1,8 @@
interface DiskSpace {
path: string;
label: string;
freeSpace: number;
totalSpace: number;
}
export default DiskSpace;

8
frontend/src/typings/Health.ts Normal file
View File

@ -0,0 +1,8 @@
interface Health {
source: string;
type: string;
message: string;
wikiUrl: string;
}
export default Health;

4
frontend/src/typings/SystemStatus.ts
View File

@ -4,6 +4,8 @@ interface SystemStatus {
authentication: string;
branch: string;
buildTime: string;
databaseVersion: string;
databaseType: string;
instanceName: string;
isAdmin: boolean;
isDebug: boolean;
@ -18,8 +20,10 @@ interface SystemStatus {
mode: string;
osName: string;
osVersion: string;
packageAuthor: string;
packageUpdateMechanism: string;
packageUpdateMechanismMessage: string;
packageVersion: string;
runtimeName: string;
runtimeVersion: string;
sqliteVersion: string;

13
frontend/src/typings/Task.ts Normal file
View File

@ -0,0 +1,13 @@
import ModelBase from 'App/ModelBase';
interface Task extends ModelBase {
name: string;
taskName: string;
interval: number;
lastExecution: string;
lastStartTime: string;
nextExecution: string;
lastDuration: string;
}
export default Task;