Chore: change query log time range (#28052)

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
2025-11-10 18:39:12 +08:00
parent b9bc48d8dd
commit 2c62a77cf4
18 changed files with 410 additions and 48 deletions
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chart-view.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chart-view.tsx
@@ -5,15 +5,19 @@ import quarterOfYear from 'dayjs/plugin/quarterOfYear'
 import { useTranslation } from 'react-i18next'
 import type { PeriodParams } from '@/app/components/app/overview/app-chart'
 import { AvgResponseTime, AvgSessionInteractions, AvgUserInteractions, ConversationsChart, CostChart, EndUsersChart, MessagesChart, TokenPerSecond, UserSatisfactionRate, WorkflowCostChart, WorkflowDailyTerminalsChart, WorkflowMessagesChart } from '@/app/components/app/overview/app-chart'
-import type { Item } from '@/app/components/base/select'
-import { SimpleSelect } from '@/app/components/base/select'
-import { TIME_PERIOD_MAPPING } from '@/app/components/app/log/filter'
 import { useStore as useAppStore } from '@/app/components/app/store'
+import TimeRangePicker from './time-range-picker'

 dayjs.extend(quarterOfYear)

 const today = dayjs()

+const TIME_PERIOD_MAPPING = [
+  { value: 0, name: 'today' },
+  { value: 7, name: 'last7days' },
+  { value: 30, name: 'last30days' },
+]
+
 const queryDateFormat = 'YYYY-MM-DD HH:mm'

 export type IChartViewProps = {
@@ -26,21 +30,7 @@ export default function ChartView({ appId, headerRight }: IChartViewProps) {
  const appDetail = useAppStore(state => state.appDetail)
  const isChatApp = appDetail?.mode !== 'completion' && appDetail?.mode !== 'workflow'
  const isWorkflow = appDetail?.mode === 'workflow'
-  const [period, setPeriod] = useState<PeriodParams>({ name: t('appLog.filter.period.last7days'), query: { start: today.subtract(7, 'day').startOf('day').format(queryDateFormat), end: today.endOf('day').format(queryDateFormat) } })
-
-  const onSelect = (item: Item) => {
-    if (item.value === -1) {
-      setPeriod({ name: item.name, query: undefined })
-    }
-    else if (item.value === 0) {
-      const startOfToday = today.startOf('day').format(queryDateFormat)
-      const endOfToday = today.endOf('day').format(queryDateFormat)
-      setPeriod({ name: item.name, query: { start: startOfToday, end: endOfToday } })
-    }
-    else {
-      setPeriod({ name: item.name, query: { start: today.subtract(item.value as number, 'day').startOf('day').format(queryDateFormat), end: today.endOf('day').format(queryDateFormat) } })
-    }
-  }
+  const [period, setPeriod] = useState<PeriodParams>({ name: t('appLog.filter.period.today'), query: { start: today.startOf('day').format(queryDateFormat), end: today.endOf('day').format(queryDateFormat) } })

  if (!appDetail)
    return null
@@ -50,20 +40,11 @@ export default function ChartView({ appId, headerRight }: IChartViewProps) {
      <div className='mb-4'>
        <div className='system-xl-semibold mb-2 text-text-primary'>{t('common.appMenus.overview')}</div>
        <div className='flex items-center justify-between'>
-          <div className='flex flex-row items-center'>
-            <SimpleSelect
-              items={Object.entries(TIME_PERIOD_MAPPING).map(([k, v]) => ({ value: k, name: t(`appLog.filter.period.${v.name}`) }))}
-              className='mt-0 !w-40'
-              notClearable={true}
-              onSelect={(item) => {
-                const id = item.value
-                const value = TIME_PERIOD_MAPPING[id]?.value ?? '-1'
-                const name = item.name || t('appLog.filter.period.allTime')
-                onSelect({ value, name })
-              }}
-              defaultValue={'2'}
-            />
-          </div>
+          <TimeRangePicker
+            ranges={TIME_PERIOD_MAPPING}
+            onSelect={setPeriod}
+            queryDateFormat={queryDateFormat}
+          />
          {headerRight}
        </div>
      </div>
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx
@@ -0,0 +1,80 @@
+'use client'
+import { RiCalendarLine } from '@remixicon/react'
+import type { Dayjs } from 'dayjs'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import cn from '@/utils/classnames'
+import { formatToLocalTime } from '@/utils/format'
+import { useI18N } from '@/context/i18n'
+import Picker from '@/app/components/base/date-and-time-picker/date-picker'
+import type { TriggerProps } from '@/app/components/base/date-and-time-picker/types'
+import { noop } from 'lodash-es'
+import dayjs from 'dayjs'
+
+type Props = {
+  start: Dayjs
+  end: Dayjs
+  onStartChange: (date?: Dayjs) => void
+  onEndChange: (date?: Dayjs) => void
+}
+
+const today = dayjs()
+const DatePicker: FC<Props> = ({
+  start,
+  end,
+  onStartChange,
+  onEndChange,
+}) => {
+  const { locale } = useI18N()
+
+  const renderDate = useCallback(({ value, handleClickTrigger, isOpen }: TriggerProps) => {
+    return (
+      <div className={cn('system-sm-regular flex h-7 cursor-pointer items-center rounded-lg px-1 text-components-input-text-filled hover:bg-state-base-hover', isOpen && 'bg-state-base-hover')} onClick={handleClickTrigger}>
+        {value ? formatToLocalTime(value, locale, 'MMM D') : ''}
+      </div>
+    )
+  }, [locale])
+
+  const availableStartDate = end.subtract(30, 'day')
+  const startDateDisabled = useCallback((date: Dayjs) => {
+    if (date.isAfter(today, 'date'))
+      return true
+    return !((date.isAfter(availableStartDate, 'date') || date.isSame(availableStartDate, 'date')) && (date.isBefore(end, 'date') || date.isSame(end, 'date')))
+  }, [availableStartDate, end])
+
+  const availableEndDate = start.add(30, 'day')
+  const endDateDisabled = useCallback((date: Dayjs) => {
+    if (date.isAfter(today, 'date'))
+      return true
+    return !((date.isAfter(start, 'date') || date.isSame(start, 'date')) && (date.isBefore(availableEndDate, 'date') || date.isSame(availableEndDate, 'date')))
+  }, [availableEndDate, start])
+
+  return (
+    <div className='flex h-8 items-center space-x-0.5 rounded-lg bg-components-input-bg-normal px-2'>
+      <div className='p-px'>
+        <RiCalendarLine className='size-3.5 text-text-tertiary' />
+      </div>
+      <Picker
+        value={start}
+        onChange={onStartChange}
+        renderTrigger={renderDate}
+        needTimePicker={false}
+        onClear={noop}
+        noConfirm
+        getIsDateDisabled={startDateDisabled}
+      />
+      <span className='system-sm-regular text-text-tertiary'>-</span>
+      <Picker
+        value={end}
+        onChange={onEndChange}
+        renderTrigger={renderDate}
+        needTimePicker={false}
+        onClear={noop}
+        noConfirm
+        getIsDateDisabled={endDateDisabled}
+      />
+    </div>
+
+  )
+}
+export default React.memo(DatePicker)
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/index.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/index.tsx
@@ -0,0 +1,86 @@
+'use client'
+import type { PeriodParams, PeriodParamsWithTimeRange } from '@/app/components/app/overview/app-chart'
+import type { FC } from 'react'
+import React, { useCallback, useState } from 'react'
+import type { Dayjs } from 'dayjs'
+import { HourglassShape } from '@/app/components/base/icons/src/vender/other'
+import RangeSelector from './range-selector'
+import DatePicker from './date-picker'
+import dayjs from 'dayjs'
+import { useI18N } from '@/context/i18n'
+import { formatToLocalTime } from '@/utils/format'
+
+const today = dayjs()
+
+type Props = {
+  ranges: { value: number; name: string }[]
+  onSelect: (payload: PeriodParams) => void
+  queryDateFormat: string
+}
+
+const TimeRangePicker: FC<Props> = ({
+  ranges,
+  onSelect,
+  queryDateFormat,
+}) => {
+  const { locale } = useI18N()
+
+  const [isCustomRange, setIsCustomRange] = useState(false)
+  const [start, setStart] = useState<Dayjs>(today)
+  const [end, setEnd] = useState<Dayjs>(today)
+
+  const handleRangeChange = useCallback((payload: PeriodParamsWithTimeRange) => {
+    setIsCustomRange(false)
+    setStart(payload.query!.start)
+    setEnd(payload.query!.end)
+    onSelect({
+      name: payload.name,
+      query: {
+        start: payload.query!.start.format(queryDateFormat),
+        end: payload.query!.end.format(queryDateFormat),
+      },
+    })
+  }, [onSelect, queryDateFormat])
+
+  const handleDateChange = useCallback((type: 'start' | 'end') => {
+    return (date?: Dayjs) => {
+      if (!date) return
+      if (type === 'start' && date.isSame(start)) return
+      if (type === 'end' && date.isSame(end)) return
+      if (type === 'start')
+        setStart(date)
+      else
+        setEnd(date)
+
+      const currStart = type === 'start' ? date : start
+      const currEnd = type === 'end' ? date : end
+      onSelect({
+        name: `${formatToLocalTime(currStart, locale, 'MMM D')} - ${formatToLocalTime(currEnd, locale, 'MMM D')}`,
+        query: {
+          start: currStart.format(queryDateFormat),
+          end: currEnd.format(queryDateFormat),
+        },
+      })
+
+      setIsCustomRange(true)
+    }
+  }, [start, end, onSelect, locale, queryDateFormat])
+
+  return (
+    <div className='flex items-center'>
+      <RangeSelector
+        isCustomRange={isCustomRange}
+        ranges={ranges}
+        onSelect={handleRangeChange}
+      />
+      <HourglassShape className='h-3.5 w-2 text-components-input-bg-normal' />
+      <DatePicker
+        start={start}
+        end={end}
+        onStartChange={handleDateChange('start')}
+        onEndChange={handleDateChange('end')}
+      />
+    </div>
+  )
+}
+export default React.memo(TimeRangePicker)
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx
@@ -0,0 +1,81 @@
+'use client'
+import type { PeriodParamsWithTimeRange, TimeRange } from '@/app/components/app/overview/app-chart'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import { SimpleSelect } from '@/app/components/base/select'
+import type { Item } from '@/app/components/base/select'
+import dayjs from 'dayjs'
+import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
+import { useTranslation } from 'react-i18next'
+
+const today = dayjs()
+
+type Props = {
+  isCustomRange: boolean
+  ranges: { value: number; name: string }[]
+  onSelect: (payload: PeriodParamsWithTimeRange) => void
+}
+
+const RangeSelector: FC<Props> = ({
+  isCustomRange,
+  ranges,
+  onSelect,
+}) => {
+  const { t } = useTranslation()
+
+  const handleSelectRange = useCallback((item: Item) => {
+    const { name, value } = item
+    let period: TimeRange | null = null
+    if (value === 0) {
+      const startOfToday = today.startOf('day')
+      const endOfToday = today.endOf('day')
+      period = { start: startOfToday, end: endOfToday }
+    }
+    else {
+      period = { start: today.subtract(item.value as number, 'day').startOf('day'), end: today.endOf('day') }
+    }
+    onSelect({ query: period!, name })
+  }, [onSelect])
+
+  const renderTrigger = useCallback((item: Item | null, isOpen: boolean) => {
+    return (
+      <div className={cn('flex h-8 cursor-pointer items-center space-x-1.5 rounded-lg bg-components-input-bg-normal pl-3 pr-2', isOpen && 'bg-state-base-hover-alt')}>
+        <div className='system-sm-regular text-components-input-text-filled'>{isCustomRange ? t('appLog.filter.period.custom') : item?.name}</div>
+        <RiArrowDownSLine className={cn('size-4 text-text-quaternary', isOpen && 'text-text-secondary')} />
+      </div>
+    )
+  }, [isCustomRange])
+
+  const renderOption = useCallback(({ item, selected }: { item: Item; selected: boolean }) => {
+    return (
+      <>
+        {selected && (
+          <span
+            className={cn(
+              'absolute left-2 top-[9px] flex items-center  text-text-accent',
+            )}
+          >
+            <RiCheckLine className="h-4 w-4" aria-hidden="true" />
+          </span>
+        )}
+        <span className={cn('system-md-regular block truncate')}>{item.name}</span>
+      </>
+    )
+  }, [])
+  return (
+    <SimpleSelect
+      items={ranges.map(v => ({ ...v, name: t(`appLog.filter.period.${v.name}`) }))}
+      className='mt-0 !w-40'
+      notClearable={true}
+      onSelect={handleSelectRange}
+      defaultValue={0}
+      wrapperClassName='h-8'
+      optionWrapClassName='w-[200px] translate-x-[-24px]'
+      renderTrigger={renderTrigger}
+      optionClassName='flex items-center py-0 pl-7 pr-2 h-8'
+      renderOption={renderOption}
+    />
+  )
+}
+export default React.memo(RangeSelector)