From 997940b4ab280b459429703f2a2b921a204815a2 Mon Sep 17 00:00:00 2001
From: karamvir <karamvir.singh98@gmail.com>
Date: Mon, 31 Jul 2023 20:44:00 -0700
Subject: [PATCH] add omnibar etc

---
 frontend/src/components/header/index.tsx     | 12 ++-
 frontend/src/components/header/omnibar.tsx   | 98 ++++++++++++++++++++
 frontend/src/components/updates/resource.tsx | 11 ++-
 frontend/src/resources/deployment/page.tsx   |  2 +-
 frontend/src/resources/server/config.tsx     | 39 +++++++-
 frontend/src/resources/server/page.tsx       | 26 ++++--
 frontend/src/resources/server/stats.tsx      | 25 +++--
 frontend/src/router.tsx                      |  5 +-
 8 files changed, 190 insertions(+), 28 deletions(-)
 create mode 100644 frontend/src/components/header/omnibar.tsx

diff --git a/frontend/src/components/header/index.tsx b/frontend/src/components/header/index.tsx
index b0e2fa37f..661a95fe8 100644
--- a/frontend/src/components/header/index.tsx
+++ b/frontend/src/components/header/index.tsx
@@ -9,6 +9,7 @@ import { ServerName } from "@resources/server/util";
 import { DeploymentName } from "@resources/deployment/util";
 import { DesktopUpdates } from "@components/updates/desktop";
 import { BuildName } from "@resources/build/util";
+import { Omnibar } from "./omnibar";
 
 export const Paths = () => {
   const path = useLocation().pathname.split("/")[1];
@@ -71,11 +72,14 @@ export const Header = () => {
         </div>
         <div className="flex">
           {user && (
-            <Button disabled variant="ghost">
-              <Circle className="w-4 h-4 fill-green-500 stroke-none" />
-            </Button>
+            <>
+              <Button disabled variant="ghost">
+                <Circle className="w-4 h-4 fill-green-500 stroke-none" />
+              </Button>
+              <Omnibar />
+              <DesktopUpdates />
+            </>
           )}
-          {user && <DesktopUpdates />}
           <ThemeToggle />
           {user && (
             <Button variant="ghost" onClick={logout}>
diff --git a/frontend/src/components/header/omnibar.tsx b/frontend/src/components/header/omnibar.tsx
new file mode 100644
index 000000000..4fef09ab0
--- /dev/null
+++ b/frontend/src/components/header/omnibar.tsx
@@ -0,0 +1,98 @@
+import { useRead } from "@hooks";
+import { BuildName } from "@resources/build/util";
+import {
+  DeploymentName,
+  DeploymentStatusIcon,
+} from "@resources/deployment/util";
+import { ServerName, ServerStatusIcon } from "@resources/server/util";
+import { Button } from "@ui/button";
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandList,
+  CommandSeparator,
+  CommandItem,
+} from "@ui/command";
+import { Search } from "lucide-react";
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+export const Omnibar = () => {
+  const [open, set] = useState(false);
+  const navigate = useNavigate();
+  const nav = (path: string) => () => {
+    navigate(path);
+    set(false);
+  };
+
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "s" && e.shiftKey) set(true);
+    };
+    document.addEventListener("keydown", down);
+    return () => document.removeEventListener("keydown", down);
+  }, []);
+
+  const deployments = useRead("ListDeployments", {}).data;
+  const builds = useRead("ListBuilds", {}).data;
+  const servers = useRead("ListServers", {}).data;
+
+  return (
+    <>
+      <Button variant="ghost" onClick={() => set(true)}>
+        <Search className="w-4 h-4" />
+      </Button>
+      <CommandDialog open={open} onOpenChange={set}>
+        <CommandInput placeholder="Type a command or search..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup heading="Deployments">
+            {deployments?.map(({ id }) => {
+              return (
+                <CommandItem
+                  key={id}
+                  className="flex items-center gap-2"
+                  onSelect={nav(`/deployments/${id}`)}
+                >
+                  <DeploymentStatusIcon deploymentId={id} />
+                  <DeploymentName deploymentId={id} />
+                </CommandItem>
+              );
+            })}
+          </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading="Servers">
+            {servers?.map(({ id }) => {
+              return (
+                <CommandItem
+                  key={id}
+                  className="flex items-center gap-2"
+                  onSelect={nav(`/servers/${id}`)}
+                >
+                  <ServerStatusIcon serverId={id} />
+                  <ServerName serverId={id} />
+                </CommandItem>
+              );
+            })}
+          </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading="Builds">
+            {builds?.map(({ id }) => {
+              return (
+                <CommandItem
+                  key={id}
+                  className="flex items-center gap-2"
+                  onSelect={nav(`/builds/${id}`)}
+                >
+                  <BuildName id={id} />
+                </CommandItem>
+              );
+            })}
+          </CommandGroup>
+        </CommandList>
+      </CommandDialog>
+    </>
+  );
+};
diff --git a/frontend/src/components/updates/resource.tsx b/frontend/src/components/updates/resource.tsx
index 45baa79dc..38438411b 100644
--- a/frontend/src/components/updates/resource.tsx
+++ b/frontend/src/components/updates/resource.tsx
@@ -12,9 +12,16 @@ import { Bell, ExternalLink, User, Calendar } from "lucide-react";
 import { Link } from "react-router-dom";
 import { UpdateDetails } from "./details";
 
