Austin/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2024-11-16 11:42:29 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Merge 79765848e8 into 2fed55ae6b

Browse Source
This commit is contained in:
Jason Tan 2024-11-15 16:31:52 +08:00 committed by GitHub
commit 2863695f1f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 30 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 && (

30
web/app/components/app/log/filter.tsx
View File

@ -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]'

10
web/app/components/app/log/index.tsx
View File

@ -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'),
}
: {}),