carverauto/serviceradar

Fork 0

fixing date in UI #2329

Merged

mfreeman451 merged 1 commit from refs/pull/2329/head into main

2025-10-16 13:48:26 +00:00

mfreeman451 commented

2025-10-16 13:45:56 +00:00

(Migrated from github.com)

Owner

Imported from GitHub pull request.

Original GitHub pull request: #1786
Original author: @mfreeman451
Original URL: https://github.com/carverauto/serviceradar/pull/1786
Original created: 2025-10-16T13:45:56Z
Original updated: 2025-10-16T13:48:29Z
Original head: carverauto/serviceradar:1767-bugui-otel-logs-missing-dates
Original base: main
Original merged: 2025-10-16T13:48:26Z by @mfreeman451

PR Type

Bug fix, Tests

Description

Fixed missing or invalid dates in OTEL logs UI by normalizing timestamp formats
Added timestamp normalization utilities with comprehensive test coverage
Introduced _tp_time fallback field for timestamp resolution
Updated build info fetch to prevent caching issues

Diagram Walkthrough

flowchart LR
  A["Proton DateTime64"] --> B["normalizeTimestampString"]
  B --> C["ISO-8601 Format"]
  C --> D["UI Display"]
  E["_tp_time fallback"] --> B
  F["start_time_unix_nano"] --> G["resolveTraceTimestampMs"]
  G --> D

File Walkthrough

Relevant files

Enhancement

otel-metrics.ts

Add timestamp fallback field to OtelMetric type

web/src/types/otel-metrics.ts

Added optional _tp_time field to OtelMetric interface for timestamp
fallback

+2/-1

Tests

traceTimestamp.test.ts

Add comprehensive timestamp normalization test suite

web/src/utils/traceTimestamp.test.ts

Created comprehensive test suite for timestamp normalization functions
Tests cover Proton DateTime64 format, timezone handling, and fallback
scenarios
Validates ISO-8601 conversion and edge cases

+123/-0

Bug fix

traceTimestamp.ts `Implement timestamp normalization utilities with fallback logic` web/src/utils/traceTimestamp.ts Implemented `normalizeTimestampString` to convert Proton DateTime64 to ISO-8601 Added `resolveTraceTimestampMs` with fallback logic for `_tp_time` and `start_time_unix_nano` Created `normalizeTraceSummaryTimestamp` for trace object normalization	+103/-0
MetricsDashboard.tsx `Apply timestamp normalization in MetricsDashboard component` web/src/components/Observability/MetricsDashboard.tsx Applied timestamp normalization to metrics results Updated timestamp display logic using `resolveTraceTimestampMs` Added fallback to display '—' for invalid timestamps	+14/-6
TracesDashboard.tsx `Apply timestamp normalization in TracesDashboard component` web/src/components/Observability/TracesDashboard.tsx Normalized trace timestamps using `normalizeTraceSummaryTimestamp` Updated streaming traces with timestamp normalization Applied `resolveTraceTimestampMs` for consistent timestamp display Added fallback display for invalid timestamps	+14/-9
Sidebar.tsx `Prevent caching of build info fetch request` web/src/components/Sidebar.tsx Added `cache: 'no-store'` option to build-info.json fetch request	+1/-1

Dependencies

package.json

Add vitest testing framework configuration

web/package.json

Added vitest dev dependency for testing
Added test script to run vitest

+4/-2

