Skip to content

Commit edd2698

Browse files
philasmarphilasmar
committed
feat: group events in tabs
1 parent a105920 commit edd2698

File tree

1 file changed

+103
-90
lines changed
  • Tools/LambdaTestTool-v2/src/Amazon.Lambda.TestTool/Components/Pages

1 file changed

+103
-90
lines changed

‎Tools/LambdaTestTool-v2/src/Amazon.Lambda.TestTool/Components/Pages/Home.razor

Lines changed: 103 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,11 @@
2323
</div>
2424

2525
<div class="row">
26-
<div class="col-sm-6 gap-2 d-flex flex-column">
27-
<h4>Queue Event</h4>
26+
<div class="col-sm-6 gap-2 d-flex flex-column mt-1">
27+
<div class="form-group d-flex">
28+
<h4>Queue Event</h4>
29+
<button class="btn btn-primary btn-sm ms-auto rounded-pill px-4 fw-bold" @onclick="OnAddEventClick">Invoke</button>
30+
</div>
2831
<div class="form-floating">
2932
<select class="form-select" id="sample-requests" @bind="SelectedSampleRequestName">
3033
<option value="@NoSampleSelectedId">Select a request</option>
@@ -54,111 +57,121 @@
5457
</div>
5558
<div class="mt-1">
5659
<label class="form-label" for="function-payload">Function Input</label>
57-
<StandaloneCodeEditor @ref="_editor" ConstructionOptions="EditorConstructionOptions" CssClass="rounded-4 overflow-hidden border"/>
58-
</div>
59-
<div class="form-group">
60-
<button class="btn btn-primary btn-sm" @onclick="OnAddEventClick">Queue Event</button>
60+
<StandaloneCodeEditor Id="function-payload" @ref="_editor" ConstructionOptions="EditorConstructionOptions" CssClass="rounded-4 overflow-hidden border"/>
6161
</div>
6262
</div>
6363
<div class="col-sm-6">
64-
<h3>Active Event:</h3>
65-
@if (DataStore.ActiveEvent == null)
66-
{
67-
<h2>No active event</h2>
68-
}
69-
else
70-
{
71-
<div>
72-
<div style="cursor: pointer" @onclick="() => OnRequeue(DataStore.ActiveEvent.AwsRequestId)">
73-
@((MarkupString)RebootIcon)
74-
</div>
75-
<p><b>Request ID:</b> @DataStore.ActiveEvent.AwsRequestId</p>
76-
<p><b>Status:</b> <span style="@GetStatusStyle(DataStore.ActiveEvent.EventStatus)">@DataStore.ActiveEvent.EventStatus</span></p>
77-
<p><b>Last Updated:</b> @DataStore.ActiveEvent.LastUpdated</p>
78-
<p><b>Event JSON:</b><span class="event-value"><span class="fake-link" @onclick="() => ShowEventJson(DataStore.ActiveEvent)">@CreateSnippet(DataStore.ActiveEvent.EventJson)</span></span></p>
79-
@if (DataStore.ActiveEvent.EventStatus == EventContainer.Status.Failure)
64+
<nav class="navbar navbar-expand-lg bd-navbar pt-0">
65+
<ul class="navbar-nav nav-underline nav-fill" id="eventsTab" role="tablist">
66+
<li class="nav-item" role="presentation">
67+
<button class="nav-link active" id="active-tab" data-bs-toggle="tab" data-bs-target="#active-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Active Event</button>
68+
</li>
69+
<li class="nav-item" role="presentation">
70+
<button class="nav-link" id="queued-tab" data-bs-toggle="tab" data-bs-target="#queued-tab-pane" type="button" role="tab" aria-controls="queued-tab-pane" aria-selected="false">Queued Events</button>
71+
</li>
72+
<li class="nav-item" role="presentation">
73+
<button class="nav-link" id="executed-tab" data-bs-toggle="tab" data-bs-target="#executed-tab-pane" type="button" role="tab" aria-controls="executed-tab-pane" aria-selected="false">Executed Events</button>
74+
</li>
75+
</ul>
76+
</nav>
77+
<div class="tab-content" id="eventsTabContent">
78+
<div class="tab-pane fade show active" id="active-tab-pane" role="tabpanel" aria-labelledby="active-tab" tabindex="0">
79+
<h3>Active Event:</h3>
80+
@if (DataStore.ActiveEvent == null)
8081
{
81-
<p><b>Error Type:</b> @DataStore.ActiveEvent.ErrorType</p>
82-
<p>
83-
<b>Error Response:</b>
84-
<pre class="form-control" style="@Constants.ResponseErrorStyleSizeConstraint">@DataStore.ActiveEvent.ErrorResponse</pre>
85-
</p>
82+
<h2>No active event</h2>
8683
}
8784
else
8885
{
89-
<p>
90-
<b>Response:</b>
91-
<pre class="form-control" style="@Constants.ResponseSuccessStyleSizeConstraint">@Utils.TryPrettyPrintJson(DataStore.ActiveEvent.Response)</pre>
92-
</p>
93-
}
94-
</div>
95-
}
96-
</div>
97-
</div>
98-
99-
100-
<div class="row">
101-
<div class="col-sm-6">
102-
<h3>Queued Events: <button class="btn btn-secondary btn-sm" @onclick="OnClearQueued">Clear</button></h3>
103-
<div class="col-xs-5 event-list">
104-
@foreach (var evnt in @DataStore.QueuedEvents)
105-
{
106-
<div class="event-list-item">
107-
<div class="row" style="padding: 2px">
108-
<div class="col-sm-11 row">
109-
<div class="event-label">Request ID:</div><div class="event-value"> @evnt.AwsRequestId</div>
110-
<div class="event-label">Last Updated:</div><div class="event-value">@evnt.LastUpdated</div>
111-
</div>
112-
<div class="col-sm-1 " style="cursor: pointer" @onclick="() => OnDeleteEvent(evnt.AwsRequestId)">
113-
@((MarkupString)CloseIcon)
114-
</div>
115-
</div>
116-
<div class="row" style="padding: 2px">
117-
<div class="event-label">Event JSON:</div><div class="event-value"><span class="fake-link" @onclick="() => ShowEventJson(evnt)">@CreateSnippet(evnt.EventJson)</span></div>
118-
</div>
119-
</div>
120-
}
121-
</div>
122-
</div>
123-
<div class="col-sm-6">
124-
<h3>Executed Events: <button class="btn btn-secondary btn-sm" @onclick="OnClearExecuted">Clear</button></h3>
125-
<div class="col-xs-5 event-list">
126-
@foreach (var evnt in @DataStore.ExecutedEvents.OrderByDescending(x => x.LastUpdated))
127-
{
128-
<div class="event-list-item">
129-
<div class="row" style="padding: 2px">
130-
<div class="col-sm-1 " style="cursor: pointer" @onclick="() => OnRequeue(evnt.AwsRequestId)">
86+
<div>
87+
<div style="cursor: pointer" @onclick="() => OnRequeue(DataStore.ActiveEvent.AwsRequestId)">
13188
@((MarkupString)RebootIcon)
13289
</div>
133-
<div class="col-sm-10 row">
134-
<div class="event-label">Request ID:</div><div class="event-value"> @evnt.AwsRequestId</div>
135-
<div class="event-label">Status:</div><div class="event-value" style="@GetStatusStyle(evnt.EventStatus)">@evnt.EventStatus</div>
136-
<div class="event-label">Last Updated:</div><div class="event-value">@evnt.LastUpdated</div>
137-
</div>
138-
<div class="col-sm-1 " style="cursor: pointer" @onclick="() => OnDeleteEvent(evnt.AwsRequestId)">
139-
@((MarkupString)CloseIcon)
140-
</div>
141-
</div>
142-
<div class="row" style="padding: 2px">
143-
<div class="event-label">Event JSON:</div><div class="event-value"><span class="fake-link" @onclick="() => ShowEventJson(evnt)">@CreateSnippet(evnt.EventJson)</span></div>
90+
<p><b>Request ID:</b> @DataStore.ActiveEvent.AwsRequestId</p>
91+
<p><b>Status:</b> <span style="@GetStatusStyle(DataStore.ActiveEvent.EventStatus)">@DataStore.ActiveEvent.EventStatus</span></p>
92+
<p><b>Last Updated:</b> @DataStore.ActiveEvent.LastUpdated</p>
93+
<p><b>Event JSON:</b><span class="event-value"><span class="fake-link" @onclick="() => ShowEventJson(DataStore.ActiveEvent)">@CreateSnippet(DataStore.ActiveEvent.EventJson)</span></span></p>
94+
@if (DataStore.ActiveEvent.EventStatus == EventContainer.Status.Failure)
95+
{
96+
<p><b>Error Type:</b> @DataStore.ActiveEvent.ErrorType</p>
97+
<p>
98+
<b>Error Response:</b>
99+
<pre class="form-control" style="@Constants.ResponseErrorStyleSizeConstraint">@DataStore.ActiveEvent.ErrorResponse</pre>
100+
</p>
101+
}
102+
else
103+
{
104+
<p>
105+
<b>Response:</b>
106+
<pre class="form-control" style="@Constants.ResponseSuccessStyleSizeConstraint">@Utils.TryPrettyPrintJson(DataStore.ActiveEvent.Response)</pre>
107+
</p>
108+
}
144109
</div>
145-
@if (evnt.EventStatus == EventContainer.Status.Success)
110+
}
111+
</div>
112+
<div class="tab-pane fade" id="queued-tab-pane" role="tabpanel" aria-labelledby="queued-tab" tabindex="1">
113+
<h3>Queued Events: <button class="btn btn-secondary btn-sm" @onclick="OnClearQueued">Clear</button></h3>
114+
<div class="col-xs-5 event-list">
115+
@foreach (var evnt in @DataStore.QueuedEvents)
146116
{
147-
<div class="row" style="padding: 2px">
148-
<div class="event-label">Response: </div><div class="event-value"><span class="fake-link" @onclick="() => ShowResponse(evnt)">@CreateSnippet(evnt.Response)</span></div>
117+
<div class="event-list-item">
118+
<div class="row" style="padding: 2px">
119+
<div class="col-sm-11 row">
120+
<div class="event-label">Request ID:</div><div class="event-value"> @evnt.AwsRequestId</div>
121+
<div class="event-label">Last Updated:</div><div class="event-value">@evnt.LastUpdated</div>
122+
</div>
123+
<div class="col-sm-1 " style="cursor: pointer" @onclick="() => OnDeleteEvent(evnt.AwsRequestId)">
124+
@((MarkupString)CloseIcon)
125+
</div>
126+
</div>
127+
<div class="row" style="padding: 2px">
128+
<div class="event-label">Event JSON:</div><div class="event-value"><span class="fake-link" @onclick="() => ShowEventJson(evnt)">@CreateSnippet(evnt.EventJson)</span></div>
129+
</div>
149130
</div>
150131
}
151-
else if (evnt.EventStatus == EventContainer.Status.Failure)
132+
</div>
133+
</div>
134+
<div class="tab-pane fade" id="executed-tab-pane" role="tabpanel" aria-labelledby="executed-tab" tabindex="2">
135+
<h3>Executed Events: <button class="btn btn-secondary btn-sm" @onclick="OnClearExecuted">Clear</button></h3>
136+
<div class="col-xs-5 event-list">
137+
@foreach (var evnt in @DataStore.ExecutedEvents.OrderByDescending(x => x.LastUpdated))
152138
{
153-
<div class="row" style="padding: 2px">
154-
<div class="event-label">Error Type:</div><div class="event-value">@evnt.ErrorType</div>
155-
</div>
156-
<div class="row" style="padding: 2px">
157-
<div class="event-label">Error Response: </div><div class="event-value"><span class="fake-link" @onclick="() => ShowError(evnt)">@CreateSnippet(evnt.ErrorResponse)</span></div>
139+
<div class="event-list-item">
140+
<div class="row" style="padding: 2px">
141+
<div class="col-sm-1 " style="cursor: pointer" @onclick="() => OnRequeue(evnt.AwsRequestId)">
142+
@((MarkupString)RebootIcon)
143+
</div>
144+
<div class="col-sm-10 row">
145+
<div class="event-label">Request ID:</div><div class="event-value"> @evnt.AwsRequestId</div>
146+
<div class="event-label">Status:</div><div class="event-value" style="@GetStatusStyle(evnt.EventStatus)">@evnt.EventStatus</div>
147+
<div class="event-label">Last Updated:</div><div class="event-value">@evnt.LastUpdated</div>
148+
</div>
149+
<div class="col-sm-1 " style="cursor: pointer" @onclick="() => OnDeleteEvent(evnt.AwsRequestId)">
150+
@((MarkupString)CloseIcon)
151+
</div>
152+
</div>
153+
<div class="row" style="padding: 2px">
154+
<div class="event-label">Event JSON:</div><div class="event-value"><span class="fake-link" @onclick="() => ShowEventJson(evnt)">@CreateSnippet(evnt.EventJson)</span></div>
155+
</div>
156+
@if (evnt.EventStatus == EventContainer.Status.Success)
157+
{
158+
<div class="row" style="padding: 2px">
159+
<div class="event-label">Response: </div><div class="event-value"><span class="fake-link" @onclick="() => ShowResponse(evnt)">@CreateSnippet(evnt.Response)</span></div>
160+
</div>
161+
}
162+
else if (evnt.EventStatus == EventContainer.Status.Failure)
163+
{
164+
<div class="row" style="padding: 2px">
165+
<div class="event-label">Error Type:</div><div class="event-value">@evnt.ErrorType</div>
166+
</div>
167+
<div class="row" style="padding: 2px">
168+
<div class="event-label">Error Response: </div><div class="event-value"><span class="fake-link" @onclick="() => ShowError(evnt)">@CreateSnippet(evnt.ErrorResponse)</span></div>
169+
</div>
170+
}
158171
</div>
159172
}
160173
</div>
161-
}
174+
</div>
162175
</div>
163176
</div>
164177
</div>

0 commit comments

Comments
 (0)