UI: Load data into vue
This commit is contained in:
parent
51249d1b2c
commit
c728f4f2af
3 changed files with 31 additions and 16 deletions
3
api.http
3
api.http
|
@ -17,7 +17,8 @@ Content-type: application/json
|
|||
|
||||
{
|
||||
"ssh_port": 46500,
|
||||
"http_port": 46501
|
||||
"http_port": 46501,
|
||||
"memory": 128
|
||||
}
|
||||
|
||||
|
||||
|
|
11
main.go
11
main.go
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
Loading…
Reference in a new issue