New: Project Aphrodite

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

@@ -0,0 +1,18 @@
+.interval {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 150px;
+}
+
+.lastExecution,
+.nextExecution {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 180px;
+}
+
+.actions {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 20px;
+}

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

@@ -0,0 +1,182 @@
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import formatDate from 'Utilities/Date/formatDate';
+import formatDateTime from 'Utilities/Date/formatDateTime';
+import { icons } from 'Helpers/Props';
+import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import TableRow from 'Components/Table/TableRow';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+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,
+      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');
+
+    return (
+      <TableRow>
+        <TableRowCell>{name}</TableRowCell>
+        <TableRowCell
+          className={styles.interval}
+        >
+          {isDisabled ? 'disabled' : duration}
+        </TableRowCell>
+
+        <TableRowCell
+          className={styles.lastExecution}
+          title={formatDateTime(lastExecution, longDateFormat, timeFormat)}
+        >
+          {lastExecutionTime}
+        </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,
+  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/ScheduledTaskRowConnector.js

@@ -0,0 +1,92 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { findCommand, isCommandExecuting } from 'Utilities/Command';
+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 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

@@ -0,0 +1,79 @@
+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 ScheduledTaskRowConnector from './ScheduledTaskRowConnector';
+
+const columns = [
+  {
+    name: 'name',
+    label: 'Name',
+    isVisible: true
+  },
+  {
+    name: 'interval',
+    label: 'Interval',
+    isVisible: true
+  },
+  {
+    name: 'lastExecution',
+    label: 'Last Execution',
+    isVisible: true
+  },
+  {
+    name: 'nextExecution',
+    label: 'Next Execution',
+    isVisible: true
+  },
+  {
+    name: 'actions',
+    isVisible: true
+  }
+];
+
+function ScheduledTasks(props) {
+  const {
+    isFetching,
+    isPopulated,
+    items
+  } = props;
+
+  return (
+    <FieldSet legend="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/ScheduledTasksConnector.js

@@ -0,0 +1,46 @@
+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);