Changable grid size

Its4Nik · Sep 17, 2024 · 06f88a9 · 06f88a9
1 parent 8b04eb9
commit 06f88a9
Show file tree

Hide file tree

Showing 10 changed files with 288 additions and 225 deletions.
diff --git a/.github/workflows/build.dev.yaml 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
diff --git a/README.md b/README.md
@@ -1,38 +1,39 @@
 <h1 align="center">🐳 Dockstat 🐳</h1>
 <p align="center">
-  A new Docker Monitoring software
+  A Docker Monitoring Frontend
 </p>
 
-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,229 +45,48 @@ 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:
       - ./dockstatapi:/api/config # Place your hosts.yaml file here
     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)
 
 ---
 
 ## 🚫 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! 😄