tedkulp/Prowlarr
1
0
Fork 0
mirror of https://github.com/Prowlarr/Prowlarr.git synced 2026-03-05 13:40:08 -05:00
Code Issues Packages Projects Releases Wiki Activity

Convert System to TypeScript

Browse Source 
(cherry picked from commit 72db8099e0f4abc3176e397f8dda3b2b69026daf)
This commit is contained in:
Mark McDowall
2024-07-26 23:16:03 -07:00
committed by Bogdan
parent c3cf8a6ebb
commit ef19673a76
64 changed files with 936 additions and 1317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/App/State/IndexerAppState.ts
View File

@@ -31,6 +31,8 @@ interface IndexerAppState
AppSectionDeleteState,
AppSectionSaveState {
itemMap: Record<number, number>;
isTestingAll: boolean;
}
export type IndexerStatusAppState = AppSectionState<IndexerStatus>;

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

@@ -24,7 +24,9 @@ export interface ApplicationAppState
export interface DownloadClientAppState
extends AppSectionState<DownloadClient>,
AppSectionDeleteState,
AppSectionSaveState {}
AppSectionSaveState {
isTestingAll: boolean;
}
export interface IndexerCategoryAppState
extends AppSectionState<IndexerCategory>,

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

@@ -1,12 +1,18 @@
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 HealthAppState = AppSectionState<Health>;
export type SystemStatusAppState = AppSectionItemState<SystemStatus>;
export type TaskAppState = AppSectionState<Task>;
export type UpdateAppState = AppSectionState<Update>;
interface SystemAppState {
health: HealthAppState;
status: SystemStatusAppState;
tasks: TaskAppState;
updates: UpdateAppState;
}

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

@@ -8,7 +8,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';
@@ -87,7 +87,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;

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

@@ -1,128 +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 ? <span> {packageVersion} {' by '} <InlineMarkdown data={packageAuthor} /> </span> : packageVersion)}
/>
}
{
isNetCore &&
<DescriptionListItem
title={translate('NetCore')}
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;

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

@@ -0,0 +1,102 @@
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 ? (
<span>
{' '}
{packageVersion} {' by '}{' '}
<InlineMarkdown data={packageAuthor} />{' '}
</span>
) : (
packageVersion
)
}
/>
)}
{isNetCore && (
<DescriptionListItem
title={translate('NetCore')}
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} />}
/>
</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;

64
frontend/src/System/Status/Donations/Donations.js
View File

@@ -1,64 +0,0 @@
import React, { Component } from 'react';
import FieldSet from 'Components/FieldSet';
import Link from 'Components/Link/Link';
import translate from 'Utilities/String/translate';
import styles from '../styles.css';
class Donations extends Component {
//
// Render
render() {
return (
<FieldSet legend={translate('Donations')}>
<div className={styles.logoContainer} title="Radarr">
<Link to="https://radarr.video/donate">
<img
className={styles.logo}
src={`${window.Prowlarr.urlBase}/Content/Images/Icons/logo-radarr.png`}
/>
</Link>
</div>
<div className={styles.logoContainer} title="Lidarr">
<Link to="https://lidarr.audio/donate">
<img
className={styles.logo}
src={`${window.Prowlarr.urlBase}/Content/Images/Icons/logo-lidarr.png`}
/>
</Link>
</div>
<div className={styles.logoContainer} title="Readarr">
<Link to="https://readarr.com/donate">
<img
className={styles.logo}
src={`${window.Prowlarr.urlBase}/Content/Images/Icons/logo-readarr.png`}
/>
</Link>
</div>
<div className={styles.logoContainer} title="Prowlarr">
<Link to="https://prowlarr.com/donate">
<img
className={styles.logo}
src={`${window.Prowlarr.urlBase}/Content/Images/Icons/logo-prowlarr.png`}
/>
</Link>
</div>
<div className={styles.logoContainer} title="Sonarr">
<Link to="https://opencollective.com/sonarr">
<img
className={styles.logo}
src={`${window.Prowlarr.urlBase}/Content/Images/Icons/logo-sonarr.png`}
/>
</Link>
</div>
</FieldSet>
);
}
}
Donations.propTypes = {
};
export default Donations;

58
frontend/src/System/Status/Donations/Donations.tsx Normal file
View File

