holm/dockge
1
1
Fork 0
forked from extern/dockge
Code Issues Pull Requests 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
backend/agent-socket-handlers/docker-socket-handler.ts
View File

@ -11,14 +11,14 @@ export class DockerSocketHandler extends AgentSocketHandler {
agentSocket.on("deployStack", async (name : unknown, composeYAML : unknown, composeENV : unknown, isAdd : unknown, callback) => {
try {
checkLogin(s);
const stack = await this.saveStack(socket, server, name, composeYAML, composeENV, isAdd);
await stack.deploy(socket);
const stack = await this.saveStack(server, name, composeYAML, composeENV, isAdd);
await stack.deploy(s);
server.sendStackList();
callback({
ok: true,
msg: "Deployed",
});
stack.joinCombinedTerminal(socket);
stack.joinCombinedTerminal(s);
} catch (e) {
callbackError(e, callback);
}
@ -26,8 +26,8 @@ export class DockerSocketHandler extends AgentSocketHandler {
agentSocket.on("saveStack", async (name : unknown, composeYAML : unknown, composeENV : unknown, isAdd : unknown, callback) => {
try {
checkLogin(socket);
this.saveStack(socket, server, name, composeYAML, composeENV, isAdd);
checkLogin(s);
this.saveStack(server, name, composeYAML, composeENV, isAdd);
callback({
ok: true,
"msg": "Saved"
@ -40,14 +40,14 @@ export class DockerSocketHandler extends AgentSocketHandler {
agentSocket.on("deleteStack", async (name : unknown, callback) => {
try {
checkLogin(socket);
checkLogin(s);
if (typeof(name) !== "string") {
throw new ValidationError("Name must be a string");
}
const stack = await Stack.getStack(server, name);
try {
await stack.delete(socket);
await stack.delete(s);
} catch (e) {
server.sendStackList();
throw e;
@ -80,7 +80,7 @@ export class DockerSocketHandler extends AgentSocketHandler {
callback({
ok: true,
stack: stack.toJSON(),
stack: stack.toJSON(s.endpoint),
});
} catch (e) {
callbackError(e, callback);
@ -90,7 +90,7 @@ export class DockerSocketHandler extends AgentSocketHandler {
// requestStackList
agentSocket.on("requestStackList", async (callback) => {
try {
checkLogin(socket);
checkLogin(s);
server.sendStackList();
callback({
ok: true,
@ -104,21 +104,21 @@ export class DockerSocketHandler extends AgentSocketHandler {
// startStack
agentSocket.on("startStack", async (stackName : unknown, callback) => {
try {
checkLogin(socket);
checkLogin(s);
if (typeof(stackName) !== "string") {
throw new ValidationError("Stack name must be a string");
}
const stack = await Stack.getStack(server, stackName);
await stack.start(socket);
await stack.start(s);
callback({
ok: true,
msg: "Started"
});
server.sendStackList();
stack.joinCombinedTerminal(socket);
stack.joinCombinedTerminal(s);
} catch (e) {
callbackError(e, callback);
@ -128,14 +128,14 @@ export class DockerSocketHandler extends AgentSocketHandler {
// stopStack
agentSocket.on("stopStack", async (stackName : unknown, callback) => {
try {
checkLogin(socket);
checkLogin(s);
if (typeof(stackName) !== "string") {
throw new ValidationError("Stack name must be a string");
}
const stack = await Stack.getStack(server, stackName);
await stack.stop(socket);
await stack.stop(s);
callback({
ok: true,
msg: "Stopped"
@ -170,14 +170,14 @@ export class DockerSocketHandler extends AgentSocketHandler {
// updateStack
agentSocket.on("updateStack", async (stackName : unknown, callback) => {
try {
checkLogin(socket);
checkLogin(s);
if (typeof(stackName) !== "string") {
throw new ValidationError("Stack name must be a string");
}
const stack = await Stack.getStack(server, stackName);
await stack.update(socket);
await stack.update(s);
callback({
ok: true,
msg: "Updated"
@ -191,14 +191,14 @@ export class DockerSocketHandler extends AgentSocketHandler {
// down stack
agentSocket.on("downStack", async (stackName : unknown, callback) => {
try {
checkLogin(socket);
checkLogin(s);
if (typeof(stackName) !== "string") {
throw new ValidationError("Stack name must be a string");
}
const stack = await Stack.getStack(server, stackName);
await stack.down(socket);
await stack.down(s);
callback({
ok: true,
msg: "Downed"
@ -232,7 +232,7 @@ export class DockerSocketHandler extends AgentSocketHandler {
// getExternalNetworkList
agentSocket.on("getDockerNetworkList", async (callback) => {
try {
checkLogin(socket);
checkLogin(s);
const dockerNetworkList = await server.getDockerNetworkList();
callback({
ok: true,
@ -244,7 +244,7 @@ export class DockerSocketHandler extends AgentSocketHandler {
});
}
async saveStack(socket : DockgeSocket, server : DockgeServer, name : unknown, composeYAML : unknown, composeENV : unknown, isAdd : unknown) : Promise<Stack> {
async saveStack(server : DockgeServer, name : unknown, composeYAML : unknown, composeENV : unknown, isAdd : unknown) : Promise<Stack> {
// Check types
if (typeof(name) !== "string") {
throw new ValidationError("Name must be a string");

93
backend/socket-handlers/terminal-socket-handler.ts → backend/agent-socket-handlers/terminal-socket-handler.ts
View File

@ -1,26 +1,17 @@
import { SocketHandler } from "../socket-handler.js";
import { DockgeServer } from "../dockge-server";
import { callbackError, checkLogin, DockgeSocket, ValidationError } from "../util-server";
import { log } from "../log";
import yaml from "yaml";
import path from "path";
import fs from "fs";
import {
allowedCommandList,
allowedRawKeys,
getComposeTerminalName, getContainerExecTerminalName,
isDev,
PROGRESS_TERMINAL_ROWS
} from "../../common/util-common";
import { InteractiveTerminal, MainTerminal, Terminal } from "../terminal";
import { Stack } from "../stack";
import { AgentSocketHandler } from "../agent-socket-handler";
import { AgentSocket } from "../../common/agent-socket";
export class TerminalSocketHandler extends SocketHandler {
create(socket : DockgeSocket, server : DockgeServer) {
export class TerminalSocketHandler extends AgentSocketHandler {
create(s : DockgeSocket, server : DockgeServer, agentSocket : AgentSocket) {
socket.on("terminalInput", async (terminalName : unknown, cmd : unknown, errorCallback) => {
agentSocket.on("terminalInput", async (terminalName : unknown, cmd : unknown, errorCallback) => {
try {
checkLogin(socket);
checkLogin(s);
if (typeof(terminalName) !== "string") {
throw new Error("Terminal name must be a string.");
@ -48,9 +39,9 @@ export class TerminalSocketHandler extends SocketHandler {
});
// Main Terminal
socket.on("mainTerminal", async (terminalName : unknown, callback) => {
agentSocket.on("mainTerminal", async (terminalName : unknown, callback) => {
try {
checkLogin(socket);
checkLogin(s);
// TODO: Reset the name here, force one main terminal for now
terminalName = "console";
@ -81,7 +72,7 @@ export class TerminalSocketHandler extends SocketHandler {
});
// Interactive Terminal for containers
socket.on("interactiveTerminal", async (stackName : unknown, serviceName : unknown, shell : unknown, callback) => {
agentSocket.on("interactiveTerminal", async (stackName : unknown, serviceName : unknown, shell : unknown, callback) => {
try {
checkLogin(socket);
@ -113,14 +104,14 @@ export class TerminalSocketHandler extends SocketHandler {
});
// Join Output Terminal
socket.on("terminalJoin", async (terminalName : unknown, callback) => {
agentSocket.on("terminalJoin", async (terminalName : unknown, callback) => {
if (typeof(callback) !== "function") {
log.debug("console", "Callback is not a function.");
return;
}
try {
checkLogin(socket);
checkLogin(s);
if (typeof(terminalName) !== "string") {
throw new ValidationError("Terminal name must be a string.");
}
@ -141,9 +132,9 @@ export class TerminalSocketHandler extends SocketHandler {
});
// Leave Combined Terminal
socket.on("leaveCombinedTerminal", async (stackName : unknown, callback) => {
agentSocket.on("leaveCombinedTerminal", async (stackName : unknown, callback) => {
try {
checkLogin(socket);
checkLogin(s);
log.debug("leaveCombinedTerminal", "Stack name: " + stackName);
@ -152,7 +143,7 @@ export class TerminalSocketHandler extends SocketHandler {
}
const stack = await Stack.getStack(server, stackName);
await stack.leaveCombinedTerminal(socket);
await stack.leaveCombinedTerminal(s);
callback({
ok: true,
@ -163,43 +154,39 @@ export class TerminalSocketHandler extends SocketHandler {
});
// Resize Terminal
socket.on(
"terminalResize",
async (terminalName: unknown, rows: unknown, cols: unknown) => {
log.info("terminalResize", `Terminal: ${terminalName}`);
try {
checkLogin(socket);
if (typeof terminalName !== "string") {
throw new Error("Terminal name must be a string.");
}
agentSocket.on("terminalResize", async (terminalName: unknown, rows: unknown, cols: unknown) => {
log.info("terminalResize", `Terminal: ${terminalName}`);
try {
checkLogin(socket);
if (typeof terminalName !== "string") {
throw new Error("Terminal name must be a string.");
}
if (typeof rows !== "number") {
throw new Error("Command must be a number.");
}
if (typeof cols !== "number") {
throw new Error("Command must be a number.");
}
if (typeof rows !== "number") {
throw new Error("Command must be a number.");
}
if (typeof cols !== "number") {
throw new Error("Command must be a number.");
}
let terminal = Terminal.getTerminal(terminalName);
let terminal = Terminal.getTerminal(terminalName);
// log.info("terminal", terminal);
if (terminal instanceof Terminal) {
//log.debug("terminalInput", "Terminal found, writing to terminal.");
terminal.rows = rows;
terminal.cols = cols;
} else {
throw new Error(`${terminalName} Terminal not found.`);
}
} catch (e) {
log.debug(
"terminalResize",
// log.info("terminal", terminal);
if (terminal instanceof Terminal) {
//log.debug("terminalInput", "Terminal found, writing to terminal.");
terminal.rows = rows;
terminal.cols = cols;
} else {
throw new Error(`${terminalName} Terminal not found.`);
}
} catch (e) {
log.debug("terminalResize",
// Added to prevent the lint error when adding the type
// and ts type checker saying type is unknown.
// @ts-ignore
`Error on ${terminalName}: ${e.message}`
);
}
);
}
);
});
}
}

7
backend/dockge-instance-manager.ts
View File

@ -111,4 +111,11 @@ export class DockgeInstanceManager {
client?.emit("agent", endpoint, eventName, ...args);
}
emitToAllEndpoints(eventName: string, ...args : unknown[]) {
log.debug("INSTANCEMANAGER", "Emitting event to all endpoints");
for (let endpoint in this.instanceSocketList) {
this.emitToEndpoint(endpoint, eventName, ...args);
}
}
}

9
backend/dockge-server.ts
View File

@ -25,7 +25,7 @@ import { Arguments, Config, DockgeSocket } from "./util-server";
import { DockerSocketHandler } from "./agent-socket-handlers/docker-socket-handler";
import expressStaticGzip from "express-static-gzip";
import path from "path";
import { TerminalSocketHandler } from "./socket-handlers/terminal-socket-handler";
import { TerminalSocketHandler } from "./agent-socket-handlers/terminal-socket-handler";
import { Stack } from "./stack";
import { Cron } from "croner";
import gracefulShutdown from "http-graceful-shutdown";
@ -52,17 +52,20 @@ export class DockgeServer {
];
/**
* List of socket handlers
* List of socket handlers (no agent support)
*/
socketHandlerList : SocketHandler[] = [
new MainSocketHandler(),
new TerminalSocketHandler(),
];
agentProxySocketHandler = new AgentProxySocketHandler();
/**
* List of socket handlers (support agent)
*/
agentSocketHandlerList : AgentSocketHandler[] = [
new DockerSocketHandler(),
new TerminalSocketHandler(),
];
/**

14
backend/socket-handlers/agent-proxy-socket-handler.ts
View File

@ -3,6 +3,7 @@ import { DockgeServer } from "../dockge-server";
import { log } from "../log";
import { checkLogin, DockgeSocket } from "../util-server";
import { AgentSocket } from "../../common/agent-socket";
import { ALL_ENDPOINTS } from "../../common/util-common";
export class AgentProxySocketHandler extends SocketHandler {
@ -14,19 +15,22 @@ export class AgentProxySocketHandler extends SocketHandler {
// Check Type
if (typeof(endpoint) !== "string") {
throw new Error("Endpoint must be a string");
throw new Error("Endpoint must be a string: " + endpoint);
}
if (typeof(eventName) !== "string") {
throw new Error("Event name must be a string");
}
log.debug("agent", "Proxying request to " + endpoint + " for " + eventName);
if (endpoint === ALL_ENDPOINTS) { // Send to all endpoints
log.debug("agent", "Sending to all endpoints: " + eventName);
socket.instanceManager.emitToAllEndpoints(eventName, ...args);
// Direct connection or matching endpoint
if (!endpoint || endpoint === socket.endpoint) {
log.debug("agent", "Direct connection");
} else if (!endpoint || endpoint === socket.endpoint) { // Direct connection or matching endpoint
log.debug("agent", "Matched endpoint: " + eventName);
agentSocket.call(eventName, ...args);
} else {
log.debug("agent", "Proxying request to " + endpoint + " for " + eventName);
socket.instanceManager.emitToEndpoint(endpoint, eventName, ...args);
}
} catch (e) {

25
backend/terminal.ts
View File

@ -35,6 +35,8 @@ export class Terminal {
public enableKeepAlive : boolean = false;
protected keepAliveInterval? : NodeJS.Timeout;
protected socketList : DockgeSocket[] = [];
constructor(server : DockgeServer, name : string, file : string, args : string | string[], cwd : string) {
this.server = server;
this._name = name;
@ -87,8 +89,7 @@ export class Terminal {
// Close if there is no clients
this.keepAliveInterval = setInterval(() => {
const clients = this.server.io.sockets.adapter.rooms.get(this.name);
const numClients = clients ? clients.size : 0;
const numClients = this.socketList.length;
if (numClients === 0) {
log.debug("Terminal", "Terminal " + this.name + " has no client, closing...");
@ -112,8 +113,9 @@ export class Terminal {
// On Data
this._ptyProcess.onData((data) => {
this.buffer.pushItem(data);
if (this.server.io) {
this.server.io.to(this.name).emit("terminalWrite", this.name, data);
for (const socket of this.socketList) {
socket.emitAgent("terminalWrite", this.name, data);
}
});
@ -137,10 +139,12 @@ export class Terminal {
* @param res
*/
protected exit = (res : {exitCode: number, signal?: number | undefined}) => {
this.server.io.to(this.name).emit("terminalExit", this.name, res.exitCode);
for (const socket of this.socketList) {
socket.emitAgent("terminalExit", this.name, res.exitCode);
}
// Remove room
this.server.io.in(this.name).socketsLeave(this.name);
// Remove all clients
this.socketList = [];
Terminal.terminalMap.delete(this.name);
log.debug("Terminal", "Terminal " + this.name + " exited with code " + res.exitCode);
@ -157,11 +161,14 @@ export class Terminal {
}
public join(socket : DockgeSocket) {
socket.join(this.name);
this.socketList.push(socket);
}
public leave(socket : DockgeSocket) {
socket.leave(this.name);
const index = this.socketList.indexOf(socket);
if (index !== -1) {
this.socketList.splice(index, 1);
}
}
public get ptyProcess() {

2
common/util-common.ts
View File

@ -43,6 +43,8 @@ async function initRandomBytes() {
}
}
export const ALL_ENDPOINTS = "##ALL_DOCKGE_ENDPOINTS##";
// Stack Status
export const UNKNOWN = 0;
export const CREATED_FILE = 1;

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>