| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| |
|
| | import { useState, useEffect } from 'react'; |
| | import { useTranslation } from 'react-i18next'; |
| | import { Modal } from '@douyinfe/semi-ui'; |
| | import { |
| | API, |
| | copy, |
| | isAdmin, |
| | showError, |
| | showSuccess, |
| | timestamp2string, |
| | } from '../../helpers'; |
| | import { ITEMS_PER_PAGE } from '../../constants'; |
| | import { useTableCompactMode } from '../common/useTableCompactMode'; |
| |
|
| | export const useTaskLogsData = () => { |
| | const { t } = useTranslation(); |
| |
|
| | |
| | const COLUMN_KEYS = { |
| | SUBMIT_TIME: 'submit_time', |
| | FINISH_TIME: 'finish_time', |
| | DURATION: 'duration', |
| | CHANNEL: 'channel', |
| | PLATFORM: 'platform', |
| | TYPE: 'type', |
| | TASK_ID: 'task_id', |
| | TASK_STATUS: 'task_status', |
| | PROGRESS: 'progress', |
| | FAIL_REASON: 'fail_reason', |
| | RESULT_URL: 'result_url', |
| | }; |
| |
|
| | |
| | const [logs, setLogs] = useState([]); |
| | const [loading, setLoading] = useState(false); |
| | const [activePage, setActivePage] = useState(1); |
| | const [logCount, setLogCount] = useState(0); |
| | const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE); |
| |
|
| | |
| | const isAdminUser = isAdmin(); |
| | |
| | const STORAGE_KEY = isAdminUser |
| | ? 'task-logs-table-columns-admin' |
| | : 'task-logs-table-columns-user'; |
| |
|
| | |
| | const [isModalOpen, setIsModalOpen] = useState(false); |
| | const [modalContent, setModalContent] = useState(''); |
| |
|
| | |
| | const [isVideoModalOpen, setIsVideoModalOpen] = useState(false); |
| | const [videoUrl, setVideoUrl] = useState(''); |
| |
|
| | |
| | const [formApi, setFormApi] = useState(null); |
| | let now = new Date(); |
| | let zeroNow = new Date(now.getFullYear(), now.getMonth(), now.getDate()); |
| |
|
| | const formInitValues = { |
| | channel_id: '', |
| | task_id: '', |
| | dateRange: [ |
| | timestamp2string(zeroNow.getTime() / 1000), |
| | timestamp2string(now.getTime() / 1000 + 3600), |
| | ], |
| | }; |
| |
|
| | |
| | const [visibleColumns, setVisibleColumns] = useState({}); |
| | const [showColumnSelector, setShowColumnSelector] = useState(false); |
| |
|
| | |
| | const [compactMode, setCompactMode] = useTableCompactMode('taskLogs'); |
| |
|
| | |
| | useEffect(() => { |
| | const savedColumns = localStorage.getItem(STORAGE_KEY); |
| | if (savedColumns) { |
| | try { |
| | const parsed = JSON.parse(savedColumns); |
| | const defaults = getDefaultColumnVisibility(); |
| | const merged = { ...defaults, ...parsed }; |
| |
|
| | |
| | if (!isAdminUser) { |
| | merged[COLUMN_KEYS.CHANNEL] = false; |
| | } |
| | setVisibleColumns(merged); |
| | } catch (e) { |
| | console.error('Failed to parse saved column preferences', e); |
| | initDefaultColumns(); |
| | } |
| | } else { |
| | initDefaultColumns(); |
| | } |
| | }, []); |
| |
|
| | |
| | const getDefaultColumnVisibility = () => { |
| | return { |
| | [COLUMN_KEYS.SUBMIT_TIME]: true, |
| | [COLUMN_KEYS.FINISH_TIME]: true, |
| | [COLUMN_KEYS.DURATION]: true, |
| | [COLUMN_KEYS.CHANNEL]: isAdminUser, |
| | [COLUMN_KEYS.PLATFORM]: true, |
| | [COLUMN_KEYS.TYPE]: true, |
| | [COLUMN_KEYS.TASK_ID]: true, |
| | [COLUMN_KEYS.TASK_STATUS]: true, |
| | [COLUMN_KEYS.PROGRESS]: true, |
| | [COLUMN_KEYS.FAIL_REASON]: true, |
| | [COLUMN_KEYS.RESULT_URL]: true, |
| | }; |
| | }; |
| |
|
| | |
| | const initDefaultColumns = () => { |
| | const defaults = getDefaultColumnVisibility(); |
| | setVisibleColumns(defaults); |
| | localStorage.setItem(STORAGE_KEY, JSON.stringify(defaults)); |
| | }; |
| |
|
| | |
| | const handleColumnVisibilityChange = (columnKey, checked) => { |
| | const updatedColumns = { ...visibleColumns, [columnKey]: checked }; |
| | setVisibleColumns(updatedColumns); |
| | }; |
| |
|
| | |
| | const handleSelectAll = (checked) => { |
| | const allKeys = Object.keys(COLUMN_KEYS).map((key) => COLUMN_KEYS[key]); |
| | const updatedColumns = {}; |
| |
|
| | allKeys.forEach((key) => { |
| | if (key === COLUMN_KEYS.CHANNEL && !isAdminUser) { |
| | updatedColumns[key] = false; |
| | } else { |
| | updatedColumns[key] = checked; |
| | } |
| | }); |
| |
|
| | setVisibleColumns(updatedColumns); |
| | }; |
| |
|
| | |
| | useEffect(() => { |
| | if (Object.keys(visibleColumns).length > 0) { |
| | localStorage.setItem(STORAGE_KEY, JSON.stringify(visibleColumns)); |
| | } |
| | }, [visibleColumns]); |
| |
|
| | |
| | const getFormValues = () => { |
| | const formValues = formApi ? formApi.getValues() : {}; |
| |
|
| | |
| | let start_timestamp = timestamp2string(zeroNow.getTime() / 1000); |
| | let end_timestamp = timestamp2string(now.getTime() / 1000 + 3600); |
| |
|
| | if ( |
| | formValues.dateRange && |
| | Array.isArray(formValues.dateRange) && |
| | formValues.dateRange.length === 2 |
| | ) { |
| | start_timestamp = formValues.dateRange[0]; |
| | end_timestamp = formValues.dateRange[1]; |
| | } |
| |
|
| | return { |
| | channel_id: formValues.channel_id || '', |
| | task_id: formValues.task_id || '', |
| | start_timestamp, |
| | end_timestamp, |
| | }; |
| | }; |
| |
|
| | |
| | const enrichLogs = (items) => { |
| | return items.map((log) => ({ |
| | ...log, |
| | timestamp2string: timestamp2string(log.created_at), |
| | key: '' + log.id, |
| | })); |
| | }; |
| |
|
| | |
| | const syncPageData = (payload) => { |
| | const items = enrichLogs(payload.items || []); |
| | setLogs(items); |
| | setLogCount(payload.total || 0); |
| | setActivePage(payload.page || 1); |
| | setPageSize(payload.page_size || pageSize); |
| | }; |
| |
|
| | |
| | const loadLogs = async (page = 1, size = pageSize) => { |
| | setLoading(true); |
| | const { channel_id, task_id, start_timestamp, end_timestamp } = |
| | getFormValues(); |
| | let localStartTimestamp = parseInt(Date.parse(start_timestamp) / 1000); |
| | let localEndTimestamp = parseInt(Date.parse(end_timestamp) / 1000); |
| | let url = isAdminUser |
| | ? `/api/task/?p=${page}&page_size=${size}&channel_id=${channel_id}&task_id=${task_id}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}` |
| | : `/api/task/self?p=${page}&page_size=${size}&task_id=${task_id}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`; |
| | const res = await API.get(url); |
| | const { success, message, data } = res.data; |
| | if (success) { |
| | syncPageData(data); |
| | } else { |
| | showError(message); |
| | } |
| | setLoading(false); |
| | }; |
| |
|
| | |
| | const handlePageChange = (page) => { |
| | loadLogs(page, pageSize).then(); |
| | }; |
| |
|
| | const handlePageSizeChange = async (size) => { |
| | localStorage.setItem('task-page-size', size + ''); |
| | await loadLogs(1, size); |
| | }; |
| |
|
| | |
| | const refresh = async () => { |
| | await loadLogs(1, pageSize); |
| | }; |
| |
|
| | |
| | const copyText = async (text) => { |
| | if (await copy(text)) { |
| | showSuccess(t('已复制:') + text); |
| | } else { |
| | Modal.error({ title: t('无法复制到剪贴板,请手动复制'), content: text }); |
| | } |
| | }; |
| |
|
| | |
| | const openContentModal = (content) => { |
| | setModalContent(content); |
| | setIsModalOpen(true); |
| | }; |
| |
|
| | |
| | const openVideoModal = (url) => { |
| | setVideoUrl(url); |
| | setIsVideoModalOpen(true); |
| | }; |
| |
|
| | |
| | useEffect(() => { |
| | const localPageSize = |
| | parseInt(localStorage.getItem('task-page-size')) || ITEMS_PER_PAGE; |
| | setPageSize(localPageSize); |
| | loadLogs(1, localPageSize).then(); |
| | }, []); |
| |
|
| | return { |
| | |
| | logs, |
| | loading, |
| | activePage, |
| | logCount, |
| | pageSize, |
| | isAdminUser, |
| |
|
| | |
| | isModalOpen, |
| | setIsModalOpen, |
| | modalContent, |
| |
|
| | |
| | isVideoModalOpen, |
| | setIsVideoModalOpen, |
| | videoUrl, |
| |
|
| | |
| | formApi, |
| | setFormApi, |
| | formInitValues, |
| | getFormValues, |
| |
|
| | |
| | visibleColumns, |
| | showColumnSelector, |
| | setShowColumnSelector, |
| | handleColumnVisibilityChange, |
| | handleSelectAll, |
| | initDefaultColumns, |
| | COLUMN_KEYS, |
| |
|
| | |
| | compactMode, |
| | setCompactMode, |
| |
|
| | |
| | loadLogs, |
| | handlePageChange, |
| | handlePageSizeChange, |
| | refresh, |
| | copyText, |
| | openContentModal, |
| | openVideoModal, |
| | enrichLogs, |
| | syncPageData, |
| |
|
| | |
| | t, |
| | }; |
| | }; |
| |
|