From de18f22479bc33286d904b7af5878f07a5ae9653 Mon Sep 17 00:00:00 2001
From: shibaisdog <kimjaehoon5142@gmail.com>
Date: Sat, 30 Nov 2024 05:04:59 +0900
Subject: [PATCH] all stop / start / restart

---
 src/main/resources/static/index.html | 66 ++++++++++++++-----
 src/main/resources/static/index.js   | 98 +++++++++++++++++++++++-----
 2 files changed, 131 insertions(+), 33 deletions(-)

diff --git a/src/main/resources/static/index.html b/src/main/resources/static/index.html
index 44fad91..91b4174 100644
--- a/src/main/resources/static/index.html
+++ b/src/main/resources/static/index.html
@@ -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/vue@2.6.14/dist/vue.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
     </head>
@@ -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)"
@@ -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">
@@ -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>
diff --git a/src/main/resources/static/index.js b/src/main/resources/static/index.js
index b2aa462..bda13c4 100644
--- a/src/main/resources/static/index.js
+++ b/src/main/resources/static/index.js
@@ -11,7 +11,7 @@ new Vue({
         node: {
             config: null,
             running: null,
-            view: 0,
+            view: 'main',
             log: "",
             _debug: {
                 label: [],
@@ -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)
@@ -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 = {
@@ -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
@@ -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
                     },