Skip to content

Commit

Permalink
all stop / start / restart
Browse files Browse the repository at this point in the history
  • Loading branch information
@fluffy-melli
fluffy-melli committed Nov 29, 2024
1 parent f552472 commit de18f22
Show file tree
Hide file tree
Showing 2 changed files with 131 additions and 33 deletions.
66 changes: 51 additions & 15 deletions src/main/resources/static/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PRCM</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.0"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
Expand All @@ -20,6 +20,10 @@ <h2 class="nodelist-title">Node-List</h2>
</div>
<div class="controll">
<div v-if="Object.keys(node.config).length != 0">
<div>
<li v-if="node.view == 'main'" class="choice-node" @click="view_choice_node('main')">node-info</li>
<li v-else @click="view_choice_node('main')">node-info</li>
</div>
<div v-for="(row, i) in node.config" :key="i">
<div v-if="Object.keys(node.running).length != 0">
<div v-if="Object.keys(node.running).some(key => node.running[key].status.id == row.id)"
Expand Down Expand Up @@ -74,20 +78,19 @@ <h2 class="nodelist-title">Node-List</h2>
<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="node-info" v-if="node.view == 'main'">
<div>
<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>
<p @click="allstop()">ALL STOP</p>
<p @click="allstart()">ALL START</p>
<p @click="allrestart()">ALL RESTART</p>
</div>
<div class="chart">
<canvas class="chart-usage-memory" id="chart-usage-memory"></canvas>
</div>
<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()">
<form @submit.prevent="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">
Expand All @@ -99,16 +102,49 @@ <h2 class="nodelist-title">Node-List</h2>
<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>
<button 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>
<div v-else class="node-info">
<div 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="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>
</div>
</div>
Expand Down
98 changes: 80 additions & 18 deletions src/main/resources/static/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ new Vue({
node: {
config: null,
running: null,
view: 0,
view: 'main',
log: "",
_debug: {
label: [],
Expand All @@ -36,16 +36,61 @@ new Vue({
},
methods: {
async loadnodes() {
const response1 = await axios.get('/api/get-config')
this.node.config = response1.data
const response2 = await axios.get('/api/get-run-node')
this.node.running = response2.data
const response3 = await axios.get('/api/node/get-log/'+this.node.view)
this.node.log = response3.data
const response4 = await axios.get('/api/node/usage/'+this.node.view)
this.node._debug.memory = response4.data["usage-memory"]
this.node._debug.label = response4.data["label"]
this.draw_memory_chart()
const nodeConfig = await axios.get('/api/get-config')
this.node.config = nodeConfig.data
const runNodeInfo = await axios.get('/api/get-run-node')
this.node.running = runNodeInfo.data
if (this.node.view != 'main') {
const logs = await axios.get('/api/node/get-log/'+this.node.view)
this.node.log = logs.data
const usage = await axios.get('/api/node/usage/'+this.node.view)
this.node._debug.memory = usage.data["usage-memory"]
this.node._debug.label = usage.data["label"]
this.draw_memory_chart()
} else {
let label = []
let memory = []
for (let node of Object.values(this.node.config)) {
const usage = await axios.get('/api/node/usage/'+node.id)
if (node.id == 0) {
memory = usage.data["usage-memory"]
label = usage.data["label"]
} else {
for (j in usage.data["usage-memory"]) {
memory[j] += usage.data["usage-memory"][j]
}
}
}
this.node._debug.memory = memory
this.node._debug.label = label
this.draw_memory_chart()
}
},
allstart() {
for (let node of Object.values(this.node.config)) {
if (node.id in this.node.running) {
continue
}
this.nodestart(node.id)
}
},
allstop() {
for (let node of Object.values(this.node.running)) {
this.nodestop(node.status.id)
}
},
async allrestart() {
for (let node of Object.values(this.node.running)) {
this.nodestop(node.status.id)
}
setTimeout(() => {
for (let node of Object.values(this.node.config)) {
if (node.id in this.node.running) {
continue
}
this.nodestart(node.id)
}
}, 1000);
},
async nodestart(id) {
const response = await axios.get('/api/node/start/'+id)
Expand All @@ -64,7 +109,9 @@ new Vue({
this.loadnodes()
},
view_choice_node(id) {
this.chart.memory = null
this.node.view = id
this.loadnodes()
},
nodechanges() {
this.formData = {
Expand Down Expand Up @@ -166,9 +213,6 @@ 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 Expand Up @@ -198,18 +242,36 @@ new Vue({
ticks: {
callback: function(value) {
if (value >= 1073741824) { // 1024 * 1024 * 1024
return (value / 1073741824).toFixed(2) + ' GB';
return (value / 1073741824).toFixed(2) + ' GB'
} else if (value >= 1048576) { // 1024 * 1024
return (value / 1048576).toFixed(2) + ' MB';
return (value / 1048576).toFixed(2) + ' MB'
} else if (value >= 1024) {
return (value / 1024).toFixed(2) + ' KB';
return (value / 1024).toFixed(2) + ' KB'
} else {
return value + ' Bytes';
return value + ' Bytes'
}
}
}
}
},
plugins: {
tooltip: {
callbacks: {
label: function(tooltipItem) {
var value = tooltipItem.raw;
if (value >= 1073741824) {
return (value / 1073741824).toFixed(2) + ' GB'
} else if (value >= 1048576) {
return (value / 1048576).toFixed(2) + ' MB'
} else if (value >= 1024) {
return (value / 1024).toFixed(2) + ' KB'
} else {
return value + ' Bytes'
}
}
}
}
},
animation: {
duration: 0
},
Expand Down

0 comments on commit de18f22

Please sign in to comment.