Indexer and Search page work

frontend/src/Indexer/Index/Table/CapabilitiesLabel.js

@@ -0,0 +1,65 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Label from 'Components/Label';
+
+function CapabilitiesLabel(props) {
+  const {
+    supportsBooks,
+    supportsMovies,
+    supportsMusic,
+    supportsTv
+  } = props;
+
+  return (
+    <span>
+      {
+        supportsBooks ?
+          <Label>
+            {'Books'}
+          </Label> :
+          null
+      }
+
+      {
+        supportsMovies ?
+          <Label>
+            {'Movies'}
+          </Label> :
+          null
+      }
+
+      {
+        supportsMusic ?
+          <Label>
+            {'Music'}
+          </Label> :
+          null
+      }
+
+      {
+        supportsTv ?
+          <Label>
+            {'TV'}
+          </Label> :
+          null
+      }
+
+      {
+        !supportsTv && !supportsMusic && !supportsMovies && !supportsBooks ?
+          <Label>
+            {'None'}
+          </Label> :
+          null
+      }
+    </span>
+  );
+}
+
+CapabilitiesLabel.propTypes = {
+  supportsTv: PropTypes.bool.isRequired,
+  supportsBooks: PropTypes.bool.isRequired,
+  supportsMusic: PropTypes.bool.isRequired,
+  supportsMovies: PropTypes.bool.isRequired
+};
+
+export default CapabilitiesLabel;

frontend/src/Indexer/Index/Table/MovieIndexHeader.css

@@ -4,78 +4,31 @@
   flex: 0 0 60px;
 }
 
