Initial Commit Rework

frontend/src/Activity/Queue/ProtocolLabel.css

@@ -0,0 +1,13 @@
+.torrent {
+  composes: label from 'Components/Label.css';
+
+  border-color: $torrentColor;
+  background-color: $torrentColor;
+}
+
+.usenet {
+  composes: label from 'Components/Label.css';
+
+  border-color: $usenetColor;
+  background-color: $usenetColor;
+}

frontend/src/Activity/Queue/ProtocolLabel.js

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Label from 'Components/Label';
+import styles from './ProtocolLabel.css';
+
+function ProtocolLabel({ protocol }) {
+  const protocolName = protocol === 'usenet' ? 'nzb' : protocol;
+
+  return (
+    <Label className={styles[protocol]}>
+      {protocolName}
+    </Label>
+  );
+}
+
+ProtocolLabel.propTypes = {
+  protocol: PropTypes.string.isRequired
+};
+
+export default ProtocolLabel;

frontend/src/Activity/Queue/Queue.js

@@ -0,0 +1,243 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
+import selectAll from 'Utilities/Table/selectAll';
+import toggleSelected from 'Utilities/Table/toggleSelected';
+import { icons } from 'Helpers/Props';
+import episodeEntities from 'Episode/episodeEntities';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import TablePager from 'Components/Table/TablePager';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
+import RemoveQueueItemsModal from './RemoveQueueItemsModal';
+import QueueRowConnector from './QueueRowConnector';
+
+class Queue extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      allSelected: false,
+      allUnselected: false,
+      lastToggled: null,
+      selectedState: {},
+      isPendingSelected: false,
+      isConfirmRemoveModalOpen: false
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (hasDifferentItems(prevProps.items, this.props.items)) {
+      this.setState({ selectedState: {} });
+      return;
+    }
+
+    const selectedIds = this.getSelectedIds();
+    const isPendingSelected = _.some(this.props.items, (item) => {
+      return selectedIds.indexOf(item.id) > -1 && item.status === 'Delay';
+    });
+
+    if (isPendingSelected !== this.state.isPendingSelected) {
+      this.setState({ isPendingSelected });
+    }
+  }
+
+  //
+  // Control
+
+  getSelectedIds = () => {
+    return getSelectedIds(this.state.selectedState);
+  }
+
+  //
+  // Listeners
+
+  onSelectAllChange = ({ value }) => {
+    this.setState(selectAll(this.state.selectedState, value));
+  }
+
+  onSelectedChange = ({ id, value, shiftKey = false }) => {
+    this.setState((state) => {
+      return toggleSelected(state, this.props.items, id, value, shiftKey);
+    });
+  }
+
+  onGrabSelectedPress = () => {
+    this.props.onGrabSelectedPress(this.getSelectedIds());
+  }
+
+  onRemoveSelectedPress = () => {
+    this.setState({ isConfirmRemoveModalOpen: true });
+  }
+
+  onRemoveSelectedConfirmed = (blacklist) => {
+    this.props.onRemoveSelectedPress(this.getSelectedIds(), blacklist);
+    this.setState({ isConfirmRemoveModalOpen: false });
+  }
+
+  onConfirmRemoveModalClose = () => {
+    this.setState({ isConfirmRemoveModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      isPopulated,
+      error,
+      items,
+      isEpisodesPopulated,
+      columns,
+      totalRecords,
+      isGrabbing,
+      isRemoving,
+      isCheckForFinishedDownloadExecuting,
+      onRefreshPress,
+      ...otherProps
+    } = this.props;
+
+    const {
+      allSelected,
+      allUnselected,
+      selectedState,
+      isConfirmRemoveModalOpen,
+      isPendingSelected
+    } = this.state;
+
+    const isRefreshing = isFetching || isCheckForFinishedDownloadExecuting;
+    const isAllPopulated = isPopulated && (isEpisodesPopulated || !items.length);
+    const selectedCount = this.getSelectedIds().length;
+    const disableSelectedActions = selectedCount === 0;
+
+    return (
+      <PageContent title="Queue">
+        <PageToolbar>
+          <PageToolbarSection>
+            <PageToolbarButton
+              label="Refresh"
+              iconName={icons.REFRESH}
+              isSpinning={isRefreshing}
+              onPress={onRefreshPress}
+            />
+
+            <PageToolbarSeparator />
+
+            <PageToolbarButton
+              label="Grab Selected"
+              iconName={icons.DOWNLOAD}
+              isDisabled={disableSelectedActions || !isPendingSelected}
+              isSpinning={isGrabbing}
+              onPress={this.onGrabSelectedPress}
+            />
+
+            <PageToolbarButton
+              label="Remove Selected"
+              iconName={icons.REMOVE}
+              isDisabled={disableSelectedActions}
+              isSpinning={isRemoving}
+              onPress={this.onRemoveSelectedPress}
+            />
+          </PageToolbarSection>
+        </PageToolbar>
+
+        <PageContentBodyConnector>
+          {
+            isRefreshing && !isAllPopulated &&
+              <LoadingIndicator />
+          }
+
+          {
+            !isRefreshing && error &&
+              <div>
+                Failed to load Queue
+              </div>
+          }
+
+          {
+            isAllPopulated && !error && !items.length &&
+              <div>
+                Queue is empty
+              </div>
+          }
+
+          {
+            isAllPopulated && !error && !!items.length &&
+              <div>
+                <Table
+                  columns={columns}
+                  selectAll={true}
+                  allSelected={allSelected}
+                  allUnselected={allUnselected}
+                  {...otherProps}
+                  onSelectAllChange={this.onSelectAllChange}
+                >
+                  <TableBody>
+                    {
+                      items.map((item) => {
+                        return (
+                          <QueueRowConnector
+                            key={item.id}
+                            episodeId={item.episode.id}
+                            episodeEntity={episodeEntities.QUEUE_EPISODES}
+                            isSelected={selectedState[item.id]}
+                            columns={columns}
+                            {...item}
+                            onSelectedChange={this.onSelectedChange}
+                          />
+                        );
+                      })
+                    }
+                  </TableBody>
+                </Table>
+
+                <TablePager
+                  totalRecords={totalRecords}
+                  isFetching={isRefreshing}
+                  {...otherProps}
+                />
+              </div>
+          }
+        </PageContentBodyConnector>
+
+        <RemoveQueueItemsModal
+          isOpen={isConfirmRemoveModalOpen}
+          selectedCount={selectedCount}
+          onRemovePress={this.onRemoveSelectedConfirmed}
+          onModalClose={this.onConfirmRemoveModalClose}
+        />
+      </PageContent>
+    );
+  }
+}
+
+Queue.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isEpisodesPopulated: PropTypes.bool.isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  totalRecords: PropTypes.number,
+  isGrabbing: PropTypes.bool.isRequired,
+  isRemoving: PropTypes.bool.isRequired,
+  isCheckForFinishedDownloadExecuting: PropTypes.bool.isRequired,
+  onRefreshPress: PropTypes.func.isRequired,
+  onGrabSelectedPress: PropTypes.func.isRequired,
+  onRemoveSelectedPress: PropTypes.func.isRequired
+};
+
+export default Queue;

