1<template>
2  <div
3    class="entry"
4    :class="[
5      {
6        'inactive': !source.occured,
7        'just-inactivated': source.justInactivated,
8      },
9      source.level.toLowerCase()
10    ]"
11  >
12    <div class="level-column">
13      <div>
14        <div class="icon" v-if="source.level.toLowerCase() === 'verbose'">
15          v
16        </div>
17        <i class="material-icons icon" v-else>
18          {{ levelIcons[source.level.toLowerCase()] }}
19        </i>
20        <md-tooltip md-direction="right" style="margin-left: -15px">
21          {{ source.level.toLowerCase() }}
22        </md-tooltip>
23      </div>
24    </div>
25    <div class="time-column">
26      <a @click="setTimelineTime(source.timestamp)" class="time-link">
27        {{source.time}}
28      </a>
29      <div
30        class="new-badge"
31        :style="{visibility: source.new ? 'visible' : 'hidden'} "
32      >
33        New
34      </div>
35    </div>
36    <div class="tag-column">{{source.tag}}</div>
37    <div class="at-column">{{source.at}}</div>
38    <div class="message-column">{{source.text}}</div>
39  </div>
40</template>
41
42<script>
43import {logLevel} from './utils/consts';
44
45export default {
46  name: 'logentry',
47  props: {
48    index: {
49      type: Number,
50    },
51    source: {
52      type: Object,
53      default() {
54        return {};
55      },
56    },
57  },
58  data() {
59    return {
60      levelIcons: {
61        [logLevel.INFO]: 'info_outline',
62        [logLevel.DEBUG]: 'help_outline',
63        [logLevel.VERBOSE]: 'assignment',
64        [logLevel.WARN]: 'warning',
65        [logLevel.ERROR]: 'error',
66        [logLevel.WTF]: 'bolt',
67      },
68    };
69  },
70  methods: {
71    setTimelineTime(timestamp) {
72      this.$store.dispatch('updateTimelineTime', timestamp);
73    },
74  },
75};
76</script>
77<style scoped>
78.level-column {
79  width: 2em;
80  display: inline-flex;
81}
82
83.level-column > div {
84  align-self: start;
85}
86
87.time-column {
88  display: inline-flex;
89  width: 13em;
90}
91
92.time-column .time-link {
93  width: 9em;
94}
95
96.tag-column {
97  width: 11em;
98  min-width: 11em;
99}
100
101.at-column {
102  width: 30em;
103  min-width: 30em;
104}
105
106.message-column {
107  min-width: 50em;
108  flex-grow: 1;
109  word-wrap: break-word;
110}
111
112.entry {
113  width: 100%;
114  display: inline-flex;
115}
116
117.entry:hover {
118  background: #f1f1f1;
119}
120
121.entry > div {
122  padding: 6px 10px;
123  border-bottom: 1px solid #f1f1f1;
124}
125
126a {
127  cursor: pointer;
128}
129
130.inactive {
131  color: gray;
132}
133
134.inactive a {
135  color: gray;
136}
137
138.just-inactivated {
139  background: #dee2e3;
140}
141
142.new-badge {
143  display: inline-block;
144  background: rgb(84, 139, 247);
145  border-radius: 3px;
146  color: white;
147  padding: 0 5px;
148  margin-left: 5px;
149  font-size: 10px;
150  align-self: flex-start;
151}
152
153.entry.warn, .entry.warn > div {
154  background: #FFE0B2;
155}
156
157.entry.warn.inactive, .entry.warn.inactive > div {
158  background: #FFF3E0;
159}
160
161.entry.error, .entry.error > div,
162.entry.wtf, .entry.wtf > div {
163  background: #FFCCBC;
164}
165
166.entry.error.inactive, .entry.error.inactive > div,
167.entry.wtf.inactive, .entry.wtf.inactive > div {
168  background: #FBE9E7;
169}
170
171.level-column .icon {
172  font-size: 15px;
173  color: gray;
174  width: 15px;
175  height: 15px;
176  text-align: center;
177}
178
179.entry.warn .level-column .icon {
180  color: #FBC02D;
181  font-size: 20px;
182}
183
184.entry.error .level-column .icon, .entry.wtf .level-column .icon  {
185  color: #FF6E40;
186  font-size: 20px;
187}
188</style>
189