v0.1.0 (#112)

* feat: add schema for registry and routes

* feat: add docker registry upload

* feat: add show cluster

* refactor: set the registry url in image in case we have a registry asociated

* feat: add update registry and fix the docker url markup

* chore: remove --advertise-ip on swarm script

* refactor: remove listen address of swarm initialize

* feat: add table to show nodes and add dropdown to add manager & workers

* refactor: improve interface for cluster

* refactor: improve UI

* feat: add experimental swarm settings

* refactor: remove comments

* refactor: prettify json of each setting

* refactor: add interface tooltip

* refactor: delete static form self registry

* refactor: allow to se a empty registry

* fix: remove text area warnings

* feat: add network swarm json

* refactor: update ui

* revert: go back to swarm init config

* refactor: remove initialization on server, only on setup script

* Update LICENSE.MD

* feat: appearance theme support system config

* refactor: remove logs

* fix(README-ru): hyperlink-ed docs url

* feat: (#107) webhook listener filter docker events based on image tag.

Fixes #107

* refactor: simplify comparison docker tags

* refactor: remove return in res status

* refactor: prevent to updates download automatically

* feat: support code editor (#105)

* feat: support code editor

* Update codeblock

* refactor: remove unused class

---------

Co-authored-by: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>

* fix: select the right image from sourcetype (#109)

* chore: bump minor version

---------

Co-authored-by: hehehai <riverhohai@gmail.com>
Co-authored-by: Bayram Tagiev <bayram.tagiev.a@gmail.com>
Co-authored-by: Paulo Santana <30875229+hikinine@users.noreply.github.com>

components/dashboard/settings/web-server/show-main-traefik-config.tsx

@@ -16,7 +16,6 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -24,6 +23,7 @@ import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { CodeEditor } from "@/components/shared/code-editor";
 import { validateAndFormatYAML } from "../../application/advanced/traefik/update-traefik-config";
 
 const UpdateMainTraefikConfigSchema = z.object({
@@ -105,8 +105,8 @@ export const ShowMainTraefikConfig = ({ children }: Props) => {
 									<FormItem className="relative">
 										<FormLabel>Traefik config</FormLabel>
 										<FormControl>
-											<Textarea
-												className="h-[35rem] font-mono"
+											<CodeEditor
+												wrapperClassName="h-[35rem] font-mono"
 												placeholder={`providers:
     docker:
         defaultRule: 'Host('dokploy.com')'

components/dashboard/settings/web-server/show-server-middleware-config.tsx

@@ -16,7 +16,6 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -24,6 +23,7 @@ import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { CodeEditor } from "@/components/shared/code-editor";
 import { validateAndFormatYAML } from "../../application/advanced/traefik/update-traefik-config";
 
 const UpdateServerMiddlewareConfigSchema = z.object({
@@ -98,7 +98,7 @@ export const ShowServerMiddlewareConfig = ({ children }: Props) => {
 					<form
 						id="hook-form-update-server-traefik-config"
 						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid w-full py-4 relative"
+						className="grid w-full py-4 relative overflow-auto"
 					>
 						<div className="flex flex-col">
 							<FormField
@@ -108,8 +108,8 @@ export const ShowServerMiddlewareConfig = ({ children }: Props) => {
 									<FormItem className="relative">
 										<FormLabel>Traefik config</FormLabel>
 										<FormControl>
-											<Textarea
-												className="h-[35rem] font-mono"
+											<CodeEditor
+												wrapperClassName="h-[35rem] font-mono"
 												placeholder={`http:
 routers:
     router-name:

components/dashboard/settings/web-server/show-server-traefik-config.tsx

@@ -16,7 +16,6 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -24,6 +23,7 @@ import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { CodeEditor } from "@/components/shared/code-editor";
 import { validateAndFormatYAML } from "../../application/advanced/traefik/update-traefik-config";
 
 const UpdateServerTraefikConfigSchema = z.object({
@@ -98,7 +98,7 @@ export const ShowServerTraefikConfig = ({ children }: Props) => {
 					<form
 						id="hook-form-update-server-traefik-config"
 						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid w-full py-4 relative"
+						className="grid w-full py-4 relative overflow-auto"
 					>
 						<div className="flex flex-col">
 							<FormField
@@ -108,8 +108,8 @@ export const ShowServerTraefikConfig = ({ children }: Props) => {
 									<FormItem className="relative">
 										<FormLabel>Traefik config</FormLabel>
 										<FormControl>
-											<Textarea
-												className="h-[35rem] font-mono"
+											<CodeEditor
+												wrapperClassName="h-[35rem] font-mono"
 												placeholder={`http:
 routers:
     router-name:

components/dashboard/settings/web-server/terminal-modal.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import type React from "react";
 import {
 	Dialog,
 	DialogContent,

components/dashboard/settings/web-server/update-server.tsx

@@ -0,0 +1,98 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { api } from "@/utils/api";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { RefreshCcw } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import Link from "next/link";
+import { UpdateWebServer } from "./update-webserver";
+
+export const UpdateServer = () => {
+	const [isUpdateAvailable, setIsUpdateAvailable] = useState<null | boolean>(
+		null,
+	);
+	const { mutateAsync: checkAndUpdateImage, isLoading } =
+		api.settings.checkAndUpdateImage.useMutation();
+	const [isOpen, setIsOpen] = useState(false);
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<Button variant="secondary">
+					<RefreshCcw className="h-4 w-4" />
+					Updates
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:m:max-w-lg ">
+				<DialogHeader>
+					<DialogTitle>Web Server Update</DialogTitle>
+					<DialogDescription>
+						Check new releases and update your dokploy
+					</DialogDescription>
+				</DialogHeader>
+
+				<div className="flex flex-col gap-4">
+					<span className="text-sm text-muted-foreground">
+						We suggest to update your dokploy to the latest version only if you:
+					</span>
+					<ul className="list-disc list-inside text-sm text-muted-foreground">
+						<li>Want to try the latest features</li>
+						<li>Some bug that is blocking to use some features</li>
+					</ul>
+					<AlertBlock type="info">
+						Please we recommend to see the latest version to see if there are
+						any breaking changes before updating. Go to{" "}
+						<Link
+							href="https://github.com/Dokploy/dokploy/releases"
+							target="_blank"
+							className="text-foreground"
+						>
+							Dokploy Releases
+						</Link>{" "}
+						to check the latest version.
+					</AlertBlock>
+
+					<div className="w-full flex flex-col gap-4">
+						{isUpdateAvailable === false && (
+							<div className="flex flex-col items-center gap-3">
+								<RefreshCcw className="size-6 self-center text-muted-foreground" />
+								<span className="text-sm text-muted-foreground">
+									You are using the latest version
+								</span>
+							</div>
+						)}
+						{isUpdateAvailable ? (
+							<UpdateWebServer />
+						) : (
+							<Button
+								className="w-full"
+								onClick={async () => {
+									await checkAndUpdateImage()
+										.then(async (e) => {
+											setIsUpdateAvailable(e);
+										})
+										.catch(() => {
+											setIsUpdateAvailable(false);
+											toast.error("Error to check updates");
+										});
+									toast.success("Check updates");
+								}}
+								isLoading={isLoading}
+							>
+								Check updates
+							</Button>
+						)}
+					</div>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

components/dashboard/settings/web-server/update-webserver.tsx

@@ -19,7 +19,11 @@ export const UpdateWebServer = () => {
 	return (
 		<AlertDialog>
 			<AlertDialogTrigger asChild>
-				<Button className="relative" variant="secondary" isLoading={isLoading}>
+				<Button
+					className="relative w-full"
+					variant="secondary"
+					isLoading={isLoading}
+				>
 					<span className="absolute -right-1 -top-2 flex h-3 w-3">
 						<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
 						<span className="relative inline-flex rounded-full h-3 w-3 bg-green-500" />