Skip to content

Commit ed9748c

Browse files
rhamlettrhamlett
committed
Update event log
1 parent 1d2e366 commit ed9748c

File tree

5 files changed

+337
-78
lines changed

5 files changed

+337
-78
lines changed

‎src/PerfProblemSimulator/wwwroot/azure-monitoring-guide.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -492,6 +492,47 @@ <h2>📊 Overview</h2>
492492
<p>Each issue can be diagnosed using specific Azure tools and techniques.</p>
493493
</section>
494494

495+
<!-- Simulation ID Correlation Section -->
496+
<section id="simulation-ids" class="doc-section">
497+
<h2>🔗 Simulation ID Correlation</h2>
498+
<p>Every simulation instance is assigned a unique <strong>Simulation ID</strong> (GUID) that enables end-to-end correlation between the dashboard UI and Azure diagnostics.</p>
499+
500+
<h3>Finding Simulation IDs</h3>
501+
<p><strong>In the Dashboard:</strong> Hover over any simulation-related message in the Event Log (marked with a <span style="border-bottom: 1px dotted currentColor; cursor: help;">dotted underline</span>) to see the full Simulation ID in a tooltip.</p>
502+
<p><strong>In Azure:</strong> The same Simulation ID is emitted in server-side logs and can be found in:</p>
503+
<ul>
504+
<li><strong>Application Insights</strong> - Search traces and custom events by Simulation ID</li>
505+
<li><strong>Log Analytics</strong> - Query logs using the ID as a filter</li>
506+
<li><strong>Container/App Service Logs</strong> - Filter stdout/stderr by the GUID</li>
507+
</ul>
508+
509+
<h3>Correlation Queries</h3>
510+
<p>Use these KQL queries in Log Analytics to correlate dashboard events with server telemetry:</p>
511+
<div class="code-block">
512+
<span class="comment">// Find all traces for a specific simulation</span>
513+
traces
514+
| <span class="keyword">where</span> message <span class="keyword">contains</span> <span class="string">"YOUR-SIMULATION-ID-HERE"</span>
515+
| <span class="keyword">order by</span> timestamp <span class="keyword">asc</span>
516+
</div>
517+
518+
<div class="code-block">
519+
<span class="comment">// Find custom events for a simulation</span>
520+
customEvents
521+
| <span class="keyword">where</span> customDimensions[<span class="string">"SimulationId"</span>] == <span class="string">"YOUR-SIMULATION-ID-HERE"</span>
522+
| <span class="keyword">order by</span> timestamp <span class="keyword">asc</span>
523+
</div>
524+
525+
<h3>Troubleshooting Workflow</h3>
526+
<ol>
527+
<li>Start a simulation from the dashboard</li>
528+
<li>Hover over the start message in the Event Log to copy the Simulation ID</li>
529+
<li>Open Azure Portal → Application Insights → Logs (or Log Analytics)</li>
530+
<li>Query logs using the Simulation ID to see all related server-side activity</li>
531+
<li>Correlate timestamps between dashboard events and server metrics</li>
532+
</ol>
533+
<p><strong>Tip:</strong> The Simulation ID helps isolate telemetry when running multiple concurrent simulations or when the dashboard is used by multiple users.</p>
534+
</section>
535+
495536
<!-- Diagnosing High CPU Section -->
496537
<section id="cpu" class="doc-section">
497538
<h2>🔥 Diagnosing High CPU</h2>
@@ -1330,6 +1371,9 @@ <h2>🔗 Additional Resources</h2>
13301371
<li class="doc-toc-item">
13311372
<a href="#overview"><span class="toc-icon">📊</span>Overview</a>
13321373
</li>
1374+
<li class="doc-toc-item">
1375+
<a href="#simulation-ids"><span class="toc-icon">🔗</span>Simulation IDs</a>
1376+
</li>
13331377
<li class="doc-toc-divider-item" aria-hidden="true"></li>
13341378
<li class="doc-toc-section-item">Diagnostics</li>
13351379
<li class="doc-toc-item">

‎src/PerfProblemSimulator/wwwroot/css/dashboard.css‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -868,11 +868,30 @@ body {
868868
margin-right: 0.75rem;
869869
}
870870

871+
/* Log entry severity levels (fallback) */
871872
.log-entry.info { color: var(--color-primary); }
872873
.log-entry.success { color: var(--color-success); }
873874
.log-entry.warning { color: var(--color-warning); }
874875
.log-entry.error { color: var(--color-danger); }
875876

