fix(settings): DNS cache UI consistency, validation, and conditional rendering (#2382)
This commit is contained in:
fallenbagel
@@ -69,6 +69,7 @@ const messages: { [messageName: string]: MessageDescriptor } = defineMessages(
|
||||
dnsCacheGlobalStats: 'Global DNS Cache Stats',
|
||||
dnsCacheGlobalStatsDescription:
|
||||
'These stats are aggregated across all DNS cache entries.',
|
||||
dnsNoCacheEntries: 'No DNS lookups have been cached yet.',
|
||||
size: 'Size',
|
||||
hits: 'Hits',
|
||||
misses: 'Misses',
|
||||
@@ -611,91 +612,133 @@ const SettingsJobs = () => {
|
||||
</Table.TBody>
|
||||
</Table>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="heading">{intl.formatMessage(messages.dnsCache)}</h3>
|
||||
<p className="description">
|
||||
{intl.formatMessage(messages.dnsCacheDescription)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="section">
|
||||
<Table>
|
||||
<thead>
|
||||
<tr>
|
||||
<Table.TH>{intl.formatMessage(messages.dnscachename)}</Table.TH>
|
||||
<Table.TH>
|
||||
{intl.formatMessage(messages.dnscacheactiveaddress)}
|
||||
</Table.TH>
|
||||
<Table.TH>{intl.formatMessage(messages.dnscachehits)}</Table.TH>
|
||||
<Table.TH>{intl.formatMessage(messages.dnscachemisses)}</Table.TH>
|
||||
<Table.TH>{intl.formatMessage(messages.dnscacheage)}</Table.TH>
|
||||
<Table.TH></Table.TH>
|
||||
</tr>
|
||||
</thead>
|
||||
<Table.TBody>
|
||||
{Object.entries(cacheData?.dnsCache.entries || {}).map(
|
||||
([hostname, data]) => (
|
||||
<tr key={`cache-list-${hostname}`}>
|
||||
<Table.TD>{hostname}</Table.TD>
|
||||
<Table.TD>{data.activeAddress}</Table.TD>
|
||||
<Table.TD>{intl.formatNumber(data.hits)}</Table.TD>
|
||||
<Table.TD>{intl.formatNumber(data.misses)}</Table.TD>
|
||||
<Table.TD>{formatAge(data.age)}</Table.TD>
|
||||
<Table.TD alignText="right">
|
||||
<Button
|
||||
buttonType="danger"
|
||||
onClick={() => flushDnsCache(hostname)}
|
||||
>
|
||||
<TrashIcon />
|
||||
<span>{intl.formatMessage(messages.flushdnscache)}</span>
|
||||
</Button>
|
||||
</Table.TD>
|
||||
</tr>
|
||||
)
|
||||
)}
|
||||
</Table.TBody>
|
||||
</Table>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="heading">
|
||||
{intl.formatMessage(messages.dnsCacheGlobalStats)}
|
||||
</h3>
|
||||
<p className="description">
|
||||
{intl.formatMessage(messages.dnsCacheGlobalStatsDescription)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="section">
|
||||
<Table>
|
||||
<thead>
|
||||
<tr>
|
||||
{Object.entries(cacheData?.dnsCache.stats || {})
|
||||
.filter(([statName]) => statName !== 'maxSize')
|
||||
.map(([statName]) => (
|
||||
<Table.TH key={`dns-stat-header-${statName}`}>
|
||||
{messages[statName]
|
||||
? intl.formatMessage(messages[statName])
|
||||
: statName}
|
||||
{cacheData?.dnsCache != null && (
|
||||
<>
|
||||
<div>
|
||||
<h3 className="heading">{intl.formatMessage(messages.dnsCache)}</h3>
|
||||
<p className="description">
|
||||
{intl.formatMessage(messages.dnsCacheDescription)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="section">
|
||||
<Table>
|
||||
<thead>
|
||||
<tr>
|
||||
<Table.TH>
|
||||
{intl.formatMessage(messages.dnscachename)}
|
||||
</Table.TH>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<Table.TBody>
|
||||
<tr>
|
||||
{Object.entries(cacheData?.dnsCache.stats || {})
|
||||
.filter(([statName]) => statName !== 'maxSize')
|
||||
.map(([statName, statValue]) => (
|
||||
<Table.TD key={`dns-stat-${statName}`}>
|
||||
{statName === 'hitRate'
|
||||
? intl.formatNumber(statValue, {
|
||||
style: 'percent',
|
||||
maximumFractionDigits: 2,
|
||||
})
|
||||
: intl.formatNumber(statValue)}
|
||||
</Table.TD>
|
||||
))}
|
||||
</tr>
|
||||
</Table.TBody>
|
||||
</Table>
|
||||
</div>
|
||||
<Table.TH>
|
||||
{intl.formatMessage(messages.dnscacheactiveaddress)}
|
||||
</Table.TH>
|
||||
<Table.TH>
|
||||
{intl.formatMessage(messages.dnscachehits)}
|
||||
</Table.TH>
|
||||
<Table.TH>
|
||||
{intl.formatMessage(messages.dnscachemisses)}
|
||||
</Table.TH>
|
||||
<Table.TH>
|
||||
{intl.formatMessage(messages.dnscacheage)}
|
||||
</Table.TH>
|
||||
<Table.TH></Table.TH>
|
||||
</tr>
|
||||
</thead>
|
||||
<Table.TBody>
|
||||
{(() => {
|
||||
if (!cacheData) {
|
||||
return (
|
||||
<tr>
|
||||
<Table.TD colSpan={6} alignText="center">
|
||||
<LoadingSpinner />
|
||||
</Table.TD>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
const entries = Object.entries(
|
||||
cacheData.dnsCache?.entries ?? {}
|
||||
);
|
||||
|
||||
if (entries.length === 0) {
|
||||
return (
|
||||
<tr>
|
||||
<Table.TD colSpan={6} alignText="center">
|
||||
{intl.formatMessage(messages.dnsNoCacheEntries)}
|
||||
</Table.TD>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
return entries.map(([hostname, data]) => (
|
||||
<tr key={`cache-list-${hostname}`}>
|
||||
<Table.TD>{hostname}</Table.TD>
|
||||
<Table.TD>{data.activeAddress}</Table.TD>
|
||||
<Table.TD>{intl.formatNumber(data.hits)}</Table.TD>
|
||||
<Table.TD>{intl.formatNumber(data.misses)}</Table.TD>
|
||||
<Table.TD>{formatAge(data.age)}</Table.TD>
|
||||
<Table.TD alignText="right">
|
||||
<Button
|
||||
buttonType="danger"
|
||||
onClick={() => flushDnsCache(hostname)}
|
||||
>
|
||||
<TrashIcon />
|
||||
<span>
|
||||
{intl.formatMessage(messages.flushdnscache)}
|
||||
</span>
|
||||
</Button>
|
||||
</Table.TD>
|
||||
</tr>
|
||||
));
|
||||
})()}
|
||||
</Table.TBody>
|
||||
</Table>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="heading">
|
||||
{intl.formatMessage(messages.dnsCacheGlobalStats)}
|
||||
</h3>
|
||||
<p className="description">
|
||||
{intl.formatMessage(messages.dnsCacheGlobalStatsDescription)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="section">
|
||||
{!cacheData ? (
|
||||
<LoadingSpinner />
|
||||
) : (
|
||||
<Table>
|
||||
<thead>
|
||||
<tr>
|
||||
{Object.entries(cacheData.dnsCache?.stats ?? {})
|
||||
.filter(([statName]) => statName !== 'maxSize')
|
||||
.map(([statName]) => (
|
||||
<Table.TH key={`dns-stat-header-${statName}`}>
|
||||
{messages[statName]
|
||||
? intl.formatMessage(messages[statName])
|
||||
: statName}
|
||||
</Table.TH>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<Table.TBody>
|
||||
<tr>
|
||||
{Object.entries(cacheData.dnsCache?.stats ?? {})
|
||||
.filter(([statName]) => statName !== 'maxSize')
|
||||
.map(([statName, statValue]) => (
|
||||
<Table.TD key={`dns-stat-${statName}`}>
|
||||
{statName === 'hitRate'
|
||||
? intl.formatNumber(statValue, {
|
||||
style: 'percent',
|
||||
maximumFractionDigits: 2,
|
||||
})
|
||||
: intl.formatNumber(statValue)}
|
||||
</Table.TD>
|
||||
))}
|
||||
</tr>
|
||||
</Table.TBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className="break-words">
|
||||
<h3 className="heading">{intl.formatMessage(messages.imagecache)}</h3>
|
||||
<p className="description">
|
||||
|
||||
@@ -29,6 +29,8 @@ const messages = defineMessages('components.Settings.SettingsNetwork', {
|
||||
trustProxyTip:
|
||||
'Allow Seerr to correctly register client IP addresses behind a proxy',
|
||||
proxyEnabled: 'HTTP(S) Proxy',
|
||||
proxyEnabledTip:
|
||||
'Send ALL outgoing HTTP/HTTPS requests through a proxy server (host/port). Does NOT enable HTTPS, SSL, or certificate configuration.',
|
||||
proxyHostname: 'Proxy Hostname',
|
||||
proxyPort: 'Proxy Port',
|
||||
proxySsl: 'Use SSL For Proxy',
|
||||
@@ -78,13 +80,16 @@ const SettingsNetwork = () => {
|
||||
then: Yup.number()
|
||||
.typeError(intl.formatMessage(messages.validationDnsCacheMaxTtl))
|
||||
.required(intl.formatMessage(messages.validationDnsCacheMaxTtl))
|
||||
.min(0),
|
||||
.min(-1),
|
||||
}),
|
||||
proxyPort: Yup.number().when('proxyEnabled', {
|
||||
is: (proxyEnabled: boolean) => proxyEnabled,
|
||||
then: Yup.number().required(
|
||||
intl.formatMessage(messages.validationProxyPort)
|
||||
),
|
||||
then: Yup.number()
|
||||
.typeError(intl.formatMessage(messages.validationProxyPort))
|
||||
.integer(intl.formatMessage(messages.validationProxyPort))
|
||||
.min(1, intl.formatMessage(messages.validationProxyPort))
|
||||
.max(65535, intl.formatMessage(messages.validationProxyPort))
|
||||
.required(intl.formatMessage(messages.validationProxyPort)),
|
||||
}),
|
||||
});
|
||||
|
||||
@@ -288,50 +293,50 @@ const SettingsNetwork = () => {
|
||||
<div className="form-row">
|
||||
<label
|
||||
htmlFor="dnsCacheForceMinTtl"
|
||||
className="checkbox-label"
|
||||
className="text-label"
|
||||
>
|
||||
{intl.formatMessage(messages.dnsCacheForceMinTtl)}
|
||||
</label>
|
||||
<div className="form-input-area">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
id="dnsCacheForceMinTtl"
|
||||
name="dnsCacheForceMinTtl"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
{errors.dnsCacheForceMinTtl &&
|
||||
touched.dnsCacheForceMinTtl &&
|
||||
typeof errors.dnsCacheForceMinTtl === 'string' && (
|
||||
<div className="error">
|
||||
{errors.dnsCacheForceMinTtl}
|
||||
</div>
|
||||
)}
|
||||
<Field
|
||||
id="dnsCacheForceMinTtl"
|
||||
name="dnsCacheForceMinTtl"
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
className="short"
|
||||
/>
|
||||
</div>
|
||||
{errors.dnsCacheForceMinTtl &&
|
||||
touched.dnsCacheForceMinTtl &&
|
||||
typeof errors.dnsCacheForceMinTtl === 'string' && (
|
||||
<div className="error">
|
||||
{errors.dnsCacheForceMinTtl}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="form-row">
|
||||
<label
|
||||
htmlFor="dnsCacheForceMaxTtl"
|
||||
className="checkbox-label"
|
||||
className="text-label"
|
||||
>
|
||||
{intl.formatMessage(messages.dnsCacheForceMaxTtl)}
|
||||
</label>
|
||||
<div className="form-input-area">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
id="dnsCacheForceMaxTtl"
|
||||
name="dnsCacheForceMaxTtl"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
{errors.dnsCacheForceMaxTtl &&
|
||||
touched.dnsCacheForceMaxTtl &&
|
||||
typeof errors.dnsCacheForceMaxTtl === 'string' && (
|
||||
<div className="error">
|
||||
{errors.dnsCacheForceMaxTtl}
|
||||
</div>
|
||||
)}
|
||||
<Field
|
||||
id="dnsCacheForceMaxTtl"
|
||||
name="dnsCacheForceMaxTtl"
|
||||
type="text"
|
||||
inputMode="text"
|
||||
className="short"
|
||||
/>
|
||||
</div>
|
||||
{errors.dnsCacheForceMaxTtl &&
|
||||
touched.dnsCacheForceMaxTtl &&
|
||||
typeof errors.dnsCacheForceMaxTtl === 'string' && (
|
||||
<div className="error">
|
||||
{errors.dnsCacheForceMaxTtl}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
@@ -343,6 +348,9 @@ const SettingsNetwork = () => {
|
||||
</span>
|
||||
<SettingsBadge badgeType="advanced" className="mr-2" />
|
||||
<SettingsBadge badgeType="restartRequired" />
|
||||
<span className="label-tip">
|
||||
{intl.formatMessage(messages.proxyEnabledTip)}
|
||||
</span>
|
||||
</label>
|
||||
<div className="form-input-area">
|
||||
<Field
|
||||
@@ -387,13 +395,13 @@ const SettingsNetwork = () => {
|
||||
{intl.formatMessage(messages.proxyPort)}
|
||||
</label>
|
||||
<div className="form-input-area">
|
||||
<div className="form-input-field">
|
||||
<Field
|
||||
id="proxyPort"
|
||||
name="proxyPort"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
<Field
|
||||
id="proxyPort"
|
||||
name="proxyPort"
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
className="short"
|
||||
/>
|
||||
{errors.proxyPort &&
|
||||
touched.proxyPort &&
|
||||
typeof errors.proxyPort === 'string' && (
|
||||
|
||||
@@ -890,6 +890,7 @@
|
||||
"components.Settings.SettingsJobsCache.dnsCacheDescription": "Seerr caches DNS lookups to optimize performance and avoid making unnecessary API calls.",
|
||||
"components.Settings.SettingsJobsCache.dnsCacheGlobalStats": "Global DNS Cache Stats",
|
||||
"components.Settings.SettingsJobsCache.dnsCacheGlobalStatsDescription": "These stats are aggregated across all DNS cache entries.",
|
||||
"components.Settings.SettingsJobsCache.dnsNoCacheEntries": "No DNS lookups have been cached yet.",
|
||||
"components.Settings.SettingsJobsCache.dnscacheactiveaddress": "Active Address",
|
||||
"components.Settings.SettingsJobsCache.dnscacheage": "Age",
|
||||
"components.Settings.SettingsJobsCache.dnscacheflushed": "{hostname} dns cache flushed.",
|
||||
@@ -1015,6 +1016,7 @@
|
||||
"components.Settings.SettingsNetwork.proxyBypassFilterTip": "Use ',' as a separator, and '*.' as a wildcard for subdomains",
|
||||
"components.Settings.SettingsNetwork.proxyBypassLocalAddresses": "Bypass Proxy for Local Addresses",
|
||||
"components.Settings.SettingsNetwork.proxyEnabled": "HTTP(S) Proxy",
|
||||
"components.Settings.SettingsNetwork.proxyEnabledTip": "Send ALL outgoing HTTP/HTTPS requests through a proxy server (host/port). Does NOT enable HTTPS, SSL, or certificate configuration.",
|
||||
"components.Settings.SettingsNetwork.proxyHostname": "Proxy Hostname",
|
||||
"components.Settings.SettingsNetwork.proxyPassword": "Proxy Password",
|
||||
"components.Settings.SettingsNetwork.proxyPort": "Proxy Port",
|
||||
|
||||
Reference in New Issue
Block a user