yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-12-06 23:55:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): add custom cron option for UI based ingestion (#9510)

Browse Source
This commit is contained in:
kushagra-apptware 2023-12-22 19:48:30 +05:30 committed by GitHub
parent 52687f3eea
commit db55fadb73
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
datahub-web-react/src/app/ingest/source/builder/CreateScheduleStep.tsx
View File

@ -1,4 +1,4 @@
import { Button, Form, Switch, Typography } from 'antd'; import { Button, Checkbox, Form, Input, Switch, Typography } from 'antd';
import React, { useMemo, useState } from 'react'; import React, { useMemo, useState } from 'react';
import { Cron } from 'react-js-cron'; import { Cron } from 'react-js-cron';
import 'react-js-cron/dist/styles.css'; import 'react-js-cron/dist/styles.css';
@ -31,6 +31,10 @@ const CronText = styled(Typography.Paragraph)`
color: ${ANTD_GRAY[7]}; color: ${ANTD_GRAY[7]};
`; `;
const AdvancedCheckBox = styled(Typography.Text)`
margin-right: 10px;
margin-bottom: 8px;
`;
const CronSuccessCheck = styled(CheckCircleOutlined)` const CronSuccessCheck = styled(CheckCircleOutlined)`
color: ${REDESIGN_COLORS.BLUE}; color: ${REDESIGN_COLORS.BLUE};
margin-right: 4px; margin-right: 4px;
@ -68,8 +72,8 @@ export const CreateScheduleStep = ({ state, updateState, goTo, prev }: StepProps
const { schedule } = state; const { schedule } = state;
const interval = schedule?.interval?.replaceAll(', ', ' ') || DAILY_MIDNIGHT_CRON_INTERVAL; const interval = schedule?.interval?.replaceAll(', ', ' ') || DAILY_MIDNIGHT_CRON_INTERVAL;
const timezone = schedule?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone; const timezone = schedule?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone;
const [scheduleEnabled, setScheduleEnabled] = useState(!!schedule); const [scheduleEnabled, setScheduleEnabled] = useState(!!schedule);
const [advancedCronCheck, setAdvancedCronCheck] = useState(false);
const [scheduleCronInterval, setScheduleCronInterval] = useState(interval); const [scheduleCronInterval, setScheduleCronInterval] = useState(interval);
const [scheduleTimezone, setScheduleTimezone] = useState(timezone); const [scheduleTimezone, setScheduleTimezone] = useState(timezone);
@ -137,13 +141,29 @@ export const CreateScheduleStep = ({ state, updateState, goTo, prev }: StepProps
)} )}
</Form.Item> </Form.Item>
<StyledFormItem required label={<Typography.Text strong>Schedule</Typography.Text>}> <StyledFormItem required label={<Typography.Text strong>Schedule</Typography.Text>}>
<Cron <div style={{ paddingBottom: 10, paddingLeft: 10 }}>
value={scheduleCronInterval} <AdvancedCheckBox type="secondary">Advanced</AdvancedCheckBox>
setValue={setScheduleCronInterval} <Checkbox
clearButton={false} checked={advancedCronCheck}
className="cron-builder" onChange={(event) => setAdvancedCronCheck(event.target.checked)}
leadingZero />
/> </div>
{advancedCronCheck ? (
<Input
placeholder={DAILY_MIDNIGHT_CRON_INTERVAL}
autoFocus
value={scheduleCronInterval}
onChange={(e) => setScheduleCronInterval(e.target.value)}
/>
) : (
<Cron
value={scheduleCronInterval}
setValue={setScheduleCronInterval}
clearButton={false}
className="cron-builder"
leadingZero
/>
)}
<CronText> <CronText>
{cronAsText.error && <>Invalid cron schedule. Cron must be of UNIX form:</>} {cronAsText.error && <>Invalid cron schedule. Cron must be of UNIX form:</>}
{!cronAsText.text && ( {!cronAsText.text && (

4
datahub-web-react/src/app/ingest/source/builder/SelectTemplateStep.tsx
View File

@ -70,7 +70,9 @@ export const SelectTemplateStep = ({ state, updateState, goTo, cancel, ingestion
}; };
const filteredSources = ingestionSources.filter( const filteredSources = ingestionSources.filter(
(source) => source.displayName.includes(searchFilter) || source.name.includes(searchFilter), (source) =>
source.displayName.toLocaleLowerCase().includes(searchFilter.toLocaleLowerCase()) ||
source.name.toLocaleLowerCase().includes(searchFilter.toLocaleLowerCase()),
); );
return ( return (