From 770dfc0d2b089607216482e39d12d56eeb77eeb3 Mon Sep 17 00:00:00 2001 From: l00k Date: Sun, 12 Jan 2025 10:55:11 +0100 Subject: [PATCH] add WM navigation through url --- .../apps/prb3-monitor/src/components/Nav.js | 18 +++++++++------- .../src/pages/{ => [wm]}/inv/po.js | 2 +- .../src/pages/{ => [wm]}/inv/pool.js | 2 +- .../src/pages/{ => [wm]}/inv/worker.js | 2 +- .../src/pages/{ => [wm]}/status/tx.js | 2 +- .../src/pages/{ => [wm]}/status/worker.js | 10 ++++----- .../prb3-monitor/src/pages/api/p/[...slug].js | 16 +++++++++++++- frontend/apps/prb3-monitor/src/state.js | 21 ++++++++++++++++--- 8 files changed, 53 insertions(+), 20 deletions(-) rename frontend/apps/prb3-monitor/src/pages/{ => [wm]}/inv/po.js (98%) rename frontend/apps/prb3-monitor/src/pages/{ => [wm]}/inv/pool.js (98%) rename frontend/apps/prb3-monitor/src/pages/{ => [wm]}/inv/worker.js (99%) rename frontend/apps/prb3-monitor/src/pages/{ => [wm]}/status/tx.js (98%) rename frontend/apps/prb3-monitor/src/pages/{ => [wm]}/status/worker.js (98%) diff --git a/frontend/apps/prb3-monitor/src/components/Nav.js b/frontend/apps/prb3-monitor/src/components/Nav.js index d11fea6ea4..c3138bf3c2 100644 --- a/frontend/apps/prb3-monitor/src/components/Nav.js +++ b/frontend/apps/prb3-monitor/src/components/Nav.js @@ -14,7 +14,11 @@ import {useStyletron} from 'baseui'; const WmSelector = ({isOpen, onClose}) => { const allWm = useAtomValue(allWmAtom); - const setCurrWm = useSetAtom(currentWmIdAtom); + const setCurrWm = (key) => { + const parts = document.location.pathname.split('/'); + parts[1] = key; + document.location.href = parts.join('/'); + }; return ( Select WM @@ -22,7 +26,7 @@ const WmSelector = ({isOpen, onClose}) => { { - setCurrWm(item.name); + setCurrWm(item.key); onClose(); }} overrides={{ @@ -84,8 +88,8 @@ export default function Nav() { content={() => ( router.push(i.url)} /> @@ -107,10 +111,10 @@ export default function Nav() { items={[ { label: 'Workers', - url: '/inv/worker', + url: `/${currWm.key}/inv/worker`, }, - {label: 'Pools', url: '/inv/pool'}, - {label: 'Pool Operators', url: '/inv/po'}, + {label: 'Pools', url: `/${currWm.key}/inv/pool`}, + {label: 'Pool Operators', url: `/${currWm.key}/inv/po`}, ]} onItemSelect={({item: i}) => router.push(i.url)} /> diff --git a/frontend/apps/prb3-monitor/src/pages/inv/po.js b/frontend/apps/prb3-monitor/src/pages/[wm]/inv/po.js similarity index 98% rename from frontend/apps/prb3-monitor/src/pages/inv/po.js rename to frontend/apps/prb3-monitor/src/pages/[wm]/inv/po.js index dca51b10c0..af15565a64 100644 --- a/frontend/apps/prb3-monitor/src/pages/inv/po.js +++ b/frontend/apps/prb3-monitor/src/pages/[wm]/inv/po.js @@ -47,7 +47,7 @@ export default function PoolOperatorInvPage() { id: data.pid, })); }, [rawFetcher]); - const {data, isLoading, mutate} = useSWR(`inv_po_${currWm?.name}`, fetcher, {refreshInterval: 6000}); + const {data, isLoading, mutate} = useSWR(`inv_po_${currWm?.key}`, fetcher, {refreshInterval: 6000}); const [isModalOpen, setModalOpen] = useState(false); const onModalClose = (reset) => { setModalOpen(false); diff --git a/frontend/apps/prb3-monitor/src/pages/inv/pool.js b/frontend/apps/prb3-monitor/src/pages/[wm]/inv/pool.js similarity index 98% rename from frontend/apps/prb3-monitor/src/pages/inv/pool.js rename to frontend/apps/prb3-monitor/src/pages/[wm]/inv/pool.js index e1148400ed..59d2ad8eaa 100644 --- a/frontend/apps/prb3-monitor/src/pages/inv/pool.js +++ b/frontend/apps/prb3-monitor/src/pages/[wm]/inv/pool.js @@ -57,7 +57,7 @@ export default function PoolInvPage() { id: data.id, })); }, [rawFetcher]); - const {data, isLoading, mutate} = useSWR(`inv_pool_${currWm?.name}`, fetcher, {refreshInterval: 6000}); + const {data, isLoading, mutate} = useSWR(`inv_pool_${currWm?.key}`, fetcher, {refreshInterval: 6000}); const [currModalItem, setCurrModalItem] = useState(null); const [isModalOpen, setModalOpen] = useState(false); const onModalClose = (reset) => { diff --git a/frontend/apps/prb3-monitor/src/pages/inv/worker.js b/frontend/apps/prb3-monitor/src/pages/[wm]/inv/worker.js similarity index 99% rename from frontend/apps/prb3-monitor/src/pages/inv/worker.js rename to frontend/apps/prb3-monitor/src/pages/[wm]/inv/worker.js index 7b6696cfe9..fcc43778b8 100644 --- a/frontend/apps/prb3-monitor/src/pages/inv/worker.js +++ b/frontend/apps/prb3-monitor/src/pages/[wm]/inv/worker.js @@ -69,7 +69,7 @@ export default function WorkerInvPage() { .flat() .map((data) => ({id: data.id, data})); }, [rawFetcher]); - const {data, isLoading, mutate} = useSWR(`inv_workers_${currWm?.name}`, fetcher, {refreshInterval: 6000}); + const {data, isLoading, mutate} = useSWR(`inv_workers_${currWm?.key}`, fetcher, {refreshInterval: 6000}); const [currModalItem, setCurrModalItem] = useState(null); const [isModalOpen, setModalOpen] = useState(false); const onModalClose = (reset) => { diff --git a/frontend/apps/prb3-monitor/src/pages/status/tx.js b/frontend/apps/prb3-monitor/src/pages/[wm]/status/tx.js similarity index 98% rename from frontend/apps/prb3-monitor/src/pages/status/tx.js rename to frontend/apps/prb3-monitor/src/pages/[wm]/status/tx.js index 8bb39ade6f..f1d8b234a9 100644 --- a/frontend/apps/prb3-monitor/src/pages/status/tx.js +++ b/frontend/apps/prb3-monitor/src/pages/[wm]/status/tx.js @@ -92,7 +92,7 @@ export default function WorkerStatusPage() { ret.txs = [...ret.running_txs, ...ret.pending_txs, ...ret.past_txs].map((data) => ({data, id: data.id})); return ret; }, [rawFetcher]); - const {data, isLoading, mutate} = useSWR(`tx_status_${currWm?.name}`, fetcher, {refreshInterval: 6000}); + const {data, isLoading, mutate} = useSWR(`tx_status_${currWm?.key}`, fetcher, {refreshInterval: 6000}); return ( <> diff --git a/frontend/apps/prb3-monitor/src/pages/status/worker.js b/frontend/apps/prb3-monitor/src/pages/[wm]/status/worker.js similarity index 98% rename from frontend/apps/prb3-monitor/src/pages/status/worker.js rename to frontend/apps/prb3-monitor/src/pages/[wm]/status/worker.js index 6607df5656..75de41e1f5 100644 --- a/frontend/apps/prb3-monitor/src/pages/status/worker.js +++ b/frontend/apps/prb3-monitor/src/pages/[wm]/status/worker.js @@ -136,7 +136,7 @@ export default function WorkerStatusPage() { id: data.worker.id, })); }, [rawFetcher]); - const {data, isLoading, mutate} = useSWR(`worker_status_${currWm?.name}`, fetcher, {refreshInterval: 6000}); + const {data, isLoading, mutate} = useSWR(`worker_status_${currWm?.key}`, fetcher, {refreshInterval: 6000}); const batchActions = useMemo(() => { return [ @@ -369,10 +369,10 @@ export default function WorkerStatusPage() { } } actionButtons={[ - { - onClick: reloadWm, - label: 'Restart WM', - }, + // { + // onClick: reloadWm, + // label: 'Restart WM', + // }, ]} />
diff --git a/frontend/apps/prb3-monitor/src/pages/api/p/[...slug].js b/frontend/apps/prb3-monitor/src/pages/api/p/[...slug].js index 331e252d47..430635a285 100644 --- a/frontend/apps/prb3-monitor/src/pages/api/p/[...slug].js +++ b/frontend/apps/prb3-monitor/src/pages/api/p/[...slug].js @@ -6,11 +6,25 @@ export default async function handler(req, res) { const headers = req.headers; delete headers['content-length']; delete headers['Content-Length']; + delete headers['transfer-encoding']; + delete headers['Transfer-Encoding']; + delete headers['content-type']; + headers['Content-Type'] = 'application/json'; + + const body = req.body + ? ( + typeof req.body === 'object' + ? JSON.stringify(req.body) + : req.body + ) + : undefined + ; + const r = await fetch(url, { method: req.method, cache: 'no-cache', headers, - body: req.body ? (typeof req.body === 'object' ? JSON.stringify(req.body) : req.body) : undefined, + body, }); res.status(r.status); res.end(await r.text()); diff --git a/frontend/apps/prb3-monitor/src/state.js b/frontend/apps/prb3-monitor/src/state.js index 41e53f7a0f..bc8d81cf9b 100644 --- a/frontend/apps/prb3-monitor/src/state.js +++ b/frontend/apps/prb3-monitor/src/state.js @@ -15,18 +15,33 @@ export const allWmAtomRaw = loadable( export const allWmAtom = atom((get) => { const r = get(allWmAtomRaw); - return r.data || []; + if (!r.data) { + return []; + } + + for (const wm of r.data) { + wm.key = wm.name.toLowerCase() + .replaceAll(/[\s]+/g, '-') + .replaceAll(/[^a-z0-9-]/g, '') + ; + } + + return r.data; }); export const allWmAtomInObject = atom((get) => { const ret = {}; for (const i of get(allWmAtom)) { - ret[i.name] = i; + ret[i.key] = i; } return ret; }); -export const currentWmIdAtom = atomWithStorage('currentWmIdAtom', ''); +export const currentWmIdAtom = atom((get) => { + const allWm = get(allWmAtom); + const wmid = document?.location.pathname.split('/')[1]; + return wmid; +}); export const currentWmAtom = atom((get) => { const currentWmId = get(currentWmIdAtom);