Imported from GitHub pull request. Original GitHub pull request: #1786 Original author: @mfreeman451 Original URL: https://github.com/carverauto/serviceradar/pull/1786 Original created: 2025-10-16T13:45:56Z Original updated: 2025-10-16T13:48:29Z Original head: carverauto/serviceradar:1767-bugui-otel-logs-missing-dates Original base: main Original merged: 2025-10-16T13:48:26Z by @mfreeman451 --- ### **PR Type** Bug fix, Tests ___ ### **Description** - Fixed missing or invalid dates in OTEL logs UI by normalizing timestamp formats - Added timestamp normalization utilities with comprehensive test coverage - Introduced `_tp_time` fallback field for timestamp resolution - Updated build info fetch to prevent caching issues ___ ### Diagram Walkthrough ```mermaid flowchart LR A["Proton DateTime64"] --> B["normalizeTimestampString"] B --> C["ISO-8601 Format"] C --> D["UI Display"] E["_tp_time fallback"] --> B F["start_time_unix_nano"] --> G["resolveTraceTimestampMs"] G --> D ``` <details> <summary><h3> File Walkthrough</h3></summary> <table><thead><tr><th></th><th align="left">Relevant files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><table> <tr> <td> <details> <summary><strong>otel-metrics.ts</strong><dd><code>Add timestamp fallback field to OtelMetric type</code>                    </dd></summary> <hr> web/src/types/otel-metrics.ts <ul><li>Added optional <code>_tp_time</code> field to <code>OtelMetric</code> interface for timestamp <br>fallback</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/1786/files#diff-f094cd08c7eee692f6bbb4001bb3bea7730aaedbeea921c20d382b97069367bb">+2/-1</a>      </td> </tr> </table></td></tr><tr><td><strong>Tests</strong></td><td><table> <tr> <td> <details> <summary><strong>traceTimestamp.test.ts</strong><dd><code>Add comprehensive timestamp normalization test suite</code>          </dd></summary> <hr> web/src/utils/traceTimestamp.test.ts <ul><li>Created comprehensive test suite for timestamp normalization functions<br> <li> Tests cover Proton DateTime64 format, timezone handling, and fallback <br>scenarios<br> <li> Validates ISO-8601 conversion and edge cases</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/1786/files#diff-d06cfab4e92bab9894d7b1dbb9a6f5c71e80c14fdf4f1f0d616266d1443867a3">+123/-0</a>  </td> </tr> </table></td></tr><tr><td><strong>Bug fix</strong></td><td><table> <tr> <td> <details> <summary><strong>traceTimestamp.ts</strong><dd><code>Implement timestamp normalization utilities with fallback logic</code></dd></summary> <hr> web/src/utils/traceTimestamp.ts <ul><li>Implemented <code>normalizeTimestampString</code> to convert Proton DateTime64 to <br>ISO-8601<br> <li> Added <code>resolveTraceTimestampMs</code> with fallback logic for <code>_tp_time</code> and <br><code>start_time_unix_nano</code><br> <li> Created <code>normalizeTraceSummaryTimestamp</code> for trace object normalization</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/1786/files#diff-e8c3f7bfa0a9cc7234bf357c3d75ab62f2dc9541629305cb81603e2d6f82bc03">+103/-0</a>  </td> </tr> <tr> <td> <details> <summary><strong>MetricsDashboard.tsx</strong><dd><code>Apply timestamp normalization in MetricsDashboard component</code></dd></summary> <hr> web/src/components/Observability/MetricsDashboard.tsx <ul><li>Applied timestamp normalization to metrics results<br> <li> Updated timestamp display logic using <code>resolveTraceTimestampMs</code><br> <li> Added fallback to display '—' for invalid timestamps</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/1786/files#diff-83706fc5d917c2656f287f5f0aaf4263fceee92776078b9a47169606e4d6a6e8">+14/-6</a>    </td> </tr> <tr> <td> <details> <summary><strong>TracesDashboard.tsx</strong><dd><code>Apply timestamp normalization in TracesDashboard component</code></dd></summary> <hr> web/src/components/Observability/TracesDashboard.tsx <ul><li>Normalized trace timestamps using <code>normalizeTraceSummaryTimestamp</code><br> <li> Updated streaming traces with timestamp normalization<br> <li> Applied <code>resolveTraceTimestampMs</code> for consistent timestamp display<br> <li> Added fallback display for invalid timestamps</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/1786/files#diff-2ef490885a0b6e53d3fa243395f8209914ac8d955dca43333cb1f59c6eeb3d48">+14/-9</a>    </td> </tr> <tr> <td> <details> <summary><strong>Sidebar.tsx</strong><dd><code>Prevent caching of build info fetch request</code>                            </dd></summary> <hr> web/src/components/Sidebar.tsx - Added `cache: 'no-store'` option to build-info.json fetch request </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/1786/files#diff-219f9604c678f564c98ff1920201ea980331348dfb5dff7314a34d9fd198f1b1">+1/-1</a>      </td> </tr> </table></td></tr><tr><td><strong>Dependencies</strong></td><td><table> <tr> <td> <details> <summary><strong>package.json</strong><dd><code>Add vitest testing framework configuration</code>                              </dd></summary> <hr> web/package.json <ul><li>Added <code>vitest</code> dev dependency for testing<br> <li> Added <code>test</code> script to run vitest</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/1786/files#diff-b861012a5dd72b8a9f3281b7cf09f5a779c98569d040b1bbc1db50f1b15e7cce">+4/-2</a>      </td> </tr> </table></td></tr></tr></tbody></table> </details> ___

