default cidrs in network access form, added proxy settings to ui

This commit is contained in:
dekzter 2025-06-14 08:52:56 -04:00
parent fa3ee35d4d
commit 72542bf0fd
2 changed files with 110 additions and 2 deletions

View file

@ -29,3 +29,26 @@ export const NETWORK_ACCESS_OPTIONS = {
description: 'Limit access to the Dispatcharr UI',
},
};
export const PROXY_SETTINGS_OPTIONS = {
buffering_timeout: {
label: 'Buffering Timeout',
description: '',
},
buffering_speed: {
label: 'Buffering Speed',
description: '',
},
redis_chunk_ttl: {
label: 'Redis Chunk TTL',
description: '',
},
channel_shutdown_delay: {
label: 'Channel Shutdown Delay',
description: '',
},
channel_init_grace_period: {
label: 'Channel Init Grace Period',
description: '',
},
};

View file

@ -23,7 +23,11 @@ import UserAgentsTable from '../components/tables/UserAgentsTable';
import StreamProfilesTable from '../components/tables/StreamProfilesTable';
import useLocalStorage from '../hooks/useLocalStorage';
import useAuthStore from '../store/auth';
import { USER_LEVELS, NETWORK_ACCESS_OPTIONS } from '../constants';
import {
USER_LEVELS,
NETWORK_ACCESS_OPTIONS,
PROXY_SETTINGS_OPTIONS,
} from '../constants';
import ConfirmationDialog from '../components/ConfirmationDialog';
const SettingsPage = () => {
@ -40,6 +44,8 @@ const SettingsPage = () => {
const [netNetworkAccessConfirmCIDRs, setNetNetworkAccessConfirmCIDRs] =
useState([]);
const [proxySettingsSaved, setProxySettingsSaved] = useState(false);
// UI / local storage settings
const [tableSize, setTableSize] = useLocalStorage('table-size', 'default');
@ -334,6 +340,14 @@ const SettingsPage = () => {
}, {}),
});
const proxySettingsForm = useForm({
mode: 'uncontrolled',
initialValues: Object.keys(PROXY_SETTINGS_OPTIONS).reduce((acc, key) => {
acc[key] = '';
return acc;
}, {}),
});
useEffect(() => {
if (settings) {
const formValues = Object.entries(settings).reduce(
@ -371,7 +385,17 @@ const SettingsPage = () => {
);
networkAccessForm.setValues(
Object.keys(NETWORK_ACCESS_OPTIONS).reduce((acc, key) => {
acc[key] = networkAccessSettings[key];
acc[key] = networkAccessSettings[key] || '0.0.0.0/0';
return acc;
}, {})
);
const proxySettings = JSON.parse(
settings['proxy-settings'].value || '{}'
);
proxySettingsForm.setValues(
Object.keys(PROXY_SETTINGS_OPTIONS).reduce((acc, key) => {
acc[key] = proxySettings[key] || '';
return acc;
}, {})
);
@ -420,6 +444,17 @@ const SettingsPage = () => {
setNetworkAccessConfirmOpen(true);
};
const onProxySettingsSubmit = async () => {
setProxySettingsSaved(false);
await API.updateSetting({
...settings['proxy-settings'],
value: JSON.stringify(proxySettingsForm.getValues()),
});
setProxySettingsSaved(true);
};
const saveNetworkAccess = async () => {
setNetworkAccessSaved(false);
try {
@ -689,6 +724,56 @@ const SettingsPage = () => {
</form>
</Accordion.Panel>
</Accordion.Item>,
<Accordion.Item value="proxy-settings">
<Accordion.Control>
<Box>Proxy Settings</Box>
</Accordion.Control>
<Accordion.Panel>
<form
onSubmit={proxySettingsForm.onSubmit(
onProxySettingsSubmit
)}
>
<Stack gap="sm">
{proxySettingsSaved && (
<Alert
variant="light"
color="green"
title="Saved Successfully"
></Alert>
)}
{Object.entries(PROXY_SETTINGS_OPTIONS).map(
([key, config]) => {
return (
<TextInput
label={config.label}
{...proxySettingsForm.getInputProps(key)}
key={proxySettingsForm.key(key)}
description={config.description || null}
/>
);
}
)}
<Flex
mih={50}
gap="xs"
justify="flex-end"
align="flex-end"
>
<Button
type="submit"
disabled={networkAccessForm.submitting}
variant="default"
>
Save
</Button>
</Flex>
</Stack>
</form>
</Accordion.Panel>
</Accordion.Item>,
]
: []
)}