sysadmin/dockge
1
0
Fork 0
mirror of https://github.com/louislam/dockge.git synced 2026-05-22 14:32:16 +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

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>