chore: not SaaS version can query long log time range (#28109)

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chart-view.tsx

@@ -7,6 +7,9 @@ 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 { useStore as useAppStore } from '@/app/components/app/store'
 import TimeRangePicker from './time-range-picker'
+import { TIME_PERIOD_MAPPING as LONG_TIME_PERIOD_MAPPING } from '@/app/components/app/log/filter'
+import { IS_CLOUD_EDITION } from '@/config'
+import LongTimeRangePicker from './long-time-range-picker'
 
 dayjs.extend(quarterOfYear)
 
@@ -30,7 +33,10 @@ 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.today'), query: { start: today.startOf('day').format(queryDateFormat), end: today.endOf('day').format(queryDateFormat) } })
+  const [period, setPeriod] = useState<PeriodParams>(IS_CLOUD_EDITION
+    ? { name: t('appLog.filter.period.today'), query: { start: today.startOf('day').format(queryDateFormat), end: today.endOf('day').format(queryDateFormat) } }
+    : { name: t('appLog.filter.period.last7days'), query: { start: today.subtract(7, 'day').startOf('day').format(queryDateFormat), end: today.endOf('day').format(queryDateFormat) } },
+  )
 
   if (!appDetail)
     return null
@@ -40,11 +46,20 @@ 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'>
-          <TimeRangePicker
+          {IS_CLOUD_EDITION ? (
-            ranges={TIME_PERIOD_MAPPING}
+            <TimeRangePicker
-            onSelect={setPeriod}
+              ranges={TIME_PERIOD_MAPPING}
-            queryDateFormat={queryDateFormat}
+              onSelect={setPeriod}
-          />
+              queryDateFormat={queryDateFormat}
+            />
+          ) : (
+            <LongTimeRangePicker
+              periodMapping={LONG_TIME_PERIOD_MAPPING}
+              onSelect={setPeriod}
+              queryDateFormat={queryDateFormat}
+            />
+          )}
+
           {headerRight}
         </div>
       </div>

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/long-time-range-picker.tsx

@@ -0,0 +1,63 @@
+'use client'
+import type { PeriodParams } from '@/app/components/app/overview/app-chart'
+import type { FC } from 'react'
+import React from 'react'
+import type { Item } from '@/app/components/base/select'
+import { SimpleSelect } from '@/app/components/base/select'
+import { useTranslation } from 'react-i18next'
+import dayjs from 'dayjs'
+type Props = {
+  periodMapping: { [key: string]: { value: number; name: string } }
+  onSelect: (payload: PeriodParams) => void
+  queryDateFormat: string
+}
+
+const today = dayjs()
+
+const LongTimeRangePicker: FC<Props> = ({
+  periodMapping,
+  onSelect,
+  queryDateFormat,
+}) => {
+  const { t } = useTranslation()
+
+  const handleSelect = React.useCallback((item: Item) => {
+    const id = item.value
+    const value = periodMapping[id]?.value ?? '-1'
+    const name = item.name || t('appLog.filter.period.allTime')
+    if (value === -1) {
+      onSelect({ name: t('appLog.filter.period.allTime'), query: undefined })
+    }
+    else if (value === 0) {
+      const startOfToday = today.startOf('day').format(queryDateFormat)
+      const endOfToday = today.endOf('day').format(queryDateFormat)
+      onSelect({
+        name,
+        query: {
+          start: startOfToday,
+          end: endOfToday,
+        },
+      })
+    }
+    else {
+      onSelect({
+        name,
+        query: {
+          start: today.subtract(value as number, 'day').startOf('day').format(queryDateFormat),
+          end: today.endOf('day').format(queryDateFormat),
+        },
+      })
+    }
+  }, [onSelect, periodMapping, queryDateFormat, t])
+
+  return (
+    <SimpleSelect
+      items={Object.entries(periodMapping).map(([k, v]) => ({ value: k, name: t(`appLog.filter.period.${v.name}`) }))}
+      className='mt-0 !w-40'
+      notClearable={true}
+      onSelect={handleSelect}
+      defaultValue={'2'}
+    />
+  )
+}
+export default React.memo(LongTimeRangePicker)