UI: Load data into vue

This commit is contained in:
Adam Štrauch 2020-07-14 23:40:47 +02:00
parent 51249d1b2c
commit c728f4f2af
Signed by: cx
GPG Key ID: 018304FFA8988F8D
3 changed files with 31 additions and 16 deletions

View File

@ -17,7 +17,8 @@ Content-type: application/json
{
"ssh_port": 46500,
"http_port": 46501
"http_port": 46501,
"memory": 128
}

11
main.go
View File

@ -134,6 +134,10 @@ func main() {
}
err = container.Destroy()
if err != nil && err.Error() == "no container found" {
// We don't care if the container didn't exist anyway
err = nil
}
if err != nil {
return c.JSONPretty(http.StatusInternalServerError, Message{Message: err.Error()}, JSONIndent)
}
@ -143,12 +147,7 @@ func main() {
return c.JSONPretty(http.StatusInternalServerError, Message{Message: err.Error()}, JSONIndent)
}
err = container.Start()
if err != nil {
return c.JSONPretty(http.StatusInternalServerError, Message{Message: err.Error()}, JSONIndent)
}
return c.JSON(http.StatusOK, map[string]string{})
return c.JSON(http.StatusOK, Message{Message: "ok"})
})
// Stop existing app

View File

@ -18,7 +18,7 @@
<body>
<!-- Page Content -->
<div class="container">
<div class="container" id="app">
<div class="row">
<div class="col-lg-12">
<h1 class="mt-5">Node</h1>
@ -37,6 +37,7 @@
<tr>
<th>Name</th>
<th>Status</th>
<th>Image</th>
<th>CPU</th>
<th>Memory</th>
<th>Disk space</th>
@ -46,14 +47,15 @@
</tr>
</thead>
<tbody>
<tr>
<td><strong>test_1234</strong></td>
<td>running</td>
<td>34 %</td>
<td>50/128 MB</td>
<td>5 GB</td>
<td>12 598</td>
<td>user:cx</td>
<tr v-for="app in apps">
<td><strong>{( app.name )}</strong></td>
<td>{( app.state.state )}</td>
<td>{( app.image )}</td>
<td>- / {( app.cpu )} %</td>
<td>- / {( app.memory )} MB</td>
<td>- GB</td>
<td>-</td>
<td>-</td>
<td>
<button class="btn btn-warning btn-sm">Rebuild</button>
<button class="btn btn-success btn-sm">Start</button>
@ -72,6 +74,19 @@
<!-- 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: [],
},
created() {
fetch('/v1/apps').then(response => response.json())
.then(data => this.apps = data);
}
})
</script>
</body>