frontend/src/Activity/Queue/QueueConnector.js

@@ -0,0 +1,153 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
+import { executeCommand } from 'Store/Actions/commandActions';
+import * as queueActions from 'Store/Actions/queueActions';
+import { clearEpisodes } from 'Store/Actions/episodeActions';
+import * as commandNames from 'Commands/commandNames';
+import Queue from './Queue';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.queue.paged,
+    (state) => state.queue.queueEpisodes,
+    createCommandsSelector(),
+    (queue, queueEpisodes, commands) => {
+      const isCheckForFinishedDownloadExecuting = _.some(commands, { name: commandNames.CHECK_FOR_FINISHED_DOWNLOAD });
+
+      return {
+        isCheckForFinishedDownloadExecuting,
+        isEpisodesPopulated: queueEpisodes.isPopulated,
+        ...queue
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  ...queueActions,
+  clearEpisodes,
+  executeCommand
+};
+
+class QueueConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    this.props.gotoQueueFirstPage();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (hasDifferentItems(prevProps.items, this.props.items)) {
+      const episodes = _.uniqBy(_.reduce(this.props.items, (result, item) => {
+        result.push(item.episode);
+
+        return result;
+      }, []), ({ id }) => id);
+
+      this.props.clearEpisodes();
+      this.props.setQueueEpisodes({ episodes });
+    }
+  }
+
+  componentWillUnmount() {
+    this.props.clearQueue();
+    this.props.clearEpisodes();
+  }
+
+  //
+  // Listeners
+
+  onFirstPagePress = () => {
+    this.props.gotoQueueFirstPage();
+  }
+
+  onPreviousPagePress = () => {
+    this.props.gotoQueuePreviousPage();
+  }
+
+  onNextPagePress = () => {
+    this.props.gotoQueueNextPage();
+  }
+
+  onLastPagePress = () => {
+    this.props.gotoQueueLastPage();
+  }
+
+  onPageSelect = (page) => {
+    this.props.gotoQueuePage({ page });
+  }
+
+  onSortPress = (sortKey) => {
+    this.props.setQueueSort({ sortKey });
+  }
+
+  onTableOptionChange = (payload) => {
+    this.props.setQueueTableOption(payload);
+
+    if (payload.pageSize) {
+      this.props.gotoQueueFirstPage();
+    }
+  }
+
+  onRefreshPress = () => {
+    this.props.executeCommand({
+      name: commandNames.CHECK_FOR_FINISHED_DOWNLOAD
+    });
+  }
+
+  onGrabSelectedPress = (ids) => {
+    this.props.grabQueueItems({ ids });
+  }
+
+  onRemoveSelectedPress = (ids, blacklist) => {
+    this.props.removeQueueItems({ ids, blacklist });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <Queue
+        onFirstPagePress={this.onFirstPagePress}
+        onPreviousPagePress={this.onPreviousPagePress}
+        onNextPagePress={this.onNextPagePress}
+        onLastPagePress={this.onLastPagePress}
+        onPageSelect={this.onPageSelect}
+        onSortPress={this.onSortPress}
+        onTableOptionChange={this.onTableOptionChange}
+        onRefreshPress={this.onRefreshPress}
+        onGrabSelectedPress={this.onGrabSelectedPress}
+        onRemoveSelectedPress={this.onRemoveSelectedPress}
+        {...this.props}
+      />
+    );
+  }
+}
+
+QueueConnector.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  fetchQueue: PropTypes.func.isRequired,
+  gotoQueueFirstPage: PropTypes.func.isRequired,
+  gotoQueuePreviousPage: PropTypes.func.isRequired,
+  gotoQueueNextPage: PropTypes.func.isRequired,
+  gotoQueueLastPage: PropTypes.func.isRequired,
+  gotoQueuePage: PropTypes.func.isRequired,
+  setQueueSort: PropTypes.func.isRequired,
+  setQueueTableOption: PropTypes.func.isRequired,
+  clearQueue: PropTypes.func.isRequired,
+  setQueueEpisodes: PropTypes.func.isRequired,
+  grabQueueItems: PropTypes.func.isRequired,
+  removeQueueItems: PropTypes.func.isRequired,
+  clearEpisodes: PropTypes.func.isRequired,
+  executeCommand: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(QueueConnector);

