Convert System to TypeScript
This commit is contained in:
Mark McDowall
parent
ebc5cdb335
commit
f1045685a0
|
|
@ -20,7 +20,9 @@ import UiSettings from 'typings/Settings/UiSettings';
|
||||||
export interface DownloadClientAppState
|
export interface DownloadClientAppState
|
||||||
extends AppSectionState<DownloadClient>,
|
extends AppSectionState<DownloadClient>,
|
||||||
AppSectionDeleteState,
|
AppSectionDeleteState,
|
||||||
AppSectionSaveState {}
|
AppSectionSaveState {
|
||||||
|
isTestingAll: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
export type GeneralAppState = AppSectionItemState<General>;
|
export type GeneralAppState = AppSectionItemState<General>;
|
||||||
|
|
||||||
|
|
@ -32,7 +34,9 @@ export interface ImportListAppState
|
||||||
export interface IndexerAppState
|
export interface IndexerAppState
|
||||||
extends AppSectionState<Indexer>,
|
extends AppSectionState<Indexer>,
|
||||||
AppSectionDeleteState,
|
AppSectionDeleteState,
|
||||||
AppSectionSaveState {}
|
AppSectionSaveState {
|
||||||
|
isTestingAll: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
export interface NotificationAppState
|
export interface NotificationAppState
|
||||||
extends AppSectionState<Notification>,
|
extends AppSectionState<Notification>,
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,22 @@
|
||||||
|
import DiskSpace from 'typings/DiskSpace';
|
||||||
|
import Health from 'typings/Health';
|
||||||
import SystemStatus from 'typings/SystemStatus';
|
import SystemStatus from 'typings/SystemStatus';
|
||||||
|
import Task from 'typings/Task';
|
||||||
import Update from 'typings/Update';
|
import Update from 'typings/Update';
|
||||||
import AppSectionState, { AppSectionItemState } from './AppSectionState';
|
import AppSectionState, { AppSectionItemState } from './AppSectionState';
|
||||||
|
|
||||||
|
export type DiskSpaceAppState = AppSectionState<DiskSpace>;
|
||||||
|
export type HealthAppState = AppSectionState<Health>;
|
||||||
export type SystemStatusAppState = AppSectionItemState<SystemStatus>;
|
export type SystemStatusAppState = AppSectionItemState<SystemStatus>;
|
||||||
export type UpdateAppState = AppSectionState<Update>;
|
export type UpdateAppState = AppSectionState<Update>;
|
||||||
|
export type TaskAppState = AppSectionState<Task>;
|
||||||
|
|
||||||
interface SystemAppState {
|
interface SystemAppState {
|
||||||
|
diskSpace: DiskSpaceAppState;
|
||||||
|
health: HealthAppState;
|
||||||
updates: UpdateAppState;
|
updates: UpdateAppState;
|
||||||
status: SystemStatusAppState;
|
status: SystemStatusAppState;
|
||||||
|
tasks: TaskAppState;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default SystemAppState;
|
export default SystemAppState;
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ import Scroller from 'Components/Scroller/Scroller';
|
||||||
import { icons } from 'Helpers/Props';
|
import { icons } from 'Helpers/Props';
|
||||||
import locationShape from 'Helpers/Props/Shapes/locationShape';
|
import locationShape from 'Helpers/Props/Shapes/locationShape';
|
||||||
import dimensions from 'Styles/Variables/dimensions';
|
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 translate from 'Utilities/String/translate';
|
||||||
import MessagesConnector from './Messages/MessagesConnector';
|
import MessagesConnector from './Messages/MessagesConnector';
|
||||||
import PageSidebarItem from './PageSidebarItem';
|
import PageSidebarItem from './PageSidebarItem';
|
||||||
|
|
@ -147,7 +147,7 @@ const links = [
|
||||||
{
|
{
|
||||||
title: () => translate('Status'),
|
title: () => translate('Status'),
|
||||||
to: '/system/status',
|
to: '/system/status',
|
||||||
statusComponent: HealthStatusConnector
|
statusComponent: HealthStatus
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: () => translate('Tasks'),
|
title: () => translate('Tasks'),
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@ type PropertyFunction<T> = () => T;
|
||||||
interface Column {
|
interface Column {
|
||||||
name: string;
|
name: string;
|
||||||
label: string | PropertyFunction<string> | React.ReactNode;
|
label: string | PropertyFunction<string> | React.ReactNode;
|
||||||
|
className?: string;
|
||||||
columnLabel?: string;
|
columnLabel?: string;
|
||||||
isSortable?: boolean;
|
isSortable?: boolean;
|
||||||
isVisible: boolean;
|
isVisible: boolean;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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);
|
|
||||||
|
|
@ -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;
|
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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);
|
|
||||||
|
|
@ -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;
|
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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);
|
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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);
|
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -2,13 +2,12 @@ import React, { Component } from 'react';
|
||||||
import PageContent from 'Components/Page/PageContent';
|
import PageContent from 'Components/Page/PageContent';
|
||||||
import PageContentBody from 'Components/Page/PageContentBody';
|
import PageContentBody from 'Components/Page/PageContentBody';
|
||||||
import translate from 'Utilities/String/translate';
|
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';
|
import MoreInfo from './MoreInfo/MoreInfo';
|
||||||
|
|
||||||
class Status extends Component {
|
class Status extends Component {
|
||||||
|
|
||||||
//
|
//
|
||||||
// Render
|
// Render
|
||||||
|
|
||||||
|
|
@ -16,15 +15,14 @@ class Status extends Component {
|
||||||
return (
|
return (
|
||||||
<PageContent title={translate('Status')}>
|
<PageContent title={translate('Status')}>
|
||||||
<PageContentBody>
|
<PageContentBody>
|
||||||
<HealthConnector />
|
<Health />
|
||||||
<DiskSpaceConnector />
|
<DiskSpace />
|
||||||
<AboutConnector />
|
<About />
|
||||||
<MoreInfo />
|
<MoreInfo />
|
||||||
</PageContentBody>
|
</PageContentBody>
|
||||||
</PageContent>
|
</PageContent>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Status;
|
export default Status;
|
||||||
|
|
@ -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;
|
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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);
|
|
||||||
|
|
@ -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;
|
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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);
|
|
||||||
|
|
@ -3,13 +3,13 @@ import PageContent from 'Components/Page/PageContent';
|
||||||
import PageContentBody from 'Components/Page/PageContentBody';
|
import PageContentBody from 'Components/Page/PageContentBody';
|
||||||
import translate from 'Utilities/String/translate';
|
import translate from 'Utilities/String/translate';
|
||||||
import QueuedTasks from './Queued/QueuedTasks';
|
import QueuedTasks from './Queued/QueuedTasks';
|
||||||
import ScheduledTasksConnector from './Scheduled/ScheduledTasksConnector';
|
import ScheduledTasks from './Scheduled/ScheduledTasks';
|
||||||
|
|
||||||
function Tasks() {
|
function Tasks() {
|
||||||
return (
|
return (
|
||||||
<PageContent title={translate('Tasks')}>
|
<PageContent title={translate('Tasks')}>
|
||||||
<PageContentBody>
|
<PageContentBody>
|
||||||
<ScheduledTasksConnector />
|
<ScheduledTasks />
|
||||||
<QueuedTasks />
|
<QueuedTasks />
|
||||||
</PageContentBody>
|
</PageContentBody>
|
||||||
</PageContent>
|
</PageContent>
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
interface DiskSpace {
|
||||||
|
path: string;
|
||||||
|
label: string;
|
||||||
|
freeSpace: number;
|
||||||
|
totalSpace: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DiskSpace;
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
interface Health {
|
||||||
|
source: string;
|
||||||
|
type: string;
|
||||||
|
message: string;
|
||||||
|
wikiUrl: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Health;
|
||||||
|
|
@ -4,6 +4,8 @@ interface SystemStatus {
|
||||||
authentication: string;
|
authentication: string;
|
||||||
branch: string;
|
branch: string;
|
||||||
buildTime: string;
|
buildTime: string;
|
||||||
|
databaseVersion: string;
|
||||||
|
databaseType: string;
|
||||||
instanceName: string;
|
instanceName: string;
|
||||||
isAdmin: boolean;
|
isAdmin: boolean;
|
||||||
isDebug: boolean;
|
isDebug: boolean;
|
||||||
|
|
@ -18,8 +20,10 @@ interface SystemStatus {
|
||||||
mode: string;
|
mode: string;
|
||||||
osName: string;
|
osName: string;
|
||||||
osVersion: string;
|
osVersion: string;
|
||||||
|
packageAuthor: string;
|
||||||
packageUpdateMechanism: string;
|
packageUpdateMechanism: string;
|
||||||
packageUpdateMechanismMessage: string;
|
packageUpdateMechanismMessage: string;
|
||||||
|
packageVersion: string;
|
||||||
runtimeName: string;
|
runtimeName: string;
|
||||||
runtimeVersion: string;
|
runtimeVersion: string;
|
||||||
sqliteVersion: string;
|
sqliteVersion: string;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
Loading…
Reference in New Issue