Skip to content

Centralize ParseJSON time display formatters (#228) #264

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Fujio-Turner merged 1 commit into from
Sep 15, 2026
Merged

Centralize ParseJSON time display formatters (#228) #264

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions app/assets/js/charts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
// IMPORTS
// ============================================================

import { Logger, TEXT_CONSTANTS } from './base.js';
import { Logger, TEXT_CONSTANTS, formatTimestamp } from './base.js';
import {
originalRequests,
parseTime,
Expand Down Expand Up @@ -7171,7 +7171,7 @@ size: 12
lineData.push({
value: [timestamp.getTime(), collIdx, avgValue],
collection: collection,
time: timestamp.toISOString().substring(0, 19).replace('T', ' '),
time: formatTimestamp(timestamp, "YYYY-MM-DD HH:MM:SS"),
actualValue: avgValue,
count: bucket.count
});
Expand Down
5 changes: 3 additions & 2 deletions app/assets/js/insights.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
// This module handles the Insights tab logic and automated analysis.
// ============================================================

import { Logger, TEXT_CONSTANTS } from './base.js';
import { Logger, TEXT_CONSTANTS, formatTimestamp } from './base.js';
import {
originalRequests,
parseTime,
Expand All @@ -13,6 +13,7 @@ import {
import {
formatNumber,
formatDuration,
formatTime,
copyToClipboard
} from './ui-helpers.js';

Expand Down Expand Up @@ -1342,7 +1343,7 @@ import {
// Apply timezone conversion to requestTime
const originalTime = query.requestTime || "";
const convertedDate = getChartDate(originalTime);
const formattedDate = convertedDate ? convertedDate.toISOString().replace('T', ' ').substring(0, 23) + 'Z' : originalTime;
const formattedDate = convertedDate ? formatTimestamp(convertedDate, "YYYY-MM-DD HH:MM:SS.sssZ") : originalTime;

Logger.trace(`[Insights] Query ${index}: Original=${originalTime}, Converted=${formattedDate}`);

Expand Down
68 changes: 8 additions & 60 deletions app/assets/js/main-legacy-cleaned.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -553,63 +553,11 @@ if (window.TEXT_CONSTANTS) {
return totalMs;
}

// Format time in standardized mm:ss.sss format
// ============================================================
// FORMATTERS MODULE (Optimization Step 2b)
// Consolidated formatting helper functions
// ============================================================
const Formatters = {
// Format milliseconds to MM:SS.mmm
formatTime(milliseconds) {
if (!milliseconds || isNaN(milliseconds) || milliseconds <= 0) {
return "00:00.000";
}

// Handle very small values (less than 1ms) by rounding to nearest millisecond
// but ensuring they show as at least 0.001 if they're greater than 0
if (milliseconds < 1) {
milliseconds = Math.max(0.001, Math.round(milliseconds * 1000) / 1000);
}

const totalSeconds = Math.floor(milliseconds / 1000);
const remainingMs = milliseconds % 1000;
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;

// Format with leading zeros
const formattedMinutes = minutes.toString().padStart(2, "0");
const formattedSeconds = seconds.toString().padStart(2, "0");

// Format milliseconds as 3-digit integer (rounded)
const formattedMs = Math.round(remainingMs).toString().padStart(3, "0");

return `${formattedMinutes}:${formattedSeconds}.${formattedMs}`;
},

// Format original time value for tooltip display
formatTimeTooltip(timeStr, milliseconds) {
if (!timeStr || timeStr === "N/A") {
return "";
}

// If it's a very small value, show the original string for precision
if (milliseconds < 1) {
return `Original: ${timeStr}`;
}

// For larger values, show both formatted time and original
const formatted = this.formatTime(milliseconds);
if (timeStr !== formatted) {
return `Original: ${timeStr}`;
}

return "";
}
};

// Backward compatibility - keep original function names as aliases
const formatTime = (milliseconds) => Formatters.formatTime(milliseconds);
const formatTimeTooltip = (timeStr, milliseconds) => Formatters.formatTimeTooltip(timeStr, milliseconds);
// Duration + timestamp display — live implementations are in
// ui-helpers.js / base.js and exposed on window by those modules.
const formatTime = (milliseconds) => window.formatTime(milliseconds);
const formatTimeTooltip = (timeStr, milliseconds) => window.formatTimeTooltip(timeStr, milliseconds);
const formatTimestamp = (dateInput, format) => window.formatTimestamp(dateInput, format);



Expand Down Expand Up @@ -2585,7 +2533,7 @@ if (window.TEXT_CONSTANTS) {

// Apply timezone conversion
const convertedDate = getChartDate(originalTime);
return convertedDate ? convertedDate.toISOString().replace('T', ' ').substring(0, 23) + 'Z' : originalTime;
return convertedDate ? formatTimestamp(convertedDate, "YYYY-MM-DD HH:MM:SS.sssZ") : originalTime;
},
render: (value) => value
},
Expand Down Expand Up @@ -5759,7 +5707,7 @@ function renderQueryGroupPhaseTimesChart(group) {
const d = params.data;
if (!d.value) return '';
const timestamp = new Date(d.value[0]);
const timeStr = timestamp.toISOString().substring(0, 19).replace('T', ' ');
const timeStr = formatTimestamp(timestamp, "YYYY-MM-DD HH:MM:SS");
const collectionIdx = d.value[1];
const collection = data.collections[collectionIdx];
const timeValue = d.value[2];
Expand Down Expand Up @@ -9188,7 +9136,7 @@ function renderQueryGroupPhaseTimesChart(group) {
// Apply timezone conversion to requestTime
const originalTime = query.requestTime || "";
const convertedDate = getChartDate(originalTime);
const formattedDate = convertedDate ? convertedDate.toISOString().replace('T', ' ').substring(0, 23) + 'Z' : originalTime;
const formattedDate = convertedDate ? formatTimestamp(convertedDate, "YYYY-MM-DD HH:MM:SS.sssZ") : originalTime;

Logger.trace(`[Insights] JOIN Query ${index}: Original=${originalTime}, Converted=${formattedDate}`);
const flags = query.flags || [];
Expand Down
95 changes: 15 additions & 80 deletions app/assets/js/main-legacy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -878,63 +878,11 @@ if (window.TEXT_CONSTANTS) {
return totalMs;
}

// Format time in standardized mm:ss.sss format
// ============================================================
// FORMATTERS MODULE (Optimization Step 2b)
// Consolidated formatting helper functions
// ============================================================
const Formatters = {
// Format milliseconds to MM:SS.mmm
formatTime(milliseconds) {
if (!milliseconds || isNaN(milliseconds) || milliseconds <= 0) {
return "00:00.000";
}

// Handle very small values (less than 1ms) by rounding to nearest millisecond
// but ensuring they show as at least 0.001 if they're greater than 0
if (milliseconds < 1) {
milliseconds = Math.max(0.001, Math.round(milliseconds * 1000) / 1000);
}

const totalSeconds = Math.floor(milliseconds / 1000);
const remainingMs = milliseconds % 1000;
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;

// Format with leading zeros
const formattedMinutes = minutes.toString().padStart(2, "0");
const formattedSeconds = seconds.toString().padStart(2, "0");

// Format milliseconds as 3-digit integer (rounded)
const formattedMs = Math.round(remainingMs).toString().padStart(3, "0");

return `${formattedMinutes}:${formattedSeconds}.${formattedMs}`;
},

// Format original time value for tooltip display
formatTimeTooltip(timeStr, milliseconds) {
if (!timeStr || timeStr === "N/A") {
return "";
}

// If it's a very small value, show the original string for precision
if (milliseconds < 1) {
return `Original: ${timeStr}`;
}

// For larger values, show both formatted time and original
const formatted = this.formatTime(milliseconds);
if (timeStr !== formatted) {
return `Original: ${timeStr}`;
}

return "";
}
};

// Backward compatibility - keep original function names as aliases
const formatTime = (milliseconds) => Formatters.formatTime(milliseconds);
const formatTimeTooltip = (timeStr, milliseconds) => Formatters.formatTimeTooltip(timeStr, milliseconds);
// Duration + timestamp display — live implementations are in
// ui-helpers.js / base.js and exposed on window by those modules.
const formatTime = (milliseconds) => window.formatTime(milliseconds);
const formatTimeTooltip = (timeStr, milliseconds) => window.formatTimeTooltip(timeStr, milliseconds);
const formatTimestamp = (dateInput, format) => window.formatTimestamp(dateInput, format);



Expand Down Expand Up @@ -12098,7 +12046,7 @@ size: 12
lineData.push({
value: [timestamp.getTime(), collIdx, avgValue],
collection: collection,
time: timestamp.toISOString().substring(0, 19).replace('T', ' '),
time: formatTimestamp(timestamp, "YYYY-MM-DD HH:MM:SS"),
actualValue: avgValue,
count: bucket.count
});
Expand Down Expand Up @@ -12374,7 +12322,7 @@ size: 12
const value = params.data[2];

const timeStr = tIdx >= 0 && tIdx < data.timeBuckets.length
? data.timeBuckets[tIdx].toISOString().substring(0, 19).replace('T', ' ')
? formatTimestamp(data.timeBuckets[tIdx], "YYYY-MM-DD HH:MM:SS")
: 'N/A';
const collection = cIdx >= 0 && cIdx < data.collections.length
? data.collections[cIdx]
Expand Down Expand Up @@ -20232,7 +20180,7 @@ function generateElapsedTimeChart(requests) {
// Apply timezone conversion to requestTime
const originalTime = query.requestTime || "";
const convertedDate = getChartDate(originalTime);
const formattedDate = convertedDate ? convertedDate.toISOString().replace('T', ' ').substring(0, 23) + 'Z' : originalTime;
const formattedDate = convertedDate ? formatTimestamp(convertedDate, "YYYY-MM-DD HH:MM:SS.sssZ") : originalTime;

Logger.trace(`[updateSampleQueriesTable] Query ${index}: Original=${originalTime}, Converted=${formattedDate}`);

Expand Down Expand Up @@ -20368,7 +20316,7 @@ function generateElapsedTimeChart(requests) {
// Apply timezone conversion to requestTime
const originalTime = query.requestTime || "";
const convertedDate = getChartDate(originalTime);
const formattedDate = convertedDate ? convertedDate.toISOString().replace('T', ' ').substring(0, 23) + 'Z' : originalTime;
const formattedDate = convertedDate ? formatTimestamp(convertedDate, "YYYY-MM-DD HH:MM:SS.sssZ") : originalTime;

Logger.trace(`[Insights] Query ${index}: Original=${originalTime}, Converted=${formattedDate}`);

Expand Down Expand Up @@ -20439,7 +20387,7 @@ function generateElapsedTimeChart(requests) {
// Apply timezone conversion to requestTime
const originalTime = query.requestTime || "";
const convertedDate = getChartDate(originalTime);
const formattedDate = convertedDate ? convertedDate.toISOString().replace('T', ' ').substring(0, 23) + 'Z' : originalTime;
const formattedDate = convertedDate ? formatTimestamp(convertedDate, "YYYY-MM-DD HH:MM:SS.sssZ") : originalTime;

Logger.trace(`[Insights] JOIN Query ${index}: Original=${originalTime}, Converted=${formattedDate}`);
const flags = query.flags || [];
Expand Down Expand Up @@ -29233,19 +29181,6 @@ ${info.features.map((f) => ` • ${f}`).join("\n")}
}
}

/**
* Format ISO timestamp to readable format
*/
function formatTimestamp(isoStr) {
if (!isoStr) return '';
try {
const d = new Date(isoStr);
return d.toISOString().replace('T', ' ').substring(0, 19);
} catch (e) {
return isoStr;
}
}

/**
* Render vis.js Timeline for AI Chart Trends insights
* @param {Array} insights - Array of insight objects with start, end, group, severity, title, content
Expand Down Expand Up @@ -29327,7 +29262,7 @@ ${info.features.map((f) => ` • ${f}`).join("\n")}
title: `<div style="max-width: 500px; max-height: 400px; padding: 10px; font-size: 12px; line-height: 1.5; overflow-y: auto;">
<div style="font-weight: bold; font-size: 13px; margin-bottom: 8px; color: ${colors.color};">${insight.title || 'Insight'}</div>
<div style="background: #f8f9fa; padding: 6px 8px; border-radius: 4px; margin-bottom: 8px; font-family: monospace; font-size: 11px;">
<div><strong>FROM:</strong> ${formatTimestamp(insight.start)} → <strong>TO:</strong> ${formatTimestamp(insight.end || insight.start)} <span style="color: #666;">(${duration})</span></div>
<div><strong>FROM:</strong> ${formatTimestamp(insight.start, "YYYY-MM-DD HH:MM:SS")} → <strong>TO:</strong> ${formatTimestamp(insight.end || insight.start, "YYYY-MM-DD HH:MM:SS")} <span style="color: #666;">(${duration})</span></div>
</div>
<div style="color: #333; word-wrap: break-word; white-space: pre-wrap;">${insight.content || ''}</div>
</div>`,
Expand All @@ -29338,7 +29273,7 @@ ${info.features.map((f) => ` • ${f}`).join("\n")}
// Add stake focus item if enabled
if (stakeFocus && stakeFocus.enabled && stakeFocus.datetime) {
const stakeColors = severityColors.stake;
const stakeTime = formatTimestamp(stakeFocus.datetime);
const stakeTime = formatTimestamp(stakeFocus.datetime, "YYYY-MM-DD HH:MM:SS");

itemsData.push({
id: 'stake-point',
Expand Down Expand Up @@ -29401,7 +29336,7 @@ ${info.features.map((f) => ` • ${f}`).join("\n")}
if (stakeFocus && stakeFocus.enabled && stakeFocus.datetime) {
const stakeDate = new Date(stakeFocus.datetime);
window._aiInsightsTimeline.addCustomTime(stakeDate, 'stake-focus-line');
window._aiInsightsTimeline.setCustomTimeTitle('📍 Stake Focus: ' + formatTimestamp(stakeFocus.datetime), 'stake-focus-line');
window._aiInsightsTimeline.setCustomTimeTitle('📍 Stake Focus: ' + formatTimestamp(stakeFocus.datetime, "YYYY-MM-DD HH:MM:SS"), 'stake-focus-line');
Logger.info('[AI] 📍 Added stake focus vertical line at: ' + stakeFocus.datetime);
}

Expand Down Expand Up @@ -29462,8 +29397,8 @@ ${info.features.map((f) => ` • ${f}`).join("\n")}

sortedInsights.forEach((insight, idx) => {
const duration = formatDuration(insight.start, insight.end);
const startTime = formatTimestamp(insight.start).substring(5); // Remove year
const endTime = formatTimestamp(insight.end || insight.start).substring(5);
const startTime = formatTimestamp(insight.start, "YYYY-MM-DD HH:MM:SS").substring(5); // Remove year
const endTime = formatTimestamp(insight.end || insight.start, "YYYY-MM-DD HH:MM:SS").substring(5);
const rowBg = idx % 2 === 0 ? '#fff' : '#f8f9fa';

html += `
Expand Down
6 changes: 6 additions & 0 deletions app/assets/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,9 @@ import {
formatNumber,
formatBytes,
formatDuration,
formatTime,
formatTimeTooltip,
formatTimestamp,
escapeHtml,
openModal,
closeModal,
Expand All @@ -68,6 +71,9 @@ window.throttle = throttle;
window.formatNumber = formatNumber;
window.formatBytes = formatBytes;
window.formatDuration = formatDuration;
window.formatTime = formatTime;
window.formatTimeTooltip = formatTimeTooltip;
window.formatTimestamp = formatTimestamp;

// Data Layer Helpers
window.detectTimezoneFromData = detectTimezoneFromData;
Expand Down
4 changes: 2 additions & 2 deletions app/assets/js/tables.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
// IMPORTS
// ============================================================

import { Logger, TEXT_CONSTANTS } from './base.js';
import { Logger, TEXT_CONSTANTS, formatTimestamp } from './base.js';
import {
originalRequests,
statementStore,
Expand Down Expand Up @@ -566,7 +566,7 @@ import {
// Apply timezone conversion to requestTime
const originalTime = query.requestTime || "";
const convertedDate = getChartDate(originalTime);
const formattedDate = convertedDate ? convertedDate.toISOString().replace('T', ' ').substring(0, 23) + 'Z' : originalTime;
const formattedDate = convertedDate ? formatTimestamp(convertedDate, "YYYY-MM-DD HH:MM:SS.sssZ") : originalTime;

Logger.trace(`[tables] Query ${index}: Original=${originalTime}, Converted=${formattedDate}`);

Expand Down
Loading
Loading