frontend/src/Activity/Queue/QueueDetails.js

@@ -0,0 +1,97 @@
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { icons, kinds } from 'Helpers/Props';
+import Icon from 'Components/Icon';
+
+function QueueDetails(props) {
+  const {
+    title,
+    size,
+    sizeleft,
+    estimatedCompletionTime,
+    status: queueStatus,
+    errorMessage,
+    progressBar
+  } = props;
+
+  const status = queueStatus.toLowerCase();
+
+  const progress = (100 - sizeleft / size * 100);
+
+  if (status === 'pending') {
+    return (
+      <Icon
+        name={icons.PENDING}
+        title={`Release will be processed ${moment(estimatedCompletionTime).fromNow()}`}
+      />
+    );
+  }
+
+  if (status === 'completed') {
+    if (errorMessage) {
+      return (
+        <Icon
+          name={icons.DOWNLOAD}
+          kind={kinds.DANGER}
+          title={`Import failed: ${errorMessage}`}
+        />
+      );
+    }
+
+    // TODO: show an icon when download is complete, but not imported yet?
+  }
+
+  if (errorMessage) {
+    return (
+      <Icon
+        name={icons.DOWNLOADING}
+        kind={kinds.DANGER}
+        title={`Download failed: ${errorMessage}`}
+      />
+    );
+  }
+
+  if (status === 'failed') {
+    return (
+      <Icon
+        name={icons.DOWNLOADING}
+        kind={kinds.DANGER}
+        title="Download failed: check download client for more details"
+      />
+    );
+  }
+
+  if (status === 'warning') {
+    return (
+      <Icon
+        name={icons.DOWNLOADING}
+        kind={kinds.WARNING}
+        title="Download warning: check download client for more details"
+      />
+    );
+  }
+
+  if (progress < 5) {
+    return (
+      <Icon
+        name={icons.DOWNLOADING}
+        title={`Episode is downloading - ${progress.toFixed(1)}% ${title}`}
+      />
+    );
+  }
+
+  return progressBar;
+}
+
+QueueDetails.propTypes = {
+  title: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
+  sizeleft: PropTypes.number.isRequired,
+  estimatedCompletionTime: PropTypes.string,
+  status: PropTypes.string.isRequired,
+  errorMessage: PropTypes.string,
+  progressBar: PropTypes.node.isRequired
+};
+
+export default QueueDetails;

