fix: Dashboard and NetworkServices use live domain/cell_name from ConfigContext

- Dashboard: SERVICES array (Cell Home, Calendar, Files, Webmail) now builds
  URLs from useConfig() domain + cell_name instead of hardcoded 'mycell.cell'
- NetworkServices: imports useConfig() and cellAPI; shows current DNS zone and
  DHCP range in page header; fetches service_configs.network to display
  configured DHCP range and NTP servers alongside live operational data

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-21 05:39:29 -04:00
parent 1f3386d43b
commit 5c89687fab
2 changed files with 38 additions and 19 deletions
+15 -14
View File
@@ -1,12 +1,12 @@
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import {
Server,
Users,
Shield,
Mail,
Calendar,
FolderOpen,
import {
Server,
Users,
Shield,
Mail,
Calendar,
FolderOpen,
Wifi,
Activity,
CheckCircle,
@@ -17,16 +17,17 @@ import {
RotateCcw
} from 'lucide-react';
import { cellAPI, servicesAPI } from '../services/api';
const SERVICES = [
{ name: 'Cell Home', url: 'http://mycell.cell', desc: 'Main UI — no login needed' },
{ name: 'Calendar', url: 'http://calendar.cell', desc: 'Login: your WireGuard username' },
{ name: 'Files', url: 'http://files.cell', desc: 'Login: admin / admin123' },
{ name: 'Webmail', url: 'http://mail.cell', desc: 'Login: admin@rainloop.net / 12345' },
];
import { useConfig } from '../contexts/ConfigContext';
function Dashboard({ isOnline }) {
const navigate = useNavigate();
const { domain = 'cell', cell_name = 'mycell' } = useConfig();
const SERVICES = [
{ name: 'Cell Home', url: `http://${cell_name}.${domain}`, desc: 'Main UI — no login needed' },
{ name: 'Calendar', url: `http://calendar.${domain}`, desc: 'Login: your WireGuard username' },
{ name: 'Files', url: `http://files.${domain}`, desc: 'Login: admin / admin123' },
{ name: 'Webmail', url: `http://mail.${domain}`, desc: 'Login: admin@rainloop.net / 12345' },
];
const [cellStatus, setCellStatus] = useState(null);
const [servicesStatus, setServicesStatus] = useState(null);
const [isLoading, setIsLoading] = useState(true);
+23 -5
View File
@@ -1,11 +1,14 @@
import { useState, useEffect } from 'react';
import { Network, Server, Clock } from 'lucide-react';
import { networkAPI } from '../services/api';
import { networkAPI, cellAPI } from '../services/api';
import { useConfig } from '../contexts/ConfigContext';
function NetworkServices() {
const { domain = 'cell' } = useConfig();
const [dnsRecords, setDnsRecords] = useState([]);
const [dhcpLeases, setDhcpLeases] = useState([]);
const [ntpStatus, setNtpStatus] = useState(null);
const [networkConfig, setNetworkConfig] = useState({});
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
@@ -14,15 +17,17 @@ function NetworkServices() {
const fetchNetworkData = async () => {
try {
const [dnsResponse, dhcpResponse, ntpResponse] = await Promise.all([
const [dnsResponse, dhcpResponse, ntpResponse, cfgResponse] = await Promise.all([
networkAPI.getDNSRecords(),
networkAPI.getDHCPLeases(),
networkAPI.getNTPStatus()
networkAPI.getNTPStatus(),
cellAPI.getConfig(),
]);
setDnsRecords(dnsResponse.data);
setDhcpLeases(dhcpResponse.data);
setNtpStatus(ntpResponse.data);
setNetworkConfig(cfgResponse.data?.service_configs?.network || {});
} catch (error) {
console.error('Failed to fetch network data:', error);
} finally {
@@ -43,7 +48,10 @@ function NetworkServices() {
<div className="mb-8">
<h1 className="text-2xl font-bold text-gray-900">Network Services</h1>
<p className="mt-2 text-gray-600">
Manage DNS, DHCP, and NTP services
DNS zone: <span className="font-mono font-medium text-gray-800">{domain}</span>
{networkConfig.dhcp_range && (
<> &middot; DHCP: <span className="font-mono font-medium text-gray-800">{networkConfig.dhcp_range}</span></>
)}
</p>
</div>
@@ -77,6 +85,9 @@ function NetworkServices() {
<Server className="h-6 w-6 text-primary-500 mr-2" />
<h3 className="text-lg font-medium text-gray-900">DHCP Leases</h3>
</div>
{networkConfig.dhcp_range && (
<p className="text-xs text-gray-400 mb-2">Range: {networkConfig.dhcp_range}</p>
)}
<div className="space-y-2">
{dhcpLeases.length > 0 ? (
dhcpLeases.map((lease, index) => (
@@ -97,6 +108,13 @@ function NetworkServices() {
<Clock className="h-6 w-6 text-primary-500 mr-2" />
<h3 className="text-lg font-medium text-gray-900">NTP Status</h3>
</div>
{networkConfig.ntp_servers && (
<p className="text-xs text-gray-400 mb-2">
Servers: {Array.isArray(networkConfig.ntp_servers)
? networkConfig.ntp_servers.join(', ')
: networkConfig.ntp_servers}
</p>
)}
{ntpStatus ? (
<div className="space-y-2">
<div className="flex justify-between">