- {selectedTemplate.composeContent ? (
+ {templateStore.selectedTemplate.composeContent ? (
<>
{}}
width="100%"
height="100%"
@@ -4533,7 +1224,7 @@ function App() {
size="sm"
className="w-full sm:w-auto"
onClick={() => {
- copyToClipboard(selectedTemplate.composeContent);
+ copyToClipboard(templateStore.selectedTemplate.composeContent);
}}
>
@@ -4545,7 +1236,7 @@ function App() {
className="w-full sm:w-auto"
onClick={() => {
downloadFile(
- selectedTemplate.composeContent,
+ templateStore.selectedTemplate.composeContent,
"docker-compose.yml",
"text/yaml"
);
@@ -4572,8 +1263,8 @@ function App() {
size="sm"
className="w-full sm:w-auto"
onClick={() => {
- setTemplateDetailOpen(false);
- setTemplateStoreOpen(false);
+ templateStore.setTemplateDetailOpen(false);
+ templateStore.setTemplateStoreOpen(false);
}}
>
Cancel
@@ -4583,11 +1274,11 @@ function App() {
className="w-full sm:w-auto"
onClick={async () => {
try {
- await importTemplate(selectedTemplate);
- setTemplateDetailOpen(false);
- setTemplateStoreOpen(false);
+ await importTemplate(templateStore.selectedTemplate);
+ templateStore.setTemplateDetailOpen(false);
+ templateStore.setTemplateStoreOpen(false);
} catch (error: any) {
- setTemplateError(
+ templateStore.setTemplateError(
`Failed to import template: ${error.message}`
);
}
diff --git a/src/routes/scheduler-builder.tsx b/src/routes/scheduler-builder.tsx
index da48fde..599bc0c 100644
--- a/src/routes/scheduler-builder.tsx
+++ b/src/routes/scheduler-builder.tsx
@@ -193,8 +193,8 @@ ${serviceUnit}
}, [scheduleType, config.name]);
return (
-
-
+
+
diff --git a/src/types/vpn-configs.ts b/src/types/vpn-configs.ts
index 22070ea..07f9de0 100644
--- a/src/types/vpn-configs.ts
+++ b/src/types/vpn-configs.ts
@@ -16,6 +16,7 @@ export interface TailscaleConfig {
serveInternalPort: string;
servePath: string;
serveProtocol: "HTTPS" | "HTTP";
+ serveInsideProtocol: "http" | "https" | "https+insecure";
containerName: string;
enableHealthCheck: boolean;
healthCheckEndpoint: string;
@@ -73,4 +74,5 @@ export interface VPNConfig {
zerotier?: ZerotierConfig;
netbird?: NetbirdConfig;
servicesUsingVpn: string[]; // Service names that should use VPN
+ networks?: string[]; // Networks the VPN service should attach to
}
diff --git a/src/utils/default-configs.ts b/src/utils/default-configs.ts
index 9fc605e..c3ec22d 100644
--- a/src/utils/default-configs.ts
+++ b/src/utils/default-configs.ts
@@ -32,6 +32,7 @@ export function defaultTailscaleConfig(): TailscaleConfig {
serveInternalPort: "8080",
servePath: "/",
serveProtocol: "HTTPS",
+ serveInsideProtocol: "http",
// ScaleTail patterns - defaults
containerName: "",
enableHealthCheck: true,
diff --git a/src/utils/template-import.ts b/src/utils/template-import.ts
new file mode 100644
index 0000000..df2a190
--- /dev/null
+++ b/src/utils/template-import.ts
@@ -0,0 +1,388 @@
+import jsyaml from "js-yaml";
+import type { ServiceConfig, NetworkConfig, VolumeConfig } from "../types/compose";
+import { defaultService } from "./default-configs";
+
+export interface ParsedComposeData {
+ service: ServiceConfig;
+ networks: NetworkConfig[];
+ volumes: VolumeConfig[];
+}
+
+export interface ComposeServiceInput {
+ name: string;
+ image: string;
+ rawService: any;
+}
+
+/**
+ * Parses a Docker Compose service into our ServiceConfig format
+ */
+export function parseComposeService(
+ svc: ComposeServiceInput,
+ allNetworks?: Record,
+ allVolumes?: Record
+): ParsedComposeData {
+ const serviceData = svc.rawService || {};
+ const actualServiceData = serviceData.rawService || serviceData;
+
+ const parseCommandArray = (cmd: any): string => {
+ if (Array.isArray(cmd)) {
+ return JSON.stringify(cmd);
+ }
+ return cmd || "";
+ };
+
+ const newService: ServiceConfig = {
+ ...defaultService(),
+ name: svc.name,
+ image: svc.image,
+ container_name: actualServiceData.container_name || "",
+ command: parseCommandArray(actualServiceData.command),
+ restart: actualServiceData.restart || "",
+ ports: Array.isArray(actualServiceData.ports)
+ ? actualServiceData.ports.map((p: string) => {
+ // Handle format: "host:container/protocol" or "container/protocol" or just "container"
+ if (p.includes(":")) {
+ const parts = p.split(":");
+ const host = parts[0];
+ const containerWithProtocol = parts[1] || "";
+ const [container, protocol] = containerWithProtocol.split("/");
+ return {
+ host,
+ container,
+ protocol: protocol || "none",
+ };
+ } else {
+ // No colon means it's just a container port, possibly with protocol
+ const [container, protocol] = p.split("/");
+ return {
+ host: "",
+ container,
+ protocol: protocol || "none",
+ };
+ }
+ })
+ : [],
+ expose: Array.isArray(actualServiceData.expose)
+ ? actualServiceData.expose
+ : actualServiceData.expose
+ ? [String(actualServiceData.expose)]
+ : [],
+ volumes: Array.isArray(actualServiceData.volumes)
+ ? actualServiceData.volumes.map((v: any) => {
+ if (typeof v === "string") {
+ const parts = v.split(":");
+ const host = parts[0];
+ const container = parts[1] || "";
+ const read_only = parts[2] === "ro";
+ return { host, container, read_only };
+ } else if (typeof v === "object" && v !== null) {
+ return {
+ host: v.source || "",
+ container: v.target || "",
+ read_only: v.read_only || false,
+ };
+ }
+ return { host: "", container: "", read_only: false };
+ })
+ : [],
+ volumes_syntax:
+ Array.isArray(actualServiceData.volumes) &&
+ actualServiceData.volumes.length > 0 &&
+ typeof actualServiceData.volumes[0] === "object"
+ ? "dict"
+ : "array",
+ environment: Array.isArray(actualServiceData.environment)
+ ? actualServiceData.environment.map((e: string) => {
+ const [key, ...rest] = e.split("=");
+ return { key, value: rest.join("=") };
+ })
+ : actualServiceData.environment &&
+ typeof actualServiceData.environment === "object"
+ ? Object.entries(actualServiceData.environment).map(
+ ([key, value]: [string, any]) => ({ key, value: String(value) })
+ )
+ : [],
+ environment_syntax: Array.isArray(actualServiceData.environment)
+ ? "array"
+ : "dict",
+ healthcheck: actualServiceData.healthcheck
+ ? {
+ test: parseCommandArray(actualServiceData.healthcheck.test),
+ interval: actualServiceData.healthcheck.interval || "",
+ timeout: actualServiceData.healthcheck.timeout || "",
+ retries: actualServiceData.healthcheck.retries
+ ? String(actualServiceData.healthcheck.retries)
+ : "",
+ start_period: actualServiceData.healthcheck.start_period || "",
+ start_interval: actualServiceData.healthcheck.start_interval || "",
+ }
+ : undefined,
+ depends_on: Array.isArray(actualServiceData.depends_on)
+ ? actualServiceData.depends_on
+ : actualServiceData.depends_on
+ ? Object.keys(actualServiceData.depends_on)
+ : [],
+ entrypoint: parseCommandArray(actualServiceData.entrypoint),
+ env_file: Array.isArray(actualServiceData.env_file)
+ ? actualServiceData.env_file.join(",")
+ : actualServiceData.env_file || "",
+ extra_hosts: Array.isArray(actualServiceData.extra_hosts)
+ ? actualServiceData.extra_hosts
+ : [],
+ dns: Array.isArray(actualServiceData.dns) ? actualServiceData.dns : [],
+ networks: Array.isArray(actualServiceData.networks)
+ ? actualServiceData.networks
+ : actualServiceData.networks
+ ? Object.keys(actualServiceData.networks)
+ : [],
+ user: actualServiceData.user || "",
+ working_dir: actualServiceData.working_dir || "",
+ labels: actualServiceData.labels
+ ? Array.isArray(actualServiceData.labels)
+ ? actualServiceData.labels.map((l: string) => {
+ const [key, ...rest] = l.split("=");
+ return { key, value: rest.join("=") };
+ })
+ : Object.entries(actualServiceData.labels).map(
+ ([key, value]: [string, any]) => ({ key, value: String(value) })
+ )
+ : [],
+ privileged:
+ actualServiceData.privileged !== undefined
+ ? !!actualServiceData.privileged
+ : undefined,
+ read_only:
+ actualServiceData.read_only !== undefined
+ ? !!actualServiceData.read_only
+ : undefined,
+ shm_size: actualServiceData.shm_size || "",
+ security_opt: Array.isArray(actualServiceData.security_opt)
+ ? actualServiceData.security_opt
+ : [],
+ network_mode: actualServiceData.network_mode || "",
+ cap_add: Array.isArray(actualServiceData.cap_add)
+ ? actualServiceData.cap_add
+ : [],
+ cap_drop: Array.isArray(actualServiceData.cap_drop)
+ ? actualServiceData.cap_drop
+ : [],
+ sysctls:
+ actualServiceData.sysctls && typeof actualServiceData.sysctls === "object"
+ ? Array.isArray(actualServiceData.sysctls)
+ ? actualServiceData.sysctls.map((s: string) => {
+ const [key, value] = s.split("=");
+ return { key: key || "", value: value || "" };
+ })
+ : Object.entries(actualServiceData.sysctls).map(
+ ([key, value]: [string, any]) => ({
+ key,
+ value: String(value),
+ })
+ )
+ : [],
+ devices: Array.isArray(actualServiceData.devices)
+ ? actualServiceData.devices
+ : [],
+ tmpfs: Array.isArray(actualServiceData.tmpfs)
+ ? actualServiceData.tmpfs
+ : actualServiceData.tmpfs
+ ? Object.keys(actualServiceData.tmpfs).map(
+ (key) => `${key}:${actualServiceData.tmpfs[key] || ""}`
+ )
+ : [],
+ ulimits:
+ actualServiceData.ulimits &&
+ typeof actualServiceData.ulimits === "object"
+ ? Object.entries(actualServiceData.ulimits).map(
+ ([name, limit]: [string, any]) => ({
+ name,
+ soft:
+ limit && typeof limit === "object" && limit.soft
+ ? String(limit.soft)
+ : "",
+ hard:
+ limit && typeof limit === "object" && limit.hard
+ ? String(limit.hard)
+ : "",
+ })
+ )
+ : [],
+ init:
+ actualServiceData.init !== undefined ? !!actualServiceData.init : undefined,
+ stop_grace_period: actualServiceData.stop_grace_period || "",
+ stop_signal: actualServiceData.stop_signal || "",
+ tty:
+ actualServiceData.tty !== undefined ? !!actualServiceData.tty : undefined,
+ stdin_open:
+ actualServiceData.stdin_open !== undefined
+ ? !!actualServiceData.stdin_open
+ : undefined,
+ hostname: actualServiceData.hostname || "",
+ domainname: actualServiceData.domainname || "",
+ mac_address: actualServiceData.mac_address || "",
+ ipc_mode: actualServiceData.ipc || "",
+ pid: actualServiceData.pid || "",
+ uts: actualServiceData.uts || "",
+ cgroup_parent: actualServiceData.cgroup_parent || "",
+ isolation: actualServiceData.isolation || "",
+ deploy: actualServiceData.deploy?.resources
+ ? {
+ resources: {
+ limits: {
+ cpus:
+ actualServiceData.deploy.resources.limits?.cpus || undefined,
+ memory:
+ actualServiceData.deploy.resources.limits?.memory || undefined,
+ },
+ reservations: {
+ cpus:
+ actualServiceData.deploy.resources.reservations?.cpus ||
+ undefined,
+ memory:
+ actualServiceData.deploy.resources.reservations?.memory ||
+ undefined,
+ },
+ },
+ }
+ : undefined,
+ };
+
+ // Parse networks
+ const networkConfigs: NetworkConfig[] =
+ allNetworks && Object.keys(allNetworks).length > 0
+ ? Object.entries(allNetworks).map(([name, config]: [string, any]) => ({
+ name,
+ driver: config.driver || "",
+ driver_opts: config.driver_opts
+ ? Object.entries(config.driver_opts).map(
+ ([key, value]: [string, any]) => ({ key, value: String(value) })
+ )
+ : [],
+ attachable:
+ config.attachable !== undefined ? !!config.attachable : false,
+ labels: config.labels
+ ? Array.isArray(config.labels)
+ ? config.labels.map((l: string) => {
+ const [key, ...rest] = l.split("=");
+ return { key, value: rest.join("=") };
+ })
+ : Object.entries(config.labels).map(
+ ([key, value]: [string, any]) => ({
+ key,
+ value: String(value),
+ })
+ )
+ : [],
+ external: !!config.external,
+ name_external:
+ config.external && typeof config.external === "object"
+ ? config.external.name || ""
+ : "",
+ internal: config.internal !== undefined ? !!config.internal : false,
+ enable_ipv6:
+ config.enable_ipv6 !== undefined ? !!config.enable_ipv6 : false,
+ ipam: {
+ driver: config.ipam?.driver || "",
+ config: config.ipam?.config || [],
+ options: config.ipam?.options
+ ? Object.entries(config.ipam.options).map(
+ ([key, value]: [string, any]) => ({
+ key,
+ value: String(value),
+ })
+ )
+ : [],
+ },
+ }))
+ : [];
+
+ // Parse volumes
+ const volumeConfigs: VolumeConfig[] =
+ allVolumes && Object.keys(allVolumes).length > 0
+ ? Object.entries(allVolumes).map(([name, config]: [string, any]) => {
+ let driverOptsType = "";
+ let driverOptsDevice = "";
+ let driverOptsO = "";
+
+ if (config && config.driver_opts) {
+ driverOptsType = config.driver_opts.type || "";
+ driverOptsDevice = config.driver_opts.device || "";
+ driverOptsO = config.driver_opts.o || "";
+ }
+
+ return {
+ name,
+ driver: config && config.driver ? config.driver : "",
+ driver_opts:
+ config && config.driver_opts
+ ? Object.entries(config.driver_opts).map(
+ ([key, value]: [string, any]) => ({
+ key,
+ value: String(value),
+ })
+ )
+ : [],
+ labels:
+ config && config.labels
+ ? Array.isArray(config.labels)
+ ? config.labels.map((l: string) => {
+ const [key, ...rest] = l.split("=");
+ return { key, value: rest.join("=") };
+ })
+ : Object.entries(config.labels).map(
+ ([key, value]: [string, any]) => ({
+ key,
+ value: String(value),
+ })
+ )
+ : [],
+ external: !!config?.external,
+ name_external:
+ config?.external && typeof config.external === "object"
+ ? config.external.name || ""
+ : "",
+ driver_opts_type: driverOptsType,
+ driver_opts_device: driverOptsDevice,
+ driver_opts_o: driverOptsO,
+ };
+ })
+ : [];
+
+ return {
+ service: newService,
+ networks: networkConfigs,
+ volumes: volumeConfigs,
+ };
+}
+
+/**
+ * Parses a Docker Compose YAML template and returns all services, networks, and volumes
+ */
+export function parseComposeTemplate(composeContent: string): {
+ services: ComposeServiceInput[];
+ networks: Record;
+ volumes: Record;
+} {
+ const doc = jsyaml.load(composeContent) as any;
+
+ if (!doc || !doc.services) {
+ throw new Error("Invalid docker-compose.yml in template");
+ }
+
+ // Extract all services from compose file
+ const servicesArray: ComposeServiceInput[] = Object.entries(
+ doc.services
+ ).map(([svcName, svcObj]: [string, any]) => ({
+ name: svcName,
+ image: svcObj.image || "",
+ rawService: svcObj,
+ }));
+
+ return {
+ services: servicesArray,
+ networks: doc.networks || {},
+ volumes: doc.volumes || {},
+ };
+}
+
diff --git a/src/utils/vpn-generator.ts b/src/utils/vpn-generator.ts
index 0c6f9ef..034bbb2 100644
--- a/src/utils/vpn-generator.ts
+++ b/src/utils/vpn-generator.ts
@@ -9,16 +9,21 @@ export function generateTailscaleServeConfig(
internalPort: string,
path: string,
protocol: "HTTPS" | "HTTP",
- certDomain: string
+ certDomain: string,
+ insideProtocol: "http" | "https" | "https+insecure" = "http"
): string {
const config: any = {
TCP: {
[externalPort]: {
HTTPS: protocol === "HTTPS",
+ HTTP: protocol === "HTTP",
},
},
};
+ // Build proxy URL based on inside protocol
+ const proxyUrl = `${insideProtocol}://127.0.0.1:${internalPort}`;
+
if (protocol === "HTTPS") {
const certDomainKey = certDomain
? certDomain
@@ -27,17 +32,19 @@ export function generateTailscaleServeConfig(
[`${certDomainKey}:${externalPort}`]: {
Handlers: {
[path]: {
- Proxy: `http://127.0.0.1:${internalPort}`,
+ Proxy: proxyUrl,
},
},
},
};
} else {
- config.TCP[externalPort] = {
- HTTP: true,
- Handlers: {
- [path]: {
- Proxy: `http://127.0.0.1:${internalPort}`,
+ // HTTP mode: use Web section with localhost
+ config.Web = {
+ [`localhost:${externalPort}`]: {
+ Handlers: {
+ [path]: {
+ Proxy: proxyUrl,
+ },
},
},
};
@@ -58,6 +65,11 @@ export function generateVpnService(vpnConfig: VPNConfig | undefined): any {
restart: "always",
};
+ // Add selected networks
+ if (vpnConfig.networks && vpnConfig.networks.length > 0) {
+ service.networks = vpnConfig.networks;
+ }
+
switch (vpnConfig.type) {
case "tailscale": {
const ts = vpnConfig.tailscale!;
@@ -107,7 +119,10 @@ export function generateVpnService(vpnConfig: VPNConfig | undefined): any {
NEWT_ID: newt.newtId ? "${NEWT_ID}" : undefined,
NEWT_SECRET: newt.newtSecret ? "${NEWT_SECRET}" : undefined,
};
- service.networks = [newt.networkName];
+ service.networks = [
+ ...(service.networks || []),
+ newt.networkName
+ ];
Object.keys(service.environment).forEach(
(key) =>
service.environment[key] === undefined &&
@@ -148,7 +163,13 @@ export function generateVpnService(vpnConfig: VPNConfig | undefined): any {
const zt = vpnConfig.zerotier!;
service.image = "zerotier/zerotier:latest";
service.privileged = true;
- service.networks = ["host"];
+ service.networks = ["host"]; // ZeroTier needs host networking
+ // If host networking is used, we can't attach to other networks
+ if (vpnConfig.networks && vpnConfig.networks.length > 0) {
+ // Warning: ZeroTier uses host networking, ignoring selected networks
+ delete service.networks;
+ service.network_mode = "host";
+ }
service.volumes = [zt.identityPath + ":/var/lib/zerotier-one"];
service.environment = {
ZT_NC_NETWORK: zt.networkId ? "${ZT_NETWORK_ID}" : undefined,
diff --git a/src/utils/yaml-generator.ts b/src/utils/yaml-generator.ts
index 9e480f9..c81bf35 100644
--- a/src/utils/yaml-generator.ts
+++ b/src/utils/yaml-generator.ts
@@ -182,13 +182,13 @@ export function generateYaml(
: svc.networks && svc.networks.filter(Boolean).length
? svc.networks.filter(Boolean)
: undefined,
- user: svc.user ? `"${svc.user}"` : undefined,
+ user: svc.user || undefined,
working_dir: svc.working_dir || undefined,
labels:
svc.labels && svc.labels.filter((l) => l.key).length
? svc.labels
.filter((l) => l.key)
- .map(({ key, value }) => `"${key}=${value}"`)
+ .map(({ key, value }) => `${key}=${value}`)
: undefined,
privileged: svc.privileged !== undefined ? svc.privileged : undefined,
read_only: svc.read_only !== undefined ? svc.read_only : undefined,
@@ -331,7 +331,8 @@ export function generateYaml(
ts.serveInternalPort,
ts.servePath,
ts.serveProtocol,
- ts.certDomain
+ ts.certDomain,
+ ts.serveInsideProtocol || "http"
);
if (!compose.configs) {
@@ -373,7 +374,7 @@ export function generateYaml(
n.labels && n.labels.length
? n.labels
.filter((l) => l.key)
- .map(({ key, value }) => `"${key}=${value}"`)
+ .map(({ key, value }) => `${key}=${value}`)
: undefined,
ipam:
n.ipam.driver || n.ipam.config.length || n.ipam.options.length
@@ -436,7 +437,7 @@ export function generateYaml(
if (v.labels && v.labels.length) {
externalVolume.labels = v.labels
.filter((l) => l.key)
- .map(({ key, value }) => `"${key}=${value}"`);
+ .map(({ key, value }) => `${key}=${value}`);
}
compose.volumes[v.name] = externalVolume;
@@ -463,7 +464,7 @@ export function generateYaml(
v.labels && v.labels.length
? v.labels
.filter((l) => l.key)
- .map(({ key, value }) => `"${key}=${value}"`)
+ .map(({ key, value }) => `${key}=${value}`)
: undefined,
};
}