admin/internet: display different graph if local and public ip match
Massimo Melina committed
Nov 10, 2023 at 19:11 UTC
456c01bfef88dba31f3e84cea4d051484512a1ec
1 file changed
+6
-5
admin/src/InternetPage.ts
+6
-5
@@ -1,6 +1,6 @@
1
import { createElement as h, ReactNode, useEffect, useMemo, useState } from 'react'
2
import { Alert, Box, Button, Card, CardContent, CircularProgress, Divider, LinearProgress, Link } from '@mui/material'
3
-import { CardMembership, HomeWorkTwoTone, Lock, Public, PublicTwoTone, RestartAlt, RouterTwoTone, Send,
3
+import { CardMembership, HomeWorkTwoTone, Lock, Public, PublicTwoTone, RestartAlt, RouterTwoTone, Send, Storage,
4
SvgIconComponent } from '@mui/icons-material'
5
import { apiCall, useApiEx } from './api'
6
import { closeDialog, DAY, formatTimestamp, wait, wantArray, with_ } from '@hfs/shared'
@@ -166,7 +166,7 @@ export default function InternetPage() {
166
const url = config.data?.base_url
167
const hostname = url && new URL(url).hostname
168
const domain = !isIP(hostname) && hostname
169
- return config.element || h(TitleCard, { title: "Address / Domain" },
169
+ return config.element || h(TitleCard, { icon: Public, title: "Address / Domain" },
170
h(Flex, { flexWrap: 'wrap' },
171
url || "Automatic, not configured",
172
h(Button, {
@@ -186,12 +186,13 @@ export default function InternetPage() {
186
function networkBox() {
187
if (error) return element
188
if (!nat) return h(CircularProgress)
189
+ const direct = nat?.publicIps.includes(nat?.localIp)
190
return h(Flex, { justifyContent: 'space-around' },
190
- h(Device, { name: "Local network", icon: HomeWorkTwoTone, color: localColor, ip: nat?.localIp,
191
+ h(Device, { name: "Server", icon: direct ? Storage : HomeWorkTwoTone, color: localColor, ip: nat?.localIp,
192
below: port && h(Box, { fontSize: 'smaller' }, "port ", port),
193
}),
193
- h(Sep),
194
- h(Device, {
194
+ !direct && h(Sep),
195
+ !direct && h(Device, {
196
name: "Router", icon: RouterTwoTone, ip: nat?.gatewayIp,
197
color: nat?.mapped && (wrongMap ? 'warning' : 'success'),
198
below: mapping ? h(LinearProgress, { sx: { height: '1em' } })