@@ -0,0 +1,58 @@
import React from 'react';
import FieldSet from 'Components/FieldSet';
import Link from 'Components/Link/Link';
import translate from 'Utilities/String/translate';
import styles from '../styles.css';
function Donations() {
return (
<FieldSet legend={translate('Donations')}>
<div className={styles.logoContainer} title="Radarr">
<Link to="https://radarr.video/donate">
<img
className={styles.logo}
src={`${window.Prowlarr.urlBase}/Content/Images/Icons/logo-radarr.png`}
/>
</Link>
</div>
<div className={styles.logoContainer} title="Lidarr">
<Link to="https://lidarr.audio/donate">
<img
className={styles.logo}
src={`${window.Prowlarr.urlBase}/Content/Images/Icons/logo-lidarr.png`}
/>
</Link>
</div>
<div className={styles.logoContainer} title="Readarr">
<Link to="https://readarr.com/donate">
<img
className={styles.logo}
src={`${window.Prowlarr.urlBase}/Content/Images/Icons/logo-readarr.png`}
/>
</Link>
</div>
<div className={styles.logoContainer} title="Prowlarr">
<Link to="https://prowlarr.com/donate">
<img
className={styles.logo}
src={`${window.Prowlarr.urlBase}/Content/Images/Icons/logo-prowlarr.png`}
/>
</Link>
</div>
<div className={styles.logoContainer} title="Sonarr">
<Link to="https://opencollective.com/sonarr">
<img
className={styles.logo}
src={`${window.Prowlarr.urlBase}/Content/Images/Icons/logo-sonarr.png`}
/>
</Link>
</div>
</FieldSet>
);
}
export default Donations;

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

@@ -1,250 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
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 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 'ApplicationStatusCheck':
case 'ApplicationLongTermStatusCheck':
return (
<IconButton
name={icons.SETTINGS}
title={translate('Settings')}
to="/settings/applications"
/>
);
case 'DownloadClientStatusCheck':
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 'IndexerProxyStatusCheck':
return (
<IconButton
name={icons.SETTINGS}
title={translate('Settings')}
to="/settings/indexers"
/>
);
case 'IndexerRssCheck':
case 'IndexerSearchCheck':
case 'IndexerStatusCheck':
case 'IndexerLongTermStatusCheck':
return (
<IconButton
name={icons.SETTINGS}
title={translate('Settings')}
to="/"
/>
);
case 'UpdateCheck':
return (
<IconButton
name={icons.UPDATE}
title={translate('Updates')}
to="/system/updates"
/>
);
default:
return;
}
}
function getTestLink(source, props) {
switch (source) {
case 'ApplicationStatusCheck':
case 'ApplicationLongTermStatusCheck':
return (
<SpinnerIconButton
name={icons.TEST}
title={translate('TestAll')}
isSpinning={props.isTestingAllApplications}
onPress={props.dispatchTestAllApplications}
/>
);
case 'DownloadClientStatusCheck':
return (
<SpinnerIconButton
name={icons.TEST}
title={translate('TestAll')}
isSpinning={props.isTestingAllDownloadClients}
onPress={props.dispatchTestAllDownloadClients}
/>
);
case 'IndexerStatusCheck':
case 'IndexerLongTermStatusCheck':
return (
<SpinnerIconButton
name={icons.TEST}
title={translate('TestAll')}
isSpinning={props.isTestingAllIndexers}
onPress={props.dispatchTestAllIndexers}
/>
);
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('HealthNoIssues')}
</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 className={styles.actions}>
<IconButton
name={icons.WIKI}
to={item.wikiUrl}
title={translate('ReadTheWikiForMoreInformation')}
/>
{
internalLink
}
{
!!testLink &&
testLink
}
</TableRowCell>
</TableRow>
);
})
}
</TableBody>
</Table>
}
</FieldSet>
);
}
}
Health.propTypes = {
isFetching: PropTypes.bool.isRequired,
isPopulated: PropTypes.bool.isRequired,
items: PropTypes.array.isRequired,
isTestingAllApplications: PropTypes.bool.isRequired,
isTestingAllDownloadClients: PropTypes.bool.isRequired,
isTestingAllIndexers: PropTypes.bool.isRequired,
dispatchTestAllApplications: PropTypes.func.isRequired,
dispatchTestAllDownloadClients: PropTypes.func.isRequired,
dispatchTestAllIndexers: PropTypes.func.isRequired
};
export default Health;

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

