From ef11e520538c2bec7f7060007bb8c9681ad87447 Mon Sep 17 00:00:00 2001
From: yusing <yusing@6uo.me>
Date: Fri, 11 Oct 2024 10:39:43 +0800
Subject: [PATCH] 'Proxies' page UI update, updated code to match latest API
 sepc

---
 app/proxies/page.tsx         | 53 ++++++++++++++++++++++++++++++------
 components/app_groups.tsx    |  2 +-
 components/health_bubble.tsx |  3 ++
 components/navbar.tsx        |  4 +--
 types/proxy.ts               | 19 ++++++++++---
 5 files changed, 65 insertions(+), 16 deletions(-)
 create mode 100644 components/health_bubble.tsx

diff --git a/app/proxies/page.tsx b/app/proxies/page.tsx
index c680428..a31b00c 100644
--- a/app/proxies/page.tsx
+++ b/app/proxies/page.tsx
@@ -1,6 +1,10 @@
 "use client";
 
-import { faRefresh } from "@fortawesome/free-solid-svg-icons";
+import {
+  faRefresh,
+  faServer,
+  faStream,
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Spinner } from "@nextui-org/spinner";
 import {
@@ -65,13 +69,17 @@ export default function ProxiesPage() {
     return (
       <Table
         aria-label="reverse proxies"
-        className="w-full"
+        className="w-full border rounded-md shadow-sm"
         sortDescriptor={list.sortDescriptor}
         onSortChange={list.sort}
       >
         <TableHeader columns={columns}>
           {(col) => (
-            <TableColumn key={col.key} allowsSorting>
+            <TableColumn
+              key={col.key}
+              allowsSorting
+              className="hover:bg-gray-100"
+            >
               {col.label}
             </TableColumn>
           )}
@@ -83,8 +91,13 @@ export default function ProxiesPage() {
           loadingContent={<Spinner label="Loading..." />}
         >
           {(item) => (
-            <TableRow key={`${key_prefix}_${item.alias}_${item.path_pattern}`}>
-              {(colKey) => <TableCell>{item[colKey]}</TableCell>}
+            <TableRow
+              key={`${key_prefix}_${item.alias}_${item.path_pattern}`}
+              className="hover:bg-gray-700"
+            >
+              {(colKey) => (
+                <TableCell className="font-medium">{item[colKey]}</TableCell>
+              )}
             </TableRow>
           )}
         </TableBody>
@@ -93,9 +106,10 @@ export default function ProxiesPage() {
   }
 
   return (
-    <div>
+    <div className="p-4">
       <Tabs
         aria-label="tabs"
+        className="space-y-4"
         selectedKey={selectedKey}
         variant="light"
         onSelectionChange={(key) => {
@@ -105,16 +119,37 @@ export default function ProxiesPage() {
           }
         }}
       >
-        <Tab key="reverse_proxies" title="Reverse Proxies">
+        <Tab
+          key="reverse_proxies"
+          title={
+            <span className="flex items-center gap-2">
+              <FontAwesomeIcon icon={faServer} />
+              Reverse Proxies
+            </span>
+          }
+        >
           {table("reverse_proxies", ReverseProxyColumns, rps)}
         </Tab>
-        <Tab key="streams" title="Streams">
+        <Tab
+          key="streams"
+          title={
+            <span className="flex items-center gap-2">
+              <FontAwesomeIcon icon={faStream} />
+              Streams
+            </span>
+          }
+        >
           {table("streams", StreamColumns, streams)}
         </Tab>
         <Tab
           key="reload"
           title={
-            <FontAwesomeIcon icon={faRefresh} onClick={activeList.reload} />
+            <button
+              className="p-2 text-blue-500 hover:text-blue-700 transition"
+              onClick={activeList.reload}
+            >
+              <FontAwesomeIcon icon={faRefresh} />
+            </button>
           }
         />
       </Tabs>
diff --git a/components/app_groups.tsx b/components/app_groups.tsx
index fc4fc81..c0dfa35 100644
--- a/components/app_groups.tsx
+++ b/components/app_groups.tsx
@@ -32,7 +32,7 @@ export default function AppGroups() {
               {category}
             </h2>
           </CardHeader>
-          <CardBody className="p-0 m-0 w-full overflow-x-clip">
+          <CardBody className="p-0 m-0 w-full overflow-x-auto overflow-y-auto">
             <Spacer y={1} />
             <ResponsiveMasonry
               className="flex gap-4"
diff --git a/components/health_bubble.tsx b/components/health_bubble.tsx
new file mode 100644
index 0000000..e79609b
--- /dev/null
+++ b/components/health_bubble.tsx
@@ -0,0 +1,3 @@
+export default function HealthBubble() {
+  return <div className="w-5 h-5 rounded-full bg-green-500" />;
+}
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 4de2436..91d552c 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -64,9 +64,9 @@ export const Navbar = () => {
         <NavbarBrand as="li" className="gap-3">
           <NextLink className="flex justify-start items-center gap-1" href="/">
             <Logo />
-            <p className="font-bold text-inherit flex">
+            <span className="font-bold text-inherit flex">
               Go Proxy <VersionText />
-            </p>
+            </span>
           </NextLink>
         </NavbarBrand>
         <NavbarMenuToggle
diff --git a/types/proxy.ts b/types/proxy.ts
index 46b1791..7574a90 100644
--- a/types/proxy.ts
+++ b/types/proxy.ts
@@ -10,7 +10,7 @@ export const ReverseProxyColumns = [
   { key: "alias", label: "Alias" },
   { key: "provider", label: "Provider" },
   { key: "path_pattern", label: "Path Pattern" },
-  { key: "target_url", label: "Target" },
+  { key: "url", label: "Target" },
 ];
 
 export const StreamColumns = [
@@ -31,15 +31,22 @@ export async function getReverseProxies(signal: AbortSignal) {
   for (const entry of Object.values(model)) {
     for (const pattern of entry.path_patterns) {
       reverseProxies.push({
-        container: entry.raw.proxy_properties.container_name,
+        container: entry.container_name,
         alias: entry.alias,
         provider: entry.provider,
         path_pattern: pattern,
-        target_url: entry.target_url,
+        url: entry.url,
       });
     }
   }
 
+  reverseProxies.sort((a, b) => {
+    return (
+      a.provider.localeCompare(b.provider) ||
+      a.container.localeCompare(b.container)
+    );
+  });
+
   return reverseProxies;
 }
 
@@ -53,12 +60,16 @@ export async function getStreams(signal: AbortSignal) {
 
   for (const entry of Object.values(model)) {
     streams.push({
-      container: entry.raw.proxy_properties.container_name,
+      container: entry.raw.container.container_name,
       alias: entry.alias,
       provider: entry.provider,
       target: `${entry.scheme.listening}://${entry.host}:${entry.port.listening} => ${entry.scheme.proxy}://${entry.host}:${entry.port.proxy}`,
     });
   }
 
+  streams.sort((a, b) => {
+    return a.provider.localeCompare(b.provider);
+  });
+
   return streams;
 }