Release 202412292127

2026-01-20 10:14:18 +01:00 · 2024-10-20 17:24:15 +02:00
commit 20780b65db
171 changed files with 24344 additions and 0 deletions
--- a/ui/src/routes/devices.tsx
+++ b/ui/src/routes/devices.tsx
@@ -0,0 +1,102 @@
+import { useLoaderData, useRevalidator } from "react-router-dom";
+
+import DashboardNavbar from "@components/Header";
+import { LinkButton } from "@components/Button";
+import KvmCard from "@components/KvmCard";
+import useInterval from "@/hooks/useInterval";
+import { checkAuth } from "@/main";
+import { User } from "@/hooks/stores";
+import EmptyCard from "@components/EmptyCard";
+import { LuMonitorSmartphone } from "react-icons/lu";
+import { ArrowRightIcon } from "@heroicons/react/16/solid";
+
+interface LoaderData {
+  devices: { id: string; name: string; online: boolean; lastSeen: string }[];
+  user: User;
+}
+
+export const loader = async () => {
+  const user = await checkAuth();
+
+  try {
+    const res = await fetch(`${import.meta.env.VITE_CLOUD_API}/devices`, {
+      method: "GET",
+      credentials: "include",
+      mode: "cors",
+    });
+
+    const { devices } = await res.json();
+    return { devices, user };
+  } catch (e) {
+    console.error(e);
+    return { devices: [] };
+  }
+};
+
+export default function DevicesRoute() {
+  const { devices, user } = useLoaderData() as LoaderData;
+  const revalidate = useRevalidator();
+  useInterval(revalidate.revalidate, 4000);
+  return (
+    <div className="relative h-full">
+      <div className="grid h-full select-none grid-rows-headerBody">
+        <DashboardNavbar
+          isLoggedIn={!!user}
+          primaryLinks={[{ title: "Cloud Devices", to: "/devices" }]}
+          userEmail={user?.email}
+          picture={user?.picture}
+        />
+
+        <div className="flex h-full overflow-hidden">
+          <div className="w-full h-full px-4 mx-auto space-y-6 sm:max-w-6xl sm:px-8 md:max-w-7xl md:px-12 lg:max-w-8xl">
+            <div className="flex items-center justify-between pb-4 mt-8 border-b border-b-slate-800/20 dark:border-b-slate-300/20">
+              <div>
+                <h1 className="text-xl font-bold text-black dark:text-white">
+                  Cloud KVMs
+                </h1>
+                <p className="text-base text-slate-700 dark:text-slate-400">
+                  Manage your cloud KVMs and connect to them securely.
+                </p>
+              </div>
+            </div>
+
+            {devices.length === 0 ? (
+              <div className="max-w-3xl">
+                <EmptyCard
+                  IconElm={LuMonitorSmartphone}
+                  headline="No devices found"
+                  description="You don't have any devices with enabled JetKVM Cloud yet."
+                  BtnElm={
+                    <LinkButton
+                      to="https://jetkvm.com/docs/networking/remote-access"
+                      size="SM"
+                      theme="primary"
+                      TrailingIcon={ArrowRightIcon}
+                      text="Learn more"
+                    />
+                  }
+                />
+              </div>
+            ) : (
+              <>
+                <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-3">
+                  {devices.map(x => {
+                    return (
+                      <KvmCard
+                        key={x.id}
+                        id={x.id}
+                        title={x.name ?? x.id}
+                        lastSeen={x.lastSeen ? new Date(x.lastSeen) : null}
+                        online={x.online}
+                      />
+                    );
+                  })}
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}