WIP
This commit is contained in:
Louis Lam
parent
f50c7cead8
commit
08813cbc29
6 changed files with 80 additions and 58 deletions
|
|
@ -20,8 +20,9 @@ export class DockgeInstanceManager {
|
|||
|
||||
connect(socket: DockgeSocket) {
|
||||
|
||||
let list : Record<string, { username : string, password : string}> = {
|
||||
"ws://louis-twister-pi:5001": {
|
||||
let list : Record<string, {tls : boolean, username : string, password : string}> = {
|
||||
"louis-twister-pi:5001": {
|
||||
tls: false,
|
||||
username: "admin",
|
||||
password: process.env.DOCKGE_PW || "",
|
||||
}
|
||||
|
|
@ -31,28 +32,41 @@ export class DockgeInstanceManager {
|
|||
log.info("INSTANCEMANAGER", "Connecting to all instance socket server(s)...");
|
||||
}
|
||||
|
||||
for (let url in list) {
|
||||
let item = list[url];
|
||||
for (let endpoint in list) {
|
||||
let item = list[endpoint];
|
||||
|
||||
let url = (item.tls) ? "wss://" : "ws://";
|
||||
url += endpoint;
|
||||
|
||||
log.info("INSTANCEMANAGER", "Connecting to the socket server: " + endpoint);
|
||||
let client = io(url, {
|
||||
transports: [ "websocket", "polling" ],
|
||||
});
|
||||
|
||||
client.on("connect", () => {
|
||||
log.info("INSTANCEMANAGER", "Connected to the socket server: " + url);
|
||||
log.info("INSTANCEMANAGER", "Connected to the socket server: " + endpoint);
|
||||
|
||||
client.emit("login", {
|
||||
username: item.username,
|
||||
password: item.password,
|
||||
}, (res) => {
|
||||
if (res.ok) {
|
||||
log.info("INSTANCEMANAGER", "Logged in to the socket server: " + url);
|
||||
log.info("INSTANCEMANAGER", "Logged in to the socket server: " + endpoint);
|
||||
} else {
|
||||
log.error("INSTANCEMANAGER", "Failed to login to the socket server: " + url);
|
||||
log.error("INSTANCEMANAGER", "Failed to login to the socket server: " + endpoint);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
client.on("error", (err) => {
|
||||
log.error("INSTANCEMANAGER", "Error from the socket server: " + endpoint);
|
||||
log.error("INSTANCEMANAGER", err);
|
||||
});
|
||||
|
||||
client.on("disconnect", () => {
|
||||
log.info("INSTANCEMANAGER", "Disconnected from the socket server: " + endpoint);
|
||||
});
|
||||
|
||||
// Catch all events
|
||||
client.onAny((eventName, ...args) => {
|
||||
log.debug("INSTANCEMANAGER", "Received event: " + eventName);
|
||||
|
|
@ -61,10 +75,15 @@ export class DockgeInstanceManager {
|
|||
"stackList",
|
||||
];
|
||||
|
||||
if (proxyEventList.includes(eventName)) {
|
||||
socket.emit(eventName, ...args, url);
|
||||
if (proxyEventList.includes(eventName) &&
|
||||
args.length >= 1 &&
|
||||
typeof(args[0]) === "object" &&
|
||||
args[0].endpoint === undefined // Only proxy the event from the endpoint, any upstream event will be ignored
|
||||
) {
|
||||
args[0].endpoint = endpoint;
|
||||
socket.emit(eventName, ...args);
|
||||
} else {
|
||||
log.debug("INSTANCEMANAGER", "Event not in the proxy list: " + eventName);
|
||||
log.debug("INSTANCEMANAGER", "Event not in the proxy list or cannot set endpoint to the res: " + eventName);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -525,6 +525,7 @@ export class DockgeServer {
|
|||
this.io.to(room).emit("stackList", {
|
||||
ok: true,
|
||||
stackList: Object.fromEntries(map),
|
||||
endpoint: undefined,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
<template>
|
||||
<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 v-if="stack.endpoint" class="endpoint">{{ stack.endpoint }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
|
|
@ -52,10 +55,10 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
url() {
|
||||
if (!this.stack.instanceURL) {
|
||||
if (!this.stack.endpoint) {
|
||||
return `/compose/${this.stack.name}`;
|
||||
}
|
||||
return `/compose/${this.stack.name}/${this.stack.instanceURL}`;
|
||||
return `/compose/${this.stack.name}/${this.stack.endpoint}`;
|
||||
},
|
||||
depthMargin() {
|
||||
return {
|
||||
|
|
@ -123,16 +126,36 @@ 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 {
|
||||
|
|
|
|||
|
|
@ -37,10 +37,10 @@ export default defineComponent({
|
|||
|
||||
completeStackList() {
|
||||
let list : Record<string, any> = this.stackList;
|
||||
for (let instanceURL in this.instanceList) {
|
||||
let instance = this.instanceList[instanceURL];
|
||||
for (let endpoint in this.instanceList) {
|
||||
let instance = this.instanceList[endpoint];
|
||||
for (let stackName in instance.stackList) {
|
||||
list[stackName + "_" + instanceURL] = instance.stackList[stackName];
|
||||
list[stackName + "_" + endpoint] = instance.stackList[stackName];
|
||||
}
|
||||
}
|
||||
return list;
|
||||
|
|
@ -198,23 +198,25 @@ export default defineComponent({
|
|||
terminal.write(data);
|
||||
});
|
||||
|
||||
socket.on("stackList", (res, instanceURL) => {
|
||||
socket.on("stackList", (res) => {
|
||||
console.log(res);
|
||||
if (res.ok) {
|
||||
if (!instanceURL) {
|
||||
if (!res.endpoint) {
|
||||
this.stackList = res.stackList;
|
||||
} else {
|
||||
if (!this.instanceList[instanceURL]) {
|
||||
this.instanceList[instanceURL] = {
|
||||
if (!this.instanceList[res.endpoint]) {
|
||||
this.instanceList[res.endpoint] = {
|
||||
stackList: {},
|
||||
};
|
||||
}
|
||||
|
||||
// Set endpoint for each stack
|
||||
for (let stackName in res.stackList) {
|
||||
const stackObj = res.stackList[stackName];
|
||||
stackObj.instanceURL = instanceURL;
|
||||
stackObj.endpoint = res.endpoint;
|
||||
}
|
||||
|
||||
this.instanceList[instanceURL].stackList = res.stackList;
|
||||
this.instanceList[res.endpoint].stackList = res.stackList;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -38,7 +38,10 @@ const routes = [
|
|||
path: "/compose/:stackName",
|
||||
name: "compose",
|
||||
component: Compose,
|
||||
props: true,
|
||||
},
|
||||
{
|
||||
path: "/compose/:stackName/:endpoint",
|
||||
component: Compose,
|
||||
},
|
||||
{
|
||||
path: "/terminal/:stackName/:serviceName/:type",
|
||||
|
|
|
|||
|
|
@ -490,33 +490,7 @@ optgroup {
|
|||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 52px;
|
||||
text-decoration: none;
|
||||
border-radius: 10px;
|
||||
transition: all ease-in-out 0.15s;
|
||||
width: 100%;
|
||||
padding: 0 8px;
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $highlight-white;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #cdf8f4;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: inline-block;
|
||||
margin-top: -4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue