Show seconds in trace start time on the trace page (jaegertracing#430)

Show seconds in trace start time on the trace page Signed-off-by: vvvprabhakar <vvvprabhakar@gmail.com>
vvvprabhakar · Aug 4, 2019 · cc6895e · cc6895e
2 parents f3f2482 + 5c6986c
commit cc6895e
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.css b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.css
@@ -96,6 +96,14 @@ limitations under the License.
   padding: 0.25rem 0.5rem;
 }
 
+.TracePageHeader--overviewItem--valueDetail {
+  color: #aaa;
+}
+
+.TracePageHeader--overviewItem--value:hover > .TracePageHeader--overviewItem--valueDetail {
+  color: unset;
+}
+
 .TracePageHeader--archiveIcon {
   font-size: 1.78em;
   margin-right: 0.15em;

diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx
@@ -68,7 +68,18 @@ export const HEADER_ITEMS = [
   {
     key: 'timestamp',
     label: 'Trace Start',
-    renderer: (trace: Trace) => formatDatetime(trace.startTime),
+    renderer: (trace: Trace) => {
+      const dateStr = formatDatetime(trace.startTime);
+      const match = dateStr.match(/^(.+)(:\d\d\.\d+)$/);
+      return match ? (
+        <span className="TracePageHeader--overviewItem--value">
+          {match[1]}
+          <span className="TracePageHeader--overviewItem--valueDetail">{match[2]}</span>
+        </span>
+      ) : (
+        dateStr
+      );
+    },
   },
   {
     key: 'duration',

diff --git a/packages/jaeger-ui/src/utils/date.tsx b/packages/jaeger-ui/src/utils/date.tsx
@@ -22,7 +22,7 @@ const YESTERDAY = 'Yesterday';
 
 export const STANDARD_DATE_FORMAT = 'YYYY-MM-DD';
 export const STANDARD_TIME_FORMAT = 'HH:mm';
-export const STANDARD_DATETIME_FORMAT = 'LLL';
+export const STANDARD_DATETIME_FORMAT = 'MMMM D YYYY, HH:mm:ss.SSS';
 export const ONE_MILLISECOND = 1000;
 export const ONE_SECOND = 1000 * ONE_MILLISECOND;
 export const DEFAULT_MS_PRECISION = Math.log10(ONE_MILLISECOND);