Skip to content

Commit 57ad923

Browse files
niemyjskiniemyjski
committed
Improved clickable filters experience on event drawer.
1 parent 46bc091 commit 57ad923

16 files changed

+137
-76
lines changed

‎src/Exceptionless.Web/ClientApp/src/lib/components/events/EventsDrawer.svelte

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -127,27 +127,29 @@
127127
<Table.Body>
128128
<Table.Row>
129129
<Table.Head class="whitespace-nowrap">Occurred On</Table.Head>
130-
<Table.Cell
131-
><ClickableDateFilter term="date" value={$eventResponse.data.date}
132-
><DateTime value={$eventResponse.data.date}></DateTime> (<TimeAgo value={$eventResponse.data.date}></TimeAgo>)</ClickableDateFilter
133-
></Table.Cell
130+
<Table.Cell class="flex items-center"
131+
><DateTime value={$eventResponse.data.date}></DateTime> (<TimeAgo value={$eventResponse.data.date}></TimeAgo>)<ClickableDateFilter
132+
term="date"
133+
value={$eventResponse.data.date}
134+
/></Table.Cell
134135
>
135136
</Table.Row>
136137
{#if $projectResponse.data}
137138
<Table.Row>
138139
<Table.Head class="whitespace-nowrap">Project</Table.Head>
139-
<Table.Cell
140-
><ClickableProjectFilter organization={$projectResponse.data.organization_id} value={[$projectResponse.data.id]}
141-
>{$projectResponse.data.name}</ClickableProjectFilter
142-
></Table.Cell
143-
>
140+
<Table.Cell class="flex items-center"
141+
>{$projectResponse.data.name}<ClickableProjectFilter
142+
organization={$projectResponse.data.organization_id}
143+
value={[$projectResponse.data.id]}
144+
/>
145+
</Table.Cell>
144146
</Table.Row>
145147
{/if}
146148
{#if $stackResponse.data}
147149
<Table.Row>
148150
<Table.Head class="whitespace-nowrap">Stack</Table.Head>
149-
<Table.Cell
150-
><ClickableStringFilter term="stack" value={$stackResponse.data.id}>{$stackResponse.data.title}</ClickableStringFilter></Table.Cell
151+
<Table.Cell class="flex items-center"
152+
>{$stackResponse.data.title}<ClickableStringFilter term="stack" value={$stackResponse.data.id} /></Table.Cell
151153
>
152154
</Table.Row>
153155
{/if}

‎src/Exceptionless.Web/ClientApp/src/lib/components/events/views/Environment.svelte

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,15 @@
1616
{#if environment.machine_name}
1717
<Table.Row>
1818
<Table.Head class="whitespace-nowrap">Machine Name</Table.Head>
19-
<Table.Cell
20-
><ClickableStringFilter term="machine" value={environment.machine_name}>{environment.machine_name}</ClickableStringFilter></Table.Cell
19+
<Table.Cell class="flex items-center"
20+
>{environment.machine_name}<ClickableStringFilter term="machine" value={environment.machine_name} /></Table.Cell
2121
>
2222
</Table.Row>
2323
{/if}
2424
{#if environment.ip_address}
2525
<Table.Row>
2626
<Table.Head class="whitespace-nowrap">IP Address</Table.Head>
27-
<Table.Cell><ClickableStringFilter term="ip" value={environment.ip_address}>{environment.ip_address}</ClickableStringFilter></Table.Cell>
27+
<Table.Cell class="flex items-center">{environment.ip_address}<ClickableStringFilter term="ip" value={environment.ip_address} /></Table.Cell>
2828
</Table.Row>
2929
{/if}
3030
{#if environment.processor_count}
@@ -54,22 +54,22 @@
5454
{#if environment.o_s_name}
5555
<Table.Row>
5656
<Table.Head class="whitespace-nowrap">OS Name</Table.Head>
57-
<Table.Cell><ClickableStringFilter term="os" value={environment.o_s_name}>{environment.o_s_name}</ClickableStringFilter></Table.Cell>
57+
<Table.Cell class="flex items-center">{environment.o_s_name}<ClickableStringFilter term="os" value={environment.o_s_name} /></Table.Cell>
5858
</Table.Row>
5959
{/if}
6060
{#if environment.o_s_version}
6161
<Table.Row>
6262
<Table.Head class="whitespace-nowrap">OS Version</Table.Head>
63-
<Table.Cell
64-
><ClickableStringFilter term="os.version" value={environment.o_s_version}>{environment.o_s_version}</ClickableStringFilter></Table.Cell
63+
<Table.Cell class="flex items-center"
64+
>{environment.o_s_version}<ClickableStringFilter term="os.version" value={environment.o_s_version} /></Table.Cell
6565
>
6666
</Table.Row>
6767
{/if}
6868
{#if environment.architecture}
6969
<Table.Row>
7070
<Table.Head class="whitespace-nowrap">Architecture</Table.Head>
71-
<Table.Cell
72-
><ClickableStringFilter term="architecture" value={environment.architecture}>{environment.architecture}</ClickableStringFilter></Table.Cell
71+
<Table.Cell class="flex items-center"
72+
>{environment.architecture}<ClickableStringFilter term="architecture" value={environment.architecture} /></Table.Cell
7373
>
7474
</Table.Row>
7575
{/if}

‎src/Exceptionless.Web/ClientApp/src/lib/components/events/views/Error.svelte

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,18 +26,18 @@
2626
<Table.Body>
2727
<Table.Row>
2828
<Table.Head class="whitespace-nowrap">Error Type</Table.Head>
29-
<Table.Cell><ClickableStringFilter term="error.type" value={errorType}>{errorType}</ClickableStringFilter></Table.Cell>
29+
<Table.Cell class="flex items-center">{errorType}<ClickableStringFilter term="error.type" value={errorType} /></Table.Cell>
3030
</Table.Row>
3131
{#if message}
3232
<Table.Row>
3333
<Table.Head class="whitespace-nowrap">Message</Table.Head>
34-
<Table.Cell><ClickableStringFilter term="error.message" value={message}>{message}</ClickableStringFilter></Table.Cell>
34+
<Table.Cell class="flex items-center">{message}<ClickableStringFilter term="error.message" value={message} /></Table.Cell>
3535
</Table.Row>
3636
{/if}
3737
{#if code}
3838
<Table.Row>
3939
<Table.Head class="whitespace-nowrap">Code</Table.Head>
40-
<Table.Cell><ClickableVersionFilter term="error.code" value={code}>{code}</ClickableVersionFilter></Table.Cell>
40+
<Table.Cell class="flex items-center">{code}<ClickableVersionFilter term="error.code" value={code} /></Table.Cell>
4141
</Table.Row>
4242
{/if}
4343
{#if submissionMethod}

‎src/Exceptionless.Web/ClientApp/src/lib/components/events/views/Overview.svelte

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -96,61 +96,61 @@
9696
{#if event.reference_id}
9797
<Table.Row>
9898
<Table.Head class="whitespace-nowrap">Reference</Table.Head>
99-
<Table.Cell>
99+
<Table.Cell class="flex items-center">
100100
{#if isSessionStart}
101-
<ClickableSessionFilter value={event.reference_id}>{event.reference_id}</ClickableSessionFilter>
101+
{event.reference_id}<ClickableSessionFilter value={event.reference_id} />
102102
{:else}
103-
<ClickableReferenceFilter value={event.reference_id}>{event.reference_id}</ClickableReferenceFilter>
103+
{event.reference_id}<ClickableReferenceFilter value={event.reference_id} />
104104
{/if}
105105
</Table.Cell>
106106
</Table.Row>
107107
{/if}
108108
{#each references as reference (reference.id)}
109109
<Table.Row>
110110
<Table.Head class="whitespace-nowrap">{reference.name}</Table.Head>
111-
<Table.Cell><ClickableReferenceFilter value={reference.id}>{reference.id}</ClickableReferenceFilter></Table.Cell>
111+
<Table.Cell class="flex items-center">{reference.id}<ClickableReferenceFilter value={reference.id} /></Table.Cell>
112112
</Table.Row>
113113
{/each}
114114
{#if level}
115115
<Table.Row>
116116
<Table.Head class="whitespace-nowrap">Level</Table.Head>
117-
<Table.Cell><ClickableStringFilter term="level" value={level}><LogLevel {level}></LogLevel></ClickableStringFilter></Table.Cell>
117+
<Table.Cell class="flex items-center"><LogLevel {level}></LogLevel><ClickableStringFilter term="level" value={level} /></Table.Cell>
118118
</Table.Row>
119119
{/if}
120120
{#if event.type !== 'error'}
121121
<Table.Row>
122122
<Table.Head class="whitespace-nowrap">Event Type</Table.Head>
123-
<Table.Cell><ClickableTypeFilter value={[event.type]}>{event.type}</ClickableTypeFilter></Table.Cell>
123+
<Table.Cell class="flex items-center">{event.type}<ClickableTypeFilter value={[event.type]} /></Table.Cell>
124124
</Table.Row>
125125
{/if}
126126
{#if hasError}
127127
<Table.Row>
128128
<Table.Head class="whitespace-nowrap">Error Type</Table.Head>
129-
<Table.Cell><ClickableStringFilter term="error.type" value={errorType}>{errorType}</ClickableStringFilter></Table.Cell>
129+
<Table.Cell class="flex items-center">{errorType}<ClickableStringFilter term="error.type" value={errorType} /></Table.Cell>
130130
</Table.Row>
131131
{/if}
132132
{#if event.source}
133133
<Table.Row>
134134
<Table.Head class="whitespace-nowrap">Source</Table.Head>
135-
<Table.Cell><ClickableStringFilter term="source" value={event.source}>{event.source}</ClickableStringFilter></Table.Cell>
135+
<Table.Cell class="flex items-center">{event.source}<ClickableStringFilter term="source" value={event.source} /></Table.Cell>
136136
</Table.Row>
137137
{/if}
138138
{#if !isSessionStart && event.value}
139139
<Table.Row>
140140
<Table.Head class="whitespace-nowrap">Value</Table.Head>
141-
<Table.Cell><ClickableNumberFilter term="value" value={event.value}>{event.value}</ClickableNumberFilter></Table.Cell>
141+
<Table.Cell class="flex items-center">{event.value}<ClickableNumberFilter term="value" value={event.value} /></Table.Cell>
142142
</Table.Row>
143143
{/if}
144144
{#if message}
145145
<Table.Row>
146146
<Table.Head class="whitespace-nowrap">Message</Table.Head>
147-
<Table.Cell><ClickableStringFilter term="message" value={message}>{message}</ClickableStringFilter></Table.Cell>
147+
<Table.Cell class="flex items-center">{message}<ClickableStringFilter term="message" value={message} /></Table.Cell>
148148
</Table.Row>
149149
{/if}
150150
{#if version}
151151
<Table.Row>
152152
<Table.Head class="whitespace-nowrap">Version</Table.Head>
153-
<Table.Cell><ClickableVersionFilter term="version" value={version}>{version}</ClickableVersionFilter></Table.Cell>
153+
<Table.Cell class="flex items-center">{version}<ClickableVersionFilter term="version" value={version} /></Table.Cell>
154154
</Table.Row>
155155
{/if}
156156
{#if location}
@@ -162,9 +162,9 @@
162162
{#if event.tags?.length}
163163
<Table.Row>
164164
<Table.Head class="whitespace-nowrap">Tags</Table.Head>
165-
<Table.Cell class="flex flex-wrap justify-start gap-2 overflow-auto">
165+
<Table.Cell class="flex flex-wrap items-center justify-start gap-2 overflow-auto">
166166
{#each event.tags as tag (tag)}
167-
<ClickableStringFilter term="tag" value={tag}><Badge color="dark">{tag}</Badge></ClickableStringFilter>
167+
<ClickableStringFilter term="tag" value={tag} class="ml-0"><Badge color="dark">{tag}</Badge></ClickableStringFilter>
168168
{/each}
169169
</Table.Cell>
170170
</Table.Row>
@@ -173,7 +173,7 @@
173173
<Table.Row>
174174
<Table.Head class="whitespace-nowrap">URL</Table.Head>
175175
<Table.Cell class="flex items-center gap-x-1">
176-
<ClickableStringFilter term="path" value={requestUrlPath}>{requestUrl}</ClickableStringFilter>
176+
{requestUrl}<ClickableStringFilter term="path" value={requestUrlPath} />
177177

178178
<Button href={requestUrl} target="_blank" variant="outline" size="icon" rel="noopener noreferrer" title="Open in new window"
179179
><IconOpenInNew /></Button
@@ -191,28 +191,29 @@
191191
{#if userEmail}
192192
<Table.Row>
193193
<Table.Head class="whitespace-nowrap">User Email</Table.Head>
194-
<Table.Cell
195-
><ClickableStringFilter term="user.email" value={userEmail}>{userEmail}</ClickableStringFilter>
194+
<Table.Cell class="flex items-center"
195+
>{userEmail}<ClickableStringFilter term="user.email" value={userEmail} />
196196
<A href="mailto:{userEmail}" title="Send email to {userEmail}"><IconEmail /></A></Table.Cell
197197
>
198198
</Table.Row>
199199
{/if}
200200
{#if userIdentity}
201201
<Table.Row>
202202
<Table.Head class="whitespace-nowrap">User Identity</Table.Head>
203-
<Table.Cell><ClickableStringFilter term="user" value={userIdentity}>{userIdentity}</ClickableStringFilter></Table.Cell>
203+
<Table.Cell class="flex items-center">{userIdentity}<ClickableStringFilter term="user" value={userIdentity} /></Table.Cell>
204204
</Table.Row>
205205
{/if}
206206
{#if userName}
207207
<Table.Row>
208208
<Table.Head class="whitespace-nowrap">User Name</Table.Head>
209-
<Table.Cell><ClickableStringFilter term="user.name" value={userName}>{userName}</ClickableStringFilter></Table.Cell>
209+
<Table.Cell class="flex items-center">{userName}<ClickableStringFilter term="user.name" value={userName} /></Table.Cell>
210210
</Table.Row>
211211
{/if}
212212
{#if userDescription}
213213
<Table.Row>
214214
<Table.Head class="whitespace-nowrap">User Description</Table.Head>
215-
<Table.Cell><ClickableStringFilter term="user.description" value={userDescription}>{userDescription}</ClickableStringFilter></Table.Cell>
215+
<Table.Cell class="flex items-center">{userDescription}<ClickableStringFilter term="user.description" value={userDescription} /></Table.Cell
216+
>
216217
</Table.Row>
217218
{/if}</Table.Body
218219
>

‎src/Exceptionless.Web/ClientApp/src/lib/components/events/views/Request.svelte

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
<Table.Row>
5050
<Table.Head class="whitespace-nowrap">URL</Table.Head>
5151
<Table.Cell class="flex items-center gap-x-1">
52-
<ClickableStringFilter term="path" value={requestUrlPath}>{requestUrl}</ClickableStringFilter>
52+
{requestUrl}<ClickableStringFilter term="path" value={requestUrlPath} />
5353

5454
<Button href={requestUrl} target="_blank" variant="ghost" size="sm" rel="noopener noreferrer" title="Open in new window"
5555
><IconOpenInNew /></Button
@@ -59,8 +59,8 @@
5959
{:else if requestUrlPath}
6060
<Table.Row>
6161
<Table.Head class="whitespace-nowrap">URL</Table.Head>
62-
<Table.Cell>
63-
<ClickableStringFilter term="path" value={requestUrlPath}>{requestUrlPath}</ClickableStringFilter></Table.Cell
62+
<Table.Cell class="flex items-center">
63+
{requestUrlPath}<ClickableStringFilter term="path" value={requestUrlPath} /></Table.Cell
6464
>
6565
</Table.Row>
6666
{/if}
@@ -77,29 +77,32 @@
7777
{#if request.client_ip_address}
7878
<Table.Row>
7979
<Table.Head class="whitespace-nowrap">Client IP Address</Table.Head>
80-
<Table.Cell><ClickableStringFilter term="ip" value={request.client_ip_address}>{request.client_ip_address}</ClickableStringFilter></Table.Cell>
80+
<Table.Cell class="flex items-center"
81+
>{request.client_ip_address}<ClickableStringFilter term="ip" value={request.client_ip_address} /></Table.Cell
82+
>
8183
</Table.Row>
8284
{/if}
8385
{#if request.user_agent}
8486
<Table.Row>
8587
<Table.Head class="whitespace-nowrap">User Agent</Table.Head>
86-
<Table.Cell><ClickableStringFilter term="useragent" value={request.user_agent}>{request.user_agent}</ClickableStringFilter></Table.Cell>
88+
<Table.Cell class="flex items-center">{request.user_agent}<ClickableStringFilter term="useragent" value={request.user_agent} /></Table.Cell>
8789
</Table.Row>
8890
{/if}
8991
{#if device}
9092
<Table.Row>
9193
<Table.Head class="whitespace-nowrap">Device</Table.Head>
92-
<Table.Cell><ClickableStringFilter term="device" value={device}>{device}</ClickableStringFilter></Table.Cell>
94+
<Table.Cell class="flex items-center">{device}<ClickableStringFilter term="device" value={device} /></Table.Cell>
9395
</Table.Row>
9496
{/if}
9597
{#if browser}
9698
<Table.Row>
9799
<Table.Head class="whitespace-nowrap">Browser</Table.Head>
98-
<Table.Cell
99-
><ClickableStringFilter term="browser" value={browser}>{browser}</ClickableStringFilter>
100+
<Table.Cell class="flex items-center"
101+
>{browser}<ClickableStringFilter term="browser" value={browser} />
100102
{#if browserMajorVersion}
101103
<abbr title={browserVersion}>
102-
<ClickableStringFilter term="browser.major" value={browserMajorVersion}>{browserMajorVersion}</ClickableStringFilter>
104+
{browserMajorVersion}
105+
<ClickableStringFilter term="browser.major" value={browserMajorVersion} />
103106
</abbr>
104107
{/if}</Table.Cell
105108
>
@@ -108,11 +111,11 @@
108111
{#if os}
109112
<Table.Row>
110113
<Table.Head class="whitespace-nowrap">Browser OS</Table.Head>
111-
<Table.Cell
112-
><ClickableStringFilter term="os" value={os}>{os}</ClickableStringFilter>
114+
<Table.Cell class="flex items-center"
115+
>{os}<ClickableStringFilter term="os" value={os} />
113116
{#if osMajorVersion}
114117
<abbr title={osVersion}>
115-
<ClickableStringFilter term="os.major" value={osMajorVersion}>{osMajorVersion}</ClickableStringFilter>
118+
{osMajorVersion}<ClickableStringFilter term="os.major" value={osMajorVersion} />
116119
</abbr>
117120
{/if}</Table.Cell
118121
>

‎src/Exceptionless.Web/ClientApp/src/lib/components/filters/ClickableBooleanFilter.svelte

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
<script lang="ts">
2+
import IconSearch from '~icons/mdi/search';
23
import A from '$comp/typography/A.svelte';
4+
import { cn } from '$lib/utils';
35
import { BooleanFilter } from './filters';
46
57
export let term: string;
68
export let value: boolean | undefined;
79
10+
let className: string | undefined | null = undefined;
11+
export { className as class };
12+
813
const title = `Search ${term}:${value}`;
914
1015
function onSearchClick(e: Event) {
@@ -17,6 +22,6 @@
1722
}
1823
</script>
1924

20-
<A on:click={onSearchClick} {title}>
21-
<slot />
25+
<A on:click={onSearchClick} {title} class={cn('ml-2', className)}>
26+
<slot><IconSearch /></slot>
2227
</A>

‎src/Exceptionless.Web/ClientApp/src/lib/components/filters/ClickableDateFilter.svelte

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
<script lang="ts">
2+
import IconSearch from '~icons/mdi/search';
23
import A from '$comp/typography/A.svelte';
4+
import { cn } from '$lib/utils';
35
import { DateFilter } from './filters';
46
57
export let term: string;
68
export let value: Date | string | undefined;
79
10+
let className: string | undefined | null = undefined;
11+
export { className as class };
12+
813
const title = `Search ${term}:${value}`;
914
1015
function onSearchClick(e: Event) {
@@ -17,6 +22,6 @@
1722
}
1823
</script>
1924

20-
<A on:click={onSearchClick} {title}>
21-
<slot />
25+
<A on:click={onSearchClick} {title} class={cn('ml-2', className)}>
26+
<slot><IconSearch /></slot>
2227
</A>

0 commit comments

Comments
 (0)