1<template> 2 <b-list-group> 3 <b-list-group-item href="#" class="flex-column align-items-start"> 4 #{{ logging.entry.Id }} 5 <b-badge variant="danger">{{ logging.entry.Severity }}</b-badge> 6 <div class="d-flex w-100 justify-content-between"> 7 <small>{{ 8 logging.entry.Timestamp | date("MMM, DD YYYY HH:MM:SS A ZZ") 9 }}</small> 10 <ChevronRight16 /> 11 </div> 12 <p class="mb-1"> 13 {{ logging.entry.EventID }}: {{ logging.entry.Description }} 14 </p> 15 </b-list-group-item> 16 </b-list-group> 17</template> 18 19<script> 20import ChevronRight16 from "@carbon/icons-vue/es/chevron--right/16"; 21 22export default { 23 name: "events", 24 components: { 25 ChevronRight16 26 }, 27 data() { 28 return { 29 logging: { 30 entry: { 31 Description: 32 "An internal failure has occurred while performing an operation.", 33 EventID: "ABCDEF123", 34 Id: 1, 35 Resolved: false, 36 Severity: "Error", 37 Timestamp: 1574782085071 38 } 39 } 40 }; 41 } 42}; 43</script> 44