Create component for Log Entry Message

src/views/moderation_log/LogEntryMessage.vue

@@ -0,0 +1,50 @@
+<template>
+  <span>
+    <router-link
+      v-if="propertyExists(actor, 'id')"
+      :to="{ name: 'UsersShow', params: { id: actor.id }}"
+      class="router-link">
+      <span v-if="propertyExists(actor, 'nickname')">
+        @{{ actor.nickname }}
+      </span>
+    </router-link>
+    <span>{{ logEntryMessage }}</span>
+  </span>
+</template>
+
+<script>
+
+export default {
+  name: 'LogEntryMessage',
+  props: {
+    actor: {
+      type: Object,
+      required: true
+    },
+    message: {
+      type: String,
+      required: true
+    },
+    data: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    logEntryMessage() {
+      return this.message
+    }
+  },
+  methods: {
+    propertyExists(account, property) {
+      return account[property]
+    }
+  }
+}
+</script>
+
+<style rel='stylesheet/scss' lang='scss'>
+ .router-link {
+    text-decoration: none;
+  }
+</style>

src/views/moderation_log/index.vue

@@ -43,7 +43,7 @@
         v-for="(logEntry, index) in log"
         :key="index"
         :timestamp="normalizeTimestamp(logEntry.time)">
-        {{ logEntry.message }}
+        <log-entry-message :actor="logEntry.data.actor" :data="logEntry.data" :message="logEntry.message"/>
       </el-timeline-item>
     </el-timeline>
     <div class="pagination">
@@ -64,9 +64,10 @@ import moment from 'moment'
 import _ from 'lodash'
 import debounce from 'lodash.debounce'
 import RebootButton from '@/components/RebootButton'
+import LogEntryMessage from './LogEntryMessage'
 
 export default {
-  components: { RebootButton },
+  components: { RebootButton, LogEntryMessage },
   data() {
     return {
       dateRange: '',