From 62d1ef7c7d3fbe8ca90e619beadfb174c522281b Mon Sep 17 00:00:00 2001 From: Shailesh Parmar Date: Sun, 21 Jan 2024 12:02:34 +0530 Subject: [PATCH] #14127 Timestamp statistical measurements is not being computed and UI Time Filter get reset to default (Last 3 Days) (#14797) Co-authored-by: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com> --- .../DatePickerMenu.component.tsx | 148 ++++++++++-------- .../component/TestSummary.tsx | 5 +- .../Component/ColumnProfileTable.tsx | 8 +- .../Component/SingleColumnProfile.tsx | 10 +- .../Component/TableProfilerChart.test.tsx | 11 ++ .../Component/TableProfilerChart.tsx | 15 +- .../TableProfiler/TableProfiler.interface.ts | 3 + .../TableProfiler/TableProfilerProvider.tsx | 11 ++ .../resources/ui/src/interface/types.d.ts | 2 + .../IncidentManager/IncidentManagerPage.tsx | 2 +- 10 files changed, 127 insertions(+), 88 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DatePickerMenu/DatePickerMenu.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DatePickerMenu/DatePickerMenu.component.tsx index 2ceab9168ca1..5706510df6a9 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DatePickerMenu/DatePickerMenu.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DatePickerMenu/DatePickerMenu.component.tsx @@ -14,8 +14,9 @@ import { CloseCircleOutlined } from '@ant-design/icons'; import { Button, DatePicker, Dropdown, MenuProps, Space } from 'antd'; import { RangePickerProps } from 'antd/lib/date-picker'; -import { isUndefined } from 'lodash'; +import { isUndefined, pick } from 'lodash'; import { DateFilterType, DateRangeObject } from 'Models'; +import moment from 'moment'; import { MenuInfo } from 'rc-menu/lib/interface'; import React, { useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -35,42 +36,39 @@ import { import './date-picker-menu.less'; interface DatePickerMenuProps { + defaultDateRange?: Partial; showSelectedCustomRange?: boolean; handleDateRangeChange: (value: DateRangeObject, days?: number) => void; options?: DateFilterType; - defaultValue?: string; allowCustomRange?: boolean; handleSelectedTimeRange?: (value: string) => void; } -function DatePickerMenu({ +const DatePickerMenu = ({ + defaultDateRange, showSelectedCustomRange, handleDateRangeChange, handleSelectedTimeRange, options, - defaultValue, allowCustomRange = true, -}: DatePickerMenuProps) { +}: DatePickerMenuProps) => { const { menuOptions, defaultOptions } = useMemo(() => { - let defaultOptions = DEFAULT_SELECTED_RANGE; - - if (defaultValue) { - if (options && !isUndefined(options[defaultValue]?.title)) { - defaultOptions = { - title: options[defaultValue].title, - key: defaultValue, - days: options[defaultValue].days, - }; + const defaultOptions = pick(DEFAULT_SELECTED_RANGE, ['title', 'key']); + + if (defaultDateRange && defaultDateRange.key) { + defaultOptions.key = defaultDateRange.key; + if (defaultDateRange.key === 'customRange' && defaultDateRange.title) { + defaultOptions.title = defaultDateRange.title; + } else if ( + options && + !isUndefined(options[defaultDateRange.key]?.title) + ) { + defaultOptions.title = options[defaultDateRange.key].title; } else if ( - !isUndefined( - PROFILER_FILTER_RANGE[defaultValue as keyof DateFilterType]?.title - ) + !isUndefined(PROFILER_FILTER_RANGE[defaultDateRange.key]?.title) ) { - defaultOptions = { - title: PROFILER_FILTER_RANGE[defaultValue].title, - key: defaultValue, - days: PROFILER_FILTER_RANGE[defaultValue].days, - }; + defaultOptions.title = + PROFILER_FILTER_RANGE[defaultDateRange.key].title; } } @@ -112,7 +110,15 @@ function DatePickerMenu({ setSelectedTimeRange(selectedRangeLabel); setSelectedTimeRangeKey('customRange'); setIsMenuOpen(false); - handleDateRangeChange({ startTs, endTs }, daysCount); + handleDateRangeChange( + { + startTs, + endTs, + key: 'customRange', + title: selectedRangeLabel, + }, + daysCount + ); handleSelectedTimeRange?.(selectedRangeLabel); } }; @@ -132,7 +138,10 @@ function DatePickerMenu({ setSelectedTimeRangeKey(key); setIsMenuOpen(false); - handleDateRangeChange({ startTs, endTs }, selectedNumberOfDays); + handleDateRangeChange( + { startTs, endTs, key, title: filterRange.title }, + selectedNumberOfDays + ); handleSelectedTimeRange?.(menuOptions[key].title); }; @@ -143,30 +152,33 @@ function DatePickerMenu({ key, }) ); - { - allowCustomRange && - items.push({ - label: t('label.custom-range'), - key: 'customRange', - children: [ - { - label: ( - } - format={(value) => value.utc().format('YYYY-MM-DD')} - open={isMenuOpen} - placement="bottomRight" - suffixIcon={null} - onChange={handleCustomDateChange} - /> - ), - key: 'datePicker', - }, - ], - popupClassName: 'date-picker-sub-menu-popup', - }); - } + + allowCustomRange && + items.push({ + label: t('label.custom-range'), + key: 'customRange', + children: [ + { + label: ( + } + defaultValue={[ + moment(defaultDateRange?.startTs), + moment(defaultDateRange?.endTs), + ]} + format={(value) => value.utc().format('YYYY-MM-DD')} + open={isMenuOpen} + placement="bottomRight" + suffixIcon={null} + onChange={handleCustomDateChange} + /> + ), + key: 'datePicker', + }, + ], + popupClassName: 'date-picker-sub-menu-popup', + }); return items; }; @@ -174,27 +186,25 @@ function DatePickerMenu({ const items: MenuProps['items'] = getMenuItems(); return ( - <> - setIsMenuOpen(value)}> - - - + setIsMenuOpen(value)}> + + ); -} +}; export default DatePickerMenu; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/TestSummary.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/TestSummary.tsx index ea657782ddc5..5b52b606d694 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/TestSummary.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/TestSummary.tsx @@ -20,6 +20,7 @@ import { isEqual, isUndefined, omitBy, + pick, round, uniqueId, } from 'lodash'; @@ -254,7 +255,7 @@ const TestSummary: React.FC = ({ try { const { data: chartData } = await getListTestCaseResults( data.fullyQualifiedName || '', - dateRangeObj + pick(dateRangeObj, ['startTs', 'endTs']) ); setResults(chartData); @@ -476,7 +477,7 @@ const TestSummary: React.FC = ({ diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/ColumnProfileTable.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/ColumnProfileTable.tsx index 26ff4ce86ca6..cfe623aa761b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/ColumnProfileTable.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/ColumnProfileTable.tsx @@ -38,7 +38,6 @@ import { TableProfilerTab } from '../../../components/ProfilerDashboard/profiler import { NO_DATA_PLACEHOLDER } from '../../../constants/constants'; import { PAGE_HEADERS } from '../../../constants/PageHeaders.constant'; import { - DEFAULT_RANGE_DATA, DEFAULT_TEST_VALUE, INITIAL_TEST_RESULT_SUMMARY, } from '../../../constants/profiler.constant'; @@ -88,6 +87,8 @@ const ColumnProfileTable = () => { isProfilingEnabled, tableProfiler, splitTestCases, + dateRangeObject, + onDateRangeChange, } = useTableProfiler(); const isLoading = isTestsLoading || isProfilerDataLoading; const columnTests = splitTestCases.column ?? []; @@ -96,8 +97,6 @@ const ColumnProfileTable = () => { const [data, setData] = useState(columns); const [columnTestSummary, setColumnTestSummary] = useState(); - const [dateRangeObject, setDateRangeObject] = - useState(DEFAULT_RANGE_DATA); const { activeColumnFqn, activeTab } = useMemo(() => { const param = location.search; @@ -337,7 +336,7 @@ const ColumnProfileTable = () => { const handleDateRangeChange = (value: DateRangeObject) => { if (!isEqual(value, dateRangeObject)) { - setDateRangeObject(value); + onDateRangeChange(value); } }; @@ -393,6 +392,7 @@ const ColumnProfileTable = () => { {!isEmpty(activeColumnFqn) && ( )} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/SingleColumnProfile.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/SingleColumnProfile.tsx index 843e6d38084e..cffda262f510 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/SingleColumnProfile.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/SingleColumnProfile.tsx @@ -12,7 +12,7 @@ */ import { Card, Col, Row, Typography } from 'antd'; import { AxiosError } from 'axios'; -import { first, isString, last } from 'lodash'; +import { first, isString, last, pick } from 'lodash'; import { DateRangeObject } from 'Models'; import React, { FC, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -77,12 +77,12 @@ const SingleColumnProfile: FC = ({ fqn: string, dateRangeObject?: DateRangeObject ) => { + const dateRange = dateRangeObject + ? pick(dateRangeObject, ['startTs', 'endTs']) + : DEFAULT_RANGE_DATA; try { setIsLoading(true); - const { data } = await getColumnProfilerList( - fqn, - dateRangeObject ?? DEFAULT_RANGE_DATA - ); + const { data } = await getColumnProfilerList(fqn, dateRange); setColumnProfilerData(data); } catch (error) { showErrorToast(error as AxiosError); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/TableProfilerChart.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/TableProfilerChart.test.tsx index 449e2bbe1e3a..3e6319faa74d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/TableProfilerChart.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/TableProfilerChart.test.tsx @@ -53,6 +53,17 @@ jest.mock('../../common/SummaryCard/SummaryCard.component', () => { SummaryCard: jest.fn().mockImplementation(() =>
SummaryCard
), }; }); +jest.mock('../TableProfilerProvider', () => ({ + useTableProfiler: jest.fn().mockReturnValue({ + dateRangeObject: DEFAULT_RANGE_DATA, + isProfilerDataLoading: false, + permissions: { + EditAll: true, + EditDataProfile: true, + }, + isTableDeleted: false, + }), +})); describe('TableProfilerChart component test', () => { it('Component should render', async () => { diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/TableProfilerChart.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/TableProfilerChart.tsx index 2d82237dfa47..1b2e1a36ed19 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/TableProfilerChart.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/TableProfilerChart.tsx @@ -24,7 +24,7 @@ import { } from 'antd'; import { AxiosError } from 'axios'; import classNames from 'classnames'; -import { isEqual } from 'lodash'; +import { isEqual, pick } from 'lodash'; import { DateRangeObject } from 'Models'; import React, { useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -32,7 +32,6 @@ import { useHistory } from 'react-router-dom'; import { ReactComponent as SettingIcon } from '../../../assets/svg/ic-settings-primery.svg'; import { PAGE_HEADERS } from '../../../constants/PageHeaders.constant'; import { - DEFAULT_RANGE_DATA, INITIAL_OPERATION_METRIC_VALUE, INITIAL_ROW_METRIC_VALUE, } from '../../../constants/profiler.constant'; @@ -80,6 +79,8 @@ const TableProfilerChart = ({ onSettingButtonClick, isProfilingEnabled, customMetric: tableCustomMetric, + dateRangeObject, + onDateRangeChange, } = useTableProfiler(); const { fqn: datasetFQN } = useFqn(); @@ -91,8 +92,6 @@ const TableProfilerChart = ({ ); const editDataProfile = permissions?.EditAll || permissions?.EditDataProfile; - const [dateRangeObject, setDateRangeObject] = - useState(DEFAULT_RANGE_DATA); const [rowCountMetrics, setRowCountMetrics] = useState( INITIAL_ROW_METRIC_VALUE ); @@ -135,7 +134,7 @@ const TableProfilerChart = ({ const handleDateRangeChange = (value: DateRangeObject) => { if (!isEqual(value, dateRangeObject)) { - setDateRangeObject(value); + onDateRangeChange(value); } }; @@ -172,9 +171,10 @@ const TableProfilerChart = ({ fqn: string, dateRangeObj: DateRangeObject ) => { + const dateRange = pick(dateRangeObj, ['startTs', 'endTs']); setIsLoading(true); - await fetchTableProfiler(fqn, dateRangeObj); - await fetchSystemProfiler(fqn, dateRangeObj); + await fetchTableProfiler(fqn, dateRange); + await fetchSystemProfiler(fqn, dateRange); setIsLoading(false); }; @@ -199,6 +199,7 @@ const TableProfilerChart = ({ diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfiler.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfiler.interface.ts index 575a6dc3e351..c2ad4a9212e2 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfiler.interface.ts +++ b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfiler.interface.ts @@ -11,6 +11,7 @@ * limitations under the License. */ +import { DateRangeObject } from 'Models'; import { ReactNode } from 'react'; import { SystemProfile } from '../../generated/api/data/createTableProfile'; import { @@ -50,6 +51,8 @@ export interface TableProfilerContextInterface { onCustomMetricUpdate: (table: Table) => void; isProfilingEnabled: boolean; splitTestCases: SplitTestCasesType; + dateRangeObject: DateRangeObject; + onDateRangeChange: (dateRange: DateRangeObject) => void; } export type SplitTestCasesType = { diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerProvider.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerProvider.tsx index eb742c73a8fc..d71623c69cbb 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerProvider.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerProvider.tsx @@ -13,6 +13,7 @@ import { AxiosError } from 'axios'; import { isEmpty, isUndefined } from 'lodash'; import { DateTime } from 'luxon'; +import { DateRangeObject } from 'Models'; import Qs from 'qs'; import React, { createContext, @@ -26,6 +27,7 @@ import { useTranslation } from 'react-i18next'; import { useLocation } from 'react-router-dom'; import { API_RES_MAX_SIZE } from '../../constants/constants'; import { mockDatasetData } from '../../constants/mockTourData.constants'; +import { DEFAULT_RANGE_DATA } from '../../constants/profiler.constant'; import { Table } from '../../generated/entity/data/table'; import { ProfileSampleType } from '../../generated/metadataIngestion/databaseServiceProfilerPipeline'; import { TestCase } from '../../generated/tests/testCase'; @@ -74,6 +76,8 @@ export const TableProfilerProvider = ({ column: [], table: [], }); + const [dateRangeObject, setDateRangeObject] = + useState(DEFAULT_RANGE_DATA); const { activeTab = isTourOpen @@ -150,6 +154,10 @@ export const TableProfilerProvider = ({ ]; }, [tableProfiler]); + const handleDateRangeChange = (data: DateRangeObject) => { + setDateRangeObject(data); + }; + const splitTableAndColumnTest = (data: TestCase[]) => { const columnTestsCase: TestCase[] = []; const tableTests: TestCase[] = []; @@ -279,6 +287,8 @@ export const TableProfilerProvider = ({ splitTestCases, customMetric, onCustomMetricUpdate: handleUpdateCustomMetrics, + onDateRangeChange: handleDateRangeChange, + dateRangeObject, }; }, [ isTestsLoading, @@ -291,6 +301,7 @@ export const TableProfilerProvider = ({ onTestCaseUpdate, splitTestCases, customMetric, + dateRangeObject, ]); return ( diff --git a/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts b/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts index e6fb50d2df35..64f61781f1ce 100644 --- a/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts +++ b/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts @@ -279,5 +279,7 @@ declare module 'Models' { export interface DateRangeObject { startTs: number; endTs: number; + key?: string; + title?: string; } } diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/IncidentManager/IncidentManagerPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/IncidentManager/IncidentManagerPage.tsx index f7ad1dcb156d..fae0e195ef09 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/IncidentManager/IncidentManagerPage.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/IncidentManager/IncidentManagerPage.tsx @@ -237,7 +237,7 @@ const IncidentManagerPage = () => { }; if (!isEqual(value, dateRangeObject)) { - setFilters((pre) => ({ ...pre, ...value })); + setFilters((pre) => ({ ...pre, ...dateRangeObject })); } };