frontend/src/Activity/Queue/QueueRow.css

@@ -0,0 +1,23 @@
+.quality {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 150px;
+}
+
+.protocol {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 100px;
+}
+
+.progress {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 150px;
+}
+
+.actions {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 70px;
+}

frontend/src/Activity/Queue/QueueRow.js

@@ -0,0 +1,348 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { icons, kinds } from 'Helpers/Props';
+import IconButton from 'Components/Link/IconButton';
+import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import ProgressBar from 'Components/ProgressBar';
+import TableRow from 'Components/Table/TableRow';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
+import ProtocolLabel from 'Activity/Queue/ProtocolLabel';
+import EpisodeTitleLink from 'Episode/EpisodeTitleLink';
+import EpisodeQuality from 'Episode/EpisodeQuality';
+import SeasonEpisodeNumber from 'Episode/SeasonEpisodeNumber';
+import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
+import ArtistNameLink from 'Artist/ArtistNameLink';
+import QueueStatusCell from './QueueStatusCell';
+import TimeleftCell from './TimeleftCell';
+import RemoveQueueItemModal from './RemoveQueueItemModal';
+import styles from './QueueRow.css';
+
+class QueueRow extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isRemoveQueueItemModalOpen: false,
+      isInteractiveImportModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onRemoveQueueItemPress = () => {
+    this.setState({ isRemoveQueueItemModalOpen: true });
+  }
+
+  onRemoveQueueItemModalConfirmed = (blacklist) => {
+    this.props.onRemoveQueueItemPress(blacklist);
+    this.setState({ isRemoveQueueItemModalOpen: false });
+  }
+
+  onRemoveQueueItemModalClose = () => {
+    this.setState({ isRemoveQueueItemModalOpen: false });
+  }
+
+  onInteractiveImportPress = () => {
+    this.setState({ isInteractiveImportModalOpen: true });
+  }
+
+  onInteractiveImportModalClose = () => {
+    this.setState({ isInteractiveImportModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      id,
+      downloadId,
+      episodeEntity,
+      title,
+      status,
+      trackedDownloadStatus,
+      statusMessages,
+      errorMessage,
+      series,
+      episode,
+      quality,
+      protocol,
+      indexer,
+      downloadClient,
+      estimatedCompletionTime,
+      timeleft,
+      size,
+      sizeleft,
+      showRelativeDates,
+      shortDateFormat,
+      timeFormat,
+      isGrabbing,
+      grabError,
+      isRemoving,
+      isSelected,
+      columns,
+      onSelectedChange,
+      onGrabPress
+    } = this.props;
+
+    const {
+      isRemoveQueueItemModalOpen,
+      isInteractiveImportModalOpen
+    } = this.state;
+
+    const progress = 100 - (sizeleft / size * 100);
+    const showInteractiveImport = status === 'Completed' && trackedDownloadStatus === 'Warning';
+    const isPending = status === 'Delay' || status === 'DownloadClientUnavailable';
+
+    return (
+      <TableRow>
+        <TableSelectCell
+          id={id}
+          isSelected={isSelected}
+          onSelectedChange={onSelectedChange}
+        />
+
+        {
+          columns.map((column) => {
+            const {
+              name,
+              isVisible
+            } = column;
+
+            if (!isVisible) {
+              return null;
+            }
+
+            if (name === 'status') {
+              return (
+                <QueueStatusCell
+                  key={name}
+                  sourceTitle={title}
+                  status={status}
+                  trackedDownloadStatus={trackedDownloadStatus}
+                  statusMessages={statusMessages}
+                  errorMessage={errorMessage}
+                />
+              );
+            }
+
+            if (name === 'series.sortTitle') {
+              return (
+                <TableRowCell key={name}>
+                  <ArtistNameLink
+                    titleSlug={series.titleSlug}
+                    title={series.title}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'series') {
+              return (
+                <TableRowCell key={name}>
+                  <ArtistNameLink
+                    titleSlug={series.titleSlug}
+                    title={series.title}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'episode') {
+              return (
+                <TableRowCell key={name}>
+                  <SeasonEpisodeNumber
+                    seasonNumber={episode.seasonNumber}
+                    episodeNumber={episode.episodeNumber}
+                    absoluteEpisodeNumber={episode.absoluteEpisodeNumber}
+                    seriesType={series.seriesType}
+                    sceneSeasonNumber={episode.sceneSeasonNumber}
+                    sceneEpisodeNumber={episode.sceneEpisodeNumber}
+                    sceneAbsoluteEpisodeNumber={episode.sceneAbsoluteEpisodeNumber}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'episodeTitle') {
+              return (
+                <TableRowCell key={name}>
+                  <EpisodeTitleLink
+                    episodeId={episode.id}
+                    artistId={series.id}
+                    episodeFileId={episode.episodeFileId}
+                    episodeEntity={episodeEntity}
+                    episodeTitle={episode.title}
+                    showOpenSeriesButton={true}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'quality') {
+              return (
+                <TableRowCell key={name}>
+                  <EpisodeQuality
+                    quality={quality}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'protocol') {
+              return (
+                <TableRowCell key={name}>
+                  <ProtocolLabel
+                    protocol={protocol}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'indexer') {
+              return (
+                <TableRowCell key={name}>
+                  {indexer}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'downloadClient') {
+              return (
+                <TableRowCell key={name}>
+                  {downloadClient}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'estimatedCompletionTime') {
+              return (
+                <TimeleftCell
+                  key={name}
+                  status={status}
+                  estimatedCompletionTime={estimatedCompletionTime}
+                  timeleft={timeleft}
+                  size={size}
+                  sizeleft={sizeleft}
+                  showRelativeDates={showRelativeDates}
+                  shortDateFormat={shortDateFormat}
+                  timeFormat={timeFormat}
+                />
+              );
+            }
+
+            if (name === 'progress') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.progress}
+                >
+                  {
+                    !!progress &&
+                      <ProgressBar
+                        progress={progress}
+                        title={`${progress.toFixed(1)}%`}
+                      />
+                  }
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'actions') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.actions}
+                >
+                  {
+                    showInteractiveImport &&
+                      <IconButton
+                        name={icons.INTERACTIVE}
+                        onPress={this.onInteractiveImportPress}
+                      />
+                  }
+
+                  {
+                    isPending &&
+                      <SpinnerIconButton
+                        name={icons.DOWNLOAD}
+                        kind={grabError ? kinds.DANGER : kinds.DEFAULT}
+                        isSpinning={isGrabbing}
+                        onPress={onGrabPress}
+                      />
+                  }
+
+                  <SpinnerIconButton
+                    name={icons.REMOVE}
+                    isSpinning={isRemoving}
+                    onPress={this.onRemoveQueueItemPress}
+                  />
+                </TableRowCell>
+              );
+            }
+          })
+        }
+
+        <InteractiveImportModal
+          isOpen={isInteractiveImportModalOpen}
+          downloadId={downloadId}
+          title={title}
+          onModalClose={this.onInteractiveImportModalClose}
+        />
+
+        <RemoveQueueItemModal
+          isOpen={isRemoveQueueItemModalOpen}
+          sourceTitle={title}
+          onRemovePress={this.onRemoveQueueItemModalConfirmed}
+          onModalClose={this.onRemoveQueueItemModalClose}
+        />
+      </TableRow>
+    );
+  }
+
+}
+
+QueueRow.propTypes = {
+  id: PropTypes.number.isRequired,
+  downloadId: PropTypes.string,
+  episodeEntity: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  status: PropTypes.string.isRequired,
+  trackedDownloadStatus: PropTypes.string,
+  statusMessages: PropTypes.arrayOf(PropTypes.object),
+  errorMessage: PropTypes.string.isRequired,
+  series: PropTypes.object.isRequired,
+  episode: PropTypes.object.isRequired,
+  quality: PropTypes.object.isRequired,
+  protocol: PropTypes.string.isRequired,
+  indexer: PropTypes.string,
+  downloadClient: PropTypes.string,
+  estimatedCompletionTime: PropTypes.string,
+  timeleft: PropTypes.string,
+  size: PropTypes.number,
+  sizeleft: PropTypes.number,
+  showRelativeDates: PropTypes.bool.isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired,
+  isGrabbing: PropTypes.bool.isRequired,
+  grabError: PropTypes.object,
+  isRemoving: PropTypes.bool.isRequired,
+  isSelected: PropTypes.bool,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onSelectedChange: PropTypes.func.isRequired,
+  onGrabPress: PropTypes.func.isRequired,
+  onRemoveQueueItemPress: PropTypes.func.isRequired
+};
+
+QueueRow.defaultProps = {
+  isGrabbing: false,
+  isRemoving: false
+};
+
+export default QueueRow;

frontend/src/Activity/Queue/QueueRowConnector.js

@@ -0,0 +1,76 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { grabQueueItem, removeQueueItem } from 'Store/Actions/queueActions';
+import createArtistSelector from 'Store/Selectors/createArtistSelector';
+import createEpisodeSelector from 'Store/Selectors/createEpisodeSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import QueueRow from './QueueRow';
+
+function createMapStateToProps() {
+  return createSelector(
+    createArtistSelector(),
+    createEpisodeSelector(),
+    createUISettingsSelector(),
+    (series, episode, uiSettings) => {
+      const result = _.pick(uiSettings, [
+        'showRelativeDates',
+        'shortDateFormat',
+        'timeFormat'
+      ]);
+
+      result.series = series;
+      result.episode = episode;
+
+      return result;
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  grabQueueItem,
+  removeQueueItem
+};
+
+class QueueRowConnector extends Component {
+
+  //
+  // Listeners
+
+  onGrabPress = () => {
+    this.props.grabQueueItem({ id: this.props.id });
+  }
+
+  onRemoveQueueItemPress = (blacklist) => {
+    this.props.removeQueueItem({ id: this.props.id, blacklist });
+  }
+
+  //
+  // Render
+
+  render() {
+    if (!this.props.episode) {
+      return null;
+    }
+
+    return (
+      <QueueRow
+        {...this.props}
+        onGrabPress={this.onGrabPress}
+        onRemoveQueueItemPress={this.onRemoveQueueItemPress}
+      />
+    );
+  }
+}
+
+QueueRowConnector.propTypes = {
+  id: PropTypes.number.isRequired,
+  episodeEntity: PropTypes.string.isRequired,
+  episode: PropTypes.object,
+  grabQueueItem: PropTypes.func.isRequired,
+  removeQueueItem: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(QueueRowConnector);

frontend/src/Activity/Queue/QueueStatusCell.css

@@ -0,0 +1,5 @@
+.status {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 30px;
+}

frontend/src/Activity/Queue/QueueStatusCell.js

@@ -0,0 +1,132 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { icons, kinds, tooltipPositions } from 'Helpers/Props';
+import Icon from 'Components/Icon';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import Popover from 'Components/Tooltip/Popover';
+import styles from './QueueStatusCell.css';
+
+function getDetailedPopoverBody(statusMessages) {
+  return (
+    <div>
+      {
+        statusMessages.map(({ title, messages }) => {
+          return (
+            <div key={title}>
+              {title}
+              <ul>
+                {
+                  messages.map((message) => {
+                    return (
+                      <li key={message}>
+                        {message}
+                      </li>
+                    );
+                  })
+                }
+              </ul>
+            </div>
+          );
+        })
+      }
+    </div>
+  );
+}
+
+function QueueStatusCell(props) {
+  const {
+    sourceTitle,
+    status,
+    trackedDownloadStatus = 'Ok',
+    statusMessages,
+    errorMessage
+  } = props;
+
+  const hasWarning = trackedDownloadStatus === 'Warning';
+  const hasError = trackedDownloadStatus === 'Error';
+
+  // status === 'downloading'
+  let iconName = icons.DOWNLOADING;
+  let iconKind = kinds.DEFAULT;
+  let title = 'Downloading';
+
+  if (hasWarning) {
+    iconKind = kinds.WARNING;
+  }
+
+  if (status === 'Paused') {
+    iconName = icons.PAUSED;
+    title = 'Paused';
+  }
+
+  if (status === 'Queued') {
+    iconName = icons.QUEUED;
+    title = 'Queued';
+  }
+
+  if (status === 'Completed') {
+    iconName = icons.DOWNLOADED;
+    title = 'Downloaded';
+  }
+
+  if (status === 'Delay') {
+    iconName = icons.PENDING;
+    title = 'Pending';
+  }
+
+  if (status === 'DownloadClientUnavailable') {
+    iconName = icons.PENDING;
+    iconKind = kinds.WARNING;
+    title = 'Pending - Download client is unavailable';
+  }
+
+  if (status === 'Failed') {
+    iconName = icons.DOWNLOADING;
+    iconKind = kinds.DANGER;
+    title = 'Download failed';
+  }
+
+  if (status === 'Warning') {
+    iconName = icons.DOWNLOADING;
+    iconKind = kinds.WARNING;
+    title = `Download warning: ${errorMessage || 'check download client for more details'}`;
+  }
+
+  if (hasError) {
+    if (status === 'Completed') {
+      iconName = icons.DOWNLOAD;
+      iconKind = kinds.DANGER;
+      title = `Import failed: ${sourceTitle}`;
+    } else {
+      iconName = icons.DOWNLOADING;
+      iconKind = kinds.DANGER;
+      title = 'Download failed';
+    }
+  }
+
+  return (
+    <TableRowCell className={styles.status}>
+      <Popover
+        anchor={
+          <Icon
+            name={iconName}
+            kind={iconKind}
+          />
+        }
+        title={title}
+        body={hasWarning || hasError ? getDetailedPopoverBody(statusMessages) : sourceTitle}
+        position={tooltipPositions.RIGHT}
+      />
+    </TableRowCell>
+  );
+}
+
+QueueStatusCell.propTypes = {
+  sourceTitle: PropTypes.string.isRequired,
+  status: PropTypes.string.isRequired,
+  trackedDownloadStatus: PropTypes.string,
+  statusMessages: PropTypes.arrayOf(PropTypes.object),
+  errorMessage: PropTypes.string
+};
+
+export default QueueStatusCell;

frontend/src/Activity/Queue/RemoveQueueItemModal.css

@@ -0,0 +1,3 @@
+.message {
+  margin-bottom: 30px;
+}

frontend/src/Activity/Queue/RemoveQueueItemModal.js

@@ -0,0 +1,114 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { inputTypes, kinds, sizes } from 'Helpers/Props';
+import Button from 'Components/Link/Button';
+import Modal from 'Components/Modal/Modal';
+import FormGroup from 'Components/Form/FormGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import styles from './RemoveQueueItemModal.css';
+
+class RemoveQueueItemModal extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      blacklist: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onBlacklistChange = ({ value }) => {
+    this.setState({ blacklist: value });
+  }
+
+  onRemoveQueueItemConfirmed = () => {
+    const blacklist = this.state.blacklist;
+
+    this.setState({ blacklist: false });
+    this.props.onRemovePress(blacklist);
+  }
+
+  onModalClose = () => {
+    this.setState({ blacklist: false });
+    this.props.onModalClose();
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      isOpen,
+      sourceTitle
+    } = this.props;
+
+    const blacklist = this.state.blacklist;
+
+    return (
+      <Modal
+        isOpen={isOpen}
+        size={sizes.MEDIUM}
+        onModalClose={this.onModalClose}
+      >
+        <ModalContent
+          onModalClose={this.onModalClose}
+        >
+          <ModalHeader>
+            Remove - {sourceTitle}
+          </ModalHeader>
+
+          <ModalBody>
+            <div className={styles.message}>
+              Are you sure you want to remove '{sourceTitle}' from the queue?
+            </div>
+
+            <FormGroup>
+              <FormLabel>Blacklist Release</FormLabel>
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="blacklist"
+                value={blacklist}
+                helpText="Prevents Sonarr from automatically grabbing this episode again"
+                onChange={this.onBlacklistChange}
+              />
+            </FormGroup>
+
+          </ModalBody>
+
+          <ModalFooter>
+            <Button onPress={this.onModalClose}>
+              Close
+            </Button>
+
+            <Button
+              kind={kinds.DANGER}
+              onPress={this.onRemoveQueueItemConfirmed}
+            >
+              Remove
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    );
+  }
+}
+
+RemoveQueueItemModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  sourceTitle: PropTypes.string.isRequired,
+  onRemovePress: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default RemoveQueueItemModal;

frontend/src/Activity/Queue/RemoveQueueItemsModal.css

@@ -0,0 +1,3 @@
+.message {
+  margin-bottom: 30px;
+}

frontend/src/Activity/Queue/RemoveQueueItemsModal.js

@@ -0,0 +1,114 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { inputTypes, kinds, sizes } from 'Helpers/Props';
+import Button from 'Components/Link/Button';
+import Modal from 'Components/Modal/Modal';
+import FormGroup from 'Components/Form/FormGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import styles from './RemoveQueueItemsModal.css';
+
+class RemoveQueueItemsModal extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      blacklist: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onBlacklistChange = ({ value }) => {
+    this.setState({ blacklist: value });
+  }
+
+  onRemoveQueueItemConfirmed = () => {
+    const blacklist = this.state.blacklist;
+
+    this.setState({ blacklist: false });
+    this.props.onRemovePress(blacklist);
+  }
+
+  onModalClose = () => {
+    this.setState({ blacklist: false });
+    this.props.onModalClose();
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      isOpen,
+      selectedCount
+    } = this.props;
+
+    const blacklist = this.state.blacklist;
+
+    return (
+      <Modal
+        isOpen={isOpen}
+        size={sizes.MEDIUM}
+        onModalClose={this.onModalClose}
+      >
+        <ModalContent
+          onModalClose={this.onModalClose}
+        >
+          <ModalHeader>
+            Remove Selected Item{selectedCount > 1 ? 's' : ''}
+          </ModalHeader>
+
+          <ModalBody>
+            <div className={styles.message}>
+              Are you sure you want to remove {selectedCount} item{selectedCount > 1 ? 's' : ''} from the queue?
+            </div>
+
+            <FormGroup>
+              <FormLabel>Blacklist Release</FormLabel>
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="blacklist"
+                value={blacklist}
+                helpText="Prevents Sonarr from automatically grabbing this episode again"
+                onChange={this.onBlacklistChange}
+              />
+            </FormGroup>
+
+          </ModalBody>
+
+          <ModalFooter>
+            <Button onPress={this.onModalClose}>
+              Close
+            </Button>
+
+            <Button
+              kind={kinds.DANGER}
+              onPress={this.onRemoveQueueItemConfirmed}
+            >
+              Remove
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    );
+  }
+}
+
+RemoveQueueItemsModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  selectedCount: PropTypes.number.isRequired,
+  onRemovePress: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default RemoveQueueItemsModal;

frontend/src/Activity/Queue/Status/QueueStatusConnector.js

@@ -0,0 +1,63 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchQueueStatus } from 'Store/Actions/queueActions';
+import PageSidebarStatus from 'Components/Page/Sidebar/PageSidebarStatus';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.app,
+    (state) => state.queue.queueStatus,
+    (app, status) => {
+      return {
+        isConnected: app.isConnected,
+        isReconnecting: app.isReconnecting,
+        isPopulated: status.isPopulated,
+        ...status.item
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  fetchQueueStatus
+};
+
+class QueueStatusConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    if (!this.props.isPopulated) {
+      this.props.fetchQueueStatus();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.isConnected && prevProps.isReconnecting) {
+      this.props.fetchQueueStatus();
+    }
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <PageSidebarStatus
+        {...this.props}
+      />
+    );
+  }
+}
+
+QueueStatusConnector.propTypes = {
+  isConnected: PropTypes.bool.isRequired,
+  isReconnecting: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  fetchQueueStatus: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(QueueStatusConnector);

frontend/src/Activity/Queue/TimeleftCell.css

@@ -0,0 +1,5 @@
+.timeleft {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 100px;
+}

frontend/src/Activity/Queue/TimeleftCell.js

@@ -0,0 +1,82 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import formatTime from 'Utilities/Date/formatTime';
+import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
+import getRelativeDate from 'Utilities/Date/getRelativeDate';
+import formatBytes from 'Utilities/Number/formatBytes';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import styles from './TimeleftCell.css';
+
+function TimeleftCell(props) {
+  const {
+    estimatedCompletionTime,
+    timeleft,
+    status,
+    size,
+    sizeleft,
+    showRelativeDates,
+    shortDateFormat,
+    timeFormat
+  } = props;
+
+  if (status === 'Delay') {
+    const date = getRelativeDate(estimatedCompletionTime, shortDateFormat, showRelativeDates);
+    const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true });
+
+    return (
+      <TableRowCell
+        className={styles.timeleft}
+        title={`Delaying download until ${date} at ${time}`}
+      >
+        -
+      </TableRowCell>
+    );
+  }
+
+  if (status === 'DownloadClientUnavailable') {
+    const date = getRelativeDate(estimatedCompletionTime, shortDateFormat, showRelativeDates);
+    const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true });
+
+    return (
+      <TableRowCell
+        className={styles.timeleft}
+        title={`Retrying download ${date} at ${time}`}
+      >
+        -
+      </TableRowCell>
+    );
+  }
+
+  if (!timeleft) {
+    return (
+      <TableRowCell className={styles.timeleft}>
+        -
+      </TableRowCell>
+    );
+  }
+
+  const totalSize = formatBytes(size);
+  const remainingSize = formatBytes(sizeleft);
+
+  return (
+    <TableRowCell
+      className={styles.timeleft}
+      title={`${remainingSize} / ${totalSize}`}
+    >
+      {formatTimeSpan(timeleft)}
+    </TableRowCell>
+  );
+}
+
+TimeleftCell.propTypes = {
+  estimatedCompletionTime: PropTypes.string,
+  timeleft: PropTypes.string,
+  status: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
+  sizeleft: PropTypes.number.isRequired,
+  showRelativeDates: PropTypes.bool.isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired
+};
+
+export default TimeleftCell;