Add store modules needed to support overview view
- Update overview page to get data from store
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Id2fcad660efc0da5c7b878e872355bf5773c7ed7
diff --git a/src/views/Overview/OverviewEvents.vue b/src/views/Overview/OverviewEvents.vue
index b49ed6e..0510606 100644
--- a/src/views/Overview/OverviewEvents.vue
+++ b/src/views/Overview/OverviewEvents.vue
@@ -1,43 +1,43 @@
<template>
- <b-list-group>
- <b-list-group-item href="#" class="flex-column align-items-start">
- #{{ logging.entry.Id }}
- <b-badge variant="danger">{{ logging.entry.Severity }}</b-badge>
- <div class="d-flex w-100 justify-content-between">
- <small>{{
- logging.entry.Timestamp | date("MMM, DD YYYY HH:MM:SS A ZZ")
- }}</small>
- <ChevronRight16 />
- </div>
- <p class="mb-1">
- {{ logging.entry.EventID }}: {{ logging.entry.Description }}
- </p>
- </b-list-group-item>
- </b-list-group>
+ <div>
+ <b-list-group v-for="logData in eventLogData" :key="logData.id">
+ <b-list-group-item href="#" class="flex-column align-items-start">
+ {{ "#" + logData.logId }}
+ <b-badge variant="danger">{{ logData.priority }}</b-badge>
+ <div class="d-flex w-100 justify-content-between">
+ <small>{{
+ logData.Timestamp | date("MMM DD YYYY HH:MM:SS A ZZ")
+ }}</small>
+ <ChevronRight16 />
+ </div>
+ <p class="mb-1">{{ logData.eventID }}: {{ logData.description }}</p>
+ </b-list-group-item>
+ </b-list-group>
+ <b-list-group v-if="!eventLogData">
+ There are no high priority events to display at this time.
+ </b-list-group>
+ </div>
</template>
<script>
import ChevronRight16 from "@carbon/icons-vue/es/chevron--right/16";
-
export default {
name: "events",
components: {
ChevronRight16
},
- data() {
- return {
- logging: {
- entry: {
- Description:
- "An internal failure has occurred while performing an operation.",
- EventID: "ABCDEF123",
- Id: 1,
- Resolved: false,
- Severity: "Error",
- Timestamp: 1574782085071
- }
- }
- };
+ created() {
+ this.getEventLogData();
+ },
+ computed: {
+ eventLogData() {
+ return this.$store.getters["eventLog/eventLogData"];
+ }
+ },
+ methods: {
+ getEventLogData() {
+ this.$store.dispatch("eventLog/getEventLogData");
+ }
}
};
</script>