qodo-code-review[bot] commented

2025-10-16 13:46:41 +00:00

(Migrated from github.com)

Author

Owner

Imported GitHub PR comment.

Original author: @qodo-code-review[bot]
Original URL: https://github.com/carverauto/serviceradar/pull/1786#issuecomment-3410972826
Original created: 2025-10-16T13:46:41Z

You are nearing your monthly Qodo Merge usage quota. For more information, please visit here.

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance

⚪

Sensitive info exposure

Description: Disabling fetch cache for '/build-info.json' with { cache: 'no-store' } may expose build
metadata consistently to clients; if build-info.json contains sensitive details (e.g.,
commit SHAs, internal URLs), ensure it is sanitized—this is a potential exposure depending
on file contents.
Sidebar.tsx [53-56]

Referred Code

fetch('/build-info.json', { cache: 'no-store' })
    .then(res => (res.ok ? res.json() : Promise.reject()))
    .then((data: BuildInfo) => setBuildInfo(data))
    .catch(() => setBuildInfo({}));

Ticket Compliance

🟡

🎫 #1767

🟢	Fix Observability dashboard so OTEL trace timestamps do not display "Invalid Date" and instead show the correct date/time.
	Ensure fallback behavior so timestamps still display correctly when primary timestamp fields are missing or malformed.
	Provide necessary test coverage to validate timestamp normalization and edge cases.
	Reduce build-info caching issues so build/version info reflects latest build.
⚪	Manually verify in the deployed UI that all traces and metrics tables now render correct dates/times across different locales and timezones.
⚪	Validate end-to-end with real backend data sources (including Proton DateTime64 and _tp_time presence) to ensure no remaining "Invalid Date" cases.

Codebase Duplication Compliance

⚪

Codebase context is not defined

Follow the guide to enable codebase context checks.

Custom Compliance

⚪

No custom compliance provided

Follow the guide to enable custom compliance check.

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

