Files
pic/webui/src/services/api.js
T
roof c3b2c8d8e5 feat: pending-restart banner + Apply button for config changes
When ip_range changes, a persistent amber banner appears at the top of
every page showing what changed and a "Apply Now" button.  Clicking it
shows a confirmation modal ("containers will restart briefly"), then
calls POST /api/config/apply which runs docker compose up -d from inside
the API container — no manual make start needed.

Backend:
- _set_pending_restart() / _clear_pending_restart() helpers track state
  in config_manager so it survives page refresh
- GET /api/config/pending returns { needs_restart, changed_at, changes }
- POST /api/config/apply runs docker compose up -d via the mounted
  docker.sock, using the project working_dir label to resolve host paths
- docker-compose.yml mounts docker-compose.yml itself read-only into
  the API container so docker compose can read it from inside

Frontend (App.jsx):
- Polls /api/config/pending every 5 s alongside the health check
- PendingRestartBanner component with confirmation modal
- Optimistically clears banner on Apply click; API and containers
  restart in the background

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-22 11:29:26 -04:00

239 lines
10 KiB
JavaScript

import axios from 'axios';
// Create axios instance with base configuration
const api = axios.create({
baseURL: import.meta.env.VITE_API_URL || '',
timeout: 10000,
headers: {
'Content-Type': 'application/json',
},
});
// Request interceptor for logging
api.interceptors.request.use(
(config) => {
console.log(`API Request: ${config.method?.toUpperCase()} ${config.url}`);
return config;
},
(error) => {
console.error('API Request Error:', error);
return Promise.reject(error);
}
);
// Response interceptor for error handling
api.interceptors.response.use(
(response) => {
return response;
},
(error) => {
console.error('API Response Error:', error.response?.data || error.message);
return Promise.reject(error);
}
);
// Cell Status API
export const cellAPI = {
getStatus: () => api.get('/api/status'),
getConfig: () => api.get('/api/config'),
updateConfig: (config) => api.put('/api/config', config),
createBackup: () => api.post('/api/config/backup'),
listBackups: () => api.get('/api/config/backups'),
restoreBackup: (id) => api.post(`/api/config/restore/${id}`),
deleteBackup: (id) => api.delete(`/api/config/backups/${id}`),
exportConfig: (format = 'json') => api.get('/api/config/export', { params: { format } }),
importConfig: (config, format = 'json') => api.post('/api/config/import', { config, format }),
getPending: () => api.get('/api/config/pending'),
applyPending: () => api.post('/api/config/apply'),
};
// Network Services API
export const networkAPI = {
getDNSRecords: () => api.get('/api/dns/records'),
addDNSRecord: (record) => api.post('/api/dns/records', record),
removeDNSRecord: (record) => api.delete('/api/dns/records', { data: record }),
getDHCPLeases: () => api.get('/api/dhcp/leases'),
addDHCPReservation: (reservation) => api.post('/api/dhcp/reservations', reservation),
removeDHCPReservation: (reservation) => api.delete('/api/dhcp/reservations', { data: reservation }),
getNTPStatus: () => api.get('/api/ntp/status'),
testNetwork: (data) => api.post('/api/network/test', data),
};
// WireGuard API
export const wireguardAPI = {
getKeys: () => api.get('/api/wireguard/keys'),
generatePeerKeys: (data) => api.post('/api/wireguard/keys/peer', data),
getConfig: () => api.get('/api/wireguard/config'),
getPeers: () => api.get('/api/wireguard/peers'),
addPeer: (peer) => api.post('/api/wireguard/peers', peer),
removePeer: (peer) => api.delete('/api/wireguard/peers', { data: peer }),
getStatus: () => api.get('/api/wireguard/status'),
testConnectivity: (data) => api.post('/api/wireguard/connectivity', data),
updatePeerIP: (data) => api.put('/api/wireguard/peers/ip', data),
getPeerConfig: (data) => api.post('/api/wireguard/peers/config', data),
getPeerStatuses: () => api.get('/api/wireguard/peers/statuses'),
};
// Peer Registry API
export const peerAPI = {
getPeers: () => api.get('/api/peers'),
addPeer: (peer) => api.post('/api/peers', peer),
removePeer: (peerName) => api.delete(`/api/peers/${peerName}`),
registerPeer: (data) => api.post('/api/peers/register', data),
unregisterPeer: (peerName) => api.delete(`/api/peers/${peerName}/unregister`),
updatePeerIP: (peerName, data) => api.put(`/api/peers/${peerName}/update-ip`, data),
};
// Email Services API
export const emailAPI = {
getUsers: () => api.get('/api/email/users'),
createUser: (user) => api.post('/api/email/users', user),
deleteUser: (username) => api.delete(`/api/email/users/${username}`),
getStatus: () => api.get('/api/email/status'),
testConnectivity: () => api.get('/api/email/connectivity'),
sendEmail: (data) => api.post('/api/email/send', data),
getMailboxInfo: (username) => api.get(`/api/email/mailbox/${username}`),
};
// Calendar Services API
export const calendarAPI = {
getUsers: () => api.get('/api/calendar/users'),
createUser: (user) => api.post('/api/calendar/users', user),
deleteUser: (username) => api.delete(`/api/calendar/users/${username}`),
createCalendar: (data) => api.post('/api/calendar/calendars', data),
addEvent: (data) => api.post('/api/calendar/events', data),
getEvents: (username, calendarName, params) =>
api.get(`/api/calendar/events/${username}/${calendarName}`, { params }),
getStatus: () => api.get('/api/calendar/status'),
testConnectivity: () => api.get('/api/calendar/connectivity'),
};
// File Services API
export const fileAPI = {
getUsers: () => api.get('/api/files/users'),
createUser: (user) => api.post('/api/files/users', user),
deleteUser: (username) => api.delete(`/api/files/users/${username}`),
createFolder: (data) => api.post('/api/files/folders', data),
deleteFolder: (username, folderPath) => api.delete(`/api/files/folders/${username}/${folderPath}`),
uploadFile: (username, file, path) => {
const formData = new FormData();
formData.append('file', file);
formData.append('path', path);
return api.post(`/api/files/upload/${username}`, formData, {
headers: { 'Content-Type': 'multipart/form-data' },
});
},
downloadFile: (username, filePath) => api.get(`/api/files/download/${username}/${filePath}`),
deleteFile: (username, filePath) => api.delete(`/api/files/delete/${username}/${filePath}`),
listFiles: (username, folder = '') => api.get(`/api/files/list/${username}`, { params: { folder } }),
getStatus: () => api.get('/api/files/status'),
testConnectivity: () => api.get('/api/files/connectivity'),
};
// Routing API
export const routingAPI = {
getStatus: () => api.get('/api/routing/status'),
// NAT
getNatRules: () => api.get('/api/routing/nat'),
addNatRule: (rule) => api.post('/api/routing/nat', rule),
deleteNatRule: (ruleId) => api.delete(`/api/routing/nat/${ruleId}`),
// Peer Routes
getPeerRoutes: () => api.get('/api/routing/peers'),
addPeerRoute: (route) => api.post('/api/routing/peers', route),
deletePeerRoute: (peerName) => api.delete(`/api/routing/peers/${peerName}`),
// Firewall
getFirewallRules: () => api.get('/api/routing/firewall'),
addFirewallRule: (rule) => api.post('/api/routing/firewall', rule),
deleteFirewallRule: (ruleId) => api.delete(`/api/routing/firewall/${ruleId}`),
getLiveIptables: () => api.get('/api/routing/live-iptables'),
// Other
addExitNode: (node) => api.post('/api/routing/exit-nodes', node),
addBridgeRoute: (route) => api.post('/api/routing/bridge', route),
addSplitRoute: (route) => api.post('/api/routing/split', route),
testConnectivity: (data) => api.post('/api/routing/connectivity', data),
getLogs: (lines = 50) => api.get('/api/routing/logs', { params: { lines } }),
};
// Vault & Trust API
export const vaultAPI = {
getStatus: () => api.get('/api/vault/status'),
getCertificates: () => api.get('/api/vault/certificates'),
generateCertificate: (data) => api.post('/api/vault/certificates', data),
revokeCertificate: (commonName) => api.delete(`/api/vault/certificates/${commonName}`),
getCACertificate: () => api.get('/api/vault/ca/certificate'),
getAgePublicKey: () => api.get('/api/vault/age/public-key'),
getTrustedKeys: () => api.get('/api/vault/trust/keys'),
addTrustedKey: (data) => api.post('/api/vault/trust/keys', data),
removeTrustedKey: (name) => api.delete(`/api/vault/trust/keys/${name}`),
verifyTrustChain: (data) => api.post('/api/vault/trust/verify', data),
getTrustChains: () => api.get('/api/vault/trust/chains'),
// Secrets management
listSecrets: () => api.get('/api/vault/secrets'),
storeSecret: (name, value) => api.post('/api/vault/secrets', { name, value }),
getSecret: (name) => api.get(`/api/vault/secrets/${name}`),
deleteSecret: (name) => api.delete(`/api/vault/secrets/${name}`),
};
// Services API
export const servicesAPI = {
getAllStatus: () => api.get('/api/services/status'),
testAllConnectivity: () => api.get('/api/services/connectivity'),
startService: (serviceName) => api.post(`/api/services/bus/services/${serviceName}/start`),
stopService: (serviceName) => api.post(`/api/services/bus/services/${serviceName}/stop`),
restartService: (serviceName) => api.post(`/api/services/bus/services/${serviceName}/restart`),
};
// Cell-to-cell connections API
export const cellLinkAPI = {
getInvite: () => api.get('/api/cells/invite'),
listConnections: () => api.get('/api/cells'),
addConnection: (invite) => api.post('/api/cells', invite),
removeConnection: (name) => api.delete(`/api/cells/${name}`),
getStatus: (name) => api.get(`/api/cells/${name}/status`),
};
// Health check
export const healthAPI = {
check: () => api.get('/health'),
};
// Monitoring API
export const monitoringAPI = {
getBackendLogs: (lines = 100) => api.get('/api/logs', { params: { lines } }),
getHealthHistory: () => api.get('/api/health/history'),
clearHealthHistory: () => api.post('/api/health/history/clear'),
};
// Logs API
export const logsAPI = {
getServiceLogs: (service, level = 'ALL', lines = 100) =>
api.get(`/api/logs/services/${service}`, { params: { level, lines } }),
searchLogs: (data) => api.post('/api/logs/search', data),
getLogFiles: () => api.get('/api/logs/files'),
rotateLogs: (service) => api.post('/api/logs/rotate', service ? { service } : {}),
getVerbosity: () => api.get('/api/logs/verbosity'),
setVerbosity: (levels) => api.put('/api/logs/verbosity', levels),
};
// Container Management API
export const containerAPI = {
// Containers
listContainers: () => api.get('/api/containers'),
startContainer: (name) => api.post(`/api/containers/${name}/start`),
stopContainer: (name) => api.post(`/api/containers/${name}/stop`),
restartContainer: (name) => api.post(`/api/containers/${name}/restart`),
getContainerLogs: (name, tail = 100) => api.get(`/api/containers/${name}/logs`, { params: { tail } }),
getContainerStats: (name) => api.get(`/api/containers/${name}/stats`),
createContainer: (data) => api.post('/api/containers', data), // data may include 'secrets' array
removeContainer: (name, force = false) => api.delete(`/api/containers/${name}`, { params: { force } }),
// Images
listImages: () => api.get('/api/images'),
pullImage: (image) => api.post('/api/images/pull', { image }),
removeImage: (image, force = false) => api.delete(`/api/images/${image}`, { params: { force } }),
// Volumes
listVolumes: () => api.get('/api/volumes'),
createVolume: (name) => api.post('/api/volumes', { name }),
removeVolume: (name, force = false) => api.delete(`/api/volumes/${name}`, { params: { force } }),
};
export default api;