-
-
Notifications
You must be signed in to change notification settings - Fork 4.1k
/
TimelineEventInspector.vue
150 lines (131 loc) · 3.81 KB
/
TimelineEventInspector.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<script lang="ts">
import StateInspector from '@front/features/inspector/StateInspector.vue'
import EmptyPane from '@front/features/layout/EmptyPane.vue'
import { computed, defineComponent } from 'vue'
import { useDarkMode } from '@front/util/theme'
import { toStrHex, dimColor, boostColor } from '@front/util/color'
import { useInspectedEvent, useSelectedEvent } from './composable'
export default defineComponent({
components: {
StateInspector,
EmptyPane,
},
setup () {
const {
inspectedEvent,
inspectedEventState,
time,
loading,
} = useInspectedEvent()
const {
selectedEvent,
} = useSelectedEvent()
const isSelected = computed(() => selectedEvent.value === inspectedEvent.value)
const { darkMode } = useDarkMode()
const color = computed(() => toStrHex(inspectedEvent.value?.layer.color))
const dimmedColor = computed(() => toStrHex(dimColor(inspectedEvent.value?.layer.color, darkMode.value)))
const boostedColor = computed(() => toStrHex(boostColor(inspectedEvent.value?.layer.color, darkMode.value)))
return {
inspectedEvent,
inspectedEventState,
time,
loading,
isSelected,
color,
dimmedColor,
boostedColor,
}
},
})
</script>
<template>
<div
v-if="inspectedEvent && inspectedEventState"
class="flex flex-col h-full"
>
<div class="header flex-none flex items-center border-b border-gray-200 dark:border-gray-700 px-2 pl-3 h-8 box-content text-bluegray-900 dark:text-bluegray-100 space-x-2">
<div
class="flex-none w-2.5 h-2.5 rounded-full border-2"
:style="{
borderColor: `#${isSelected ? boostedColor : color}`,
backgroundColor: `#${isSelected ? dimmedColor : color}`
}"
/>
<span class="flex-1 font-mono truncate text-xs">
<span
class="font-medium"
:style="{
color: `#${boostedColor}`
}"
>
{{ inspectedEvent.title || 'Event' }}
</span>
<VueIcon
v-if="inspectedEvent.logType === 'error'"
icon="error"
class="w-4 h-4 text-red-500"
/>
<VueIcon
v-if="inspectedEvent.logType === 'warning'"
icon="warning"
class="w-4 h-4 text-yellow-500"
/>
<span
v-if="inspectedEvent.subtitle"
class="opacity-75"
v-html="inspectedEvent.subtitle"
/>
</span>
<span class="event-time flex-none flex items-center space-x-0.5 text-2xs font-mono px-1.5 py-0.5 rounded-full bg-bluegray-100 dark:bg-bluegray-900 text-bluegray-700 dark:text-bluegray-300">
<VueIcon
icon="schedule"
class="w-3 h-3 opacity-75"
/>
<span>{{ time }}</span>
</span>
</div>
<div
v-if="$shared.debugInfo"
class="opacity-50 text-2xs px-2 text-center border-b border-gray-200 dark:border-gray-700"
>
Time: {{ inspectedEvent.time }}
</div>
<VueLoadingBar
v-if="loading"
unknown
class="primary ghost"
/>
<StateInspector
:state="{
'event info': inspectedEventState,
...inspectedEvent.group ? {
'group info': {
events: inspectedEvent.group.events.length,
duration: {
_custom: {
value: inspectedEvent.group.duration,
display: `${inspectedEvent.group.duration / 1000} ms`
}
}
}
} : {}
}"
class="flex-1 overflow-x-auto"
:class="{
'grayscale': loading
}"
/>
</div>
<div
v-else-if="loading"
class="relative h-full"
>
<VueLoadingIndicator class="primary overlay big" />
</div>
<EmptyPane
v-else
icon="subject"
>
Select an event to display details
</EmptyPane>
</template>