Imported GitHub PR comment. Original author: @qodo-code-review[bot] Original URL: https://github.com/carverauto/serviceradar/pull/1786#issuecomment-3410972826 Original created: 2025-10-16T13:46:41Z --- _You are nearing your monthly Qodo Merge usage quota. For more information, please visit [here](https://qodo-merge-docs.qodo.ai/installation/qodo_merge/#cloud-users)._ ## PR Compliance Guide 🔍  Below is a summary of compliance checks for this PR:<br> <table><tbody><tr><td colspan='2'><strong>Security Compliance</strong></td></tr> <tr><td rowspan=1>⚪</td> <td><details><summary><strong>Sensitive info exposure </strong></summary><br> <b>Description:</b> Disabling fetch cache for '/build-info.json' with { cache: 'no-store' } may expose build <br>metadata consistently to clients; if build-info.json contains sensitive details (e.g., <br>commit SHAs, internal URLs), ensure it is sanitized—this is a potential exposure depending <br>on file contents.<br> <strong><a href='https://github.com/carverauto/serviceradar/pull/1786/files#diff-219f9604c678f564c98ff1920201ea980331348dfb5dff7314a34d9fd198f1b1R53-R56'>Sidebar.tsx [53-56]</a></strong><br> <details open><summary>Referred Code</summary> ```tsx fetch('/build-info.json', { cache: 'no-store' }) .then(res => (res.ok ? res.json() : Promise.reject())) .then((data: BuildInfo) => setBuildInfo(data)) .catch(() => setBuildInfo({})); ``` </details></details></td></tr> <tr><td colspan='2'><strong>Ticket Compliance</strong></td></tr> <tr><td>🟡</td> <td> <details> <summary>🎫 <a href=https://github.com/carverauto/serviceradar/issues/1767>#1767</a></summary> <table width='100%'><tbody> <tr><td rowspan=4>🟢</td> <td>Fix Observability dashboard so OTEL trace timestamps do not display "Invalid Date" and <br>instead show the correct date/time.</td></tr> <tr><td>Ensure fallback behavior so timestamps still display correctly when primary timestamp <br>fields are missing or malformed.</td></tr> <tr><td>Provide necessary test coverage to validate timestamp normalization and edge cases.</td></tr> <tr><td>Reduce build-info caching issues so build/version info reflects latest build.</td></tr> <tr><td rowspan=2>⚪</td> <td>Manually verify in the deployed UI that all traces and metrics tables now render correct <br>dates/times across different locales and timezones.</td></tr> <tr><td>Validate end-to-end with real backend data sources (including Proton DateTime64 and <br>_tp_time presence) to ensure no remaining "Invalid Date" cases.</td></tr> </tbody></table> </details> </td></tr> <tr><td colspan='2'><strong>Codebase Duplication Compliance</strong></td></tr> <tr><td>⚪</td><td><details><summary><strong>Codebase context is not defined </strong></summary> Follow the <a href='https://qodo-merge-docs.qodo.ai/core-abilities/rag_context_enrichment/'>guide</a> to enable codebase context checks. </details></td></tr> <tr><td colspan='2'><strong>Custom Compliance</strong></td></tr> <tr><td>⚪</td><td><details><summary><strong>No custom compliance provided</strong></summary> Follow the <a href='https://qodo-merge-docs.qodo.ai/tools/compliance/'>guide</a> to enable custom compliance check. </details></td></tr> <tr><td align="center" colspan="2">   </td></tr></tbody></table> <details><summary>Compliance status legend</summary> 🟢 - Fully Compliant<br> 🟡 - Partial Compliant<br> 🔴 - Not Compliant<br> ⚪ - Requires Further Human Verification<br> 🏷️ - Compliance label<br> </details>

qodo-code-review[bot] commented

2025-10-16 13:47:49 +00:00

(Migrated from github.com)

Author

Owner

Imported GitHub PR comment.

Original author: @qodo-code-review[bot]
Original URL: https://github.com/carverauto/serviceradar/pull/1786#issuecomment-3410977605
Original created: 2025-10-16T13:47:49Z

You are nearing your monthly Qodo Merge usage quota. For more information, please visit here.

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	Use centralized timestamp normalization utility Refactor the manual timestamp normalization to use the new `resolveTraceTimestampMs` and `toISOString` utility functions for better consistency and maintainability. web/src/components/Observability/MetricsDashboard.tsx [259-264] `const normalizedResults = (response.results \|\| []).map(metric => { - const rawTimestamp = metric.timestamp \|\| metric._tp_time; - const normalizedTimestamp = normalizeTimestampString(rawTimestamp); - return normalizedTimestamp ? { ...metric, timestamp: normalizedTimestamp } : metric; + const resolvedMs = resolveTraceTimestampMs(metric); + if (resolvedMs === null) { + return metric; + } + return { + ...metric, + timestamp: new Date(resolvedMs).toISOString(), + }; }); setMetrics(normalizedResults);` Apply / Chat Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies an opportunity to use the new centralized utility functions, which improves code consistency and maintainability.	Medium
General	Improve error handling for fetch Enhance the `fetch` call for `build-info.json` to include descriptive error messages and log them in the `.catch()` block for easier debugging. web/src/components/Sidebar.tsx [53-56] fetch('/build-info.json', { cache: 'no-store' }) - .then(res => (res.ok ? res.json() : Promise.reject())) + .then(res => { + if (res.ok) { + return res.json(); + } + return Promise.reject(new Error(`Failed to fetch build info: ${res.status} ${res.statusText}`)); + }) .then((data: BuildInfo) => setBuildInfo(data)) - .catch(() => setBuildInfo({})); + .catch((error) => { + console.error(error); + setBuildInfo({}); + }); Apply / Chat Suggestion importance[1-10]: 6 __ Why: The suggestion improves error handling by logging fetch errors, which aids debugging without changing the user-facing behavior.	Low
More

