diff --git a/docs/configs/docker.md b/docs/configs/docker.md
index 133c263b..cc9ec465 100644
--- a/docs/configs/docker.md
+++ b/docs/configs/docker.md
@@ -9,8 +9,8 @@ For IP:PORT, simply make sure your Docker instance [has been configured](https:/
```yaml
my-remote-docker:
- host: 192.168.0.101
- port: 2375
+ host: 192.168.0.101
+ port: 2375
```
## Using Docker TLS
@@ -19,12 +19,12 @@ Since Docker supports connecting with TLS and client certificate authentication,
```yaml
my-remote-docker:
- host: 192.168.0.101
- port: 275
- tls:
- keyFile: tls/key.pem
- caFile: tls/ca.pem
- certFile: tls/cert.pem
+ host: 192.168.0.101
+ port: 275
+ tls:
+ keyFile: tls/key.pem
+ caFile: tls/ca.pem
+ certFile: tls/cert.pem
```
## Using Docker Socket Proxy
@@ -35,35 +35,35 @@ Here is an example docker-compose file that will expose the docker socket, and t
```yaml
dockerproxy:
- image: ghcr.io/tecnativa/docker-socket-proxy:latest
- container_name: dockerproxy
- environment:
- - CONTAINERS=1 # Allow access to viewing containers
- - SERVICES=1 # Allow access to viewing services (necessary when using Docker Swarm)
- - TASKS=1 # Allow access to viewing tasks (necessary when using Docker Swarm)
- - POST=0 # Disallow any POST operations (effectively read-only)
- ports:
- - 127.0.0.1:2375:2375
- volumes:
- - /var/run/docker.sock:/var/run/docker.sock:ro # Mounted as read-only
- restart: unless-stopped
+ image: ghcr.io/tecnativa/docker-socket-proxy:latest
+ container_name: dockerproxy
+ environment:
+ - CONTAINERS=1 # Allow access to viewing containers
+ - SERVICES=1 # Allow access to viewing services (necessary when using Docker Swarm)
+ - TASKS=1 # Allow access to viewing tasks (necessary when using Docker Swarm)
+ - POST=0 # Disallow any POST operations (effectively read-only)
+ ports:
+ - 127.0.0.1:2375:2375
+ volumes:
+ - /var/run/docker.sock:/var/run/docker.sock:ro # Mounted as read-only
+ restart: unless-stopped
homepage:
- image: ghcr.io/gethomepage/homepage:latest
- container_name: homepage
- volumes:
- - /path/to/config:/app/config
- ports:
- - 3000:3000
- restart: unless-stopped
+ image: ghcr.io/gethomepage/homepage:latest
+ container_name: homepage
+ volumes:
+ - /path/to/config:/app/config
+ ports:
+ - 3000:3000
+ restart: unless-stopped
```
Then, inside of your `docker.yaml` settings file, you'd configure the docker instance like so:
```yaml
my-docker:
- host: dockerproxy
- port: 2375
+ host: dockerproxy
+ port: 2375
```
## Using Socket Directly
@@ -76,14 +76,14 @@ If you'd rather use the socket directly, first make sure that you're passing the
```yaml
homepage:
- image: ghcr.io/gethomepage/homepage:latest
- container_name: homepage
- volumes:
- - /path/to/config:/app/config
- - /var/run/docker.sock:/var/run/docker.sock # pass local proxy
- ports:
- - 3000:3000
- restart: unless-stopped
+ image: ghcr.io/gethomepage/homepage:latest
+ container_name: homepage
+ volumes:
+ - /path/to/config:/app/config
+ - /var/run/docker.sock:/var/run/docker.sock # pass local proxy
+ ports:
+ - 3000:3000
+ restart: unless-stopped
```
If you're using `docker run`, this would be `-v /var/run/docker.sock:/var/run/docker.sock`.
@@ -92,7 +92,7 @@ Then, inside of your `docker.yaml` settings file, you'd configure the docker ins
```yaml
my-docker:
- socket: /var/run/docker.sock
+ socket: /var/run/docker.sock
```
## Services
@@ -118,18 +118,18 @@ Below is an example of the same service entry shown above, as docker labels.
```yaml
services:
- emby:
- image: lscr.io/linuxserver/emby:latest
- container_name: emby
- ports:
- - 8096:8096
- restart: unless-stopped
- labels:
- - homepage.group=Media
- - homepage.name=Emby
- - homepage.icon=emby.png
- - homepage.href=http://emby.home/
- - homepage.description=Media server
+ emby:
+ image: lscr.io/linuxserver/emby:latest
+ container_name: emby
+ ports:
+ - 8096:8096
+ restart: unless-stopped
+ labels:
+ - homepage.group=Media
+ - homepage.name=Emby
+ - homepage.icon=emby.png
+ - homepage.href=http://emby.home/
+ - homepage.description=Media server
```
When your Docker instance has been properly configured, this service will be automatically discovered and added to your Homepage. **You do not need to specify the `server` or `container` values, as they will be automatically inferred.**
@@ -142,15 +142,32 @@ You may also configure widgets, along with the standard service entry, again, us
```yaml
labels:
- - homepage.group=Media
- - homepage.name=Emby
- - homepage.icon=emby.png
- - homepage.href=http://emby.home/
- - homepage.description=Media server
- - homepage.widget.type=emby
- - homepage.widget.url=http://emby.home
- - homepage.widget.key=yourembyapikeyhere
- - homepage.widget.fields=["field1","field2"] # optional
+ - homepage.group=Media
+ - homepage.name=Emby
+ - homepage.icon=emby.png
+ - homepage.href=http://emby.home/
+ - homepage.description=Media server
+ - homepage.widget.type=emby
+ - homepage.widget.url=http://emby.home
+ - homepage.widget.key=yourembyapikeyhere
+ - homepage.widget.fields=["field1","field2"] # optional
+```
+
+You can add specify fields for e.g. the [CustomAPI](/widgets/services/customapi) widget by using array-style dot notation:
+
+```yaml
+labels:
+ - homepage.group=Media
+ - homepage.name=Emby
+ - homepage.icon=emby.png
+ - homepage.href=http://emby.home/
+ - homepage.description=Media server
+ - homepage.widget.type=customapi
+ - homepage.widget.url=http://argus.service/api/v1/service/summary/emby
+ - homepage.widget.field[0].label=Deployed Version
+ - homepage.widget.field[0].field.status=deployed_version
+ - homepage.widget.field[1].label=Latest Version
+ - homepage.widget.field[1].field.status=latest_version
```
## Docker Swarm
@@ -159,8 +176,8 @@ Docker swarm is supported and Docker services are specified with the same `serve
```yaml
my-docker:
- socket: /var/run/docker.sock
- swarm: true
+ socket: /var/run/docker.sock
+ swarm: true
```
For the automatic service discovery to discover all services it is important that homepage should be deployed on a manager node. Set deploy requirements to the master node in your stack yaml config, e.g.
@@ -188,9 +205,9 @@ In order to detect every service within the Docker swarm it is necessary that se
As of v0.6.4 discovered services can include an optional `weight` field to determine sorting such that:
-- Default weight for discovered services is 0
-- Default weight for configured services is their index within their group scaled by 100, i.e. (index + 1) \* 100
-- If two items have the same weight value, then they will be sorted by name
+- Default weight for discovered services is 0
+- Default weight for configured services is their index within their group scaled by 100, i.e. (index + 1) \* 100
+- If two items have the same weight value, then they will be sorted by name
## Show stats
diff --git a/docs/configs/kubernetes.md b/docs/configs/kubernetes.md
index 1035db40..c1777612 100644
--- a/docs/configs/kubernetes.md
+++ b/docs/configs/kubernetes.md
@@ -5,15 +5,15 @@ description: Kubernetes Configuration
The Kubernetes connectivity has the following requirements:
-- Kubernetes 1.19+
-- Metrics Service
-- An Ingress controller
+- Kubernetes 1.19+
+- Metrics Service
+- An Ingress controller
The Kubernetes connection is configured in the `kubernetes.yaml` file. There are 3 modes to choose from:
-- **disabled** - disables kubernetes connectivity
-- **default** - uses the default kubeconfig [resolution](https://kubernetes.io/docs/concepts/configuration/organize-cluster-access-kubeconfig/)
-- **cluster** - uses a service account inside the cluster
+- **disabled** - disables kubernetes connectivity
+- **default** - uses the default kubeconfig [resolution](https://kubernetes.io/docs/concepts/configuration/organize-cluster-access-kubeconfig/)
+- **cluster** - uses a service account inside the cluster
```yaml
mode: default
@@ -42,18 +42,18 @@ For instance, it can be utilized to roll multiple underlying deployments under o
```yaml
- Element Chat:
- icon: matrix-light.png
- href: https://chat.example.com
- description: Matrix Synapse Powered Chat
- app: matrix-element
- namespace: comms
- pod-selector: >-
- app.kubernetes.io/instance in (
- matrix-element,
- matrix-media-repo,
- matrix-media-repo-postgresql,
- matrix-synapse
- )
+ icon: matrix-light.png
+ href: https://chat.example.com
+ description: Matrix Synapse Powered Chat
+ app: matrix-element
+ namespace: comms
+ pod-selector: >-
+ app.kubernetes.io/instance in (
+ matrix-element,
+ matrix-media-repo,
+ matrix-media-repo-postgresql,
+ matrix-synapse
+ )
```
!!! note
@@ -68,29 +68,29 @@ Homepage features automatic service discovery by Ingress annotations. All config
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
- name: emby
- annotations:
- gethomepage.dev/enabled: "true"
- gethomepage.dev/description: Media Server
- gethomepage.dev/group: Media
- gethomepage.dev/icon: emby.png
- gethomepage.dev/name: Emby
- gethomepage.dev/widget.type: "emby"
- gethomepage.dev/widget.url: "https://emby.example.com"
- gethomepage.dev/pod-selector: ""
- gethomepage.dev/weight: 10 # optional
+ name: emby
+ annotations:
+ gethomepage.dev/enabled: "true"
+ gethomepage.dev/description: Media Server
+ gethomepage.dev/group: Media
+ gethomepage.dev/icon: emby.png
+ gethomepage.dev/name: Emby
+ gethomepage.dev/widget.type: "emby"
+ gethomepage.dev/widget.url: "https://emby.example.com"
+ gethomepage.dev/pod-selector: ""
+ gethomepage.dev/weight: 10 # optional
spec:
- rules:
- - host: emby.example.com
- http:
- paths:
- - backend:
- service:
- name: emby
- port:
- number: 8080
- path: /
- pathType: Prefix
+ rules:
+ - host: emby.example.com
+ http:
+ paths:
+ - backend:
+ service:
+ name: emby
+ port:
+ number: 8080
+ path: /
+ pathType: Prefix
```
When the Kubernetes cluster connection has been properly configured, this service will be automatically discovered and added to your Homepage. **You do not need to specify the `namespace` or `app` values, as they will be automatically inferred.**
@@ -103,32 +103,33 @@ Homepage can also read ingresses defined using the Traefik IngressRoute custom r
apiVersion: traefik.io/v1alpha1
kind: IngressRoute
metadata:
- name: emby
- annotations:
- gethomepage.dev/href: "https://emby.example.com"
- gethomepage.dev/enabled: "true"
- gethomepage.dev/description: Media Server
- gethomepage.dev/group: Media
- gethomepage.dev/icon: emby.png
- gethomepage.dev/name: Emby
- gethomepage.dev/widget.type: "emby"
- gethomepage.dev/widget.url: "https://emby.example.com"
- gethomepage.dev/pod-selector: ""
- gethomepage.dev/weight: 10 # optional
+ name: emby
+ annotations:
+ gethomepage.dev/href: "https://emby.example.com"
+ gethomepage.dev/enabled: "true"
+ gethomepage.dev/description: Media Server
+ gethomepage.dev/group: Media
+ gethomepage.dev/icon: emby.png
+ gethomepage.dev/app: emby-app # optional, may be needed if app.kubernetes.io/name != ingress metadata.name
+ gethomepage.dev/name: Emby
+ gethomepage.dev/widget.type: "emby"
+ gethomepage.dev/widget.url: "https://emby.example.com"
+ gethomepage.dev/pod-selector: ""
+ gethomepage.dev/weight: 10 # optional
spec:
- entryPoints:
- - websecure
- routes:
- - kind: Rule
- match: Host(`emby.example.com`)
- services:
- - kind: Service
- name: emby
- namespace: emby
- port: 8080
- scheme: http
- strategy: RoundRobin
- weight: 10
+ entryPoints:
+ - websecure
+ routes:
+ - kind: Rule
+ match: Host(`emby.example.com`)
+ services:
+ - kind: Service
+ name: emby
+ namespace: emby
+ port: 8080
+ scheme: http
+ strategy: RoundRobin
+ weight: 10
```
If the `href` attribute is not present, Homepage will ignore the specific IngressRoute.
diff --git a/docs/configs/service-widgets.md b/docs/configs/service-widgets.md
index 93ed968e..9c54964e 100644
--- a/docs/configs/service-widgets.md
+++ b/docs/configs/service-widgets.md
@@ -5,7 +5,7 @@ description: Service Widget Configuration
Unless otherwise noted, URLs should not end with a `/` or other API path. Each widget will handle the path on its own.
-Each service can have one widget attached to it (often matching the service type, but thats not forced).
+Each service can have one widget attached to it (often matching the service type, but that's not forced).
In addition to the href of the service, you can also specify the target location in which to open that link. See [Link Target](settings.md#link-target) for more details.
@@ -13,13 +13,13 @@ Using Emby as an example, this is how you would attach the Emby service widget.
```yaml
- Emby:
- icon: emby.png
- href: http://emby.host.or.ip/
- description: Movies & TV Shows
- widget:
- type: emby
- url: http://emby.host.or.ip
- key: apikeyapikeyapikeyapikeyapikey
+ icon: emby.png
+ href: http://emby.host.or.ip/
+ description: Movies & TV Shows
+ widget:
+ type: emby
+ url: http://emby.host.or.ip
+ key: apikeyapikeyapikeyapikeyapikey
```
## Field Visibility
@@ -30,11 +30,11 @@ Each widget can optionally provide a list of which fields should be visible via
```yaml
- Sonarr:
- icon: sonarr.png
- href: http://sonarr.host.or.ip
- widget:
- type: sonarr
- fields: ["wanted", "queued"]
- url: http://sonarr.host.or.ip
- key: apikeyapikeyapikeyapikeyapikey
+ icon: sonarr.png
+ href: http://sonarr.host.or.ip
+ widget:
+ type: sonarr
+ fields: ["wanted", "queued"]
+ url: http://sonarr.host.or.ip
+ key: apikeyapikeyapikeyapikeyapikey
```
diff --git a/docs/configs/services.md b/docs/configs/services.md
index 3a099e63..82e42f67 100644
--- a/docs/configs/services.md
+++ b/docs/configs/services.md
@@ -101,30 +101,50 @@ To use a local icon, first create a Docker mount to `/app/public/icons` and then
## Ping
-Services may have an optional `ping` property that allows you to monitor the availability of an endpoint you chose and have the response time displayed. You do not need to set your ping URL equal to your href URL.
-
-!!! note
-
- The ping feature works by making an http `HEAD` request to the URL, and falls back to `GET` in case that fails. It will not, for example, login if the URL requires auth or is behind e.g. Authelia. In the case of a reverse proxy and/or auth this usually requires the use of an 'internal' URL to make the ping feature correctly display status.
+Services may have an optional `ping` property that allows you to monitor the availability of an external host. As of v0.8.0, the ping feature attempts to use a true (ICMP) ping command on the underlying host.
```yaml
- Group A:
- Sonarr:
icon: sonarr.png
href: http://sonarr.host/
- ping: http://sonarr.host/
+ ping: sonarr.host
- Group B:
- Radarr:
icon: radarr.png
href: http://radarr.host/
- ping: http://some.other.host/
+ ping: some.other.host
```
@@ -382,16 +382,16 @@ If you have both set the per-service settings take precedence.
## Status Style
-You can choose from the following styles for docker or k8s status and ping: `dot` or `basic`
+You can choose from the following styles for docker or k8s status, site monitor and ping: `dot` or `basic`
-- The default is no value, and displays the ping response time in ms and the docker / k8s container status
-- `dot` shows a green dot for a successful ping or healthy status.
-- `basic` shows either UP or DOWN for ping
+- The default is no value, and displays the monitor and ping response time in ms and the docker / k8s container status
+- `dot` shows a green dot for a successful monitor ping or healthy status.
+- `basic` shows either UP or DOWN for monitor & ping
For example:
```yaml
-statusStyle: 'dot'
+statusStyle: "dot"
```
or per-service (`services.yaml`) with:
@@ -422,4 +422,4 @@ or per service widget (`services.yaml`) with:
hideErrors: true
```
-If either value is set to true, the errror message will be hidden.
+If either value is set to true, the error message will be hidden.
diff --git a/docs/installation/docker.md b/docs/installation/docker.md
index 7c696792..1f9f07d6 100644
--- a/docs/installation/docker.md
+++ b/docs/installation/docker.md
@@ -8,14 +8,14 @@ Using docker compose:
```yaml
version: "3.3"
services:
- homepage:
- image: ghcr.io/gethomepage/homepage:latest
- container_name: homepage
- ports:
- - 3000:3000
- volumes:
- - /path/to/config:/app/config # Make sure your local config directory exists
- - /var/run/docker.sock:/var/run/docker.sock # (optional) For docker integrations
+ homepage:
+ image: ghcr.io/gethomepage/homepage:latest
+ container_name: homepage
+ ports:
+ - 3000:3000
+ volumes:
+ - /path/to/config:/app/config # Make sure your local config directory exists
+ - /var/run/docker.sock:/var/run/docker.sock # (optional) For docker integrations
```
### Running as non-root
@@ -29,17 +29,17 @@ In the docker compose example below, the environment variables `$PUID` and `$PGI
```yaml
version: "3.3"
services:
- homepage:
- image: ghcr.io/gethomepage/homepage:latest
- container_name: homepage
- ports:
- - 3000:3000
- volumes:
- - /path/to/config:/app/config # Make sure your local config directory exists
- - /var/run/docker.sock:/var/run/docker.sock # (optional) For docker integrations, see alternative methods
- environment:
- PUID: $PUID
- PGID: $PGID
+ homepage:
+ image: ghcr.io/gethomepage/homepage:latest
+ container_name: homepage
+ ports:
+ - 3000:3000
+ volumes:
+ - /path/to/config:/app/config # Make sure your local config directory exists
+ - /var/run/docker.sock:/var/run/docker.sock # (optional) For docker integrations, see alternative methods
+ environment:
+ PUID: $PUID
+ PGID: $PGID
```
### With Docker Run
@@ -52,6 +52,6 @@ docker run -p 3000:3000 -v /path/to/config:/app/config -v /var/run/docker.sock:/
You can also include environment variables in your config files to protect sensitive information. Note:
-- Environment variables must start with `HOMEPAGE_VAR_` or `HOMEPAGE_FILE_`
-- The value of env var `HOMEPAGE_VAR_XXX` will replace `{{HOMEPAGE_VAR_XXX}}` in any config
-- The value of env var `HOMEPAGE_FILE_XXX` must be a file path, the contents of which will be used to replace `{{HOMEPAGE_FILE_XXX}}` in any config
+- Environment variables must start with `HOMEPAGE_VAR_` or `HOMEPAGE_FILE_`
+- The value of env var `HOMEPAGE_VAR_XXX` will replace `{{HOMEPAGE_VAR_XXX}}` in any config
+- The value of env var `HOMEPAGE_FILE_XXX` must be a file path, the contents of which will be used to replace `{{HOMEPAGE_FILE_XXX}}` in any config
diff --git a/docs/installation/k8s.md b/docs/installation/k8s.md
index 336801d8..685472ea 100644
--- a/docs/installation/k8s.md
+++ b/docs/installation/k8s.md
@@ -16,70 +16,70 @@ The helm chart allows for all the configurations to be inlined directly in your
```yaml
config:
- bookmarks:
- - Developer:
- - Github:
- - abbr: GH
- href: https://github.com/
- services:
- - My First Group:
- - My First Service:
- href: http://localhost/
- description: Homepage is awesome
+ bookmarks:
+ - Developer:
+ - Github:
+ - abbr: GH
+ href: https://github.com/
+ services:
+ - My First Group:
+ - My First Service:
+ href: http://localhost/
+ description: Homepage is awesome
- - My Second Group:
- - My Second Service:
- href: http://localhost/
- description: Homepage is the best
+ - My Second Group:
+ - My Second Service:
+ href: http://localhost/
+ description: Homepage is the best
- - My Third Group:
- - My Third Service:
- href: http://localhost/
- description: Homepage is 😎
- widgets:
- # show the kubernetes widget, with the cluster summary and individual nodes
- - kubernetes:
- cluster:
- show: true
- cpu: true
- memory: true
- showLabel: true
- label: "cluster"
- nodes:
- show: true
- cpu: true
- memory: true
- showLabel: true
- - search:
- provider: duckduckgo
- target: _blank
- kubernetes:
- mode: cluster
- settings:
+ - My Third Group:
+ - My Third Service:
+ href: http://localhost/
+ description: Homepage is 😎
+ widgets:
+ # show the kubernetes widget, with the cluster summary and individual nodes
+ - kubernetes:
+ cluster:
+ show: true
+ cpu: true
+ memory: true
+ showLabel: true
+ label: "cluster"
+ nodes:
+ show: true
+ cpu: true
+ memory: true
+ showLabel: true
+ - search:
+ provider: duckduckgo
+ target: _blank
+ kubernetes:
+ mode: cluster
+ settings:
# The service account is necessary to allow discovery of other services
serviceAccount:
- create: true
- name: homepage
+ create: true
+ name: homepage
# This enables the service account to access the necessary resources
enableRbac: true
ingress:
- main:
- enabled: true
- annotations:
- # Example annotations to add Homepage to your Homepage!
- gethomepage.dev/enabled: "true"
- gethomepage.dev/name: "Homepage"
- gethomepage.dev/description: "Dynamically Detected Homepage"
- gethomepage.dev/group: "Dynamic"
- gethomepage.dev/icon: "homepage.png"
- hosts:
- - host: homepage.example.com
- paths:
- - path: /
- pathType: Prefix
+ main:
+ enabled: true
+ annotations:
+ # Example annotations to add Homepage to your Homepage!
+ gethomepage.dev/enabled: "true"
+ gethomepage.dev/name: "Homepage"
+ gethomepage.dev/description: "Dynamically Detected Homepage"
+ gethomepage.dev/group: "Dynamic"
+ gethomepage.dev/icon: "homepage.png"
+ hosts:
+ - host: homepage.example.com
+ paths:
+ - path: /
+ pathType: Prefix
```
## Install with Kubernetes Manifests
@@ -94,12 +94,12 @@ Here's a working example of the resources you need:
apiVersion: v1
kind: ServiceAccount
metadata:
- name: homepage
- namespace: default
- labels:
- app.kubernetes.io/name: homepage
+ name: homepage
+ namespace: default
+ labels:
+ app.kubernetes.io/name: homepage
secrets:
- - name: homepage
+ - name: homepage
```
#### Secret
@@ -109,12 +109,12 @@ apiVersion: v1
kind: Secret
type: kubernetes.io/service-account-token
metadata:
- name: homepage
- namespace: default
- labels:
- app.kubernetes.io/name: homepage
- annotations:
- kubernetes.io/service-account.name: homepage
+ name: homepage
+ namespace: default
+ labels:
+ app.kubernetes.io/name: homepage
+ annotations:
+ kubernetes.io/service-account.name: homepage
```
#### ConfigMap
@@ -123,62 +123,62 @@ metadata:
apiVersion: v1
kind: ConfigMap
metadata:
- name: homepage
- namespace: default
- labels:
- app.kubernetes.io/name: homepage
+ name: homepage
+ namespace: default
+ labels:
+ app.kubernetes.io/name: homepage
data:
- kubernetes.yaml: |
- mode: cluster
- settings.yaml: ""
- #settings.yaml: |
- # providers:
- # longhorn:
- # url: https://longhorn.my.network
- custom.css: ""
- custom.js: ""
- bookmarks.yaml: |
- - Developer:
- - Github:
- - abbr: GH
- href: https://github.com/
- services.yaml: |
- - My First Group:
- - My First Service:
- href: http://localhost/
- description: Homepage is awesome
+ kubernetes.yaml: |
+ mode: cluster
+ settings.yaml: ""
+ #settings.yaml: |
+ # providers:
+ # longhorn:
+ # url: https://longhorn.my.network
+ custom.css: ""
+ custom.js: ""
+ bookmarks.yaml: |
+ - Developer:
+ - Github:
+ - abbr: GH
+ href: https://github.com/
+ services.yaml: |
+ - My First Group:
+ - My First Service:
+ href: http://localhost/
+ description: Homepage is awesome
- - My Second Group:
- - My Second Service:
- href: http://localhost/
- description: Homepage is the best
+ - My Second Group:
+ - My Second Service:
+ href: http://localhost/
+ description: Homepage is the best
- - My Third Group:
- - My Third Service:
- href: http://localhost/
- description: Homepage is 😎
- widgets.yaml: |
- - kubernetes:
- cluster:
- show: true
- cpu: true
- memory: true
- showLabel: true
- label: "cluster"
- nodes:
- show: true
- cpu: true
- memory: true
- showLabel: true
- - resources:
- backend: resources
- expanded: true
- cpu: true
- memory: true
- - search:
- provider: duckduckgo
- target: _blank
- docker.yaml: ""
+ - My Third Group:
+ - My Third Service:
+ href: http://localhost/
+ description: Homepage is 😎
+ widgets.yaml: |
+ - kubernetes:
+ cluster:
+ show: true
+ cpu: true
+ memory: true
+ showLabel: true
+ label: "cluster"
+ nodes:
+ show: true
+ cpu: true
+ memory: true
+ showLabel: true
+ - resources:
+ backend: resources
+ expanded: true
+ cpu: true
+ memory: true
+ - search:
+ provider: duckduckgo
+ target: _blank
+ docker.yaml: ""
```
#### ClusterRole and ClusterRoleBinding
@@ -187,57 +187,57 @@ data:
apiVersion: rbac.authorization.k8s.io/v1
kind: ClusterRole
metadata:
- name: homepage
- labels:
- app.kubernetes.io/name: homepage
+ name: homepage
+ labels:
+ app.kubernetes.io/name: homepage
rules:
- - apiGroups:
- - ""
- resources:
- - namespaces
- - pods
- - nodes
- verbs:
- - get
- - list
- - apiGroups:
- - extensions
- - networking.k8s.io
- resources:
- - ingresses
- verbs:
- - get
- - list
- - apiGroups:
- - traefik.containo.us
- resources:
- - ingressroutes
- verbs:
- - get
- - list
- - apiGroups:
- - metrics.k8s.io
- resources:
- - nodes
- - pods
- verbs:
- - get
- - list
+ - apiGroups:
+ - ""
+ resources:
+ - namespaces
+ - pods
+ - nodes
+ verbs:
+ - get
+ - list
+ - apiGroups:
+ - extensions
+ - networking.k8s.io
+ resources:
+ - ingresses
+ verbs:
+ - get
+ - list
+ - apiGroups:
+ - traefik.containo.us
+ resources:
+ - ingressroutes
+ verbs:
+ - get
+ - list
+ - apiGroups:
+ - metrics.k8s.io
+ resources:
+ - nodes
+ - pods
+ verbs:
+ - get
+ - list
---
apiVersion: rbac.authorization.k8s.io/v1
kind: ClusterRoleBinding
metadata:
- name: homepage
- labels:
- app.kubernetes.io/name: homepage
+ name: homepage
+ labels:
+ app.kubernetes.io/name: homepage
roleRef:
- apiGroup: rbac.authorization.k8s.io
- kind: ClusterRole
- name: homepage
+ apiGroup: rbac.authorization.k8s.io
+ kind: ClusterRole
+ name: homepage
subjects:
- - kind: ServiceAccount
- name: homepage
- namespace: default
+ - kind: ServiceAccount
+ name: homepage
+ namespace: default
```
#### Service
@@ -246,20 +246,20 @@ subjects:
apiVersion: v1
kind: Service
metadata:
- name: homepage
- namespace: default
- labels:
- app.kubernetes.io/name: homepage
- annotations:
+ name: homepage
+ namespace: default
+ labels:
+ app.kubernetes.io/name: homepage
+ annotations:
spec:
- type: ClusterIP
- ports:
- - port: 3000
- targetPort: http
- protocol: TCP
- name: http
- selector:
- app.kubernetes.io/name: homepage
+ type: ClusterIP
+ ports:
+ - port: 3000
+ targetPort: http
+ protocol: TCP
+ name: http
+ selector:
+ app.kubernetes.io/name: homepage
```
#### Deployment
@@ -268,68 +268,68 @@ spec:
apiVersion: apps/v1
kind: Deployment
metadata:
- name: homepage
- namespace: default
- labels:
- app.kubernetes.io/name: homepage
+ name: homepage
+ namespace: default
+ labels:
+ app.kubernetes.io/name: homepage
spec:
- revisionHistoryLimit: 3
- replicas: 1
- strategy:
- type: RollingUpdate
- selector:
- matchLabels:
- app.kubernetes.io/name: homepage
- template:
- metadata:
- labels:
- app.kubernetes.io/name: homepage
- spec:
- serviceAccountName: homepage
- automountServiceAccountToken: true
- dnsPolicy: ClusterFirst
- enableServiceLinks: true
- containers:
- - name: homepage
- image: "ghcr.io/gethomepage/homepage:latest"
- imagePullPolicy: Always
- ports:
- - name: http
- containerPort: 3000
- protocol: TCP
- volumeMounts:
- - mountPath: /app/config/custom.js
- name: homepage-config
- subPath: custom.js
- - mountPath: /app/config/custom.css
- name: homepage-config
- subPath: custom.css
- - mountPath: /app/config/bookmarks.yaml
- name: homepage-config
- subPath: bookmarks.yaml
- - mountPath: /app/config/docker.yaml
- name: homepage-config
- subPath: docker.yaml
- - mountPath: /app/config/kubernetes.yaml
- name: homepage-config
- subPath: kubernetes.yaml
- - mountPath: /app/config/services.yaml
- name: homepage-config
- subPath: services.yaml
- - mountPath: /app/config/settings.yaml
- name: homepage-config
- subPath: settings.yaml
- - mountPath: /app/config/widgets.yaml
- name: homepage-config
- subPath: widgets.yaml
- - mountPath: /app/config/logs
- name: logs
- volumes:
- - name: homepage-config
- configMap:
- name: homepage
- - name: logs
- emptyDir: {}
+ revisionHistoryLimit: 3
+ replicas: 1
+ strategy:
+ type: RollingUpdate
+ selector:
+ matchLabels:
+ app.kubernetes.io/name: homepage
+ template:
+ metadata:
+ labels:
+ app.kubernetes.io/name: homepage
+ spec:
+ serviceAccountName: homepage
+ automountServiceAccountToken: true
+ dnsPolicy: ClusterFirst
+ enableServiceLinks: true
+ containers:
+ - name: homepage
+ image: "ghcr.io/gethomepage/homepage:latest"
+ imagePullPolicy: Always
+ ports:
+ - name: http
+ containerPort: 3000
+ protocol: TCP
+ volumeMounts:
+ - mountPath: /app/config/custom.js
+ name: homepage-config
+ subPath: custom.js
+ - mountPath: /app/config/custom.css
+ name: homepage-config
+ subPath: custom.css
+ - mountPath: /app/config/bookmarks.yaml
+ name: homepage-config
+ subPath: bookmarks.yaml
+ - mountPath: /app/config/docker.yaml
+ name: homepage-config
+ subPath: docker.yaml
+ - mountPath: /app/config/kubernetes.yaml
+ name: homepage-config
+ subPath: kubernetes.yaml
+ - mountPath: /app/config/services.yaml
+ name: homepage-config
+ subPath: services.yaml
+ - mountPath: /app/config/settings.yaml
+ name: homepage-config
+ subPath: settings.yaml
+ - mountPath: /app/config/widgets.yaml
+ name: homepage-config
+ subPath: widgets.yaml
+ - mountPath: /app/config/logs
+ name: logs
+ volumes:
+ - name: homepage-config
+ configMap:
+ name: homepage
+ - name: logs
+ emptyDir: {}
```
#### Ingress
@@ -338,26 +338,26 @@ spec:
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
- name: homepage
- namespace: default
- labels:
- app.kubernetes.io/name: homepage
- annotations:
- gethomepage.dev/description: Dynamically Detected Homepage
- gethomepage.dev/enabled: "true"
- gethomepage.dev/group: Cluster Management
- gethomepage.dev/icon: homepage.png
- gethomepage.dev/name: Homepage
+ name: homepage
+ namespace: default
+ labels:
+ app.kubernetes.io/name: homepage
+ annotations:
+ gethomepage.dev/description: Dynamically Detected Homepage
+ gethomepage.dev/enabled: "true"
+ gethomepage.dev/group: Cluster Management
+ gethomepage.dev/icon: homepage.png
+ gethomepage.dev/name: Homepage
spec:
- rules:
- - host: "homepage.my.network"
- http:
- paths:
- - path: "/"
- pathType: Prefix
- backend:
- service:
- name: homepage
- port:
- number: 3000
+ rules:
+ - host: "homepage.my.network"
+ http:
+ paths:
+ - path: "/"
+ pathType: Prefix
+ backend:
+ service:
+ name: homepage
+ port:
+ number: 3000
```
diff --git a/docs/installation/unraid.md b/docs/installation/unraid.md
index 192837d2..eb5be7a8 100644
--- a/docs/installation/unraid.md
+++ b/docs/installation/unraid.md
@@ -7,39 +7,39 @@ Homepage has an UNRAID community package that you may use to install homepage. T
## Install the Plugin
-- In the UNRAID webGUI, go to the **Apps** tab.
-- In the search bar, search for `homepage`.
-- Click on **Install**.
-- Change the parameters to your liking.
- - Click on **APPLY**.
+- In the UNRAID webGUI, go to the **Apps** tab.
+- In the search bar, search for `homepage`.
+- Click on **Install**.
+- Change the parameters to your liking.
+ - Click on **APPLY**.
## Run the Container
-- While the container is running, open the WebUI.
- - Opening the page will generate the configuration files.
+- While the container is running, open the WebUI.
+ - Opening the page will generate the configuration files.
You may need to set the permissions of the folders to be able to edit the files.
-- Click on the Homepage icon.
-- Click on **Console**.
- - Enter `chmod -R u-x,go-rwx,go+u,ugo+X /app/config` and press **Enter**.
- - Enter `chmod -R u-x,go-rwx,go+u,ugo+X /app/public/icons` and press **Enter**.
- - Enter `chown -R nobody:users /app/config` and press **Enter**.
- - Enter `chown -R nobody:users /app/public/icons` and press **Enter**.
+- Click on the Homepage icon.
+- Click on **Console**.
+ - Enter `chmod -R u-x,go-rwx,go+u,ugo+X /app/config` and press **Enter**.
+ - Enter `chmod -R u-x,go-rwx,go+u,ugo+X /app/public/icons` and press **Enter**.
+ - Enter `chown -R nobody:users /app/config` and press **Enter**.
+ - Enter `chown -R nobody:users /app/public/icons` and press **Enter**.
## Some Other Notes
-- To use the [Docker integration](../configs/docker.md), you only need to use the `container:` parameter. There is no need to set the server.
+- To use the [Docker integration](../configs/docker.md), you only need to use the `container:` parameter. There is no need to set the server.
- !!! note
+ !!! note
To view detailed container statistics (CPU, RAM, etc.), or if you use a remote docker socket, `container:` will still need to be set. For example:
- ```
- - Plex:
- icon: /icons/plex.png
- href: https://app.plex.com
- container: plex
- ```
+ ```
+ - Plex:
+ icon: /icons/plex.png
+ href: https://app.plex.com
+ container: plex
+ ```
-- When you upload a new image into the **/images** folder, you will need to restart the container for it to show up in the WebUI. Please see the [service icons](../configs/services.md#icons) for more information.
+- When you upload a new image into the **/images** folder, you will need to restart the container for it to show up in the WebUI. Please see the [service icons](../configs/services.md#icons) for more information.
diff --git a/docs/more/development.md b/docs/more/development.md
index af5a58dd..132899a8 100644
--- a/docs/more/development.md
+++ b/docs/more/development.md
@@ -31,12 +31,20 @@ Once dependencies have been installed you can lint your code with
pnpm lint
```
+## Code formatting with pre-commit hooks
+
+To ensure a consistent style and formatting across the project source, the project utilizes Git [`pre-commit`](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks) hooks to perform some formatting and linting before a commit is allowed.
+
+Once installed, hooks will run when you commit. If the formatting isn't quite right, the commit will be rejected and you'll need to look at the output and fix the issue. Most hooks will automatically format failing files, so all you need to do is `git add` those files again and retry your commit.
+
+See the [pre-commit documentation](https://pre-commit.com/#install) to get started.
+
## Service Widget Guidelines
To ensure cohesiveness of various widgets, the following should be used as a guide for developing new widgets:
-- Please only submit widgets that have been requested and have at least 5 'up-votes'
-- Widgets should be only one row of blocks
-- Widgets should be no more than 4 blocks wide
-- Minimize the number of API calls
-- Avoid the use of custom proxy unless absolutely necessary
+- Please only submit widgets that have been requested and have at least 5 'up-votes'
+- Widgets should be only one row of blocks
+- Widgets should be no more than 4 blocks wide
+- Minimize the number of API calls
+- Avoid the use of custom proxy unless absolutely necessary
diff --git a/docs/more/homepage-move.md b/docs/more/homepage-move.md
index de99e640..061fd21b 100644
--- a/docs/more/homepage-move.md
+++ b/docs/more/homepage-move.md
@@ -5,4 +5,4 @@ description: Homepage Container Deprecation
As of v0.7.2 homepage migrated from benphelps/homepage to an "organization" repository located at [gethomepage/homepage](https://github.com/gethomepage/homepage/). The reason for this was to setup the project for longevity and allow for community maintenance.
-Migrating your installation should be as simple as changing `image: ghcr.io/benphelps/homepage:latest` to `image: ghcr.io/gethomepage/homepage:latest`.
\ No newline at end of file
+Migrating your installation should be as simple as changing `image: ghcr.io/benphelps/homepage:latest` to `image: ghcr.io/gethomepage/homepage:latest`.
diff --git a/docs/more/translations.md b/docs/more/translations.md
index 7a978989..824d6cb6 100644
--- a/docs/more/translations.md
+++ b/docs/more/translations.md
@@ -3,7 +3,7 @@ title: Translations
description: Contributing Translations
---
-Homepage is developed in English, component contributions must be in English. All translations are community provided, so a huge thanks go out to all those who have helped out so far!
+Homepage is developed in English, component contributions must be in English. All translations are community provided, so a huge thanks go out to all those who have helped out so far!
## Support Translations
diff --git a/docs/more/troubleshooting.md b/docs/more/troubleshooting.md
index 3ca3eb73..9d0fdc75 100644
--- a/docs/more/troubleshooting.md
+++ b/docs/more/troubleshooting.md
@@ -17,9 +17,9 @@ hide:
All service widgets work essentially the same, that is, homepage makes a proxied call to an API made available by that service. The majority of the time widgets don't work it is a configuration issue. Of course, sometimes things do break. Some basic steps to try:
-1. Ensure that you follow the rule mentioned on https://gethomepage.dev/latest/configs/service-widgets/. **Unless otherwise noted, URLs should not end with a / or other API path. Each widget will handle the path on its own.**. This is very important as including a trailing slash can result in an error.
+1. Ensure that you follow the rule mentioned on https://gethomepage.dev/latest/configs/service-widgets/. **Unless otherwise noted, URLs should not end with a / or other API path. Each widget will handle the path on its own.**. This is very important as including a trailing slash can result in an error.
-2. Verify the homepage installation can connect to the IP address or host you are using for the widget `url`. This is most simply achieved by pinging the server from the homepage machine, in Docker this means _from inside the container_ itself, e.g.:
+2. Verify the homepage installation can connect to the IP address or host you are using for the widget `url`. This is most simply achieved by pinging the server from the homepage machine, in Docker this means _from inside the container_ itself, e.g.:
```
docker exec homepage ping SERVICEIPORDOMAIN
@@ -27,10 +27,10 @@ All service widgets work essentially the same, that is, homepage makes a proxied
If your homepage install (container) cannot reach the service then you need to figure out why, for example in Docker this can mean putting the two containers on the same network, checking firewall issues, etc.
-3. If you have verified that homepage can in fact reach the service then you can also check the API output using e.g. `curl`, which is often helpful if you do need to file a bug report. Again, depending on your networking setup this may need to be run from _inside the container_ as IP / hostname resolution can differ inside vs outside.
+3. If you have verified that homepage can in fact reach the service then you can also check the API output using e.g. `curl`, which is often helpful if you do need to file a bug report. Again, depending on your networking setup this may need to be run from _inside the container_ as IP / hostname resolution can differ inside vs outside.
!!! note
-
+
`curl` is not installed in the base image by default but can be added inside the container with `apk add curl`.
The exact API endpoints and authentication vary of course, but in many cases instructions can be found by searching the web or if you feel comfortable looking at the homepage source code (e.g. `src/widgets/{widget}/widget.js`).
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index 0756f278..f7a8217e 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -17,4 +17,4 @@
color: var(--md-default-bg-color--lighter);
border-color: var(--md-default-bg-color--lighter);
}
-}
\ No newline at end of file
+}
diff --git a/docs/widgets/info/datetime.md b/docs/widgets/info/datetime.md
index 47feb45f..71ea007b 100644
--- a/docs/widgets/info/datetime.md
+++ b/docs/widgets/info/datetime.md
@@ -9,9 +9,9 @@ Formatting is locale aware and will present your date in the regional format you
```yaml
- datetime:
- text_size: xl
- format:
- timeStyle: short
+ text_size: xl
+ format:
+ timeStyle: short
```
Any options passed to `format` are passed directly to [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat), please reference the MDN documentation for all available options.
@@ -23,29 +23,29 @@ A few examples,
```yaml
# 13:37
format:
- timeStyle: short
- hourCycle: h23
+ timeStyle: short
+ hourCycle: h23
```
```yaml
# 1:37 PM
format:
- timeStyle: short
- hour12: true
+ timeStyle: short
+ hour12: true
```
```yaml
# 1/23/22, 1:37 PM
format:
- dateStyle: short
- timeStyle: short
- hour12: true
+ dateStyle: short
+ timeStyle: short
+ hour12: true
```
```yaml
# 4 januari 2023 om 13:51:25 PST
locale: nl
format:
- dateStyle: long
- timeStyle: long
+ dateStyle: long
+ timeStyle: long
```
diff --git a/docs/widgets/info/glances.md b/docs/widgets/info/glances.md
index e5cbc7bc..e6fc2a61 100644
--- a/docs/widgets/info/glances.md
+++ b/docs/widgets/info/glances.md
@@ -9,16 +9,16 @@ The Glances widget allows you to monitor the resources (CPU, memory, storage, te
```yaml
- glances:
- url: http://host.or.ip:port
- username: user # optional if auth enabled in Glances
- password: pass # optional if auth enabled in Glances
- cpu: true # optional, enabled by default, disable by setting to false
- mem: true # optional, enabled by default, disable by setting to false
- cputemp: true # disabled by default
- uptime: true # disabled by default
- disk: / # disabled by default, use mount point of disk(s) in glances. Can also be a list (see below)
- expanded: true # show the expanded view
- label: MyMachine # optional
+ url: http://host.or.ip:port
+ username: user # optional if auth enabled in Glances
+ password: pass # optional if auth enabled in Glances
+ cpu: true # optional, enabled by default, disable by setting to false
+ mem: true # optional, enabled by default, disable by setting to false
+ cputemp: true # disabled by default
+ uptime: true # disabled by default
+ disk: / # disabled by default, use mount point of disk(s) in glances. Can also be a list (see below)
+ expanded: true # show the expanded view
+ label: MyMachine # optional
```
Multiple disks can be specified as:
diff --git a/docs/widgets/info/greeting.md b/docs/widgets/info/greeting.md
index 0902814a..8a11290c 100644
--- a/docs/widgets/info/greeting.md
+++ b/docs/widgets/info/greeting.md
@@ -7,8 +7,8 @@ This allows you to display simple text, can be configured like so:
```yaml
- greeting:
- text_size: xl
- text: Greeting Text
+ text_size: xl
+ text: Greeting Text
```
Valid text sizes are `4xl`, `3xl`, `2xl`, `xl`, `md`, `sm`, `xs`.
diff --git a/docs/widgets/info/kubernetes.md b/docs/widgets/info/kubernetes.md
index d424a9c4..36096579 100644
--- a/docs/widgets/info/kubernetes.md
+++ b/docs/widgets/info/kubernetes.md
@@ -9,23 +9,23 @@ It provides CPU and Memory usage, by node and/or at the cluster level.
```yaml
- kubernetes:
- cluster:
- # Shows cluster-wide statistics
- show: true
- # Shows the aggregate CPU stats
- cpu: true
- # Shows the aggregate memory stats
- memory: true
- # Shows a custom label
- showLabel: true
- label: "cluster"
- nodes:
- # Shows node-specific statistics
- show: true
- # Shows the CPU for each node
- cpu: true
- # Shows the memory for each node
- memory: true
- # Shows the label, which is always the node name
- showLabel: true
+ cluster:
+ # Shows cluster-wide statistics
+ show: true
+ # Shows the aggregate CPU stats
+ cpu: true
+ # Shows the aggregate memory stats
+ memory: true
+ # Shows a custom label
+ showLabel: true
+ label: "cluster"
+ nodes:
+ # Shows node-specific statistics
+ show: true
+ # Shows the CPU for each node
+ cpu: true
+ # Shows the memory for each node
+ memory: true
+ # Shows the label, which is always the node name
+ showLabel: true
```
diff --git a/docs/widgets/info/longhorn.md b/docs/widgets/info/longhorn.md
index 4c7bbdbe..e25c844b 100644
--- a/docs/widgets/info/longhorn.md
+++ b/docs/widgets/info/longhorn.md
@@ -12,18 +12,18 @@ It can show the aggregate metrics and/or the individual node metrics.
```yaml
- longhorn:
- # Show the expanded view
- expanded: true
- # Shows a node representing the aggregate values
- total: true
- # Shows the node names as labels
- labels: true
- # Show the nodes
- nodes: true
- # An explicit list of nodes to show. All are shown by default if "nodes" is true
- include:
- - node1
- - node2
+ # Show the expanded view
+ expanded: true
+ # Shows a node representing the aggregate values
+ total: true
+ # Shows the node names as labels
+ labels: true
+ # Show the nodes
+ nodes: true
+ # An explicit list of nodes to show. All are shown by default if "nodes" is true
+ include:
+ - node1
+ - node2
```
The Longhorn URL and credentials are stored in the `providers` section of the `settings.yaml`.
diff --git a/docs/widgets/info/openmeteo.md b/docs/widgets/info/openmeteo.md
index db1daac3..4cc49e26 100644
--- a/docs/widgets/info/openmeteo.md
+++ b/docs/widgets/info/openmeteo.md
@@ -7,12 +7,12 @@ No registration is required at all! See [https://open-meteo.com/en/docs](https:/
```yaml
- openmeteo:
- label: Kyiv # optional
- latitude: 50.449684
- longitude: 30.525026
- timezone: Europe/Kiev # optional
- units: metric # or imperial
- cache: 5 # Time in minutes to cache API responses, to stay within limits
+ label: Kyiv # optional
+ latitude: 50.449684
+ longitude: 30.525026
+ timezone: Europe/Kiev # optional
+ units: metric # or imperial
+ cache: 5 # Time in minutes to cache API responses, to stay within limits
```
You can optionally not pass a `latitude` and `longitude` and the widget will use your current location (requires a secure context, eg. HTTPS).
diff --git a/docs/widgets/info/openweathermap.md b/docs/widgets/info/openweathermap.md
index 63e7295d..04733f5d 100644
--- a/docs/widgets/info/openweathermap.md
+++ b/docs/widgets/info/openweathermap.md
@@ -3,17 +3,17 @@ title: OpenWeatherMap
description: OpenWeatherMap Information Widget Configuration
---
-The free tier "One Call API" is all thats required, you will need to [subscribe](https://home.openweathermap.org/subscriptions/unauth_subscribe/onecall_30/base) and grab your API key.
+The free tier "One Call API" is all that's required, you will need to [subscribe](https://home.openweathermap.org/subscriptions/unauth_subscribe/onecall_30/base) and grab your API key.
```yaml
- openweathermap:
- label: Kyiv #optional
- latitude: 50.449684
- longitude: 30.525026
- units: metric # or imperial
- provider: openweathermap
- apiKey: youropenweathermapkey # required only if not using provider, this reveals api key in requests
- cache: 5 # Time in minutes to cache API responses, to stay within limits
+ label: Kyiv #optional
+ latitude: 50.449684
+ longitude: 30.525026
+ units: metric # or imperial
+ provider: openweathermap
+ apiKey: youropenweathermapkey # required only if not using provider, this reveals api key in requests
+ cache: 5 # Time in minutes to cache API responses, to stay within limits
```
You can optionally not pass a `latitude` and `longitude` and the widget will use your current location (requires a secure context, eg. HTTPS).
diff --git a/docs/widgets/info/resources.md b/docs/widgets/info/resources.md
index 43dea381..35f2177b 100644
--- a/docs/widgets/info/resources.md
+++ b/docs/widgets/info/resources.md
@@ -9,32 +9,32 @@ The disk path is the path reported by `df` (Mounted On), or the mount point of t
The cpu and memory resource information are the container's usage while [glances](glances.md) displays statistics for the host machine on which it is installed.
-_Note: unfortunately, the package used for getting CPU temp ([systeminformation](https://systeminformation.io)) is not compatibile with some setups and will not report any value(s) for CPU temp._
+_Note: unfortunately, the package used for getting CPU temp ([systeminformation](https://systeminformation.io)) is not compatible with some setups and will not report any value(s) for CPU temp._
**Any disk you wish to access must be mounted to your container as a volume.**
```yaml
- resources:
- cpu: true
- memory: true
- disk: /disk/mount/path
- cputemp: true
- uptime: true
- units: imperial # only used by cpu temp
- refresh: 3000 # optional, in ms
+ cpu: true
+ memory: true
+ disk: /disk/mount/path
+ cputemp: true
+ uptime: true
+ units: imperial # only used by cpu temp
+ refresh: 3000 # optional, in ms
```
You can also pass a `label` option, which allows you to group resources under named sections,
```yaml
- resources:
- label: System
- cpu: true
- memory: true
+ label: System
+ cpu: true
+ memory: true
- resources:
- label: Storage
- disk: /mnt/storage
+ label: Storage
+ disk: /mnt/storage
```
Which produces something like this,
@@ -45,11 +45,11 @@ If you have more than a single disk and would like to group them together under
```yaml
- resources:
- label: Storage
- disk:
- - /mnt/storage
- - /mnt/backup
- - /mnt/media
+ label: Storage
+ disk:
+ - /mnt/storage
+ - /mnt/backup
+ - /mnt/media
```
To produce something like this,
@@ -60,12 +60,12 @@ You can additionally supply an optional `expanded` property set to true in order
```yaml
- resources:
- label: Array Disks
- expanded: true
- disk:
- - /disk1
- - /disk2
- - /disk3
+ label: Array Disks
+ expanded: true
+ disk:
+ - /disk1
+ - /disk2
+ - /disk3
```
diff --git a/docs/widgets/info/search.md b/docs/widgets/info/search.md
index a03d711c..a9851bb1 100644
--- a/docs/widgets/info/search.md
+++ b/docs/widgets/info/search.md
@@ -7,25 +7,25 @@ You can add a search bar to your top widget area that can search using Google, D
```yaml
- search:
- provider: google # google, duckduckgo, bing, baidu, brave or custom
- focus: true # Optional, will set focus to the search bar on page load
- target: _blank # One of _self, _blank, _parent or _top
+ provider: google # google, duckduckgo, bing, baidu, brave or custom
+ focus: true # Optional, will set focus to the search bar on page load
+ target: _blank # One of _self, _blank, _parent or _top
```
or for a custom search:
```yaml
- search:
- provider: custom
- url: https://lougle.com/?q=
- target: _blank
+ provider: custom
+ url: https://lougle.com/?q=
+ target: _blank
```
multiple providers is also supported via a dropdown (excluding custom):
```yaml
- search:
- provider: [brave, google, duckduckgo]
+ provider: [brave, google, duckduckgo]
```
_Added in v0.1.6, updated in 0.6.0_
diff --git a/docs/widgets/info/weather.md b/docs/widgets/info/weather.md
index 338ca256..6357f0c0 100644
--- a/docs/widgets/info/weather.md
+++ b/docs/widgets/info/weather.md
@@ -5,16 +5,16 @@ description: Weather API Information Widget Configuration
**Note: this widget is considered 'deprecated' since there is no longer a free Weather API tier for new members. See the openmeteo or openweathermap widgets for alternatives.**
-The free tier is all thats required, you will need to [register](https://www.weatherapi.com/signup.aspx) and grab your API key.
+The free tier is all that's required, you will need to [register](https://www.weatherapi.com/signup.aspx) and grab your API key.
```yaml
- weatherapi:
- label: Kyiv # optional
- latitude: 50.449684
- longitude: 30.525026
- units: metric # or imperial
- apiKey: yourweatherapikey
- cache: 5 # Time in minutes to cache API responses, to stay within limits
+ label: Kyiv # optional
+ latitude: 50.449684
+ longitude: 30.525026
+ units: metric # or imperial
+ apiKey: yourweatherapikey
+ cache: 5 # Time in minutes to cache API responses, to stay within limits
```
You can optionally not pass a `latitude` and `longitude` and the widget will use your current location (requires a secure context, eg. HTTPS).
diff --git a/docs/widgets/services/adguard-home.md b/docs/widgets/services/adguard-home.md
index 57fad6a6..af922f77 100644
--- a/docs/widgets/services/adguard-home.md
+++ b/docs/widgets/services/adguard-home.md
@@ -9,8 +9,8 @@ Allowed fields: `["queries", "blocked", "filtered", "latency"]`.
```yaml
widget:
- type: adguard
- url: http://adguard.host.or.ip
- username: admin
- password: password
+ type: adguard
+ url: http://adguard.host.or.ip
+ username: admin
+ password: password
```
diff --git a/docs/widgets/services/atsumeru.md b/docs/widgets/services/atsumeru.md
index 06126f2e..77432216 100644
--- a/docs/widgets/services/atsumeru.md
+++ b/docs/widgets/services/atsumeru.md
@@ -9,8 +9,8 @@ Allowed fields: `["series", "archives", "chapters", "categories"]`.
```yaml
widget:
- type: atsumeru
- url: http://atsumeru.host.or.ip:port
- username: username
- password: password
+ type: atsumeru
+ url: http://atsumeru.host.or.ip:port
+ username: username
+ password: password
```
diff --git a/docs/widgets/services/audiobookshelf.md b/docs/widgets/services/audiobookshelf.md
index 73e2b744..10beec24 100644
--- a/docs/widgets/services/audiobookshelf.md
+++ b/docs/widgets/services/audiobookshelf.md
@@ -9,7 +9,7 @@ Allowed fields: `["podcasts", "podcastsDuration", "books", "booksDuration"]`
```yaml
widget:
- type: audiobookshelf
- url: http://audiobookshelf.host.or.ip:port
- key: audiobookshelflapikey
+ type: audiobookshelf
+ url: http://audiobookshelf.host.or.ip:port
+ key: audiobookshelflapikey
```
diff --git a/docs/widgets/services/authentik.md b/docs/widgets/services/authentik.md
index 306107e0..b3f8cdd6 100644
--- a/docs/widgets/services/authentik.md
+++ b/docs/widgets/services/authentik.md
@@ -18,7 +18,7 @@ Allowed fields: `["users", "loginsLast24H", "failedLoginsLast24H"]`.
```yaml
widget:
- type: authentik
- url: http://authentik.host.or.ip:22070
- key: api_token
+ type: authentik
+ url: http://authentik.host.or.ip:22070
+ key: api_token
```
diff --git a/docs/widgets/services/autobrr.md b/docs/widgets/services/autobrr.md
index ba034d2a..d41d7c32 100644
--- a/docs/widgets/services/autobrr.md
+++ b/docs/widgets/services/autobrr.md
@@ -9,7 +9,7 @@ Allowed fields: `["approvedPushes", "rejectedPushes", "filters", "indexers"]`.
```yaml
widget:
- type: autobrr
- url: http://autobrr.host.or.ip
- key: apikeyapikeyapikeyapikeyapikey
+ type: autobrr
+ url: http://autobrr.host.or.ip
+ key: apikeyapikeyapikeyapikeyapikey
```
diff --git a/docs/widgets/services/azuredevops.md b/docs/widgets/services/azuredevops.md
index a9142731..86ad7418 100644
--- a/docs/widgets/services/azuredevops.md
+++ b/docs/widgets/services/azuredevops.md
@@ -8,19 +8,19 @@ This widget has 2 functions:
1. Pipelines: checks if the relevant pipeline is running or not, and if not, reports the last status.\
Allowed fields: `["result", "status"]`.
-2. Pull Requests: returns the amount of open PRs, the amount of the PRs you have open, and how many PRs that you open are marked as 'Approved' by atleast 1 person and not yet completed.\
+2. Pull Requests: returns the amount of open PRs, the amount of the PRs you have open, and how many PRs that you open are marked as 'Approved' by at least 1 person and not yet completed.\
Allowed fields: `["totalPrs", "myPrs", "approved"]`.
You will need to generate a personal access token for an existing user, see the [azure documentation](https://learn.microsoft.com/en-us/azure/devops/organizations/accounts/use-personal-access-tokens-to-authenticate?view=azure-devops&tabs=Windows#create-a-pat)
```yaml
widget:
- type: azuredevops
- organization: myOrganization
- project: myProject
- definitionId: pipelineDefinitionId # required for pipelines
- branchName: branchName # optional for pipelines, leave empty for all
- userEmail: email # required for pull requests
- repositoryId: prRepositoryId # required for pull requests
- key: personalaccesstoken
+ type: azuredevops
+ organization: myOrganization
+ project: myProject
+ definitionId: pipelineDefinitionId # required for pipelines
+ branchName: branchName # optional for pipelines, leave empty for all
+ userEmail: email # required for pull requests
+ repositoryId: prRepositoryId # required for pull requests
+ key: personalaccesstoken
```
diff --git a/docs/widgets/services/bazarr.md b/docs/widgets/services/bazarr.md
index 3a48821e..ac1a95c8 100644
--- a/docs/widgets/services/bazarr.md
+++ b/docs/widgets/services/bazarr.md
@@ -9,7 +9,7 @@ Allowed fields: `["missingEpisodes", "missingMovies"]`.
```yaml
widget:
- type: bazarr
- url: http://bazarr.host.or.ip
- key: apikeyapikeyapikeyapikeyapikey
+ type: bazarr
+ url: http://bazarr.host.or.ip
+ key: apikeyapikeyapikeyapikeyapikey
```
diff --git a/docs/widgets/services/caddy.md b/docs/widgets/services/caddy.md
index 52c1d462..c85d1d9a 100644
--- a/docs/widgets/services/caddy.md
+++ b/docs/widgets/services/caddy.md
@@ -7,6 +7,6 @@ Allowed fields: `["upstreams", "requests", "requests_failed"]`.
```yaml
widget:
- type: caddy
- url: http://caddy.host.or.ip:adminport # default admin port is 2019
+ type: caddy
+ url: http://caddy.host.or.ip:adminport # default admin port is 2019
```
diff --git a/docs/widgets/services/calendar.md b/docs/widgets/services/calendar.md
index 794c0ed2..990c01c2 100644
--- a/docs/widgets/services/calendar.md
+++ b/docs/widgets/services/calendar.md
@@ -3,6 +3,8 @@ title: Calendar
description: Calendar widget
---
+## Monthly view
+
This widget shows monthly calendar, with optional integrations to show events from supported widgets.
@@ -11,6 +13,8 @@ This widget shows monthly calendar, with optional integrations to show events fr
widget:
type: calendar
firstDayInWeek: sunday # optional - defaults to monday
+ view: monthly # optional - possible values monthly, agenda
+ maxEvents: 10 # optional - defaults to 10
integrations: # optional
- type: sonarr # active widget type that is currently enabled on homepage - possible values: radarr, sonarr, lidarr, readarr
service_group: Media # group name where widget exists
@@ -20,6 +24,20 @@ widget:
unmonitored: true # optional - defaults to false, used with *arr stack
```
+## Agenda
+
+This view shows only list of events from configured integrations
+
+```yaml
+widget:
+ type: calendar
+ view: agenda
+ maxEvents: 10 # optional - defaults to 10
+ integrations: # same as in Monthly view example
+```
+
+## Integrations
+
Currently integrated widgets are [sonarr](sonarr.md), [radarr](radarr.md), [lidarr](lidarr.md) and [readarr](readarr.md).
Supported colors can be found on [color palette](../../configs/settings.md#color-palette).
diff --git a/docs/widgets/services/calibre-web.md b/docs/widgets/services/calibre-web.md
index f9090f8d..5de503e6 100644
--- a/docs/widgets/services/calibre-web.md
+++ b/docs/widgets/services/calibre-web.md
@@ -9,8 +9,8 @@ Allowed fields: `["books", "authors", "categories", "series"]`.
```yaml
widget:
- type: calibreweb
- url: http://your.calibreweb.host:port
- username: username
- password: password
+ type: calibreweb
+ url: http://your.calibreweb.host:port
+ username: username
+ password: password
```
diff --git a/docs/widgets/services/changedetectionio.md b/docs/widgets/services/changedetectionio.md
index 674db9a8..060043fd 100644
--- a/docs/widgets/services/changedetectionio.md
+++ b/docs/widgets/services/changedetectionio.md
@@ -7,7 +7,7 @@ Find your API key under `Settings > API`.
```yaml
widget:
- type: changedetectionio
- url: http://changedetection.host.or.ip:port
- key: apikeyapikeyapikeyapikeyapikey
+ type: changedetectionio
+ url: http://changedetection.host.or.ip:port
+ key: apikeyapikeyapikeyapikeyapikey
```
diff --git a/docs/widgets/services/channelsdvrserver.md b/docs/widgets/services/channelsdvrserver.md
index 390df42c..59edaac5 100644
--- a/docs/widgets/services/channelsdvrserver.md
+++ b/docs/widgets/services/channelsdvrserver.md
@@ -5,6 +5,6 @@ description: Channels DVR Server Widget Configuration
```yaml
widget:
- type: channelsdvrserver
- url: http://192.168.1.55:8089
+ type: channelsdvrserver
+ url: http://192.168.1.55:8089
```
diff --git a/docs/widgets/services/cloudflared.md b/docs/widgets/services/cloudflared.md
index 3212a278..663d0d6e 100644
--- a/docs/widgets/services/cloudflared.md
+++ b/docs/widgets/services/cloudflared.md
@@ -9,8 +9,8 @@ Allowed fields: `["status", "origin_ip"]`.
```yaml
widget:
- type: cloudflared
- accountid: accountid # from zero trust dashboard url e.g. https://one.dash.cloudflare.com/
-To switch to the alternative "graphless" view, simply passs `chart: false` as an option to the widget, like so:
+To switch to the alternative "graphless" view, simply pass `chart: false` as an option to the widget, like so:
```yaml
- Network Usage:
diff --git a/docs/widgets/services/gluetun.md b/docs/widgets/services/gluetun.md
index 08b5c70b..89d0057b 100644
--- a/docs/widgets/services/gluetun.md
+++ b/docs/widgets/services/gluetun.md
@@ -9,6 +9,6 @@ Allowed fields: `["public_ip", "region", "country"]`.
```yaml
widget:
- type: gluetun
- url: http://gluetun.host.or.ip
+ type: gluetun
+ url: http://gluetun.host.or.ip
```
diff --git a/docs/widgets/services/gotify.md b/docs/widgets/services/gotify.md
index 1eb16c03..871eefaa 100644
--- a/docs/widgets/services/gotify.md
+++ b/docs/widgets/services/gotify.md
@@ -9,7 +9,7 @@ Allowed fields: `["apps", "clients", "messages"]`.
```yaml
widget:
- type: gotify
- url: http://gotify.host.or.ip
- key: clientoken
+ type: gotify
+ url: http://gotify.host.or.ip
+ key: clientoken
```
diff --git a/docs/widgets/services/grafana.md b/docs/widgets/services/grafana.md
index 5d3aab9e..bfdebb2c 100644
--- a/docs/widgets/services/grafana.md
+++ b/docs/widgets/services/grafana.md
@@ -7,8 +7,8 @@ Allowed fields: `["dashboards", "datasources", "totalalerts", "alertstriggered"]
```yaml
widget:
- type: grafana
- url: http://grafana.host.or.ip:port
- username: username
- password: password
+ type: grafana
+ url: http://grafana.host.or.ip:port
+ username: username
+ password: password
```
diff --git a/docs/widgets/services/hdhomerun.md b/docs/widgets/services/hdhomerun.md
index 850deea5..c862200e 100644
--- a/docs/widgets/services/hdhomerun.md
+++ b/docs/widgets/services/hdhomerun.md
@@ -7,6 +7,6 @@ Allowed fields: `["channels", "hd"]`.
```yaml
widget:
- type: hdhomerun
- url: http://hdhomerun.host.or.ip
+ type: hdhomerun
+ url: http://hdhomerun.host.or.ip
```
diff --git a/docs/widgets/services/healthchecks.md b/docs/widgets/services/healthchecks.md
index c8effa92..ae8f1e26 100644
--- a/docs/widgets/services/healthchecks.md
+++ b/docs/widgets/services/healthchecks.md
@@ -13,8 +13,8 @@ Allowed fields: `["status", "last_ping"]`.
```yaml
widget:
- type: healthchecks
- url: http://healthchecks.host.or.ip:port
- key: {bookmarks.name}
++ {bookmarks.name} +
- {bookmark.icon &&
+ {bookmark.icon && (
{bookmark.name}
- {description}
+
+ {description}
+
-
{bookmarks.map((bookmark) => (
diff --git a/src/components/filecontent.jsx b/src/components/filecontent.jsx
index e99cbb87..1dd6266a 100644
--- a/src/components/filecontent.jsx
+++ b/src/components/filecontent.jsx
@@ -1,10 +1,10 @@
-import useSWR from "swr"
-
-export default function FileContent({ path, loadingValue, errorValue, emptyValue = '' }) {
- const fetcher = (url) => fetch(url).then((res) => res.text())
- const { data, error, isLoading } = useSWR(`/api/config/${ path }`, fetcher)
-
- if (error) return (errorValue)
- if (isLoading) return (loadingValue)
- return (data || emptyValue)
-}
+import useSWR from "swr";
+
+export default function FileContent({ path, loadingValue, errorValue, emptyValue = "" }) {
+ const fetcher = (url) => fetch(url).then((res) => res.text());
+ const { data, error, isLoading } = useSWR(`/api/config/${path}`, fetcher);
+
+ if (error) return errorValue;
+ if (isLoading) return loadingValue;
+ return data || emptyValue;
+}
diff --git a/src/components/quicklaunch.jsx b/src/components/quicklaunch.jsx
index 0304f038..a356fdee 100644
--- a/src/components/quicklaunch.jsx
+++ b/src/components/quicklaunch.jsx
@@ -6,10 +6,19 @@ import ResolvedIcon from "./resolvedicon";
import { SettingsContext } from "utils/contexts/settings";
-export default function QuickLaunch({servicesAndBookmarks, searchString, setSearchString, isOpen, close, searchProvider}) {
+export default function QuickLaunch({
+ servicesAndBookmarks,
+ searchString,
+ setSearchString,
+ isOpen,
+ close,
+ searchProvider,
+}) {
const { t } = useTranslation();
const { settings } = useContext(SettingsContext);
- const { searchDescriptions, hideVisitURL } = settings?.quicklaunch ? settings.quicklaunch : { searchDescriptions: false, hideVisitURL: false };
+ const { searchDescriptions, hideVisitURL } = settings?.quicklaunch
+ ? settings.quicklaunch
+ : { searchDescriptions: false, hideVisitURL: false };
const searchField = useRef();
@@ -19,7 +28,7 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
function openCurrentItem(newWindow) {
const result = results[currentItemIndex];
- window.open(result.href, newWindow ? "_blank" : result.target ?? settings.target ?? "_blank", 'noreferrer');
+ window.open(result.href, newWindow ? "_blank" : result.target ?? settings.target ?? "_blank", "noreferrer");
}
const closeAndReset = useCallback(() => {
@@ -35,7 +44,7 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
try {
if (!/.+[.:].+/g.test(rawSearchString)) throw new Error(); // basic test for probably a url
let urlString = rawSearchString;
- if (urlString.indexOf('http') !== 0) urlString = `https://${rawSearchString}`;
+ if (urlString.indexOf("http") !== 0) urlString = `https://${rawSearchString}`;
setUrl(new URL(urlString)); // basic validation
} catch (e) {
setUrl(null);
@@ -83,12 +92,12 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
useEffect(() => {
if (searchString.length === 0) setResults([]);
else {
- let newResults = servicesAndBookmarks.filter(r => {
+ let newResults = servicesAndBookmarks.filter((r) => {
const nameMatch = r.name.toLowerCase().includes(searchString);
let descriptionMatch;
if (searchDescriptions) {
- descriptionMatch = r.description?.toLowerCase().includes(searchString)
- r.priority = nameMatch ? 2 * (+nameMatch) : +descriptionMatch; // eslint-disable-line no-param-reassign
+ descriptionMatch = r.description?.toLowerCase().includes(searchString);
+ r.priority = nameMatch ? 2 * +nameMatch : +descriptionMatch; // eslint-disable-line no-param-reassign
}
return nameMatch || descriptionMatch;
});
@@ -98,23 +107,19 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
}
if (searchProvider) {
- newResults.push(
- {
- href: searchProvider.url + encodeURIComponent(searchString),
- name: `${searchProvider.name ?? t("quicklaunch.custom")} ${t("quicklaunch.search")} `,
- type: 'search',
- }
- )
+ newResults.push({
+ href: searchProvider.url + encodeURIComponent(searchString),
+ name: `${searchProvider.name ?? t("quicklaunch.custom")} ${t("quicklaunch.search")} `,
+ type: "search",
+ });
}
if (!hideVisitURL && url) {
- newResults.unshift(
- {
- href: url.toString(),
- name: `${t("quicklaunch.visit")} URL`,
- type: 'url',
- }
- )
+ newResults.unshift({
+ href: url.toString(),
+ name: `${t("quicklaunch.visit")} URL`,
+ type: "url",
+ });
}
setResults(newResults);
@@ -125,7 +130,6 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
}
}, [searchString, servicesAndBookmarks, searchDescriptions, hideVisitURL, searchProvider, url, t]);
-
const [hidden, setHidden] = useState(true);
useEffect(() => {
function handleBackdropClick(event) {
@@ -134,66 +138,103 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
if (isOpen) {
searchField.current.focus();
- document.body.addEventListener('click', handleBackdropClick);
+ document.body.addEventListener("click", handleBackdropClick);
setHidden(false);
} else {
- document.body.removeEventListener('click', handleBackdropClick);
+ document.body.removeEventListener("click", handleBackdropClick);
searchField.current.blur();
setTimeout(() => {
setHidden(true);
}, 300); // disable on close
}
-
}, [isOpen, closeAndReset]);
function highlightText(text) {
- const parts = text.split(new RegExp(`(${searchString})`, 'gi'));
- // eslint-disable-next-line react/no-array-index-key
- return {parts.map((part, i) => part.toLowerCase() === searchString.toLowerCase() ? {part} : part)};
+ const parts = text.split(new RegExp(`(${searchString})`, "gi"));
+ return (
+
+ {parts.map((part, i) =>
+ part.toLowerCase() === searchString.toLowerCase() ? (
+ // eslint-disable-next-line react/no-array-index-key
+
+ {part}
+
+ ) : (
+ part
+ ),
+ )}
+
+ );
}
return (
-
-
diff --git a/src/components/widgets/logo/logo.jsx b/src/components/widgets/logo/logo.jsx index 70b33ec0..da033048 100644 --- a/src/components/widgets/logo/logo.jsx +++ b/src/components/widgets/logo/logo.jsx @@ -1,71 +1,75 @@ import Container from "../widget/container"; import Raw from "../widget/raw"; -import ResolvedIcon from "components/resolvedicon" +import ResolvedIcon from "components/resolvedicon"; export default function Logo({ options }) { return ( -@@ -65,46 +66,61 @@ export default function Item({ service, group }) { >{service.name} -) : (
{service.description}
++ {service.description} +
)} -{service.name} -{service.description}
++ {service.description} +
- {service.ping && ( -@@ -112,20 +128,28 @@ export default function Item({ service, group }) {-- )} +- Ping status - + {service.ping && ( +++ )} - {service.container && ( - - )} - {(service.app && !service.external) && ( - - )} + {service.siteMonitor && ( ++ Ping status + ++ )} + + {service.container && ( + + )} + {service.app && !service.external && ( + + )}+ Site monitor status + - {(showStats || statsOpen) &&)} {service.app && (} + {(showStats || statsOpen) && ( + + )} - {(showStats || statsOpen) &&)} diff --git a/src/components/services/kubernetes-status.jsx b/src/components/services/kubernetes-status.jsx index 8e150a69..a256a2df 100644 --- a/src/components/services/kubernetes-status.jsx +++ b/src/components/services/kubernetes-status.jsx @@ -20,7 +20,7 @@ export default function KubernetesStatus({ service, style }) { statusLabel = statusTitle; colorClass = "text-emerald-500/80"; } - + if (data.status === "not found" || data.status === "down" || data.status === "partial") { statusTitle = data.status; statusLabel = statusTitle; @@ -28,15 +28,21 @@ export default function KubernetesStatus({ service, style }) { } } - if (style === 'dot') { - colorClass = colorClass.replace(/text-/g, 'bg-').replace(/\/\d\d/g, ''); + if (style === "dot") { + colorClass = colorClass.replace(/text-/g, "bg-").replace(/\/\d\d/g, ""); backgroundClass = "p-4 hover:bg-theme-500/10 dark:hover:bg-theme-900/20"; } return ( -} + {(showStats || statsOpen) && ( + + )} - {style !== 'dot' &&{statusLabel}} - {style === 'dot' && } ++ {style !== "dot" ? ( +); } diff --git a/src/components/services/list.jsx b/src/components/services/list.jsx index 93e48e85..fe5c913c 100644 --- a/src/components/services/list.jsx +++ b/src/components/services/list.jsx @@ -9,7 +9,7 @@ export default function List({ group, services, layout }) {{statusLabel}+ ) : ( + + )}-
{services.map((service) => (
diff --git a/src/components/services/ping.jsx b/src/components/services/ping.jsx
index 5d8068ff..f72d40b3 100644
--- a/src/components/services/ping.jsx
+++ b/src/components/services/ping.jsx
@@ -4,12 +4,12 @@ import useSWR from "swr";
export default function Ping({ group, service, style }) {
const { t } = useTranslation();
const { data, error } = useSWR(`/api/ping?${new URLSearchParams({ group, service }).toString()}`, {
- refreshInterval: 30000
+ refreshInterval: 30000,
});
let colorClass = "text-black/20 dark:text-white/40 opacity-20";
let backgroundClass = "bg-theme-500/10 dark:bg-theme-900/50 px-1.5 py-0.5";
- let statusTitle = t("ping.http_status");
+ let statusTitle = t("ping.ping");
let statusText = "";
if (error) {
@@ -19,18 +19,13 @@ export default function Ping({ group, service, style }) {
} else if (!data) {
statusText = t("ping.ping");
statusTitle += ` ${t("ping.not_available")}`;
- } else if (data.status > 403) {
+ } else if (!data.alive) {
colorClass = "text-rose-500/80";
- statusTitle += ` ${data.status}`;
-
- if (style === "basic") {
- statusText = t("ping.down");
- } else {
- statusText = data.status;
- }
- } else if (data) {
- const ping = t("common.ms", { value: data.latency, style: "unit", unit: "millisecond", maximumFractionDigits: 0 })
- statusTitle += ` ${data.status} (${ping})`;
+ statusTitle += ` ${t("ping.down")}`;
+ statusText = t("ping.down");
+ } else if (data.alive) {
+ const ping = t("common.ms", { value: data.time, style: "unit", unit: "millisecond", maximumFractionDigits: 0 });
+ statusTitle += ` ${t("ping.up")} (${ping})`;
colorClass = "text-emerald-500/80";
if (style === "basic") {
@@ -42,14 +37,17 @@ export default function Ping({ group, service, style }) {
}
if (style === "dot") {
- backgroundClass = 'p-4';
- colorClass = colorClass.replace(/text-/g, 'bg-').replace(/\/\d\d/g, '');
+ backgroundClass = "p-4";
+ colorClass = colorClass.replace(/text-/g, "bg-").replace(/\/\d\d/g, "");
}
return (
-
- - {t("widget.api_error")}: {error.message} - } - {error.url &&
- - {t("widget.url")}: {error.url} - } - {error.rawError &&
-
- {t("widget.raw_error")}:
- - {displayError(error.rawError)} -- }
- {error.data &&
-
- {t("widget.response_data")}:
- - {displayData(error.data)} -- }
+ {error.message && (
+
- + {t("widget.api_error")}: {error.message} + + )} + {error.url && ( +
- + {t("widget.url")}: {error.url} + + )} + {error.rawError && ( +
-
+ {t("widget.raw_error")}:
+ {displayError(error.rawError)}+
+ )}
+ {error.data && (
+
-
+ {t("widget.response_data")}:
+ {displayData(error.data)}+
+ )}
- - +
- + ); } diff --git a/src/components/toggles/color.jsx b/src/components/toggles/color.jsx index d65d5391..20fb26fc 100644 --- a/src/components/toggles/color.jsx +++ b/src/components/toggles/color.jsx @@ -65,7 +65,7 @@ export default function ColorToggle() { title={color} className={classNames( active === color ? "border-2" : "border-0", - `rounded-md w-5 h-5 border-black/50 dark:border-white/50 theme-${color} bg-theme-400` + `rounded-md w-5 h-5 border-black/50 dark:border-white/50 theme-${color} bg-theme-400`, )} /> {color} diff --git a/src/components/version.jsx b/src/components/version.jsx index a71ee49e..5c0b82b6 100644 --- a/src/components/version.jsx +++ b/src/components/version.jsx @@ -6,9 +6,11 @@ import { MdNewReleases } from "react-icons/md"; export default function Version() { const { t, i18n } = useTranslation(); - const buildTime = process.env.NEXT_PUBLIC_BUILDTIME?.length ? process.env.NEXT_PUBLIC_BUILDTIME : new Date().toISOString(); + const buildTime = process.env.NEXT_PUBLIC_BUILDTIME?.length + ? process.env.NEXT_PUBLIC_BUILDTIME + : new Date().toISOString(); const revision = process.env.NEXT_PUBLIC_REVISION?.length ? process.env.NEXT_PUBLIC_REVISION : "dev"; - const version = process.env.NEXT_PUBLIC_VERSION?.length ? process.env.NEXT_PUBLIC_VERSION : "dev"; + const version = process.env.NEXT_PUBLIC_VERSION?.length ? process.env.NEXT_PUBLIC_VERSION : "dev"; const { data: releaseData } = useSWR("/api/releases"); @@ -44,7 +46,8 @@ export default function Version() { {version === "main" || version === "dev" || version === "nightly" ? null - : releaseData && latestRelease && + : releaseData && + latestRelease && compareVersions(latestRelease.tag_name, version) > 0 && ( + return
- {style !== 'dot' &&{statusText}} - {style === 'dot' && } ++ {style !== "dot" &&); } diff --git a/src/components/services/site-monitor.jsx b/src/components/services/site-monitor.jsx new file mode 100644 index 00000000..4e70c80a --- /dev/null +++ b/src/components/services/site-monitor.jsx @@ -0,0 +1,63 @@ +import { useTranslation } from "react-i18next"; +import useSWR from "swr"; + +export default function SiteMonitor({ group, service, style }) { + const { t } = useTranslation(); + const { data, error } = useSWR(`/api/siteMonitor?${new URLSearchParams({ group, service }).toString()}`, { + refreshInterval: 30000, + }); + + let colorClass = "text-black/20 dark:text-white/40 opacity-20"; + let backgroundClass = "bg-theme-500/10 dark:bg-theme-900/50 px-1.5 py-0.5"; + let statusTitle = t("siteMonitor.http_status"); + let statusText = ""; + + if (error) { + colorClass = "text-rose-500"; + statusText = t("siteMonitor.error"); + statusTitle += ` ${t("siteMonitor.error")}`; + } else if (!data) { + statusText = t("siteMonitor.response"); + statusTitle += ` ${t("siteMonitor.not_available")}`; + } else if (data.status > 403) { + colorClass = "text-rose-500/80"; + statusTitle += ` ${data.status}`; + + if (style === "basic") { + statusText = t("siteMonitor.down"); + } else { + statusText = data.status; + } + } else if (data) { + const responseTime = t("common.ms", { + value: data.latency, + style: "unit", + unit: "millisecond", + maximumFractionDigits: 0, + }); + statusTitle += ` ${data.status} (${responseTime})`; + colorClass = "text-emerald-500/80"; + + if (style === "basic") { + statusText = t("siteMonitor.up"); + } else { + statusText = responseTime; + colorClass += " lowercase"; + } + } + + if (style === "dot") { + backgroundClass = "p-4"; + colorClass = colorClass.replace(/text-/g, "bg-").replace(/\/\d\d/g, ""); + } + + return ( +{statusText}} + {style === "dot" && }+ {style !== "dot" &&+ ); +} diff --git a/src/components/services/status.jsx b/src/components/services/status.jsx index 78ac9d93..e0f74210 100644 --- a/src/components/services/status.jsx +++ b/src/components/services/status.jsx @@ -17,13 +17,13 @@ export default function Status({ service, style }) { } else if (data) { if (data.status?.includes("running")) { if (data.health === "starting") { - statusTitle = t("docker.starting"); - colorClass = "text-blue-500/80"; + statusTitle = t("docker.starting"); + colorClass = "text-blue-500/80"; } if (data.health === "unhealthy") { - statusTitle = t("docker.unhealthy"); - colorClass = "text-orange-400/50 dark:text-orange-400/80"; + statusTitle = t("docker.unhealthy"); + colorClass = "text-orange-400/50 dark:text-orange-400/80"; } if (!data.health) { @@ -35,24 +35,31 @@ export default function Status({ service, style }) { statusTitle = statusLabel; colorClass = "text-emerald-500/80"; } - + if (data.status === "not found" || data.status === "exited" || data.status?.startsWith("partial")) { - if (data.status === "not found") statusLabel = t("docker.not_found") - else if (data.status === "exited") statusLabel = t("docker.exited") - else statusLabel = data.status.replace("partial", t("docker.partial")) + if (data.status === "not found") statusLabel = t("docker.not_found"); + else if (data.status === "exited") statusLabel = t("docker.exited"); + else statusLabel = data.status.replace("partial", t("docker.partial")); colorClass = "text-orange-400/50 dark:text-orange-400/80"; } } - if (style === 'dot') { - colorClass = colorClass.replace('text-', 'bg-').replace(/\/\d\d$/, ''); + if (style === "dot") { + colorClass = colorClass.replace(/text-/g, "bg-").replace(/\/\d\d/g, ""); backgroundClass = "p-4 hover:bg-theme-500/10 dark:hover:bg-theme-900/20"; + statusTitle = statusLabel; } return ( -{statusText}} + {style === "dot" && } +- {style !== 'dot' &&{statusLabel}} - {style === 'dot' && } ++ {style !== "dot" ? ( +); } diff --git a/src/components/services/widget/block.jsx b/src/components/services/widget/block.jsx index a2189cf6..151a1911 100644 --- a/src/components/services/widget/block.jsx +++ b/src/components/services/widget/block.jsx @@ -9,7 +9,7 @@ export default function Block({ value, label }) { className={classNames( "bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center text-center p-1", value === undefined ? "animate-pulse" : "", - "service-block" + "service-block", )} >{statusLabel}+ ) : ( + + )}{value === undefined || value === null ? "-" : value}diff --git a/src/components/services/widget/container.jsx b/src/components/services/widget/container.jsx index 9145465f..fbb6c79f 100644 --- a/src/components/services/widget/container.jsx +++ b/src/components/services/widget/container.jsx @@ -12,14 +12,14 @@ export default function Container({ error = false, children, service }) { return null; } - return+ return ; } const childrenArray = Array.isArray(children) ? children : [children]; let visibleChildren = childrenArray; let fields = service?.widget?.fields; - if (typeof fields === 'string') fields = JSON.parse(service.widget.fields); + if (typeof fields === "string") fields = JSON.parse(service.widget.fields); const type = service?.widget?.type; if (fields && type) { // if the field contains a "." then it most likely contains a common loc value @@ -27,13 +27,15 @@ export default function Container({ error = false, children, service }) { // fields: [ "resources.cpu", "resources.mem", "field"] // or even // fields: [ "resources.cpu", "widget_type.field" ] - visibleChildren = childrenArray?.filter(child => fields.some(field => { - let fullField = field; - if (!field.includes(".")) { - fullField = `${type}.${field}`; - } - return fullField === child?.props?.label; - })); + visibleChildren = childrenArray?.filter((child) => + fields.some((field) => { + let fullField = field; + if (!field.includes(".")) { + fullField = `${type}.${field}`; + } + return fullField === child?.props?.label; + }), + ); } return {visibleChildren}; diff --git a/src/components/services/widget/error.jsx b/src/components/services/widget/error.jsx index cf5e1366..81423b3f 100644 --- a/src/components/services/widget/error.jsx +++ b/src/components/services/widget/error.jsx @@ -6,7 +6,7 @@ function displayError(error) { } function displayData(data) { - return (data.type === 'Buffer') ? Buffer.from(data).toString() : JSON.stringify(data, 4); + return data.type === "Buffer" ? Buffer.from(data).toString() : JSON.stringify(data, 4); } export default function Error({ error }) { @@ -20,29 +20,34 @@ export default function Error({ error }) {diff --git a/src/components/tab.jsx b/src/components/tab.jsx index e47f21af..699b1912 100644 --- a/src/components/tab.jsx +++ b/src/components/tab.jsx @@ -4,28 +4,37 @@ import classNames from "classnames"; import { TabContext } from "utils/contexts/tab"; export function slugify(tabName) { - return tabName !== undefined ? encodeURIComponent(tabName.toString().replace(/\s+/g, '-').toLowerCase()) : '' + return tabName !== undefined ? encodeURIComponent(tabName.toString().replace(/\s+/g, "-").toLowerCase()) : ""; } export default function Tab({ tab }) { const { activeTab, setActiveTab } = useContext(TabContext); return ( --{t("widget.api_error")} {error.message && t("widget.information")} + + {t("widget.api_error")} {error.message && t("widget.information")} -
- {error.message &&
; } if (!data) { - return - { options.cpu !== false && ; + return ( +} - { options.mem !== false && } - { options.cputemp && } - { options.disk && !Array.isArray(options.disk) && } - { options.disk && Array.isArray(options.disk) && options.disk.map((disk) => ) } - { options.uptime && } - { options.label && } - + {options.cpu !== false && + ); } const unit = options.units === "imperial" ? "fahrenheit" : "celsius"; let mainTemp = 0; let maxTemp = 80; - const cpuSensors = data.sensors?.filter(s => cpuSensorLabels.some(label => s.label.startsWith(label)) && s.type === "temperature_core"); + const cpuSensors = data.sensors?.filter( + (s) => cpuSensorLabels.some((label) => s.label.startsWith(label)) && s.type === "temperature_core", + ); if (options.cputemp && cpuSensors) { try { mainTemp = cpuSensors.reduce((acc, s) => acc + s.value, 0) / cpuSensors.length; - maxTemp = Math.max(cpuSensors.reduce((acc, s) => acc + (s.warning > 0 ? s.warning : 0), 0) / cpuSensors.length, maxTemp); + maxTemp = Math.max( + cpuSensors.reduce((acc, s) => acc + (s.warning > 0 ? s.warning : 0), 0) / cpuSensors.length, + maxTemp, + ); if (unit === "fahrenheit") { mainTemp = convertToFahrenheit(mainTemp); maxTemp = convertToFahrenheit(maxTemp); @@ -70,48 +84,53 @@ export default function Widget({ options }) { : [data.fs.find((d) => d.mnt_point === options.disk)].filter((d) => d); } - const addedClasses = classNames('information-widget-glances', { 'expanded': options.expanded }) + const addedClasses = classNames("information-widget-glances", { expanded: options.expanded }); return (} + {options.mem !== false && } + {options.cputemp && } + {options.disk && !Array.isArray(options.disk) && ( + + )} + {options.disk && + Array.isArray(options.disk) && + options.disk.map((disk) => ( + + ))} + {options.uptime && } + {options.label && } + - {options.cpu !== false && ); diff --git a/src/components/widgets/greeting/greeting.jsx b/src/components/widgets/greeting/greeting.jsx index ab21df25..cd8a8af6 100644 --- a/src/components/widgets/greeting/greeting.jsx +++ b/src/components/widgets/greeting/greeting.jsx @@ -14,12 +14,14 @@ const textSizes = { export default function Greeting({ options }) { if (options.text) { - return} - {options.mem !== false && } + {options.cpu !== false && ( + + )} + {options.mem !== false && ( + + )} {disks.map((disk) => ( - ))} - {options.cputemp && mainTemp > 0 && + {options.cputemp && mainTemp > 0 && ( - } - {options.uptime && data.uptime && + )} + {options.uptime && data.uptime && ( - } + )} {options.label && } - ; + return ( +- - {options.text} - - -+ + ); } } diff --git a/src/components/widgets/kubernetes/kubernetes.jsx b/src/components/widgets/kubernetes/kubernetes.jsx index 2a9da46a..f7b101c7 100644 --- a/src/components/widgets/kubernetes/kubernetes.jsx +++ b/src/components/widgets/kubernetes/kubernetes.jsx @@ -15,52 +15,47 @@ export default function Widget({ options }) { cpu: { load: 0, total: 0, - percent: 0 + percent: 0, }, memory: { used: 0, total: 0, free: 0, - percent: 0 - } + percent: 0, + }, }; - const { data, error } = useSWR( - `/api/widgets/kubernetes?${new URLSearchParams({ lang: i18n.language }).toString()}`, { - refreshInterval: 1500 - } - ); + const { data, error } = useSWR(`/api/widgets/kubernetes?${new URLSearchParams({ lang: i18n.language }).toString()}`, { + refreshInterval: 1500, + }); if (error || data?.error) { - return+ + {options.text} + + ++ return ; } if (!data) { - return - ; + return ( +- -- {cluster.show && --- } - {nodes.show && - - } - + + ); } - return+ ++ {cluster.show &&+} + {nodes.show && } + - ; + return ( +- -- {cluster.show && --- } - {nodes.show && data.nodes && - data.nodes.map((node) => - ) - } - + + ); } diff --git a/src/components/widgets/kubernetes/node.jsx b/src/components/widgets/kubernetes/node.jsx index cc864be6..ba8f8b77 100644 --- a/src/components/widgets/kubernetes/node.jsx +++ b/src/components/widgets/kubernetes/node.jsx @@ -8,7 +8,6 @@ import UsageBar from "../resources/usage-bar"; export default function Node({ type, options, data }) { const { t } = useTranslation(); - function icon() { if (type === "cluster") { return+ ++ {cluster.show &&+} + {nodes.show && + data.nodes && + data.nodes.map((node) => )} + ; @@ -31,7 +30,7 @@ export default function Node({ type, options, data }) { value: data?.cpu?.percent ?? 0, style: "unit", unit: "percent", - maximumFractionDigits: 0 + maximumFractionDigits: 0, })} @@ -42,14 +41,16 @@ export default function Node({ type, options, data }) { {t("common.bytes", { value: data?.memory?.free ?? 0, maximumFractionDigits: 0, - binary: true + binary: true, })} {options.showLabel && ( - {type === "cluster" ? options.label : data.name}++ {type === "cluster" ? options.label : data.name} +)}+ - {options.icon ? - -: - // fallback to homepage logo -- -+ ) : ( + // fallback to homepage logo ++ -- } + + + -
-
-
- )}
- -
+
+
+ )}
+
+
diff --git a/src/components/resolvedicon.jsx b/src/components/resolvedicon.jsx
index 6e28ee24..885bbfac 100644
--- a/src/components/resolvedicon.jsx
+++ b/src/components/resolvedicon.jsx
@@ -5,8 +5,8 @@ import { SettingsContext } from "utils/contexts/settings";
import { ThemeContext } from "utils/contexts/theme";
const iconSetURLs = {
- 'mdi': "https://cdn.jsdelivr.net/npm/@mdi/svg@latest/svg/",
- 'si' : "https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/",
+ mdi: "https://cdn.jsdelivr.net/npm/@mdi/svg@latest/svg/",
+ si: "https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/",
};
export default function ResolvedIcon({ icon, width = 32, height = 32, alt = "logo" }) {
@@ -38,12 +38,13 @@ export default function ResolvedIcon({ icon, width = 32, height = 32, alt = "log
if (prefix in iconSetURLs) {
// default to theme setting
let iconName = icon.replace(`${prefix}-`, "").replace(".svg", "");
- let iconColor = settings.iconStyle === "theme" ?
- `rgb(var(--color-${ theme === "dark" ? 300 : 900 }) / var(--tw-text-opacity, 1))` :
- "linear-gradient(180deg, rgb(var(--color-logo-start)), rgb(var(--color-logo-stop)))";
+ let iconColor =
+ settings.iconStyle === "theme"
+ ? `rgb(var(--color-${theme === "dark" ? 300 : 900}) / var(--tw-text-opacity, 1))`
+ : "linear-gradient(180deg, rgb(var(--color-logo-start)), rgb(var(--color-logo-stop)))";
// use custom hex color if provided
- const colorMatches = icon.match(/[#][a-f0-9][a-f0-9][a-f0-9][a-f0-9][a-f0-9][a-f0-9]$/i)
+ const colorMatches = icon.match(/[#][a-f0-9][a-f0-9][a-f0-9][a-f0-9][a-f0-9][a-f0-9]$/i);
if (colorMatches?.length) {
iconName = icon.replace(`${prefix}-`, "").replace(".svg", "").replace(`-${colorMatches[0]}`, "");
iconColor = `${colorMatches[0]}`;
@@ -56,8 +57,8 @@ export default function ResolvedIcon({ icon, width = 32, height = 32, alt = "log
style={{
width,
height,
- maxWidth: '100%',
- maxHeight: '100%',
+ maxWidth: "100%",
+ maxHeight: "100%",
background: `${iconColor}`,
mask: `url(${iconSource}) no-repeat center / contain`,
WebkitMask: `url(${iconSource}) no-repeat center / contain`,
@@ -65,7 +66,7 @@ export default function ResolvedIcon({ icon, width = 32, height = 32, alt = "log
/>
);
}
-
+
// fallback to dashboard-icons
if (icon.endsWith(".svg")) {
const iconName = icon.replace(".svg", "");
@@ -79,13 +80,13 @@ export default function ResolvedIcon({ icon, width = 32, height = 32, alt = "log
height,
objectFit: "contain",
maxHeight: "100%",
- maxWidth: "100%"
+ maxWidth: "100%",
}}
alt={alt}
/>
);
}
-
+
const iconName = icon.replace(".png", "");
return (
+
{({ open }) => (
<>
- { layout?.header !== false &&
-
- {layout?.icon &&
-
- }
- {
- panel.current.style.height = `${panel.current.scrollHeight}px`;
- setTimeout(() => {panel.current.style.height = `0`}, 1);
- }}
- beforeEnter={() => {
- panel.current.style.height = `0px`;
- setTimeout(() => {panel.current.style.height = `${panel.current.scrollHeight}px`}, 1);
- setTimeout(() => {panel.current.style.height = 'auto'}, 150); // animation is 150ms
- }}
+ {layout?.header !== false && (
+
+ {layout?.icon && (
+
+ )}
+ {
+ panel.current.style.height = `${panel.current.scrollHeight}px`;
+ setTimeout(() => {
+ panel.current.style.height = `0`;
+ }, 1);
+ }}
+ beforeEnter={() => {
+ panel.current.style.height = `0px`;
+ setTimeout(() => {
+ panel.current.style.height = `${panel.current.scrollHeight}px`;
+ }, 1);
+ setTimeout(() => {
+ panel.current.style.height = "auto";
+ }, 150); // animation is 150ms
+ }}
>
-
+
)}
-
+
);
}
diff --git a/src/components/services/item.jsx b/src/components/services/item.jsx
index 6f0cff6c..d9d962ab 100644
--- a/src/components/services/item.jsx
+++ b/src/components/services/item.jsx
@@ -4,6 +4,7 @@ import { useContext, useState } from "react";
import Status from "./status";
import Widget from "./widget";
import Ping from "./ping";
+import SiteMonitor from "./site-monitor";
import KubernetesStatus from "./kubernetes-status";
import Docker from "widgets/docker/component";
@@ -14,8 +15,8 @@ import ResolvedIcon from "components/resolvedicon";
export default function Item({ service, group }) {
const hasLink = service.href && service.href !== "#";
const { settings } = useContext(SettingsContext);
- const showStats = (service.showStats === false) ? false : settings.showStats;
- const statusStyle = (service.statusStyle !== undefined) ? service.statusStyle : settings.statusStyle;
+ const showStats = service.showStats === false ? false : settings.showStats;
+ const statusStyle = service.statusStyle !== undefined ? service.statusStyle : settings.statusStyle;
const [statsOpen, setStatsOpen] = useState(service.showStats);
const [statsClosing, setStatsClosing] = useState(false);
@@ -34,9 +35,9 @@ export default function Item({ service, group }) {
+ )}
- )
+ );
}
diff --git a/src/components/widgets/longhorn/longhorn.jsx b/src/components/widgets/longhorn/longhorn.jsx
index 538d24cc..22047e2c 100644
--- a/src/components/widgets/longhorn/longhorn.jsx
+++ b/src/components/widgets/longhorn/longhorn.jsx
@@ -9,43 +9,47 @@ import Node from "./node";
export default function Longhorn({ options }) {
const { expanded, total, labels, include, nodes } = options;
const { data, error } = useSWR(`/api/widgets/longhorn`, {
- refreshInterval: 1500
+ refreshInterval: 1500,
});
if (error || data?.error) {
- return
-
-
-
- ;
+ return (
+
+
+
+
+
+ );
}
- return
-
-
+
+ );
}
diff --git a/src/components/widgets/longhorn/node.jsx b/src/components/widgets/longhorn/node.jsx
index 92311862..da2882ee 100644
--- a/src/components/widgets/longhorn/node.jsx
+++ b/src/components/widgets/longhorn/node.jsx
@@ -7,15 +7,18 @@ import WidgetLabel from "../widget/widget_label";
export default function Node({ data, expanded, labels }) {
const { t } = useTranslation();
- return { labels &&
+ return (
+
+ {labels &&
+ );
}
diff --git a/src/components/widgets/openmeteo/openmeteo.jsx b/src/components/widgets/openmeteo/openmeteo.jsx
index 26663350..8baddfa5 100644
--- a/src/components/widgets/openmeteo/openmeteo.jsx
+++ b/src/components/widgets/openmeteo/openmeteo.jsx
@@ -15,38 +15,43 @@ import mapIcon from "../../../utils/weather/openmeteo-condition-map";
function Widget({ options }) {
const { t } = useTranslation();
- const { data, error } = useSWR(
- `/api/widgets/openmeteo?${new URLSearchParams({ ...options }).toString()}`
- );
+ const { data, error } = useSWR(`/api/widgets/openmeteo?${new URLSearchParams({ ...options }).toString()}`);
if (error || data?.error) {
- return
- {t("weather.updating")}
- {t("weather.wait")}
- ;
+ return (
+
+ {t("weather.updating")}
+ {t("weather.wait")}
+
+ );
}
const unit = options.units === "metric" ? "celsius" : "fahrenheit";
const condition = data.current_weather.weathercode;
- const timeOfDay = data.current_weather.time > data.daily.sunrise[0] && data.current_weather.time < data.daily.sunset[0] ? "day" : "night";
+ const timeOfDay =
+ data.current_weather.time > data.daily.sunrise[0] && data.current_weather.time < data.daily.sunset[0]
+ ? "day"
+ : "night";
- return
-
- {options.label && `${options.label}, `}
- {t("common.number", {
- value: data.current_weather.temperature,
- style: "unit",
- unit,
- })}
-
- {t(`wmo.${data.current_weather.weathercode}-${timeOfDay}`)}
- ;
+ return (
+
+
+ {options.label && `${options.label}, `}
+ {t("common.number", {
+ value: data.current_weather.temperature,
+ style: "unit",
+ unit,
+ })}
+
+ {t(`wmo.${data.current_weather.weathercode}-${timeOfDay}`)}
+
+ );
}
export default function OpenMeteo({ options }) {
@@ -73,7 +78,7 @@ export default function OpenMeteo({ options }) {
enableHighAccuracy: true,
maximumAge: 1000 * 60 * 60 * 3,
timeout: 1000 * 30,
- }
+ },
);
}
};
@@ -81,11 +86,17 @@ export default function OpenMeteo({ options }) {
// if (!requesting && !location) requestLocation();
if (!location) {
- return
- {t("weather.current")}
- {t("weather.allow")}
- ;
+ return (
+
+ {t("weather.current")}
+ {t("weather.allow")}
+
+ );
}
return
- {t("weather.updating")}
- {t("weather.wait")}
- ;
+ return (
+
+ {t("weather.updating")}
+ {t("weather.wait")}
+
+ );
}
const unit = options.units === "metric" ? "celsius" : "fahrenheit";
@@ -36,11 +38,16 @@ function Widget({ options }) {
const condition = data.weather[0].id;
const timeOfDay = data.dt > data.sys.sunrise && data.dt < data.sys.sunset ? "day" : "night";
- return
- {options.label && `${options.label}, ` }{t("common.number", { value: data.main.temp, style: "unit", unit })}
- {data.weather[0].description}
- ;
+ return (
+
+
+ {options.label && `${options.label}, `}
+ {t("common.number", { value: data.main.temp, style: "unit", unit })}
+
+ {data.weather[0].description}
+
+ );
}
export default function OpenWeatherMap({ options }) {
@@ -67,17 +74,19 @@ export default function OpenWeatherMap({ options }) {
enableHighAccuracy: true,
maximumAge: 1000 * 60 * 60 * 3,
timeout: 1000 * 30,
- }
+ },
);
}
};
if (!location) {
- return
- {t("weather.current")}
- {t("weather.allow")}
- ;
+ return (
+
+ {t("weather.current")}
+ {t("weather.allow")}
+
+ );
}
return
-
- }
- {services.name}
-
+
+ )}
+ + {services.name} +
+
- {data.nodes
- .filter((node) => {
- if (node.id === 'total' && total) {
+ return (
+
+
+
- ;
+ })
+ .map((node) => (
+
+
+ {data.nodes
+ .filter((node) => {
+ if (node.id === "total" && total) {
+ return true;
+ }
+ if (!nodes) {
+ return false;
+ }
+ if (include && !include.includes(node.id)) {
+ return false;
+ }
return true;
- }
- if (!nodes) {
- return false;
- }
- if (include && !include.includes(node.id)) {
- return false;
- }
- return true;
- })
- .map((node) =>
-
-
-
- )}
-
+
+ ))}
+
+ return
-
-
- ;
+ return (
+
+
+
+
+ );
}
diff --git a/src/components/widgets/resources/uptime.jsx b/src/components/widgets/resources/uptime.jsx
index 73ec0a35..72b4865f 100644
--- a/src/components/widgets/resources/uptime.jsx
+++ b/src/components/widgets/resources/uptime.jsx
@@ -13,7 +13,7 @@ export default function Uptime({ refresh = 1500 }) {
});
if (error || data?.error) {
- return
- {options.cpu &&
- {options.label && (
- {options.label}
- )}
-
+ {options.cpu &&
+ {options.label && (
+ {options.label}
+ )}
+ el.name === storedName);
@@ -69,7 +69,9 @@ export default function Search({ options }) {
const availableProviderIds = getAvailableProviderIds(options);
const [query, setQuery] = useState("");
- const [selectedProvider, setSelectedProvider] = useState(searchProviders[availableProviderIds[0] ?? searchProviders.google]);
+ const [selectedProvider, setSelectedProvider] = useState(
+ searchProviders[availableProviderIds[0] ?? searchProviders.google],
+ );
useEffect(() => {
const storedProvider = getStoredProvider();
@@ -80,19 +82,22 @@ export default function Search({ options }) {
}
}, [availableProviderIds]);
- const submitCallback = useCallback(event => {
- const q = encodeURIComponent(query);
- const { url } = selectedProvider;
- if (url) {
- window.open(`${url}${q}`, options.target || "_blank");
- } else {
- window.open(`${options.url}${q}`, options.target || "_blank");
- }
+ const submitCallback = useCallback(
+ (event) => {
+ const q = encodeURIComponent(query);
+ const { url } = selectedProvider;
+ if (url) {
+ window.open(`${url}${q}`, options.target || "_blank");
+ } else {
+ window.open(`${options.url}${q}`, options.target || "_blank");
+ }
- event.preventDefault();
- event.target.reset();
- setQuery("");
- }, [options.target, options.url, query, selectedProvider]);
+ event.preventDefault();
+ event.target.reset();
+ setQuery("");
+ },
+ [options.target, options.url, query, selectedProvider],
+ );
if (!availableProviderIds) {
return null;
@@ -101,15 +106,16 @@ export default function Search({ options }) {
const onChangeProvider = (provider) => {
setSelectedProvider(provider);
localStorage.setItem(localStorageKey, provider.name);
- }
+ };
- return
-
-
+
+ );
}
diff --git a/src/components/widgets/unifi_console/unifi_console.jsx b/src/components/widgets/unifi_console/unifi_console.jsx
index 0491b603..0031b224 100644
--- a/src/components/widgets/unifi_console/unifi_console.jsx
+++ b/src/components/widgets/unifi_console/unifi_console.jsx
@@ -19,117 +19,151 @@ export default function Widget({ options }) {
const { data: statsData, error: statsError } = useWidgetAPI(options, "stat/sites", { index: options.index });
if (statsError) {
- return
- {t("unifi.wait")}
- ;
+ return (
+
+ {t("unifi.wait")}
+
+ );
}
- const wan = defaultSite.health.find(h => h.subsystem === "wan");
- const lan = defaultSite.health.find(h => h.subsystem === "lan");
- const wlan = defaultSite.health.find(h => h.subsystem === "wlan");
- [wan, lan, wlan].forEach(s => {
- s.up = s.status === "ok" // eslint-disable-line no-param-reassign
- s.show = s.status !== "unknown" // eslint-disable-line no-param-reassign
+ const wan = defaultSite.health.find((h) => h.subsystem === "wan");
+ const lan = defaultSite.health.find((h) => h.subsystem === "lan");
+ const wlan = defaultSite.health.find((h) => h.subsystem === "wlan");
+ [wan, lan, wlan].forEach((s) => {
+ s.up = s.status === "ok"; // eslint-disable-line no-param-reassign
+ s.show = s.status !== "unknown"; // eslint-disable-line no-param-reassign
});
const name = wan.gw_name ?? defaultSite.desc;
const uptime = wan["gw_system-stats"] ? wan["gw_system-stats"].uptime : null;
const dataEmpty = !(wan.show || lan.show || wlan.show || uptime);
- return
-
-
-
-
+
+
- ;
+ >
+
+
+
+ setQuery(s.currentTarget.value)}
- required
- autoCapitalize="off"
- autoCorrect="off"
- autoComplete="off"
- // eslint-disable-next-line jsx-a11y/no-autofocus
- autoFocus={options.focus}
- />
-
-
-
-
-
-
-
-
- setQuery(s.currentTarget.value)}
+ required
+ autoCapitalize="off"
+ autoCorrect="off"
+ autoComplete="off"
+ // eslint-disable-next-line jsx-a11y/no-autofocus
+ autoFocus={options.focus}
+ />
+
+
-
-
-
+
+
+
+
- {availableProviderIds.map((providerId) => {
- const p = searchProviders[providerId];
- return (
-
- {({ active }) => (
-
- );
- })}
-
-
+ {availableProviderIds.map((providerId) => {
+ const p = searchProviders[providerId];
+ return (
+
+ {({ active }) => (
+
+ );
+ })}
+
+
+
+
+
-
-
- {t("weather.updating")}
- {t("weather.wait")}
- ;
+ return (
+
+ {t("weather.updating")}
+ {t("weather.wait")}
+
+ );
}
const unit = options.units === "metric" ? "celsius" : "fahrenheit";
const condition = data.current.condition.code;
const timeOfDay = data.current.is_day ? "day" : "night";
- return
-
- {options.label && `${options.label}, `}
- {t("common.number", {
- value: options.units === "metric" ? data.current.temp_c : data.current.temp_f,
- style: "unit",
- unit,
- })}
-
- {data.current.condition.text}
- ;
+ return (
+
+
+ {options.label && `${options.label}, `}
+ {t("common.number", {
+ value: options.units === "metric" ? data.current.temp_c : data.current.temp_f,
+ style: "unit",
+ unit,
+ })}
+
+ {data.current.condition.text}
+
+ );
}
export default function WeatherApi({ options }) {
@@ -73,17 +77,19 @@ export default function WeatherApi({ options }) {
enableHighAccuracy: true,
maximumAge: 1000 * 60 * 60 * 3,
timeout: 1000 * 30,
- }
+ },
);
}
};
if (!location) {
- return
- {t("weather.current")}
- {t("weather.allow")}
- ;
+ return (
+
+ {t("weather.current")}
+ {t("weather.allow")}
+
+ );
}
return
-
-
-
+
+
+ );
}
diff --git a/src/components/widgets/weather/weather.jsx b/src/components/widgets/weather/weather.jsx
index 08ebf774..08074ee5 100644
--- a/src/components/widgets/weather/weather.jsx
+++ b/src/components/widgets/weather/weather.jsx
@@ -16,37 +16,41 @@ function Widget({ options }) {
const { t, i18n } = useTranslation();
const { data, error } = useSWR(
- `/api/widgets/weather?${new URLSearchParams({ lang: i18n.language, ...options }).toString()}`
+ `/api/widgets/weather?${new URLSearchParams({ lang: i18n.language, ...options }).toString()}`,
);
if (error || data?.error) {
- return
- {name}
+ return (
+
+
+
-
+
- {dataEmpty &&
+
+
+
+ {dataEmpty && (
+
+ {name}
+
+
+
+ )}
+
+
+
+
+
+ {uptime && (
+
+
+
+ )}
+ {wan.show && (
+
+ {t("common.number", {
+ value: uptime / 86400,
+ maximumFractionDigits: 1,
+ })}
+
+ {t("unifi.days")}
+
+
+ )}
+ {!wan.show && !lan.show && wlan.show && (
+ {t("unifi.wan")}
+ {wan.up ? (
+
+
+ )}
+ {!wan.show && !wlan.show && lan.show && (
+ {t("unifi.wlan")}
+ {wlan.up ? (
+
+
+ )}
+ {t("unifi.lan")}
+ {lan.up ? (
+
+ {wlan.show && (
+
+
+ )}
+ {lan.show && (
+
+
+
+ {t("common.number", {
+ value: wlan.num_user,
+ maximumFractionDigits: 0,
+ })}
+
+
+
+ )}
+ {((wlan.show && !lan.show) || (!wlan.show && lan.show)) && (
+
+
+
+ {t("common.number", {
+ value: lan.num_user,
+ maximumFractionDigits: 0,
+ })}
+
+
+
+ )}
+
+
+ {t("common.number", {
+ value: wlan.show ? wlan.num_adopted : lan.num_adopted,
+ maximumFractionDigits: 0,
+ })}
+
+
-
}
-
-
-
-
-
- {uptime &&
-
-
}
- {wan.show &&
- {t("common.number", {
- value: uptime / 86400,
- maximumFractionDigits: 1,
- })}
-
- {t("unifi.days")}
-
-
}
- {!wan.show && !lan.show && wlan.show && {t("unifi.wan")}
- {wan.up
- ?
-
}
- {!wan.show && !wlan.show && lan.show && {t("unifi.wlan")}
- {wlan.up
- ?
-
}
- {t("unifi.lan")}
- {lan.up
- ?
- {wlan.show &&
-
-
}
- {lan.show &&
-
-
- {t("common.number", {
- value: wlan.num_user,
- maximumFractionDigits: 0,
- })}
-
-
-
}
- {(wlan.show && !lan.show || !wlan.show && lan.show) &&
-
-
- {t("common.number", {
- value: lan.num_user,
- maximumFractionDigits: 0,
- })}
-
-
-
}
-
-
-
- {t("common.number", {
- value: wlan.show ? wlan.num_adopted : lan.num_adopted,
- maximumFractionDigits: 0,
- })}
-
-
-
;
+ return (
+ Array.isArray(children) && (
+ {children.find(child => child.type === WidgetIcon)}
-
- {children.find(child => child.type === PrimaryText)}
- {children.find(child => child.type === SecondaryText)}
-
-
+
+ )
+ );
}
export function getBottomBlock(children) {
if (children.type !== Raw) {
- return children.find(child => child.type === Raw) || [];
+ return children.find((child) => child.type === Raw) || [];
}
return [children];
}
-export default function Container({ children = [], options, additionalClassNames = '' }) {
+export default function Container({ children = [], options, additionalClassNames = "" }) {
return (
-
+ {children.find((child) => child.type === WidgetIcon)}
+
+
+ {children.find((child) => child.type === PrimaryText)}
+ {children.find((child) => child.type === SecondaryText)}
+
+
+
{getInnerBlock(children)}
{getBottomBlock(children)}
diff --git a/src/components/widgets/widget/container_button.jsx b/src/components/widgets/widget/container_button.jsx
index 36c2f67a..a6379081 100644
--- a/src/components/widgets/widget/container_button.jsx
+++ b/src/components/widgets/widget/container_button.jsx
@@ -1,8 +1,12 @@
import { getAllClasses, getInnerBlock, getBottomBlock } from "./container";
-export default function ContainerButton ({ children = [], options, additionalClassNames = '', callback }) {
+export default function ContainerButton({ children = [], options, additionalClassNames = "", callback }) {
return (
-