Convert System to TypeScript

frontend/src/App/State/SettingsAppState.ts

@@ -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>,

frontend/src/App/State/SystemAppState.ts

@@ -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;

frontend/src/Components/Page/Sidebar/PageSidebar.js

@@ -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'),

frontend/src/Components/Table/Column.ts

@@ -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;

frontend/src/System/Status/About/About.js

@@ -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;

frontend/src/System/Status/About/About.tsx

@@ -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;

frontend/src/System/Status/About/AboutConnector.js

@@ -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);

frontend/src/System/Status/About/StartTime.js

@@ -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;

frontend/src/System/Status/About/StartTime.tsx

@@ -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;

frontend/src/System/Status/DiskSpace/DiskSpace.js

@@ -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;

frontend/src/System/Status/DiskSpace/DiskSpace.tsx

@@ -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;

frontend/src/System/Status/DiskSpace/DiskSpaceConnector.js

@@ -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);

frontend/src/System/Status/Health/Health.js

@@ -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;

frontend/src/System/Status/Health/Health.tsx

@@ -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;

frontend/src/System/Status/Health/HealthConnector.js

@@ -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);

frontend/src/System/Status/Health/HealthItemLink.tsx

@@ -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;

frontend/src/System/Status/Health/HealthStatus.tsx

@@ -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;

frontend/src/System/Status/Health/HealthStatusConnector.js

@@ -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);

frontend/src/System/Status/Health/createHealthSelector.ts

@@ -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;

frontend/src/System/Status/MoreInfo/MoreInfo.js

@@ -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;

frontend/src/System/Status/MoreInfo/MoreInfo.tsx

@@ -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;

frontend/src/System/Status/Status.tsx

@@ -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 About from './About/About';
-import DiskSpaceConnector from './DiskSpace/DiskSpaceConnector';
+import DiskSpace from './DiskSpace/DiskSpace';
-import HealthConnector from './Health/HealthConnector';
+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 />
+          <Health />
-          <DiskSpaceConnector />
+          <DiskSpace />
-          <AboutConnector />
+          <About />
           <MoreInfo />
         </PageContentBody>
       </PageContent>
     );
   }
-
 }
 
 export default Status;

frontend/src/System/Tasks/Scheduled/ScheduledTaskRow.js

@@ -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;

frontend/src/System/Tasks/Scheduled/ScheduledTaskRow.tsx

@@ -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;

frontend/src/System/Tasks/Scheduled/ScheduledTaskRowConnector.js

@@ -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);

frontend/src/System/Tasks/Scheduled/ScheduledTasks.js

@@ -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;

frontend/src/System/Tasks/Scheduled/ScheduledTasks.tsx

@@ -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;

frontend/src/System/Tasks/Scheduled/ScheduledTasksConnector.js

@@ -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);

frontend/src/System/Tasks/Tasks.tsx

@@ -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>

frontend/src/typings/DiskSpace.ts

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

frontend/src/typings/Health.ts

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

frontend/src/typings/SystemStatus.ts

@@ -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;

frontend/src/typings/Task.ts

@@ -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;