fix: date filter key not unique (#10645)

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chartView.tsx

@@ -7,7 +7,7 @@ import type { PeriodParams } from '@/app/components/app/overview/appChart'
 import { AvgResponseTime, AvgSessionInteractions, AvgUserInteractions, ConversationsChart, CostChart, EndUsersChart, MessagesChart, TokenPerSecond, UserSatisfactionRate, WorkflowCostChart, WorkflowDailyTerminalsChart, WorkflowMessagesChart } from '@/app/components/app/overview/appChart'
 import type { Item } from '@/app/components/base/select'
 import { SimpleSelect } from '@/app/components/base/select'
-import { TIME_PERIOD_LIST } from '@/app/components/app/log/filter'
+import { TIME_PERIOD_MAPPING } from '@/app/components/app/log/filter'
 import { useStore as useAppStore } from '@/app/components/app/store'
 
 dayjs.extend(quarterOfYear)
@@ -28,7 +28,7 @@ export default function ChartView({ appId }: IChartViewProps) {
   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 === 'all') {
+    if (item.value === '-1') {
       setPeriod({ name: item.name, query: undefined })
     }
     else if (item.value === 0) {
@@ -49,10 +49,15 @@ export default function ChartView({ appId }: IChartViewProps) {
       <div className='flex flex-row items-center mt-8 mb-4 text-gray-900 text-base'>
         <span className='mr-3'>{t('appOverview.analysis.title')}</span>
         <SimpleSelect
-          items={TIME_PERIOD_LIST.map(item => ({ value: item.value, name: t(`appLog.filter.period.${item.name}`) }))}
+          items={Object.entries(TIME_PERIOD_MAPPING).map(([k, v]) => ({ value: k, name: t(`appLog.filter.period.${v.name}`) }))}
           className='mt-0 !w-40'
-          onSelect={onSelect}
-          defaultValue={7}
+          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>
       {!isWorkflow && (

web/app/components/app/log/filter.tsx

@@ -15,17 +15,17 @@ dayjs.extend(quarterOfYear)
 
 const today = dayjs()
 
-export const TIME_PERIOD_LIST = [
-  { value: 0, name: 'today' },
-  { value: 7, name: 'last7days' },
-  { value: 28, name: 'last4weeks' },
-  { value: today.diff(today.subtract(3, 'month'), 'day'), name: 'last3months' },
-  { value: today.diff(today.subtract(12, 'month'), 'day'), name: 'last12months' },
-  { value: today.diff(today.startOf('month'), 'day'), name: 'monthToDate' },
-  { value: today.diff(today.startOf('quarter'), 'day'), name: 'quarterToDate' },
-  { value: today.diff(today.startOf('year'), 'day'), name: 'yearToDate' },
-  { value: 'all', name: 'allTime' },
-]
+export const TIME_PERIOD_MAPPING: { [key: string]: { value: number; name: string } } = {
+  1: { value: 0, name: 'today' },
+  2: { value: 7, name: 'last7days' },
+  3: { value: 28, name: 'last4weeks' },
+  4: { value: today.diff(today.subtract(3, 'month'), 'day'), name: 'last3months' },
+  5: { value: today.diff(today.subtract(12, 'month'), 'day'), name: 'last12months' },
+  6: { value: today.diff(today.startOf('month'), 'day'), name: 'monthToDate' },
+  7: { value: today.diff(today.startOf('quarter'), 'day'), name: 'quarterToDate' },
+  8: { value: today.diff(today.startOf('year'), 'day'), name: 'yearToDate' },
+  9: { value: -1, name: 'allTime' },
+}
 
 type IFilterProps = {
   isChatMode?: boolean
@@ -45,12 +45,12 @@ const Filter: FC<IFilterProps> = ({ isChatMode, appId, queryParams, setQueryPara
         className='min-w-[150px]'
         panelClassName='w-[270px]'
         leftIcon={<RiCalendarLine className='h-4 w-4 text-text-secondary' />}
-        value={queryParams.period || 7}
+        value={queryParams.period}
         onSelect={(item) => {
-          setQueryParams({ ...queryParams, period: item.value as string })
+          setQueryParams({ ...queryParams, period: item.value })
         }}
-        onClear={() => setQueryParams({ ...queryParams, period: 7 })}
-        items={TIME_PERIOD_LIST.map(item => ({ value: item.value, name: t(`appLog.filter.period.${item.name}`) }))}
+        onClear={() => setQueryParams({ ...queryParams, period: '9' })}
+        items={Object.entries(TIME_PERIOD_MAPPING).map(([k, v]) => ({ value: k, name: t(`appLog.filter.period.${v.name}`) }))}
       />
       <Chip
         className='min-w-[150px]'

web/app/components/app/log/index.tsx

@@ -11,7 +11,7 @@ import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline'
 import { Trans, useTranslation } from 'react-i18next'
 import Link from 'next/link'
 import List from './list'
-import Filter from './filter'
+import Filter, { TIME_PERIOD_MAPPING } from './filter'
 import s from './style.module.css'
 import Loading from '@/app/components/base/loading'
 import { fetchChatConversations, fetchCompletionConversations } from '@/service/log'
@@ -22,7 +22,7 @@ export type ILogsProps = {
 }
 
 export type QueryParam = {
-  period?: number | string
+  period: string
   annotation_status?: string
   keyword?: string
   sort_by?: string
@@ -55,7 +55,7 @@ const EmptyElement: FC<{ appUrl: string }> = ({ appUrl }) => {
 const Logs: FC<ILogsProps> = ({ appDetail }) => {
   const { t } = useTranslation()
   const [queryParams, setQueryParams] = useState<QueryParam>({
-    period: 7,
+    period: '2',
     annotation_status: 'all',
     sort_by: '-created_at',
   })
@@ -68,9 +68,9 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
   const query = {
     page: currPage + 1,
     limit: APP_PAGE_LIMIT,
-    ...(debouncedQueryParams.period !== 'all'
+    ...((debouncedQueryParams.period !== '9')
       ? {
-        start: dayjs().subtract(debouncedQueryParams.period as number, 'day').startOf('day').format('YYYY-MM-DD HH:mm'),
+        start: dayjs().subtract(TIME_PERIOD_MAPPING[debouncedQueryParams.period].value, 'day').startOf('day').format('YYYY-MM-DD HH:mm'),
         end: dayjs().endOf('day').format('YYYY-MM-DD HH:mm'),
       }
       : {}),