New: Queue custom filters

(cherry picked from commit e357d17b187378b92377f8acb077b12c1e7ea527)

Closes #9297

frontend/src/Activity/Queue/Queue.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import FilterMenu from 'Components/Menu/FilterMenu';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
 import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
@@ -21,6 +22,7 @@ import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import removeOldSelectedState from 'Utilities/Table/removeOldSelectedState';
 import selectAll from 'Utilities/Table/selectAll';
 import toggleSelected from 'Utilities/Table/toggleSelected';
+import QueueFilterModal from './QueueFilterModal';
 import QueueOptionsConnector from './QueueOptionsConnector';
 import QueueRowConnector from './QueueRowConnector';
 import RemoveQueueItemsModal from './RemoveQueueItemsModal';
@@ -153,11 +155,16 @@ class Queue extends Component {
       isMoviesPopulated,
       moviesError,
       columns,
+      selectedFilterKey,
+      filters,
+      customFilters,
+      count,
       totalRecords,
       isGrabbing,
       isRemoving,
       isRefreshMonitoredDownloadsExecuting,
       onRefreshPress,
+      onFilterSelect,
       ...otherProps
     } = this.props;
 
@@ -220,6 +227,15 @@ class Queue extends Component {
                 iconName={icons.TABLE}
               />
             </TableOptionsModalWrapper>
+
+            <FilterMenu
+              alignMenu={align.RIGHT}
+              selectedFilterKey={selectedFilterKey}
+              filters={filters}
+              customFilters={customFilters}
+              filterModalConnectorComponent={QueueFilterModal}
+              onFilterSelect={onFilterSelect}
+            />
           </PageToolbarSection>
         </PageToolbar>
 
@@ -241,7 +257,11 @@ class Queue extends Component {
           {
             isAllPopulated && !hasError && !items.length ?
               <Alert kind={kinds.INFO}>
-                {translate('QueueIsEmpty')}
+                {
+                  selectedFilterKey !== 'all' && count > 0 ?
+                    translate('QueueFilterHasNoItems') :
+                    translate('QueueIsEmpty')
+                }
               </Alert> :
               null
           }
@@ -325,13 +345,22 @@ Queue.propTypes = {
   moviesError: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  selectedFilterKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  customFilters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  count: PropTypes.number.isRequired,
   totalRecords: PropTypes.number,
   isGrabbing: PropTypes.bool.isRequired,
   isRemoving: PropTypes.bool.isRequired,
   isRefreshMonitoredDownloadsExecuting: PropTypes.bool.isRequired,
   onRefreshPress: PropTypes.func.isRequired,
   onGrabSelectedPress: PropTypes.func.isRequired,
-  onRemoveSelectedPress: PropTypes.func.isRequired
+  onRemoveSelectedPress: PropTypes.func.isRequired,
+  onFilterSelect: PropTypes.func.isRequired
+};
+
+Queue.defaultProps = {
+  count: 0
 };
 
 export default Queue;

frontend/src/Activity/Queue/QueueConnector.js

@@ -6,6 +6,7 @@ import * as commandNames from 'Commands/commandNames';
 import withCurrentPage from 'Components/withCurrentPage';
 import { executeCommand } from 'Store/Actions/commandActions';
 import * as queueActions from 'Store/Actions/queueActions';
+import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
 import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
 import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
 import Queue from './Queue';
@@ -15,12 +16,16 @@ function createMapStateToProps() {
     (state) => state.movies,
     (state) => state.queue.options,
     (state) => state.queue.paged,
+    (state) => state.queue.status.item,
+    createCustomFiltersSelector('queue'),
     createCommandExecutingSelector(commandNames.REFRESH_MONITORED_DOWNLOADS),
-    (movies, options, queue, isRefreshMonitoredDownloadsExecuting) => {
+    (movies, options, queue, status, customFilters, isRefreshMonitoredDownloadsExecuting) => {
       return {
+        count: options.includeUnknownMovieItems ? status.totalCount : status.count,
         isMoviesFetching: movies.isFetching,
         isMoviesPopulated: movies.isPopulated,
         moviesError: movies.error,
+        customFilters,
         isRefreshMonitoredDownloadsExecuting,
         ...options,
         ...queue
@@ -106,6 +111,10 @@ class QueueConnector extends Component {
     this.props.setQueueSort({ sortKey });
   };
 
+  onFilterSelect = (selectedFilterKey) => {
+    this.props.setQueueFilter({ selectedFilterKey });
+  };
+
   onTableOptionChange = (payload) => {
     this.props.setQueueTableOption(payload);
 
@@ -140,6 +149,7 @@ class QueueConnector extends Component {
         onLastPagePress={this.onLastPagePress}
         onPageSelect={this.onPageSelect}
         onSortPress={this.onSortPress}
+        onFilterSelect={this.onFilterSelect}
         onTableOptionChange={this.onTableOptionChange}
         onRefreshPress={this.onRefreshPress}
         onGrabSelectedPress={this.onGrabSelectedPress}
@@ -162,6 +172,7 @@ QueueConnector.propTypes = {
   gotoQueueLastPage: PropTypes.func.isRequired,
   gotoQueuePage: PropTypes.func.isRequired,
   setQueueSort: PropTypes.func.isRequired,
+  setQueueFilter: PropTypes.func.isRequired,
   setQueueTableOption: PropTypes.func.isRequired,
   clearQueue: PropTypes.func.isRequired,
   grabQueueItems: PropTypes.func.isRequired,

frontend/src/Activity/Queue/QueueFilterModal.tsx

@@ -0,0 +1,54 @@
+import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import FilterModal from 'Components/Filter/FilterModal';
+import { setQueueFilter } from 'Store/Actions/queueActions';
+
+function createQueueSelector() {
+  return createSelector(
+    (state: AppState) => state.queue.paged.items,
+    (queueItems) => {
+      return queueItems;
+    }
+  );
+}
+
+function createFilterBuilderPropsSelector() {
+  return createSelector(
+    (state: AppState) => state.queue.paged.filterBuilderProps,
+    (filterBuilderProps) => {
+      return filterBuilderProps;
+    }
+  );
+}
+
+interface QueueFilterModalProps {
+  isOpen: boolean;
+}
+
+export default function QueueFilterModal(props: QueueFilterModalProps) {
+  const sectionItems = useSelector(createQueueSelector());
+  const filterBuilderProps = useSelector(createFilterBuilderPropsSelector());
+  const customFilterType = 'queue';
+
+  const dispatch = useDispatch();
+
+  const dispatchSetFilter = useCallback(
+    (payload: unknown) => {
+      dispatch(setQueueFilter(payload));
+    },
+    [dispatch]
+  );
+
+  return (
+    <FilterModal
+      // TODO: Don't spread all the props
+      {...props}
+      sectionItems={sectionItems}
+      filterBuilderProps={filterBuilderProps}
+      customFilterType={customFilterType}
+      dispatchSetFilter={dispatchSetFilter}
+    />
+  );
+}

frontend/src/App/State/AppSectionState.ts

@@ -1,4 +1,5 @@
 import SortDirection from 'Helpers/Props/SortDirection';
+import { FilterBuilderProp } from './AppState';
 
 export interface Error {
   responseJSON: {
@@ -20,6 +21,10 @@ export interface PagedAppSectionState {
   pageSize: number;
 }
 
+export interface AppSectionFilterState<T> {
+  filterBuilderProps: FilterBuilderProp<T>[];
+}
+
 export interface AppSectionSchemaState<T> {
   isSchemaFetching: boolean;
   isSchemaPopulated: boolean;

frontend/src/App/State/QueueAppState.ts

@@ -2,7 +2,11 @@ import ModelBase from 'App/ModelBase';
 import Language from 'Language/Language';
 import { QualityModel } from 'Quality/Quality';
 import CustomFormat from 'typings/CustomFormat';
-import AppSectionState, { AppSectionItemState, Error } from './AppSectionState';
+import AppSectionState, {
+  AppSectionFilterState,
+  AppSectionItemState,
+  Error,
+} from './AppSectionState';
 
 export interface StatusMessage {
   title: string;
@@ -35,7 +39,9 @@ export interface QueueDetailsAppState extends AppSectionState<Queue> {
   params: unknown;
 }
 
-export interface QueuePagedAppState extends AppSectionState<Queue> {
+export interface QueuePagedAppState
+  extends AppSectionState<Queue>,
+    AppSectionFilterState<Queue> {
   isGrabbing: boolean;
   grabError: Error;
   isRemoving: boolean;

frontend/src/Components/Filter/Builder/FilterBuilderRow.js

@@ -8,7 +8,9 @@ import DateFilterBuilderRowValue from './DateFilterBuilderRowValue';
 import FilterBuilderRowValueConnector from './FilterBuilderRowValueConnector';
 import ImportListFilterBuilderRowValueConnector from './ImportListFilterBuilderRowValueConnector';
 import IndexerFilterBuilderRowValueConnector from './IndexerFilterBuilderRowValueConnector';
+import LanguageFilterBuilderRowValue from './LanguageFilterBuilderRowValue';
 import MinimumAvailabilityFilterBuilderRowValue from './MinimumAvailabilityFilterBuilderRowValue';
+import MovieFilterBuilderRowValue from './MovieFilterBuilderRowValue';
 import ProtocolFilterBuilderRowValue from './ProtocolFilterBuilderRowValue';
 import QualityFilterBuilderRowValueConnector from './QualityFilterBuilderRowValueConnector';
 import QualityProfileFilterBuilderRowValueConnector from './QualityProfileFilterBuilderRowValueConnector';
@@ -61,6 +63,9 @@ function getRowValueConnector(selectedFilterBuilderProp) {
     case filterBuilderValueTypes.INDEXER:
       return IndexerFilterBuilderRowValueConnector;
 
+    case filterBuilderValueTypes.LANGUAGE:
+      return LanguageFilterBuilderRowValue;
+
     case filterBuilderValueTypes.PROTOCOL:
       return ProtocolFilterBuilderRowValue;
 
@@ -70,6 +75,9 @@ function getRowValueConnector(selectedFilterBuilderProp) {
     case filterBuilderValueTypes.QUALITY_PROFILE:
       return QualityProfileFilterBuilderRowValueConnector;
 
+    case filterBuilderValueTypes.MOVIE:
+      return MovieFilterBuilderRowValue;
+
     case filterBuilderValueTypes.RELEASE_STATUS:
       return ReleaseStatusFilterBuilderRowValue;
 

frontend/src/Components/Filter/Builder/FilterBuilderRowValueProps.ts

@@ -0,0 +1,16 @@
+import { FilterBuilderProp } from 'App/State/AppState';
+
+interface FilterBuilderRowOnChangeProps {
+  name: string;
+  value: unknown[];
+}
+
+interface FilterBuilderRowValueProps {
+  filterType?: string;
+  filterValue: string | number | object | string[] | number[] | object[];
+  selectedFilterBuilderProp: FilterBuilderProp<unknown>;
+  sectionItem: unknown[];
+  onChange: (payload: FilterBuilderRowOnChangeProps) => void;
+}
+
+export default FilterBuilderRowValueProps;

frontend/src/Components/Filter/Builder/LanguageFilterBuilderRowValue.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import createLanguagesSelector from 'Store/Selectors/createLanguagesSelector';
+import FilterBuilderRowValue from './FilterBuilderRowValue';
+import FilterBuilderRowValueProps from './FilterBuilderRowValueProps';
+
+function LanguageFilterBuilderRowValue(props: FilterBuilderRowValueProps) {
+  const { items } = useSelector(createLanguagesSelector());
+
+  return <FilterBuilderRowValue {...props} tagList={items} />;
+}
+
+export default LanguageFilterBuilderRowValue;

frontend/src/Components/Filter/Builder/MovieFilterBuilderRowValue.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import Movie from 'Movie/Movie';
+import createAllMoviesSelector from 'Store/Selectors/createAllMoviesSelector';
+import FilterBuilderRowValue from './FilterBuilderRowValue';
+import FilterBuilderRowValueProps from './FilterBuilderRowValueProps';
+
+function MovieFilterBuilderRowValue(props: FilterBuilderRowValueProps) {
+  const allMovies: Movie[] = useSelector(createAllMoviesSelector());
+
+  const tagList = allMovies.map((movie) => {
+    return {
+      id: movie.id,
+      name: movie.title,
+    };
+  });
+
+  return <FilterBuilderRowValue {...props} tagList={tagList} />;
+}
+
+export default MovieFilterBuilderRowValue;

frontend/src/Helpers/Props/filterBuilderValueTypes.js

@@ -3,9 +3,11 @@ export const BYTES = 'bytes';
 export const DATE = 'date';
 export const DEFAULT = 'default';
 export const INDEXER = 'indexer';
+export const LANGUAGE = 'language';
 export const PROTOCOL = 'protocol';
 export const QUALITY = 'quality';
 export const QUALITY_PROFILE = 'qualityProfile';
+export const MOVIE = 'movie';
 export const RELEASE_STATUS = 'releaseStatus';
 export const MINIMUM_AVAILABILITY = 'minimumAvailability';
 export const TAG = 'tag';

frontend/src/Store/Actions/Creators/createFetchServerSideCollectionHandler.js

@@ -6,6 +6,8 @@ import getSectionState from 'Utilities/State/getSectionState';
 import { set, updateServerSideCollection } from '../baseActions';
 
 function createFetchServerSideCollectionHandler(section, url, fetchDataAugmenter) {
+  const [baseSection] = section.split('.');
+
   return function(getState, payload, dispatch) {
     dispatch(set({ section, isFetching: true }));
 
@@ -25,10 +27,13 @@ function createFetchServerSideCollectionHandler(section, url, fetchDataAugmenter
 
     const {
       selectedFilterKey,
-      filters,
-      customFilters
+      filters
     } = sectionState;
 
+    const customFilters = getState().customFilters.items.filter((customFilter) => {
+      return customFilter.type === section || customFilter.type === baseSection;
+    });
+
     const selectedFilters = findSelectedFilters(selectedFilterKey, filters, customFilters);
 
     selectedFilters.forEach((filter) => {
@@ -37,7 +42,8 @@ function createFetchServerSideCollectionHandler(section, url, fetchDataAugmenter
 
     const promise = createAjaxRequest({
       url,
-      data
+      data,
+      traditional: true
     }).request;
 
     promise.done((response) => {

frontend/src/Store/Actions/calendarActions.js

@@ -49,8 +49,6 @@ export const defaultState = {
 
   selectedFilterKey: 'monitored',
 
-  customFilters: [],
-
   filters: [
     {
       key: 'all',

frontend/src/Store/Actions/queueActions.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { createAction } from 'redux-actions';
 import { batchActions } from 'redux-batched-actions';
 import Icon from 'Components/Icon';
-import { icons, sortDirections } from 'Helpers/Props';
+import { filterBuilderTypes, filterBuilderValueTypes, icons, sortDirections } from 'Helpers/Props';
 import { createThunk, handleThunks } from 'Store/thunks';
 import createAjaxRequest from 'Utilities/createAjaxRequest';
 import serverSideCollectionHandlers from 'Utilities/serverSideCollectionHandlers';
@@ -159,6 +159,43 @@ export const defaultState = {
         isVisible: true,
         isModifiable: false
       }
+    ],
+
+    selectedFilterKey: 'all',
+
+    filters: [
+      {
+        key: 'all',
+        label: 'All',
+        filters: []
+      }
+    ],
+
+    filterBuilderProps: [
+      {
+        name: 'movieIds',
+        label: () => translate('Movie'),
+        type: filterBuilderTypes.EQUAL,
+        valueType: filterBuilderValueTypes.MOVIE
+      },
+      {
+        name: 'quality',
+        label: () => translate('Quality'),
+        type: filterBuilderTypes.EQUAL,
+        valueType: filterBuilderValueTypes.QUALITY
+      },
+      {
+        name: 'languages',
+        label: () => translate('Languages'),
+        type: filterBuilderTypes.CONTAINS,
+        valueType: filterBuilderValueTypes.LANGUAGE
+      },
+      {
+        name: 'protocol',
+        label: () => translate('Protocol'),
+        type: filterBuilderTypes.EQUAL,
+        valueType: filterBuilderValueTypes.PROTOCOL
+      }
     ]
   },
   sortPredicates: {
@@ -173,7 +210,8 @@ export const persistState = [
   'queue.paged.pageSize',
   'queue.paged.sortKey',
   'queue.paged.sortDirection',
-  'queue.paged.columns'
+  'queue.paged.columns',
+  'queue.paged.selectedFilterKey'
 ];
 
 //
@@ -198,6 +236,7 @@ export const GOTO_NEXT_QUEUE_PAGE = 'queue/gotoQueueNextPage';
 export const GOTO_LAST_QUEUE_PAGE = 'queue/gotoQueueLastPage';
 export const GOTO_QUEUE_PAGE = 'queue/gotoQueuePage';
 export const SET_QUEUE_SORT = 'queue/setQueueSort';
+export const SET_QUEUE_FILTER = 'queue/setQueueFilter';
 export const SET_QUEUE_TABLE_OPTION = 'queue/setQueueTableOption';
 export const SET_QUEUE_OPTION = 'queue/setQueueOption';
 export const CLEAR_QUEUE = 'queue/clearQueue';
@@ -222,6 +261,7 @@ export const gotoQueueNextPage = createThunk(GOTO_NEXT_QUEUE_PAGE);
 export const gotoQueueLastPage = createThunk(GOTO_LAST_QUEUE_PAGE);
 export const gotoQueuePage = createThunk(GOTO_QUEUE_PAGE);
 export const setQueueSort = createThunk(SET_QUEUE_SORT);
+export const setQueueFilter = createThunk(SET_QUEUE_FILTER);
 export const setQueueTableOption = createAction(SET_QUEUE_TABLE_OPTION);
 export const setQueueOption = createAction(SET_QUEUE_OPTION);
 export const clearQueue = createAction(CLEAR_QUEUE);
@@ -268,7 +308,8 @@ export const actionHandlers = handleThunks({
       [serverSideCollectionHandlers.NEXT_PAGE]: GOTO_NEXT_QUEUE_PAGE,
       [serverSideCollectionHandlers.LAST_PAGE]: GOTO_LAST_QUEUE_PAGE,
       [serverSideCollectionHandlers.EXACT_PAGE]: GOTO_QUEUE_PAGE,
-      [serverSideCollectionHandlers.SORT]: SET_QUEUE_SORT
+      [serverSideCollectionHandlers.SORT]: SET_QUEUE_SORT,
+      [serverSideCollectionHandlers.FILTER]: SET_QUEUE_FILTER
     },
     fetchDataAugmenter
   ),

src/NzbDrone.Core/Localization/Core/en.json

@@ -881,6 +881,7 @@
   "QualitySettings": "Quality Settings",
   "QualitySettingsSummary": "Quality sizes and naming",
   "Queue": "Queue",
+  "QueueFilterHasNoItems": "Selected queue filter has no items",
   "QueueIsEmpty": "Queue is empty",
   "QueueLoadError": "Failed to load Queue",
   "Queued": "Queued",

src/Radarr.Api.V3/Queue/QueueController.cs

@@ -9,6 +9,7 @@ using NzbDrone.Core.Datastore.Events;
 using NzbDrone.Core.Download;
 using NzbDrone.Core.Download.Pending;
 using NzbDrone.Core.Download.TrackedDownloads;
+using NzbDrone.Core.Indexers;
 using NzbDrone.Core.Languages;
 using NzbDrone.Core.Messaging.Events;
 using NzbDrone.Core.Profiles.Qualities;
@@ -130,15 +131,15 @@ namespace Radarr.Api.V3.Queue
 
         [HttpGet]
         [Produces("application/json")]
-        public PagingResource<QueueResource> GetQueue([FromQuery] PagingRequestResource paging, bool includeUnknownMovieItems = false, bool includeMovie = false)
+        public PagingResource<QueueResource> GetQueue([FromQuery] PagingRequestResource paging, bool includeUnknownMovieItems = false, bool includeMovie = false, [FromQuery] int[] movieIds = null, DownloadProtocol? protocol = null, [FromQuery] int[] languages = null, int? quality = null)
         {
             var pagingResource = new PagingResource<QueueResource>(paging);
             var pagingSpec = pagingResource.MapToPagingSpec<QueueResource, NzbDrone.Core.Queue.Queue>("timeleft", SortDirection.Ascending);
 
-            return pagingSpec.ApplyToPage((spec) => GetQueue(spec, includeUnknownMovieItems), (q) => MapToResource(q, includeMovie));
+            return pagingSpec.ApplyToPage((spec) => GetQueue(spec, movieIds?.ToHashSet(), protocol, languages?.ToHashSet(), quality, includeUnknownMovieItems), (q) => MapToResource(q, includeMovie));
         }
 
-        private PagingSpec<NzbDrone.Core.Queue.Queue> GetQueue(PagingSpec<NzbDrone.Core.Queue.Queue> pagingSpec, bool includeUnknownMovieItems)
+        private PagingSpec<NzbDrone.Core.Queue.Queue> GetQueue(PagingSpec<NzbDrone.Core.Queue.Queue> pagingSpec, HashSet<int> movieIds, DownloadProtocol? protocol, HashSet<int> languages, int? quality, bool includeUnknownMovieItems)
         {
             var ascending = pagingSpec.SortDirection == SortDirection.Ascending;
             var orderByFunc = GetOrderByFunc(pagingSpec);
@@ -146,7 +147,36 @@ namespace Radarr.Api.V3.Queue
             var queue = _queueService.GetQueue();
             var filteredQueue = includeUnknownMovieItems ? queue : queue.Where(q => q.Movie != null);
             var pending = _pendingReleaseService.GetPendingQueue();
-            var fullQueue = filteredQueue.Concat(pending).ToList();
+
+            var hasMovieIdFilter = movieIds.Any();
+            var hasLanguageFilter = languages.Any();
+            var fullQueue = filteredQueue.Concat(pending).Where(q =>
+            {
+                var include = true;
+
+                if (hasMovieIdFilter)
+                {
+                    include &= q.Movie != null && movieIds.Contains(q.Movie.Id);
+                }
+
+                if (include && protocol.HasValue)
+                {
+                    include &= q.Protocol == protocol.Value;
+                }
+
+                if (include && hasLanguageFilter)
+                {
+                    include &= q.Languages.Any(l => languages.Contains(l.Id));
+                }
+
+                if (include && quality.HasValue)
+                {
+                    include &= q.Quality.Quality.Id == quality.Value;
+                }
+
+                return include;
+            }).ToList();
+
             IOrderedEnumerable<NzbDrone.Core.Queue.Queue> ordered;
 
             if (pagingSpec.SortKey == "timeleft")