From ca6efd73f3c147c8b84a129777a330b0b223a477 Mon Sep 17 00:00:00 2001 From: Jason Tan Date: Sat, 16 Nov 2024 14:43:55 +0800 Subject: [PATCH] fix: date filter key not unique (#10645) --- .../[appId]/overview/chartView.tsx | 15 ++++++---- web/app/components/app/log/filter.tsx | 30 +++++++++---------- web/app/components/app/log/index.tsx | 10 +++---- 3 files changed, 30 insertions(+), 25 deletions(-) diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chartView.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chartView.tsx index b01bc1b8563f00..b5d3462dfacf47 100644 --- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chartView.tsx +++ b/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({ 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) {
{t('appOverview.analysis.title')} ({ 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'} />
{!isWorkflow && ( diff --git a/web/app/components/app/log/filter.tsx b/web/app/components/app/log/filter.tsx index 75dc83a3187c55..787b7405c1aa5d 100644 --- a/web/app/components/app/log/filter.tsx +++ b/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 = ({ isChatMode, appId, queryParams, setQueryPara className='min-w-[150px]' panelClassName='w-[270px]' leftIcon={} - 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}`) }))} /> = ({ appUrl }) => { const Logs: FC = ({ appDetail }) => { const { t } = useTranslation() const [queryParams, setQueryParams] = useState({ - period: 7, + period: '2', annotation_status: 'all', sort_by: '-created_at', }) @@ -68,9 +68,9 @@ const Logs: FC = ({ 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'), } : {}),