Fix UI, Add Environment variables support for container creation process.

- Create textarea for environment variables in createcontainer.gohtml.
- Add backend support for processing environment variables from textarea in cmdparams.go.
- Include environment variables in the container creation process in containers.go.
- Refactor HTML classes for better readability in createcontainer.gohtml.
- Simplify select options for protocol in createcontainer.gohtml.

commit: de5cd4b3ca0a87b02968b6653d4c06d999230718
author: bnema · 3y ago · 2023-10-04 15:08 UTC
parent: eb3ea65
signature: unsigned

3 files · +31 -13

M internal/templates/models/html/fragments/createcontainer.gohtml +19 -13

@@ -1,5 +1,6 @@
1	1		<div
2		-	class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 flex-grow" hx-ext="response-targets"
	2	+	class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 flex-grow"
	3	+	hx-ext="response-targets"
3	4		>
4	5		<!-- Left Side: Docker Run Options -->
5	6		<div class="flex-grow bg-slate-100 p-4 rounded-md">

@@ -54,12 +55,15 @@
54	55		<!-- Protocol -->
55	56		<div class="w-1/4">
56	57		<label class="block">Protocol</label>
57		-	<select name="container_protocol" class="w-full p-4 rounded-md border-2 bg-slate-200 border-gray-300">
58		-	<option value="https" {{if eq .ContainerProtocol "https"}}selected{{end}}>https</option>
59		-	<option value="http" {{if eq .ContainerProtocol "http"}}selected{{end}}>http</option>
	58	+	<select
	59	+	name="container_protocol"
	60	+	class="w-full p-4 rounded-md border-2 bg-slate-200 border-gray-300"
	61	+	>
	62	+	<option value="https">https</option>
	63	+	<option value="http">http</option>
60	64		</select>
61	65		</div>
62		-
	66	+
63	67		<!-- Subdomain -->
64	68		<div class="w-1/3">
65	69		<label class="block">Subdomain</label>

@@ -70,7 +74,7 @@
70	74		value="{{.ContainerSubdomain}}"
71	75		/>
72	76		</div>
73		-
	77	+
74	78		<!-- Domain -->
75	79		<div class="w-5/12">
76	80		<label class="block">Domain</label>

@@ -108,17 +112,16 @@
108	112		/>
109	113		</div>
110	114
111		-	<!-- Environment Variables
112	115		<div class="pb-4">
113	116		<label class="block">Environment variables</label>
114	117		<span class="text-gray-500">e.g. KEY=VALUE </span>
115		-	<input
116		-	type="text"
	118	+	<textarea
117	119		name="environment_variables"
118	120		class="w-full p-4 rounded-md"
119		-	value="{{.EnvironmentVariables}}"
120		-	/> -->
121		-
	121	+	rows="4"
	122	+	>{{.EnvironmentVariables}}</textarea
	123	+	>
	124	+	</div>
122	125		<!-- Restart: always/on-failure/only when stopped/never -->
123	126		<div class="pb-4">
124	127		<label class="block">Restart</label>

@@ -140,6 +143,9 @@
140	143		class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
141	144		/>
142	145		</form>
143		-	<div id="error-message-create-container-{{.ShortID}}" class="text-red-500"></div>
	146	+	<div
	147	+	id="error-message-create-container-{{.ShortID}}"
	148	+	class="text-red-500"
	149	+	></div>
144	150		</div>
145	151		</div>

@@ -1,5 +1,6 @@
1		<div	1		<div
2	-	class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 flex-grow" hx-ext="response-targets"	2	+	class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 flex-grow"
			3	+	hx-ext="response-targets"
3		>	4		>
4		<!-- Left Side: Docker Run Options -->	5		<!-- Left Side: Docker Run Options -->
5		<div class="flex-grow bg-slate-100 p-4 rounded-md">	6		<div class="flex-grow bg-slate-100 p-4 rounded-md">

