refactor(multi-server): replace executeCommand with execAsyncRemote

This commit is contained in:
Mauricio Siu
2024-09-16 00:40:11 -06:00
parent 19295ba746
commit d8d0b60cb3
76 changed files with 622 additions and 19123 deletions

View File

@@ -17,10 +17,10 @@ import {
SelectValue,
} from "@/components/ui/select";
import { api } from "@/utils/api";
import { Loader2 } from "lucide-react";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { DockerMonitoring } from "../../monitoring/docker/show";
import { Loader2 } from "lucide-react";
interface Props {
appName: string;
@@ -119,7 +119,6 @@ export const ShowMonitoringCompose = ({
</Button>
</div>
<DockerMonitoring
serverId={serverId || ""}
appName={containerAppName || ""}
appType={appType}
/>

View File

@@ -23,7 +23,7 @@ export const DockerMemoryChart = ({
return {
time: item.time,
name: `Point ${index + 1}`,
usage: (item.value.used / 1024).toFixed(2),
usage: (item.value.used / 1024 ** 3).toFixed(2),
};
});
return (

View File

@@ -150,6 +150,8 @@ export const DockerMonitoring = ({
});
}, [data]);
console.log(currentData);
useEffect(() => {
const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
const wsUrl = `${protocol}//${window.location.host}/listen-docker-stats-monitoring?appName=${appName}&appType=${appType}`;
@@ -208,9 +210,7 @@ export const DockerMonitoring = ({
<div className="flex flex-col gap-2 w-full ">
<span className="text-base font-medium">Memory</span>
<span className="text-sm text-muted-foreground">
{`Used: ${(currentData.memory.value.used / 1024).toFixed(
2,
)} GB / Limit: ${(currentData.memory.value.total / 1024).toFixed(2)} GB`}
{`Used: ${(currentData.memory.value.used / 1024 ** 3).toFixed(2)} GB / Limit: ${(currentData.memory.value.total / 1024 ** 3).toFixed(2)} GB`}
</span>
<Progress
value={currentData.memory.value.usedPercentage}
@@ -218,7 +218,7 @@ export const DockerMonitoring = ({
/>
<DockerMemoryChart
acummulativeData={acummulativeData.memory}
memoryLimitGB={currentData.memory.value.total / 1024}
memoryLimitGB={currentData.memory.value.total / 1024 ** 3}
/>
</div>
{appName === "dokploy" && (
@@ -240,9 +240,9 @@ export const DockerMonitoring = ({
<div className="flex flex-col gap-2 w-full ">
<span className="text-base font-medium">Block I/O</span>
<span className="text-sm text-muted-foreground">
{`Used: ${currentData.block.value.readMb.toFixed(
{`Read: ${currentData.block.value.readMb.toFixed(
2,
)} MB / Limit: ${currentData.block.value.writeMb.toFixed(
)} MB / Write: ${currentData.block.value.writeMb.toFixed(
3,
)} MB`}
</span>

View File

@@ -19,15 +19,6 @@ import {
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { slugify } from "@/lib/slug";
import { api } from "@/utils/api";
import { zodResolver } from "@hookform/resolvers/zod";
import { Folder } from "lucide-react";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";
import {
Select,
SelectContent,
@@ -37,6 +28,21 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { slugify } from "@/lib/slug";
import { api } from "@/utils/api";
import { zodResolver } from "@hookform/resolvers/zod";
import { Folder, HelpCircle } from "lucide-react";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";
const AddTemplateSchema = z.object({
name: z.string().min(1, {
@@ -52,9 +58,7 @@ const AddTemplateSchema = z.object({
"App name supports lowercase letters, numbers, '-' and can only start and end letters, and does not support continuous '-'",
}),
description: z.string().optional(),
serverId: z.string().min(1, {
message: "Server is required",
}),
serverId: z.string().optional(),
});
type AddTemplate = z.infer<typeof AddTemplateSchema>;
@@ -155,7 +159,27 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
name="serverId"
render={({ field }) => (
<FormItem>
<FormLabel>Select a Server</FormLabel>
<TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger asChild>
<FormLabel className="break-all w-fit flex flex-row gap-1 items-center">
Select a Server (Optional)
<HelpCircle className="size-4 text-muted-foreground" />
</FormLabel>
</TooltipTrigger>
<TooltipContent
className="z-[999] w-[300px]"
align="start"
side="top"
>
<span>
If not server is selected, the application will be
deployed on the server where the user is logged in.
</span>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<Select
onValueChange={field.onChange}
defaultValue={field.value}

View File

@@ -32,11 +32,17 @@ import { Textarea } from "@/components/ui/textarea";
import { slugify } from "@/lib/slug";
import { api } from "@/utils/api";
import { zodResolver } from "@hookform/resolvers/zod";
import { CircuitBoard, Folder } from "lucide-react";
import { CircuitBoard, HelpCircle } from "lucide-react";
import { useEffect } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
const AddComposeSchema = z.object({
composeType: z.enum(["docker-compose", "stack"]).optional(),
@@ -53,9 +59,7 @@ const AddComposeSchema = z.object({
"App name supports lowercase letters, numbers, '-' and can only start and end letters, and does not support continuous '-'",
}),
description: z.string().optional(),
serverId: z.string().min(1, {
message: "Server is required",
}),
serverId: z.string().optional(),
});
type AddCompose = z.infer<typeof AddComposeSchema>;
@@ -78,7 +82,6 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
description: "",
composeType: "docker-compose",
appName: `${slug}-`,
serverId: "",
},
resolver: zodResolver(AddComposeSchema),
});
@@ -161,7 +164,27 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
name="serverId"
render={({ field }) => (
<FormItem>
<FormLabel>Select a Server</FormLabel>
<TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger asChild>
<FormLabel className="break-all w-fit flex flex-row gap-1 items-center">
Select a Server (Optional)
<HelpCircle className="size-4 text-muted-foreground" />
</FormLabel>
</TooltipTrigger>
<TooltipContent
className="z-[999] w-[300px]"
align="start"
side="top"
>
<span>
If not server is selected, the application will be
deployed on the server where the user is logged in.
</span>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<Select
onValueChange={field.onChange}
defaultValue={field.value}

View File

@@ -26,15 +26,6 @@ import {
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Textarea } from "@/components/ui/textarea";
import { slugify } from "@/lib/slug";
import { api } from "@/utils/api";
import { zodResolver } from "@hookform/resolvers/zod";
import { AlertTriangle, Database } from "lucide-react";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";
import {
Select,
SelectContent,
@@ -44,6 +35,15 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { slugify } from "@/lib/slug";
import { api } from "@/utils/api";
import { zodResolver } from "@hookform/resolvers/zod";
import { AlertTriangle, Database } from "lucide-react";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";
type DbType = typeof mySchema._type.type;

View File

@@ -34,16 +34,12 @@ const AddProjectSchema = z.object({
message: "Name is required",
}),
description: z.string().optional(),
serverId: z.string().min(1, {
message: "Server is required",
}),
});
type AddProject = z.infer<typeof AddProjectSchema>;
export const AddProject = () => {
const utils = api.useUtils();
const { data: servers } = api.server.all.useQuery();
const [isOpen, setIsOpen] = useState(false);
const { mutateAsync, error, isError } = api.project.create.useMutation();
const router = useRouter();
@@ -51,7 +47,6 @@ export const AddProject = () => {
defaultValues: {
description: "",
name: "",
serverId: "",
},
resolver: zodResolver(AddProjectSchema),
});
@@ -60,7 +55,6 @@ export const AddProject = () => {
form.reset({
description: "",
name: "",
serverId: "",
});
}, [form, form.reset, form.formState.isSubmitSuccessful]);

View File

@@ -18,15 +18,6 @@ import {
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { api } from "@/utils/api";
import { zodResolver } from "@hookform/resolvers/zod";
import { PlusIcon } from "lucide-react";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";
import {
Select,
SelectContent,
@@ -36,6 +27,15 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { api } from "@/utils/api";
import { zodResolver } from "@hookform/resolvers/zod";
import { PlusIcon } from "lucide-react";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";
const Schema = z.object({
name: z.string().min(1, {

View File

@@ -1,4 +1,14 @@
import { DateTooltip } from "@/components/shared/date-tooltip";
import { DialogAction } from "@/components/shared/dialog-action";
import { StatusTooltip } from "@/components/shared/status-tooltip";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import {
Dialog,
DialogContent,
@@ -12,17 +22,7 @@ import { useUrl } from "@/utils/hooks/use-url";
import { RocketIcon, ServerIcon } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";
import { DateTooltip } from "@/components/shared/date-tooltip";
import { StatusTooltip } from "@/components/shared/status-tooltip";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { ShowDeployment } from "../../application/deployments/show-deployment";
import { DialogAction } from "@/components/shared/dialog-action";
interface Props {
serverId: string;

View File

@@ -1,12 +1,6 @@
import { api } from "@/utils/api";
import { format } from "date-fns";
import { AddServer } from "./add-server";
import { KeyIcon, MoreHorizontal, ServerIcon } from "lucide-react";
import Link from "next/link";
import { DialogAction } from "@/components/shared/dialog-action";
import { Button } from "@/components/ui/button";
import { toast } from "sonner";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
@@ -23,8 +17,14 @@ import {
TableHeader,
TableRow,
} from "@/components/ui/table";
import { SetupServer } from "./setup-server";
import { api } from "@/utils/api";
import { format } from "date-fns";
import { KeyIcon, MoreHorizontal, ServerIcon } from "lucide-react";
import Link from "next/link";
import { toast } from "sonner";
import { TerminalModal } from "../web-server/terminal-modal";
import { AddServer } from "./add-server";
import { SetupServer } from "./setup-server";
export const ShowServers = () => {
const { data, refetch } = api.server.all.useQuery();
const { mutateAsync } = api.server.remove.useMutation();

View File

@@ -124,7 +124,7 @@ export const WebServer = () => {
</DropdownMenuItem>
</ShowServerMiddlewareConfig>
<TerminalModal>
<TerminalModal serverId={""}>
<span>Enter the terminal</span>
</TerminalModal>
</DropdownMenuGroup>