- A new Docker Monitoring software + A Docker Monitoring Frontend
-Dockstat is a monitoring frontend powered by the [DockStatAPI](https://github.com/Its4Nik/dockstatapi). - -It shows usage statistics like CPU, RAM and Network usage. +Dockstat is a monitoring frontend powered by the [DockStatAPI](https://github.com/Its4Nik/dockstatapi). It provides usage statistics like CPU, RAM, and Network usage.  See more examples [here](/docs/MultipleThemes.md). -See the documentation (WIP) here: +Check the documentation (WIP) [here](https://outline.itsnik.de/s/dockstat). -https://outline.itsnik.de/s/dockstat +--- -## ποΈ WORK IN PROGRESS +## ποΈ Work in Progress - [X] Refactoring - [X] Fix theme switcher - [X] WebUI for API config (Read only) -- [ ] WebUI for adding/removing hosts from the config of DockStatAPI +- [ ] WebUI for adding/removing hosts from DockStatAPI config - [X] Sorting for Hosts -- [X] Custom host Tags like "Raspberry" or "Cloudserver" -- [ ] Alert System using apprise or similar -- [X] better mobile UI -- [ ] Host Stats (CPU Cores, Max RAM amount available and ram used by containers) +- [X] Custom host tags (e.g., "Raspberry", "Cloudserver") +- [ ] Alert System (using Apprise or similar) +- [X] Improved mobile UI +- [ ] Host Stats (CPU cores, Max RAM, RAM used by containers) - [X] More themes -- [X] More advanced sub pages. -- [X] Exlude network mode "host" from network stats or do smth else with it (not sure yet) -- [ ] Add "Secondary API Host" for High availability -- [ ] Persistent choice of Theme / Refresh rate +- [X] More advanced sub-pages +- [X] Exclude network mode "host" from network stats or other handling +- [ ] Add "Secondary API Host" for high availability +- [ ] Persistent theme/refresh rate choice +- [X] Changable size of "Container Cards" + +--- -## β¬οΈ Installation using Docker: +## β¬οΈ Installation Using Docker ```yaml name: DockStat @@ -44,22 +45,22 @@ services: ports: - "4444:3000" environment: - - API_URL="http://localhost:7070" # Host of the DockStatAPI endpoint + - API_URL="http://localhost:7070" # DockStatAPI endpoint - DEFAULT_THEME="dracula" - SECRET="CHANGME" - - LOGO_SIZE="M" # Default Logo Size "M" - - DM_LOGO_COLOR="#FFFFFF" # Default Dark mode logo color "#FFFFFF" (white) - - LM_LOGO_COLOR="#000000" # Default Dark mode logo color "#000000" (black) + - LOGO_SIZE="M" # Default Logo Size "M" + - DM_LOGO_COLOR="#FFFFFF" # Dark mode logo color + - LM_LOGO_COLOR="#000000" # Light mode logo color volumes: - ./dockstat/icons:/app/build/icons restart: always - # API: + # API dockstatapi: image: ghcr.io/its4nik/dockstatapi:latest container_name: dockstatapi environment: - - SECRET=CHANGEME # This is required in the header 'Authorization': 'CHANGEME' + - SECRET=CHANGEME # Required in the header 'Authorization': 'CHANGEME' ports: - "7070:7070" volumes: @@ -67,171 +68,8 @@ services: restart: always ``` -## ποΈ Configuration - -β οΈ = required - -βοΈ = optional - ---- - -- β οΈ API_URL: The URL of the DockStatAPI endpoint - -- β οΈ SECRET: The Secret Token required fot the DockStatAPI endpoint - -- βοΈ DEFAULT_THEME: default theme. Screenshots [here](/docs/MultipleThemes.md) - -- βοΈ LOGO_SIZE: Logo sizes (XS, S, M, L, XL) - -- βοΈ DM_LOGO_COLOR: Darkmode Logo Color (as HEX) - -- βοΈ LM_LOGO_COLOR: Lightmode Logo Color (as HEX) - -To use the original logo colors you NEED to enter "original" in both, `LM_LOGO_COLOR` and `DM_LOGO_COLOR`. - -βΉοΈ Please use HTTPS to fetch data from the API - --- -### βββ THIS CONFIGURATION IS FOR THE API βββ - -Please place this file inside the mounted directory for `/api/config`. - -Example for the host.yaml file: -```yaml -mintimeout: 10000 # The minimum time to wait before querying the same server again, defaults to 5000 Ms - -log: - logsize: 10 # Specify the Size of the log files in MB, default is 1MB - LogCount: 1 # How many log files should be kept in rotation. Default is 5 - -hosts: - YourHost1: - url: server.local - port: 2375 - - YourHost2: - url: raspberrypi.local - port: 1234 - - YourHost3: - url: dockerhost.local - port: 4321 - - -container: - MyContainer: # Container name - link: https://github.com - icon: container.png -``` - ---- - -## π Add quick links to containers - -To add quick links to your containers, marked by the chain icon on the left site of the container, you need to specify them like this inside the yaml* file: - -*) The yaml file of the DockStatAPI - -```yaml -container: - MyContainer: - link: https://github.com -``` - -Inside the container section you can specify the link of said container by referencing the container's name. - ---- - -## πΌοΈ Add logos to containers - -### Simple Icons: - -To use Simple Icons, you can just prefix the icon name with "SI:" and then it will fetch the Simple Icon from their CDN. - -Example: - -```yaml -container: - redis: - icon: SI:redis -``` - - - -### Custom Logo: - -To add a logo to a container you can reference the logo file like this inside the yaml* file: - -*) The yaml file of the DockStatAPI - -```yaml -container: - MyContainer: - icon: mylogo.png -``` - -Be sure to mount the path `/app/build/icons` from the docker container and to populate it with your own icons. - -π° Example: - -> I have a Logo.png file inside the `/app/build/icons` (mounted as `./icons` on the host) - -> This is what my config, of the dockstat api should look like: - -```yaml -container: - MyContainer: - icon: Logo.png -``` - -> Now the container with the name "MyContainer" will have this logo displayed. - ---- - -## β¨ Tag different containers - - -To Tag different containers you have to add this to the config of your desired container at the backend side: - -```yaml -container: - MyContainer: - tags: private:violet-400 -``` - -You can add multiple tags by seperating them like this: - -(I don't recommend more then 2 tags otherwise it will look cluttered) - -```yaml -container: - MyContainer: - tags: private:violet-400,cloudserver:red-200 -``` - -For color specifications we are using TailwindCSS background color values. - -Just take the desired color and remove the `border-` infront of the text. - -To choose the right color for your need have a look here: -https://tailwindcss.com/docs/border-color - -All supported colors are [here](/src/components/css/Tags.css). - -β οΈ Only full borders are supported somethin like `border-x-teal-50` or `x-teal-50` will not work. - -The config for the example was this one: -```yaml -constainer: - dockstatapi: - tags: private:violet-700,cloudserver:red-900,api:blue-800 -``` - ---- - -## Star History - ## Star History [](https://star-history.com/#its4nik/dockstat&its4nik/dockstatapi&Date) @@ -239,34 +77,16 @@ constainer: --- ## π« Known Issues -### Open: -3. No "Known Issues" πππ +### Open ---- -### Resolved: - -2. Adding the default theme will make other themes unusable due to not being able to select them. +3. No "Known Issues" πππ -1. Theme switching only works once to the selected theme, you cant change back (yet). See the code logic here: +### Resolved -```javascript -// App.js - Line 42 -> 51 - -useEffect(() => { - setLoadingTheme(true); - if (theme === 'nord') { - import('./themes/nord.css').then(() => setLoadingTheme(false)); - } else if (theme === 'dracula') { - import('./themes/dracula.css').then(() => setLoadingTheme(false)); - } else if (theme === 'light') { - import('./themes/light.css').then(() => setLoadingTheme(false)); - } - }, [theme]); -``` +1. Theme switching only works once. See [code logic](/docs/known-issues.md#1-theme-switching-bug) for details. +2. Adding the default theme will make other themes unusable due to not being able to select them. See [code logic](/docs/known-issues.md#2-theme-unavailability-issue) for details. --- -Please don't judge this project, it's my first time using react in a bigger project. - -For more information open a new issue :D +Please don't judge this project too harshlyβit's my first major React project. For more information, open a new issue! π \ No newline at end of file diff --git a/docs/Configuration.md b/docs/Configuration.md new file mode 100644 index 0000000..aa878bb --- /dev/null +++ b/docs/Configuration.md @@ -0,0 +1,126 @@ +# ποΈ Configuration + +β οΈ = Required +βοΈ = Optional + +## Required +- **API_URL**: The URL of the DockStatAPI endpoint +- **SECRET**: The Secret Token for the DockStatAPI endpoint + +## Optional +- **DEFAULT_THEME**: Default theme. Screenshots [here](/docs/MultipleThemes.md) +- **LOGO_SIZE**: Logo sizes (XS, S, M, L, XL) +- **DM_LOGO_COLOR**: Dark mode logo color (HEX) +- **LM_LOGO_COLOR**: Light mode logo color (HEX) + +To use the original logo colors, enter "original" for both `LM_LOGO_COLOR` and `DM_LOGO_COLOR`. + +βΉοΈ Please use HTTPS to fetch data from the API. + +--- + +## β API Configuration + +Place this file inside the mounted directory for `/api/config`. + +### Example `hosts.yaml` File + +```yaml +mintimeout: 10000 # Minimum time to wait before querying the same server again (default: 5000 ms) + +log: + logsize: 10 # Size of the log files in MB (default: 1MB) + LogCount: 1 # Number of log files to keep in rotation (default: 5) + +hosts: + YourHost1: + url: server.local + port: 2375 + + YourHost2: + url: raspberrypi.local + port: 1234 + + YourHost3: + url: dockerhost.local + port: 4321 + +container: + MyContainer: + link: https://github.com + icon: container.png +``` + +--- + +## π Quick Links to Containers + +Add quick links to your containers by specifying them in the `yaml` file: + +```yaml +container: + MyContainer: + link: https://github.com +``` + +--- + +## πΌοΈ Add Logos to Containers + +### Simple Icons + +Prefix the icon name with "SI:" to fetch the Simple Icon from their CDN. + +Example: + +```yaml +container: + redis: + icon: SI:redis +``` + + + +### Custom Logos + +Reference a custom logo file: + +```yaml +container: + MyContainer: + icon: mylogo.png +``` + +Ensure to mount `/app/build/icons` and populate it with your own icons. + +Example: + +```yaml +container: + MyContainer: + icon: Logo.png +``` + +--- + +## β¨ Tag Different Containers + + + +Add tags to containers in the configuration file: + +```yaml +container: + MyContainer: + tags: private:violet-400 +``` + +You can add multiple tags: + +```yaml +container: + MyContainer: + tags: private:violet-400,cloudserver:red-200 +``` + +Use TailwindCSS background color values. See [TailwindCSS colors](https://tailwindcss.com/docs/border-color) for reference. \ No newline at end of file diff --git a/docs/known-issues.md b/docs/known-issues.md new file mode 100644 index 0000000..cbefaef --- /dev/null +++ b/docs/known-issues.md @@ -0,0 +1,44 @@ +# Known Issues + +## Description + +This document lists known issues with the Dockstat project, along with their status and potential workarounds. The goal is to keep users informed about any current problems and provide updates as we work on resolving them. + +## Current Issues + +### 1. Theme Switching Bug + +**Description:** +Theme switching only works once to the selected theme; users cannot switch back to a previously selected theme. This issue is due to the current logic in the theme loading mechanism. + +**Status:** +Closed + +**Workaround:** +Fixed + +**Related Code:** +```javascript +// App.js - Line 42 -> 51 +useEffect(() => { + setLoadingTheme(true); + if (theme === 'nord') { + import('./themes/nord.css').then(() => setLoadingTheme(false)); + } else if (theme === 'dracula') { + import('./themes/dracula.css').then(() => setLoadingTheme(false)); + } else if (theme === 'light') { + import('./themes/light.css').then(() => setLoadingTheme(false)); + } +}, [theme]); +``` + +### 2. Theme Unavailability Issue + +**Description:** +Adding the default theme may render other themes unusable due to the inability to select them. + +**Status:** +Resolved + +**Workaround:** +No workaround is needed as the issue has been resolved in the latest update. \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index a60d39f..a9b488b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,7 @@ "react-scripts": "^5.0.1", "react-syntax-highlighter": "^15.5.0", "react-toastify": "^10.0.5", - "tailwindcss": "^3.4.10", + "tailwindcss": "^3.4.11", "theme-change": "^2.5.0", "web-vitals": "^4.2.3" }, @@ -18425,9 +18425,9 @@ "license": "MIT" }, "node_modules/tailwindcss": { - "version": "3.4.10", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.10.tgz", - "integrity": "sha512-KWZkVPm7yJRhdu4SRSl9d4AK2wM3a50UsvgHZO7xY77NQr2V+fIrEuoDGQcbvswWvFGbS2f6e+jC/6WJm1Dl0w==", + "version": "3.4.11", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.11.tgz", + "integrity": "sha512-qhEuBcLemjSJk5ajccN9xJFtM/h0AVCPaA6C92jNP+M2J8kX+eMJHI7R2HFKUvvAsMpcfLILMCFYSeDwpMmlUg==", "license": "MIT", "dependencies": { "@alloc/quick-lru": "^5.2.0", diff --git a/package.json b/package.json index 45a3224..0d05e21 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "react-scripts": "^5.0.1", "react-syntax-highlighter": "^15.5.0", "react-toastify": "^10.0.5", - "tailwindcss": "^3.4.10", + "tailwindcss": "^3.4.11", "theme-change": "^2.5.0", "web-vitals": "^4.2.3" }, diff --git a/src/App.js b/src/App.js index 41caa35..dd09a91 100644 --- a/src/App.js +++ b/src/App.js @@ -19,6 +19,8 @@ function App() { const [darkModeLogoColor, setDarkModeLogoColor] = useState(''); const [lightModeLogoColor, setLightModeLogoColor] = useState(''); const [sortOption, setSortOption] = useState('name-asc'); + const [defaultTheme, setDefaultTheme] = useState(''); + const [gridSize, setGridSize] = useState('compact'); const handleConfigLoaded = (configData) => { setApihost(configData.API_URL); @@ -26,6 +28,7 @@ function App() { setLogoSize(configData.LOGO_SIZE); setDarkModeLogoColor(configData.DARK_MODE_LOGO_COLOR); setLightModeLogoColor(configData.LIGHT_MODE_LOGO_COLOR); + setDefaultTheme(configData.DEFAULT_THEME); }; const sortHosts = (hostsData, option) => { @@ -63,6 +66,9 @@ function App() { setTheme={setTheme} sortOption={sortOption} setSortOption={setSortOption} + defaultTheme={defaultTheme} + gridSize={gridSize} + setGridSize={setGridSize} />This container is using the host network.
+Host network