Automatic History cleanup setting

frontend/src/Components/Page/PageConnector.js

@@ -7,7 +7,7 @@ import { saveDimensions, setIsSidebarVisible } from 'Store/Actions/appActions';
 import { fetchCustomFilters } from 'Store/Actions/customFilterActions';
 import { fetchIndexers } from 'Store/Actions/indexerActions';
 import { fetchIndexerStatus } from 'Store/Actions/indexerStatusActions';
-import { fetchIndexerCategories, fetchIndexerFlags, fetchLanguages, fetchUISettings } from 'Store/Actions/settingsActions';
+import { fetchGeneralSettings, fetchIndexerCategories, fetchIndexerFlags, fetchLanguages, fetchUISettings } from 'Store/Actions/settingsActions';
 import { fetchStatus } from 'Store/Actions/systemActions';
 import { fetchTags } from 'Store/Actions/tagActions';
 import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
@@ -47,6 +47,7 @@ const selectIsPopulated = createSelector(
   (state) => state.customFilters.isPopulated,
   (state) => state.tags.isPopulated,
   (state) => state.settings.ui.isPopulated,
+  (state) => state.settings.general.isPopulated,
   (state) => state.settings.languages.isPopulated,
   (state) => state.indexers.isPopulated,
   (state) => state.indexerStatus.isPopulated,
@@ -57,6 +58,7 @@ const selectIsPopulated = createSelector(
     customFiltersIsPopulated,
     tagsIsPopulated,
     uiSettingsIsPopulated,
+    generalSettingsIsPopulated,
     languagesIsPopulated,
     indexersIsPopulated,
     indexerStatusIsPopulated,
@@ -68,6 +70,7 @@ const selectIsPopulated = createSelector(
       customFiltersIsPopulated &&
       tagsIsPopulated &&
       uiSettingsIsPopulated &&
+      generalSettingsIsPopulated &&
       languagesIsPopulated &&
       indexersIsPopulated &&
       indexerStatusIsPopulated &&
@@ -82,6 +85,7 @@ const selectErrors = createSelector(
   (state) => state.customFilters.error,
   (state) => state.tags.error,
   (state) => state.settings.ui.error,
+  (state) => state.settings.general.error,
   (state) => state.settings.languages.error,
   (state) => state.indexers.error,
   (state) => state.indexerStatus.error,
@@ -92,6 +96,7 @@ const selectErrors = createSelector(
     customFiltersError,
     tagsError,
     uiSettingsError,
+    generalSettingsError,
     languagesError,
     indexersError,
     indexerStatusError,
@@ -103,6 +108,7 @@ const selectErrors = createSelector(
       customFiltersError ||
       tagsError ||
       uiSettingsError ||
+      generalSettingsError ||
       languagesError ||
       indexersError ||
       indexerStatusError ||
@@ -116,6 +122,7 @@ const selectErrors = createSelector(
       customFiltersError,
       tagsError,
       uiSettingsError,
+      generalSettingsError,
       languagesError,
       indexersError,
       indexerStatusError,
@@ -177,6 +184,9 @@ function createMapDispatchToProps(dispatch, props) {
     dispatchFetchUISettings() {
       dispatch(fetchUISettings());
     },
+    dispatchFetchGeneralSettings() {
+      dispatch(fetchGeneralSettings());
+    },
     dispatchFetchStatus() {
       dispatch(fetchStatus());
     },
@@ -212,6 +222,7 @@ class PageConnector extends Component {
       this.props.dispatchFetchIndexerCategories();
       this.props.dispatchFetchIndexerFlags();
       this.props.dispatchFetchUISettings();
+      this.props.dispatchFetchGeneralSettings();
       this.props.dispatchFetchStatus();
     }
   }
@@ -237,6 +248,7 @@ class PageConnector extends Component {
       dispatchFetchIndexerCategories,
       dispatchFetchIndexerFlags,
       dispatchFetchUISettings,
+      dispatchFetchGeneralSettings,
       dispatchFetchStatus,
       ...otherProps
     } = this.props;
@@ -277,6 +289,7 @@ PageConnector.propTypes = {
   dispatchFetchIndexerCategories: PropTypes.func.isRequired,
   dispatchFetchIndexerFlags: PropTypes.func.isRequired,
   dispatchFetchUISettings: PropTypes.func.isRequired,
+  dispatchFetchGeneralSettings: PropTypes.func.isRequired,
   dispatchFetchStatus: PropTypes.func.isRequired,
   onSidebarVisibleChange: PropTypes.func.isRequired
 };

frontend/src/History/History.js

@@ -13,6 +13,7 @@ import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptions
 import TablePager from 'Components/Table/TablePager';
 import { align, icons } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
+import HistoryOptionsConnector from './HistoryOptionsConnector';
 import HistoryRowConnector from './HistoryRowConnector';
 
 class History extends Component {
@@ -58,6 +59,7 @@ class History extends Component {
             <TableOptionsModalWrapper
               {...otherProps}
               columns={columns}
+              optionsComponent={HistoryOptionsConnector}
             >
               <PageToolbarButton
                 label={translate('Options')}

frontend/src/History/HistoryOptions.js

@@ -0,0 +1,80 @@
+import PropTypes from 'prop-types';
+import React, { Component, Fragment } from 'react';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import { inputTypes } from 'Helpers/Props';
+
+class HistoryOptions extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      historyCleanupDays: props.historyCleanupDays
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      historyCleanupDays
+    } = this.props;
+
+    if (historyCleanupDays !== prevProps.historyCleanupDays) {
+      this.setState({
+        historyCleanupDays
+      });
+    }
+  }
+
+  //
+  // Listeners
+
+  onGlobalInputChange = ({ name, value }) => {
+    const {
+      dispatchSaveGeneralSettings
+    } = this.props;
+
+    const setting = { [name]: value };
+
+    this.setState(setting, () => {
+      dispatchSaveGeneralSettings(setting);
+    });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      historyCleanupDays
+    } = this.state;
+
+    return (
+      <Fragment>
+        <FormGroup>
+          <FormLabel>History Cleanup</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.NUMBER}
+            name="historyCleanupDays"
+            value={historyCleanupDays}
+            helpText="Set to 0 to disable automatic cleanup"
+            helpTextWarning="History items older than the selected number of days will be cleaned up automatically"
+            onChange={this.onGlobalInputChange}
+          />
+        </FormGroup>
+      </Fragment>
+    );
+  }
+}
+
+HistoryOptions.propTypes = {
+  historyCleanupDays: PropTypes.bool.isRequired,
+  dispatchSaveGeneralSettings: PropTypes.func.isRequired
+};
+
+export default HistoryOptions;

frontend/src/History/HistoryOptionsConnector.js

@@ -0,0 +1,21 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { saveGeneralSettings } from 'Store/Actions/settingsActions';
+import HistoryOptions from './HistoryOptions';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.settings.general.item,
+    (generalSettings) => {
+      return {
+        ...generalSettings
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  dispatchSaveGeneralSettings: saveGeneralSettings
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(HistoryOptions);

frontend/src/History/HistoryRow.css

@@ -7,7 +7,7 @@
 .indexer {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
-  width: 80px;
+  width: 150px;
 }
 
 .releaseGroup {