allow services to be display only

Implement Jellyseerr integration

README.md

@@ -9,7 +9,7 @@
     - Docker Integration
       - Status light + CPU, Memory & Network Reporting *(click on the status light)*
     - Service Integration
-      - Currently supports Sonarr, Radarr, Ombi, Emby, Jellyfin, NZBGet, ruTorrent
+      - Currently supports Sonarr, Radarr, Ombi, Emby, Jellyfin, Jellyseerr ([thanks to ilusi0n](https://github.com/benphelps/homepage/pull/34)), NZBGet, ruTorrent
       - Portainer, Traefik, Speedtest Tracker, PiHole
   * Homepage Widgets
     - System Stats (Disk, CPU, Memory)
@@ -35,7 +35,7 @@ Using docker compose:
 version: '3.3'
 services:
     homepage:
-        image: ghcr.io/benphelps/homepage:main
+        image: ghcr.io/benphelps/homepage:latest
         container_name: homepage
         ports:
             - 3000:3000
@@ -47,7 +47,7 @@ services:
 or docker run:
 
 ```bash
-docker run -p 3000:3000 -v /path/to/config:/app/config -v /var/run/docker.sock:/var/run/docker.sock ghcr.io/benphelps/homepage:main
+docker run -p 3000:3000 -v /path/to/config:/app/config -v /var/run/docker.sock:/var/run/docker.sock ghcr.io/benphelps/homepage:latest
 ```
 
 ### With Node

src/components/services/item.jsx

@@ -21,14 +21,19 @@ function resolveIcon(icon) {
 
 export default function Item({ service }) {
   return (
-    <li key={service.name} className="">
+    <li key={service.name}>
       <Disclosure>
-        <div className="transition-all h-15 overflow-hidden mb-3 cursor-pointer p-1 rounded-md font-medium text-theme-700 hover:text-theme-800 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/40 bg-white/50 hover:bg-theme-300/10 dark:bg-white/5 dark:hover:bg-white/10">
+        <div className={
+          (service.href && service.href !== "#" ? 'cursor-pointer ' : 'cursor-default ') +
+          'transition-all h-15 overflow-hidden mb-3 p-1 rounded-md font-medium text-theme-700 hover:text-theme-800 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/40 bg-white/50 hover:bg-theme-300/10 dark:bg-white/5 dark:hover:bg-white/10'
+          }>
           <div className="flex">
             {service.icon && (
               <div
                 onClick={() => {
-                  window.open(service.href, "_blank").focus();
+                  if (service.href && service.href !== "#") {
+                    window.open(service.href, "_blank").focus();
+                  }
                 }}
                 className="flex-shrink-0 flex items-center justify-center w-12 "
               >
@@ -38,7 +43,9 @@ export default function Item({ service }) {
 
             <div
               onClick={() => {
-                window.open(service.href, "_blank").focus();
+                if (service.href && service.href !== "#") {
+                  window.open(service.href, "_blank").focus();
+                }
               }}
               className="flex-1 flex items-center justify-between rounded-r-md "
             >
@@ -48,7 +55,7 @@ export default function Item({ service }) {
               </div>
             </div>
             {service.container && (
-              <Disclosure.Button as="div" className="flex-shrink-0 flex items-center justify-center w-12 ">
+              <Disclosure.Button as="div" className="flex-shrink-0 flex items-center justify-center w-12 cursor-pointer">
                 <Status service={service} />
               </Disclosure.Button>
             )}

src/components/services/widget.jsx

@@ -10,6 +10,7 @@ import Rutorrent from "./widgets/service/rutorrent";
 import Jellyfin from "./widgets/service/jellyfin";
 import Speedtest from "./widgets/service/speedtest";
 import Traefik from "./widgets/service/traefik";
+import Jellyseerr from "./widgets/service/jellyseerr";
 
 const widgetMappings = {
   docker: Docker,
@@ -24,6 +25,7 @@ const widgetMappings = {
   rutorrent: Rutorrent,
   speedtest: Speedtest,
   traefik: Traefik,
+  jellyseerr: Jellyseerr
 };
 
 export default function Widget({ service }) {

src/components/services/widgets/service/docker.jsx

@@ -49,8 +49,12 @@ export default function Docker({ service }) {
     <Widget>
       <Block label="CPU" value={`${calculateCPUPercent(statsData.stats)}%`} />
       <Block label="MEM" value={formatBytes(statsData.stats.memory_stats.usage, 0)} />
-      <Block label="RX" value={formatBytes(statsData.stats.networks.eth0.rx_bytes, 0)} />
-      <Block label="TX" value={formatBytes(statsData.stats.networks.eth0.tx_bytes, 0)} />
+      {statsData.stats.networks && (
+        <>
+          <Block label="RX" value={formatBytes(statsData.stats.networks.eth0.rx_bytes, 0)} />
+          <Block label="TX" value={formatBytes(statsData.stats.networks.eth0.tx_bytes, 0)} />
+        </>
+      )}
     </Widget>
   );
 }

src/components/services/widgets/service/jellyseerr.jsx

@@ -0,0 +1,51 @@
+import useSWR from "swr";
+
+import Widget from "../widget";
+import Block from "../block";
+
+export default function Jellyseerr({ service }) {
+    const config = service.widget;
+
+    function buildApiUrl(endpoint) {
+        const { url } = config;
+        const reqUrl = new URL(`/api/v1/${endpoint}`, url);
+        return `/api/proxy?url=${encodeURIComponent(reqUrl)}`;
+    }
+
+    const fetcher = async (url) => {
+        const res = await fetch(url, {
+            method: "GET",
+            withCredentials: true,
+            credentials: "include",
+            headers: {
+                "X-Api-Key": `${config.key}`,
+                "Content-Type": "application/json"
+            }
+        });
+        return await res.json();
+    };
+
+    const { data: statsData, error: statsError } = useSWR(buildApiUrl(`request/count`), fetcher);
+
+    if (statsError) {
+        return <Widget error="Jellyseerr API Error" />;
+    }
+
+    if (!statsData) {
+        return (
+            <Widget>
+                <Block label="Pending" />
+                <Block label="Approved" />
+                <Block label="Available" />
+            </Widget>
+        );
+    }
+
+    return (
+        <Widget>
+            <Block label="Pending" value={statsData.pending} />
+            <Block label="Approved" value={statsData.approved} />
+            <Block label="Available" value={statsData.available} />
+        </Widget>
+    );
+}