@@ -54,12 +55,15 @@
54		<!-- Protocol -->	55		<!-- Protocol -->
55		<div class="w-1/4">	56		<div class="w-1/4">
56		<label class="block">Protocol</label>	57		<label class="block">Protocol</label>
57	-	<select name="container_protocol" class="w-full p-4 rounded-md border-2 bg-slate-200 border-gray-300">	58	+	<select
58	-	<option value="https" {{if eq .ContainerProtocol "https"}}selected{{end}}>https</option>	59	+	name="container_protocol"
59	-	<option value="http" {{if eq .ContainerProtocol "http"}}selected{{end}}>http</option>	60	+	class="w-full p-4 rounded-md border-2 bg-slate-200 border-gray-300"
			61	+	>
			62	+	<option value="https">https</option>
			63	+	<option value="http">http</option>
60		</select>	64		</select>
61		</div>	65		</div>
62	-		66	+
63		<!-- Subdomain -->	67		<!-- Subdomain -->
64		<div class="w-1/3">	68		<div class="w-1/3">
65		<label class="block">Subdomain</label>	69		<label class="block">Subdomain</label>

@@ -70,7 +74,7 @@
70		value="{{.ContainerSubdomain}}"	74		value="{{.ContainerSubdomain}}"
71		/>	75		/>
72		</div>	76		</div>
73	-		77	+
74		<!-- Domain -->	78		<!-- Domain -->
75		<div class="w-5/12">	79		<div class="w-5/12">
76		<label class="block">Domain</label>	80		<label class="block">Domain</label>

@@ -108,17 +112,16 @@
108		/>	112		/>
109		</div>	113		</div>
110			114
111	-	<!-- Environment Variables
112		<div class="pb-4">	115		<div class="pb-4">
113		<label class="block">Environment variables</label>	116		<label class="block">Environment variables</label>
114		<span class="text-gray-500">e.g. KEY=VALUE </span>	117		<span class="text-gray-500">e.g. KEY=VALUE </span>
115	-	<input	118	+	<textarea
116	-	type="text"
117		name="environment_variables"	119		name="environment_variables"
118		class="w-full p-4 rounded-md"	120		class="w-full p-4 rounded-md"
119	-	value="{{.EnvironmentVariables}}"	121	+	rows="4"
120	-	/> -->	122	+	>{{.EnvironmentVariables}}</textarea
121	-		123	+	>
			124	+	</div>
122		<!-- Restart: always/on-failure/only when stopped/never -->	125		<!-- Restart: always/on-failure/only when stopped/never -->
123		<div class="pb-4">	126		<div class="pb-4">
124		<label class="block">Restart</label>	127		<label class="block">Restart</label>

@@ -140,6 +143,9 @@
140		class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"	143		class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
141		/>	144		/>
142		</form>	145		</form>
143	-	<div id="error-message-create-container-{{.ShortID}}" class="text-red-500"></div>	146	+	<div
			147	+	id="error-message-create-container-{{.ShortID}}"
			148	+	class="text-red-500"
			149	+	></div>
144		</div>	150		</div>
145		</div>	151		</div>

M internal/templates/render/cmdparams.go +7 -0


