yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-12-15 17:46:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix(UI) #8727: Worked on improvements in Data Insight Ingestion step (#8757)

Browse Source 
* - Added more information about fields in metadata to ES config step
- Styling improvement for the same step
- Data insight pipelines can only be sheduled with day option

* Worked on comments and code optimisation in MetadataToESConfigForm

* Added missing dependancies for useMemo in CronEditor

* Worked on comments

* Changed component name and converted components to arrow functions

* Component name correction
This commit is contained in:
Aniket Katkar 2022-11-16 19:33:57 +05:30 committed by GitHub
parent 7921090dbf
commit b92149fb4d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 244 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/AddIngestion.component.tsx
View File

@ -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'}

105
openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/MetadataToESConfigForm.tsx
View File

@ -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<string>('');
const [regionName, SetRegionName] = useState<string>('');
const [timeout, SetTimeout] = useState<number>(0);
const [useAwsCredentials, SetUseAwsCredentials] = useState<boolean>(false);
const [useSSL, SetUseSSL] = useState<boolean>(false);
const [verifyCerts, SetVerifyCerts] = useState<boolean>(false);
const handleCaCertsChange = (event: React.ChangeEvent<HTMLInputElement>) => {
SetCaCerts(event.target.value);
};
const handleRegionNameChange = (
event: React.ChangeEvent<HTMLInputElement>
) => {
SetRegionName(event.target.value);
};
const handleTimeoutChange = (event: React.ChangeEvent<HTMLInputElement>) => {
SetTimeout(Number(event.target.value));
};
const handleAwaCredentialsChange = (checked: boolean) => {
SetUseAwsCredentials(checked);
};
const handleUseSSLChange = (checked: boolean) => {
SetUseSSL(checked);
};
const handleVerifyCertsChange = (checked: boolean) => {
SetVerifyCerts(checked);
};
return (
<Form layout="vertical">
<Form.Item label="caCerts">
<Input
value={metadataToESConfig?.caCerts}
onChange={handleCaCertsChange}
/>
</Form.Item>
<Form.Item label="regionName">
<Input
value={metadataToESConfig?.regionName}
onChange={handleRegionNameChange}
/>
</Form.Item>
<Form.Item label="timeout">
<Input
type="number"
value={metadataToESConfig?.timeout}
onChange={handleTimeoutChange}
/>
</Form.Item>
<Form.Item label="useAwsCredentials">
<Switch
checked={metadataToESConfig?.useAwsCredentials}
onClick={handleAwaCredentialsChange}
/>
</Form.Item>
<Form.Item label="useSSL">
<Switch
checked={metadataToESConfig?.useSSL}
onClick={handleUseSSLChange}
/>
</Form.Item>
<Form.Item label="verifyCerts">
<Switch
checked={metadataToESConfig?.verifyCerts}
onClick={handleVerifyCertsChange}
/>
</Form.Item>
<Button type="link" onClick={handlePrev}>
Back
</Button>
<Button
type="primary"
onClick={() => {
handleMetadataToESConfig({
caCerts,
regionName,
timeout,
useAwsCredentials,
useSSL,
verifyCerts,
});
handleNext();
}}>
Next
</Button>
</Form>
);
}

33
openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/MetadataToESConfigForm/EsConfigFieldLabel.component.tsx Normal file
View File

@ -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 (
<Space direction="vertical">
<Text>{label}</Text>
<Text className="input-field-descriptions">{description}</Text>
</Space>
);
};
export default EsConfigFieldLabel;

46
openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/MetadataToESConfigForm/MetadataToESConfigForm.less Normal file
View File

@ -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;
}
}

134
openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/MetadataToESConfigForm/MetadataToESConfigForm.tsx Normal file
View File

