log filters QA

pluralsh · Feb 28, 2025 · f4151f9 · f4151f9
1 parent 4b43f67
commit f4151f9
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 10 deletions.
diff --git a/assets/src/components/cd/logs/DateTimeFormInput.tsx b/assets/src/components/cd/logs/DateTimeFormInput.tsx
@@ -7,6 +7,7 @@ import {
   SegmentedInputHandle,
   SemanticColorKey,
   Toast,
+  useIsFocused,
 } from '@pluralsh/design-system'
 import { Body2P } from 'components/utils/typography/Text'
 
@@ -43,6 +44,7 @@ export function DateTimeFormInput({
   const [isEnteringTimestamp, setIsEnteringTimestamp] = useState(false)
   const [customTimestamp, setCustomTimestamp] = useState('')
   const [timestampError, setTimestampError] = useState(false)
+  const [isFocused, focusCallbacks] = useIsFocused({})
 
   const initDateStr = formatDateTime(initialDate, DATE_FORMAT) || EMPTY_DATE_STR
   const initTimeStr = formatDateTime(initialDate, TIME_FORMAT) || EMPTY_TIME_STR
@@ -86,15 +88,15 @@ export function DateTimeFormInput({
     else setDate?.(initialDate)
   }, [dateStr, dateValid, initialDate, isSetToNow, setDate, timeStr, timeValid])
 
-  const setValsFromTimestamp = (val?: DateParam) => {
-    const timestamp = val ?? customTimestamp
+  const setValsFromTimestamp = (val?: string) => {
+    const timestamp = handleUnixTS(val ?? customTimestamp)
     if (!isValidDateTime(timestamp)) {
       setTimestampError(true)
       return
     }
     setIsEnteringTimestamp(false)
-    const date = formatDateTime(timestamp, DATE_FORMAT)
-    const time = formatDateTime(timestamp, TIME_FORMAT)
+    const date = formatDateTime(timestamp, DATE_FORMAT, true)
+    const time = formatDateTime(timestamp, TIME_FORMAT, true)
     runAfterLayout(() => {
       dateInputRef.current?.setValue(date)
       timeInputRef.current?.setValue(time)
@@ -130,6 +132,7 @@ export function DateTimeFormInput({
         )
       }
       {...props}
+      {...focusCallbacks}
     >
       {isEnteringTimestamp ? (
         <Input
@@ -159,7 +162,7 @@ export function DateTimeFormInput({
         >
           <SegmentedInput
             ref={dateInputRef}
-            {...(isSetToNow && { value: 'Today' })}
+            {...(isSetToNow && !isFocused && { value: 'Today' })}
             style={{ borderColor: dateError && colors['border-danger'] }}
             prefix="Date"
             endIcon={<Body2P $color="text-xlight">MM/DD/YYYY</Body2P>}
@@ -173,7 +176,7 @@ export function DateTimeFormInput({
           />
           <SegmentedInput
             ref={timeInputRef}
-            {...(isSetToNow && { value: 'Now' })}
+            {...(isSetToNow && !isFocused && { value: 'Now' })}
             style={{ borderColor: timeError && colors['border-danger'] }}
             prefix="Time"
             endIcon={<Body2P $color="text-xlight">UTC</Body2P>}
@@ -220,3 +223,11 @@ const CaptionTextBtnSC = styled.span<{
   opacity: $disabled ? 0.4 : 1,
   '&:hover': { textDecoration: $disabled ? 'none' : 'underline' },
 }))
+
+const handleUnixTS = (val: string) => {
+  // parse as a unix timestamp if it's a valid number
+  // otherwise keep it as is
+  const valNum = Number(val)
+  if (!isNaN(valNum)) return val.length === 10 ? valNum * 1000 : valNum
+  return val
+}
diff --git a/assets/src/components/cd/logs/LogsFilters.tsx b/assets/src/components/cd/logs/LogsFilters.tsx
@@ -9,6 +9,7 @@ import {
   ListBoxItem,
   SearchIcon,
   Select,
+  Toast,
 } from '@pluralsh/design-system'
 import { useUpdateState } from 'components/hooks/useUpdateState'
 import { LogFacetInput } from 'generated/graphql'
@@ -114,8 +115,10 @@ function FiltersForm({
   onSubmit: (form: LogsFlyoverFiltersT) => void
   setLive: (live: boolean) => void
 }) {
+  const { spacing } = useTheme()
   const [hasDTErrors, setHasDTErrors] = useState(false)
   const clearDTFormRef = useRef<() => void>(null)
+  const [showSuccessToast, setShowSuccessToast] = useState(false)
 
   const { state, update, initialState, hasUpdates } =
     useUpdateState(initialForm)
@@ -125,6 +128,7 @@ function FiltersForm({
     onSubmit(state)
     // by default, logs should be live if no specific date is set, and vice versa
     setLive(!state.date)
+    setShowSuccessToast(true)
   }
 
   const resetToDefault = () => {
@@ -202,6 +206,14 @@ function FiltersForm({
           </Button>
         </Flex>
       </WrapperFormSC>
+      <Toast
+        show={showSuccessToast}
+        closeTimeout={2000}
+        onClose={() => setShowSuccessToast(false)}
+        margin={spacing.xlarge}
+      >
+        Filters applied
+      </Toast>
     </FillLevelContext>
   )
 }

diff --git a/assets/src/utils/datetime.ts b/assets/src/utils/datetime.ts
@@ -79,13 +79,18 @@ dayjs.extend(localizedFormat)
 
 export { dayjs as dayjsExtended }
 
-export const formatDateTime = (date: DateParam, pattern?: string) => {
+export const formatDateTime = (
+  date: DateParam,
+  pattern?: string,
+  isUtc: boolean = false
+) => {
   if (!date) return ''
-  if (pattern) return dayjs(date).format(pattern)
+  const dateObj = isUtc ? dayjs(date).utc(true) : dayjs(date)
+  if (pattern) return dateObj.format(pattern)
 
-  if (isSameDay(date)) return dayjs(date).format('h:mm a')
+  if (isSameDay(date)) return dateObj.format('h:mm a')
 
-  return dayjs(date).format('MMM D, YYYY h:mm a')
+  return dateObj.format('MMM D, YYYY h:mm a')
 }
 
 export const toISOStringOrUndef = (date: DateParam, isUtc: boolean = false) => {