<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>Node manager</title> <!-- Bootstrap core CSS --> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"> <style> body { font-size: 12px; } .success { color: green; } .error { color: red; } </style> </head> <body> <!-- Page Content --> <div class="container" id="app"> <div class="row"> <div class="col-lg-12"> <h1 class="mt-5">Node</h1> <p> Overall index: <em>{( node.index.toFixed(2) )}</em><br> Load 1 index: <em>{( node.load1_index.toFixed(2) )}</em><br> Load 5 index: <em>{( node.load5_index.toFixed(2) )}</em><br> Load 15 index: <em>{( node.load15_index.toFixed(2) )}</em><br> Memory index: <em>{( node.memory_index.toFixed(2) )}</em><br> Disk space index: <em>{( node.disk_space_index.toFixed(2) )}</em> </p> </div> </div> <div class="row"> <div class="col-lg-12"> <h1 class="mt-5">Applications</h1> <div v-if="api_response"> <strong>Response:</strong> <span v-bind:class="{ success: isSuccess, error: hasError }">{( api_response )}</span> </div> <table class="table table-striped"> <thead> <tr> <th>Name</th> <th>Status</th> <th>Image</th> <th>CPU</th> <th>Memory</th> <th>Disk space</th> <th>Inodes</th> <th>Tags</th> <th></th> </tr> </thead> <tbody> <tr v-for="app in apps"> <td><strong>{( app.name )}</strong></td> <td>{( app.state )}</td> <td>{( app.image.replace("docker.io/", "") )}</td> <td>{( (app.cpu_usage).toFixed(2) )} % / {( app.cpu )} %</td> <td>{( (app.memory_usage/1000/1000).toFixed(2) )} MB / {( app.memory )} MB</td> <td>{( (app.disk_usage_bytes / 1000 / 1000 / 1000).toFixed(2) )} GB</td> <td>{( app.disk_usage_inodes )}</td> <td> <span v-for="label in app.labels" class="label label-info">{( label.value )}</span> </td> <td> <button class="btn btn-success btn-sm" v-on:click="start(app.name)" v-if="['stopped', 'created', 'exited'].includes(app.state)">Start</button> <button class="btn btn-warning btn-sm" v-on:click="stop(app.name)" v-if="['running'].includes(app.state)">Stop</button> <button class="btn btn-warning btn-sm" v-on:click="restart(app.name)" v-if="['running'].includes(app.state)">Restart</button> <button class="btn btn-warning btn-sm" v-on:click="rebuild(app.name)">Rebuild</button> <button class="btn btn-danger btn-sm" v-on:click="remove(app.name)">Delete</button> </td> </tr> </tbody> </table> </div> </div> </div> <!-- Bootstrap core JavaScript --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', delimiters: ['{(', ')}'], data: { apps: [], api_status_code: 0, api_response: "", node: {}, }, created() { fetch('/v1/apps?token={{ .Token }}').then(response => response.json()) .then(data => this.apps = data); fetch('/v1/node?token={{ .Token }}').then(response => response.json()) .then(data => this.node = data); }, methods: { isSuccess: () => { return this.api_status_code >= 200 && this.api_status_code <= 299 }, hasError: () => { return this.api_status_code >= 400 && this.api_status_code < 505 }, refresh: () => { fetch('/v1/apps?token={{ .Token }}').then(response => response.json()) .then(data => this.apps = data); fetch('/v1/node?token={{ .Token }}').then(response => response.json()) .then(data => this.node = data); }, start: (id) => { app.api_response = "working" fetch('/v1/apps/'+id+'/start?token={{ .Token }}', {method: 'PUT'}) .then(response => { app.api_status_code = response.status return response.json() }) .then(data => app.api_response = data) }, stop: (id) => { app.api_response = "working" fetch('/v1/apps/'+id+'/stop?token={{ .Token }}', {method: 'PUT'}) .then(response => { app.api_status_code = response.status return response.json() }) .then(data => app.api_response = data) }, restart: (id) => { app.api_response = "working" fetch('/v1/apps/'+id+'/restart?token={{ .Token }}', {method: 'PUT'}) .then(response => { app.api_status_code = response.status return response.json() }) .then(data => app.api_response = data) }, rebuild: (id) => { app.api_response = "working" fetch('/v1/apps/'+id+'/rebuild?token={{ .Token }}', {method: 'PUT'}) .then(response => { app.api_status_code = response.status return response.json() }) .then(data => { app.api_response = data }) }, remove: (id) => { app.api_response = "working" fetch('/v1/apps/'+id+"?token={{ .Token }}", {method: 'DELETE'}) .then(response => { response.json() app.api_status_code = response.status }) .then(data => app.api_response = data) }, }, }) </script> </body> </html>