added local time tooltip

Author: rhamlett

src/PerfProblemSimulator/wwwroot/css/dashboard.css

@@ -1003,6 +1003,52 @@ body.page-secondary {
     margin-right: 0.35rem;
 }
 
+.log-time-tooltip {
+    position: relative;
+    border-bottom: 1px dotted currentColor;
+    cursor: default;
+}
+
+.log-time-tooltip::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    left: 0;
+    bottom: calc(100% + 6px);
+    background: var(--color-text);
+    color: var(--color-card);
+    padding: 0.35rem 0.6rem;
+    border-radius: var(--radius-sm);
+    font-size: 0.75rem;
+    font-weight: 400;
+    white-space: nowrap;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity var(--transition-fast), visibility var(--transition-fast);
+    z-index: 100;
+    box-shadow: var(--shadow-sm);
+    pointer-events: none;
+}
+
+.log-time-tooltip::before {
+    content: '';
+    position: absolute;
+    left: 12px;
+    bottom: calc(100% + 0px);
+    border: 5px solid transparent;
+    border-top-color: var(--color-text);
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity var(--transition-fast), visibility var(--transition-fast);
+    z-index: 100;
+    pointer-events: none;
+}
+
+.log-time-tooltip:hover::after,
+.log-time-tooltip:hover::before {
+    opacity: 1;
+    visibility: visible;
+}
+
 .sim-msg {
     cursor: pointer;
     border-bottom: 1px dotted currentColor;

src/PerfProblemSimulator/wwwroot/js/dashboard.js

@@ -1788,7 +1788,9 @@ function initSimulationIdCopyHandlers() {
  */
 function logEvent(levelOrCategory, message, options = {}) {
     const log = document.getElementById('eventLog');
-    const time = getCurrentUtcTime();
+    const now = new Date();
+    const time = formatUtcTime(now);
+    const localTime = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
 
     // Determine CSS class and icon based on category
     let cssClass = levelOrCategory;
@@ -1798,7 +1800,7 @@ function logEvent(levelOrCategory, message, options = {}) {
     entry.className = `log-entry ${cssClass}`;
 
     const iconHtml = icon ? `<span class="log-icon">${icon}</span>` : '';
-    entry.innerHTML = `<span class="log-time">${time} UTC</span>${iconHtml}${message}`;
+    entry.innerHTML = `<span class="log-time log-time-tooltip" data-tooltip="Local Time: ${localTime}">${time} UTC</span>${iconHtml}${message}`;
 
     log.insertBefore(entry, log.firstChild);
 }