877+
/* Log entry simulation-themed colors */
878+
.log-entry.cpu { color: var(--color-cpu); }
879+
.log-entry.memory { color: var(--color-memory); }
880+
.log-entry.threads { color: var(--color-threads); }
881+
.log-entry.slowrequest { color: #b8860b; } /* Dark goldenrod for slow requests */
882+
.log-entry.crash { color: var(--color-danger); }
883+
.log-entry.loadtest { color: var(--color-primary); } /* .NET theme: blue */
884+
.log-entry.system { color: var(--color-text-muted); }
885+
886+
.log-icon {
887+
margin-right: 0.35rem;
888+
}
889+
890+
.sim-msg {
891+
cursor: help;
892+
border-bottom: 1px dotted currentColor;
893+
}
894+
876895
/* --------------------------------------------------------------------------
877896
Footer
878897
-------------------------------------------------------------------------- */
@@ -1389,6 +1408,142 @@ body {
13891408
color: var(--color-primary);
13901409
}
13911410

1411+
/* Metric card tooltip styling */
1412+
.metric-tooltip {
1413+
position: relative;
1414+
display: inline-flex;
1415+
align-items: center;
1416+
margin-left: 0.35rem;
1417+
font-size: 0.75rem;
1418+
color: var(--color-text-muted);
1419+
cursor: help;
1420+
opacity: 0.7;
1421+
transition: opacity var(--transition-fast);
1422+
}
1423+
1424+
.metric-tooltip:hover {
1425+
opacity: 1;
1426+
}
1427+
1428+
.metric-tooltip::after {
1429+
content: attr(data-tooltip);
1430+
position: absolute;
1431+
left: 50%;
1432+
bottom: calc(100% + 8px);
1433+
transform: translateX(-50%);
1434+
background: var(--color-text);
1435+
color: var(--color-card);
1436+
padding: 0.5rem 0.75rem;
1437+
border-radius: var(--radius-sm);
1438+
font-size: 0.75rem;
1439+
font-weight: 400;
1440+
white-space: nowrap;
1441+
opacity: 0;
1442+
visibility: hidden;
1443+
transition: opacity var(--transition-fast), visibility var(--transition-fast);
1444+
z-index: 100;
1445+
box-shadow: var(--shadow-sm);
1446+
}
1447+
1448+
.metric-tooltip::before {
1449+
content: '';
1450+
position: absolute;
1451+
left: 50%;
1452+
bottom: calc(100% + 2px);
1453+
transform: translateX(-50%);
1454+
border: 6px solid transparent;
1455+
border-top-color: var(--color-text);
1456+
opacity: 0;
1457+
visibility: hidden;
1458+
transition: opacity var(--transition-fast), visibility var(--transition-fast);
1459+
z-index: 100;
1460+
}
1461+
1462+
.metric-tooltip:hover::after,
1463+
.metric-tooltip:hover::before {
1464+
opacity: 1;
1465+
visibility: visible;
1466+
}
1467+
1468+
/* Control panel tooltip styling */
1469+
.control-tooltip {
1470+
position: relative;
1471+
display: inline-flex;
1472+
align-items: center;
1473+
margin-left: 0.35rem;
1474+
font-size: 0.85rem;
1475+
color: var(--color-primary);
1476+
cursor: help;
1477+
opacity: 0.7;
1478+
transition: opacity var(--transition-fast);
1479+
font-weight: normal;
1480+
vertical-align: middle;
1481+
}
1482+
1483+
.control-tooltip:hover {
1484+
opacity: 1;
1485+
}
1486+
1487+
.control-tooltip::after {
1488+
content: attr(data-tooltip);
1489+
position: absolute;
1490+
left: 50%;
1491+
bottom: calc(100% + 8px);
1492+
transform: translateX(-50%);
1493+
background: var(--color-text);
1494+
color: var(--color-card);
1495+
padding: 0.5rem 0.75rem;
1496+
border-radius: var(--radius-sm);
1497+
font-size: 0.75rem;
1498+
font-weight: 400;
1499+
white-space: normal;
1500+
width: max-content;
1501+
max-width: 250px;
1502+
text-align: center;
1503+
opacity: 0;
1504+
visibility: hidden;
1505+
transition: opacity var(--transition-fast), visibility var(--transition-fast);
1506+
z-index: 100;
1507+
box-shadow: var(--shadow-sm);
1508+
}
1509+
1510+
.control-tooltip::before {
1511+
content: '';
1512+
position: absolute;
1513+
left: 50%;
1514+
bottom: calc(100% + 2px);
1515+
transform: translateX(-50%);
1516+
border: 6px solid transparent;
1517+
border-top-color: var(--color-text);
1518+
opacity: 0;
1519+
visibility: hidden;
1520+
transition: opacity var(--transition-fast), visibility var(--transition-fast);
1521+
z-index: 100;
1522+
}
1523+
1524+
.control-tooltip:hover::after,
1525+
.control-tooltip:hover::before {
1526+
opacity: 1;
1527+
visibility: visible;
1528+
}
1529+
1530+
/* Info Note Box */
1531+
.info-note {
1532+
background: rgba(255, 243, 205, 0.9);
1533+
border: 1px solid rgba(255, 193, 7, 0.3);
1534+
border-left: 3px solid #ffc107;
1535+
border-radius: var(--radius-sm);
1536+
padding: 0.75rem 1rem;
1537+
margin: 0.75rem 0;
1538+
font-size: 0.8rem;
1539+
line-height: 1.5;
1540+
color: #664d03;
1541+
}
1542+
1543+
.info-note strong {
1544+
color: #664d03;
1545+
}
1546+
13921547
/* --------------------------------------------------------------------------
13931548
Utility Classes - Position
13941549
-------------------------------------------------------------------------- */

‎src/PerfProblemSimulator/wwwroot/documentation.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -564,6 +564,17 @@ <h3>Metric Color Indicators</h3>
564564
</tbody>
565565
</table>
566566
<p><strong>Note:</strong> Memory thresholds are calculated dynamically based on the actual total available memory reported by the server, not a hardcoded value. This ensures accurate warnings regardless of the machine's RAM configuration.</p>
567+
568+
<h3>Event Log & Simulation IDs</h3>
569+
<p>The Event Log at the bottom of the dashboard records all simulation activity with color-coded entries matching each simulation type. Messages related to a specific simulation instance are marked with a <span style="border-bottom: 1px dotted currentColor; cursor: help;">dotted underline</span>.</p>
570+
<p><strong>Viewing Simulation IDs:</strong> Hover over any underlined message to reveal the full <strong>Simulation ID</strong> (GUID) in a tooltip. This ID uniquely identifies each simulation instance.</p>
571+
<p><strong>Using Simulation IDs for Troubleshooting:</strong></p>
572+
<ul>
573+
<li>The same Simulation ID is logged server-side and appears in Azure Application Insights and Log Analytics</li>
574+
<li>Use this ID to correlate dashboard events with server logs when analyzing performance issues</li>
575+
<li>Filter Azure logs by Simulation ID to isolate telemetry from a specific simulation run</li>
576+
<li>See the <a href="azure-monitoring-guide.html#simulation-ids">Azure Monitoring Guide</a> for detailed correlation techniques</li>
577+
</ul>
567578
</section>
568579

569580
<!-- Request Latency Monitor Section -->

‎src/PerfProblemSimulator/wwwroot/index.html‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -79,11 +79,9 @@ <h2>🎮 Simulation Controls</h2>
7979
<button class="btn-close-panel" id="btnClosePanel" title="Close Panel">✕</button>
8080
</div>
8181
<div class="side-panel-content">
82-
<p class="warning-text">⚠️ These buttons intentionally cause performance problems!</p>
83-
8482
<div class="control-group cpu-group">
85-
<h3>🔥 CPU Stress</h3>
86-
<p>Creates parallel spin loops to max out all CPU cores.</p>
83+
<h3>🔥 CPU Stress <span class="control-tooltip" data-tooltip="Spawns worker threads running intensive cryptographic operations to stress CPU cores">ⓘ</span></h3>
84+
<p>Spawns worker threads running intensive cryptographic operations to stress CPU cores. Higher intensity uses more parallel threads.</p>
8785
<div class="control-inputs">
8886
<label>Duration (s):
8987
<input type="number" id="cpuDuration" value="30" min="1" title="Duration in seconds (minimum 1 second)">
@@ -102,8 +100,8 @@ <h3>🔥 CPU Stress</h3>
102100
</div>
103101

104102
<div class="control-group memory-group">
105-
<h3>📊 Memory Pressure</h3>
106-
<p>Allocates pinned memory blocks to increase working set.</p>
103+
<h3>📊 Memory Pressure <span class="control-tooltip" data-tooltip="Allocates pinned memory blocks filled with random data to increase working set">ⓘ</span></h3>
104+
<p>Allocates pinned memory blocks filled with random data. Multiple allocations stack - mimics gradual memory leak.</p>
107105
<div class="control-inputs">
108106
<label>Size (MB):
109107
<input type="number" id="memorySize" value="512" min="1" title="Memory size in megabytes (minimum 1 MB). Allocations are cumulative until released.">
@@ -116,8 +114,9 @@ <h3>📊 Memory Pressure</h3>
116114
</div>
117115

118116
<div class="control-group thread-group">
119-
<h3>🧵 Thread Pool Starvation</h3>
120-
<p>Blocks threads using sync-over-async anti-pattern.</p>
117+
<h3>🧵 Thread Pool Starvation <span class="control-tooltip" data-tooltip="Blocks worker threads to simulate thread pool exhaustion">ⓘ</span></h3>
118+
<p>Blocks worker threads using sync-over-async anti-pattern to simulate thread pool exhaustion. Server becomes unresponsive to new requests.</p>
119+
<p class="info-note">⏱️ <strong>Duration Note:</strong> .NET thread pool starts with ~CPU cores (e.g., 4-8) and grows at only 1-2 threads/second when starved. Impact is visible almost immediately since the initial pool is small.</p>
121120
<div class="control-inputs">
122121
<label>Delay (s):
123122
<input type="number" id="threadDelay" value="10" min="0.1" step="0.1" title="How long each blocking operation delays in seconds (minimum 0.1s)">
@@ -132,8 +131,8 @@ <h3>🧵 Thread Pool Starvation</h3>
132131
</div>
133132

134133
<div class="control-group slowrequest-group">
135-
<h3>🐌 Slow Requests</h3>
136-
<p>Generates requests using sync-over-async patterns. Ideal for CLR Profiler diagnosis.</p>
134+
<h3>🐌 Slow Requests <span class="control-tooltip" data-tooltip="Generates slow requests ideal for CLR Profiler diagnosis">ⓘ</span></h3>
135+
<p>Generates requests using sync-over-async patterns that intentionally take a long time. Ideal for CLR Profiler diagnosis in Azure.</p>
137136
<p class="timeout-warning">⚠️ Note: Requests exceeding 30 seconds total time (queue + execution) are flagged as critical</p>
138137
<div class="control-inputs">
139138
<label>Request Execution Time (s) <span class="help-icon" title="This value controls only the processing time. Total Duration = Queue Time + Execution Time.">ⓘ</span>:
@@ -153,8 +152,8 @@ <h3>🐌 Slow Requests</h3>
153152
</div>
154153

155154
<div class="control-group crash-group">
156-
<h3>💥 Application Crash</h3>
157-
<p>Triggers a fatal crash for Azure crash monitoring.</p>
155+
<h3>💥 Application Crash <span class="control-tooltip" data-tooltip="Triggers various types of fatal crashes for testing crash monitoring">ⓘ</span></h3>
156+
<p>Triggers a fatal crash to test Azure crash monitoring and diagnostics. Choose from various crash types including stack overflow and access violations.</p>
158157
<div class="control-inputs">
159158
<label>Type:
160159
<select id="crashType" class="wide-input">
@@ -180,7 +179,7 @@ <h3>💥 Application Crash</h3>
180179
<div class="metric-card cpu">
181180
<div class="metric-header">
182181
<div class="metric-icon">⚡</div>
183-
<div class="metric-label">CPU Usage</div>
182+
<div class="metric-label">CPU Usage <span class="metric-tooltip" data-tooltip="System CPU usage percentage across all cores">ⓘ</span></div>
184183
</div>
185184
<div class="metric-info">
186185
<div class="metric-value" id="cpuValue">--</div>
@@ -194,7 +193,7 @@ <h3>💥 Application Crash</h3>
194193
<div class="metric-card memory">
195194
<div class="metric-header">
196195
<div class="metric-icon">📊</div>
197-
<div class="metric-label">Memory Working Set</div>
196+
<div class="metric-label">Memory Working Set <span class="metric-tooltip" data-tooltip="Physical memory currently used by the process">ⓘ</span></div>
198197
</div>
199198
<div class="metric-info">
200199
<div class="metric-value" id="memoryValue">--</div>
@@ -209,7 +208,7 @@ <h3>💥 Application Crash</h3>
209208
<div class="metric-card threads">
210209
<div class="metric-header">
211210
<div class="metric-icon">🧵</div>
212-
<div class="metric-label">Thread Pool</div>
211+
<div class="metric-label">Thread Pool <span class="metric-tooltip" data-tooltip="Active worker threads in the .NET thread pool">ⓘ</span></div>
213212
</div>
214213
<div class="metric-info">
215214
<div class="metric-value" id="threadsValue">--</div>
@@ -223,7 +222,7 @@ <h3>💥 Application Crash</h3>
223222
<div class="metric-card queue">
224223
<div class="metric-header">
225224
<div class="metric-icon">📋</div>
226-
<div class="metric-label">Queue Length</div>
225+
<div class="metric-label">Queue Length <span class="metric-tooltip" data-tooltip="Pending work items waiting for thread pool execution">ⓘ</span></div>
227226
</div>
228227
<div class="metric-info">
229228
<div class="metric-value" id="queueValue">--</div>

0 commit comments

Comments
 (0)