sysadmin/dockge
1
0
Fork 0
mirror of https://github.com/louislam/dockge.git synced 2026-05-21 22:12:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Louis Lam
2023-12-20 10:11:00 +08:00
parent 0f79b46769
commit d99f21fe93
16 changed files with 185 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/NetworkInput.vue
View File

@@ -65,6 +65,10 @@ export default {
editorFocus() {
return this.$parent.$parent.editorFocus;
},
endpoint() {
return this.$parent.$parent.endpoint;
},
},
watch: {
"jsonConfig.networks": {
@@ -134,7 +138,7 @@ export default {
},
loadExternalNetworkList() {
this.$root.getSocket().emit("getDockerNetworkList", (res) => {
this.$root.emitAgent(this.endpoint, "getDockerNetworkList", (res) => {
if (res.ok) {
this.externalNetworkList = res.dockerNetworkList.filter((n) => {
// Filter out this stack networks

2
frontend/src/components/StackListItem.vue
View File

@@ -58,7 +58,7 @@ export default {
if (this.stack.endpoint) {
return this.stack.endpoint;
} else {
return "Default";
return "Current";
}
},
url() {

11
frontend/src/components/Terminal.vue
View File

@@ -24,6 +24,11 @@ export default {
require: true,
},
endpoint: {
type: String,
require: true,
},
// Require if mode is interactive
stackName: {
type: String,
@@ -134,15 +139,15 @@ export default {
},
methods: {
bind(name) {
bind(endpoint, name) {
// Workaround: normally this.name should be set, but it is not sometimes, so we use the parameter, but eventually this.name and name must be the same name
if (name) {
this.$root.unbindTerminal(name);
this.$root.bindTerminal(name, this.terminal);
this.$root.bindTerminal(endpoint, name, this.terminal);
console.debug("Terminal bound via parameter: " + name);
} else if (this.name) {
this.$root.unbindTerminal(this.name);
this.$root.bindTerminal(this.name, this.terminal);
this.$root.bindTerminal(this.endpoint, this.name, this.terminal);
console.debug("Terminal bound: " + this.name);
} else {
console.debug("Terminal name not set");

4
frontend/src/lang/en.json
View File

@@ -99,5 +99,7 @@
"connecting...": "Connecting to the socket server…",
"url": "URL | URLs",
"extra": "Extra",
"newUpdate": "New Update"
"newUpdate": "New Update",
"dockgeAgent": "Dockge Agent | Dockge Agents",
"currentEndpoint": "Current"
}

3
frontend/src/layouts/Layout.vue
View File

@@ -98,6 +98,7 @@
<script>
import Login from "../components/Login.vue";
import { compareVersions } from "compare-versions";
import { ALL_ENDPOINTS } from "../../../common/util-common";
export default {
@@ -145,7 +146,7 @@ export default {
methods: {
scanFolder() {
this.$root.getSocket().emit("requestStackList", (res) => {
this.$root.emitAgent(ALL_ENDPOINTS, "requestStackList", (res) => {
this.$root.toastRes(res);
});
},

9
frontend/src/mixins/socket.ts
View File

@@ -197,7 +197,10 @@ export default defineComponent({
this.$router.push("/setup");
});
socket.on("terminalWrite", (terminalName, data) => {
agentSocket.on("terminalWrite", (terminalName, data) => {
console.log(terminalName, data);
const terminal = terminalMap.get(terminalName);
if (!terminal) {
//console.error("Terminal not found: " + terminalName);
@@ -345,9 +348,9 @@ export default defineComponent({
},
bindTerminal(terminalName : string, terminal : Terminal) {
bindTerminal(endpoint : string, terminalName : string, terminal : Terminal) {
// Load terminal, get terminal screen
socket.emit("terminalJoin", terminalName, (res) => {
this.emitAgent(endpoint, "terminalJoin", terminalName, (res) => {
if (res.ok) {
terminal.write(res.buffer);
terminalMap.set(terminalName, terminal);

34
frontend/src/pages/Compose.vue
View File

@@ -70,6 +70,7 @@
ref="progressTerminal"
class="mb-3 terminal"
:name="terminalName"
:endpoint="endpoint"
:rows="progressTerminalRows"
@has-data="showProgressTerminal = true; submitted = true;"
></Terminal>
@@ -87,6 +88,15 @@
<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 value="">{{ $t("currentEndpoint") }}</option>
<option value="rs-debian:5001">rs-debian:5001</option>
</select>
</div>
</div>
</div>
@@ -139,6 +149,7 @@
ref="combinedTerminal"
class="mb-3 terminal"
:name="combinedTerminalName"
:endpoint="endpoint"
:rows="combinedTerminalRows"
:cols="combinedTerminalCols"
style="height: 350px;"
@@ -411,7 +422,7 @@ export default {
$route(to, from) {
// Leave Combined Terminal
console.debug("leaveCombinedTerminal", from.params.stackName);
this.$root.getSocket().emit("leaveCombinedTerminal", this.stack.name, () => {});
this.$root.emitAgent(this.endpoint, "leaveCombinedTerminal", this.stack.name, () => {});
}
},
mounted() {
@@ -441,6 +452,7 @@ export default {
composeYAML,
composeENV,
isManagedByDockge: true,
endpoint: "",
};
this.yamlCodeChange();
@@ -489,7 +501,7 @@ export default {
},
bindTerminal() {
this.$refs.progressTerminal?.bind(this.terminalName);
this.$refs.progressTerminal?.bind(this.endpoint, this.terminalName);
},
loadStack() {
@@ -536,9 +548,9 @@ 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);
@@ -552,7 +564,7 @@ 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);
@@ -566,7 +578,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);
});
@@ -575,7 +587,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);
});
@@ -584,7 +596,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);
});
@@ -593,7 +605,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);
});
@@ -602,14 +614,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("/");

5
frontend/src/pages/ContainerTerminal.vue
View File

@@ -7,7 +7,7 @@
<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>
@@ -27,6 +27,9 @@ export default {
stackName() {
return this.$route.params.stackName;
},
endpoint() {
// TODO
},
shell() {
return this.$route.params.type;
},

46
frontend/src/pages/DashboardHome.vue
View File

@@ -5,19 +5,34 @@
{{ $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">
<div class="col-md-6">
<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>
</div>
<div class="col">
<h3>{{ $t("inactive") }}</h3>
<span class="num inactive">{{ inactiveNum }}</span>
</div>
<div class="col-md-6">
<div class="shadow-box big-padding">
<h3 class="mb-3">{{ $tc("dockgeAgent", 2) }} </h3>
<div class="mb-3">
Current
</div>
<button class="btn btn-normal">Add Agent</button>
</div>
</div>
</div>
@@ -27,7 +42,7 @@
<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>
<button class="btn-normal btn mb-4" @click="convertDockerRun">{{ $t("Convert to Compose") }}</button>
</div>
</transition>
<router-view ref="child" />
@@ -230,4 +245,9 @@ table {
font-family: 'JetBrains Mono', monospace;
font-size: 15px;
}
.first-row .shadow-box {
}
</style>