Implement UI for machines & system settings
This commit is contained in:
@@ -4,6 +4,8 @@ import {ToastProvider} from '@/common/contexts/ToastContext.jsx';
|
||||
import "@/common/styles/main.sass";
|
||||
import Root from "@/common/layouts/Root.jsx";
|
||||
import UserManagement from "@/pages/UserManagement";
|
||||
import SystemSettings from "@/pages/SystemSettings";
|
||||
import Machines from "@/pages/Machines";
|
||||
import "@fontsource/plus-jakarta-sans/300.css";
|
||||
import "@fontsource/plus-jakarta-sans/400.css";
|
||||
import "@fontsource/plus-jakarta-sans/600.css";
|
||||
@@ -21,9 +23,11 @@ const App = () => {
|
||||
children: [
|
||||
{path: "/", element: <Navigate to="/dashboard"/>},
|
||||
{path: "/dashboard", element: <Placeholder title="Dashboard"/>},
|
||||
{path: "/machines", element: <Machines/>},
|
||||
{path: "/servers", element: <Placeholder title="Servers"/>},
|
||||
{path: "/settings", element: <Placeholder title="Settings"/>},
|
||||
{path: "/admin/users", element: <UserManagement/>},
|
||||
{path: "/admin/settings", element: <SystemSettings/>},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
@@ -1,17 +1,19 @@
|
||||
import React, { useContext } from 'react';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import { HouseIcon, GearSixIcon, SquaresFourIcon, CubeIcon, UsersIcon } from '@phosphor-icons/react';
|
||||
import { HouseIcon, GearSixIcon, SquaresFourIcon, CubeIcon, UsersIcon, SlidersIcon, ComputerTowerIcon } from '@phosphor-icons/react';
|
||||
import { UserContext } from '@/common/contexts/UserContext.jsx';
|
||||
import './styles.sass';
|
||||
|
||||
const navItems = [
|
||||
{ to: '/dashboard', label: 'Dashboard', icon: <HouseIcon weight="duotone" /> },
|
||||
{ to: '/machines', label: 'Machines', icon: <ComputerTowerIcon weight="duotone" /> },
|
||||
{ to: '/servers', label: 'Servers', icon: <SquaresFourIcon weight="duotone" /> },
|
||||
{ to: '/settings', label: 'Settings', icon: <GearSixIcon weight="duotone" /> },
|
||||
];
|
||||
|
||||
const adminNavItems = [
|
||||
{ to: '/admin/users', label: 'User Management', icon: <UsersIcon weight="duotone" /> },
|
||||
{ to: '/admin/settings', label: 'System Settings', icon: <SlidersIcon weight="duotone" /> },
|
||||
];
|
||||
|
||||
export const Sidebar = () => {
|
||||
|
||||
@@ -7,12 +7,16 @@ const getPageTitle = (pathname) => {
|
||||
switch (pathname) {
|
||||
case '/dashboard':
|
||||
return 'Dashboard';
|
||||
case '/machines':
|
||||
return 'Machines';
|
||||
case '/servers':
|
||||
return 'Servers';
|
||||
case '/settings':
|
||||
return 'Settings';
|
||||
case '/admin/users':
|
||||
return 'User Management';
|
||||
case '/admin/settings':
|
||||
return 'System Settings';
|
||||
default:
|
||||
return 'Dashboard';
|
||||
}
|
||||
|
||||
423
webui/src/pages/Machines/Machines.jsx
Normal file
423
webui/src/pages/Machines/Machines.jsx
Normal file
@@ -0,0 +1,423 @@
|
||||
import React, {useState, useEffect, useContext} from 'react';
|
||||
import {UserContext} from '@/common/contexts/UserContext.jsx';
|
||||
import {useToast} from '@/common/contexts/ToastContext.jsx';
|
||||
import {getRequest, postRequest, deleteRequest} from '@/common/utils/RequestUtil.js';
|
||||
import Button from '@/common/components/Button';
|
||||
import Input from '@/common/components/Input';
|
||||
import Modal, {ModalActions} from '@/common/components/Modal';
|
||||
import Card, {CardHeader, CardBody} from '@/common/components/Card';
|
||||
import Badge from '@/common/components/Badge';
|
||||
import Grid from '@/common/components/Grid';
|
||||
import LoadingSpinner from '@/common/components/LoadingSpinner';
|
||||
import EmptyState from '@/common/components/EmptyState';
|
||||
import PageHeader from '@/common/components/PageHeader';
|
||||
import DetailItem, {DetailList} from '@/common/components/DetailItem';
|
||||
import {
|
||||
PlusIcon,
|
||||
TrashIcon,
|
||||
ComputerTowerIcon,
|
||||
CalendarIcon,
|
||||
IdentificationCardIcon,
|
||||
UserIcon,
|
||||
QrCodeIcon,
|
||||
CopyIcon,
|
||||
ClockIcon
|
||||
} from '@phosphor-icons/react';
|
||||
import './styles.sass';
|
||||
|
||||
export const Machines = () => {
|
||||
const {user: currentUser} = useContext(UserContext);
|
||||
const toast = useToast();
|
||||
const [machines, setMachines] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showCreateModal, setShowCreateModal] = useState(false);
|
||||
const [showProvisioningModal, setShowProvisioningModal] = useState(false);
|
||||
const [selectedMachine, setSelectedMachine] = useState(null);
|
||||
const [provisioningCode, setProvisioningCode] = useState(null);
|
||||
const [formData, setFormData] = useState({name: ''});
|
||||
const [formErrors, setFormErrors] = useState({});
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetchMachines();
|
||||
}, []);
|
||||
|
||||
const fetchMachines = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await getRequest('machines');
|
||||
setMachines(response);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch machines:', error);
|
||||
toast.error('Failed to load machines. Please try again.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
return new Date(dateString).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
};
|
||||
|
||||
const formatUuid = (uuid) => {
|
||||
// Show first 8 characters of UUID for display
|
||||
return uuid.substring(0, 8).toUpperCase();
|
||||
};
|
||||
|
||||
const openCreateModal = () => {
|
||||
setFormData({name: ''});
|
||||
setFormErrors({});
|
||||
setShowCreateModal(true);
|
||||
};
|
||||
|
||||
const closeCreateModal = () => {
|
||||
setShowCreateModal(false);
|
||||
setFormData({name: ''});
|
||||
setFormErrors({});
|
||||
};
|
||||
|
||||
const openProvisioningModal = (machine) => {
|
||||
setSelectedMachine(machine);
|
||||
setProvisioningCode(null);
|
||||
setShowProvisioningModal(true);
|
||||
};
|
||||
|
||||
const closeProvisioningModal = () => {
|
||||
setShowProvisioningModal(false);
|
||||
setSelectedMachine(null);
|
||||
setProvisioningCode(null);
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
const errors = {};
|
||||
|
||||
if (!formData.name.trim()) {
|
||||
errors.name = 'Machine name is required';
|
||||
} else if (formData.name.length < 3) {
|
||||
errors.name = 'Machine name must be at least 3 characters';
|
||||
}
|
||||
|
||||
setFormErrors(errors);
|
||||
return Object.keys(errors).length === 0;
|
||||
};
|
||||
|
||||
const handleCreateSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
|
||||
try {
|
||||
await postRequest('machines/register', {
|
||||
name: formData.name.trim()
|
||||
});
|
||||
|
||||
toast.success(`Machine "${formData.name}" registered successfully`);
|
||||
closeCreateModal();
|
||||
fetchMachines();
|
||||
} catch (error) {
|
||||
console.error('Failed to register machine:', error);
|
||||
const errorMessage = error.error || 'Failed to register machine. Please try again.';
|
||||
toast.error(errorMessage);
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleGenerateProvisioningCode = async () => {
|
||||
if (!selectedMachine) return;
|
||||
|
||||
setSubmitting(true);
|
||||
|
||||
try {
|
||||
const response = await postRequest('machines/provisioning-code', {
|
||||
machine_id: selectedMachine.id
|
||||
});
|
||||
|
||||
setProvisioningCode(response);
|
||||
toast.success('Provisioning code generated successfully');
|
||||
} catch (error) {
|
||||
console.error('Failed to generate provisioning code:', error);
|
||||
const errorMessage = error.error || 'Failed to generate provisioning code. Please try again.';
|
||||
toast.error(errorMessage);
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCopyCode = async (code) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(code);
|
||||
toast.success('Provisioning code copied to clipboard');
|
||||
} catch (error) {
|
||||
console.error('Failed to copy to clipboard:', error);
|
||||
toast.error('Failed to copy to clipboard');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (machineId, machineName) => {
|
||||
if (!window.confirm(`Are you sure you want to delete machine "${machineName}"? This action cannot be undone.`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await deleteRequest(`machines/${machineId}`);
|
||||
toast.success(`Machine "${machineName}" deleted successfully`);
|
||||
fetchMachines();
|
||||
} catch (error) {
|
||||
console.error('Failed to delete machine:', error);
|
||||
toast.error('Failed to delete machine. Please try again.');
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const {name, value} = e.target;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: value
|
||||
}));
|
||||
|
||||
if (formErrors[name]) {
|
||||
setFormErrors(prev => ({
|
||||
...prev,
|
||||
[name]: ''
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="content">
|
||||
<LoadingSpinner centered text="Loading machines..."/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="content">
|
||||
<PageHeader
|
||||
title="Machines"
|
||||
subtitle="Manage your registered machines and generate provisioning codes"
|
||||
actions={
|
||||
<Button
|
||||
variant="primary"
|
||||
icon={<PlusIcon size={16}/>}
|
||||
onClick={openCreateModal}
|
||||
>
|
||||
Register Machine
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
<Grid minWidth="400px">
|
||||
{machines.map(machine => (
|
||||
<Card key={machine.id} hover className="machine-card">
|
||||
<CardHeader>
|
||||
<div className="machine-card-header">
|
||||
<div className="machine-icon">
|
||||
<ComputerTowerIcon size={24} weight="duotone"/>
|
||||
</div>
|
||||
<div className="machine-info">
|
||||
<h3 className="machine-name">{machine.name}</h3>
|
||||
<div className="machine-uuid">
|
||||
<IdentificationCardIcon size={14}/>
|
||||
<span className="uuid-text">{formatUuid(machine.uuid)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="machine-actions">
|
||||
<Button
|
||||
variant="subtle"
|
||||
size="sm"
|
||||
icon={<QrCodeIcon size={14}/>}
|
||||
onClick={() => openProvisioningModal(machine)}
|
||||
>
|
||||
Code
|
||||
</Button>
|
||||
<Button
|
||||
variant="danger"
|
||||
size="sm"
|
||||
icon={<TrashIcon size={14}/>}
|
||||
onClick={() => handleDelete(machine.id, machine.name)}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardBody>
|
||||
<DetailList>
|
||||
<DetailItem icon={<UserIcon size={16}/>}>
|
||||
Owner: {currentUser?.role === 'admin' ? `User ${machine.user_id}` : 'You'}
|
||||
</DetailItem>
|
||||
<DetailItem icon={<CalendarIcon size={16}/>}>
|
||||
Registered: {formatDate(machine.created_at)}
|
||||
</DetailItem>
|
||||
</DetailList>
|
||||
</CardBody>
|
||||
</Card>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
{machines.length === 0 && (
|
||||
<EmptyState
|
||||
icon={<ComputerTowerIcon size={48} weight="duotone"/>}
|
||||
title="No machines registered"
|
||||
description="Register your first machine to get started with backup management"
|
||||
action={
|
||||
<Button
|
||||
variant="primary"
|
||||
icon={<PlusIcon size={16}/>}
|
||||
onClick={openCreateModal}
|
||||
>
|
||||
Register Machine
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Create Machine Modal */}
|
||||
<Modal
|
||||
isOpen={showCreateModal}
|
||||
onClose={closeCreateModal}
|
||||
title="Register New Machine"
|
||||
size="md"
|
||||
>
|
||||
<form onSubmit={handleCreateSubmit} className="modal-form">
|
||||
<p className="modal-description">
|
||||
Register a new machine to enable backup management. This will create a machine entry
|
||||
that you can later generate provisioning codes for.
|
||||
</p>
|
||||
|
||||
<Input
|
||||
label="Machine Name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleInputChange}
|
||||
error={formErrors.name}
|
||||
placeholder="Enter a descriptive name for your machine"
|
||||
disabled={submitting}
|
||||
autoFocus
|
||||
/>
|
||||
|
||||
<ModalActions>
|
||||
<Button
|
||||
type="button"
|
||||
variant="subtle"
|
||||
onClick={closeCreateModal}
|
||||
disabled={submitting}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
loading={submitting}
|
||||
disabled={submitting}
|
||||
>
|
||||
Register Machine
|
||||
</Button>
|
||||
</ModalActions>
|
||||
</form>
|
||||
</Modal>
|
||||
|
||||
{/* Provisioning Code Modal */}
|
||||
<Modal
|
||||
isOpen={showProvisioningModal}
|
||||
onClose={closeProvisioningModal}
|
||||
title="Generate Provisioning Code"
|
||||
size="md"
|
||||
>
|
||||
<div className="provisioning-modal">
|
||||
<p className="modal-description">
|
||||
Generate a provisioning code for <strong>{selectedMachine?.name}</strong>.
|
||||
This code can be used to register a client machine with the backup system.
|
||||
</p>
|
||||
|
||||
{!provisioningCode ? (
|
||||
<div className="provisioning-generate">
|
||||
<Button
|
||||
variant="primary"
|
||||
icon={<QrCodeIcon size={16}/>}
|
||||
onClick={handleGenerateProvisioningCode}
|
||||
loading={submitting}
|
||||
disabled={submitting}
|
||||
className="generate-button"
|
||||
>
|
||||
Generate Provisioning Code
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="provisioning-result">
|
||||
<div className="code-section">
|
||||
<label className="code-label">Provisioning Code</label>
|
||||
<div className="code-display">
|
||||
<Input
|
||||
value={provisioningCode.code}
|
||||
readOnly
|
||||
className="code-input"
|
||||
/>
|
||||
<Button
|
||||
variant="subtle"
|
||||
icon={<CopyIcon size={16}/>}
|
||||
onClick={() => handleCopyCode(provisioningCode.code)}
|
||||
className="copy-button"
|
||||
>
|
||||
Copy
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="code-info">
|
||||
<DetailList>
|
||||
<DetailItem icon={<ClockIcon size={16}/>}>
|
||||
Expires: {formatDate(provisioningCode.expires_at)}
|
||||
</DetailItem>
|
||||
<DetailItem icon={<IdentificationCardIcon size={16}/>}>
|
||||
Raw Code: {provisioningCode.raw_code}
|
||||
</DetailItem>
|
||||
</DetailList>
|
||||
</div>
|
||||
|
||||
<div className="code-notice">
|
||||
<Badge variant="warning">
|
||||
This code expires in 1 hour
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ModalActions>
|
||||
<Button
|
||||
type="button"
|
||||
variant="subtle"
|
||||
onClick={closeProvisioningModal}
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
{provisioningCode && (
|
||||
<Button
|
||||
variant="primary"
|
||||
icon={<QrCodeIcon size={16}/>}
|
||||
onClick={handleGenerateProvisioningCode}
|
||||
loading={submitting}
|
||||
disabled={submitting}
|
||||
>
|
||||
Generate New Code
|
||||
</Button>
|
||||
)}
|
||||
</ModalActions>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
1
webui/src/pages/Machines/index.js
Normal file
1
webui/src/pages/Machines/index.js
Normal file
@@ -0,0 +1 @@
|
||||
export {Machines as default} from './Machines.jsx';
|
||||
107
webui/src/pages/Machines/styles.sass
Normal file
107
webui/src/pages/Machines/styles.sass
Normal file
@@ -0,0 +1,107 @@
|
||||
.machine-card
|
||||
.machine-card-header
|
||||
display: flex
|
||||
align-items: flex-start
|
||||
gap: 1rem
|
||||
|
||||
.machine-icon
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
width: 3rem
|
||||
height: 3rem
|
||||
background: var(--color-primary-light)
|
||||
border-radius: var(--border-radius)
|
||||
color: var(--color-primary)
|
||||
flex-shrink: 0
|
||||
|
||||
.machine-info
|
||||
flex: 1
|
||||
min-width: 0
|
||||
|
||||
.machine-name
|
||||
font-size: 1.125rem
|
||||
font-weight: 600
|
||||
color: var(--color-text)
|
||||
margin: 0 0 0.5rem 0
|
||||
word-break: break-word
|
||||
|
||||
.machine-uuid
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: 0.25rem
|
||||
font-size: 0.875rem
|
||||
color: var(--color-text-muted)
|
||||
|
||||
.uuid-text
|
||||
font-family: var(--font-mono, 'Courier New', monospace)
|
||||
background: var(--color-surface-variant)
|
||||
padding: 0.125rem 0.375rem
|
||||
border-radius: var(--border-radius-sm)
|
||||
font-size: 0.75rem
|
||||
|
||||
.machine-actions
|
||||
display: flex
|
||||
gap: 0.5rem
|
||||
flex-shrink: 0
|
||||
|
||||
.modal-description
|
||||
color: var(--color-text-muted)
|
||||
font-size: 0.875rem
|
||||
line-height: 1.5
|
||||
margin: 0 0 1.5rem 0
|
||||
|
||||
.provisioning-modal
|
||||
.provisioning-generate
|
||||
text-align: center
|
||||
padding: 2rem 0
|
||||
|
||||
.generate-button
|
||||
min-width: 200px
|
||||
|
||||
.provisioning-result
|
||||
.code-section
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
.code-label
|
||||
display: block
|
||||
font-size: 0.875rem
|
||||
font-weight: 600
|
||||
color: var(--color-text)
|
||||
margin-bottom: 0.5rem
|
||||
|
||||
.code-display
|
||||
display: flex
|
||||
gap: 0.5rem
|
||||
align-items: stretch
|
||||
|
||||
.code-input
|
||||
flex: 1
|
||||
font-family: var(--font-mono, 'Courier New', monospace)
|
||||
font-size: 0.875rem
|
||||
|
||||
input
|
||||
font-family: inherit
|
||||
|
||||
.copy-button
|
||||
flex-shrink: 0
|
||||
|
||||
.code-info
|
||||
margin-bottom: 1rem
|
||||
padding: 1rem
|
||||
background: var(--color-surface-variant)
|
||||
border-radius: var(--border-radius)
|
||||
|
||||
.code-notice
|
||||
text-align: center
|
||||
|
||||
// Empty state overrides for machines
|
||||
.content .empty-state
|
||||
.empty-state-icon
|
||||
color: var(--color-primary-light)
|
||||
|
||||
.empty-state-title
|
||||
color: var(--color-text)
|
||||
|
||||
.empty-state-description
|
||||
color: var(--color-text-muted)
|
||||
263
webui/src/pages/SystemSettings/SystemSettings.jsx
Normal file
263
webui/src/pages/SystemSettings/SystemSettings.jsx
Normal file
@@ -0,0 +1,263 @@
|
||||
import React, {useState, useEffect, useContext} from 'react';
|
||||
import {UserContext} from '@/common/contexts/UserContext.jsx';
|
||||
import {useToast} from '@/common/contexts/ToastContext.jsx';
|
||||
import {getRequest, postRequest} from '@/common/utils/RequestUtil.js';
|
||||
import Button from '@/common/components/Button';
|
||||
import Input from '@/common/components/Input';
|
||||
import Card, {CardHeader, CardBody} from '@/common/components/Card';
|
||||
import LoadingSpinner from '@/common/components/LoadingSpinner';
|
||||
import PageHeader from '@/common/components/PageHeader';
|
||||
import {
|
||||
SlidersIcon,
|
||||
FloppyDiskIcon,
|
||||
ArrowClockwiseIcon,
|
||||
InfoIcon,
|
||||
WarningIcon
|
||||
} from '@phosphor-icons/react';
|
||||
import './styles.sass';
|
||||
|
||||
export const SystemSettings = () => {
|
||||
const toast = useToast();
|
||||
const [configs, setConfigs] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [formData, setFormData] = useState({});
|
||||
const [formErrors, setFormErrors] = useState({});
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [hasChanges, setHasChanges] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetchConfigs();
|
||||
}, []);
|
||||
|
||||
const fetchConfigs = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await getRequest('admin/config');
|
||||
setConfigs(response.configs);
|
||||
|
||||
const initialData = {};
|
||||
response.configs.forEach(config => {
|
||||
initialData[config.key] = config.value || config.default_value || '';
|
||||
});
|
||||
setFormData(initialData);
|
||||
setHasChanges(false);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch configs:', error);
|
||||
toast.error('Failed to load system settings. Please try again.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputChange = (key, value) => {
|
||||
setFormData(prev => {
|
||||
const newData = {...prev, [key]: value};
|
||||
|
||||
const originalConfig = configs.find(c => c.key === key);
|
||||
const hasChange = Object.keys(newData).some(k => {
|
||||
const original = configs.find(c => c.key === k);
|
||||
const origVal = original?.value || original?.default_value || '';
|
||||
return newData[k] !== origVal;
|
||||
});
|
||||
|
||||
setHasChanges(hasChange);
|
||||
return newData;
|
||||
});
|
||||
|
||||
if (formErrors[key]) {
|
||||
setFormErrors(prev => ({
|
||||
...prev,
|
||||
[key]: ''
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
const errors = {};
|
||||
|
||||
configs.forEach(config => {
|
||||
const value = formData[config.key] || '';
|
||||
|
||||
if (config.required && !value.trim()) {
|
||||
errors[config.key] = `${config.key} is required`;
|
||||
return;
|
||||
}
|
||||
|
||||
switch (config.key) {
|
||||
case 'EXTERNAL_URL':
|
||||
if (value && !value.startsWith('http://') && !value.startsWith('https://')) {
|
||||
errors[config.key] = 'URL must start with http:// or https://';
|
||||
}
|
||||
break;
|
||||
case 'MAX_UPLOAD_SIZE_MB':
|
||||
case 'BACKUP_RETENTION_DAYS':
|
||||
case 'SESSION_TIMEOUT_HOURS':
|
||||
if (value && (isNaN(value) || parseInt(value) <= 0)) {
|
||||
errors[config.key] = 'Must be a positive number';
|
||||
}
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
setFormErrors(errors);
|
||||
return Object.keys(errors).length === 0;
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
|
||||
try {
|
||||
const savePromises = [];
|
||||
|
||||
for (const config of configs) {
|
||||
const newValue = formData[config.key] || '';
|
||||
const originalValue = config.value || config.default_value || '';
|
||||
|
||||
if (newValue !== originalValue) {
|
||||
savePromises.push(
|
||||
postRequest('admin/config', {
|
||||
key: config.key,
|
||||
value: newValue
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
await Promise.all(savePromises);
|
||||
|
||||
toast.success('System settings saved successfully');
|
||||
setHasChanges(false);
|
||||
await fetchConfigs();
|
||||
} catch (error) {
|
||||
console.error('Failed to save settings:', error);
|
||||
const errorMessage = error.error || 'Failed to save settings. Please try again.';
|
||||
toast.error(errorMessage);
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReset = async () => {
|
||||
if (!window.confirm('Are you sure you want to reset all settings to their current saved values? Any unsaved changes will be lost.')) {
|
||||
return;
|
||||
}
|
||||
|
||||
await fetchConfigs();
|
||||
toast.info('Settings reset to saved values');
|
||||
};
|
||||
|
||||
const getFieldType = (key) => {
|
||||
switch (key) {
|
||||
case 'SESSION_TIMEOUT_HOURS':
|
||||
return 'number';
|
||||
case 'EXTERNAL_URL':
|
||||
return 'url';
|
||||
default:
|
||||
return 'text';
|
||||
}
|
||||
};
|
||||
|
||||
const getFieldPlaceholder = (config) => {
|
||||
if (config.default_value) {
|
||||
return `Default: ${config.default_value}`;
|
||||
}
|
||||
return `Enter ${config.key.toLowerCase().replace(/_/g, ' ')}`;
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="content">
|
||||
<LoadingSpinner centered text="Loading system settings..."/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="content">
|
||||
<PageHeader
|
||||
title="System Settings"
|
||||
subtitle="Configure system-wide settings and preferences"
|
||||
actions={
|
||||
<div className="settings-actions">
|
||||
<Button
|
||||
variant="subtle"
|
||||
icon={<ArrowClockwiseIcon size={16}/>}
|
||||
onClick={handleReset}
|
||||
disabled={submitting || !hasChanges}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
icon={<FloppyDiskIcon size={16}/>}
|
||||
onClick={handleSave}
|
||||
loading={submitting}
|
||||
disabled={submitting || !hasChanges}
|
||||
>
|
||||
Save Changes
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
{hasChanges && (
|
||||
<div className="settings-notice">
|
||||
<WarningIcon size={16}/>
|
||||
<span>You have unsaved changes</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="settings-grid">
|
||||
{configs.map(config => (
|
||||
<Card key={config.key} className="setting-card">
|
||||
<CardHeader>
|
||||
<div className="setting-header">
|
||||
<div className="setting-info">
|
||||
<h3 className="setting-title">
|
||||
{config.key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
|
||||
{config.required && <span className="required">*</span>}
|
||||
</h3>
|
||||
<p className="setting-description">{config.description}</p>
|
||||
</div>
|
||||
{config.default_value && (
|
||||
<div className="setting-default">
|
||||
<InfoIcon size={14}/>
|
||||
<span>Default: {config.default_value}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardBody>
|
||||
<Input
|
||||
type={getFieldType(config.key)}
|
||||
value={formData[config.key] || ''}
|
||||
onChange={(e) => handleInputChange(config.key, e.target.value)}
|
||||
placeholder={getFieldPlaceholder(config)}
|
||||
error={formErrors[config.key]}
|
||||
disabled={submitting}
|
||||
className="setting-input"
|
||||
/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{configs.length === 0 && (
|
||||
<Card>
|
||||
<CardBody>
|
||||
<div className="empty-settings">
|
||||
<SlidersIcon size={48} weight="duotone"/>
|
||||
<h3>No settings available</h3>
|
||||
<p>No configurable settings are currently defined.</p>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
1
webui/src/pages/SystemSettings/index.js
Normal file
1
webui/src/pages/SystemSettings/index.js
Normal file
@@ -0,0 +1 @@
|
||||
export { SystemSettings as default } from './SystemSettings.jsx';
|
||||
91
webui/src/pages/SystemSettings/styles.sass
Normal file
91
webui/src/pages/SystemSettings/styles.sass
Normal file
@@ -0,0 +1,91 @@
|
||||
.settings-actions
|
||||
display: flex
|
||||
gap: 0.5rem
|
||||
align-items: center
|
||||
|
||||
.settings-notice
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: 0.5rem
|
||||
padding: 1rem
|
||||
background: var(--color-warning-light)
|
||||
border: 1px solid var(--color-warning)
|
||||
border-radius: var(--border-radius)
|
||||
color: var(--color-warning-dark)
|
||||
font-size: 0.875rem
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
svg
|
||||
flex-shrink: 0
|
||||
|
||||
.settings-grid
|
||||
display: grid
|
||||
gap: 1.5rem
|
||||
grid-template-columns: 1fr
|
||||
|
||||
@media (min-width: 768px)
|
||||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr))
|
||||
|
||||
.setting-card
|
||||
.setting-header
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
align-items: flex-start
|
||||
gap: 1rem
|
||||
|
||||
.setting-info
|
||||
flex: 1
|
||||
|
||||
.setting-title
|
||||
font-size: 1rem
|
||||
font-weight: 600
|
||||
color: var(--color-text)
|
||||
margin: 0 0 0.5rem 0
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: 0.25rem
|
||||
|
||||
.required
|
||||
color: var(--color-danger)
|
||||
font-size: 0.875rem
|
||||
|
||||
.setting-description
|
||||
font-size: 0.875rem
|
||||
color: var(--color-text-muted)
|
||||
margin: 0
|
||||
line-height: 1.4
|
||||
|
||||
.setting-default
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: 0.25rem
|
||||
font-size: 0.75rem
|
||||
color: var(--color-text-muted)
|
||||
background: var(--color-surface-variant)
|
||||
padding: 0.25rem 0.5rem
|
||||
border-radius: var(--border-radius-sm)
|
||||
white-space: nowrap
|
||||
|
||||
svg
|
||||
flex-shrink: 0
|
||||
|
||||
.setting-input
|
||||
margin: 0
|
||||
|
||||
.empty-settings
|
||||
text-align: center
|
||||
padding: 2rem
|
||||
color: var(--color-text-muted)
|
||||
|
||||
svg
|
||||
color: var(--color-text-disabled)
|
||||
margin-bottom: 1rem
|
||||
|
||||
h3
|
||||
margin: 0 0 0.5rem 0
|
||||
font-size: 1.125rem
|
||||
color: var(--color-text)
|
||||
|
||||
p
|
||||
margin: 0
|
||||
font-size: 0.875rem
|
||||
Reference in New Issue
Block a user