commit d4e63376100b182b24649581e16fcf4f642961a3
parent a55dd0f1080ed58a0a2dea4a11bed354ed27c424
Author: Vetle Haflan <vetle@haflan.dev>
Date: Mon, 13 Apr 2020 19:45:08 +0200
Events.vue MVP++
Diffstat:
7 files changed, 55 insertions(+), 45 deletions(-)
diff --git a/internal/events/events.go b/internal/events/events.go
@@ -21,12 +21,13 @@ var (
// Event contains data sent to sermoni from a service
type Event struct {
- ID uint64 `json:"id"`
- Service uint64 `json:"service"` // ID of a Service (to be mapped to service name client-side)
- Timestamp uint64 `json:"timestamp"`
- Status string `json:"status"`
- Title string `json:"title"`
- Details string `json:"details"`
+ ID uint64 `json:"id"`
+ Service uint64 `json:"serviceid"`
+ Timestamp uint64 `json:"timestamp"`
+ Status string `json:"status"`
+ Title string `json:"title"`
+ Details string `json:"details"`
+ ServiceName string `json:"service"` // Name of service - not persisted to DB
}
// GetAll returns all events in the database
diff --git a/internal/events/events_test.go b/internal/events/events_test.go
@@ -30,21 +30,25 @@ func (e1 *Event) equals(e2 *Event) bool {
var testEvents = []*Event{
{
+ Service: 1,
Timestamp: 1586558825515,
Status: "ok",
Title: "Backup completed successfully",
},
{
+ Service: 1,
Timestamp: 1586558838488,
Status: "info",
Title: "SSH login for user vetle",
Details: "User vetle logged in from IP 192.168.10.110",
},
{
+ Service: 1,
Timestamp: 1586558848488,
Status: "ok",
},
{
+ Service: 1,
Timestamp: 1586558949488,
Status: "error",
Title: "Backup failed",
@@ -53,8 +57,9 @@ var testEvents = []*Event{
}
func TestAddEvent(t *testing.T) {
+ var err error
for _, event := range testEvents {
- if err := Add(serviceToken, event); err != nil {
+ if err = Add(event); err != nil {
fmt.Println(err)
t.Fatal("error returned when trying to add event")
}
diff --git a/internal/http/events.go b/internal/http/events.go
@@ -23,6 +23,12 @@ func getEvents(w http.ResponseWriter, r *http.Request) {
*/
events := events.GetAll()
+ var s *services.Service
+ for _, e := range events {
+ // Could optimize by writing a single db.View, but this is more readable, so meh..
+ s = services.GetByID(e.Service)
+ e.ServiceName = s.Name
+ }
b, _ := json.Marshal(events)
w.Write(b)
}
diff --git a/ui/src/App.vue b/ui/src/App.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <header>
+ <header :style="headerStyle">
<div id="bar">
<div style="font-size: 1.5em; color: #bbf">> sermoni</div>
<div @click="togglePage" style="margin-left: auto;">
@@ -9,7 +9,10 @@
</div>
</header>
<main>
- <component v-if="page" :is="page" @login="login"/>
+ <component v-if="page"
+ :is="page"
+ @login="login"
+ @error="error = true"/>
</main>
</div>
</template>
@@ -27,11 +30,13 @@
return {
page: null,
serviceView: false,
+ error: false
};
},
methods: {
login() {
this.page = Events;
+ this.error = false;
},
togglePage() {
// Should do nothing when on login page
@@ -44,6 +49,14 @@
}
}
},
+ computed: {
+ headerStyle() {
+ const bgColor = this.error ? "#fce1e1" : "#eef";
+ return {
+ "background-color": bgColor
+ };
+ }
+ },
mounted() {
api.init(
successData => {
@@ -71,7 +84,6 @@ body {
}
header {
z-index: 1000;
- background-color: #eef;
border-bottom: 1px solid rgba(0,0,0,.075);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
box-shadow: 0 0 10px rgba(0,0,0,.1);
diff --git a/ui/src/Events.vue b/ui/src/Events.vue
@@ -6,10 +6,9 @@
:style="e.style">
<div class="event-field">{{ e.service }}</div>
<!-- TODO: Include VueMQ
- <mq-layout mq="md+">
+ <!--<mq-layout mq="md+">-->
<div class="event-field">{{ e.title }}</div>
- </mq-layout>
- -->
+ <!--</mq-layout>-->
</div>
<div v-show="false"> more info here </div>
</div>
@@ -17,38 +16,12 @@
</template>
<script>
+ import api from "./requests.js";
export default {
name: "Events",
data() {
return {
- testdata: [{
- service: "backup-files @ haflan.dev",
- timestamp: 1586459792925,
- title: "Server reported success",
- status: "ok"
- },{
- service: "backup-gitlab @ haflan.dev",
- timestamp: 1586459793155,
- title: "Server reported success",
- status: "ok"
- },{
- service: "backup-qumps @ haflan.dev",
- timestamp: 1586459793285,
- status: "warning",
- title: "Memory almost full",
- message: "df -h reports that less than 1GB is available"
- },{
- service: "backup-offsite @ work-computer",
- timestamp: 1586459794385,
- status: "error",
- title: "Expectation not met" // These are read from a default title thingy
- },{
- service: "ssh @ haflan.dev",
- timestamp: 1586459794385,
- status: "info",
- title: "SSH server login",
- message: "User vetle logged in from IP 192.168.10.105"
- }],
+ loadedEvents: [],
statusStyling: {
"ok": { color: "#000", backgroundColor: "#c3e6cb" },
"warning": { color: "#000", backgroundColor: "#ffeeba" },
@@ -63,19 +36,24 @@
if (style) {
return style;
} else {
- return { color: "#fff", backgroundColor: "#000" };
+ return { color: "#000", backgroundColor: "#fff" };
}
}
},
computed: {
events() {
- return this.testdata.map(e => {
+ return this.loadedEvents.map(e => {
return {
...e,
style: this.statusStyle(e.status)
};
});
}
+ },
+ mounted() {
+ api.getEvents(successData => {
+ this.loadedEvents = successData;
+ });
}
}
diff --git a/ui/src/Login.vue b/ui/src/Login.vue
@@ -25,6 +25,9 @@
this.passphrase,
success => {
this.$emit("login");
+ },
+ error => {
+ this.$emit("error");
}
);
}
diff --git a/ui/src/requests.js b/ui/src/requests.js
@@ -6,6 +6,7 @@ export default {
getServices,
postService,
deleteService,
+ getEvents,
}
/***** Login and authentication *****/
@@ -63,8 +64,12 @@ function deleteService(id) {
// (TODO)
-function getEvents() {
-
+function getEvents(successHandler, errorHandler) {
+ request({
+ url: "/events",
+ success: successHandler,
+ error: errorHandler
+ });
}
function deleteEvent(id) {
