direct-online/vito
2
0
Fork 0
mirror of https://github.com/vitodeploy/vito.git synced 2025-07-02 14:36:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Plugins base (#613)

Browse Source 
* wip

* wip

* cleanup

* notification channels

* phpstan

* services

* remove server types

* refactoring

* refactoring
This commit is contained in:
Saeed Vaziry
2025-06-14 14:35:18 +02:00
committed by GitHub
parent adc0653d15
commit 131b828807
311 changed files with 3976 additions and 2660 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
resources/js/components/server-switch.tsx
View File

@ -54,8 +54,8 @@ export function ServerSwitch() {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56" align="start">
{page.props.projectServers.length > 0 ? (
page.props.projectServers.map((server) => (
{page.props.project_servers.length > 0 ? (
page.props.project_servers.map((server) => (
<DropdownMenuCheckboxItem
key={`server-${server.id.toString()}`}
checked={selectedServer?.id === server.id}

8
resources/js/components/site-switch.tsx
View File

@ -28,7 +28,7 @@ export function SiteSwitch() {
siteHelper.storeSite(page.props.site);
}
if (storedSite && page.props.serverSites && !page.props.serverSites.find((site) => site.id === storedSite.id)) {
if (storedSite && page.props.server_sites && !page.props.server_sites.find((site) => site.id === storedSite.id)) {
siteHelper.storeSite();
}
@ -40,7 +40,7 @@ export function SiteSwitch() {
return (
page.props.server &&
page.props.serverSites && (
page.props.server_sites && (
<div className="flex items-center">
<DropdownMenu modal={false}>
<DropdownMenuTrigger asChild>
@ -67,8 +67,8 @@ export function SiteSwitch() {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56" align="start">
{page.props.serverSites.length > 0 ? (
page.props.serverSites.map((site) => (
{page.props.server_sites.length > 0 ? (
page.props.server_sites.map((site) => (
<DropdownMenuCheckboxItem
key={`site-${site.id.toString()}`}
checked={selectedSite?.id === site.id}

2
resources/js/components/ui/dialog.tsx
View File

@ -40,7 +40,7 @@ function DialogContent({ className, children, ...props }: React.ComponentProps<t
<DialogPrimitive.Content
data-slot="dialog-content"
className={cn(
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] overflow-x-hidden rounded-lg border shadow-lg duration-200 sm:max-w-lg',
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid max-h-screen w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] overflow-x-hidden rounded-lg border shadow-lg duration-200 sm:max-w-lg',
className,
)}
{...props}

35
resources/js/components/ui/dynamic-field.tsx
View File

@ -1,4 +1,4 @@
import { InputHTMLAttributes } from 'react';
import { InputHTMLAttributes, useEffect, useState } from 'react';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Switch } from '@/components/ui/switch';
@ -6,6 +6,7 @@ import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectVa
import { DynamicFieldConfig } from '@/types/dynamic-field-config';
import InputError from '@/components/ui/input-error';
import { FormField } from '@/components/ui/form';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
interface DynamicFieldProps {
value: string | number | boolean | string[] | undefined;
@ -17,17 +18,41 @@ interface DynamicFieldProps {
export default function DynamicField({ value, onChange, config, error }: DynamicFieldProps) {
const defaultLabel = config.name.replaceAll('_', ' ');
const label = config?.label || defaultLabel;
const [initialValue, setInitialValue] = useState(false);
if (!value) {
value = config?.default || '';
}
useEffect(() => {
if (!initialValue) {
if (config.type === 'checkbox') {
onChange((value as boolean) || false);
} else {
onChange(value);
}
setInitialValue(true);
}
}, [initialValue, setInitialValue, onChange, value, config]);
// Handle alert
if (config?.type === 'alert') {
return (
<FormField>
<Alert>
<AlertTitle>{config.label}</AlertTitle>
<AlertDescription>{config.description}</AlertDescription>
</Alert>
</FormField>
);
}
// Handle checkbox
if (config?.type === 'checkbox') {
return (
<FormField>
<div className="flex items-center space-x-2">
<Switch id={`switch-${config.name}`} checked={value as boolean} onCheckedChange={onChange} />
<Switch id={`switch-${config.name}`} defaultChecked={value as boolean} onCheckedChange={onChange} />
<Label htmlFor={`switch-${config.name}`}>{label}</Label>
{config.description && <p className="text-muted-foreground text-xs">{config.description}</p>}
<InputError message={error} />
@ -40,11 +65,11 @@ export default function DynamicField({ value, onChange, config, error }: Dynamic
if (config?.type === 'select' && config.options) {
return (
<FormField>
<Label htmlFor={config.name} className="capitalize">
<Label htmlFor={`field-${config.name}`} className="capitalize">
{label}
</Label>
<Select defaultValue={value as string} onValueChange={onChange}>
<SelectTrigger id={config.name}>
<SelectTrigger id={`field-${config.name}`}>
<SelectValue placeholder={config.placeholder || `Select ${label}`} />
</SelectTrigger>
<SelectContent>
@ -71,7 +96,7 @@ export default function DynamicField({ value, onChange, config, error }: Dynamic
return (
<FormField>
<Label htmlFor={config.name} className="capitalize">
<Label htmlFor={`field-${config.name}`} className="capitalize">
{label}
</Label>
<Input

7
resources/js/layouts/app/layout.tsx
View File

@ -19,13 +19,6 @@ export default function Layout({
secondNavTitle?: string;
}>) {
const page = usePage<SharedData>();
// const [sidebarOpen, setSidebarOpen] = useState(
// (localStorage.getItem('sidebar') === 'true' || false) && !!(secondNavItems && secondNavItems.length > 0),
// );
// const sidebarOpenChange = (open: boolean) => {
// setSidebarOpen(open);
// localStorage.setItem('sidebar', String(open));
// };
if (page.props.flash && page.props.flash.success) {
toast(

7
resources/js/layouts/server/layout.tsx
View File

@ -1,5 +1,6 @@
import { type NavItem } from '@/types';
import {
BoxIcon,
ChartLineIcon,
ClockIcon,
CloudIcon,
@ -59,6 +60,7 @@ export default function ServerLayout({ children }: { children: ReactNode }) {
href: route('databases', { server: page.props.server.id }),
icon: DatabaseIcon,
isDisabled: isMenuDisabled,
hidden: !page.props.server.services['database'],
children: [
{
title: 'Databases',
@ -98,6 +100,11 @@ export default function ServerLayout({ children }: { children: ReactNode }) {
onlyActivePath: route('application', { server: page.props.server.id, site: site.id }),
icon: RocketIcon,
},
{
title: 'Features',
href: route('site-features', { server: page.props.server.id, site: site.id }),
icon: BoxIcon,
},
{
title: 'Commands',
href: route('commands', { server: page.props.server.id, site: site.id }),

47
resources/js/pages/notification-channels/components/connect-notification-channel.tsx
View File

@ -19,6 +19,8 @@ import { Form, FormField, FormFields } from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { SharedData } from '@/types';
import { Checkbox } from '@/components/ui/checkbox';
import { DynamicFieldConfig } from '@/types/dynamic-field-config';
import DynamicField from '@/components/ui/dynamic-field';
type NotificationChannelForm = {
provider: string;
@ -27,12 +29,10 @@ type NotificationChannelForm = {
};
export default function ConnectNotificationChannel({
providers,
defaultProvider,
onProviderAdded,
children,
}: {
providers: string[];
defaultProvider?: string;
onProviderAdded?: () => void;
children: ReactNode;
@ -62,7 +62,7 @@ export default function ConnectNotificationChannel({
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl">
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
<DialogHeader>
<DialogTitle>Connect to notification channel</DialogTitle>
<DialogDescription className="sr-only">Connect to a new notification channel</DialogDescription>
@ -83,9 +83,9 @@ export default function ConnectNotificationChannel({
</SelectTrigger>
<SelectContent>
<SelectGroup>
{providers.map((provider) => (
<SelectItem key={provider} value={provider}>
{provider}
{Object.entries(page.props.configs.notification_channel.providers).map(([key, provider]) => (
<SelectItem key={key} value={key}>
{provider.label}
</SelectItem>
))}
</SelectGroup>
@ -105,29 +105,18 @@ export default function ConnectNotificationChannel({
/>
<InputError message={form.errors.name} />
</FormField>
<div
className={
page.props.configs.notification_channels_providers_custom_fields[form.data.provider].length > 1
? 'grid grid-cols-2 items-start gap-6'
: ''
}
>
{page.props.configs.notification_channels_providers_custom_fields[form.data.provider]?.map((item: string) => (
<FormField key={item}>
<Label htmlFor={item} className="capitalize">
{item.replaceAll('_', ' ')}
</Label>
<Input
type="text"
name={item}
id={item}
value={(form.data[item as keyof NotificationChannelForm] as string) ?? ''}
onChange={(e) => form.setData(item as keyof NotificationChannelForm, e.target.value)}
/>
<InputError message={form.errors[item as keyof NotificationChannelForm]} />
</FormField>
))}
</div>
{page.props.configs.notification_channel.providers[form.data.provider]?.form?.map((field: DynamicFieldConfig) => (
<DynamicField
key={`field-${field.name}`}
/*@ts-expect-error dynamic types*/
value={form.data[field.name]}
/*@ts-expect-error dynamic types*/
onChange={(value) => form.setData(field.name, value)}
config={field}
/*@ts-expect-error dynamic types*/
error={form.errors[field.name]}
/>
))}
<FormField>
<div className="flex items-center space-x-3">
<Checkbox id="global" name="global" checked={form.data.global} onClick={() => form.setData('global', !form.data.global)} />

2
resources/js/pages/notification-channels/index.tsx
View File

@ -24,7 +24,7 @@ export default function NotificationChannels() {
<div className="flex items-start justify-between">
<Heading title="Notification Channels" description="Here you can manage all of the notification channel connectinos" />
<div className="flex items-center gap-2">
<ConnectNotificationChannel providers={page.props.configs.notification_channels_providers}>
<ConnectNotificationChannel>
<Button>Connect</Button>
</ConnectNotificationChannel>
</div>

7
resources/js/pages/php/components/extensions.tsx
View File

@ -30,6 +30,7 @@ export default function Extensions({ service }: { service: Service }) {
extension: '',
version: service.version,
});
const [, php] = Object.entries(page.props.configs.service.services).filter(([key]) => key === 'php')[0] || null;
const submit = (e: FormEvent) => {
e.preventDefault();
@ -40,6 +41,10 @@ export default function Extensions({ service }: { service: Service }) {
});
};
if (!php) {
return null;
}
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
@ -60,7 +65,7 @@ export default function Extensions({ service }: { service: Service }) {
</SelectTrigger>
<SelectContent>
<SelectGroup>
{page.props.configs.php_extensions.map((extension: string) => (
{php.data?.extensions?.map((extension: string) => (
<SelectItem key={`extension-${extension}`} value={extension} disabled={service.type_data.extensions?.includes(extension)}>
{extension} {service.type_data.extensions?.includes(extension) && <span>(installed)</span>}
</SelectItem>

43
resources/js/pages/server-providers/components/connect-server-provider.tsx
View File

@ -19,6 +19,8 @@ import { Form, FormField, FormFields } from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { SharedData } from '@/types';
import { Checkbox } from '@/components/ui/checkbox';
import { DynamicFieldConfig } from '@/types/dynamic-field-config';
import DynamicField from '@/components/ui/dynamic-field';
type ServerProviderForm = {
provider: string;
@ -81,11 +83,11 @@ export default function ConnectServerProvider({
</SelectTrigger>
<SelectContent>
<SelectGroup>
{page.props.configs.server_providers.map(
(provider) =>
provider !== 'custom' && (
<SelectItem key={provider} value={provider}>
{provider}
{Object.entries(page.props.configs.server_provider.providers).map(
([key, provider]) =>
key !== 'custom' && (
<SelectItem key={key} value={key}>
{provider.label}
</SelectItem>
),
)}
@ -106,25 +108,18 @@ export default function ConnectServerProvider({
/>
<InputError message={form.errors.name} />
</FormField>
<div
className={page.props.configs.server_providers_custom_fields[form.data.provider].length > 1 ? 'grid grid-cols-2 items-start gap-6' : ''}
>
{page.props.configs.server_providers_custom_fields[form.data.provider]?.map((item: string) => (
<FormField key={item}>
<Label htmlFor={item} className="capitalize">
{item.replaceAll('_', ' ')}
</Label>
<Input
type="text"
name={item}
id={item}
value={(form.data[item as keyof ServerProviderForm] as string) ?? ''}
onChange={(e) => form.setData(item as keyof ServerProviderForm, e.target.value)}
/>
<InputError message={form.errors[item as keyof ServerProviderForm]} />
</FormField>
))}
</div>
{page.props.configs.server_provider.providers[form.data.provider]?.form?.map((field: DynamicFieldConfig) => (
<DynamicField
key={`field-${field.name}`}
/*@ts-expect-error dynamic types*/
value={form.data[field.name]}
/*@ts-expect-error dynamic types*/
onChange={(value) => form.setData(field.name, value)}
config={field}
/*@ts-expect-error dynamic types*/
error={form.errors[field.name]}
/>
))}
<FormField>
<div className="flex items-center space-x-3">
<Checkbox id="global" name="global" checked={form.data.global} onClick={() => form.setData('global', !form.data.global)} />

75
resources/js/pages/servers/components/create-server.tsx
View File

@ -23,9 +23,6 @@ type CreateServerForm = {
port: number;
region: string;
plan: string;
webserver: string;
database: string;
php: string;
};
export default function CreateServer({ children }: { children: React.ReactNode }) {
@ -40,9 +37,6 @@ export default function CreateServer({ children }: { children: React.ReactNode }
port: 22,
region: '',
plan: '',
webserver: 'nginx',
database: 'none',
php: 'none',
});
const submit: FormEventHandler = (e) => {
@ -52,7 +46,7 @@ export default function CreateServer({ children }: { children: React.ReactNode }
const [copySuccess, setCopySuccess] = useState(false);
const copyToClipboard = () => {
navigator.clipboard.writeText(page.props.publicKeyText).then(() => {
navigator.clipboard.writeText(page.props.public_key_text).then(() => {
setCopySuccess(true);
setTimeout(() => {
setCopySuccess(false);
@ -119,9 +113,9 @@ export default function CreateServer({ children }: { children: React.ReactNode }
</SelectTrigger>
<SelectContent>
<SelectGroup>
{page.props.configs.server_providers.map((provider) => (
<SelectItem key={provider} value={provider}>
{provider}
{Object.entries(page.props.configs.server_provider.providers).map(([key, provider]) => (
<SelectItem key={key} value={key}>
{provider.label}
</SelectItem>
))}
</SelectGroup>
@ -218,10 +212,10 @@ export default function CreateServer({ children }: { children: React.ReactNode }
variant="outline"
id="public_key"
type="button"
value={page.props.publicKeyText}
value={page.props.public_key_text}
className="justify-between truncate font-normal"
>
<span className="w-full max-w-2/3 overflow-x-hidden overflow-ellipsis">{page.props.publicKeyText}</span>
<span className="w-full max-w-2/3 overflow-x-hidden overflow-ellipsis">{page.props.public_key_text}</span>
{copySuccess ? <ClipboardCheckIcon size={5} className="text-success!" /> : <ClipboardIcon size={5} />}
</Button>
</FormField>
@ -275,63 +269,6 @@ export default function CreateServer({ children }: { children: React.ReactNode }
</FormField>
</div>
)}
<div className="grid grid-cols-3 items-start gap-6">
<FormField>
<Label htmlFor="webserver">Webserver</Label>
<Select value={form.data.webserver} onValueChange={(value) => form.setData('webserver', value)}>
<SelectTrigger id="webserver">
<SelectValue placeholder="Select webserver" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
{page.props.configs.webservers.map((value) => (
<SelectItem key={`webserver-${value}`} value={value}>
{value}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
<InputError message={form.errors.webserver} />
</FormField>
<FormField>
<Label htmlFor="database">Database</Label>
<Select value={form.data.database} onValueChange={(value) => form.setData('database', value)}>
<SelectTrigger id="database">
<SelectValue placeholder="Select database" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
{page.props.configs.databases.map((value) => (
<SelectItem key={`database-${value}`} value={value}>
{value}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
<InputError message={form.errors.database} />
</FormField>
<FormField>
<Label htmlFor="php">PHP</Label>
<Select value={form.data.php} onValueChange={(value) => form.setData('php', value)}>
<SelectTrigger id="php">
<SelectValue placeholder="Select PHP version" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
{page.props.configs.php_versions.map((value) => (
<SelectItem key={`php-${value}`} value={value}>
{value}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
<InputError message={form.errors.php} />
</FormField>
</div>
</FormFields>
</Form>
<SheetFooter>

8
resources/js/pages/services/components/action.tsx
View File

@ -15,6 +15,7 @@ import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
import { Button } from '@/components/ui/button';
import { LoaderCircleIcon } from 'lucide-react';
import FormSuccessful from '@/components/form-successful';
import InputError from '@/components/ui/input-error';
export function Action({ type, service }: { type: 'start' | 'stop' | 'restart' | 'enable' | 'disable'; service: Service }) {
const [open, setOpen] = useState(false);
@ -41,7 +42,12 @@ export function Action({ type, service }: { type: 'start' | 'stop' | 'restart' |
</DialogTitle>
<DialogDescription className="sr-only">{type} service</DialogDescription>
</DialogHeader>
<p className="p-4">Are you sure you want to {type} the service?</p>
<div className="space-y-2 p-4">
<p>Are you sure you want to {type} the service?</p>
{Object.entries(form.errors).map(([key, value]) => (
<InputError key={key} message={value} />
))}
</div>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>

6
resources/js/pages/services/components/install.tsx
View File

@ -73,9 +73,9 @@ export default function InstallService({ name, children }: { name?: string; chil
</SelectTrigger>
<SelectContent>
<SelectGroup>
{Object.entries(page.props.configs.service_types).map(([key]) => (
{Object.entries(page.props.configs.service.services).map(([key, service]) => (
<SelectItem key={`service-${key}`} value={key}>
{key}
{service.label}
</SelectItem>
))}
</SelectGroup>
@ -95,7 +95,7 @@ export default function InstallService({ name, children }: { name?: string; chil
<SelectContent>
<SelectGroup>
{form.data.name &&
page.props.configs.service_versions[form.data.name].map((version) => (
page.props.configs.service.services[form.data.name].versions.map((version) => (
<SelectItem key={`version-${form.data.name}-${version}`} value={version}>
{version}
</SelectItem>

94
resources/js/pages/site-features/components/feature-action.tsx Normal file
View File

@ -0,0 +1,94 @@
import { Site, SiteFeatureAction } from '@/types/site';
import React, { FormEvent, ReactNode, useState } from 'react';
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';
import { Form, FormField, FormFields } from '@/components/ui/form';
import { Button } from '@/components/ui/button';
import { useForm } from '@inertiajs/react';
import { DynamicFieldConfig } from '@/types/dynamic-field-config';
import DynamicField from '@/components/ui/dynamic-field';
import { LoaderCircleIcon } from 'lucide-react';
export default function FeatureAction({
site,
featureId,
actionId,
action,
children,
}: {
site: Site;
featureId: string;
actionId: string;
action: SiteFeatureAction;
children: ReactNode;
}) {
const [open, setOpen] = useState(false);
const form = useForm();
const submit = (e: FormEvent) => {
e.preventDefault();
form.post(
route('site-features.action', {
server: site.server_id,
site: site.id,
feature: featureId,
action: actionId,
}),
{
onSuccess: () => {
setOpen(false);
form.reset();
},
},
);
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent className="sm:max-w-xl">
<DialogHeader>
<DialogTitle>{action.label}</DialogTitle>
<DialogDescription className="sr-only">action {action.label}</DialogDescription>
</DialogHeader>
<Form id="action-form" onSubmit={submit} className="p-4">
<FormFields>
<FormField>
<p className="text-muted-foreground">
You're performing action <b className="text-foreground">[{action.label}]</b> on site{' '}
<b className="text-foreground">[{site.domain}]</b>
</p>
</FormField>
{action.form?.map((field: DynamicFieldConfig) => (
<DynamicField
key={`field-${field.name}`}
/*@ts-expect-error dynamic types*/
value={form.data[field.name]}
onChange={(value) => form.setData(field.name, value)}
config={field}
error={form.errors[field.name]}
/>
))}
</FormFields>
</Form>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button form="action-form" disabled={form.processing} onClick={submit}>
{form.processing && <LoaderCircleIcon className="animate-spin" />}
{action.label}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}

83
resources/js/pages/site-features/index.tsx Normal file
View File

@ -0,0 +1,83 @@
import { Head, usePage } from '@inertiajs/react';
import { Server } from '@/types/server';
import Container from '@/components/container';
import HeaderContainer from '@/components/header-container';
import Heading from '@/components/heading';
import { Button } from '@/components/ui/button';
import ServerLayout from '@/layouts/server/layout';
import { BookOpenIcon, MoreVerticalIcon } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import React from 'react';
import { Site, SiteFeature } from '@/types/site';
import { Separator } from '@/components/ui/separator';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import FeatureAction from '@/pages/site-features/components/feature-action';
export default function SiteFeatures() {
const page = usePage<{
server: Server;
site: Site;
features: {
[key: string]: SiteFeature;
};
}>();
return (
<ServerLayout>
<Head title={`Features - ${page.props.site.domain}`} />
<Container className="max-w-5xl">
<HeaderContainer>
<Heading title="Features" description="Your site has some features enabled by Vito or other plugins" />
<div className="flex items-center gap-2">
<a href="https://vitodeploy.com/docs/sites/features" target="_blank">
<Button variant="outline">
<BookOpenIcon />
<span className="hidden lg:block">Docs</span>
</Button>
</a>
</div>
</HeaderContainer>
<Card>
<CardHeader className="flex-row items-center justify-between gap-2">
<div className="space-y-2">
<CardTitle>Site features</CardTitle>
<CardDescription>Here you can see the list of features and their actions</CardDescription>
</div>
</CardHeader>
<CardContent>
{Object.entries(page.props.features).map(([key, feature], index) => (
<div key={`feature-${key}`}>
<div className="flex items-center justify-between p-4">
<div className="space-y-1">
<p>{feature.label}</p>
<p className="text-muted-foreground text-sm">{feature.description}</p>
</div>
<DropdownMenu modal={false}>
<DropdownMenuTrigger asChild>
<Button variant="outline">
Actions
<MoreVerticalIcon />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{Object.entries(feature.actions || {}).map(([actionKey, action]) => (
<FeatureAction key={`action-${actionKey}`} site={page.props.site} featureId={key} actionId={actionKey} action={action}>
<DropdownMenuItem onSelect={(e) => e.preventDefault()} disabled={!action.active}>
{action.label}
</DropdownMenuItem>
</FeatureAction>
))}
</DropdownMenuContent>
</DropdownMenu>
</div>
{index < Object.keys(page.props.features).length - 1 && <Separator />}
</div>
))}
</CardContent>
</Card>
</Container>
</ServerLayout>
);
}

2
resources/js/pages/site-settings/components/vhost.tsx
View File

@ -25,7 +25,7 @@ export default function VHost({ site, children }: { site: Site; children: ReactN
const submit = (e: FormEvent) => {
e.preventDefault();
form.patch(route('site-settings.update-vhost', { server: site.server_id, site: site.id }), {
form.put(route('site-settings.update-vhost', { server: site.server_id, site: site.id }), {
onSuccess: () => {
setOpen(false);
},

19
resources/js/pages/sites/components/create-site.tsx
View File

@ -25,7 +25,6 @@ type CreateSiteForm = {
php_version: string;
source_control: string;
user: string;
port: string;
};
export default function CreateSite({ server, children }: { server?: Server; children: ReactNode }) {
@ -40,7 +39,6 @@ export default function CreateSite({ server, children }: { server?: Server; chil
php_version: '',
source_control: '',
user: '',
port: '',
});
const submit: FormEventHandler = (e) => {
@ -121,9 +119,9 @@ export default function CreateSite({ server, children }: { server?: Server; chil
</SelectTrigger>
<SelectContent>
<SelectGroup>
{page.props.configs.site_types.map((type) => (
<SelectItem key={`type-${type}`} value={type}>
{type}
{Object.entries(page.props.configs.site.types).map(([key, type]) => (
<SelectItem key={`type-${key}`} value={key}>
{type.label}
</SelectItem>
))}
</SelectGroup>
@ -156,16 +154,7 @@ export default function CreateSite({ server, children }: { server?: Server; chil
<InputError message={form.errors.aliases} />
</FormField>
<FormField>
<Label htmlFor="port">Reverse proxy port</Label>
<Input id="port" type="text" value={form.data.port} onChange={(e) => form.setData('port', e.target.value)} placeholder="3000" />
<p className="text-muted-foreground text-xs">
This port will be used for reverse proxying the site. It should be unique across all sites on the server.
</p>
<InputError message={form.errors.port} />
</FormField>
{page.props.configs.site_types_custom_fields[form.data.type].map((config) => getFormField(config))}
{page.props.configs.site.types[form.data.type].form?.map((config) => getFormField(config))}
<FormField>
<Label htmlFor="user">Isolated User (Optional)</Label>

6
resources/js/pages/source-controls/components/columns.tsx
View File

@ -33,7 +33,11 @@ function Edit({ sourceControl }: { sourceControl: SourceControl }) {
const submit = (e: FormEvent) => {
e.preventDefault();
form.patch(route('source-controls.update', sourceControl.id));
form.patch(route('source-controls.update', sourceControl.id), {
onSuccess: () => {
setOpen(false);
},
});
};
return (
<Dialog open={open} onOpenChange={setOpen}>

33
resources/js/pages/source-controls/components/connect-source-control.tsx
View File

@ -19,6 +19,8 @@ import { Form, FormField, FormFields } from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { SharedData } from '@/types';
import { Checkbox } from '@/components/ui/checkbox';
import { DynamicFieldConfig } from '@/types/dynamic-field-config';
import DynamicField from '@/components/ui/dynamic-field';
type SourceControlForm = {
provider: string;
@ -81,9 +83,9 @@ export default function ConnectSourceControl({
</SelectTrigger>
<SelectContent>
<SelectGroup>
{page.props.configs.source_control_providers.map((provider) => (
<SelectItem key={provider} value={provider}>
{provider}
{Object.entries(page.props.configs.source_control.providers).map(([key, provider]) => (
<SelectItem key={key} value={key}>
{provider.label}
</SelectItem>
))}
</SelectGroup>
@ -103,20 +105,17 @@ export default function ConnectSourceControl({
/>
<InputError message={form.errors.name} />
</FormField>
{page.props.configs.source_control_providers_custom_fields[form.data.provider]?.map((item: string) => (
<FormField key={item}>
<Label htmlFor={item} className="capitalize">
{item}
</Label>
<Input
type="text"
name={item}
id={item}
value={(form.data[item as keyof SourceControlForm] as string) ?? ''}
onChange={(e) => form.setData(item as keyof SourceControlForm, e.target.value)}
/>
<InputError message={form.errors[item as keyof SourceControlForm]} />
</FormField>
{page.props.configs.source_control.providers[form.data.provider]?.form?.map((field: DynamicFieldConfig) => (
<DynamicField
key={`field-${field.name}`}
/*@ts-expect-error dynamic types*/
value={form.data[field.name]}
/*@ts-expect-error dynamic types*/
onChange={(value) => form.setData(field.name, value)}
config={field}
/*@ts-expect-error dynamic types*/
error={form.errors[field.name]}
/>
))}
<FormField>
<div className="flex items-center space-x-3">

47
resources/js/pages/storage-providers/components/connect-storage-provider.tsx
View File

@ -19,6 +19,8 @@ import { Form, FormField, FormFields } from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { SharedData } from '@/types';
import { Checkbox } from '@/components/ui/checkbox';
import { DynamicFieldConfig } from '@/types/dynamic-field-config';
import DynamicField from '@/components/ui/dynamic-field';
type StorageProviderForm = {
provider: string;
@ -40,7 +42,7 @@ export default function ConnectStorageProvider({
const page = usePage<SharedData>();
const form = useForm<Required<StorageProviderForm>>({
provider: defaultProvider || 's3',
provider: defaultProvider || 'local',
name: '',
global: false,
});
@ -60,7 +62,7 @@ export default function ConnectStorageProvider({
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl">
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
<DialogHeader>
<DialogTitle>Connect to storage provider</DialogTitle>
<DialogDescription className="sr-only">Connect to a new storage provider</DialogDescription>
@ -81,9 +83,9 @@ export default function ConnectStorageProvider({
</SelectTrigger>
<SelectContent>
<SelectGroup>
{page.props.configs.storage_providers.map((provider) => (
<SelectItem key={provider} value={provider}>
{provider}
{Object.entries(page.props.configs.storage_provider.providers).map(([key, provider]) => (
<SelectItem key={key} value={key}>
{provider.label}
</SelectItem>
))}
</SelectGroup>
@ -95,7 +97,7 @@ export default function ConnectStorageProvider({
<Label htmlFor="name">Name</Label>
<Input
type="text"
name="name"
name="host"
id="name"
placeholder="Name"
value={form.data.name}
@ -103,27 +105,18 @@ export default function ConnectStorageProvider({
/>
<InputError message={form.errors.name} />
</FormField>
<div
className={
page.props.configs.storage_providers_custom_fields[form.data.provider].length > 1 ? 'grid grid-cols-2 items-start gap-6' : ''
}
>
{page.props.configs.storage_providers_custom_fields[form.data.provider]?.map((item: string) => (
<FormField key={item}>
<Label htmlFor={item} className="capitalize">
{item.replaceAll('_', ' ')}
</Label>
<Input
type="text"
name={item}
id={item}
value={(form.data[item as keyof StorageProviderForm] as string) ?? ''}
onChange={(e) => form.setData(item as keyof StorageProviderForm, e.target.value)}
/>
<InputError message={form.errors[item as keyof StorageProviderForm]} />
</FormField>
))}
</div>
{page.props.configs.storage_provider.providers[form.data.provider]?.form?.map((field: DynamicFieldConfig) => (
<DynamicField
key={`field-${field.name}`}
/*@ts-expect-error dynamic types*/
value={form.data[field.name]}
/*@ts-expect-error dynamic types*/
onChange={(value) => form.setData(field.name, value)}
config={field}
/*@ts-expect-error dynamic types*/
error={form.errors[field.name]}
/>
))}
<FormField>
<div className="flex items-center space-x-3">
<Checkbox id="global" name="global" checked={form.data.global} onClick={() => form.setData('global', !form.data.global)} />

24
resources/js/pages/workers/components/columns.tsx
View File

@ -139,6 +139,12 @@ function Logs({ worker }: { worker: Worker }) {
}
export const columns: ColumnDef<Worker>[] = [
{
accessorKey: 'name',
header: 'Name',
enableColumnFilter: true,
enableSorting: true,
},
{
accessorKey: 'command',
header: 'Command',
@ -154,24 +160,6 @@ export const columns: ColumnDef<Worker>[] = [
enableColumnFilter: true,
enableSorting: true,
},
{
accessorKey: 'auto_start',
header: 'Auto start',
enableColumnFilter: true,
enableSorting: true,
cell: ({ row }) => {
return <Badge variant={row.original.auto_start ? 'success' : 'outline'}>{row.original.auto_start ? 'Yes' : 'No'}</Badge>;
},
},
{
accessorKey: 'auto_restart',
header: 'Auto restart',
enableColumnFilter: true,
enableSorting: true,
cell: ({ row }) => {
return <Badge variant={row.original.auto_restart ? 'success' : 'outline'}>{row.original.auto_restart ? 'Yes' : 'No'}</Badge>;
},
},
{
accessorKey: 'numprocs',
header: 'Numprocs',

9
resources/js/pages/workers/components/form.tsx
View File

@ -27,12 +27,14 @@ export default function WorkerForm({ serverId, site, worker, children }: { serve
const page = usePage<SharedData & { server: Server }>();
const [open, setOpen] = useState(false);
const form = useForm<{
name: string;
command: string;
user: string;
auto_start: boolean;
auto_restart: boolean;
numprocs: string;
}>({
name: worker?.name || '',
command: worker?.command || '',
user: worker?.user || '',
auto_start: worker?.auto_start || true,
@ -69,6 +71,13 @@ export default function WorkerForm({ serverId, site, worker, children }: { serve
</DialogHeader>
<Form id="worker-form" onSubmit={submit} className="p-4">
<FormFields>
{/*name*/}
<FormField>
<Label htmlFor="name">Name</Label>
<Input type="text" id="name" value={form.data.name} onChange={(e) => form.setData('name', e.target.value)} />
<InputError message={form.errors.name} />
</FormField>
{/*command*/}
<FormField>
<Label htmlFor="command">Command</Label>

2
resources/js/types/dynamic-field-config.d.ts vendored
View File

@ -1,5 +1,5 @@
export interface DynamicFieldConfig {
type: 'text' | 'select' | 'checkbox' | 'component';
type: 'text' | 'select' | 'checkbox' | 'component' | 'alert';
name: string;
options?: string[];
placeholder?: string;

94
resources/js/types/index.d.ts vendored
View File

@ -3,7 +3,7 @@ import type { Config } from 'ziggy-js';
import type { Server } from '@/types/server';
import { Project } from '@/types/project';
import { User } from '@/types/user';
import { Site } from '@/types/site';
import { Site, SiteType } from '@/types/site';
import { DynamicFieldConfig } from './dynamic-field-config';
export interface Auth {
@ -34,42 +34,69 @@ export interface NavItem {
}
export interface Configs {
server_providers: string[];
server_providers_custom_fields: {
[provider: string]: string[];
};
source_control_providers: string[];
source_control_providers_custom_fields: {
[provider: string]: string[];
};
storage_providers: string[];
storage_providers_custom_fields: {
[provider: string]: string[];
};
notification_channels_providers: string[];
notification_channels_providers_custom_fields: {
[provider: string]: string[];
};
operating_systems: string[];
service_versions: {
[service: string]: string[];
};
service_types: {
[service: string]: string;
};
colors: string[];
webservers: string[];
databases: string[];
php_versions: string[];
site_types: string[];
site_types_custom_fields: {
[type: string]: DynamicFieldConfig[];
};
cronjob_intervals: {
[key: string]: string;
};
metrics_periods: string[];
php_extensions: string[];
server_provider: {
providers: {
[provider: string]: {
label: string;
handler: string;
form?: DynamicFieldConfig[];
};
};
};
storage_provider: {
providers: {
[provider: string]: {
label: string;
handler: string;
form?: DynamicFieldConfig[];
};
};
};
source_control: {
providers: {
[provider: string]: {
label: string;
handler: string;
form?: DynamicFieldConfig[];
};
};
};
notification_channel: {
providers: {
[channel: string]: {
label: string;
handler: string;
form?: DynamicFieldConfig[];
};
};
};
service: {
services: {
[name: string]: {
label: string;
type: string;
handler: string;
form?: DynamicFieldConfig[];
versions: string[];
data?: {
extensions?: string[];
};
};
};
};
site: {
types: {
[type: string]: SiteType;
};
};
[key: string]: unknown;
}
@ -79,13 +106,12 @@ export interface SharedData {
quote: { message: string; author: string };
auth: Auth;
ziggy: Config & { location: string };
sidebarOpen: boolean;
configs: Configs;
projectServers: Server[];
serverSites?: Site[];
project_servers: Server[];
server_sites?: Site[];
server?: Server;
site?: Site;
publicKeyText: string;
public_key_text: string;
flash?: {
success: string;
error: string;

24
resources/js/types/site.d.ts vendored
View File

@ -1,4 +1,5 @@
import { Server } from '@/types/server';
import { DynamicFieldConfig } from '@/types/dynamic-field-config';
export interface Site {
id: number;
@ -10,7 +11,6 @@ export interface Site {
method?: 'round-robin' | 'least-connections' | 'ip-hash';
[key: string]: unknown;
};
features: string[];
domain: string;
aliases?: string[];
web_directory: string;
@ -32,3 +32,25 @@ export interface Site {
[key: string]: unknown;
}
export interface SiteType {
label: string;
handler: string;
form?: DynamicFieldConfig[];
features?: SiteFeature[];
}
export interface SiteFeature {
label: string;
description?: string;
actions?: {
[key: string]: SiteFeatureAction;
};
}
export interface SiteFeatureAction {
label: string;
handler: string;
form?: DynamicFieldConfig[];
active?: boolean;
}

1
resources/js/types/worker.d.ts vendored
View File

@ -1,6 +1,7 @@
export interface Worker {
id: number;
server_id: number;
name: string;
command: string;
user: string;
auto_start: boolean;