-.collection,
-.sortTitle {
+.name {
   composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 4 0 110px;
 }
 
-.minimumAvailability {
-  composes: headerCell  from '~Components/Table/VirtualTableHeaderCell.css';
-
-  flex: 0 0 140px;
-}
-
-.studio {
+.privacy,
+.protocol {
   composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
-  flex: 2 0 90px;
+  flex: 0 0 90px;
 }
 
-.qualityProfileId {
-  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
-
-  flex: 1 0 125px;
-}
-
-.inCinemas,
-.physicalRelease,
-.digitalRelease,
-.genres {
+.capabilities {
   composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 0 0 180px;
 }
 
-.added,
-.runtime {
+.added {
   composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 0 0 100px;
 }
 
-.movieStatus,
-.certification {
-  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
-
-  flex: 0 0 100px;
-}
-
-.year {
-  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
-
-  flex: 0 0 80px;
-}
-
-.path {
-  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
-
-  flex: 1 0 150px;
-}
-
-.sizeOnDisk {
-  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
-
-  flex: 0 0 120px;
-}
-
-.ratings {
-  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
-
-  flex: 0 0 80px;
-}
-
 .tags {
   composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 

frontend/src/Indexer/Index/Table/MovieIndexHeaderConnector.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { setMovieTableOption } from 'Store/Actions/movieIndexActions';
+import { setMovieTableOption } from 'Store/Actions/indexerIndexActions';
 import MovieIndexHeader from './MovieIndexHeader';
 
 function createMapDispatchToProps(dispatch, props) {

frontend/src/Indexer/Index/Table/MovieIndexRow.css

@@ -11,78 +11,31 @@
   flex: 0 0 60px;
 }
 
-.collection,
-.sortTitle {
+.name {
   composes: cell;
 
   flex: 4 0 110px;
 }
 
-.minimumAvailability {
+.protocol,
+.privacy {
   composes: cell;
 
-  flex: 0 0 140px;
+  flex: 0 0 90px;
 }
 
-.studio {
-  composes: cell;
-
-  flex: 2 0 90px;
-}
-
-.qualityProfileId {
-  composes: cell;
-
-  flex: 1 0 125px;
-}
-
-.inCinemas,
-.physicalRelease,
-.digitalRelease,
-.genres {
+.capabilities {
   composes: cell;
 
   flex: 0 0 180px;
 }
 
-.added,
-.runtime {
+.added {
   composes: cell;
 
   flex: 0 0 100px;
 }
 
-.movieStatus,
-.certification {
-  composes: cell;
-
-  flex: 0 0 100px;
-}
-
-.year {
-  composes: cell;
-
-  flex: 0 0 80px;
-}
-
-.path {
-  composes: cell;
-
-  flex: 1 0 150px;
-}
-
-.sizeOnDisk {
-  composes: cell;
-
-  flex: 0 0 120px;
-}
-
-.ratings {
-  composes: cell;
-
-  flex: 0 0 80px;
-}
-
 .tags {
   composes: cell;
 

frontend/src/Indexer/Index/Table/MovieIndexRow.js

@@ -1,24 +1,16 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import HeartRating from 'Components/HeartRating';
-import Icon from 'Components/Icon';
+import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
-import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
 import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
 import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
 import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
-import TagListConnector from 'Components/TagListConnector';
-import Tooltip from 'Components/Tooltip/Tooltip';
 import { icons, kinds } from 'Helpers/Props';
 import DeleteMovieModal from 'Indexer/Delete/DeleteMovieModal';
-import EditMovieModalConnector from 'Indexer/Edit/EditMovieModalConnector';
-import MovieFileStatusConnector from 'Indexer/MovieFileStatusConnector';
-import MovieTitleLink from 'Indexer/MovieTitleLink';
-import formatRuntime from 'Utilities/Date/formatRuntime';
-import formatBytes from 'Utilities/Number/formatBytes';
-import titleCase from 'Utilities/String/titleCase';
+import EditIndexerModalConnector from 'Settings/Indexers/Indexers/EditIndexerModalConnector';
 import translate from 'Utilities/String/translate';
-import MovieStatusCell from './MovieStatusCell';
+import CapabilitiesLabel from './CapabilitiesLabel';
+import ProtocolLabel from './ProtocolLabel';
 import styles from './MovieIndexRow.css';
 
 class MovieIndexRow extends Component {
@@ -30,22 +22,22 @@ class MovieIndexRow extends Component {
     super(props, context);
 
     this.state = {
-      isEditMovieModalOpen: false,
+      isEditIndexerModalOpen: false,
       isDeleteMovieModalOpen: false
     };
   }
 
-  onEditMoviePress = () => {
-    this.setState({ isEditMovieModalOpen: true });
+  onEditIndexerPress = () => {
+    this.setState({ isEditIndexerModalOpen: true });
   }
 
-  onEditMovieModalClose = () => {
-    this.setState({ isEditMovieModalOpen: false });
+  onEditIndexerModalClose = () => {
+    this.setState({ isEditIndexerModalOpen: false });
   }
 
   onDeleteMoviePress = () => {
     this.setState({
-      isEditMovieModalOpen: false,
+      isEditIndexerModalOpen: false,
       isDeleteMovieModalOpen: true
     });
   }
@@ -65,42 +57,25 @@ class MovieIndexRow extends Component {
   render() {
     const {
       id,
-      monitored,
-      status,
-      title,
-      titleSlug,
-      collection,
-      studio,
-      qualityProfile,
+      name,
+      enableRss,
+      enableAutomaticSearch,
+      enableInteractiveSearch,
+      protocol,
+      privacy,
       added,
-      year,
-      inCinemas,
-      physicalRelease,
-      digitalRelease,
-      runtime,
-      minimumAvailability,
-      path,
-      sizeOnDisk,
-      genres,
-      ratings,
-      certification,
-      tags,
-      showSearchAction,
+      supportsTv,
+      supportsBooks,
+      supportsMusic,
+      supportsMovies,
       columns,
-      isRefreshingMovie,
-      isSearchingMovie,
       isMovieEditorActive,
       isSelected,
-      onRefreshMoviePress,
-      onSearchPress,
-      onSelectedChange,
-      queueStatus,
-      queueState,
-      movieRuntimeFormat
+      onSelectedChange
     } = this.props;
 
     const {
-      isEditMovieModalOpen,
+      isEditIndexerModalOpen,
       isDeleteMovieModalOpen
     } = this.state;
 
@@ -109,7 +84,6 @@ class MovieIndexRow extends Component {
         {
           columns.map((column) => {
             const {
-              name,
               isVisible
             } = column;
 
@@ -117,12 +91,12 @@ class MovieIndexRow extends Component {
               return null;
             }
 
-            if (isMovieEditorActive && name === 'select') {
+            if (isMovieEditorActive && column.name === 'select') {
               return (
                 <VirtualTableSelectCell
                   inputClassName={styles.checkInput}
                   id={id}
-                  key={name}
+                  key={column.name}
                   isSelected={isSelected}
                   isDisabled={false}
                   onSelectedChange={onSelectedChange}
@@ -130,275 +104,112 @@ class MovieIndexRow extends Component {
               );
             }
 
-            if (name === 'status') {
+            if (column.name === 'status') {
               return (
-                <MovieStatusCell
-                  key={name}
-                  className={styles[name]}
-                  monitored={monitored}
-                  status={status}
-                  component={VirtualTableRowCell}
-                />
+                <VirtualTableRowCell
+                  key={column.name}
+                  className={styles[column.name]}
+                >
+                  {
+                    enableRss || enableAutomaticSearch || enableInteractiveSearch ?
+                      <Label kind={kinds.SUCCESS}>
+                        {'Enabled'}
+                      </Label>:
+                      null
+                  }
+                  {
+                    !enableRss && !enableAutomaticSearch && !enableInteractiveSearch ?
+                      <Label
+                        kind={kinds.DISABLED}
+                        outline={true}
+                      >
+                        {translate('Disabled')}
+                      </Label> :
+                      null
+                  }
+                </VirtualTableRowCell>
               );
             }
 
-            if (name === 'sortTitle') {
+            if (column.name === 'name') {
               return (
                 <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
+                  key={column.name}
+                  className={styles[column.name]}
                 >
+                  {name}
+                </VirtualTableRowCell>
+              );
+            }
 
-                  <MovieTitleLink
-                    titleSlug={titleSlug}
-                    title={title}
+            if (column.name === 'privacy') {
+              return (
+                <VirtualTableRowCell
+                  key={column.name}
+                  className={styles[column.name]}
+                >
+                  <Label>
+                    {privacy}
+                  </Label>
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (column.name === 'protocol') {
+              return (
+                <VirtualTableRowCell
+                  key={column.name}
+                  className={styles[column.name]}
+                >
+                  <ProtocolLabel
+                    protocol={protocol}
                   />
-
                 </VirtualTableRowCell>
               );
             }
 
-            if (name === 'collection') {
+            if (column.name === 'capabilities') {
               return (
                 <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
+                  key={column.name}
+                  className={styles[column.name]}
                 >
-                  {collection ? collection.name : null }
+                  <CapabilitiesLabel
+                    supportsBooks={supportsBooks}
+                    supportsMovies={supportsMovies}
+                    supportsMusic={supportsMusic}
+                    supportsTv={supportsTv}
+                  />
                 </VirtualTableRowCell>
               );
             }
 
-            if (name === 'studio') {
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  {studio}
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'qualityProfileId') {
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  {qualityProfile.name}
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'added') {
+            if (column.name === 'added') {
               return (
                 <RelativeDateCellConnector
-                  key={name}
-                  className={styles[name]}
+                  key={column.name}
+                  className={styles[column.name]}
                   date={added}
                   component={VirtualTableRowCell}
                 />
               );
             }
 
-            if (name === 'year') {
+            if (column.name === 'actions') {
               return (
                 <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
+                  key={column.name}
+                  className={styles[column.name]}
                 >
-                  {year}
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'inCinemas') {
-              return (
-                <RelativeDateCellConnector
-                  key={name}
-                  className={styles[name]}
-                  date={inCinemas}
-                  component={VirtualTableRowCell}
-                />
-              );
-            }
-
-            if (name === 'digitalRelease') {
-              return (
-                <RelativeDateCellConnector
-                  key={name}
-                  className={styles[name]}
-                  date={digitalRelease}
-                  component={VirtualTableRowCell}
-                />
-              );
-            }
-
-            if (name === 'physicalRelease') {
-              return (
-                <RelativeDateCellConnector
-                  key={name}
-                  className={styles[name]}
-                  date={physicalRelease}
-                  component={VirtualTableRowCell}
-                />
-              );
-            }
-
-            if (name === 'runtime') {
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  {formatRuntime(runtime, movieRuntimeFormat)}
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'minimumAvailability') {
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  {titleCase(minimumAvailability)}
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'path') {
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                  title={path}
-                >
-                  {path}
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'sizeOnDisk') {
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  {formatBytes(sizeOnDisk)}
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'genres') {
-              const joinedGenres = genres.join(', ');
-
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  <span title={joinedGenres}>
-                    {joinedGenres}
-                  </span>
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'movieStatus') {
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  <MovieFileStatusConnector
-                    movieId={id}
-                    queueStatus={queueStatus}
-                    queueState={queueState}
+                  <IconButton
+                    name={icons.EXTERNAL_LINK}
+                    title={'Website'}
                   />
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'ratings') {
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  <HeartRating
-                    rating={ratings.value}
-                  />
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'certification') {
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  {certification}
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'tags') {
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  <TagListConnector
-                    tags={tags}
-                  />
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'actions') {
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  <span className={styles.externalLinks}>
-                    <Tooltip
-                      anchor={
-                        <Icon
-                          name={icons.EXTERNAL_LINK}
-                          size={12}
-                        />
-                      }
-                      canFlip={true}
-                      kind={kinds.INVERSE}
-                    />
-                  </span>
-
-                  <SpinnerIconButton
-                    name={icons.REFRESH}
-                    title={translate('RefreshMovie')}
-                    isSpinning={isRefreshingMovie}
-                    onPress={onRefreshMoviePress}
-                  />
-
-                  {
-                    showSearchAction &&
-                      <SpinnerIconButton
-                        className={styles.action}
-                        name={icons.SEARCH}
-                        title={translate('SearchForMovie')}
-                        isSpinning={isSearchingMovie}
-                        onPress={onSearchPress}
-                      />
-                  }
 
                   <IconButton
                     name={icons.EDIT}
                     title={translate('EditMovie')}
-                    onPress={this.onEditMoviePress}
+                    onPress={this.onEditIndexerPress}
                   />
                 </VirtualTableRowCell>
               );
@@ -408,11 +219,10 @@ class MovieIndexRow extends Component {
           })
         }
 
-        <EditMovieModalConnector
-          isOpen={isEditMovieModalOpen}
-          movieId={id}
-          onModalClose={this.onEditMovieModalClose}
-          onDeleteMoviePress={this.onDeleteMoviePress}
+        <EditIndexerModalConnector
+          id={id}
+          isOpen={isEditIndexerModalOpen}
+          onModalClose={this.onEditIndexerModalClose}
         />
 
         <DeleteMovieModal
@@ -427,46 +237,23 @@ class MovieIndexRow extends Component {
 
 MovieIndexRow.propTypes = {
   id: PropTypes.number.isRequired,
-  monitored: PropTypes.bool.isRequired,
-  status: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  titleSlug: PropTypes.string.isRequired,
-  studio: PropTypes.string,
-  collection: PropTypes.object,
-  qualityProfile: PropTypes.object.isRequired,
-  added: PropTypes.string,
-  year: PropTypes.number,
-  inCinemas: PropTypes.string,
-  physicalRelease: PropTypes.string,
-  digitalRelease: PropTypes.string,
-  runtime: PropTypes.number,
-  minimumAvailability: PropTypes.string.isRequired,
-  path: PropTypes.string.isRequired,
-  sizeOnDisk: PropTypes.number.isRequired,
-  genres: PropTypes.arrayOf(PropTypes.string).isRequired,
-  ratings: PropTypes.object.isRequired,
-  certification: PropTypes.string,
+  protocol: PropTypes.string.isRequired,
+  privacy: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  enableRss: PropTypes.bool.isRequired,
+  enableAutomaticSearch: PropTypes.bool.isRequired,
+  enableInteractiveSearch: PropTypes.bool.isRequired,
+  supportsTv: PropTypes.bool.isRequired,
+  supportsBooks: PropTypes.bool.isRequired,
+  supportsMusic: PropTypes.bool.isRequired,
+  supportsMovies: PropTypes.bool.isRequired,
+  added: PropTypes.string.isRequired,
   tags: PropTypes.arrayOf(PropTypes.number).isRequired,
-  showSearchAction: PropTypes.bool.isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  isRefreshingMovie: PropTypes.bool.isRequired,
   isSearchingMovie: PropTypes.bool.isRequired,
-  onRefreshMoviePress: PropTypes.func.isRequired,
-  onSearchPress: PropTypes.func.isRequired,
   isMovieEditorActive: PropTypes.bool.isRequired,
   isSelected: PropTypes.bool,
-  onSelectedChange: PropTypes.func.isRequired,
-  tmdbId: PropTypes.number.isRequired,
-  imdbId: PropTypes.string,
-  youTubeTrailerId: PropTypes.string,
-  queueStatus: PropTypes.string,
-  queueState: PropTypes.string,
-  movieRuntimeFormat: PropTypes.string.isRequired
-};
-
-MovieIndexRow.defaultProps = {
-  genres: [],
-  tags: []
+  onSelectedChange: PropTypes.func.isRequired
 };
 
 export default MovieIndexRow;

frontend/src/Indexer/Index/Table/MovieIndexTable.js

@@ -65,7 +65,6 @@ class MovieIndexTable extends Component {
           component={MovieIndexRow}
           columns={columns}
           movieId={movie.id}
-          qualityProfileId={movie.qualityProfileId}
           isSelected={selectedState[movie.id]}
           onSelectedChange={onSelectedChange}
           isMovieEditorActive={isMovieEditorActive}

frontend/src/Indexer/Index/Table/MovieIndexTableConnector.js

@@ -1,13 +1,13 @@
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { setMovieSort } from 'Store/Actions/movieIndexActions';
+import { setMovieSort } from 'Store/Actions/indexerIndexActions';
 import MovieIndexTable from './MovieIndexTable';
 
 function createMapStateToProps() {
   return createSelector(
     (state) => state.app.dimensions,
-    (state) => state.movieIndex.tableOptions,
-    (state) => state.movieIndex.columns,
+    (state) => state.indexerIndex.tableOptions,
+    (state) => state.indexerIndex.columns,
     (state) => state.settings.ui.item.movieRuntimeFormat,
     (dimensions, tableOptions, columns, movieRuntimeFormat) => {
       return {

frontend/src/Indexer/Index/Table/MovieIndexTableOptionsConnector.js

@@ -4,7 +4,7 @@ import MovieIndexTableOptions from './MovieIndexTableOptions';
 
 function createMapStateToProps() {
   return createSelector(
-    (state) => state.movieIndex.tableOptions,
+    (state) => state.indexerIndex.tableOptions,
     (tableOptions) => {
       return tableOptions;
     }

frontend/src/Indexer/Index/Table/MovieStatusCell.css

@@ -1,9 +0,0 @@
-.status {
-  composes: cell from '~Components/Table/Cells/TableRowCell.css';
-
-  width: 60px;
-}
-
-.statusIcon {
-  width: 20px !important;
-}

frontend/src/Indexer/Index/Table/MovieStatusCell.js

@@ -1,54 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Icon from 'Components/Icon';
-import VirtualTableRowCell from 'Components/Table/Cells/TableRowCell';
-import { icons } from 'Helpers/Props';
-import { getMovieStatusDetails } from 'Indexer/MovieStatus';
-import translate from 'Utilities/String/translate';
-import styles from './MovieStatusCell.css';
-
-function MovieStatusCell(props) {
-  const {
-    className,
-    monitored,
-    status,
-    component: Component,
-    ...otherProps
-  } = props;
-
-  const statusDetails = getMovieStatusDetails(status);
-
-  return (
-    <Component
-      className={className}
-      {...otherProps}
-    >
-      <Icon
-        className={styles.statusIcon}
-        name={monitored ? icons.MONITORED : icons.UNMONITORED}
-        title={monitored ? translate('MovieIsMonitored') : translate('MovieIsUnmonitored')}
-      />
-
-      <Icon
-        className={styles.statusIcon}
-        name={statusDetails.icon}
-        title={`${statusDetails.title}: ${statusDetails.message}`}
-      />
-
-    </Component>
-  );
-}
-
-MovieStatusCell.propTypes = {
-  className: PropTypes.string.isRequired,
-  monitored: PropTypes.bool.isRequired,
-  status: PropTypes.string.isRequired,
-  component: PropTypes.elementType
-};
-
-MovieStatusCell.defaultProps = {
-  className: styles.status,
-  component: VirtualTableRowCell
-};
-
-export default MovieStatusCell;

frontend/src/Indexer/Index/Table/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/Indexer/Index/Table/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;