Global .env page and getting ports from running container

This commit is contained in:
kevin 2024-01-15 15:02:41 -05:00
parent 2e6e2bda38
commit d76b2f2a32
10 changed files with 194 additions and 19 deletions

View file

@ -18,6 +18,8 @@ import {
import { passwordStrength } from "check-password-strength";
import jwt from "jsonwebtoken";
import { Settings } from "../settings";
import fs, { promises as fsAsync } from "fs";
import path from "path";
export class MainSocketHandler extends SocketHandler {
create(socket : DockgeSocket, server : DockgeServer) {
@ -242,6 +244,12 @@ export class MainSocketHandler extends SocketHandler {
checkLogin(socket);
const data = await Settings.getSettings("general");
if (fs.existsSync(path.join(server.stacksDir, "global.env"))) {
data.globalENV = fs.readFileSync(path.join(server.stacksDir, "global.env"), "utf-8");
} else {
data.globalENV = "# VARIABLE=value #comment";
}
callback({
ok: true,
data: data,
@ -270,6 +278,16 @@ export class MainSocketHandler extends SocketHandler {
if (!currentDisabledAuth && data.disableAuth) {
await doubleCheckPassword(socket, currentPassword);
}
// Handle global.env
if (data.globalENV && data.globalENV != "# VARIABLE=value #comment") {
await fsAsync.writeFile(path.join(server.stacksDir, "global.env"), data.globalENV);
} else {
await fsAsync.rm(path.join(server.stacksDir, "global.env"), {
recursive: true,
force: true
});
}
delete data.globalENV;
await Settings.setSettings("general", data);

View file

@ -93,7 +93,7 @@ export class Stack {
* Get the status of the stack from `docker compose ps --format json`
*/
async ps() : Promise<object> {
let res = await childProcessAsync.spawn("docker", [ "compose", "ps", "--format", "json" ], {
let res = await childProcessAsync.spawn("docker", this.getComposeOptions("ps", "--format", "json"), {
cwd: this.path,
encoding: "utf-8",
});
@ -208,7 +208,7 @@ export class Stack {
async deploy(socket : DockgeSocket) : Promise<number> {
const terminalName = getComposeTerminalName(socket.endpoint, this.name);
let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "up", "-d", "--remove-orphans" ], this.path);
let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", this.getComposeOptions("up", "-d", "--remove-orphans"), this.path);
if (exitCode !== 0) {
throw new Error("Failed to deploy, please check the terminal output for more information.");
}
@ -217,7 +217,7 @@ export class Stack {
async delete(socket: DockgeSocket) : Promise<number> {
const terminalName = getComposeTerminalName(socket.endpoint, this.name);
let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "down", "--remove-orphans" ], this.path);
let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", this.getComposeOptions("down", "--remove-orphans"), this.path);
if (exitCode !== 0) {
throw new Error("Failed to delete, please check the terminal output for more information.");
}
@ -407,9 +407,22 @@ export class Stack {
return stack;
}
getComposeOptions(command : string, ...extraOptions : string[]) {
//--env-file ./../global.env --env-file .env
let options = [ "compose", command, ...extraOptions ];
if (fs.existsSync(path.join(this.server.stacksDir, "global.env"))) {
if (fs.existsSync(path.join(this.path, ".env"))) {
options.splice(1, 0, "--env-file", "./.env");
}
options.splice(1, 0, "--env-file", "../global.env");
}
console.log(options);
return options;
}
async start(socket: DockgeSocket) {
const terminalName = getComposeTerminalName(socket.endpoint, this.name);
let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "up", "-d", "--remove-orphans" ], this.path);
let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", this.getComposeOptions("up", "-d", "--remove-orphans"), this.path);
if (exitCode !== 0) {
throw new Error("Failed to start, please check the terminal output for more information.");
}
@ -418,7 +431,7 @@ export class Stack {
async stop(socket: DockgeSocket) : Promise<number> {
const terminalName = getComposeTerminalName(socket.endpoint, this.name);
let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "stop" ], this.path);
let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", this.getComposeOptions("stop"), this.path);
if (exitCode !== 0) {
throw new Error("Failed to stop, please check the terminal output for more information.");
}
@ -427,7 +440,7 @@ export class Stack {
async restart(socket: DockgeSocket) : Promise<number> {
const terminalName = getComposeTerminalName(socket.endpoint, this.name);
let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "restart" ], this.path);
let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", this.getComposeOptions("restart"), this.path);
if (exitCode !== 0) {
throw new Error("Failed to restart, please check the terminal output for more information.");
}
@ -436,7 +449,7 @@ export class Stack {
async down(socket: DockgeSocket) : Promise<number> {
const terminalName = getComposeTerminalName(socket.endpoint, this.name);
let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "down" ], this.path);
let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", this.getComposeOptions("down"), this.path);
if (exitCode !== 0) {
throw new Error("Failed to down, please check the terminal output for more information.");
}
@ -445,7 +458,7 @@ export class Stack {
async update(socket: DockgeSocket) {
const terminalName = getComposeTerminalName(socket.endpoint, this.name);
let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "pull" ], this.path);
let exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", this.getComposeOptions("pull"), this.path);
if (exitCode !== 0) {
throw new Error("Failed to pull, please check the terminal output for more information.");
}
@ -457,7 +470,7 @@ export class Stack {
return exitCode;
}
exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", [ "compose", "up", "-d", "--remove-orphans" ], this.path);
exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", this.getComposeOptions("up", "-d", "--remove-orphans"), this.path);
if (exitCode !== 0) {
throw new Error("Failed to restart, please check the terminal output for more information.");
}
@ -466,7 +479,7 @@ export class Stack {
async joinCombinedTerminal(socket: DockgeSocket) {
const terminalName = getCombinedTerminalName(socket.endpoint, this.name);
const terminal = Terminal.getOrCreateTerminal(this.server, terminalName, "docker", [ "compose", "logs", "-f", "--tail", "100" ], this.path);
const terminal = Terminal.getOrCreateTerminal(this.server, terminalName, "docker", this.getComposeOptions("logs", "-f", "--tail", "100"), this.path);
terminal.enableKeepAlive = true;
terminal.rows = COMBINED_TERMINAL_ROWS;
terminal.cols = COMBINED_TERMINAL_COLS;
@ -487,7 +500,7 @@ export class Stack {
let terminal = Terminal.getTerminal(terminalName);
if (!terminal) {
terminal = new InteractiveTerminal(this.server, terminalName, "docker", [ "compose", "exec", serviceName, shell ], this.path);
terminal = new InteractiveTerminal(this.server, terminalName, "docker", this.getComposeOptions("exec", serviceName, shell), this.path);
terminal.rows = TERMINAL_ROWS;
log.debug("joinContainerTerminal", "Terminal created");
}
@ -497,10 +510,10 @@ export class Stack {
}
async getServiceStatusList() {
let statusList = new Map<string, number>();
let statusList = new Map<string, { state: string, ports: string[] }>();
try {
let res = await childProcessAsync.spawn("docker", [ "compose", "ps", "--format", "json" ], {
let res = await childProcessAsync.spawn("docker", this.getComposeOptions("ps", "--format", "json"), {
cwd: this.path,
encoding: "utf-8",
});
@ -514,10 +527,19 @@ export class Stack {
for (let line of lines) {
try {
let obj = JSON.parse(line);
let ports = (obj.Ports as string).split(/,\s*/).filter((s) => {
return s.indexOf("->") >= 0;
});
if (obj.Health === "") {
statusList.set(obj.Service, obj.State);
statusList.set(obj.Service, {
state: obj.State,
ports: ports
});
} else {
statusList.set(obj.Service, obj.Health);
statusList.set(obj.Service, {
state: obj.Health,
ports: ports
});
}
} catch (e) {
}

View file

@ -289,6 +289,7 @@ function copyYAMLCommentsItems(items : any, srcItems : any) {
* - "8000-9000:80"
* - "127.0.0.1:8001:8001"
* - "127.0.0.1:5000-5010:5000-5010"
* - "0.0.0.0:8080->8080/tcp"
* - "6060:6060/udp"
* @param input
* @param hostname
@ -298,9 +299,19 @@ export function parseDockerPort(input : string, hostname : string) {
let display;
const parts = input.split("/");
const part1 = parts[0];
let part1 = parts[0];
let protocol = parts[1] || "tcp";
// coming from docker ps, split host part
const arrow = part1.indexOf("->");
if (arrow >= 0) {
part1 = part1.split("->")[0];
const colon = part1.indexOf(":");
if (colon >= 0) {
part1 = part1.split(":")[1];
}
}
// Split the last ":"
const lastColon = part1.lastIndexOf(":");

View file

@ -17,6 +17,7 @@ declare module 'vue' {
Confirm: typeof import('./src/components/Confirm.vue')['default']
Container: typeof import('./src/components/Container.vue')['default']
General: typeof import('./src/components/settings/General.vue')['default']
GlobalEnv: typeof import('./src/components/settings/GlobalEnv.vue')['default']
HiddenInput: typeof import('./src/components/HiddenInput.vue')['default']
Login: typeof import('./src/components/Login.vue')['default']
NetworkInput: typeof import('./src/components/NetworkInput.vue')['default']

View file

@ -9,7 +9,7 @@
<div v-if="!isEditMode">
<span class="badge me-1" :class="bgStyle">{{ status }}</span>
<a v-for="port in envsubstService.ports" :key="port" :href="parsePort(port).url" target="_blank">
<a v-for="port in (ports ?? envsubstService.ports)" :key="port" :href="parsePort(port).url" target="_blank">
<span class="badge me-1 bg-secondary">{{ parsePort(port).display }}</span>
</a>
</div>
@ -159,6 +159,10 @@ export default defineComponent({
status: {
type: String,
default: "N/A",
},
ports: {
type: Array,
default: null
}
},
emits: [

View file

@ -0,0 +1,109 @@
<template>
<div>
<div v-if="settingsLoaded" class="my-4">
<form class="my-4" autocomplete="off" @submit.prevent="saveGeneral">
<div class="shadow-box mb-3 editor-box edit-mode">
<prism-editor
ref="editor"
v-model="settings.globalENV"
class="env-editor"
:highlight="highlighterENV"
line-numbers
></prism-editor>
</div>
<div class="my-4">
<!-- Save Button -->
<div>
<button class="btn btn-primary" type="submit">
{{ $t("Save") }}
</button>
</div>
</div>
</form>
</div>
</div>
</template>
<script>
import { highlight, languages } from "prismjs/components/prism-core";
import { PrismEditor } from "vue-prism-editor";
let prismjsSymbolDefinition = {
"symbol": {
pattern: /(?<!\$)\$(\{[^{}]*\}|\w+)/,
}
};
export default {
components: {
PrismEditor,
},
data() {
return {
};
},
computed: {
settings() {
return this.$parent.$parent.$parent.settings;
},
saveSettings() {
return this.$parent.$parent.$parent.saveSettings;
},
settingsLoaded() {
return this.$parent.$parent.$parent.settingsLoaded;
}
},
methods: {
/** Save the settings */
saveGeneral() {
this.saveSettings();
},
highlighterENV(code) {
if (!languages.docker_env) {
languages.docker_env = {
"comment": {
pattern: /(^#| #).*$/m,
greedy: true
},
"keyword": {
pattern: /^\w*(?=[:=])/m,
greedy: true
},
"value": {
pattern: /(?<=[:=]).*?((?= #)|$)/m,
greedy: true,
inside: {
"string": [
{
pattern: /^ *'.*?(?<!\\)'/m,
},
{
pattern: /^ *".*?(?<!\\)"|^.*$/m,
inside: prismjsSymbolDefinition
},
],
},
},
};
}
return highlight(code, languages.docker_env);
},
},
};
</script>
<style scoped lang="scss">
.editor-box {
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
&.edit-mode {
background-color: #2c2f38 !important;
}
}
</style>

View file

@ -111,5 +111,6 @@
"agentAddedSuccessfully": "Agent added successfully.",
"agentRemovedSuccessfully": "Agent removed successfully.",
"removeAgent": "Remove Agent",
"removeAgentMsg": "Are you sure you want to remove this agent?"
"removeAgentMsg": "Are you sure you want to remove this agent?",
"GlobalEnv": "Global .env"
}

View file

@ -128,7 +128,8 @@
:name="name"
:is-edit-mode="isEditMode"
:first="name === Object.keys(jsonConfig.services)[0]"
:status="serviceStatusList[name]"
:status="serviceStatusList[name]?.state"
:ports="serviceStatusList[name]?.ports"
/>
</div>

View file

@ -83,6 +83,9 @@ export default {
security: {
title: this.$t("Security"),
},
globalEnv: {
title: this.$t("GlobalEnv"),
},
about: {
title: this.$t("About"),
},

View file

@ -14,6 +14,7 @@ const Settings = () => import("./pages/Settings.vue");
import Appearance from "./components/settings/Appearance.vue";
import General from "./components/settings/General.vue";
const Security = () => import("./components/settings/Security.vue");
const GlobalEnv = () => import("./components/settings/GlobalEnv.vue");
import About from "./components/settings/About.vue";
const routes = [
@ -78,6 +79,10 @@ const routes = [
path: "security",
component: Security,
},
{
path: "globalEnv",
component: GlobalEnv,
},
{
path: "about",
component: About,