fix: timeline ordering when streaming events (#408)

Fixes #404 

Also shorts the time range indicator and adds tooltips

<img width="343" alt="Screenshot 2023-09-19 at 7 14 06 AM"
src="https://github.com/TBD54566975/ftl/assets/51647/bbb55afa-d6a1-4432-9793-deed67ff089b">
<img width="330" alt="Screenshot 2023-09-19 at 7 14 13 AM"
src="https://github.com/TBD54566975/ftl/assets/51647/36946858-3aff-49ad-845a-4b0df7aad574">

console/client/src/features/timeline/Timeline.tsx

@@ -47,7 +47,7 @@ export const Timeline = ({ timeSettings, filters }: Props) => {
         filters,
         onEventReceived: (event) => {
           if (!timeSettings.isPaused) {
-            setEntries((prev) => [...prev, event].slice(0, maxTimelineEntries))
+            setEntries((prev) => [event, ...prev].slice(0, maxTimelineEntries))
           }
         },
       })

console/client/src/features/timeline/filters/TimelineTimeControls.tsx

@@ -9,7 +9,15 @@ import {
   PlayIcon,
 } from '@heroicons/react/24/outline'
 import React, { Fragment } from 'react'
-import { bgColor, borderColor, classNames, formatTimestampShort, panelColor, textColor } from '../../../utils'
+import {
+  bgColor,
+  borderColor,
+  classNames,
+  formatTimestampShort,
+  formatTimestampTime,
+  panelColor,
+  textColor,
+} from '../../../utils'
 
 interface TimeRange {
   label: string
@@ -101,8 +109,11 @@ export const TimelineTimeControls = ({ onTimeSettingsChange }: Props) => {
     <>
       <div className='flex items-center h-6'>
         {newerThan && (
-          <span className='text-xs font-roboto-mono mr-2 text-gray-400'>
-            {formatTimestampShort(olderThan)} - {formatTimestampShort(newerThan)}
+          <span
+            title={`${formatTimestampShort(olderThan)} - ${formatTimestampShort(newerThan)}`}
+            className='text-xs font-roboto-mono mr-2 text-gray-400'
+          >
+            {formatTimestampTime(olderThan)} - {formatTimestampTime(newerThan)}
           </span>
         )}
 

console/client/src/services/console.service.ts

@@ -128,7 +128,7 @@ export interface StreamEventsParams {
 export const streamEvents = async ({ abortControllerSignal, filters, onEventReceived }: StreamEventsParams) => {
   try {
     for await (const response of client.streamEvents(
-      { updateInterval: { seconds: BigInt(1) }, query: { limit: 1000, order: EventsQuery_Order.DESC, filters } },
+      { updateInterval: { seconds: BigInt(1) }, query: { limit: 1000, filters } },
       { signal: abortControllerSignal },
     )) {
       if (response.event != null) {

console/client/src/utils/date.utils.ts

@@ -24,3 +24,15 @@ export const formatTimestampShort = (timestamp?: Timestamp): string => {
 
   return formattedDate
 }
+
+export const formatTimestampTime = (timestamp?: Timestamp): string => {
+  if (!timestamp) return '(no date)'
+  const date = timestamp.toDate()
+
+  const formattedDate = `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(
+    2,
+    '0',
+  )}:${String(date.getSeconds()).padStart(2, '0')}`
+
+  return formattedDate
+}