Skip to content

Commit

Permalink
frontend update
Browse files Browse the repository at this point in the history
  • Loading branch information
@fluffy-melli
fluffy-melli committed Nov 28, 2024
1 parent 583f081 commit f552472
Show file tree
Hide file tree
Showing 4 changed files with 172 additions and 22 deletions.
21 changes: 18 additions & 3 deletions src/main/kotlin/net/shibadogs/prcm/process/manager.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,12 @@ fun run(processInfo: Builder) : Int {
if (logList.getOrElse(processInfo.status.id) { null } == null) {
logList[processInfo.status.id] = StringBuilder()
}
val processBuilder = ProcessBuilder(processInfo.node.node, processInfo.node.filepath, *processInfo.node.args)
val processBuilder: ProcessBuilder
if (processInfo.node.filepath == "") {
processBuilder = ProcessBuilder(processInfo.node.node, *processInfo.node.args)
} else {
processBuilder = ProcessBuilder(processInfo.node.node, processInfo.node.filepath, *processInfo.node.args)
}
processBuilder.redirectErrorStream(false)
val exists: Boolean = processInfo.node.workdir?.exists() ?: false
if (exists) {
Expand All @@ -40,7 +45,12 @@ fun run(processInfo: Builder) : Int {
var line: String?
val process = processBuilder.start()
var time = getTime()
val startLogger = "[$time] ${processInfo.node.node} ${processInfo.node.filepath} ${processInfo.node.args.joinToString(" ")} ERR:[${processInfo.status.errCount}/10] PID:${PID(process)}"
val startLogger: String
if (exists) {
startLogger = "[$time] :${processInfo.node.workdir}\$ > ${processInfo.node.node} ${processInfo.node.filepath} ${processInfo.node.args.joinToString(" ")} ERR:[${processInfo.status.errCount}/10] PID:${PID(process)}"
} else {
startLogger = "[$time] :~\$ > ${processInfo.node.node} ${processInfo.node.filepath} ${processInfo.node.args.joinToString(" ")} ERR:[${processInfo.status.errCount}/10] PID:${PID(process)}"
}
logList[processInfo.status.id]?.append(startLogger)?.append("\n")
nodeList[processInfo.status.id] = processInfo
processlist[processInfo.status.id] = process
Expand All @@ -65,7 +75,12 @@ fun run(processInfo: Builder) : Int {
errReader.join()
val exit = process.waitFor()
time = getTime()
val endLogger = "[$time] Exit: $exit"
val endLogger: String
if (exists) {
endLogger = "[$time] :${processInfo.node.workdir}\$ > Exit: $exit"
} else {
endLogger = "[$time] :~\$ > Exit: $exit"
}
logList[processInfo.status.id]?.append(endLogger)?.append("\n")
processInfo.status.endTime = Instant.now().epochSecond
processInfo.status.exit = true
Expand Down
39 changes: 30 additions & 9 deletions src/main/resources/static/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,36 +57,57 @@ <h2 class="nodelist-title">Node-List</h2>
</div>
</div>
</div>
<div v-if="status.newnode" class="make-node">
<div v-if="status.newnode && Object.keys(node.config).length == 0" class="make-node">
<form @submit.prevent="status.edit ? submit_edit_config(node.config) : submitForm()">
<input type="text" id="node" v-model="formData.node" placeholder="node" required>
<input type="text" id="workdir" v-model="formData.workdir" placeholder="workdir" required>
<input type="text" id="workdir" v-model="formData.workdir" placeholder="current working directory">
<input type="text" id="node" v-model="formData.node" placeholder="node (Required)" required>
<div v-for="(arg, index) in formData.args" :key="index">
<input type="text" v-model="formData.args[index]" placeholder="args" required>
<button type="button" @click="removeArg(index)">remove args</button>
<br>
</div>
<button type="button" @click="addArg">add args</button>
<p v-if="formData.workdir != ''">:{{formData.workdir}}$ > {{formData.node}} {{formData.args.join(" ")}}</p>
<p v-else>:~$ > {{formData.node}} {{formData.args.join(" ")}}</p>
<br><br>
<button type="submit">upload</button>
<button v-if="status.edit" type="submit">edit</button>
<button v-else type="submit">upload</button>
</form>
</div>
<div class="node-info" v-if="node.config && node.running">
<div v-if="Object.keys(node.config).length != 0">
<div class="config-container">
<p @click="submit_del_config(node.view)">DEL NODE</p>
<p v-if="(node.view in node.running) && node.running[node.view].processInfo.pid != -1" @click="nodestop(node.view)">STOP</p>
<p v-else @click="nodestart(node.view)">START</p>
<p @click="load_edit_config(node.view)">DEIT NODE</p>
</div>
<div class="chart">
<canvas class="chart-usage-memory" id="chart-usage-memory"></canvas>
</div>
<div class="toggle">
<div class="command">
<h2 v-if="(node.view in node.running) && node.running[node.view].processInfo.pid != -1" @click="nodestop(node.view)">STOP</h2>
<h2 v-else @click="nodestart(node.view)">START</h2>
<p v-if="(node.view in node.running)">PID : {{node.running[node.view].processInfo.pid}}</p>
<div class="chart-make-node">
<div v-if="status.newnode && Object.keys(node.config).length != 0" class="make-node">
<form @submit.prevent="status.edit ? submit_edit_config(node.config) : submitForm()">
<input type="text" id="workdir" v-model="formData.workdir" placeholder="current working directory">
<input type="text" id="node" v-model="formData.node" placeholder="node (Required)" required>
<div v-for="(arg, index) in formData.args" :key="index">
<input type="text" v-model="formData.args[index]" placeholder="args" required>
<button type="button" @click="removeArg(index)">remove args</button>
<br>
</div>
<button type="button" @click="addArg">add args</button>
<p v-if="formData.workdir != ''">:{{formData.workdir}}$ > {{formData.node}} {{formData.args.join(" ")}}</p>
<p v-else>:~$ > {{formData.node}} {{formData.args.join(" ")}}</p>
<br><br>
<button v-if="status.edit" type="submit">edit</button>
<button v-else type="submit">upload</button>
</form>
</div>
</div>
<div class="toggle">
<div class="log">
<pre v-if="(node.view in node.running)">PID : {{node.running[node.view].processInfo.pid}}</pre>
<br>
<pre>{{node.log}}</pre>
</div>
</div>
Expand Down
35 changes: 29 additions & 6 deletions src/main/resources/static/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,6 @@ new Vue({
this.loadnodes()
}, 2000)
},
beforeDestroy() {
window.removeEventListener('resize', this.resizeChart)
},
methods: {
async loadnodes() {
const response1 = await axios.get('/api/get-config')
Expand Down Expand Up @@ -70,13 +67,26 @@ new Vue({
this.node.view = id
},
nodechanges() {
this.formData = {
file: '',
node: '',
workdir: '',
args: []
}
if (this.status.edit) {
this.status.node = false
this.status.newnode = true
this.status.edit = false
return
}
this.status.node = !this.status.node
this.status.newnode = !this.status.newnode
this.status.edit = false
},
submitForm() {
this.formData.file = this.formData.args[0]
this.formData.args.splice(0, 1)
if (this.formData.args.length >= 1) {
this.formData.args.splice(0, 1)
this.formData.file = this.formData.args[0]
}
axios.post('/api/new-config', this.formData)
.then(response => {
this.status.edit = false
Expand Down Expand Up @@ -106,13 +116,23 @@ new Vue({
if (this.status.edit) {
this.status.edit = false
this.status.newnode = false
this.formData = {
file: '',
node: '',
workdir: '',
args: []
}
return
}
const config = (await axios.get('/api/get-config')).data
if (!(id in config)) {
alert('fail')
return
}
const args = config[id]?.args ?? []
if (config[id]?.path ?? false) {
args.unshift(config[id]?.path)
}
this.formData = {
id: id,
file: config[id]?.path,
Expand Down Expand Up @@ -146,6 +166,9 @@ new Vue({
this.formData.args.splice(index, 1)
},
draw_memory_chart() {
if (Object.keys(this.node.config).length == 0) {
return
}
if (this.chart.memory != null) {
this.chart.memory.data.labels = this.node._debug.label
this.chart.memory.data.datasets[0].data = this.node._debug.memory
Expand Down
99 changes: 95 additions & 4 deletions src/main/resources/static/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,9 @@ body {
}

#chart-usage-memory {
position: relative;
width: 95%;
height: 300px;
top: 0px;
position: relative;
width: 100%;
height: 300px;
}

.node-info .toggle {
Expand Down Expand Up @@ -127,6 +126,98 @@ body {
width: 100%;
}

.chart-make-node {
position: absolute;
top: 20px;
left: 650px;
}

.make-node {
width: 300px;
margin: 0 auto;
padding: 20px;
background-color: #f4f4f4;
}

.make-node form {
display: flex;
flex-direction: column;
gap: 15px;
}

.make-node input[type="text"] {
padding: 10px;
font-size: 14px;
border: 1px solid #ddd;
border-radius: 5px;
transition: border-color 0.3s ease;
}

.make-node input[type="text"]:focus {
border-color: #007BFF;
outline: none;
}

.make-node button {
padding: 8px 16px;
background-color: #007BFF;
color: white;
font-size: 14px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.make-node button:hover {
background-color: #0056b3;
}

.make-node button[type="button"] {
background-color: #727272;
}

.make-node button[type="button"]:hover {
background-color: #FF7F50;
}

.make-node button[type="button"]:focus {
outline: none;
}

.make-node button[type="button"] {
padding: 6px 12px;
font-size: 12px;
border-radius: 5px;
}

.make-node button[type="button"]:hover {
background-color: #FF7F50;
}

.make-node button[type="submit"] {
align-self: flex-start;
background-color: #28a745;
}

.make-node button[type="submit"]:hover {
background-color: #218838;
}

.make-node div[v-for] {
display: flex;
align-items: center;
gap: 10px;
}

.make-node input[type="text"]:not(:last-child) {
margin-bottom: 10px;
}

.make-node input[type="text"]:hover {
border-color: #ccc;
}

.green {}

.red {}

0 comments on commit f552472

Please sign in to comment.