@@ -13,6 +13,12 @@ func FromInputsToCmdParams(inputs map[string]string) (docker.ContainerCommandPar
13	13		volumeStr := inputs["volumes"]
14	14		volumeSlice := strings.Split(volumeStr, ",")
15	15
	16	+	// Retreive the content of the textarea environment_variables and create a slice of strings
	17	+	environmentStr := inputs["environment_variables"]
	18	+	environmentSlice := strings.Split(environmentStr, "\n")
	19	+
	20	+	fmt.Println("environmentSlice", environmentSlice)
	21	+
16	22		params := docker.ContainerCommandParams{
17	23		IsSSL: inputs["container_protocol"] == "https",
18	24		ContainerName: inputs["container_name"],

@@ -23,6 +29,7 @@ func FromInputsToCmdParams(inputs map[string]string) (docker.ContainerCommandPar
23	29		Ports: inputs["ports"],
24	30		Restart: inputs["restart"],
25	31		Volumes: volumeSlice,
	32	+	Environment: environmentSlice,
26	33		Network: ("traefik"),
27	34		}
28	35


@@ -13,6 +13,12 @@ func FromInputsToCmdParams(inputs map[string]string) (docker.ContainerCommandPar
13	volumeStr := inputs["volumes"]	13		volumeStr := inputs["volumes"]
14	volumeSlice := strings.Split(volumeStr, ",")	14		volumeSlice := strings.Split(volumeStr, ",")
15		15
		16	+	// Retreive the content of the textarea environment_variables and create a slice of strings
		17	+	environmentStr := inputs["environment_variables"]
		18	+	environmentSlice := strings.Split(environmentStr, "\n")
		19	+
		20	+	fmt.Println("environmentSlice", environmentSlice)
		21	+
16	params := docker.ContainerCommandParams{	22		params := docker.ContainerCommandParams{
17	IsSSL: inputs["container_protocol"] == "https",	23		IsSSL: inputs["container_protocol"] == "https",
18	ContainerName: inputs["container_name"],	24		ContainerName: inputs["container_name"],

@@ -23,6 +29,7 @@ func FromInputsToCmdParams(inputs map[string]string) (docker.ContainerCommandPar
23	Ports: inputs["ports"],	29		Ports: inputs["ports"],
24	Restart: inputs["restart"],	30		Restart: inputs["restart"],
25	Volumes: volumeSlice,	31		Volumes: volumeSlice,
		32	+	Environment: environmentSlice,
26	Network: ("traefik"),	33		Network: ("traefik"),
27	}	34		}
28		35

M pkg/docker/containers.go +5 -0


@@ -26,6 +26,7 @@ type ContainerCommandParams struct {
26	26		Labels []string
27	27		Network string
28	28		Restart string
	29	+	Environment []string
29	30		}
30	31
31	32		// ListRunningContainers lists all running containers

@@ -131,12 +132,16 @@ func CreateContainer(cmdParams ContainerCommandParams) error {
131	132		}
132	133		}
133	134
	135	+	// Prepare environment variables
	136	+	envVars := append([]string{}, cmdParams.Environment...)
	137	+
134	138		// Create container
135	139		resp, err := dockerCli.ContainerCreate(
136	140		context.Background(),
137	141		&container.Config{
138	142		Image: cmdParams.ImageName,
139	143		Labels: labels,
	144	+	Env: envVars,
140	145		},
141	146		&container.HostConfig{
142	147		PortBindings: portBindings,


@@ -26,6 +26,7 @@ type ContainerCommandParams struct {
26	Labels []string	26		Labels []string
27	Network string	27		Network string
28	Restart string	28		Restart string
		29	+	Environment []string
29	}	30		}
30		31
31	// ListRunningContainers lists all running containers	32		// ListRunningContainers lists all running containers

@@ -131,12 +132,16 @@ func CreateContainer(cmdParams ContainerCommandParams) error {
131	}	132		}
132	}	133		}
133		134
		135	+	// Prepare environment variables
		136	+	envVars := append([]string{}, cmdParams.Environment...)
		137	+
134	// Create container	138		// Create container
135	resp, err := dockerCli.ContainerCreate(	139		resp, err := dockerCli.ContainerCreate(
136	context.Background(),	140		context.Background(),
137	&container.Config{	141		&container.Config{
138	Image: cmdParams.ImageName,	142		Image: cmdParams.ImageName,
139	Labels: labels,	143		Labels: labels,
		144	+	Env: envVars,
140	},	145		},
141	&container.HostConfig{	146		&container.HostConfig{
142	PortBindings: portBindings,	147		PortBindings: portBindings,