@@ -0,0 +1,191 @@
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 { testAllIndexers } from 'Store/Actions/indexerActions';
import {
testAllApplications,
testAllDownloadClients,
} 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 isTestingAllApplications = useSelector(
(state: AppState) => state.settings.applications.isTestingAll
);
const isTestingAllDownloadClients = useSelector(
(state: AppState) => state.settings.downloadClients.isTestingAll
);
const isTestingAllIndexers = useSelector(
(state: AppState) => state.indexers.isTestingAll
);
const healthIssues = !!items.length;
const handleTestAllApplicationsPress = useCallback(() => {
dispatch(testAllApplications());
}, [dispatch]);
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 === 'ApplicationStatusCheck' ||
source === 'ApplicationLongTermStatusCheck' ? (
<SpinnerIconButton
name={icons.TEST}
title={translate('TestAll')}
isSpinning={isTestingAllApplications}
onPress={handleTestAllApplicationsPress}
/>
) : null}
{source === 'IndexerStatusCheck' ||
source === 'IndexerLongTermStatusCheck' ? (
<SpinnerIconButton
name={icons.TEST}
title={translate('TestAll')}
isSpinning={isTestingAllIndexers}
onPress={handleTestAllIndexersPress}
/>
) : null}
{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;

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

@@ -1,74 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { testAllIndexers } from 'Store/Actions/indexerActions';
import { testAllApplications } from 'Store/Actions/Settings/applications';
import { testAllDownloadClients } from 'Store/Actions/Settings/downloadClients';
import { fetchHealth } from 'Store/Actions/systemActions';
import createHealthCheckSelector from 'Store/Selectors/createHealthCheckSelector';
import Health from './Health';
function createMapStateToProps() {
return createSelector(
createHealthCheckSelector(),
(state) => state.system.health,
(state) => state.settings.applications.isTestingAll,
(state) => state.settings.downloadClients.isTestingAll,
(state) => state.indexers.isTestingAll,
(items, health, isTestingAllApplications, isTestingAllDownloadClients, isTestingAllIndexers) => {
const {
isFetching,
isPopulated
} = health;
return {
isFetching,
isPopulated,
items,
isTestingAllApplications,
isTestingAllDownloadClients,
isTestingAllIndexers
};
}
);
}
const mapDispatchToProps = {
dispatchFetchHealth: fetchHealth,
dispatchTestAllApplications: testAllApplications,
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);

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

@@ -0,0 +1,71 @@
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 'ApplicationStatusCheck':
case 'ApplicationLongTermStatusCheck':
return (
<IconButton
name={icons.SETTINGS}
title={translate('Settings')}
to="/settings/applications"
/>
);
case 'DownloadClientStatusCheck':
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 'IndexerProxyStatusCheck':
return (
<IconButton
name={icons.SETTINGS}
title={translate('Settings')}
to="/settings/indexers"
/>
);
case 'IndexerRssCheck':
case 'IndexerSearchCheck':
case 'IndexerStatusCheck':
case 'IndexerLongTermStatusCheck':
return (
<IconButton
name={icons.SETTINGS}
title={translate('Settings')}
to="/"
/>
);
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;

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

@@ -1,81 +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';
import createHealthCheckSelector from 'Store/Selectors/createHealthCheckSelector';
function createMapStateToProps() {
return createSelector(
(state) => state.app,
createHealthCheckSelector(),
(state) => state.system.health,
(app, items, health) => {
const count = items.length;
let errors = false;
let warnings = false;
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;

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

@@ -1,58 +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://prowlarr.com/">prowlarr.com</Link>
</DescriptionListItemDescription>
<DescriptionListItemTitle>{translate('Wiki')}</DescriptionListItemTitle>
<DescriptionListItemDescription>
<Link to="https://wiki.servarr.com/prowlarr">wiki.servarr.com/prowlarr</Link>
</DescriptionListItemDescription>
<DescriptionListItemTitle>{translate('Reddit')}</DescriptionListItemTitle>
<DescriptionListItemDescription>
<Link to="https://reddit.com/r/prowlarr">r/prowlarr</Link>
</DescriptionListItemDescription>
<DescriptionListItemTitle>{translate('Discord')}</DescriptionListItemTitle>
<DescriptionListItemDescription>
<Link to="https://prowlarr.com/discord">prowlarr.com/discord</Link>
</DescriptionListItemDescription>
<DescriptionListItemTitle>{translate('Source')}</DescriptionListItemTitle>
<DescriptionListItemDescription>
<Link to="https://github.com/Prowlarr/Prowlarr/">github.com/Prowlarr/Prowlarr</Link>
</DescriptionListItemDescription>
<DescriptionListItemTitle>{translate('FeatureRequests')}</DescriptionListItemTitle>
<DescriptionListItemDescription>
<Link to="https://github.com/Prowlarr/Prowlarr/issues">github.com/Prowlarr/Prowlarr/issues</Link>
</DescriptionListItemDescription>
</DescriptionList>
</FieldSet>
);
}
}
MoreInfo.propTypes = {
};
export default MoreInfo;

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

@@ -0,0 +1,63 @@
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://prowlarr.com/">prowlarr.com</Link>
</DescriptionListItemDescription>
<DescriptionListItemTitle>{translate('Wiki')}</DescriptionListItemTitle>
<DescriptionListItemDescription>
<Link to="https://wiki.servarr.com/prowlarr">
wiki.servarr.com/prowlarr
</Link>
</DescriptionListItemDescription>
<DescriptionListItemTitle>
{translate('Reddit')}
</DescriptionListItemTitle>
<DescriptionListItemDescription>
<Link to="https://reddit.com/r/prowlarr">r/prowlarr</Link>
</DescriptionListItemDescription>
<DescriptionListItemTitle>
{translate('Discord')}
</DescriptionListItemTitle>
<DescriptionListItemDescription>
<Link to="https://prowlarr.com/discord">prowlarr.com/discord</Link>
</DescriptionListItemDescription>
<DescriptionListItemTitle>
{translate('Source')}
</DescriptionListItemTitle>
<DescriptionListItemDescription>
<Link to="https://github.com/Prowlarr/Prowlarr/">
github.com/Prowlarr/Prowlarr
</Link>
</DescriptionListItemDescription>
<DescriptionListItemTitle>
{translate('FeatureRequests')}
</DescriptionListItemTitle>
<DescriptionListItemDescription>
<Link to="https://github.com/Prowlarr/Prowlarr/issues">
github.com/Prowlarr/Prowlarr/issues
</Link>
</DescriptionListItemDescription>
</DescriptionList>
</FieldSet>
);
}
export default MoreInfo;

