Skip to content

Commit 7869348

Browse files
pwelter34pwelter34
committed
Update Dashboard.razor
1 parent 6db9b16 commit 7869348

File tree

1 file changed

+120
-108
lines changed

1 file changed

+120
-108
lines changed

‎src/Serilog.Dashboard.Components/Dashboard.razor‎

Lines changed: 120 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -5,136 +5,147 @@
55

66
<style>
77
.form-label-inline {
8-
position: relative;
8+
position: relative;
99
}
1010
11-
.form-label-inline > label {
12-
position: absolute;
13-
top: .25rem;
14-
left: .75rem;
15-
z-index: 2;
16-
color: rgba(var(--bs-body-color-rgb), 0.65);
17-
font-weight: 400;
18-
line-height: var(--bs-body-line-height);
19-
overflow: hidden;
20-
text-align: start;
21-
text-overflow: ellipsis;
22-
white-space: nowrap;
23-
pointer-events: none;
24-
border: var(--bs-border-width) solid transparent;
25-
transform-origin: 0 0;
26-
transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
27-
padding: 0 .25em;
28-
}
11+
.form-label-inline > label {
12+
position: absolute;
13+
top: .25rem;
14+
left: .75rem;
15+
z-index: 2;
16+
color: rgba(var(--bs-body-color-rgb), 0.65);
17+
font-weight: 400;
18+
line-height: var(--bs-body-line-height);
19+
overflow: hidden;
20+
text-align: start;
21+
text-overflow: ellipsis;
22+
white-space: nowrap;
23+
pointer-events: none;
24+
border: var(--bs-border-width) solid transparent;
25+
transform-origin: 0 0;
26+
transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
27+
padding: 0 .25em;
28+
}
2929
30-
.form-label-inline > .form-control::placeholder,
31-
.form-label-inline > .form-control-plaintext::placeholder {
32-
color: transparent;
33-
}
30+
.form-label-inline > .form-control::placeholder,
31+
.form-label-inline > .form-control-plaintext::placeholder {
32+
color: transparent;
33+
}
3434
35-
.form-label-inline > .form-control:focus ~ label,
36-
.form-label-inline > .form-control:not(:placeholder-shown) ~ label,
37-
.form-label-inline > .form-control-plaintext ~ label,
38-
.form-label-inline > .form-select ~ label {
39-
color: rgba(var(--bs-body-color-rgb), 0.65);
40-
transform: scale(0.85) translateY(-1.2rem) translateX(0.15rem);
41-
background-color: var(--bs-body-bg);
42-
}
35+
.form-label-inline > .form-control:focus ~ label,
36+
.form-label-inline > .form-control:not(:placeholder-shown) ~ label,
37+
.form-label-inline > .form-control-plaintext ~ label,
38+
.form-label-inline > .form-select ~ label {
39+
color: rgba(var(--bs-body-color-rgb), 0.65);
40+
transform: scale(0.85) translateY(-1.1rem) translateX(0.15rem);
41+
background-color: var(--bs-body-bg);
42+
}
4343
44-
.form-label-inline > .form-control-plaintext ~ label {
45-
border-width: var(--bs-border-width) 0;
46-
}
44+
.form-label-inline > .form-control-plaintext ~ label {
45+
border-width: var(--bs-border-width) 0;
46+
}
4747
</style>
4848

49+
<script>
50+
function submitForm(element) {
51+
if (element.value != element.defaultValue) {
52+
element.defaultValue = element.value;
53+
element.form.submit();
54+
}
55+
}
56+
</script>
57+
4958
<div class="card">
5059
<form id="log-search-form"
51-
name="log-search-form"
52-
role="form"
53-
method="get">
60+
name="log-search-form"
61+
role="form"
62+
method="get">
5463

5564
<div class="card-header d-flex align-items-center">
5665
<h5 class="me-auto">
5766
<i class="bi bi-files"></i> Logs
5867
</h5>
59-
@if (Sources != null && Sources.Count > 1)
60-
{
61-
<div class="form-label-inline mx-1">
62-
<select id="DataSource"
63-
name="DataSource"
64-
class="form-select"
65-
autocomplete="off"
66-
onchange="this.form.submit()"
67-
title="Data Source for Logs">
68-
@foreach (var source in Sources)
69-
{
70-
<option @key="source"
71-
value="@source"
72-
selected="@(Request.DataSource == source)">
73-
@source
74-
</option>
75-
}
76-
</select>
77-
<label for="DataSource">Data Source</label>
78-
</div>
79-
}
8068

