add omnibar etc

2023-07-31 20:44:00 -07:00
parent fee4585ca4
commit 997940b4ab
8 changed files with 190 additions and 28 deletions
--- 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}>
--- a/frontend/src/components/header/omnibar.tsx
+++ 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>
+    </>
+  );
+};
--- 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 (
--- 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>
--- 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
--- 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>
+  );
+};
--- 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>
  );
 };
--- 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 /> },
            ],
          },