Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | 66x 7x 7x 7x 7x 7x 7x 7x 1x 6x 2x 1x 1x 1x 1x 1x 1x | import React, { ReactElement, useState } from "react";
import { Popover, Space, Tag, Timeline } from "antd";
import { useTranslation } from 'react-i18next';
import { fetchCronInformation } from "@utils/FetchUtils";
import { LargeSpin } from "../../components";
import { QuestionCircleOutlined } from "@ant-design/icons";
interface CronExpressionCellProps {
value: string;
}
const CronExpressionCell = (props: CronExpressionCellProps): ReactElement => {
const { value } = props;
const { t } = useTranslation();
const [description, setDescription] = useState<string>();
const [schedules, setSchedules] = useState<Array<string>>([]);
const [from, setFrom] = useState<string>();
const [loading, setLoading] = useState<boolean>();
if (value === '') {
return <div>Invalid expression</div>;
} else {
return (
<Popover
title={undefined}
trigger="click"
placement="rightBottom"
content={loading ? (<LargeSpin />) : (
<Space
size={"middle"}
direction={"vertical"}
style={{ padding: "0 0.3rem" }}
>
<div style={{ paddingTop: "0.5rem" }}>
<Space direction="vertical">
<Tag className="cron-exp-tag">
{t('SCHEDULES')}
<a
href="https://docs.spring.io/spring-framework/docs/current/reference/html/integration.html#scheduling-cron-expression"
rel="noopener noreferrer"
title={t("Spring cron expression explanation")}
target="_blank"
style={{ paddingLeft: "10px" }}
>
<QuestionCircleOutlined />
</a>
<br /> <span>{description?.toUpperCase()}</span>
</Tag>
<Tag className="cron-schedule-tag">
{t('NEXT 5 RUNS AFTER', { from })}<br />
</Tag>
</Space>
</div>
<Timeline className="cron-exp-timeline">
{schedules?.map((schedule, idx) => {
return (
<Timeline.Item key={idx}>{schedule}</Timeline.Item>
);
})}
</Timeline>
</Space>
)}
>
<Tag
className="cron-exp"
title={t("Click to show cron expression and schedule details")}
onClick={() => {
setLoading(true);
fetchCronInformation(encodeURIComponent(value))
.then(json => {
setFrom(json.from);
setDescription(json.description);
setSchedules(json.schedules);
}).finally(() => {
setLoading(false);
});
}}
>{value}
</Tag>
</Popover>
);
}
};
export default CronExpressionCell;
|