From 06f88a9698afadf4581e05f5fb538f4e63c2c109 Mon Sep 17 00:00:00 2001 From: Its4Nik Date: Tue, 17 Sep 2024 18:03:25 +0200 Subject: [PATCH] Changable grid size --- .github/workflows/build.dev.yaml | 26 ++++ README.md | 240 ++++--------------------------- docs/Configuration.md | 126 ++++++++++++++++ docs/known-issues.md | 44 ++++++ package-lock.json | 8 +- package.json | 2 +- src/App.js | 7 + src/components/ContainerStats.js | 2 +- src/components/Controls.js | 39 ++++- src/components/HostStats.js | 19 ++- 10 files changed, 288 insertions(+), 225 deletions(-) create mode 100644 .github/workflows/build.dev.yaml create mode 100644 docs/Configuration.md create mode 100644 docs/known-issues.md diff --git a/.github/workflows/build.dev.yaml b/.github/workflows/build.dev.yaml new file mode 100644 index 0000000..1d3dc51 --- /dev/null +++ b/.github/workflows/build.dev.yaml @@ -0,0 +1,26 @@ +name: Docker Image CI + +on: + push: + branches: [ "dev" ] + +permissions: + packages: write + contents: read + +jobs: + build-main: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + name: Checkout repository + + - uses: pmorelli92/github-container-registry-build-push@2.2.1 + name: Build and Publish latest service image + with: + github-push-secret: ${{secrets.GITHUB_TOKEN}} + docker-image-name: dockstat + docker-image-tag: dev # optional + dockerfile-path: Dockerfile # optional + build-context: . # optional + build-only: false # optional \ No newline at end of file diff --git a/README.md b/README.md index 1c59f2f..a2ac192 100644 --- a/README.md +++ b/README.md @@ -1,38 +1,39 @@

🐳 Dockstat 🐳

- 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. ![Example, Night Theme](/docs/screenshots/night.png) 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 -``` - -![Redis Example icon](/docs/screenshots/redis.png) - -### 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 - -![Tag example](/docs/screenshots/examples/16.png) -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 [![Star History Chart](https://api.star-history.com/svg?repos=its4nik/dockstat,its4nik/dockstatapi&type=Date)](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 +``` + +![Redis Example icon](/docs/screenshots/redis.png) + +### 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 + +![Tag example](/docs/screenshots/examples/16.png) + +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} /> @@ -94,6 +100,7 @@ function App() { logoSize={logoSize} darkModeLogoColor={darkModeLogoColor} lightModeLogoColor={lightModeLogoColor} + gridSize={gridSize} /> ); }) diff --git a/src/components/ContainerStats.js b/src/components/ContainerStats.js index a5116c0..046b665 100644 --- a/src/components/ContainerStats.js +++ b/src/components/ContainerStats.js @@ -124,7 +124,7 @@ function ContainerStats({ container, logoSize, darkModeLogoColor, lightModeLogoC {isHostNetwork ? (
-

This container is using the host network.

+

Host network

) : ( <> diff --git a/src/components/Controls.js b/src/components/Controls.js index 96a94c4..c8856d2 100644 --- a/src/components/Controls.js +++ b/src/components/Controls.js @@ -1,20 +1,32 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { FaGithub } from 'react-icons/fa'; import { IoSettingsOutline, IoTerminalOutline } from "react-icons/io5"; import { CSSTransition } from 'react-transition-group'; -import ConfigModal from './ConfigModal' +import ConfigModal from './ConfigModal'; import SortDropdown from './dropdowns/SortDropdown'; import ThemeDropdown from './dropdowns/ThemeDropdown'; import './css/ModalAnimations.css'; -import './css/ConfigModal.css' +import './css/ConfigModal.css'; -const Controls = ({ intervalTime, setIntervalTime, theme, setTheme, sortOption, setSortOption, apihost, apiKey }) => { +const Controls = ({ intervalTime, setIntervalTime, theme, setTheme, sortOption, setSortOption, apihost, apiKey, defaultTheme, gridSize, setGridSize }) => { const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false); const [isTerminalModalOpen, setIsTerminalModalOpen] = useState(false); + const [initialThemeSet, setInitialThemeSet] = useState(false); + const [currentTheme, setCurrentTheme] = useState(''); + + useEffect(() => { + if (isSettingsModalOpen && !initialThemeSet) { + setCurrentTheme(defaultTheme); + setInitialThemeSet(true); + } + }, [isSettingsModalOpen, defaultTheme, initialThemeSet]); const handleThemeChange = (e) => { - setTheme(e.target.value); + const newTheme = e.target.value; + setCurrentTheme(newTheme); + setTheme(newTheme); }; + return ( <> {/* Control Buttons */} @@ -61,7 +73,7 @@ const Controls = ({ intervalTime, setIntervalTime, theme, setTheme, sortOption,

Select Theme

@@ -89,6 +101,21 @@ const Controls = ({ intervalTime, setIntervalTime, theme, setTheme, sortOption, /> + {/* Size Selector */} + +
+

Grid Size

+ +
+