New: Show detailed queue status on Calendar and Series Details

Closes #3775
2022-12-29 19:08:14 -08:00 · 2022-12-29 19:08:14 -08:00 · 8fff59ff10
parent ca61efa57f
commit 8fff59ff10
11 changed files with 279 additions and 232 deletions
--- a/frontend/src/Activity/Queue/QueueDetails.css
+++ b/frontend/src/Activity/Queue/QueueDetails.css
@ -0,0 +1,5 @@
+.progressBarContainer {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
--- a/frontend/src/Activity/Queue/QueueDetails.js
+++ b/frontend/src/Activity/Queue/QueueDetails.js
@ -1,115 +1,70 @@
-import moment from 'moment';
 import PropTypes from 'prop-types';
 import React from 'react';
 import Icon from 'Components/Icon';
-import { icons, kinds } from 'Helpers/Props';
+import Popover from 'Components/Tooltip/Popover';
+import { icons, tooltipPositions } from 'Helpers/Props';
+import QueueStatus from './QueueStatus';
+import styles from './QueueDetails.css';

 function QueueDetails(props) {
  const {
    title,
    size,
    sizeleft,
-    estimatedCompletionTime,
    status,
    trackedDownloadState,
    trackedDownloadStatus,
+    statusMessages,
    errorMessage,
    progressBar
  } = props;

  const progress = (100 - sizeleft / size * 100);
+  const isDownloading = status === 'downloading';
+  const isPaused = status === 'paused';
+  const hasWarning = trackedDownloadStatus === 'warning';
+  const hasError = trackedDownloadStatus === 'error';

-  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}`}
-        />
-      );
-    }
-
-    if (trackedDownloadStatus === 'warning') {
-      return (
-        <Icon
-          name={icons.DOWNLOAD}
-          kind={kinds.WARNING}
-          title={'Downloaded - Unable to Import: check logs for details'}
-        />
-      );
-    }
-
-    if (trackedDownloadState === 'importPending') {
-      return (
-        <Icon
-          name={icons.DOWNLOAD}
-          kind={kinds.PURPLE}
-          title={'Downloaded - Waiting to Import'}
-        />
-      );
-    }
-
-    if (trackedDownloadState === 'importing') {
-      return (
-        <Icon
-          name={icons.DOWNLOAD}
-          kind={kinds.PURPLE}
-          title={'Downloaded - Importing'}
-        />
-      );
-    }
-  }
-
-  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 (
+    (isDownloading || isPaused) &&
+    !hasWarning &&
+    !hasError
+  ) {
+    const state = isPaused ? 'Paused' : 'Downloading';

    if (progress < 5) {
      return (
        <Icon
          name={icons.DOWNLOADING}
-        title={`Episode is downloading - ${progress.toFixed(1)}% ${title}`}
+          title={`${state} - ${progress.toFixed(1)}% ${title}`}
        />
      );
    }

-  return progressBar;
+    return (
+      <Popover
+        className={styles.progressBarContainer}
+        anchor={progressBar}
+        title={`${state} - ${progress.toFixed(1)}%`}
+        body={
+          <div>{title}</div>
+        }
+        position={tooltipPositions.LEFT}
+      />
+    );
+  }
+
+  return (
+    <QueueStatus
+      sourceTitle={title}
+      status={status}
+      trackedDownloadStatus={trackedDownloadStatus}
+      trackedDownloadState={trackedDownloadState}
+      statusMessages={statusMessages}
+      errorMessage={errorMessage}
+      position={tooltipPositions.LEFT}
+    />
+  );
 }

 QueueDetails.propTypes = {
@ -120,6 +75,7 @@ QueueDetails.propTypes = {
  status: PropTypes.string.isRequired,
  trackedDownloadState: PropTypes.string.isRequired,
  trackedDownloadStatus: PropTypes.string.isRequired,
+  statusMessages: PropTypes.arrayOf(PropTypes.object),
  errorMessage: PropTypes.string,
  progressBar: PropTypes.node.isRequired
 };
--- a/frontend/src/Activity/Queue/QueueStatus.css
+++ b/frontend/src/Activity/Queue/QueueStatus.css
@ -0,0 +1,3 @@
+.noMessages {
+  margin-bottom: 10px;
+}
--- a/frontend/src/Activity/Queue/QueueStatus.js
+++ b/frontend/src/Activity/Queue/QueueStatus.js
@ -0,0 +1,160 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Icon from 'Components/Icon';
+import Popover from 'Components/Tooltip/Popover';
+import { icons, kinds, tooltipPositions } from 'Helpers/Props';
+import styles from './QueueStatus.css';
+
+function getDetailedPopoverBody(statusMessages) {
+  return (
+    <div>
+      {
+        statusMessages.map(({ title, messages }) => {
+          return (
+            <div
+              key={title}
+              className={messages.length ? undefined: styles.noMessages}
+            >
+              {title}
+              <ul>
+                {
+                  messages.map((message) => {
+                    return (
+                      <li key={message}>
+                        {message}
+                      </li>
+                    );
+                  })
+                }
+              </ul>
+            </div>
+          );
+        })
+      }
+    </div>
+  );
+}
+
+function QueueStatus(props) {
+  const {
+    sourceTitle,
+    status,
+    trackedDownloadStatus,
+    trackedDownloadState,
+    statusMessages,
+    errorMessage,
+    position,
+    canFlip
+  } = props;
+
+  const hasWarning = trackedDownloadStatus === 'warning';
+  const hasError = trackedDownloadStatus === 'error';
+
+  // status === 'downloading'
+  let iconName = icons.DOWNLOADING;
+  let iconKind = kinds.DEFAULT;
+  let title = 'Downloading';
+
+  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 (trackedDownloadState === 'importPending') {
+      title += ' - Waiting to Import';
+      iconKind = kinds.PURPLE;
+    }
+
+    if (trackedDownloadState === 'importing') {
+      title += ' - Importing';
+      iconKind = kinds.PURPLE;
+    }
+
+    if (trackedDownloadState === 'failedPending') {
+      title += ' - Waiting to Process';
+      iconKind = kinds.DANGER;
+    }
+  }
+
+  if (hasWarning) {
+    iconKind = kinds.WARNING;
+  }
+
+  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 (
+    <Popover
+      anchor={
+        <Icon
+          name={iconName}
+          kind={iconKind}
+        />
+      }
+      title={title}
+      body={hasWarning || hasError ? getDetailedPopoverBody(statusMessages) : sourceTitle}
+      position={position}
+      canFlip={canFlip}
+    />
+  );
+}
+
+QueueStatus.propTypes = {
+  sourceTitle: PropTypes.string.isRequired,
+  status: PropTypes.string.isRequired,
+  trackedDownloadStatus: PropTypes.string.isRequired,
+  trackedDownloadState: PropTypes.string.isRequired,
+  statusMessages: PropTypes.arrayOf(PropTypes.object),
+  errorMessage: PropTypes.string,
+  position: PropTypes.oneOf(tooltipPositions.all).isRequired,
+  canFlip: PropTypes.bool.isRequired
+};
+
+QueueStatus.defaultProps = {
+  trackedDownloadStatus: 'Ok',
+  trackedDownloadState: 'Downloading',
+  canFlip: false
+};
+
+export default QueueStatus;
--- a/frontend/src/Activity/Queue/QueueStatusCell.js
+++ b/frontend/src/Activity/Queue/QueueStatusCell.js
@ -1,41 +1,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import Icon from 'Components/Icon';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
-import Popover from 'Components/Tooltip/Popover';
-import { icons, kinds, tooltipPositions } from 'Helpers/Props';
+import { tooltipPositions } from 'Helpers/Props';
+import QueueStatus from './QueueStatus';
 import styles from './QueueStatusCell.css';

-function getDetailedPopoverBody(statusMessages) {
-  return (
-    <div>
-      {
-        statusMessages.map(({ title, messages }) => {
-          return (
-            <div
-              key={title}
-              className={messages.length ? undefined: styles.noMessages}
-            >
-              {title}
-              <ul>
-                {
-                  messages.map((message) => {
-                    return (
-                      <li key={message}>
-                        {message}
-                      </li>
-                    );
-                  })
-                }
-              </ul>
-            </div>
-          );
-        })
-      }
-    </div>
-  );
-}
-
 function QueueStatusCell(props) {
  const {
    sourceTitle,
@ -46,96 +15,16 @@ function QueueStatusCell(props) {
    errorMessage
  } = props;

-  const hasWarning = trackedDownloadStatus === 'warning';
-  const hasError = trackedDownloadStatus === 'error';
-
-  // status === 'downloading'
-  let iconName = icons.DOWNLOADING;
-  let iconKind = kinds.DEFAULT;
-  let title = 'Downloading';
-
-  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 (trackedDownloadState === 'importPending') {
-      title += ' - Waiting to Import';
-      iconKind = kinds.PURPLE;
-    }
-
-    if (trackedDownloadState === 'importing') {
-      title += ' - Importing';
-      iconKind = kinds.PURPLE;
-    }
-
-    if (trackedDownloadState === 'failedPending') {
-      title += ' - Waiting to Process';
-      iconKind = kinds.DANGER;
-    }
-  }
-
-  if (hasWarning) {
-    iconKind = kinds.WARNING;
-  }
-
-  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}
+      <QueueStatus
+        sourceTitle={sourceTitle}
+        status={status}
+        trackedDownloadStatus={trackedDownloadStatus}
+        trackedDownloadState={trackedDownloadState}
+        statusMessages={statusMessages}
+        errorMessage={errorMessage}
        position={tooltipPositions.RIGHT}
-        canFlip={false}
      />
    </TableRowCell>
  );
--- a/frontend/src/Calendar/Agenda/AgendaEvent.css
+++ b/frontend/src/Calendar/Agenda/AgendaEvent.css
@ -1,15 +1,30 @@
 .event {
-  display: flex;
-  overflow-x: hidden;
+  position: relative;
  padding: 5px;
  border-bottom: 1px solid var(--borderColor);
-  font-size: $defaultFontSize;
+}
+
+.underlay {
+  @add-mixin cover;

  &:hover {
    background-color: var(--tableRowHoverBackgroundColor);
  }
 }

+.overlay {
+  @add-mixin linkOverlay;
+
+  position: relative;
+  display: flex;
+  overflow-x: hidden;
+  font-size: $defaultFontSize;
+
+  &:global(.colorImpaired) {
+    border-left-width: 5px;
+  }
+}
+
 .eventWrapper {
  display: flex;
  flex: 1 0 1px;
@ -56,6 +71,8 @@

 .statusIcon {
  margin-left: 3px;
+  cursor: default;
+  pointer-events: all;
 }

 /*
--- a/frontend/src/Calendar/Agenda/AgendaEvent.js
+++ b/frontend/src/Calendar/Agenda/AgendaEvent.js
@ -74,12 +74,13 @@ class AgendaEvent extends Component {
    const seasonStatistics = season?.statistics || {};

    return (
-      <div>
+      <div className={styles.event}>
        <Link
-          className={styles.event}
-          component="div"
+          className={styles.underlay}
          onPress={this.onPress}
-        >
+        />
+
+        <div className={styles.overlay}>
          <div className={styles.date}>
            {
              showDate &&
@ -209,7 +210,7 @@ class AgendaEvent extends Component {
                />
            }
          </div>
-        </Link>
+        </div>

        <EpisodeDetailsModal
          isOpen={this.state.isDetailsModalOpen}
--- a/frontend/src/Calendar/Events/CalendarEvent.css
+++ b/frontend/src/Calendar/Events/CalendarEvent.css
@ -1,11 +1,22 @@
 $fullColorGradient: rgba(244, 245, 246, 0.2);

 .event {
-  overflow-x: hidden;
+  position: relative;
  margin: 4px 2px;
  padding: 5px;
  border-bottom: 1px solid var(--calendarBorderColor);
  border-left: 4px solid var(--calendarBorderColor);
+}
+
+.underlay {
+  @add-mixin cover;
+}
+
+.overlay {
+  @add-mixin linkOverlay;
+
+  position: relative;
+  overflow-x: hidden;
  font-size: 12px;

  &:global(.colorImpaired) {
@ -45,6 +56,8 @@ $fullColorGradient: rgba(244, 245, 246, 0.2);

 .statusIcon {
  margin-left: 3px;
+  cursor: default;
+  pointer-events: all;
 }

 .airTime {
--- a/frontend/src/Calendar/Events/CalendarEvent.js
+++ b/frontend/src/Calendar/Events/CalendarEvent.js
@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import moment from 'moment';
 import PropTypes from 'prop-types';
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import getStatusStyle from 'Calendar/getStatusStyle';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
@ -82,17 +82,20 @@ class CalendarEvent extends Component {
    const seasonStatistics = season?.statistics || {};

    return (
-      <Fragment>
-        <Link
+      <div
        className={classNames(
          styles.event,
          styles[statusStyle],
          colorImpairedMode && 'colorImpaired',
          fullColorEvents && 'fullColor'
        )}
-          component="div"
-          onPress={this.onPress}
      >
+        <Link
+          className={styles.underlay}
+          onPress={this.onPress}
+        />
+
+        <div className={styles.overlay} >
          <div className={styles.info}>
            <div className={styles.seriesTitle}>
              {series.title}
@ -215,7 +218,7 @@ class CalendarEvent extends Component {
          <div className={styles.airTime}>
            {formatTime(airDateUtc, timeFormat)} - {formatTime(endTime.toISOString(), timeFormat, { includeMinuteZero: true })}
          </div>
-        </Link>
+        </div>

        <EpisodeDetailsModal
          isOpen={this.state.isDetailsModalOpen}
@ -226,7 +229,7 @@ class CalendarEvent extends Component {
          showOpenSeriesButton={true}
          onModalClose={this.onDetailsModalClose}
        />
-      </Fragment>
+      </div>
    );
  }
 }
--- a/frontend/src/Calendar/Events/CalendarEventQueueDetails.js
+++ b/frontend/src/Calendar/Events/CalendarEventQueueDetails.js
@ -12,6 +12,7 @@ function CalendarEventQueueDetails(props) {
    status,
    trackedDownloadState,
    trackedDownloadStatus,
+    statusMessages,
    errorMessage
  } = props;

@ -26,16 +27,15 @@ function CalendarEventQueueDetails(props) {
      status={status}
      trackedDownloadState={trackedDownloadState}
      trackedDownloadStatus={trackedDownloadStatus}
+      statusMessages={statusMessages}
      errorMessage={errorMessage}
      progressBar={
-        <div title={`Episode is downloading - ${progress.toFixed(1)}% ${title}`}>
        <CircularProgressBar
          progress={progress}
          size={20}
          strokeWidth={2}
          strokeColor={'#7a43b6'}
        />
-        </div>
      }
    />
  );
@ -49,6 +49,7 @@ CalendarEventQueueDetails.propTypes = {
  status: PropTypes.string.isRequired,
  trackedDownloadState: PropTypes.string.isRequired,
  trackedDownloadStatus: PropTypes.string.isRequired,
+  statusMessages: PropTypes.arrayOf(PropTypes.object),
  errorMessage: PropTypes.string
 };

--- a/frontend/src/Episode/EpisodeStatus.js
+++ b/frontend/src/Episode/EpisodeStatus.js
@ -35,7 +35,6 @@ function EpisodeStatus(props) {
          {...queueItem}
          progressBar={
            <ProgressBar
-              title={`Episode is downloading - ${progress.toFixed(1)}% ${queueItem.title}`}
              progress={progress}
              kind={kinds.PURPLE}
              size={sizes.MEDIUM}