-export const ResourceUpdates = ({ id }: { id: string }) => {
+export const ResourceUpdates = ({
+  id,
+  type,
+}: {
+  id: string;
+  type: "Deployment" | "Build" | "Server";
+}) => {
   const { data: updates, isLoading } = useRead("ListUpdates", {
-    target: { id },
+    "target.type": type,
+    "target.id": id,
   });
 
   return (
diff --git a/frontend/src/resources/deployment/page.tsx b/frontend/src/resources/deployment/page.tsx
index d5af81d5d..90477c529 100644
--- a/frontend/src/resources/deployment/page.tsx
+++ b/frontend/src/resources/deployment/page.tsx
@@ -13,7 +13,7 @@ export const DeploymentPage = () => {
 
   return (
     <div className="flex flex-col gap-12">
-      <ResourceUpdates id={deploymentId} />
+      <ResourceUpdates type="Deployment" id={deploymentId} />
       <DeploymentLogs deployment_id={deploymentId} />
       <DeploymentConfig />
     </div>
diff --git a/frontend/src/resources/server/config.tsx b/frontend/src/resources/server/config.tsx
index 876b93b80..da2e9fa08 100644
--- a/frontend/src/resources/server/config.tsx
+++ b/frontend/src/resources/server/config.tsx
@@ -1,16 +1,47 @@
 import { Config } from "@components/config/Config";
-import { useRead } from "@hooks";
+import { useRead, useWrite } from "@hooks";
 import { Types } from "@monitor/client";
+import { Button } from "@ui/button";
+import { Settings, Save, History } from "lucide-react";
 import { useState } from "react";
 import { useParams } from "react-router-dom";
 
 export const ServerConfig = () => {
   const id = useParams().serverId;
   const server = useRead("GetServer", { id });
-  const [update, set] = useState<Partial<Types.ServerConfig>>({});
-  if (server.data?.config) {
+  const [config, set] = useState<Partial<Types.ServerConfig>>({});
+
+  const { mutate } = useWrite("UpdateServer");
+
+  if (id && server.data?.config) {
     return (
-      <Config config={server.data?.config as any} update={update} set={set} />
+      <div className="flex flex-col">
+        <div className="flex justify-between">
+          <div className="flex items-center gap-2 text-muted-foreground">
+            <Settings className="w-4 h-4" />
+            <h2 className="text-xl">Config</h2>
+          </div>
+          <div className="flex gap-4">
+            <Button variant="outline" intent="warning">
+              <History className="w-4 h-4" />
+            </Button>
+            <Button
+              variant="outline"
+              intent="success"
+              onClick={() => mutate({ config, id })}
+            >
+              <Save className="w-4 h-4" />
+            </Button>
+          </div>
+        </div>
+        <div className="mt-2">
+          <Config
+            config={server.data?.config as any}
+            update={config}
+            set={set}
+          />
+        </div>
+      </div>
     );
   } else {
     // loading
diff --git a/frontend/src/resources/server/page.tsx b/frontend/src/resources/server/page.tsx
index e72ed76a9..ea36a7809 100644
--- a/frontend/src/resources/server/page.tsx
+++ b/frontend/src/resources/server/page.tsx
@@ -1,18 +1,16 @@
 import { useSetRecentlyViewed } from "@hooks";
 import { Resource } from "@layouts/resource";
-import { Link, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import { ServerName, ServerStats } from "./util";
 import { ServerStatusIcon } from "./util";
 import { CardDescription } from "@ui/card";
-import { Button } from "@ui/button";
-import { Settings } from "lucide-react";
+import { ResourceUpdates } from "@components/updates/resource";
+import { ServerStatsPage } from "./stats";
+import { ServerConfig } from "./config";
 
 export const Server = () => {
   const { serverId } = useParams();
   const push = useSetRecentlyViewed();
-
-  // if (!serverId) return null;
-  // push("Server", serverId!);
   if (!serverId) return null;
   push("Server", serverId);
 
@@ -28,13 +26,25 @@ export const Server = () => {
       }
       actions={
         <div className="flex gap-4">
-          <Link to={`/servers/${serverId}/config`}>
+          {/* <Link to={`/servers/${serverId}/config`}>
             <Button variant="outline">
               <Settings className="w-4 h-4" />
             </Button>
-          </Link>
+          </Link> */}
         </div>
       }
     />
   );
 };
+
+export const ServerContent = () => {
+  const id = useParams().serverId;
+  if (!id) return null;
+  return (
+    <div className="flex flex-col gap-12">
+      <ResourceUpdates type="Server" id={id} />
+      <ServerStatsPage />
+      <ServerConfig />
+    </div>
+  );
+};
diff --git a/frontend/src/resources/server/stats.tsx b/frontend/src/resources/server/stats.tsx
index 8a198337d..b93d4243d 100644
--- a/frontend/src/resources/server/stats.tsx
+++ b/frontend/src/resources/server/stats.tsx
@@ -6,7 +6,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@ui/card";
-import { Cpu, Database, MemoryStick } from "lucide-react";
+import { Cpu, Database, LineChart, MemoryStick } from "lucide-react";
 import { useParams } from "react-router-dom";
 
 export const ServerStatsPage = () => {
@@ -14,11 +14,24 @@ export const ServerStatsPage = () => {
   if (!server_id) return null;
 
   return (
-    <div className="flex flex-col lg:flex-row gap-4">
-      <CPU server_id={server_id} />
-      <RAM server_id={server_id} />
-      <DISK server_id={server_id} />
-      <LOAD server_id={server_id} />
+    <div className="flex flex-col">
+      <div className="flex justify-between">
+        <div className="flex items-center gap-2 text-muted-foreground">
+          <LineChart className="w-4 h-4" />
+          <h2 className="text-xl">Server Stats</h2>
+        </div>
+        {/* <Link to={`/deployments/${id}/updates`}>
+          <Button variant="secondary">
+            <ExternalLink className="w-4 h-4" />
+          </Button>
+        </Link> */}
+      </div>
+      <div className="flex flex-col lg:flex-row gap-4 mt-2">
+        <CPU server_id={server_id} />
+        <RAM server_id={server_id} />
+        <DISK server_id={server_id} />
+        <LOAD server_id={server_id} />
+      </div>
     </div>
   );
 };
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index 782593bba..d621a9013 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -3,7 +3,7 @@ import { Layout } from "@layouts/layout";
 import { Login } from "@pages/auth/login";
 import { Signup } from "@pages/auth/signup";
 import { Dashboard } from "@pages/dashboard";
-import { Server } from "@resources/server/page";
+import { Server, ServerContent } from "@resources/server/page";
 import { Build } from "@resources/build/page";
 import { Deployments, Builds, Servers, Builders } from "@resources/pages";
 import { DeploymentUpdates } from "@resources/deployment/updates";
@@ -12,7 +12,6 @@ import { DeploymentPage } from "@resources/deployment/page";
 import { DeploymentConfig } from "@resources/deployment/config";
 import { ServerConfig } from "@resources/server/config";
 import { BuildConfig } from "@resources/build/config";
-import { ServerStatsPage } from "@resources/server/stats";
 
 const router = createBrowserRouter([
   {
@@ -49,7 +48,7 @@ const router = createBrowserRouter([
             path: ":serverId",
             element: <Server />,
             children: [
-              { path: "", element: <ServerStatsPage /> },
+              { path: "", element: <ServerContent /> },
               { path: "config", element: <ServerConfig /> },
             ],
           },