mirror of
https://github.com/louislam/dockge.git
synced 2026-05-21 22:12:17 +00:00
Multiple Dockge instances (#200)
This commit is contained in:
Louis Lam
@@ -2,7 +2,12 @@
|
||||
<transition name="slide-fade" appear>
|
||||
<div>
|
||||
<h1 v-if="isAdd" class="mb-3">Compose</h1>
|
||||
<h1 v-else class="mb-3"><Uptime :stack="globalStack" :pill="true" /> {{ stack.name }}</h1>
|
||||
<h1 v-else class="mb-3">
|
||||
<Uptime :stack="globalStack" :pill="true" /> {{ stack.name }}
|
||||
<span v-if="$root.agentCount > 1" class="agent-name">
|
||||
({{ endpointDisplay }})
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<div v-if="stack.isManagedByDockge" class="mb-3">
|
||||
<div class="btn-group me-2" role="group">
|
||||
@@ -70,6 +75,7 @@
|
||||
ref="progressTerminal"
|
||||
class="mb-3 terminal"
|
||||
:name="terminalName"
|
||||
:endpoint="endpoint"
|
||||
:rows="progressTerminalRows"
|
||||
@has-data="showProgressTerminal = true; submitted = true;"
|
||||
></Terminal>
|
||||
@@ -87,6 +93,16 @@
|
||||
<input id="name" v-model="stack.name" type="text" class="form-control" required @blur="stackNameToLowercase">
|
||||
<div class="form-text">{{ $t("Lowercase only") }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Endpoint -->
|
||||
<div class="mt-3">
|
||||
<label for="name" class="form-label">{{ $t("dockgeAgent") }}</label>
|
||||
<select v-model="stack.endpoint" class="form-select">
|
||||
<option v-for="(agent, endpoint) in $root.agentList" :key="endpoint" :value="endpoint" :disabled="$root.agentStatusList[endpoint] != 'online'">
|
||||
({{ $root.agentStatusList[endpoint] }}) {{ (endpoint) ? endpoint : $t("currentEndpoint") }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -139,6 +155,7 @@
|
||||
ref="combinedTerminal"
|
||||
class="mb-3 terminal"
|
||||
:name="combinedTerminalName"
|
||||
:endpoint="endpoint"
|
||||
:rows="combinedTerminalRows"
|
||||
:cols="combinedTerminalCols"
|
||||
style="height: 350px;"
|
||||
@@ -236,7 +253,7 @@ import {
|
||||
getComposeTerminalName,
|
||||
PROGRESS_TERMINAL_ROWS,
|
||||
RUNNING
|
||||
} from "../../../backend/util-common";
|
||||
} from "../../../common/util-common";
|
||||
import { BModal } from "bootstrap-vue-next";
|
||||
import NetworkInput from "../components/NetworkInput.vue";
|
||||
import dotenv from "dotenv";
|
||||
@@ -298,6 +315,10 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
|
||||
endpointDisplay() {
|
||||
return this.$root.endpointDisplayFunction(this.endpoint);
|
||||
},
|
||||
|
||||
urls() {
|
||||
if (!this.envsubstJSONConfig["x-dockge"] || !this.envsubstJSONConfig["x-dockge"].urls || !Array.isArray(this.envsubstJSONConfig["x-dockge"].urls)) {
|
||||
return [];
|
||||
@@ -334,7 +355,7 @@ export default {
|
||||
* @return {*}
|
||||
*/
|
||||
globalStack() {
|
||||
return this.$root.stackList[this.stack.name];
|
||||
return this.$root.completeStackList[this.stack.name + "_" + this.endpoint];
|
||||
},
|
||||
|
||||
status() {
|
||||
@@ -349,20 +370,31 @@ export default {
|
||||
if (!this.stack.name) {
|
||||
return "";
|
||||
}
|
||||
return getComposeTerminalName(this.stack.name);
|
||||
return getComposeTerminalName(this.endpoint, this.stack.name);
|
||||
},
|
||||
|
||||
combinedTerminalName() {
|
||||
if (!this.stack.name) {
|
||||
return "";
|
||||
}
|
||||
return getCombinedTerminalName(this.stack.name);
|
||||
return getCombinedTerminalName(this.endpoint, this.stack.name);
|
||||
},
|
||||
|
||||
networks() {
|
||||
return this.jsonConfig.networks;
|
||||
}
|
||||
},
|
||||
|
||||
endpoint() {
|
||||
return this.stack.endpoint || this.$route.params.endpoint || "";
|
||||
},
|
||||
|
||||
url() {
|
||||
if (this.stack.endpoint) {
|
||||
return `/compose/${this.stack.name}/${this.stack.endpoint}`;
|
||||
} else {
|
||||
return `/compose/${this.stack.name}`;
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
"stack.composeYAML": {
|
||||
@@ -405,9 +437,7 @@ export default {
|
||||
},
|
||||
|
||||
$route(to, from) {
|
||||
// Leave Combined Terminal
|
||||
console.debug("leaveCombinedTerminal", from.params.stackName);
|
||||
this.$root.getSocket().emit("leaveCombinedTerminal", this.stack.name, () => {});
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -437,6 +467,7 @@ export default {
|
||||
composeYAML,
|
||||
composeENV,
|
||||
isManagedByDockge: true,
|
||||
endpoint: "",
|
||||
};
|
||||
|
||||
this.yamlCodeChange();
|
||||
@@ -449,11 +480,9 @@ export default {
|
||||
this.requestServiceStatus();
|
||||
},
|
||||
unmounted() {
|
||||
this.stopServiceStatusTimeout = true;
|
||||
clearTimeout(serviceStatusTimeout);
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
startServiceStatusTimeout() {
|
||||
clearTimeout(serviceStatusTimeout);
|
||||
serviceStatusTimeout = setTimeout(async () => {
|
||||
@@ -462,7 +491,7 @@ export default {
|
||||
},
|
||||
|
||||
requestServiceStatus() {
|
||||
this.$root.getSocket().emit("serviceStatusList", this.stack.name, (res) => {
|
||||
this.$root.emitAgent(this.endpoint, "serviceStatusList", this.stack.name, (res) => {
|
||||
if (res.ok) {
|
||||
this.serviceStatusList = res.serviceStatusList;
|
||||
}
|
||||
@@ -475,22 +504,34 @@ export default {
|
||||
exitConfirm(next) {
|
||||
if (this.isEditMode) {
|
||||
if (confirm("You are currently editing a stack. Are you sure you want to leave?")) {
|
||||
this.exitAction();
|
||||
next();
|
||||
} else {
|
||||
next(false);
|
||||
}
|
||||
} else {
|
||||
this.exitAction();
|
||||
next();
|
||||
}
|
||||
},
|
||||
|
||||
exitAction() {
|
||||
console.log("exitAction");
|
||||
this.stopServiceStatusTimeout = true;
|
||||
clearTimeout(serviceStatusTimeout);
|
||||
|
||||
// Leave Combined Terminal
|
||||
console.debug("leaveCombinedTerminal", this.endpoint, this.stack.name);
|
||||
this.$root.emitAgent(this.endpoint, "leaveCombinedTerminal", this.stack.name, () => {});
|
||||
},
|
||||
|
||||
bindTerminal() {
|
||||
this.$refs.progressTerminal?.bind(this.terminalName);
|
||||
this.$refs.progressTerminal?.bind(this.endpoint, this.terminalName);
|
||||
},
|
||||
|
||||
loadStack() {
|
||||
this.processing = true;
|
||||
this.$root.getSocket().emit("getStack", this.stack.name, (res) => {
|
||||
this.$root.emitAgent(this.endpoint, "getStack", this.stack.name, (res) => {
|
||||
if (res.ok) {
|
||||
this.stack = res.stack;
|
||||
this.yamlCodeChange();
|
||||
@@ -532,15 +573,15 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
this.bindTerminal(this.terminalName);
|
||||
this.bindTerminal();
|
||||
|
||||
this.$root.getSocket().emit("deployStack", this.stack.name, this.stack.composeYAML, this.stack.composeENV, this.isAdd, (res) => {
|
||||
this.$root.emitAgent(this.stack.endpoint, "deployStack", this.stack.name, this.stack.composeYAML, this.stack.composeENV, this.isAdd, (res) => {
|
||||
this.processing = false;
|
||||
this.$root.toastRes(res);
|
||||
|
||||
if (res.ok) {
|
||||
this.isEditMode = false;
|
||||
this.$router.push("/compose/" + this.stack.name);
|
||||
this.$router.push(this.url);
|
||||
}
|
||||
});
|
||||
},
|
||||
@@ -548,13 +589,13 @@ export default {
|
||||
saveStack() {
|
||||
this.processing = true;
|
||||
|
||||
this.$root.getSocket().emit("saveStack", this.stack.name, this.stack.composeYAML, this.stack.composeENV, this.isAdd, (res) => {
|
||||
this.$root.emitAgent(this.stack.endpoint, "saveStack", this.stack.name, this.stack.composeYAML, this.stack.composeENV, this.isAdd, (res) => {
|
||||
this.processing = false;
|
||||
this.$root.toastRes(res);
|
||||
|
||||
if (res.ok) {
|
||||
this.isEditMode = false;
|
||||
this.$router.push("/compose/" + this.stack.name);
|
||||
this.$router.push(this.url);
|
||||
}
|
||||
});
|
||||
},
|
||||
@@ -562,7 +603,7 @@ export default {
|
||||
startStack() {
|
||||
this.processing = true;
|
||||
|
||||
this.$root.getSocket().emit("startStack", this.stack.name, (res) => {
|
||||
this.$root.emitAgent(this.endpoint, "startStack", this.stack.name, (res) => {
|
||||
this.processing = false;
|
||||
this.$root.toastRes(res);
|
||||
});
|
||||
@@ -571,7 +612,7 @@ export default {
|
||||
stopStack() {
|
||||
this.processing = true;
|
||||
|
||||
this.$root.getSocket().emit("stopStack", this.stack.name, (res) => {
|
||||
this.$root.emitAgent(this.endpoint, "stopStack", this.stack.name, (res) => {
|
||||
this.processing = false;
|
||||
this.$root.toastRes(res);
|
||||
});
|
||||
@@ -580,7 +621,7 @@ export default {
|
||||
downStack() {
|
||||
this.processing = true;
|
||||
|
||||
this.$root.getSocket().emit("downStack", this.stack.name, (res) => {
|
||||
this.$root.emitAgent(this.endpoint, "downStack", this.stack.name, (res) => {
|
||||
this.processing = false;
|
||||
this.$root.toastRes(res);
|
||||
});
|
||||
@@ -589,7 +630,7 @@ export default {
|
||||
restartStack() {
|
||||
this.processing = true;
|
||||
|
||||
this.$root.getSocket().emit("restartStack", this.stack.name, (res) => {
|
||||
this.$root.emitAgent(this.endpoint, "restartStack", this.stack.name, (res) => {
|
||||
this.processing = false;
|
||||
this.$root.toastRes(res);
|
||||
});
|
||||
@@ -598,14 +639,14 @@ export default {
|
||||
updateStack() {
|
||||
this.processing = true;
|
||||
|
||||
this.$root.getSocket().emit("updateStack", this.stack.name, (res) => {
|
||||
this.$root.emitAgent(this.endpoint, "updateStack", this.stack.name, (res) => {
|
||||
this.processing = false;
|
||||
this.$root.toastRes(res);
|
||||
});
|
||||
},
|
||||
|
||||
deleteDialog() {
|
||||
this.$root.getSocket().emit("deleteStack", this.stack.name, (res) => {
|
||||
this.$root.emitAgent(this.endpoint, "deleteStack", this.stack.name, (res) => {
|
||||
this.$root.toastRes(res);
|
||||
if (res.ok) {
|
||||
this.$router.push("/");
|
||||
@@ -750,6 +791,8 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "../styles/vars.scss";
|
||||
|
||||
.terminal {
|
||||
height: 200px;
|
||||
}
|
||||
@@ -761,4 +804,9 @@ export default {
|
||||
background-color: #2c2f38 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.agent-name {
|
||||
font-size: 13px;
|
||||
color: $dark-font-color3;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -15,14 +15,14 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Terminal class="terminal" :rows="20" mode="mainTerminal" name="console"></Terminal>
|
||||
<Terminal class="terminal" :rows="20" mode="mainTerminal" name="console" :endpoint="endpoint"></Terminal>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { allowedCommandList } from "../../../backend/util-common";
|
||||
import { allowedCommandList } from "../../../common/util-common";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@@ -32,6 +32,11 @@ export default {
|
||||
allowedCommandList,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
endpoint() {
|
||||
return this.$route.params.endpoint || "";
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
@@ -7,13 +7,13 @@
|
||||
<router-link :to="sh" class="btn btn-normal me-2">Switch to sh</router-link>
|
||||
</div>
|
||||
|
||||
<Terminal class="terminal" :rows="20" mode="interactive" :name="terminalName" :stack-name="stackName" :service-name="serviceName" :shell="shell"></Terminal>
|
||||
<Terminal class="terminal" :rows="20" mode="interactive" :name="terminalName" :stack-name="stackName" :service-name="serviceName" :shell="shell" :endpoint="endpoint"></Terminal>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getContainerExecTerminalName } from "../../../backend/util-common";
|
||||
import { getContainerExecTerminalName } from "../../../common/util-common";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@@ -27,6 +27,9 @@ export default {
|
||||
stackName() {
|
||||
return this.$route.params.stackName;
|
||||
},
|
||||
endpoint() {
|
||||
return this.$route.params.endpoint || "";
|
||||
},
|
||||
shell() {
|
||||
return this.$route.params.type;
|
||||
},
|
||||
@@ -34,10 +37,12 @@ export default {
|
||||
return this.$route.params.serviceName;
|
||||
},
|
||||
terminalName() {
|
||||
return getContainerExecTerminalName(this.stackName, this.serviceName, 0);
|
||||
return getContainerExecTerminalName(this.endpoint, this.stackName, this.serviceName, 0);
|
||||
},
|
||||
sh() {
|
||||
return {
|
||||
let endpoint = this.$route.params.endpoint;
|
||||
|
||||
let data = {
|
||||
name: "containerTerminal",
|
||||
params: {
|
||||
stackName: this.stackName,
|
||||
@@ -45,6 +50,13 @@ export default {
|
||||
type: "sh",
|
||||
},
|
||||
};
|
||||
|
||||
if (endpoint) {
|
||||
data.name = "containerTerminalEndpoint";
|
||||
data.params.endpoint = endpoint;
|
||||
}
|
||||
|
||||
return data;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
@@ -5,36 +5,97 @@
|
||||
{{ $t("home") }}
|
||||
</h1>
|
||||
|
||||
<div class="shadow-box big-padding text-center mb-4">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>{{ $t("active") }}</h3>
|
||||
<span class="num active">{{ activeNum }}</span>
|
||||
<div class="row first-row">
|
||||
<!-- Left -->
|
||||
<div class="col-md-7">
|
||||
<!-- Stats -->
|
||||
<div class="shadow-box big-padding text-center mb-4">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>{{ $t("active") }}</h3>
|
||||
<span class="num active">{{ activeNum }}</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3>{{ $t("exited") }}</h3>
|
||||
<span class="num exited">{{ exitedNum }}</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3>{{ $t("inactive") }}</h3>
|
||||
<span class="num inactive">{{ inactiveNum }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3>{{ $t("exited") }}</h3>
|
||||
<span class="num exited">{{ exitedNum }}</span>
|
||||
|
||||
<!-- Docker Run -->
|
||||
<h2 class="mb-3">{{ $t("Docker Run") }}</h2>
|
||||
<div class="mb-3">
|
||||
<textarea id="name" v-model="dockerRunCommand" type="text" class="form-control docker-run" required placeholder="docker run ..."></textarea>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3>{{ $t("inactive") }}</h3>
|
||||
<span class="num inactive">{{ inactiveNum }}</span>
|
||||
|
||||
<button class="btn-normal btn mb-4" @click="convertDockerRun">{{ $t("Convert to Compose") }}</button>
|
||||
</div>
|
||||
<!-- Right -->
|
||||
<div class="col-md-5">
|
||||
<!-- Agent List -->
|
||||
<div class="shadow-box big-padding">
|
||||
<h4 class="mb-3">{{ $tc("dockgeAgent", 2) }} <span class="badge bg-warning" style="font-size: 12px;">beta</span></h4>
|
||||
|
||||
<div v-for="(agent, endpoint) in $root.agentList" :key="endpoint" class="mb-3 agent">
|
||||
<!-- Agent Status -->
|
||||
<template v-if="$root.agentStatusList[endpoint]">
|
||||
<span v-if="$root.agentStatusList[endpoint] === 'online'" class="badge bg-primary me-2">{{ $t("agentOnline") }}</span>
|
||||
<span v-else-if="$root.agentStatusList[endpoint] === 'offline'" class="badge bg-danger me-2">{{ $t("agentOffline") }}</span>
|
||||
<span v-else class="badge bg-secondary me-2">{{ $t($root.agentStatusList[endpoint]) }}</span>
|
||||
</template>
|
||||
|
||||
<!-- Agent Display Name -->
|
||||
<span v-if="endpoint === ''">{{ $t("currentEndpoint") }}</span>
|
||||
<a v-else :href="agent.url" target="_blank">{{ endpoint }}</a>
|
||||
|
||||
<!-- Remove Button -->
|
||||
<font-awesome-icon v-if="endpoint !== ''" class="ms-2 remove-agent" icon="trash" @click="showRemoveAgentDialog[agent.url] = !showRemoveAgentDialog[agent.url]" />
|
||||
|
||||
<!-- Remoe Agent Dialog -->
|
||||
<BModal v-model="showRemoveAgentDialog[agent.url]" :okTitle="$t('removeAgent')" okVariant="danger" @ok="removeAgent(agent.url)">
|
||||
<p>{{ agent.url }}</p>
|
||||
{{ $t("removeAgentMsg") }}
|
||||
</BModal>
|
||||
</div>
|
||||
|
||||
<button v-if="!showAgentForm" class="btn btn-normal" @click="showAgentForm = !showAgentForm">{{ $t("addAgent") }}</button>
|
||||
|
||||
<!-- Add Agent Form -->
|
||||
<form v-if="showAgentForm" @submit.prevent="addAgent">
|
||||
<div class="mb-3">
|
||||
<label for="url" class="form-label">{{ $t("dockgeURL") }}</label>
|
||||
<input id="url" v-model="agent.url" type="url" class="form-control" required placeholder="http://">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="username" class="form-label">{{ $t("Username") }}</label>
|
||||
<input id="username" v-model="agent.username" type="text" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">{{ $t("Password") }}</label>
|
||||
<input id="password" v-model="agent.password" type="password" class="form-control" required autocomplete="new-password">
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary" :disabled="connectingAgent">
|
||||
<template v-if="connectingAgent">{{ $t("connecting") }}</template>
|
||||
<template v-else>{{ $t("connect") }}</template>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="mb-3">{{ $t("Docker Run") }}</h2>
|
||||
<div class="mb-3">
|
||||
<textarea id="name" v-model="dockerRunCommand" type="text" class="form-control docker-run" required placeholder="docker run ..."></textarea>
|
||||
</div>
|
||||
|
||||
<button class="btn-normal btn" @click="convertDockerRun">{{ $t("Convert to Compose") }}</button>
|
||||
</div>
|
||||
</transition>
|
||||
<router-view ref="child" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { statusNameShort } from "../../../backend/util-common";
|
||||
import { statusNameShort } from "../../../common/util-common";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@@ -58,6 +119,14 @@ export default {
|
||||
importantHeartBeatListLength: 0,
|
||||
displayedRecords: [],
|
||||
dockerRunCommand: "",
|
||||
showAgentForm: false,
|
||||
showRemoveAgentDialog: {},
|
||||
connectingAgent: false,
|
||||
agent: {
|
||||
url: "http://",
|
||||
username: "",
|
||||
password: "",
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
@@ -98,11 +167,43 @@ export default {
|
||||
|
||||
methods: {
|
||||
|
||||
addAgent() {
|
||||
this.connectingAgent = true;
|
||||
this.$root.getSocket().emit("addAgent", this.agent, (res) => {
|
||||
this.$root.toastRes(res);
|
||||
|
||||
if (res.ok) {
|
||||
this.showAgentForm = false;
|
||||
this.agent = {
|
||||
url: "http://",
|
||||
username: "",
|
||||
password: "",
|
||||
};
|
||||
}
|
||||
|
||||
this.connectingAgent = false;
|
||||
});
|
||||
},
|
||||
|
||||
removeAgent(url) {
|
||||
this.$root.getSocket().emit("removeAgent", url, (res) => {
|
||||
if (res.ok) {
|
||||
this.$root.toastRes(res);
|
||||
|
||||
let urlObj = new URL(url);
|
||||
let endpoint = urlObj.host;
|
||||
|
||||
// Remove the stack list and status list of the removed agent
|
||||
delete this.$root.allAgentStackList[endpoint];
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getStatusNum(statusName) {
|
||||
let num = 0;
|
||||
|
||||
for (let stackName in this.$root.stackList) {
|
||||
const stack = this.$root.stackList[stackName];
|
||||
for (let stackName in this.$root.completeStackList) {
|
||||
const stack = this.$root.completeStackList[stackName];
|
||||
if (statusNameShort(stack.status) === statusName) {
|
||||
num += 1;
|
||||
}
|
||||
@@ -230,4 +331,20 @@ table {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.first-row .shadow-box {
|
||||
|
||||
}
|
||||
|
||||
.remove-agent {
|
||||
cursor: pointer;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.agent {
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user