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 { 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 type { Item } from '@/app/components/base/select'
import { SimpleSelect } 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' import { useStore as useAppStore } from '@/app/components/app/store'
dayjs.extend(quarterOfYear) 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 [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) => { const onSelect = (item: Item) => {
if (item.value === 'all') { if (item.value === '-1') {
setPeriod({ name: item.name, query: undefined }) setPeriod({ name: item.name, query: undefined })
} }
else if (item.value === 0) { 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'> <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> <span className='mr-3'>{t('appOverview.analysis.title')}</span>
<SimpleSelect <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' className='mt-0 !w-40'
onSelect={onSelect} onSelect={(item) => {
defaultValue={7} 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> </div>
{!isWorkflow && ( {!isWorkflow && (

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

@ -15,17 +15,17 @@ dayjs.extend(quarterOfYear)
const today = dayjs() const today = dayjs()
export const TIME_PERIOD_LIST = [ export const TIME_PERIOD_MAPPING: { [key: string]: { value: number; name: string } } = {
{ value: 0, name: 'today' }, 1: { value: 0, name: 'today' },
{ value: 7, name: 'last7days' }, 2: { value: 7, name: 'last7days' },
{ value: 28, name: 'last4weeks' }, 3: { value: 28, name: 'last4weeks' },
{ value: today.diff(today.subtract(3, 'month'), 'day'), name: 'last3months' }, 4: { value: today.diff(today.subtract(3, 'month'), 'day'), name: 'last3months' },
{ value: today.diff(today.subtract(12, 'month'), 'day'), name: 'last12months' }, 5: { value: today.diff(today.subtract(12, 'month'), 'day'), name: 'last12months' },
{ value: today.diff(today.startOf('month'), 'day'), name: 'monthToDate' }, 6: { value: today.diff(today.startOf('month'), 'day'), name: 'monthToDate' },
{ value: today.diff(today.startOf('quarter'), 'day'), name: 'quarterToDate' }, 7: { value: today.diff(today.startOf('quarter'), 'day'), name: 'quarterToDate' },
{ value: today.diff(today.startOf('year'), 'day'), name: 'yearToDate' }, 8: { value: today.diff(today.startOf('year'), 'day'), name: 'yearToDate' },
{ value: 'all', name: 'allTime' }, 9: { value: -1, name: 'allTime' },
] }
type IFilterProps = { type IFilterProps = {
isChatMode?: boolean isChatMode?: boolean
@ -45,12 +45,12 @@ const Filter: FC<IFilterProps> = ({ isChatMode, appId, queryParams, setQueryPara
className='min-w-[150px]' className='min-w-[150px]'
panelClassName='w-[270px]' panelClassName='w-[270px]'
leftIcon={<RiCalendarLine className='h-4 w-4 text-text-secondary' />} leftIcon={<RiCalendarLine className='h-4 w-4 text-text-secondary' />}
value={queryParams.period || 7} value={queryParams.period}
onSelect={(item) => { onSelect={(item) => {
setQueryParams({ ...queryParams, period: item.value as string }) setQueryParams({ ...queryParams, period: item.value })
}} }}
onClear={() => setQueryParams({ ...queryParams, period: 7 })} onClear={() => setQueryParams({ ...queryParams, period: '9' })}
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}`) }))}
/> />
<Chip <Chip
className='min-w-[150px]' 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 { Trans, useTranslation } from 'react-i18next'
import Link from 'next/link' import Link from 'next/link'
import List from './list' import List from './list'
import Filter from './filter' import Filter, { TIME_PERIOD_MAPPING } from './filter'
import s from './style.module.css' import s from './style.module.css'
import Loading from '@/app/components/base/loading' import Loading from '@/app/components/base/loading'
import { fetchChatConversations, fetchCompletionConversations } from '@/service/log' import { fetchChatConversations, fetchCompletionConversations } from '@/service/log'
@ -22,7 +22,7 @@ export type ILogsProps = {
} }
export type QueryParam = { export type QueryParam = {
period?: number | string period: string
annotation_status?: string annotation_status?: string
keyword?: string keyword?: string
sort_by?: string sort_by?: string
@ -55,7 +55,7 @@ const EmptyElement: FC<{ appUrl: string }> = ({ appUrl }) => {
const Logs: FC<ILogsProps> = ({ appDetail }) => { const Logs: FC<ILogsProps> = ({ appDetail }) => {
const { t } = useTranslation() const { t } = useTranslation()
const [queryParams, setQueryParams] = useState<QueryParam>({ const [queryParams, setQueryParams] = useState<QueryParam>({
period: 7, period: '2',
annotation_status: 'all', annotation_status: 'all',
sort_by: '-created_at', sort_by: '-created_at',
}) })
@ -68,9 +68,9 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
const query = { const query = {
page: currPage + 1, page: currPage + 1,
limit: APP_PAGE_LIMIT, 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'), end: dayjs().endOf('day').format('YYYY-MM-DD HH:mm'),
} }
: {}), : {}),