@ -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 (
<Form
className="metadata-to-es-config-form"
layout="vertical"
onFinish={handleSubmit}>
<Form.Item
label={
<EsConfigFieldLabel
description={t('message.field-ca-certs-description')}
label={startCase('caCerts')}
/>
}
name="caCerts">
<Input />
</Form.Item>
<Form.Item
label={
<EsConfigFieldLabel
description={t('message.field-region-name-description')}
label={startCase('regionName')}
/>
}
name="regionName">
<Input />
</Form.Item>
<Form.Item
label={
<EsConfigFieldLabel
description={t('message.field-timeout-description')}
label={startCase('timeout')}
/>
}
name="timeout">
<Input type="number" />
</Form.Item>
<Divider />
<Form.Item
className="switch-item"
label={startCase('useAwsCredentials')}
name="useAwsCredentials">
<Switch />
</Form.Item>
<Text className="switch-field-descriptions">
{t('message.field-use-aws-credentials-description')}
</Text>
<Divider />
<Form.Item
className="switch-item"
label={startCase('useSSL')}
name="useSSL">
<Switch />
</Form.Item>
<Text className="switch-field-descriptions">
{t('message.field-use-ssl-description')}
</Text>
<Divider />
<Form.Item
className="switch-item"
label={startCase('verifyCerts')}
name="verifyCerts">
<Switch />
</Form.Item>
<Text className="switch-field-descriptions">
{t('message.field-verify-certs-description')}
</Text>
<Divider />
<Row justify="end">
<Col>
<Button type="link" onClick={handlePrev}>
{t('label.back')}
</Button>
</Col>
<Col>
<Button htmlType="submit" type="primary">
{t('label.next')}
</Button>
</Col>
</Row>
</Form>
);
};
export default MetadataToESConfigForm;

2
openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/ScheduleInterval.tsx
View File

@ -26,12 +26,14 @@ const ScheduleInterval = ({
submitButtonLabel,
onBack,
onDeploy,
includePeriodOptions,
}: ScheduleIntervalProps) => {
return (
<div data-testid="schedule-intervel-container">
<Field>
<div>
<CronEditor
includePeriodOptions={includePeriodOptions}
value={repeatFrequency}
onChange={handleRepeatFrequencyChange}
/>

1
openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/addIngestion.interface.ts
View File

@ -116,6 +116,7 @@ export type ScheduleIntervalProps = {
status: LoadingState;
repeatFrequency: string;
handleRepeatFrequencyChange: (value: string) => void;
includePeriodOptions?: string[];
submitButtonLabel: string;
onBack: () => void;
onDeploy: () => void;

1
openmetadata-ui/src/main/resources/ui/src/components/common/CronEditor/CronEditor.interface.ts
View File

@ -88,4 +88,5 @@ export interface CronEditorProp {
value?: string;
className?: string;
disabled?: boolean;
includePeriodOptions?: string[];
}

15
openmetadata-ui/src/main/resources/ui/src/components/common/CronEditor/CronEditor.tsx
View File

@ -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<CronEditorProp> = (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<CronEditorProp> = (props) => {
e.persist();
onPeriodSelect(e);
}}>
{periodOptions.map((t, index) => {
{filteredPeriodOptions.map((t, index) => {
return (
<option key={`period_option_${index}`} value={t.value}>
{t.label}

2
openmetadata-ui/src/main/resources/ui/src/constants/ingestion.constant.ts
View File

@ -17,7 +17,7 @@ import { FilterPattern } from '../generated/entity/services/ingestionPipelines/i
export const STEPS_FOR_ADD_INGESTION: Array<StepperStepType> = [
{ name: 'Configure Ingestion', step: 1 },
{ name: 'Configure DBT', step: 2 },
{ name: 'Configure Metadata to ES Config', step: 3 },
{ name: 'Configure Metadata to ES Config (Optional)', step: 3 },
{ name: 'Schedule Interval', step: 4 },
];

10
openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json
View File

@ -275,6 +275,8 @@
"data-insight-chart": "Data insight chart",
"data-assets": "Data Assets",
"app-analytics": "App Analytics",
"back": "Back",
"next": "Next",
"no-team-found": "No team found.",
"quality": "Quality",
"insight": "Insight",
@ -323,7 +325,13 @@
"interval-required": "Interval is required",
"enter-interval": "Enter interval",
"interval-unit-required": "Interval unit is required",
"select-interval-unit": "Select interval unit"
"select-interval-unit": "Select interval unit",
"field-use-ssl-description": "Indicates whether to use SSL when connecting to ElasticSearch. By default, we will ignore SSL settings.",
"field-verify-certs-description": "Indicates whether to verify certificates when using SSL connection to ElasticSearch. Ignored by default. Is set to true, make sure to send the certificates in the property `CA Certificates`.",
"field-timeout-description": "Connection Timeout",
"field-ca-certs-description": "Certificate path to be added in configuration. The path should be local in the Ingestion Container.",
"field-use-aws-credentials-description": "Indicates whether to use aws credentials when connecting to OpenSearch in AWS.",
"field-region-name-description": "Region name. Required when using AWS Credentials."
},
"server": {
"no-followed-entities": "You have not followed anything yet.",