添加日志弹窗日志状态显示

This commit is contained in:
whyour 2021-05-14 14:57:30 +08:00
parent 2ba99d9c47
commit e32a56df93
3 changed files with 21 additions and 5 deletions

View File

@ -9,8 +9,8 @@ const initData = [
name: '更新面板', name: '更新面板',
command: `ql update`, command: `ql update`,
schedule: `${randomSchedule(60, 1)} ${randomSchedule( schedule: `${randomSchedule(60, 1)} ${randomSchedule(
24, 6,
7, 1,
).toString()} * * *`, ).toString()} * * *`,
status: CrontabStatus.idle, status: CrontabStatus.idle,
}, },

View File

@ -14,7 +14,7 @@ import {
} from 'antd'; } from 'antd';
import { import {
ClockCircleOutlined, ClockCircleOutlined,
SyncOutlined, Loading3QuartersOutlined,
CloseCircleOutlined, CloseCircleOutlined,
FileTextOutlined, FileTextOutlined,
EllipsisOutlined, EllipsisOutlined,
@ -105,7 +105,7 @@ const Crontab = () => {
</Tag> </Tag>
)} )}
{record.status === CrontabStatus.running && ( {record.status === CrontabStatus.running && (
<Tag icon={<SyncOutlined spin />} color="processing"> <Tag icon={<Loading3QuartersOutlined spin />} color="processing">
</Tag> </Tag>
)} )}

View File

@ -2,6 +2,10 @@ import React, { useEffect, useState } from 'react';
import { Modal, notification, Input, Form } from 'antd'; import { Modal, notification, Input, Form } from 'antd';
import { request } from '@/utils/http'; import { request } from '@/utils/http';
import config from '@/utils/config'; import config from '@/utils/config';
import {
Loading3QuartersOutlined,
CheckCircleOutlined,
} from '@ant-design/icons';
enum CrontabStatus { enum CrontabStatus {
'running', 'running',
@ -20,6 +24,7 @@ const CronLogModal = ({
}) => { }) => {
const [value, setValue] = useState<string>('启动中...'); const [value, setValue] = useState<string>('启动中...');
const [loading, setLoading] = useState<any>(true); const [loading, setLoading] = useState<any>(true);
const [excuting, setExcuting] = useState<any>(true);
const getCronLog = (isFirst?: boolean) => { const getCronLog = (isFirst?: boolean) => {
if (isFirst) { if (isFirst) {
@ -31,6 +36,7 @@ const CronLogModal = ({
if (localStorage.getItem('logCron') === cron._id) { if (localStorage.getItem('logCron') === cron._id) {
const log = data.data as string; const log = data.data as string;
setValue(log || '暂无日志'); setValue(log || '暂无日志');
setExcuting(log && !log.includes('执行结束'));
if (log && !log.includes('执行结束')) { if (log && !log.includes('执行结束')) {
setTimeout(() => { setTimeout(() => {
getCronLog(); getCronLog();
@ -50,6 +56,16 @@ const CronLogModal = ({
handleCancel(); handleCancel();
}; };
const titleElement = () => {
return (
<>
<span style={{ marginRight: 5 }}>-{cron && cron.name}</span>{' '}
{excuting && <Loading3QuartersOutlined spin />}
{!excuting && <CheckCircleOutlined />}
</>
);
};
useEffect(() => { useEffect(() => {
if (cron) { if (cron) {
getCronLog(true); getCronLog(true);
@ -58,7 +74,7 @@ const CronLogModal = ({
return ( return (
<Modal <Modal
title={`日志-${cron && cron.name}`} title={titleElement()}
visible={visible} visible={visible}
forceRender forceRender
onOk={() => cancel()} onOk={() => cancel()}