30
frontend/src/System/Status/Status.js
View File

@@ -1,30 +0,0 @@
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 Donations from './Donations/Donations';
import HealthConnector from './Health/HealthConnector';
import MoreInfo from './MoreInfo/MoreInfo';
class Status extends Component {
//
// Render
render() {
return (
<PageContent title={translate('Status')}>
<PageContentBody>
<HealthConnector />
<AboutConnector />
<MoreInfo />
<Donations />
</PageContentBody>
</PageContent>
);
}
}
export default Status;

23
frontend/src/System/Status/Status.tsx Normal file
View File

@@ -0,0 +1,23 @@
import React from 'react';
import PageContent from 'Components/Page/PageContent';
import PageContentBody from 'Components/Page/PageContentBody';
import translate from 'Utilities/String/translate';
import About from './About/About';
import Donations from './Donations/Donations';
import Health from './Health/Health';
import MoreInfo from './MoreInfo/MoreInfo';
function Status() {
return (
<PageContent title={translate('Status')}>
<PageContentBody>
<Health />
<About />
<MoreInfo />
<Donations />
</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>

26
frontend/src/index.js
View File

@@ -1,26 +0,0 @@
import { createBrowserHistory } from 'history';
import React from 'react';
import { render } from 'react-dom';
import { fetchTranslations } from 'Utilities/String/translate';
import './preload';
import './polyfills';
import 'Styles/globals.css';
import './index.css';
const history = createBrowserHistory();
const hasTranslationsError = !await fetchTranslations();
const { default: createAppStore } = await import('Store/createAppStore');
const { default: App } = await import('./App/App');
const store = createAppStore(history);
render(
<App
store={store}
history={history}
hasTranslationsError={hasTranslationsError}
/>,
document.getElementById('root')
);

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,7 +20,9 @@ interface SystemStatus {
mode: string;
osName: string;
osVersion: string;
packageAuthor: string;
packageUpdateMechanism: 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;