feat(frontend): show alert when there are no default radarr/sonarr servers

fixes #344
pull/376/head
sct 4 years ago
parent 2fe53ec5a8
commit 0d088e085e

@ -1,5 +1,5 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { defineMessages, FormattedMessage } from 'react-intl'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import Badge from '../Common/Badge'; import Badge from '../Common/Badge';
import Button from '../Common/Button'; import Button from '../Common/Button';
import useSWR from 'swr'; import useSWR from 'swr';
@ -31,8 +31,48 @@ const messages = defineMessages({
activeProfile: 'Active Profile', activeProfile: 'Active Profile',
addradarr: 'Add Radarr Server', addradarr: 'Add Radarr Server',
addsonarr: 'Add Sonarr Server', addsonarr: 'Add Sonarr Server',
nodefault: 'No default server selected!',
nodefaultdescription:
'At least one server must be marked as default before any requests will make it to your services.',
no4kimplemented: '(Default 4K servers are not currently implemented)',
}); });
const NoDefaultAlert: React.FC = () => {
const intl = useIntl();
return (
<div className="rounded-md bg-yellow-600 p-4 mb-8">
<div className="flex">
<div className="flex-shrink-0">
<svg
className="h-5 w-5 text-yellow-200"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fillRule="evenodd"
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
clipRule="evenodd"
/>
</svg>
</div>
<div className="ml-3">
<h3 className="text-sm font-medium text-yellow-200">
{intl.formatMessage(messages.nodefault)}
</h3>
<div className="mt-2 text-sm text-yellow-300">
<p>{intl.formatMessage(messages.nodefaultdescription)}</p>
<p className="mt-2">
{intl.formatMessage(messages.no4kimplemented)}
</p>
</div>
</div>
</div>
</div>
);
};
interface ServerInstanceProps { interface ServerInstanceProps {
name: string; name: string;
isDefault?: boolean; isDefault?: boolean;
@ -249,51 +289,57 @@ const SettingsServices: React.FC = () => {
<div className="mt-6 sm:mt-5"> <div className="mt-6 sm:mt-5">
{!radarrData && !radarrError && <LoadingSpinner />} {!radarrData && !radarrError && <LoadingSpinner />}
{radarrData && !radarrError && ( {radarrData && !radarrError && (
<ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> <>
{radarrData.map((radarr) => ( {radarrData.length > 0 &&
<ServerInstance !radarrData.some(
key={`radarr-config-${radarr.id}`} (radarr) => radarr.isDefault && !radarr.is4k
name={radarr.name} ) && <NoDefaultAlert />}
address={radarr.hostname} <ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
profileName={radarr.activeProfileName} {radarrData.map((radarr) => (
isSSL={radarr.useSsl} <ServerInstance
isDefault={radarr.isDefault && !radarr.is4k} key={`radarr-config-${radarr.id}`}
isDefault4K={radarr.is4k && radarr.isDefault} name={radarr.name}
onEdit={() => setEditRadarrModal({ open: true, radarr })} address={radarr.hostname}
onDelete={() => profileName={radarr.activeProfileName}
setDeleteServerModal({ isSSL={radarr.useSsl}
open: true, isDefault={radarr.isDefault && !radarr.is4k}
serverId: radarr.id, isDefault4K={radarr.is4k && radarr.isDefault}
type: 'radarr', onEdit={() => setEditRadarrModal({ open: true, radarr })}
}) onDelete={() =>
} setDeleteServerModal({
/> open: true,
))} serverId: radarr.id,
<li className="col-span-1 border-2 border-dashed border-gray-400 rounded-lg shadow h-32 sm:h-32"> type: 'radarr',
<div className="flex items-center justify-center w-full h-full"> })
<Button
buttonType="ghost"
onClick={() =>
setEditRadarrModal({ open: true, radarr: null })
} }
> />
<svg ))}
className="w-5 h-5 mr-1" <li className="col-span-1 border-2 border-dashed border-gray-400 rounded-lg shadow h-32 sm:h-32">
fill="currentColor" <div className="flex items-center justify-center w-full h-full">
viewBox="0 0 20 20" <Button
xmlns="http://www.w3.org/2000/svg" buttonType="ghost"
onClick={() =>
setEditRadarrModal({ open: true, radarr: null })
}
> >
<path <svg
fillRule="evenodd" className="w-5 h-5 mr-1"
d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" fill="currentColor"
clipRule="evenodd" viewBox="0 0 20 20"
/> xmlns="http://www.w3.org/2000/svg"
</svg> >
<FormattedMessage {...messages.addradarr} /> <path
</Button> fillRule="evenodd"
</div> d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
</li> clipRule="evenodd"
</ul> />
</svg>
<FormattedMessage {...messages.addradarr} />
</Button>
</div>
</li>
</ul>
</>
)} )}
</div> </div>
<div className="mt-10"> <div className="mt-10">
@ -307,52 +353,58 @@ const SettingsServices: React.FC = () => {
<div className="mt-6 sm:mt-5"> <div className="mt-6 sm:mt-5">
{!sonarrData && !sonarrError && <LoadingSpinner />} {!sonarrData && !sonarrError && <LoadingSpinner />}
{sonarrData && !sonarrError && ( {sonarrData && !sonarrError && (
<ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> <>
{sonarrData.map((sonarr) => ( {sonarrData.length > 0 &&
<ServerInstance !sonarrData.some(
key={`sonarr-config-${sonarr.id}`} (sonarr) => sonarr.isDefault && !sonarr.is4k
name={sonarr.name} ) && <NoDefaultAlert />}
address={sonarr.hostname} <ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
profileName={sonarr.activeProfileName} {sonarrData.map((sonarr) => (
isSSL={sonarr.useSsl} <ServerInstance
isSonarr key={`sonarr-config-${sonarr.id}`}
isDefault4K={sonarr.isDefault && sonarr.is4k} name={sonarr.name}
isDefault={sonarr.isDefault && !sonarr.is4k} address={sonarr.hostname}
onEdit={() => setEditSonarrModal({ open: true, sonarr })} profileName={sonarr.activeProfileName}
onDelete={() => isSSL={sonarr.useSsl}
setDeleteServerModal({ isSonarr
open: true, isDefault4K={sonarr.isDefault && sonarr.is4k}
serverId: sonarr.id, isDefault={sonarr.isDefault && !sonarr.is4k}
type: 'sonarr', onEdit={() => setEditSonarrModal({ open: true, sonarr })}
}) onDelete={() =>
} setDeleteServerModal({
/> open: true,
))} serverId: sonarr.id,
<li className="col-span-1 border-2 border-dashed border-gray-400 rounded-lg shadow h-32 sm:h-32"> type: 'sonarr',
<div className="flex items-center justify-center w-full h-full"> })
<Button
buttonType="ghost"
onClick={() =>
setEditSonarrModal({ open: true, sonarr: null })
} }
> />
<svg ))}
className="w-5 h-5 mr-1" <li className="col-span-1 border-2 border-dashed border-gray-400 rounded-lg shadow h-32 sm:h-32">
fill="currentColor" <div className="flex items-center justify-center w-full h-full">
viewBox="0 0 20 20" <Button
xmlns="http://www.w3.org/2000/svg" buttonType="ghost"
onClick={() =>
setEditSonarrModal({ open: true, sonarr: null })
}
> >
<path <svg
fillRule="evenodd" className="w-5 h-5 mr-1"
d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" fill="currentColor"
clipRule="evenodd" viewBox="0 0 20 20"
/> xmlns="http://www.w3.org/2000/svg"
</svg> >
<FormattedMessage {...messages.addsonarr} /> <path
</Button> fillRule="evenodd"
</div> d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
</li> clipRule="evenodd"
</ul> />
</svg>
<FormattedMessage {...messages.addsonarr} />
</Button>
</div>
</li>
</ul>
</>
)} )}
</div> </div>
</> </>

@ -207,6 +207,9 @@
"components.Settings.menuPlexSettings": "Plex", "components.Settings.menuPlexSettings": "Plex",
"components.Settings.menuServices": "Services", "components.Settings.menuServices": "Services",
"components.Settings.nextexecution": "Next Execution", "components.Settings.nextexecution": "Next Execution",
"components.Settings.no4kimplemented": "(Default 4K servers are not currently implemented)",
"components.Settings.nodefault": "No default server selected!",
"components.Settings.nodefaultdescription": "At least one server must be marked as default before any requests will make it to your services.",
"components.Settings.notificationsettings": "Notification Settings", "components.Settings.notificationsettings": "Notification Settings",
"components.Settings.notificationsettingsDescription": "Here you can pick and choose what types of notifications to send and through what types of services.", "components.Settings.notificationsettingsDescription": "Here you can pick and choose what types of notifications to send and through what types of services.",
"components.Settings.notrunning": "Not Running", "components.Settings.notrunning": "Not Running",

Loading…
Cancel
Save