diff --git a/catalog-rest-service/src/main/resources/ui/package.json b/catalog-rest-service/src/main/resources/ui/package.json index ea37fa0f210..0987fb8f07c 100644 --- a/catalog-rest-service/src/main/resources/ui/package.json +++ b/catalog-rest-service/src/main/resources/ui/package.json @@ -49,6 +49,7 @@ "markdown-draft-js": "^2.3.0", "mobx": "6.0.1", "mobx-react": "6.1.4", + "moment": "^2.29.1", "oidc-client": "^1.11.5", "path-browserify": "^1.0.1", "popper.js": "1.16.1", diff --git a/catalog-rest-service/src/main/resources/ui/src/components/IngestionModal/IngestionModal.component.tsx b/catalog-rest-service/src/main/resources/ui/src/components/IngestionModal/IngestionModal.component.tsx index dc8182e799f..7530e0afb9c 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/IngestionModal/IngestionModal.component.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/components/IngestionModal/IngestionModal.component.tsx @@ -17,7 +17,8 @@ import classNames from 'classnames'; import cronstrue from 'cronstrue'; -import React, { Fragment, useEffect, useState } from 'react'; +import { utc } from 'moment'; +import React, { Fragment, ReactNode, useEffect, useState } from 'react'; import { CronError } from 'react-js-cron'; import { IngestionType } from '../../enums/service.enum'; import { getIngestionTypeList } from '../../utils/ServiceUtils'; @@ -26,7 +27,6 @@ import { Button } from '../buttons/Button/Button'; import CronEditor from '../common/CronEditor/CronEditor.component'; import IngestionStepper from '../IngestionStepper/IngestionStepper.component'; import { Steps } from '../IngestionStepper/IngestionStepper.interface'; -import './IngestionModal.css'; import { IngestionModalProps, ServiceData, @@ -64,13 +64,13 @@ const PreviewSection = ({ className, }: { header: string; - data: Array<{ key: string; value: string }>; + data: Array<{ key: string; value: string | ReactNode }>; className: string; }) => { return (
{/*
*/} -

{header}

+

{header}

{data.map((d, i) => (
@@ -96,7 +96,7 @@ const getIngestionName = (name: string) => { }; const getCurrentDate = () => { - return `${new Date().toLocaleDateString('en-CA')}`; + return `${utc(new Date()).format('YYYY-MM-DD')}`; }; const setService = ( @@ -118,13 +118,15 @@ const IngestionModal: React.FC = ({ updateIngestion, selectedIngestion, }: IngestionModalProps) => { - const [activeStep, setActiveStep] = useState(1); + const [activeStep, setActiveStep] = useState(isUpdating ? 2 : 1); const [startDate, setStartDate] = useState( - selectedIngestion?.startDate || getCurrentDate() + utc(selectedIngestion?.startDate).format('YYYY-MM-DD') || getCurrentDate() ); const [endDate, setEndDate] = useState( - selectedIngestion?.endDate || '' + selectedIngestion?.endDate + ? utc(selectedIngestion?.endDate).format('YYYY-MM-DD') + : '' ); const [ingestionName, setIngestionName] = useState( @@ -166,7 +168,7 @@ const IngestionModal: React.FC = ({ selectedIngestion?.scheduleInterval || '*/5 * * * *' ); const [cronError, setCronError] = useState(); - + const [isPasswordVisible, setIspasswordVisible] = useState(false); const [showErrorMsg, setShowErrorMsg] = useState({ selectService: false, name: false, @@ -511,8 +513,15 @@ const IngestionModal: React.FC = ({ onError={setCronError}>

( - {ingestionSchedule} - in UTC Timezone ) + + + {cronstrue.toString(ingestionSchedule || '', { + use24HourTimeFormat: true, + verbose: true, + })} + + + )

{showErrorMsg.ingestionSchedule ? errorMsg('Ingestion schedule is required') @@ -520,27 +529,27 @@ const IngestionModal: React.FC = ({
- - - setStartDate(e.target.value)} - /> - - - - setEndDate(e.target.value)} - /> - +
+ + + setStartDate(e.target.value)} + /> + + + + setEndDate(e.target.value)} + /> + +
); case 4: @@ -563,7 +572,32 @@ const IngestionModal: React.FC = ({ className="tw-mb-4 tw-mt-6" data={[ { key: 'Username', value: username }, - { key: 'Password', value: password }, + { + key: 'Password', + value: ( +
+ + {isPasswordVisible + ? password + : ''.padStart(password.length, '*')} + + setIspasswordVisible((pre) => !pre)} + /> +
+ ), + }, { key: 'Host', value: host }, { key: 'Database', value: database }, { key: 'Include views', value: includeViews ? 'Yes' : 'No' }, diff --git a/catalog-rest-service/src/main/resources/ui/src/components/IngestionModal/IngestionModal.css b/catalog-rest-service/src/main/resources/ui/src/components/IngestionModal/IngestionModal.css deleted file mode 100644 index 249b82e34c1..00000000000 --- a/catalog-rest-service/src/main/resources/ui/src/components/IngestionModal/IngestionModal.css +++ /dev/null @@ -1,23 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You 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. -*/ - -.preview-header { - transform: translateY(-13px); - font-size: 14px; - display: inline-block; - background: white; -}