feat(ingestion) Update managed ingestion scheduler to be easier to use (

#5559)
datahub-project · Aug 4, 2022 · 9a3ee1c · 9a3ee1c
1 parent 76b40b0
commit 9a3ee1c
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 7 deletions.
diff --git a/datahub-web-react/package.json b/datahub-web-react/package.json
@@ -75,6 +75,7 @@
         "react-color": "^2.19.3",
         "react-dom": "^17.0.0",
         "react-icons": "4.3.1",
+        "react-js-cron": "^2.1.0",
         "react-router": "^5.2.0",
         "react-router-dom": "^5.1.6",
         "react-scripts": "4.0.3",

diff --git a/datahub-web-react/src/app/ingest/source/builder/CreateScheduleStep.tsx b/datahub-web-react/src/app/ingest/source/builder/CreateScheduleStep.tsx
@@ -1,5 +1,7 @@
-import { Button, Form, Input, Typography } from 'antd';
+import { Button, Form, Typography } from 'antd';
 import React, { useMemo } from 'react';
+import { Cron } from 'react-js-cron';
+import 'react-js-cron/dist/styles.css';
 import styled from 'styled-components';
 import cronstrue from 'cronstrue';
 import { CheckCircleOutlined } from '@ant-design/icons';
@@ -24,7 +26,6 @@ const SelectTemplateHeader = styled(Typography.Title)`
 
 const CronText = styled(Typography.Paragraph)`
     &&& {
-        margin-top: 8px;
         margin-bottom: 0px;
     }
     color: ${ANTD_GRAY[7]};
@@ -41,10 +42,21 @@ const ControlsContainer = styled.div`
     margin-top: 8px;
 `;
 
+const StyledFormItem = styled(Form.Item)`
+    .cron-builder {
+        color: ${ANTD_GRAY[7]};
+    }
+    .cron-builder-select {
+        min-width: 100px;
+    }
+`;
+
 const ItemDescriptionText = styled(Typography.Paragraph)``;
 
+const DAILY_MIDNIGHT_CRON_INTERVAL = '0 0 * * *';
+
 export const CreateScheduleStep = ({ state, updateState, goTo, prev }: StepProps) => {
-    const interval = state.schedule?.interval || '';
+    const interval = state.schedule?.interval?.replaceAll(', ', ' ') || DAILY_MIDNIGHT_CRON_INTERVAL;
     const timezone = state.schedule?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone;
 
     const setTimezone = (tz: string) => {
@@ -110,9 +122,14 @@ export const CreateScheduleStep = ({ state, updateState, goTo, prev }: StepProps
                 <Typography.Text>Configure your ingestion source to run on a schedule.</Typography.Text>
             </Section>
             <Form layout="vertical">
-                <Form.Item required label={<Typography.Text strong>Schedule</Typography.Text>}>
-                    <ItemDescriptionText>Provide a custom cron schedule.</ItemDescriptionText>
-                    <Input value={interval} onChange={(e) => setCronInterval(e.target.value)} placeholder="* * * * *" />
+                <StyledFormItem required label={<Typography.Text strong>Schedule</Typography.Text>}>
+                    <Cron
+                        value={interval}
+                        setValue={setCronInterval}
+                        clearButton={false}
+                        className="cron-builder"
+                        leadingZero
+                    />
                     <CronText>
                         {cronAsText.error && <>Invalid cron schedule. Cron must be of UNIX form:</>}
                         {!cronAsText.text && (
@@ -127,7 +144,7 @@ export const CreateScheduleStep = ({ state, updateState, goTo, prev }: StepProps
                             </>
                         )}
                     </CronText>
-                </Form.Item>
+                </StyledFormItem>
                 <Form.Item required label={<Typography.Text strong>Timezone</Typography.Text>}>
                     <ItemDescriptionText>Select the timezone to run the cron schedule in.</ItemDescriptionText>
                     <TimezoneSelect value={timezone} onChange={setTimezone} />

diff --git a/datahub-web-react/yarn.lock b/datahub-web-react/yarn.lock
@@ -13978,6 +13978,11 @@ react-is@^17.0.0, react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-js-cron@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-js-cron/-/react-js-cron-2.1.0.tgz#ce88a3260617222d8e1dc51534bb6606088304fc"
+  integrity sha512-mxpSS8WJAY6gRZ+XR8z22u4mRKfHmB4ej2BO3DKrNRZhTGdIdF19F45LZT6GKjQqVyWOYMK1mFafTvgqqoAXlQ==
+
 [email protected]:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-6.0.2.tgz#d89be45c278b1e5f0196f851fffb11e30c69f027"