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

Redesign

Browse Source
This commit is contained in:
Louis Lam
2023-12-20 01:48:20 +08:00
parent 80e885e85d
commit 0f79b46769
28 changed files with 471 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -137,7 +137,7 @@
<script>
import { defineComponent } from "vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { parseDockerPort } from "../../../backend/util-common";
import { parseDockerPort } from "../../../common/util-common";
export default defineComponent({
components: {

5
frontend/src/components/StackList.vue
View File

@@ -67,7 +67,7 @@
<script>
import Confirm from "../components/Confirm.vue";
import StackListItem from "../components/StackListItem.vue";
import { CREATED_FILE, CREATED_STACK, EXITED, RUNNING, UNKNOWN } from "../../../backend/util-common";
import { CREATED_FILE, CREATED_STACK, EXITED, RUNNING, UNKNOWN } from "../../../common/util-common";
export default {
components: {
@@ -120,7 +120,7 @@ export default {
* @returns {Array} The sorted list of stacks.
*/
sortedStackList() {
let result = Object.values(this.$root.stackList);
let result = Object.values(this.$root.completeStackList);
result = result.filter(stack => {
// filter by search text
@@ -160,6 +160,7 @@ export default {
return 1;
}
// sort by status
if (m1.status !== m2.status) {
if (m2.status === RUNNING) {
return 1;

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

@@ -1,7 +1,10 @@
<template>
<router-link :to="`/compose/${stack.name}`" :class="{ 'dim' : !stack.isManagedByDockge }" class="item">
<router-link :to="url" :class="{ 'dim' : !stack.isManagedByDockge }" class="item">
<Uptime :stack="stack" :fixed-width="true" class="me-2" />
<span class="title">{{ stackName }}</span>
<div class="title">
<span>{{ stackName }}</span>
<div class="endpoint">{{ endpointDisplay }}</div>
</div>
</router-link>
</template>
@@ -51,6 +54,20 @@ export default {
};
},
computed: {
endpointDisplay() {
if (this.stack.endpoint) {
return this.stack.endpoint;
} else {
return "Default";
}
},
url() {
if (this.stack.endpoint) {
return `/compose/${this.stack.name}/${this.stack.endpoint}`;
} else {
return `/compose/${this.stack.name}`;
}
},
depthMargin() {
return {
marginLeft: `${31 * this.depth}px`,
@@ -117,16 +134,31 @@ export default {
padding-right: 2px !important;
}
// .stack-item {
// width: 100%;
// }
.tags {
margin-top: 4px;
padding-left: 67px;
.item {
text-decoration: none;
display: flex;
flex-wrap: wrap;
gap: 0;
align-items: center;
min-height: 52px;
border-radius: 10px;
transition: all ease-in-out 0.15s;
width: 100%;
padding: 5px 8px;
&.disabled {
opacity: 0.3;
}
&:hover {
background-color: $highlight-white;
}
&.active {
background-color: #cdf8f4;
}
.title {
margin-top: -4px;
}
.endpoint {
font-size: 12px;
color: $dark-font-color3;
}
}
.collapsed {

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

@@ -8,7 +8,7 @@
import { Terminal } from "@xterm/xterm";
import { FitAddon } from "@xterm/addon-fit";
import { WebLinksAddon } from "xterm-addon-web-links";
import { TERMINAL_COLS, TERMINAL_ROWS } from "../../../backend/util-common";
import { TERMINAL_COLS, TERMINAL_ROWS } from "../../../common/util-common";
export default {
/**

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

@@ -3,7 +3,7 @@
</template>
<script>
import { statusColor, statusNameShort } from "../../../backend/util-common";
import { statusColor, statusNameShort } from "../../../common/util-common";
export default {
props: {

2
frontend/src/main.ts
View File

@@ -1,5 +1,5 @@
// Dayjs init inside this, so it has to be the first import
import "../../backend/util-common";
import "../../common/util-common";
import { createApp, defineComponent, h } from "vue";
import App from "./App.vue";

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

@@ -3,6 +3,7 @@ import { Socket } from "socket.io-client";
import { defineComponent } from "vue";
import jwtDecode from "jwt-decode";
import { Terminal } from "@xterm/xterm";
import { AgentSocket } from "../../../common/agent-socket";
let socket : Socket;
@@ -28,16 +29,29 @@ export default defineComponent({
loggedIn: false,
allowLoginDialog: false,
username: null,
instanceList: {} as Record<string, any>,
stackList: {},
composeTemplate: "",
};
},
computed: {
completeStackList() {
let list : Record<string, any> = this.stackList;
for (let endpoint in this.instanceList) {
let instance = this.instanceList[endpoint];
for (let stackName in instance.stackList) {
list[stackName + "_" + endpoint] = instance.stackList[stackName];
}
}
return list;
},
usernameFirstChar() {
if (typeof this.username == "string" && this.username.length >= 1) {
return this.username.charAt(0).toUpperCase();
} else {
return "🐻";
return "🐬";
}
},
@@ -112,6 +126,12 @@ export default defineComponent({
transports: [ "websocket", "polling" ]
});
// Handling events from agents
let agentSocket = new AgentSocket();
socket.on("agent", (eventName : unknown, ...args : unknown[]) => {
agentSocket.call(eventName, ...args);
});
socket.on("connect", () => {
console.log("Connected to the socket server");
@@ -186,9 +206,20 @@ export default defineComponent({
terminal.write(data);
});
socket.on("stackList", (res) => {
agentSocket.on("stackList", (res) => {
console.log(res);
if (res.ok) {
this.stackList = res.stackList;
if (!res.endpoint) {
this.stackList = res.stackList;
} else {
if (!this.instanceList[res.endpoint]) {
this.instanceList[res.endpoint] = {
stackList: {},
};
}
this.instanceList[res.endpoint].stackList = res.stackList;
}
}
});
@@ -220,6 +251,10 @@ export default defineComponent({
return socket;
},
emitAgent(endpoint : string, eventName : string, ...args : unknown[]) {
this.getSocket().emit("agent", endpoint, eventName, ...args);
},
/**
* Get payload of JWT cookie
* @returns {(object | undefined)} JWT payload

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

@@ -236,7 +236,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";
@@ -349,18 +349,22 @@ 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.$route.params.endpoint || "";
}
},
@@ -462,7 +466,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;
}
@@ -490,7 +494,7 @@ export default {
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();

2
frontend/src/pages/Console.vue
View File

@@ -22,7 +22,7 @@
<script>
import { allowedCommandList } from "../../../backend/util-common";
import { allowedCommandList } from "../../../common/util-common";
export default {
components: {

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

@@ -13,7 +13,7 @@
</template>
<script>
import { getContainerExecTerminalName } from "../../../backend/util-common";
import { getContainerExecTerminalName } from "../../../common/util-common";
export default {
components: {
@@ -37,7 +37,9 @@ export default {
return getContainerExecTerminalName(this.stackName, this.serviceName, 0);
},
sh() {
return {
let endpoint = this.$route.params.endpoint;
let data = {
name: "containerTerminal",
params: {
stackName: this.stackName,
@@ -45,6 +47,13 @@ export default {
type: "sh",
},
};
if (endpoint) {
data.name = "containerTerminalEndpoint";
data.params.endpoint = endpoint;
}
return data;
},
},
mounted() {

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

@@ -34,7 +34,7 @@
</template>
<script>
import { statusNameShort } from "../../../backend/util-common";
import { statusNameShort } from "../../../common/util-common";
export default {
components: {

13
frontend/src/router.ts
View File

@@ -35,16 +35,23 @@ const routes = [
component: Compose,
},
{
path: "/compose/:stackName",
name: "compose",
path: "/compose/:stackName/:endpoint",
component: Compose,
},
{
path: "/compose/:stackName",
component: Compose,
props: true,
},
{
path: "/terminal/:stackName/:serviceName/:type",
component: ContainerTerminal,
name: "containerTerminal",
},
{
path: "/terminal/:stackName/:serviceName/:type/:endpoint",
component: ContainerTerminal,
name: "containerTerminalEndpoint",
},
]
},
{