81-
<div class="form-label-inline mx-1">
69+
<div class="form-label-inline m-1">
8270
<input type="text"
83-
id="SourceContext"
84-
name="SourceContext"
85-
class="form-control"
86-
placeholder="Source Context"
87-
autocomplete="off"
88-
spellcheck="false"
89-
onblur="this.form.submit()"
90-
value="@Request.SourceContext">
71+
id="SourceContext"
72+
name="SourceContext"
73+
class="form-control"
74+
placeholder="Source Context"
75+
autocomplete="off"
76+
spellcheck="false"
77+
onblur="submitForm(this)"
78+
value="@Request.SourceContext">
9179
<label for="SourceContext">Source Context</label>
9280
</div>
93-
<div class="form-label-inline mx-1">
81+
<div class="form-label-inline m-1">
9482
<input type="text"
95-
id="TraceId"
96-
name="TraceId"
97-
class="form-control"
98-
placeholder="Trace Id"
99-
autocomplete="off"
100-
spellcheck="false"
101-
onblur="this.form.submit()"
102-
value="@Request.TraceId">
83+
id="TraceId"
84+
name="TraceId"
85+
class="form-control"
86+
placeholder="Trace Id"
87+
autocomplete="off"
88+
spellcheck="false"
89+
onblur="submitForm(this)"
90+
value="@Request.TraceId">
10391
<label for="TraceId">Trace Id</label>
10492
</div>
105-
<div class="form-label-inline mx-1">
93+
<div class="form-label-inline m-1">
10694
<select id="Level"
107-
name="Level"
108-
class="form-select"
109-
autocomplete="off"
110-
onchange="this.form.submit()"
111-
title="Filter by log level">
95+
name="Level"
96+
class="form-select"
97+
autocomplete="off"
98+
onchange="submitForm(this)"
99+
title="Filter by log level">
112100
@foreach (var level in Levels)
113101
{
114102
<option @key="level.Key"
115-
value="@level.Key"
116-
selected="@(Request.Level == level.Key)">
103+
value="@level.Key"
104+
selected="@(Request.Level == level.Key)">
117105
@level.Value
118106
</option>
119107
}
120108
</select>
121109
<label for="Level">Level</label>
122110
</div>
123-
<div class="form-label-inline mx-1">
111+
<div class="form-label-inline m-1">
124112
<input type="date"
125-
id="Date"
126-
name="Date"
127-
class="form-control"
128-
placeholder="Date"
129-
autocomplete="off"
130-
onblur="this.form.submit()"
131-
value="@Request.Date?.ToString("yyyy-MM-dd")" />
113+
id="Date"
114+
name="Date"
115+
class="form-control"
116+
placeholder="Date"
117+
autocomplete="off"
118+
onblur="submitForm(this)"
119+
value="@Request.Date?.ToString("yyyy-MM-dd")" />
132120
<label for="Date">Date</label>
133121
</div>
122+
123+
@if (Sources != null && Sources.Count > 1)
124+
{
125+
<div class="form-label-inline m-1">
126+
<select id="DataSource"
127+
name="DataSource"
128+
class="form-select"
129+
autocomplete="off"
130+
onchange="submitForm(this)"
131+
title="Data Source for Logs">
132+
@foreach (var source in Sources)
133+
{
134+
<option @key="source"
135+
value="@source"
136+
selected="@(Request.DataSource == source)">
137+
@source
138+
</option>
139+
}
140+
</select>
141+
<label for="DataSource">Data Source</label>
142+
</div>
143+
}
144+
134145
<button id="log-search-button"
135-
class="btn btn-outline-secondary mx-1"
136-
type="submit"
137-
title="Search">
146+
class="btn btn-outline-secondary m-1"
147+
type="submit"
148+
title="Search">
138149
<i class="bi bi-search"></i>
139150
</button>
140151
</div>
@@ -155,9 +166,9 @@
155166
{
156167
<li class="page-item">
157168
<form id="log-page-first-form"
158-
name="log-page-first-form"
159-
role="form"
160-
method="get">
169+
name="log-page-first-form"
170+
role="form"
171+
method="get">
161172

162173
<InputHidden Name="DataSource" Value="@Request.DataSource" />
163174
<InputHidden Name="SourceContext" Value="@Request.SourceContext" />
@@ -167,9 +178,9 @@
167178
<InputHidden Name="PageSize" Value="@Request.PageSize?.ToString()" />
168179

169180
<button class="page-link"
170-
id="log-page-first-button"
171-
type="submit"
172-
title="First Page">
181+
id="log-page-first-button"
182+
type="submit"
183+
title="First Page">
173184
First Page
174185
</button>
175186
</form>
@@ -187,9 +198,9 @@
187198
{
188199
<li class="page-item">
189200
<form id="log-page-next-form"
190-
name="log-page-next-form"
191-
role="form"
192-
method="get">
201+
name="log-page-next-form"
202+
role="form"
203+
method="get">
193204

194205
<InputHidden Name="DataSource" Value="@Request.DataSource" />
195206
<InputHidden Name="SourceContext" Value="@Request.SourceContext" />
@@ -198,13 +209,13 @@
198209
<InputHidden Name="Date" Value="@Request.Date?.ToString("yyyy-MM-dd")" />
199210
<InputHidden Name="PageSize" Value="@Request.PageSize?.ToString()" />
200211

201-
<InputHidden Name="ContinuationToken" Value="@Result.ContinuationToken" />
212+
<InputHidden Name="ContinuationToken" Value="@Result?.ContinuationToken" />
202213
<InputHidden Name="Page" Value="@NextPageNumber()?.ToString()" />
203214

204215
<button class="page-link"
205-
id="log-page-next-button"
206-
type="submit"
207-
title="Next Page">
216+
id="log-page-next-button"
217+
type="submit"
218+
title="Next Page">
208219
Next Page
209220
</button>
210221
</form>
@@ -223,6 +234,7 @@
223234
</div>
224235
</div>
225236

237+
226238
@code {
227239
[Parameter, EditorRequired]
228240
public required LogEventRequest Request { get; set; }

0 commit comments

Comments
 (0)