| | |
| | | import useSWR from 'swr' |
| | | import { usePathname } from 'next/navigation' |
| | | import { useDebounce } from 'ahooks' |
| | | import { omit } from 'lodash-es' |
| | | import dayjs from 'dayjs' |
| | | import utc from 'dayjs/plugin/utc' |
| | | import timezone from 'dayjs/plugin/timezone' |
| | | import { Trans, useTranslation } from 'react-i18next' |
| | | import Link from 'next/link' |
| | | import List from './list' |
| | | import Filter, { TIME_PERIOD_MAPPING } from './filter' |
| | | import Filter from './filter' |
| | | import Pagination from '@/app/components/base/pagination' |
| | | import Loading from '@/app/components/base/loading' |
| | | import { fetchWorkflowLogs } from '@/service/log' |
| | | import { APP_PAGE_LIMIT } from '@/config' |
| | | import type { App, AppMode } from '@/types/app' |
| | | import { useAppContext } from '@/context/app-context' |
| | | |
| | | dayjs.extend(utc) |
| | | dayjs.extend(timezone) |
| | | |
| | | export type ILogsProps = { |
| | | appDetail: App |
| | | } |
| | | |
| | | export type QueryParam = { |
| | | period: string |
| | | status?: string |
| | | keyword?: string |
| | | } |
| | |
| | | const pathname = usePathname() |
| | | const pathSegments = pathname.split('/') |
| | | pathSegments.pop() |
| | | return <div className='flex h-full items-center justify-center'> |
| | | <div className='box-border h-fit w-[560px] rounded-2xl bg-background-section-burn px-5 py-4'> |
| | | <span className='system-md-semibold text-text-secondary'>{t('appLog.table.empty.element.title')}<ThreeDotsIcon className='relative -left-1.5 -top-3 inline' /></span> |
| | | <div className='system-sm-regular mt-2 text-text-tertiary'> |
| | | return <div className='flex items-center justify-center h-full'> |
| | | <div className='bg-background-section-burn w-[560px] h-fit box-border px-5 py-4 rounded-2xl'> |
| | | <span className='text-text-secondary system-md-semibold'>{t('appLog.table.empty.element.title')}<ThreeDotsIcon className='inline relative -top-3 -left-1.5' /></span> |
| | | <div className='mt-2 text-text-tertiary system-sm-regular'> |
| | | <Trans |
| | | i18nKey="appLog.table.empty.element.content" |
| | | components={{ shareLink: <Link href={`${pathSegments.join('/')}/overview`} className='text-util-colors-blue-blue-600' />, testLink: <Link href={appUrl} className='text-util-colors-blue-blue-600' target='_blank' rel='noopener noreferrer' /> }} |
| | |
| | | |
| | | const Logs: FC<ILogsProps> = ({ appDetail }) => { |
| | | const { t } = useTranslation() |
| | | const { userProfile: { timezone } } = useAppContext() |
| | | const [queryParams, setQueryParams] = useState<QueryParam>({ status: 'all', period: '2' }) |
| | | const [queryParams, setQueryParams] = useState<QueryParam>({ status: 'all' }) |
| | | const [currPage, setCurrPage] = React.useState<number>(0) |
| | | const debouncedQueryParams = useDebounce(queryParams, { wait: 500 }) |
| | | const [limit, setLimit] = React.useState<number>(APP_PAGE_LIMIT) |
| | |
| | | limit, |
| | | ...(debouncedQueryParams.status !== 'all' ? { status: debouncedQueryParams.status } : {}), |
| | | ...(debouncedQueryParams.keyword ? { keyword: debouncedQueryParams.keyword } : {}), |
| | | ...((debouncedQueryParams.period !== '9') |
| | | ? { |
| | | created_at__after: dayjs().subtract(TIME_PERIOD_MAPPING[debouncedQueryParams.period].value, 'day').startOf('day').tz(timezone).format('YYYY-MM-DDTHH:mm:ssZ'), |
| | | created_at__before: dayjs().endOf('day').tz(timezone).format('YYYY-MM-DDTHH:mm:ssZ'), |
| | | } |
| | | : {}), |
| | | ...omit(debouncedQueryParams, ['period', 'status']), |
| | | } |
| | | |
| | | const getWebAppType = (appType: AppMode) => { |
| | |
| | | const total = workflowLogs?.total |
| | | |
| | | return ( |
| | | <div className='flex h-full flex-col'> |
| | | <h1 className='system-xl-semibold text-text-primary'>{t('appLog.workflowTitle')}</h1> |
| | | <p className='system-sm-regular text-text-tertiary'>{t('appLog.workflowSubtitle')}</p> |
| | | <div className='flex max-h-[calc(100%-16px)] flex-1 flex-col py-4'> |
| | | <div className='flex flex-col h-full'> |
| | | <h1 className='text-text-primary system-xl-semibold'>{t('appLog.workflowTitle')}</h1> |
| | | <p className='text-text-tertiary system-sm-regular'>{t('appLog.workflowSubtitle')}</p> |
| | | <div className='flex flex-col py-4 flex-1 max-h-[calc(100%-16px)]'> |
| | | <Filter queryParams={queryParams} setQueryParams={setQueryParams} /> |
| | | {/* workflow log */} |
| | | {total === undefined |