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:
@@ -1,12 +1,12 @@
|
|||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
import {
|
import {
|
||||||
Server,
|
Server,
|
||||||
Users,
|
Users,
|
||||||
Shield,
|
Shield,
|
||||||
Mail,
|
Mail,
|
||||||
Calendar,
|
Calendar,
|
||||||
FolderOpen,
|
FolderOpen,
|
||||||
Wifi,
|
Wifi,
|
||||||
Activity,
|
Activity,
|
||||||
CheckCircle,
|
CheckCircle,
|
||||||
@@ -17,16 +17,17 @@ import {
|
|||||||
RotateCcw
|
RotateCcw
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { cellAPI, servicesAPI } from '../services/api';
|
import { cellAPI, servicesAPI } from '../services/api';
|
||||||
|
import { useConfig } from '../contexts/ConfigContext';
|
||||||
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' },
|
|
||||||
];
|
|
||||||
|
|
||||||
function Dashboard({ isOnline }) {
|
function Dashboard({ isOnline }) {
|
||||||
const navigate = useNavigate();
|
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 [cellStatus, setCellStatus] = useState(null);
|
||||||
const [servicesStatus, setServicesStatus] = useState(null);
|
const [servicesStatus, setServicesStatus] = useState(null);
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
|||||||
@@ -1,11 +1,14 @@
|
|||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
import { Network, Server, Clock } from 'lucide-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() {
|
function NetworkServices() {
|
||||||
|
const { domain = 'cell' } = useConfig();
|
||||||
const [dnsRecords, setDnsRecords] = useState([]);
|
const [dnsRecords, setDnsRecords] = useState([]);
|
||||||
const [dhcpLeases, setDhcpLeases] = useState([]);
|
const [dhcpLeases, setDhcpLeases] = useState([]);
|
||||||
const [ntpStatus, setNtpStatus] = useState(null);
|
const [ntpStatus, setNtpStatus] = useState(null);
|
||||||
|
const [networkConfig, setNetworkConfig] = useState({});
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -14,15 +17,17 @@ function NetworkServices() {
|
|||||||
|
|
||||||
const fetchNetworkData = async () => {
|
const fetchNetworkData = async () => {
|
||||||
try {
|
try {
|
||||||
const [dnsResponse, dhcpResponse, ntpResponse] = await Promise.all([
|
const [dnsResponse, dhcpResponse, ntpResponse, cfgResponse] = await Promise.all([
|
||||||
networkAPI.getDNSRecords(),
|
networkAPI.getDNSRecords(),
|
||||||
networkAPI.getDHCPLeases(),
|
networkAPI.getDHCPLeases(),
|
||||||
networkAPI.getNTPStatus()
|
networkAPI.getNTPStatus(),
|
||||||
|
cellAPI.getConfig(),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
setDnsRecords(dnsResponse.data);
|
setDnsRecords(dnsResponse.data);
|
||||||
setDhcpLeases(dhcpResponse.data);
|
setDhcpLeases(dhcpResponse.data);
|
||||||
setNtpStatus(ntpResponse.data);
|
setNtpStatus(ntpResponse.data);
|
||||||
|
setNetworkConfig(cfgResponse.data?.service_configs?.network || {});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Failed to fetch network data:', error);
|
console.error('Failed to fetch network data:', error);
|
||||||
} finally {
|
} finally {
|
||||||
@@ -43,7 +48,10 @@ function NetworkServices() {
|
|||||||
<div className="mb-8">
|
<div className="mb-8">
|
||||||
<h1 className="text-2xl font-bold text-gray-900">Network Services</h1>
|
<h1 className="text-2xl font-bold text-gray-900">Network Services</h1>
|
||||||
<p className="mt-2 text-gray-600">
|
<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 && (
|
||||||
|
<> · DHCP: <span className="font-mono font-medium text-gray-800">{networkConfig.dhcp_range}</span></>
|
||||||
|
)}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -77,6 +85,9 @@ function NetworkServices() {
|
|||||||
<Server className="h-6 w-6 text-primary-500 mr-2" />
|
<Server className="h-6 w-6 text-primary-500 mr-2" />
|
||||||
<h3 className="text-lg font-medium text-gray-900">DHCP Leases</h3>
|
<h3 className="text-lg font-medium text-gray-900">DHCP Leases</h3>
|
||||||
</div>
|
</div>
|
||||||
|
{networkConfig.dhcp_range && (
|
||||||
|
<p className="text-xs text-gray-400 mb-2">Range: {networkConfig.dhcp_range}</p>
|
||||||
|
)}
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
{dhcpLeases.length > 0 ? (
|
{dhcpLeases.length > 0 ? (
|
||||||
dhcpLeases.map((lease, index) => (
|
dhcpLeases.map((lease, index) => (
|
||||||
@@ -97,6 +108,13 @@ function NetworkServices() {
|
|||||||
<Clock className="h-6 w-6 text-primary-500 mr-2" />
|
<Clock className="h-6 w-6 text-primary-500 mr-2" />
|
||||||
<h3 className="text-lg font-medium text-gray-900">NTP Status</h3>
|
<h3 className="text-lg font-medium text-gray-900">NTP Status</h3>
|
||||||
</div>
|
</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 ? (
|
{ntpStatus ? (
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between">
|
||||||
|
|||||||
Reference in New Issue
Block a user