Imported GitHub PR comment. Original author: @qodo-code-review[bot] Original URL: https://github.com/carverauto/serviceradar/pull/1786#issuecomment-3410977605 Original created: 2025-10-16T13:47:49Z --- _You are nearing your monthly Qodo Merge usage quota. For more information, please visit [here](https://qodo-merge-docs.qodo.ai/installation/qodo_merge/#cloud-users)._ ## PR Code Suggestions ✨  Explore these optional code suggestions: <table><thead><tr><td><strong>Category</strong></td><td align=left><strong>Suggestion                                                                                                                                    </strong></td><td align=center><strong>Impact</strong></td></tr><tbody><tr><td rowspan=2>General</td> <td> <details><summary>Use centralized timestamp normalization utility</summary> ___ **Refactor the manual timestamp normalization to use the new <br><code>resolveTraceTimestampMs</code> and <code>toISOString</code> utility functions for better consistency <br>and maintainability.** [web/src/components/Observability/MetricsDashboard.tsx [259-264]](https://github.com/carverauto/serviceradar/pull/1786/files#diff-83706fc5d917c2656f287f5f0aaf4263fceee92776078b9a47169606e4d6a6e8R259-R264) ```diff const normalizedResults = (response.results || []).map(metric => { - const rawTimestamp = metric.timestamp || metric._tp_time; - const normalizedTimestamp = normalizeTimestampString(rawTimestamp); - return normalizedTimestamp ? { ...metric, timestamp: normalizedTimestamp } : metric; + const resolvedMs = resolveTraceTimestampMs(metric); + if (resolvedMs === null) { + return metric; + } + return { + ...metric, + timestamp: new Date(resolvedMs).toISOString(), + }; }); setMetrics(normalizedResults); ``` - [ ] **Apply / Chat**  <details><summary>Suggestion importance[1-10]: 7</summary> __ Why: The suggestion correctly identifies an opportunity to use the new centralized utility functions, which improves code consistency and maintainability. </details></details></td><td align=center>Medium </td></tr><tr><td> <details><summary>Improve error handling for fetch</summary> ___ **Enhance the <code>fetch</code> call for <code>build-info.json</code> to include descriptive error messages <br>and log them in the <code>.catch()</code> block for easier debugging.** [web/src/components/Sidebar.tsx [53-56]](https://github.com/carverauto/serviceradar/pull/1786/files#diff-219f9604c678f564c98ff1920201ea980331348dfb5dff7314a34d9fd198f1b1R53-R56) ```diff fetch('/build-info.json', { cache: 'no-store' }) - .then(res => (res.ok ? res.json() : Promise.reject())) + .then(res => { + if (res.ok) { + return res.json(); + } + return Promise.reject(new Error(`Failed to fetch build info: ${res.status} ${res.statusText}`)); + }) .then((data: BuildInfo) => setBuildInfo(data)) - .catch(() => setBuildInfo({})); + .catch((error) => { + console.error(error); + setBuildInfo({}); + }); ``` - [ ] **Apply / Chat**  <details><summary>Suggestion importance[1-10]: 6</summary> __ Why: The suggestion improves error handling by logging fetch errors, which aids debugging without changing the user-facing behavior. </details></details></td><td align=center>Low </td></tr> <tr><td align="center" colspan="2"> - [ ] More  </td><td></td></tr></tbody></table>