diff --git a/frontend-v2/src/components/layouts.tsx b/frontend-v2/src/components/layouts.tsx index 32e29e5f8..f035668e6 100644 --- a/frontend-v2/src/components/layouts.tsx +++ b/frontend-v2/src/components/layouts.tsx @@ -25,12 +25,13 @@ import { CardContent, } from "@ui/card"; import { Logout, ResourceTypeDropdown, ResourcesDropdown } from "./util"; +import { HeaderUpdates } from "./updates/header"; export const Layout = () => { const type = useResourceParamType(); return ( <> -
+
MONITOR @@ -43,6 +44,7 @@ export const Layout = () => {
+
@@ -62,7 +64,7 @@ interface PageProps { } export const Page = ({ title, subtitle, actions, children }: PageProps) => ( -
+

{title}

diff --git a/frontend-v2/src/components/resources/deployment/index.tsx b/frontend-v2/src/components/resources/deployment/index.tsx index 89a39519c..4e9815291 100644 --- a/frontend-v2/src/components/resources/deployment/index.tsx +++ b/frontend-v2/src/components/resources/deployment/index.tsx @@ -17,6 +17,7 @@ import { } from "./actions"; import { Input } from "@ui/input"; import { DeploymentLogs } from "./logs"; +import { Link } from "react-router-dom"; export const useDeployment = (id?: string) => useRead("ListDeployments", {}, { refetchInterval: 5000 }).data?.find( @@ -28,18 +29,26 @@ export const Deployment: RequiredResourceComponents = { Description: ({ id }) => ( <>{useDeployment(id)?.info.status ?? "Not Deployed"} ), - Info: ({ id }) => ( - <> -
- - {useServer(useDeployment(id)?.info.server_id)?.name ?? "N/A"} -
-
- - {useDeployment(id)?.info.image ?? "N/A"} -
- - ), + Info: ({ id }) => { + const info = useDeployment(id)?.info; + const server = useServer(info?.server_id); + + return ( + <> + + + {server?.name ?? "N/A"} + + + + {useDeployment(id)?.info.image || "N/A"} + + + ); + }, Icon: ({ id }) => { const s = useDeployment(id)?.info.state; diff --git a/frontend-v2/src/components/updates/details.tsx b/frontend-v2/src/components/updates/details.tsx index dd663bd32..a98211e8a 100644 --- a/frontend-v2/src/components/updates/details.tsx +++ b/frontend-v2/src/components/updates/details.tsx @@ -65,6 +65,7 @@ export const UpdateDetails = ({
+
{update.version && ( diff --git a/frontend-v2/src/components/updates/header.tsx b/frontend-v2/src/components/updates/header.tsx new file mode 100644 index 000000000..b9015d4d1 --- /dev/null +++ b/frontend-v2/src/components/updates/header.tsx @@ -0,0 +1,74 @@ +import { useRead } from "@lib/hooks"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuTrigger, +} from "@ui/dropdown-menu"; +import { Bell } from "lucide-react"; +import { Button } from "@ui/button"; +import { Calendar, User } from "lucide-react"; +import { UpdateDetails, UpdateUser } from "./details"; +import { UpdateListItem, UpdateStatus } from "@monitor/client/dist/types"; +import { ResourceComponents } from "@components/resources"; + +const fmt_date = (d: Date) => + `${d.getDate()}/${d.getMonth() + 1} @ ${d.getHours()}:${d.getMinutes()}`; + +export const SingleUpdate = ({ update }: { update: UpdateListItem }) => { + const Components = + update.target.type !== "System" + ? ResourceComponents[update.target.type] + : null; + + return ( + +
+
+
+ {update.operation.match(/[A-Z][a-z]+|[0-9]+/g)?.join(" ")} +
+ {Components && } +
+
+ +
+
+ +
+ {update.status === UpdateStatus.InProgress + ? "ongoing" + : fmt_date(new Date(update.start_ts))} +
+
+
+ + +
+
+
+
+
+ ); +}; + +export const HeaderUpdates = () => { + const updates = useRead("ListUpdates", {}).data; + + return ( + + + + + + + {updates?.updates.map((update) => ( + + ))} + + + + ); +}; diff --git a/frontend-v2/src/globals.css b/frontend-v2/src/globals.css index 520b186c5..5ba0b8b6d 100644 --- a/frontend-v2/src/globals.css +++ b/frontend-v2/src/globals.css @@ -10,7 +10,7 @@ } body { - @apply bg-background text-foreground; + @apply bg-background text-foreground overflow-y-scroll; font-family: Inter; } pre { diff --git a/frontend-v2/src/lib/socket.tsx b/frontend-v2/src/lib/socket.tsx index f16a2bdf9..7d20a0beb 100644 --- a/frontend-v2/src/lib/socket.tsx +++ b/frontend-v2/src/lib/socket.tsx @@ -119,7 +119,7 @@ export const WsStatusIndicator = () => { toast({ title: "surprise", description: "motherfucker" }); return ( -