From 113cf7cb1846fe11704ca9ec29f147f51ac843c7 Mon Sep 17 00:00:00 2001 From: aceberg <1502200+aceberg@users.noreply.github.com> Date: Sat, 22 Mar 2025 19:28:31 +0700 Subject: [PATCH] Config Page --- frontend/Makefile | 4 + frontend/src/App.tsx | 4 + frontend/src/components/Config/About.tsx | 37 ++++++++ frontend/src/components/Config/Basic.tsx | 83 ++++++++++++++++ frontend/src/components/Config/Influx.tsx | 61 ++++++++++++ frontend/src/components/Config/Prometheus.tsx | 36 +++++++ frontend/src/components/Config/Scan.tsx | 94 +++++++++++++++++++ frontend/src/components/Filter.tsx | 1 - frontend/src/components/Header.tsx | 26 +++-- frontend/src/functions/api.ts | 34 +++++-- frontend/src/functions/exports.ts | 59 ++++++++++-- frontend/src/pages/Config.tsx | 30 ++++++ frontend/src/pages/History.tsx | 13 +++ go.mod | 26 +++-- go.sum | 73 ++++++-------- internal/prometheus/prometheus.go | 1 + internal/web/api.go | 15 +++ internal/web/config.go | 26 +---- internal/web/functions.go | 11 --- internal/web/index.go | 14 +-- internal/web/public/assets/Config-BbCoAEkY.js | 1 + .../web/public/assets/History-Be3nB-kA.js | 1 + ...tPage-CDE6gnSf.js => HostPage-BWCN9Byb.js} | 2 +- internal/web/public/assets/index.js | 2 +- internal/web/webgui.go | 25 +++-- 25 files changed, 533 insertions(+), 146 deletions(-) create mode 100644 frontend/src/components/Config/About.tsx create mode 100644 frontend/src/components/Config/Basic.tsx create mode 100644 frontend/src/components/Config/Influx.tsx create mode 100644 frontend/src/components/Config/Prometheus.tsx create mode 100644 frontend/src/components/Config/Scan.tsx create mode 100644 frontend/src/pages/Config.tsx create mode 100644 frontend/src/pages/History.tsx create mode 100644 internal/web/public/assets/Config-BbCoAEkY.js create mode 100644 internal/web/public/assets/History-Be3nB-kA.js rename internal/web/public/assets/{HostPage-CDE6gnSf.js => HostPage-BWCN9Byb.js} (64%) diff --git a/frontend/Makefile b/frontend/Makefile index 9c94538..7c003d6 100644 --- a/frontend/Makefile +++ b/frontend/Makefile @@ -10,6 +10,10 @@ replace: cd ../internal/web/public/assets/ && \ cat index-*.js | sed 's/assets/fs\/public\/assets/g;s/http:\/\/0.0.0.0:8840//' > index.js && \ cat index-*.css | sed 's/assets/fs\/public\/assets/g' > index.css && \ + cat Config-*.js | sed 's/index-.*\.js/index.js/g' > tmp && \ + cp tmp Config-*.js && \ + cat History-*.js | sed 's/index-.*\.js/index.js/g' > tmp && \ + cp tmp History-*.js && \ cat HostPage-*.js | sed 's/index-.*\.js/index.js/g' > tmp && \ cp tmp HostPage-*.js && \ rm tmp index-* diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 77b3d93..1c48b80 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -12,6 +12,8 @@ function App() { runAtStart(); }); + const Config = lazy(() => import("./pages/Config")); + const History = lazy(() => import("./pages/History")); const HostPage = lazy(() => import("./pages/HostPage")); return ( @@ -22,6 +24,8 @@ function App() {
+ +
diff --git a/frontend/src/components/Config/About.tsx b/frontend/src/components/Config/About.tsx new file mode 100644 index 0000000..da02aff --- /dev/null +++ b/frontend/src/components/Config/About.tsx @@ -0,0 +1,37 @@ +import { createSignal, onMount } from "solid-js"; +import { apiGetVersion } from "../../functions/api" + +function About() { + + const [version, setVersion] = createSignal(''); + const [link, setLink] = createSignal(''); + + onMount(async () => { + const v = await apiGetVersion(); + setVersion(v); + setLink("https://github.com/aceberg/WatchYourLAN/releases/tag/"+v); + }); + + return ( +
+
+ About ({version()}) +
+
+

● After changing Host or Port the app must be restarted

+

Shoutrrr URL provides notifications to Discord, Email, Gotify, Telegram and other services. Link to documentation

+

Interfaces - one or more, space separated

+

Timeout (seconds) - time between scans

+

Args for arp-scan - pass your own arguments to arp-scan. Enable debug log level to see resulting command. (Example: -r 1). See docs for more.

+

Arp Strings - can setup scans for vlans, docker0 and etcetera. See docs for more.

+

Trim History - remove history after (hours)

+

Store History in DB - if off, the History will be stored only in memory and will be lost on app restart. Though, it will keep the app DB smaller and InfluxDB is recommended for long term History storage

+

PG Connect URL - address to connect to PostgreSQL DB. (Example: postgres://username:password@192.168.0.1:5432/dbname?sslmode=disable). Full list of URL parameters here

+

● If you find this app useful, please, donate

+

● Commission you own app (Golang, HTML/JS, Flutter). Contact here

+
+
+ ) +} + +export default About \ No newline at end of file diff --git a/frontend/src/components/Config/Basic.tsx b/frontend/src/components/Config/Basic.tsx new file mode 100644 index 0000000..32ffaa7 --- /dev/null +++ b/frontend/src/components/Config/Basic.tsx @@ -0,0 +1,83 @@ +import { For, Show } from "solid-js"; +import { apiPath, apiTestNotify } from "../../functions/api" +import { appConfig } from "../../functions/exports" + +function Basic() { + + const themes = ["cerulean", "cosmo", "cyborg", "darkly", "emerald", "flatly", "grass", "grayscale", "journal", "litera", "lumen", "lux", "materia", "minty", "morph", "ocean", "pulse", "quartz", "sand", "sandstone", "simplex", "sketchy", "slate", "solar", "spacelab", "superhero", "united", "vapor", "wood", "yeti", "zephyr"]; + + const handleTestNotify = () => { + apiTestNotify(); + }; + + return ( +
+
Basic config
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Host
Port
Theme + +
Color mode + +
Local node-bootstrap URL
Shoutrrr URL + +
+
+
+
+ ) +} + +export default Basic \ No newline at end of file diff --git a/frontend/src/components/Config/Influx.tsx b/frontend/src/components/Config/Influx.tsx new file mode 100644 index 0000000..fa6b658 --- /dev/null +++ b/frontend/src/components/Config/Influx.tsx @@ -0,0 +1,61 @@ +import { apiPath } from "../../functions/api" +import { appConfig } from "../../functions/exports" + +function Influx() { + + return ( +
+
InfluxDB2 config
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Enable +
+ {appConfig().InfluxEnable + ? + : + } +
+
Address
Token
Org
Bucket
Skip TLS verify +
+ {appConfig().InfluxSkipTLS + ? + : + } +
+
+
+
+
+ ) +} + +export default Influx \ No newline at end of file diff --git a/frontend/src/components/Config/Prometheus.tsx b/frontend/src/components/Config/Prometheus.tsx new file mode 100644 index 0000000..dfb4102 --- /dev/null +++ b/frontend/src/components/Config/Prometheus.tsx @@ -0,0 +1,36 @@ +import { apiPath } from "../../functions/api" +import { appConfig } from "../../functions/exports" + +function Prometheus() { + + return ( +
+
Prometheus config
+
+
+ + + + + + + + + +
Enable +
+ {appConfig().PrometheusEnable + ? + : + } +
+
+ /metrics +
+
+
+
+ ) +} + +export default Prometheus \ No newline at end of file diff --git a/frontend/src/components/Config/Scan.tsx b/frontend/src/components/Config/Scan.tsx new file mode 100644 index 0000000..4496683 --- /dev/null +++ b/frontend/src/components/Config/Scan.tsx @@ -0,0 +1,94 @@ +import { For, Show } from "solid-js" +import { appConfig } from "../../functions/exports" +import { apiPath } from "../../functions/api" + +function Scan() { + + return ( +
+
Scan settings
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Interfaces
Timeout (seconds)
Args for arp-scan
Arp Strings + {arpStr => + + } + +
Log level
Trim History (hours)
Store History in DB +
+ {appConfig().HistInDB + ? + : + } +
+
Use DB
PG Connect URL + +
+
+
+
+ ) +} + +export default Scan \ No newline at end of file diff --git a/frontend/src/components/Filter.tsx b/frontend/src/components/Filter.tsx index 822fb3b..6039d8c 100644 --- a/frontend/src/components/Filter.tsx +++ b/frontend/src/components/Filter.tsx @@ -12,7 +12,6 @@ function Filter() { return (
- Filter by PortThemeColor modeLocal node-bootstrap URLShoutrrr URL'),ct=t("