test/dify
1
0
Fork 0
mirror of https://gitee.com/dify_ai/dify.git synced 2024-12-03 11:48:08 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Feat: add debounce for search in logs (#8924)

Browse Source
This commit is contained in:
KVOJJJin 2024-09-30 17:18:47 +08:00 committed by GitHub
parent fa837b2dfd
commit 1af4ca344e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/app/components/app/annotation/index.tsx
View File

@ -3,6 +3,7 @@ import type { FC } from 'react'
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { Pagination } from 'react-headless-pagination' import { Pagination } from 'react-headless-pagination'
import { useDebounce } from 'ahooks'
import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline' import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline'
import Toast from '../../base/toast' import Toast from '../../base/toast'
import Filter from './filter' import Filter from './filter'
@ -67,10 +68,11 @@ const Annotation: FC<Props> = ({
const [queryParams, setQueryParams] = useState<QueryParam>({}) const [queryParams, setQueryParams] = useState<QueryParam>({})
const [currPage, setCurrPage] = React.useState<number>(0) const [currPage, setCurrPage] = React.useState<number>(0)
const debouncedQueryParams = useDebounce(queryParams, { wait: 500 })
const query = { const query = {
page: currPage + 1, page: currPage + 1,
limit: APP_PAGE_LIMIT, limit: APP_PAGE_LIMIT,
keyword: queryParams.keyword || '', keyword: debouncedQueryParams.keyword || '',
} }
const [controlUpdateList, setControlUpdateList] = useState(Date.now()) const [controlUpdateList, setControlUpdateList] = useState(Date.now())
@ -232,8 +234,8 @@ const Annotation: FC<Props> = ({
middlePagesSiblingCount={1} middlePagesSiblingCount={1}
setCurrentPage={setCurrPage} setCurrentPage={setCurrPage}
totalPages={Math.ceil(total / APP_PAGE_LIMIT)} totalPages={Math.ceil(total / APP_PAGE_LIMIT)}
truncatableClassName="w-8 px-0.5 text-center" truncableClassName="w-8 px-0.5 text-center"
truncatableText="..." truncableText="..."
> >
<Pagination.PrevButton <Pagination.PrevButton
disabled={currPage === 0} disabled={currPage === 0}

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

@ -4,6 +4,7 @@ import React, { useState } from 'react'
import useSWR from 'swr' import useSWR from 'swr'
import { usePathname } from 'next/navigation' import { usePathname } from 'next/navigation'
import { Pagination } from 'react-headless-pagination' import { Pagination } from 'react-headless-pagination'
import { useDebounce } from 'ahooks'
import { omit } from 'lodash-es' import { omit } from 'lodash-es'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline' import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline'
@ -59,6 +60,7 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
sort_by: '-created_at', sort_by: '-created_at',
}) })
const [currPage, setCurrPage] = React.useState<number>(0) const [currPage, setCurrPage] = React.useState<number>(0)
const debouncedQueryParams = useDebounce(queryParams, { wait: 500 })
// Get the app type first // Get the app type first
const isChatMode = appDetail.mode !== 'completion' const isChatMode = appDetail.mode !== 'completion'
@ -66,14 +68,14 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
const query = { const query = {
page: currPage + 1, page: currPage + 1,
limit: APP_PAGE_LIMIT, limit: APP_PAGE_LIMIT,
...(queryParams.period !== 'all' ...(debouncedQueryParams.period !== 'all'
? { ? {
start: dayjs().subtract(queryParams.period as number, 'day').startOf('day').format('YYYY-MM-DD HH:mm'), start: dayjs().subtract(debouncedQueryParams.period as number, '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'),
} }
: {}), : {}),
...(isChatMode ? { sort_by: queryParams.sort_by } : {}), ...(isChatMode ? { sort_by: debouncedQueryParams.sort_by } : {}),
...omit(queryParams, ['period']), ...omit(debouncedQueryParams, ['period']),
} }
const getWebAppType = (appType: AppMode) => { const getWebAppType = (appType: AppMode) => {
@ -119,8 +121,8 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
middlePagesSiblingCount={1} middlePagesSiblingCount={1}
setCurrentPage={setCurrPage} setCurrentPage={setCurrPage}
totalPages={Math.ceil(total / APP_PAGE_LIMIT)} totalPages={Math.ceil(total / APP_PAGE_LIMIT)}
truncatableClassName="w-8 px-0.5 text-center" truncableClassName="w-8 px-0.5 text-center"
truncatableText="..." truncableText="..."
> >
<Pagination.PrevButton <Pagination.PrevButton
disabled={currPage === 0} disabled={currPage === 0}

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

@ -4,6 +4,7 @@ import React, { useState } from 'react'
import useSWR from 'swr' import useSWR from 'swr'
import { usePathname } from 'next/navigation' import { usePathname } from 'next/navigation'
import { Pagination } from 'react-headless-pagination' import { Pagination } from 'react-headless-pagination'
import { useDebounce } from 'ahooks'
import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline' 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'
@ -51,12 +52,13 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
const { t } = useTranslation() const { t } = useTranslation()
const [queryParams, setQueryParams] = useState<QueryParam>({ status: 'all' }) const [queryParams, setQueryParams] = useState<QueryParam>({ status: 'all' })
const [currPage, setCurrPage] = React.useState<number>(0) const [currPage, setCurrPage] = React.useState<number>(0)
const debouncedQueryParams = useDebounce(queryParams, { wait: 500 })
const query = { const query = {
page: currPage + 1, page: currPage + 1,
limit: APP_PAGE_LIMIT, limit: APP_PAGE_LIMIT,
...(queryParams.status !== 'all' ? { status: queryParams.status } : {}), ...(debouncedQueryParams.status !== 'all' ? { status: debouncedQueryParams.status } : {}),
...(queryParams.keyword ? { keyword: queryParams.keyword } : {}), ...(debouncedQueryParams.keyword ? { keyword: debouncedQueryParams.keyword } : {}),
} }
const getWebAppType = (appType: AppMode) => { const getWebAppType = (appType: AppMode) => {
@ -93,8 +95,8 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
middlePagesSiblingCount={1} middlePagesSiblingCount={1}
setCurrentPage={setCurrPage} setCurrentPage={setCurrPage}
totalPages={Math.ceil(total / APP_PAGE_LIMIT)} totalPages={Math.ceil(total / APP_PAGE_LIMIT)}
truncatableClassName="w-8 px-0.5 text-center" truncableClassName="w-8 px-0.5 text-center"
truncatableText="..." truncableText="..."
> >
<Pagination.PrevButton <Pagination.PrevButton
disabled={currPage === 0} disabled={currPage === 0}