From 335bd32575bb471e304636efd2d27bd1a5170796 Mon Sep 17 00:00:00 2001 From: kevin Date: Thu, 30 Nov 2023 14:29:29 -0500 Subject: [PATCH 1/5] Add .env file editing with syntax highlighting --- .../socket-handlers/docker-socket-handler.ts | 15 ++-- backend/stack.ts | 18 ++++- frontend/src/lang/en.json | 3 +- frontend/src/pages/Compose.vue | 73 +++++++++++++++++-- 4 files changed, 95 insertions(+), 14 deletions(-) diff --git a/backend/socket-handlers/docker-socket-handler.ts b/backend/socket-handlers/docker-socket-handler.ts index 047d8f7e..2e2fc41c 100644 --- a/backend/socket-handlers/docker-socket-handler.ts +++ b/backend/socket-handlers/docker-socket-handler.ts @@ -9,10 +9,10 @@ import composerize from "composerize"; export class DockerSocketHandler extends SocketHandler { create(socket : DockgeSocket, server : DockgeServer) { - socket.on("deployStack", async (name : unknown, composeYAML : unknown, isAdd : unknown, callback) => { + socket.on("deployStack", async (name : unknown, composeYAML : unknown, composeENV : unknown, isAdd : unknown, callback) => { try { checkLogin(socket); - const stack = this.saveStack(socket, server, name, composeYAML, isAdd); + const stack = this.saveStack(socket, server, name, composeYAML, composeENV, isAdd); await stack.deploy(socket); server.sendStackList(); callback({ @@ -25,10 +25,10 @@ export class DockerSocketHandler extends SocketHandler { } }); - socket.on("saveStack", async (name : unknown, composeYAML : unknown, isAdd : unknown, callback) => { + socket.on("saveStack", async (name : unknown, composeYAML : unknown, composeENV : unknown, isAdd : unknown, callback) => { try { checkLogin(socket); - this.saveStack(socket, server, name, composeYAML, isAdd); + this.saveStack(socket, server, name, composeYAML, composeENV, isAdd); callback({ ok: true, "msg": "Saved" @@ -264,7 +264,7 @@ export class DockerSocketHandler extends SocketHandler { }); } - saveStack(socket : DockgeSocket, server : DockgeServer, name : unknown, composeYAML : unknown, isAdd : unknown) : Stack { + saveStack(socket : DockgeSocket, server : DockgeServer, name : unknown, composeYAML : unknown, composeENV : unknown, isAdd : unknown) : Stack { // Check types if (typeof(name) !== "string") { throw new ValidationError("Name must be a string"); @@ -272,11 +272,14 @@ export class DockerSocketHandler extends SocketHandler { if (typeof(composeYAML) !== "string") { throw new ValidationError("Compose YAML must be a string"); } + if (typeof(composeENV) !== "string") { + throw new ValidationError("Compose ENV must be a string"); + } if (typeof(isAdd) !== "boolean") { throw new ValidationError("isAdd must be a boolean"); } - const stack = new Stack(server, name, composeYAML); + const stack = new Stack(server, name, composeYAML, false, composeENV); stack.save(isAdd); return stack; } diff --git a/backend/stack.ts b/backend/stack.ts index a9af4422..295369af 100644 --- a/backend/stack.ts +++ b/backend/stack.ts @@ -23,6 +23,7 @@ export class Stack { name: string; protected _status: number = UNKNOWN; protected _composeYAML?: string; + protected _composeENV?: string; protected _configFilePath?: string; protected _composeFileName: string = "compose.yaml"; protected server: DockgeServer; @@ -31,10 +32,11 @@ export class Stack { protected static managedStackList: Map = new Map(); - constructor(server : DockgeServer, name : string, composeYAML? : string, skipFSOperations = false) { + constructor(server : DockgeServer, name : string, composeYAML? : string, skipFSOperations = false, composeENV? : string) { this.name = name; this.server = server; this._composeYAML = composeYAML; + this._composeENV = composeENV; if (!skipFSOperations) { // Check if compose file name is different from compose.yaml @@ -53,6 +55,7 @@ export class Stack { return { ...obj, composeYAML: this.composeYAML, + composeENV: this.composeENV, }; } @@ -105,6 +108,17 @@ export class Stack { return this._composeYAML; } + get composeENV() : string { + if (this._composeENV === undefined) { + try { + this._composeENV = fs.readFileSync(path.join(this.path, ".env"), "utf-8"); + } catch (e) { + this._composeENV = ""; + } + } + return this._composeENV; + } + get path() : string { return path.join(this.server.stacksDir, this.name); } @@ -149,6 +163,8 @@ export class Stack { // Write or overwrite the compose.yaml fs.writeFileSync(path.join(dir, this._composeFileName), this.composeYAML); + // Write or overwrite the .env + fs.writeFileSync(path.join(dir, ".env"), this.composeENV); } async deploy(socket? : DockgeSocket) : Promise { diff --git a/frontend/src/lang/en.json b/frontend/src/lang/en.json index 1df0e5ad..d62ad487 100644 --- a/frontend/src/lang/en.json +++ b/frontend/src/lang/en.json @@ -98,5 +98,6 @@ "reconnecting...": "Reconnecting...", "connecting...": "Connecting to the socket server...", "url": "URL | URLs", - "extra": "Extra" + "extra": "Extra", + "Template Variables": "Template Variables" } diff --git a/frontend/src/pages/Compose.vue b/frontend/src/pages/Compose.vue index af581384..f30f498b 100644 --- a/frontend/src/pages/Compose.vue +++ b/frontend/src/pages/Compose.vue @@ -154,7 +154,7 @@ ref="editor" v-model="stack.composeYAML" class="yaml-editor" - :highlight="highlighter" + :highlight="highlighterYAML" line-numbers :readonly="!isEditMode" @input="yamlCodeChange" @focus="editorFocus = true" @@ -164,6 +164,19 @@
{{ yamlError }}
+ +
{{ $tc("Template Variables", 2) }}
+
+ +
@@ -236,6 +249,11 @@ services: let yamlErrorTimeout = null; let serviceStatusTimeout = null; +let symbol = { + "symbol": { + pattern: /(? { + this.$root.getSocket().emit("deployStack", this.stack.name, this.stack.composeYAML, this.stack.composeENV, this.isAdd, (res) => { this.processing = false; this.$root.toastRes(res); @@ -506,7 +531,7 @@ export default { saveStack() { this.processing = true; - this.$root.getSocket().emit("saveStack", this.stack.name, this.stack.composeYAML, this.isAdd, (res) => { + this.$root.getSocket().emit("saveStack", this.stack.name, this.stack.composeYAML, this.stack.composeENV, this.isAdd, (res) => { this.processing = false; this.$root.toastRes(res); @@ -576,8 +601,44 @@ export default { this.isEditMode = false; }, - highlighter(code) { - return highlight(code, languages.yaml); + highlighterYAML(code) { + if (!languages.yaml_with_symbols) { + languages.yaml_with_symbols = languages.insertBefore("yaml", "punctuation", { + "symbol": symbol["symbol"] + }); + } + return highlight(code, languages.yaml_with_symbols); + }, + + highlighterENV(code) { + if (!languages.docker_env) { + languages.docker_env = { + "comment": { + pattern: /(^#| #).*$/m, + greedy: true + }, + "keyword": { + pattern: /^[^ :]*(?=:)/m, + greedy: true + }, + "value": { + pattern: /(?<=:).*?((?= #)|$)/m, + greedy: true, + inside: { + "string": [ + { + pattern: /^ *'.*?(? Date: Thu, 30 Nov 2023 14:42:40 -0500 Subject: [PATCH 2/5] Add example env file to new compose --- frontend/src/pages/Compose.vue | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/frontend/src/pages/Compose.vue b/frontend/src/pages/Compose.vue index f30f498b..ac84f37c 100644 --- a/frontend/src/pages/Compose.vue +++ b/frontend/src/pages/Compose.vue @@ -245,11 +245,12 @@ services: ports: - "8080:80" `; +const envDefault = "# VARIABLE: value #comment"; let yamlErrorTimeout = null; let serviceStatusTimeout = null; -let symbol = { +let prismjsSymbolDefinition = { "symbol": { pattern: /(? Date: Thu, 30 Nov 2023 16:03:51 -0500 Subject: [PATCH 3/5] Changed .env editing section title --- frontend/src/lang/en.json | 3 +-- frontend/src/pages/Compose.vue | 6 +++--- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/frontend/src/lang/en.json b/frontend/src/lang/en.json index d62ad487..1df0e5ad 100644 --- a/frontend/src/lang/en.json +++ b/frontend/src/lang/en.json @@ -98,6 +98,5 @@ "reconnecting...": "Reconnecting...", "connecting...": "Connecting to the socket server...", "url": "URL | URLs", - "extra": "Extra", - "Template Variables": "Template Variables" + "extra": "Extra" } diff --git a/frontend/src/pages/Compose.vue b/frontend/src/pages/Compose.vue index ac84f37c..0503bfd4 100644 --- a/frontend/src/pages/Compose.vue +++ b/frontend/src/pages/Compose.vue @@ -165,7 +165,7 @@ {{ yamlError }}
-
{{ $tc("Template Variables", 2) }}
+
.env
Date: Fri, 1 Dec 2023 08:22:17 -0500 Subject: [PATCH 4/5] Better stack constuctor parameter order --- backend/socket-handlers/docker-socket-handler.ts | 2 +- backend/stack.ts | 4 ++-- frontend/src/pages/Compose.vue | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/backend/socket-handlers/docker-socket-handler.ts b/backend/socket-handlers/docker-socket-handler.ts index 2e2fc41c..df6c01be 100644 --- a/backend/socket-handlers/docker-socket-handler.ts +++ b/backend/socket-handlers/docker-socket-handler.ts @@ -279,7 +279,7 @@ export class DockerSocketHandler extends SocketHandler { throw new ValidationError("isAdd must be a boolean"); } - const stack = new Stack(server, name, composeYAML, false, composeENV); + const stack = new Stack(server, name, composeYAML, composeENV, false); stack.save(isAdd); return stack; } diff --git a/backend/stack.ts b/backend/stack.ts index 295369af..cda53dbb 100644 --- a/backend/stack.ts +++ b/backend/stack.ts @@ -32,7 +32,7 @@ export class Stack { protected static managedStackList: Map = new Map(); - constructor(server : DockgeServer, name : string, composeYAML? : string, skipFSOperations = false, composeENV? : string) { + constructor(server : DockgeServer, name : string, composeYAML? : string, composeENV? : string, skipFSOperations = false) { this.name = name; this.server = server; this._composeYAML = composeYAML; @@ -322,7 +322,7 @@ export class Stack { if (!skipFSOperations) { stack = new Stack(server, stackName); } else { - stack = new Stack(server, stackName, undefined, true); + stack = new Stack(server, stackName, undefined, undefined, true); } stack._status = UNKNOWN; diff --git a/frontend/src/pages/Compose.vue b/frontend/src/pages/Compose.vue index 0503bfd4..2e821d2e 100644 --- a/frontend/src/pages/Compose.vue +++ b/frontend/src/pages/Compose.vue @@ -245,7 +245,7 @@ services: ports: - "8080:80" `; -const envDefault = "# VARIABLE: value #comment"; +const envDefault = "# VARIABLE=value #comment"; let yamlErrorTimeout = null; From ae93bafaf2d037b43013ef597667b11cafddb2d8 Mon Sep 17 00:00:00 2001 From: Louis Lam Date: Sun, 3 Dec 2023 16:33:21 +0800 Subject: [PATCH 5/5] Minor --- frontend/src/pages/Compose.vue | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/frontend/src/pages/Compose.vue b/frontend/src/pages/Compose.vue index 2e821d2e..9cc0a5c7 100644 --- a/frontend/src/pages/Compose.vue +++ b/frontend/src/pages/Compose.vue @@ -164,18 +164,21 @@
{{ yamlError }}
+ -
.env
-
- +
+

.env

+
+ +