diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/AddIngestion.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/AddIngestion.component.tsx index 35f5c7e3100..63838c96e79 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/AddIngestion.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/AddIngestion.component.tsx @@ -54,7 +54,7 @@ import IngestionStepper from '../IngestionStepper/IngestionStepper.component'; import DeployIngestionLoaderModal from '../Modals/DeployIngestionLoaderModal/DeployIngestionLoaderModal'; import { AddIngestionProps } from './addIngestion.interface'; import ConfigureIngestion from './Steps/ConfigureIngestion'; -import MetadataToESConfigForm from './Steps/MetadataToESConfigForm'; +import MetadataToESConfigForm from './Steps/MetadataToESConfigForm/MetadataToESConfigForm'; import ScheduleInterval from './Steps/ScheduleInterval'; const AddIngestion = ({ @@ -799,7 +799,6 @@ const AddIngestion = ({ handleMetadataToESConfig={handleMetadataToESConfig} handleNext={handleNext} handlePrev={handlePrev} - metadataToESConfig={metadataToESConfig} /> )} @@ -808,6 +807,9 @@ const AddIngestion = ({ handleRepeatFrequencyChange={(value: string) => setRepeatFrequency(value) } + includePeriodOptions={ + pipelineType === PipelineType.DataInsight ? ['day'] : undefined + } repeatFrequency={repeatFrequency} status={saveState} submitButtonLabel={isUndefined(data) ? 'Add & Deploy' : 'Submit'} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/MetadataToESConfigForm.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/MetadataToESConfigForm.tsx deleted file mode 100644 index 8a0d1fb3905..00000000000 --- a/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/MetadataToESConfigForm.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import { Button, Form, Input, Switch } from 'antd'; -import React, { useState } from 'react'; -import { ConfigClass } from '../../../generated/entity/services/ingestionPipelines/ingestionPipeline'; - -interface Props { - metadataToESConfig?: ConfigClass; - handleMetadataToESConfig: (data: ConfigClass) => void; - handlePrev: () => void; - handleNext: () => void; -} - -export default function MetadataToESConfigForm({ - metadataToESConfig, - handleMetadataToESConfig, - handlePrev, - handleNext, -}: Props) { - const [caCerts, SetCaCerts] = useState(''); - const [regionName, SetRegionName] = useState(''); - const [timeout, SetTimeout] = useState(0); - const [useAwsCredentials, SetUseAwsCredentials] = useState(false); - const [useSSL, SetUseSSL] = useState(false); - const [verifyCerts, SetVerifyCerts] = useState(false); - - const handleCaCertsChange = (event: React.ChangeEvent) => { - SetCaCerts(event.target.value); - }; - const handleRegionNameChange = ( - event: React.ChangeEvent - ) => { - SetRegionName(event.target.value); - }; - const handleTimeoutChange = (event: React.ChangeEvent) => { - SetTimeout(Number(event.target.value)); - }; - const handleAwaCredentialsChange = (checked: boolean) => { - SetUseAwsCredentials(checked); - }; - const handleUseSSLChange = (checked: boolean) => { - SetUseSSL(checked); - }; - const handleVerifyCertsChange = (checked: boolean) => { - SetVerifyCerts(checked); - }; - - return ( -
- - - - - - - - - - - - - - - - - - - - -
- ); -} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/MetadataToESConfigForm/EsConfigFieldLabel.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/MetadataToESConfigForm/EsConfigFieldLabel.component.tsx new file mode 100644 index 00000000000..3f7bc022297 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/MetadataToESConfigForm/EsConfigFieldLabel.component.tsx @@ -0,0 +1,33 @@ +/* + * Copyright 2022 Collate + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { Space, Typography } from 'antd'; +import React from 'react'; + +const { Text } = Typography; + +const EsConfigFieldLabel = ({ + label, + description, +}: { + label: string; + description: string; +}) => { + return ( + + {label} + {description} + + ); +}; + +export default EsConfigFieldLabel; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/MetadataToESConfigForm/MetadataToESConfigForm.less b/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/MetadataToESConfigForm/MetadataToESConfigForm.less new file mode 100644 index 00000000000..5c2672eb7e8 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/MetadataToESConfigForm/MetadataToESConfigForm.less @@ -0,0 +1,46 @@ +/* + * Copyright 2022 Collate + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@description-color: #6b7280; + +.metadata-to-es-config-form { + .ant-form-item-label { + padding: 0px; + } + + .ant-input { + margin-top: 8px; + } + + .input-field-descriptions { + color: @description-color; + } + + .switch-field-descriptions { + color: @description-color; + display: block; + margin-top: 8px; + } + + .switch-item { + gap: 8px; + align-items: center; + flex-flow: nowrap; + margin-bottom: 8px; + } + + .ant-btn { + height: 38px; + border-radius: 8px; + } +} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/MetadataToESConfigForm/MetadataToESConfigForm.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/MetadataToESConfigForm/MetadataToESConfigForm.tsx new file mode 100644 index 00000000000..c75a1814496 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/MetadataToESConfigForm/MetadataToESConfigForm.tsx @@ -0,0 +1,134 @@ +/* + * Copyright 2022 Collate + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { + Button, + Col, + Divider, + Form, + Input, + Row, + Switch, + Typography, +} from 'antd'; +import { startCase } from 'lodash'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { ConfigClass } from '../../../../generated/entity/services/ingestionPipelines/ingestionPipeline'; +import EsConfigFieldLabel from './EsConfigFieldLabel.component'; +import './MetadataToESConfigForm.less'; + +interface Props { + handleMetadataToESConfig: (data: ConfigClass) => void; + handlePrev: () => void; + handleNext: () => void; +} + +const { Text } = Typography; + +const MetadataToESConfigForm = ({ + handleMetadataToESConfig, + handlePrev, + handleNext, +}: Props) => { + const { t } = useTranslation(); + + const handleSubmit = (values: ConfigClass) => { + handleMetadataToESConfig({ + ...values, + }); + handleNext(); + }; + + return ( +
+ + } + name="caCerts"> + + + + } + name="regionName"> + + + + } + name="timeout"> + + + + + + + + {t('message.field-use-aws-credentials-description')} + + + + + + + {t('message.field-use-ssl-description')} + + + + + + + {t('message.field-verify-certs-description')} + + + + + + + + + + + + ); +}; + +export default MetadataToESConfigForm; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/ScheduleInterval.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/ScheduleInterval.tsx index a4a1918d282..a17e48cb625 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/ScheduleInterval.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/ScheduleInterval.tsx @@ -26,12 +26,14 @@ const ScheduleInterval = ({ submitButtonLabel, onBack, onDeploy, + includePeriodOptions, }: ScheduleIntervalProps) => { return (
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/addIngestion.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/addIngestion.interface.ts index 930b31e3876..a9f867de4de 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/addIngestion.interface.ts +++ b/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/addIngestion.interface.ts @@ -116,6 +116,7 @@ export type ScheduleIntervalProps = { status: LoadingState; repeatFrequency: string; handleRepeatFrequencyChange: (value: string) => void; + includePeriodOptions?: string[]; submitButtonLabel: string; onBack: () => void; onDeploy: () => void; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/CronEditor/CronEditor.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/common/CronEditor/CronEditor.interface.ts index 08c534103e8..d2845d66631 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/CronEditor/CronEditor.interface.ts +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/CronEditor/CronEditor.interface.ts @@ -88,4 +88,5 @@ export interface CronEditorProp { value?: string; className?: string; disabled?: boolean; + includePeriodOptions?: string[]; } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/CronEditor/CronEditor.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/CronEditor/CronEditor.tsx index a15382601db..12e3454f367 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/CronEditor/CronEditor.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/CronEditor/CronEditor.tsx @@ -12,7 +12,7 @@ */ import { isEmpty, toNumber } from 'lodash'; -import React, { FC, useState } from 'react'; +import React, { FC, useMemo, useState } from 'react'; import { pluralize } from '../../../utils/CommonUtils'; import { getCron } from '../../../utils/CronUtils'; import { @@ -127,6 +127,17 @@ const CronEditor: FC = (props) => { const [monthDaysOptions] = useState(getMonthDaysOptions()); const [monthOptions] = useState(getMonthOptions()); + const filteredPeriodOptions = useMemo(() => { + const { includePeriodOptions } = props; + if (includePeriodOptions) { + return periodOptions.filter((option) => + includePeriodOptions.includes(option.label) + ); + } else { + return periodOptions; + } + }, [props, periodOptions]); + const { className, disabled } = props; const { selectedPeriod } = state; @@ -608,7 +619,7 @@ const CronEditor: FC = (props) => { e.persist(); onPeriodSelect(e); }}> - {periodOptions.map((t, index) => { + {filteredPeriodOptions.map((t, index) => { return (