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

WIP

Browse Source
This commit is contained in:
Louis Lam
2023-12-20 23:29:24 +08:00
parent d99f21fe93
commit d655a8cc21
13 changed files with 322 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,13 +3,12 @@
<Uptime :stack="stack" :fixed-width="true" class="me-2" />
<div class="title">
<span>{{ stackName }}</span>
<div class="endpoint">{{ endpointDisplay }}</div>
<div v-if="Object.keys($root.agentList).length > 1" class="endpoint">{{ endpointDisplay }}</div>
</div>
</router-link>
</template>
<script>
import Uptime from "./Uptime.vue";
export default {

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

@@ -101,5 +101,9 @@
"extra": "Extra",
"newUpdate": "New Update",
"dockgeAgent": "Dockge Agent | Dockge Agents",
"currentEndpoint": "Current"
"currentEndpoint": "Current",
"dockgeURL": "Dockge URL (e.g. http://127.0.0.1:5001)",
"agentOnline": "Online",
"agentOffline": "Offline",
"agentConnecting": "Connecting"
}

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

@@ -29,17 +29,35 @@ export default defineComponent({
loggedIn: false,
allowLoginDialog: false,
username: null,
instanceList: {} as Record<string, any>,
stackList: {},
composeTemplate: "",
stackList: {},
// All stack list from all agents
allAgentStackList: {} as Record<string, any>,
// online / offline / connecting
agentStatusList: {
},
// Agent List
agentList: {
},
};
},
computed: {
completeStackList() {
let list : Record<string, any> = this.stackList;
for (let endpoint in this.instanceList) {
let instance = this.instanceList[endpoint];
let list : Record<string, any> = {};
for (let stackName in this.stackList) {
list[stackName + "_"] = this.stackList[stackName];
}
for (let endpoint in this.allAgentStackList) {
let instance = this.allAgentStackList[endpoint];
for (let stackName in instance.stackList) {
list[stackName + "_" + endpoint] = instance.stackList[stackName];
}
@@ -79,6 +97,15 @@ export default defineComponent({
},
watch: {
"socketIO.connected"() {
if (this.socketIO.connected) {
this.agentStatusList[""] = "online";
} else {
this.agentStatusList[""] = "offline";
}
},
remember() {
localStorage.remember = (this.remember) ? "1" : "0";
},
@@ -122,9 +149,7 @@ export default defineComponent({
this.socketIO.connecting = true;
}, 1500);
socket = io(url, {
transports: [ "websocket", "polling" ]
});
socket = io(url);
// Handling events from agents
let agentSocket = new AgentSocket();
@@ -198,9 +223,6 @@ export default defineComponent({
});
agentSocket.on("terminalWrite", (terminalName, data) => {
console.log(terminalName, data);
const terminal = terminalMap.get(terminalName);
if (!terminal) {
//console.error("Terminal not found: " + terminalName);
@@ -210,18 +232,16 @@ export default defineComponent({
});
agentSocket.on("stackList", (res) => {
console.log(res);
if (res.ok) {
if (!res.endpoint) {
this.stackList = res.stackList;
} else {
if (!this.instanceList[res.endpoint]) {
this.instanceList[res.endpoint] = {
if (!this.allAgentStackList[res.endpoint]) {
this.allAgentStackList[res.endpoint] = {
stackList: {},
};
}
this.instanceList[res.endpoint].stackList = res.stackList;
this.allAgentStackList[res.endpoint].stackList = res.stackList;
}
}
});
@@ -237,6 +257,17 @@ export default defineComponent({
}
});
socket.on("agentStatus", (res) => {
this.agentStatusList[res.endpoint] = res.status;
});
socket.on("agentList", (res) => {
console.log(res);
if (res.ok) {
this.agentList = res.agentList;
}
});
socket.on("refresh", () => {
location.reload();
});

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

@@ -345,7 +345,7 @@ export default {
* @return {*}
*/
globalStack() {
return this.$root.stackList[this.stack.name];
return this.$root.completeStackList[this.stack.name + "_" + this.endpoint];
},
status() {

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

@@ -6,7 +6,8 @@
</h1>
<div class="row first-row">
<div class="col-md-6">
<!-- Left -->
<div class="col-md-7">
<div class="shadow-box big-padding text-center mb-4">
<div class="row">
<div class="col">
@@ -23,26 +24,47 @@
</div>
</div>
</div>
<h2 class="mb-3">{{ $t("Docker Run") }}</h2>
<div class="mb-3">
<textarea id="name" v-model="dockerRunCommand" type="text" class="form-control docker-run" required placeholder="docker run ..."></textarea>
</div>
<button class="btn-normal btn mb-4" @click="convertDockerRun">{{ $t("Convert to Compose") }}</button>
</div>
<div class="col-md-6">
<!-- Right -->
<div class="col-md-5">
<div class="shadow-box big-padding">
<h3 class="mb-3">{{ $tc("dockgeAgent", 2) }} </h3>
<h4 class="mb-3">{{ $tc("dockgeAgent", 2) }} <span class="badge bg-warning" style="font-size: 12px;">beta</span></h4>
<div class="mb-3">
Current
</div>
<button class="btn btn-normal">Add Agent</button>
<button v-if="!showAgentForm" class="btn btn-normal" @click="showAgentForm = !showAgentForm">Add Agent</button>
<!-- Add Agent Form -->
<form v-if="showAgentForm" @submit.prevent="addAgent">
<div class="mb-3">
<label for="url" class="form-label">{{ $t("dockgeURL") }}</label>
<input id="url" v-model="agent.url" type="text" class="form-control" required>
</div>
<div class="mb-3">
<label for="username" class="form-label">{{ $t("Username") }}</label>
<input id="username" v-model="agent.username" type="text" class="form-control" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">{{ $t("Password") }}</label>
<input id="password" v-model="agent.password" type="password" class="form-control" required autocomplete="new-password">
</div>
<button type="submit" class="btn btn-normal">Add Agent</button>
</form>
</div>
</div>
</div>
<h2 class="mb-3">{{ $t("Docker Run") }}</h2>
<div class="mb-3">
<textarea id="name" v-model="dockerRunCommand" type="text" class="form-control docker-run" required placeholder="docker run ..."></textarea>
</div>
<button class="btn-normal btn mb-4" @click="convertDockerRun">{{ $t("Convert to Compose") }}</button>
</div>
</transition>
<router-view ref="child" />
@@ -73,6 +95,12 @@ export default {
importantHeartBeatListLength: 0,
displayedRecords: [],
dockerRunCommand: "",
showAgentForm: false,
agent: {
url: "http://",
username: "",
password: "",
}
};
},
@@ -113,6 +141,12 @@ export default {
methods: {
addAgent() {
alert(123);
this.showAgentForm = false;
},
getStatusNum(statusName) {
let num = 0;