diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/dollar-bag.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/dollar-bag.svg new file mode 100644 index 000000000000..1b1dcb0b66fd --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/dollar-bag.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/AppAnalyticsTab/AppAnalyticsTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/AppAnalyticsTab/AppAnalyticsTab.component.tsx new file mode 100644 index 000000000000..d226023f50b9 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/AppAnalyticsTab/AppAnalyticsTab.component.tsx @@ -0,0 +1,48 @@ +/* + * Copyright 2023 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 { Col, Row } from 'antd'; +import React from 'react'; +import { useDataInsightProvider } from '../../../pages/DataInsightPage/DataInsightProvider'; +import DailyActiveUsersChart from '../DailyActiveUsersChart'; +import PageViewsByEntitiesChart from '../PageViewsByEntitiesChart'; +import TopActiveUsers from '../TopActiveUsers'; +import TopViewEntities from '../TopViewEntities'; + +const AppAnalyticsTab = () => { + const { chartFilter, selectedDaysFilter } = useDataInsightProvider(); + + return ( + + + + + + + + + + + + + + + ); +}; + +export default AppAnalyticsTab; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataAssetsTab/DataAssetsTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataAssetsTab/DataAssetsTab.component.tsx new file mode 100644 index 000000000000..86910c36ebaa --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataAssetsTab/DataAssetsTab.component.tsx @@ -0,0 +1,122 @@ +/* + * Copyright 2023 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 { Col, Row } from 'antd'; +import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; +import { DataInsightChartType } from '../../../generated/dataInsight/dataInsightChartResult'; +import { useDataInsightProvider } from '../../../pages/DataInsightPage/DataInsightProvider'; +import Loader from '../../Loader/Loader'; +import DescriptionInsight from '../DescriptionInsight'; +import OwnerInsight from '../OwnerInsight'; +import TierInsight from '../TierInsight'; +import TotalEntityInsight from '../TotalEntityInsight'; + +const DataAssetsTab = () => { + const { + chartFilter, + selectedDaysFilter, + kpi, + tierTag: tier, + } = useDataInsightProvider(); + const { t } = useTranslation(); + const { descriptionKpi, ownerKpi } = useMemo(() => { + return { + descriptionKpi: kpi.data.find( + (value) => + value.dataInsightChart.name === + DataInsightChartType.PercentageOfEntitiesWithDescriptionByType + ), + ownerKpi: kpi.data.find( + (value) => + value.dataInsightChart.name === + DataInsightChartType.PercentageOfEntitiesWithOwnerByType + ), + }; + }, [kpi]); + + if (kpi.isLoading) { + return ; + } + + return ( + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default DataAssetsTab; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataAssetsTab/DataAssetsTab.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataAssetsTab/DataAssetsTab.interface.ts new file mode 100644 index 000000000000..cc8fc195b347 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataAssetsTab/DataAssetsTab.interface.ts @@ -0,0 +1,22 @@ +/* + * Copyright 2023 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 { Kpi } from '../../../generated/dataInsight/kpi/kpi'; +import { Tag } from '../../../generated/entity/classification/tag'; +import { ChartFilter } from '../../../interface/data-insight.interface'; + +export interface DataAssetsTabProps { + chartFilter: ChartFilter; + selectedDaysFilter: number; + kpiList: Kpi[]; + tier: { tags: Tag[]; isLoading: boolean }; +} 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 03218926496f..21744b44afae 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 @@ -15,9 +15,11 @@ 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 { DateFilterType } from 'Models'; import { MenuInfo } from 'rc-menu/lib/interface'; -import React, { useState } from 'react'; +import React, { useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; + import { ReactComponent as DropdownIcon } from '../../assets/svg/DropDown.svg'; import { DateRangeObject } from '../../components/ProfilerDashboard/component/TestSummary'; import { @@ -37,21 +39,56 @@ import './DatePickerMenu.style.less'; interface DatePickerMenuProps { showSelectedCustomRange?: boolean; handleDateRangeChange: (value: DateRangeObject, days?: number) => void; + options?: DateFilterType; + defaultValue?: string; + allowCustomRange?: boolean; } function DatePickerMenu({ showSelectedCustomRange, handleDateRangeChange, + options, + defaultValue, + allowCustomRange = true, }: 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, + }; + } else if ( + !isUndefined( + PROFILER_FILTER_RANGE[defaultValue as keyof DateFilterType]?.title + ) + ) { + defaultOptions = { + title: PROFILER_FILTER_RANGE[defaultValue].title, + key: defaultValue, + days: PROFILER_FILTER_RANGE[defaultValue].days, + }; + } + } + + return { + menuOptions: options ?? PROFILER_FILTER_RANGE, + defaultOptions, + }; + }, [options]); + const { t } = useTranslation(); // State to display the label for selected range value const [selectedTimeRange, setSelectedTimeRange] = useState( - DEFAULT_SELECTED_RANGE.title + defaultOptions.title ); // state to determine the selected value to highlight in the dropdown - const [selectedTimeRangeKey, setSelectedTimeRangeKey] = useState< - keyof typeof PROFILER_FILTER_RANGE - >(DEFAULT_SELECTED_RANGE.key as keyof typeof PROFILER_FILTER_RANGE); + const [selectedTimeRangeKey, setSelectedTimeRangeKey] = useState( + defaultOptions.key + ); const [isMenuOpen, setIsMenuOpen] = useState(false); @@ -73,62 +110,61 @@ function DatePickerMenu({ ); setSelectedTimeRange(selectedRangeLabel); - setSelectedTimeRangeKey( - 'customRange' as keyof typeof PROFILER_FILTER_RANGE - ); + setSelectedTimeRangeKey('customRange'); setIsMenuOpen(false); handleDateRangeChange({ startTs, endTs }, daysCount); } }; const handleOptionClick = ({ key }: MenuInfo) => { - const filterRange = - PROFILER_FILTER_RANGE[key as keyof typeof PROFILER_FILTER_RANGE]; + const filterRange = menuOptions[key]; if (isUndefined(filterRange)) { return; } const selectedNumberOfDays = filterRange.days; - const keyString = key as keyof typeof PROFILER_FILTER_RANGE; const startTs = getEpochMillisForPastDays(selectedNumberOfDays); const endTs = getCurrentMillis(); - setSelectedTimeRange(PROFILER_FILTER_RANGE[keyString].title); - setSelectedTimeRangeKey(keyString); + setSelectedTimeRange(menuOptions[key].title); + setSelectedTimeRangeKey(key); setIsMenuOpen(false); handleDateRangeChange({ startTs, endTs }, selectedNumberOfDays); }; const getMenuItems = () => { - const items: MenuProps['items'] = Object.entries(PROFILER_FILTER_RANGE).map( + const items: MenuProps['items'] = Object.entries(menuOptions).map( ([key, value]) => ({ label: value.title, key, }) ); - 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: ( + } + 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; }; diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/LeftSidebar.constants.ts b/openmetadata-ui/src/main/resources/ui/src/constants/LeftSidebar.constants.ts index fe3142ae2aa9..29a02c1a8f56 100644 --- a/openmetadata-ui/src/main/resources/ui/src/constants/LeftSidebar.constants.ts +++ b/openmetadata-ui/src/main/resources/ui/src/constants/LeftSidebar.constants.ts @@ -19,6 +19,7 @@ import { ReactComponent as DomainsIcon } from '../assets/svg/ic-domain.svg'; import { ReactComponent as QualityIcon } from '../assets/svg/ic-quality-v1.svg'; import { ReactComponent as SettingsIcon } from '../assets/svg/ic-settings-v1.svg'; import { ReactComponent as InsightsIcon } from '../assets/svg/lampcharge.svg'; +import { getDataInsightPathWithFqn } from '../utils/DataInsightUtils'; import { ROUTES } from './constants'; export const SIDEBAR_LIST = [ @@ -39,7 +40,7 @@ export const SIDEBAR_LIST = [ { key: ROUTES.DATA_INSIGHT, label: i18next.t('label.insight-plural'), - redirect_url: ROUTES.DATA_INSIGHT, + redirect_url: getDataInsightPathWithFqn(), icon: InsightsIcon, dataTestId: 'app-bar-item-data-insight', }, diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/profiler.constant.ts b/openmetadata-ui/src/main/resources/ui/src/constants/profiler.constant.ts index 1c30b0f4f61e..24376d3d3811 100644 --- a/openmetadata-ui/src/main/resources/ui/src/constants/profiler.constant.ts +++ b/openmetadata-ui/src/main/resources/ui/src/constants/profiler.constant.ts @@ -12,7 +12,7 @@ */ import { t } from 'i18next'; -import { StepperStepType } from 'Models'; +import { DateFilterType, StepperStepType } from 'Models'; import { CSMode } from '../enums/codemirror.enum'; import { DMLOperationType } from '../generated/api/data/createTableProfile'; import { @@ -71,7 +71,7 @@ export const PROFILER_METRIC = [ 'customMetricsProfile', ]; -export const PROFILER_FILTER_RANGE = { +export const PROFILER_FILTER_RANGE: DateFilterType = { yesterday: { days: 1, title: t('label.yesterday'), diff --git a/openmetadata-ui/src/main/resources/ui/src/enums/DataInsight.enum.ts b/openmetadata-ui/src/main/resources/ui/src/enums/DataInsight.enum.ts new file mode 100644 index 000000000000..c186f50ac319 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/enums/DataInsight.enum.ts @@ -0,0 +1,15 @@ +/* + * Copyright 2023 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. + */ +export enum DataInsightIndex { + AGGREGATED_COST_ANALYSIS_REPORT_DATA = 'aggregated_cost_analysis_report_data_index', +} diff --git a/openmetadata-ui/src/main/resources/ui/src/interface/data-insight.interface.ts b/openmetadata-ui/src/main/resources/ui/src/interface/data-insight.interface.ts index 9b3c682d0816..55e01ce7537c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/interface/data-insight.interface.ts +++ b/openmetadata-ui/src/main/resources/ui/src/interface/data-insight.interface.ts @@ -12,15 +12,21 @@ */ import { TooltipProps } from 'recharts'; +import { DataInsightIndex } from '../enums/DataInsight.enum'; +import { ReportData } from '../generated/analytics/reportData'; import { DataReportIndex } from '../generated/dataInsight/dataInsightChart'; import { DataInsightChartType } from '../generated/dataInsight/dataInsightChartResult'; import { KpiResult, KpiTargetType } from '../generated/dataInsight/kpi/kpi'; +import { KeysOfUnion } from './search.interface'; export interface ChartAggregateParam { dataInsightChartName: DataInsightChartType; dataReportIndex: DataReportIndex; - startTs: number; - endTs: number; + startTs?: number; + endTs?: number; + from?: number; + size?: number; + queryFilter?: string; tier?: string; team?: string; } @@ -36,6 +42,7 @@ export interface DataInsightChartTooltipProps extends TooltipProps { isPercentage?: boolean; isTier?: boolean; kpiTooltipRecord?: Record; + valueFormatter?: (value: number | string) => string; } export interface UIKpiResult extends KpiResult { @@ -50,6 +57,7 @@ export enum DataInsightTabs { DATA_ASSETS = 'data-assets', APP_ANALYTICS = 'app-analytics', KPIS = 'kpi', + COST_ANALYSIS = 'cost-analysis', } export enum KpiDate { @@ -62,3 +70,31 @@ export type KpiDates = { }; export type ChartValue = string | number | undefined; + +export type AggregatedCostAnalysisReportDataSearchSource = ReportData; // extends EntityInterface + +export type DataInsightSearchSourceMapping = { + [DataInsightIndex.AGGREGATED_COST_ANALYSIS_REPORT_DATA]: AggregatedCostAnalysisReportDataSearchSource; +}; + +export type DataInsightSearchRequest = { + pageNumber?: number; + pageSize?: number; + searchIndex?: DataInsightIndex.AGGREGATED_COST_ANALYSIS_REPORT_DATA; + query?: string; + queryFilter?: Record; + postFilter?: Record; + sortField?: string; + sortOrder?: string; + includeDeleted?: boolean; + trackTotalHits?: boolean; + filters?: string; +} & ( + | { + fetchSource: true; + includeFields?: KeysOfUnion[]; + } + | { + fetchSource?: false; + } +); diff --git a/openmetadata-ui/src/main/resources/ui/src/interface/search.interface.ts b/openmetadata-ui/src/main/resources/ui/src/interface/search.interface.ts index b7e8bc0e977a..9e5ec99dabda 100644 --- a/openmetadata-ui/src/main/resources/ui/src/interface/search.interface.ts +++ b/openmetadata-ui/src/main/resources/ui/src/interface/search.interface.ts @@ -11,6 +11,7 @@ * limitations under the License. */ +import { DataInsightIndex } from '../enums/DataInsight.enum'; import { SearchIndex } from '../enums/search.enum'; import { Tag } from '../generated/entity/classification/tag'; import { Container } from '../generated/entity/data/container'; @@ -39,6 +40,7 @@ import { User } from '../generated/entity/teams/user'; import { TestCase } from '../generated/tests/testCase'; import { TestSuite } from '../generated/tests/testSuite'; import { TagLabel } from '../generated/type/tagLabel'; +import { AggregatedCostAnalysisReportDataSearchSource } from './data-insight.interface'; /** * The `keyof` operator, when applied to a union type, expands to the keys are common for @@ -252,7 +254,7 @@ export type SuggestRequest< } ); -export interface SearchHitBody { +export interface SearchHitBody { _index: SI; _type?: string; _id?: string; @@ -296,6 +298,22 @@ export interface SearchResponse< export type Aggregations = Record; +export type DataInsightSearchResponse = { + took?: number; + timed_out?: boolean; + hits: { + total: { + value: number; + relation?: string; + }; + hits: SearchHitBody< + DataInsightIndex, + AggregatedCostAnalysisReportDataSearchSource + >[]; + }; + aggregations: Aggregations; +}; + /** * Because we are using an older version of typescript-eslint, defining * ```ts 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 7fa1df763bf7..47328f892790 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 @@ -261,6 +261,8 @@ declare module 'Models' { | Mlmodel | Container; + export type DateFilterType = Record; + export type TagFilterOptions = { text: string; value: string; diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json index b4df4dfa688b..6d3dc2d0aa32 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json @@ -4,6 +4,7 @@ "accept": "Akzeptieren", "accept-suggestion": "Vorschlag akzeptieren", "access": "Zugriff", + "accessed": "Accessed", "account": "Konto", "account-email": "Konto-E-Mail", "account-name": "Kontoname", @@ -104,6 +105,7 @@ "back-to-login-lowercase": "Zurück zur Anmeldeseite", "basic-configuration": "Grundkonfiguration", "batch-size": "Batchgröße", + "before-number-of-day-plural": "Before {{numberOfDays}} days", "beta": "Beta", "bot": "Bot", "bot-detail": "Bot-Details", @@ -182,6 +184,7 @@ "conversation-plural": "Konversationen", "copied": "Kopiert", "copy": "Kopieren", + "cost-analysis": "Cost Analysis", "count": "Anzahl", "create": "Erstellen", "create-entity": "{{entity}} erstellen", @@ -530,6 +533,7 @@ "kpi-name": "KPI-Name", "kpi-title": "Schlüsselindikatoren (KPI)", "kpi-uppercase": "KPI", + "kpi-uppercase-plural": "KPIs", "language": "Sprache", "last": "Letzte", "last-error": "Letzter Fehler", @@ -905,6 +909,7 @@ "show-or-hide-advanced-config": "{{showAdv}} Erweiterte Konfiguration anzeigen/ausblenden", "sign-in-with-sso": "Mit {{sso}} anmelden", "size": "Größe", + "size-evolution-graph": "Size Evolution Graph", "skew": "Verzerrung", "skipped": "Übersprungen", "slack": "Slack", @@ -1483,6 +1488,7 @@ "service-with-space-not-allowed": "Dienstname mit Leerzeichen ist nicht zulässig", "session-expired": "Ihre Sitzung ist abgelaufen! Bitte melden Sie sich erneut an, um auf OpenMetadata zuzugreifen.", "setup-custom-property": "OpenMetadata unterstützt benutzerdefinierte Eigenschaften in der Tabellenentität. Erstellen Sie eine benutzerdefinierte Eigenschaft, indem Sie einen eindeutigen Eigenschaftsnamen hinzufügen. Der Name muss mit einem Kleinbuchstaben beginnen, wie im camelCase-Format bevorzugt. Großbuchstaben und Zahlen können im Feldnamen enthalten sein; Leerzeichen, Unterstriche und Punkte werden jedoch nicht unterstützt. Wählen Sie den bevorzugten Eigenschaftstyp aus den angebotenen Optionen aus. Beschreiben Sie Ihre benutzerdefinierte Eigenschaft, um Ihrem Team mehr Informationen zu geben.", + "size-evolution-description": "Size evolution of assets in organization.", "soft-delete-message-for-entity": "Durch das Soft-Löschen wird {{entity}} deaktiviert. Dadurch werden alle Entdeckungs-, Lese- oder Schreibvorgänge auf {{entity}} deaktiviert.", "something-went-wrong": "Etwas ist schiefgelaufen", "special-character-not-allowed": "Sonderzeichen sind nicht erlaubt.", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json index fb997591b875..cf8747dcb4f5 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json @@ -4,6 +4,7 @@ "accept": "Accept", "accept-suggestion": "Accept Suggestion", "access": "Access", + "accessed": "Accessed", "account": "Account", "account-email": "Account email", "account-name": "Account Name", @@ -104,6 +105,7 @@ "back-to-login-lowercase": "back to login", "basic-configuration": "Basic Configuration", "batch-size": "Batch Size", + "before-number-of-day-plural": "Before {{numberOfDays}} days", "beta": "Beta", "bot": "Bot", "bot-detail": "Bot detail", @@ -182,6 +184,7 @@ "conversation-plural": "Conversations", "copied": "Copied", "copy": "Copy", + "cost-analysis": "Cost Analysis", "count": "Count", "create": "Create", "create-entity": "Create {{entity}}", @@ -530,6 +533,7 @@ "kpi-name": "KPI Name", "kpi-title": "Key Performance Indicators (KPI)", "kpi-uppercase": "KPI", + "kpi-uppercase-plural": "KPIs", "language": "Language", "last": "Last", "last-error": "Last error", @@ -905,6 +909,7 @@ "show-or-hide-advanced-config": "{{showAdv}} Advanced Config", "sign-in-with-sso": "Sign in with {{sso}}", "size": "Size", + "size-evolution-graph": "Size Evolution Graph", "skew": "Skew", "skipped": "Skipped", "slack": "Slack", @@ -1483,6 +1488,7 @@ "service-with-space-not-allowed": "Service name with spaces are not allowed", "session-expired": "Your session has timed out! Please sign in again to access OpenMetadata.", "setup-custom-property": "OpenMetadata supports custom properties in the Table entity. Create a custom property by adding a unique property name. The name must start with a lowercase letter, as preferred in the camelCase format. Uppercase letters and numbers can be included in the field name; but spaces, underscores, and dots are not supported. Select the preferred property Type from among the options provided. Describe your custom property to provide more information to your team.", + "size-evolution-description": "Size evolution of assets in organization.", "soft-delete-message-for-entity": "Soft deleting will deactivate the {{entity}}. This will disable any discovery, read or write operations on {{entity}}.", "something-went-wrong": "Something went wrong", "special-character-not-allowed": "Special characters are not allowed.", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json index 521db7ece44e..6d3bdc03d7c6 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json @@ -4,6 +4,7 @@ "accept": "Accept", "accept-suggestion": "Aceptar sugerencia", "access": "Acceso", + "accessed": "Accessed", "account": "Cuenta", "account-email": "Correo electrónico de la cuenta", "account-name": "Account Name", @@ -104,6 +105,7 @@ "back-to-login-lowercase": "volver a iniciar sesión", "basic-configuration": "Configuración básica", "batch-size": "Tamaño del lote", + "before-number-of-day-plural": "Before {{numberOfDays}} days", "beta": "Beta", "bot": "Bot", "bot-detail": "Detalles del bot", @@ -182,6 +184,7 @@ "conversation-plural": "Conversaciones", "copied": "Copied", "copy": "Copiar", + "cost-analysis": "Cost Analysis", "count": "Conteo", "create": "Crear", "create-entity": "Crear {{entity}}", @@ -530,6 +533,7 @@ "kpi-name": "Nombre del KPI", "kpi-title": "Indicadores clave de rendimiento (KPI)", "kpi-uppercase": "KPI", + "kpi-uppercase-plural": "KPIs", "language": "Idioma", "last": "Último", "last-error": "Último error", @@ -905,6 +909,7 @@ "show-or-hide-advanced-config": "{{showAdv}} Configuración Avanzada", "sign-in-with-sso": "Iniciar sesión con {{sso}}", "size": "Tamaño", + "size-evolution-graph": "Size Evolution Graph", "skew": "Sesgo", "skipped": "Skipped", "slack": "Slack", @@ -1483,6 +1488,7 @@ "service-with-space-not-allowed": "No se permiten nombres de servicio con espacios", "session-expired": "¡Tu sesión ha caducado! Por favor, inicia sesión de nuevo para acceder a OpenMetadata.", "setup-custom-property": "OpenMetadata admite propiedades personalizadas en la entidad de Tabla. Crea una propiedad personalizada agregando un nombre de propiedad único. El nombre debe comenzar con una letra minúscula, como se prefiere en el formato camelCase. Las letras mayúsculas y los números pueden incluirse en el nombre del campo; pero no se admiten espacios, guiones bajos y puntos. Selecciona el tipo de propiedad preferido entre las opciones proporcionadas. Describe tu propiedad personalizada para proporcionar más información a tu equipo.", + "size-evolution-description": "Size evolution of assets in organization.", "soft-delete-message-for-entity": "La eliminación suave desactivará la {{entity}}. Esto deshabilitará cualquier operación de descubrimiento, lectura o escritura en {{entity}}.", "something-went-wrong": "Algo salió mal", "special-character-not-allowed": "No se permiten caracteres especiales.", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json index 5385f8abb772..30e48013b751 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json @@ -4,6 +4,7 @@ "accept": "Accepter", "accept-suggestion": "Accepter la Suggestion", "access": "Accès", + "accessed": "Accessed", "account": "Compte", "account-email": "Compte email", "account-name": "Nom du Compte", @@ -104,6 +105,7 @@ "back-to-login-lowercase": "Retour à la Page de Connexion", "basic-configuration": "Configuration de Base", "batch-size": "Taille du Lot", + "before-number-of-day-plural": "Before {{numberOfDays}} days", "beta": "Bêta", "bot": "Agent Numérique", "bot-detail": "Détail de l'Agent Numérique", @@ -182,6 +184,7 @@ "conversation-plural": "Conversations", "copied": "Copié", "copy": "Copier", + "cost-analysis": "Cost Analysis", "count": "Décompte", "create": "Créer", "create-entity": "Créer {{entity}}", @@ -530,6 +533,7 @@ "kpi-name": "Nom des KPI", "kpi-title": "Indicateurs de Performance Clés (KPI)", "kpi-uppercase": "KPI", + "kpi-uppercase-plural": "KPIs", "language": "Langage", "last": "Dernier·ère", "last-error": "Dernière erreur", @@ -905,6 +909,7 @@ "show-or-hide-advanced-config": "{{showAdv}} Configuration Avancée", "sign-in-with-sso": "Se Connecter avec {{sso}}", "size": "Taille", + "size-evolution-graph": "Size Evolution Graph", "skew": "Déviation", "skipped": "Passé", "slack": "Slack", @@ -1483,6 +1488,7 @@ "service-with-space-not-allowed": "Nom de service avec des espaces ne sont pas autorisés", "session-expired": "Votre session a expiré! Veuillez vous connecter à nouveau pour accéder à OpenMetadata.", "setup-custom-property": "OpenMetadata permet la création de propriétés custom dans les entités table. Créez une propriété custom en ajoutant un nom de propriété unique. Le nom doit commencer par une lettre minuscule, comme préféré dans le format camelCase. Les lettres majuscules et les chiffres peuvent être inclus dans le nom du champ; mais les espaces, les tirets bas et les points ne sont pas pris en charge. Sélectionnez le Type de propriété préféré parmi les options fournies. Décrivez votre propriété personnalisée pour fournir plus d'informations à votre équipe.", + "size-evolution-description": "Size evolution of assets in organization.", "soft-delete-message-for-entity": "La suppression logique désactivera le {{entity}}. Cela désactivera toute découverte, lecture ou écriture sur le {{entity}}.", "something-went-wrong": "Quelque chose s'est mal passé", "special-character-not-allowed": "Les caractères spéciaux ne sont pas autorisés", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json index c933c71377ae..2ee867e92043 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json @@ -4,6 +4,7 @@ "accept": "Accept", "accept-suggestion": "提案を受け入れる", "access": "アクセス", + "accessed": "Accessed", "account": "アカウント", "account-email": "アカウントのEmail", "account-name": "Account Name", @@ -104,6 +105,7 @@ "back-to-login-lowercase": "ログインに戻る", "basic-configuration": "Basic Configuration", "batch-size": "バッチサイズ", + "before-number-of-day-plural": "Before {{numberOfDays}} days", "beta": "Beta", "bot": "ボット", "bot-detail": "ボットの詳細", @@ -182,6 +184,7 @@ "conversation-plural": "会話", "copied": "Copied", "copy": "Copy", + "cost-analysis": "Cost Analysis", "count": "Count", "create": "作成", "create-entity": "{{entity}}を作成", @@ -530,6 +533,7 @@ "kpi-name": "KPI名", "kpi-title": "Key Performance Indicators (KPI)", "kpi-uppercase": "KPI", + "kpi-uppercase-plural": "KPIs", "language": "言語", "last": "最新", "last-error": "最新のエラー", @@ -905,6 +909,7 @@ "show-or-hide-advanced-config": "{{showAdv}} 高度な設定", "sign-in-with-sso": "{{sso}}でサインインする", "size": "Size", + "size-evolution-graph": "Size Evolution Graph", "skew": "Skew", "skipped": "Skipped", "slack": "Slack", @@ -1483,6 +1488,7 @@ "service-with-space-not-allowed": "サービス名に空白は使えません", "session-expired": "セッションがタイムアウトしました。OpenMetadataにアクセスするには再度サインインしてください。", "setup-custom-property": "OpenMetadataはテーブル要素のカスタムプロパティをサポートしています。カスタムプロパティを作成するにはユニークなプロパティ名を追加してください。プロパティ名は小文字のアルファベットから始め、かつキャメルケースであることが望ましいです。フィールド名に大文字と数字を含めることはできますが、スペースやアンダースコア、ドットはサポートされていません。提供されたオプションの中から適切なプロパティタイプを選択してください。カスタムプロパティの説明はチームにより多くの情報を提供します。", + "size-evolution-description": "Size evolution of assets in organization.", "soft-delete-message-for-entity": "ソフトデリートは{{entity}}を非活性化します。これはデータの発見や、{{entity}}に対する読み込みや書き込みの操作を無効にします。", "something-went-wrong": "何らかの問題が発生しました", "special-character-not-allowed": "特殊文字は使用できません。", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json index fce398871efe..de64c6aac678 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/pt-br.json @@ -4,6 +4,7 @@ "accept": "Accept", "accept-suggestion": "Aceitar sugestão", "access": "Acesso", + "accessed": "Accessed", "account": "Conta", "account-email": "E-mail da conta", "account-name": "Account Name", @@ -104,6 +105,7 @@ "back-to-login-lowercase": "voltar para login", "basic-configuration": "Configuração básica", "batch-size": "Tamanho do batch", + "before-number-of-day-plural": "Before {{numberOfDays}} days", "beta": "Beta", "bot": "Bot", "bot-detail": "Detalhe do bot", @@ -182,6 +184,7 @@ "conversation-plural": "Conversas", "copied": "Copied", "copy": "Copy", + "cost-analysis": "Cost Analysis", "count": "Contar", "create": "Criar", "create-entity": "Criar {{entity}}", @@ -530,6 +533,7 @@ "kpi-name": "Nome do KPI", "kpi-title": "Título do KPI", "kpi-uppercase": "KPI", + "kpi-uppercase-plural": "KPIs", "language": "Idioma", "last": "Último", "last-error": "Último erro", @@ -905,6 +909,7 @@ "show-or-hide-advanced-config": "{{showAdv}} Configuração Avançada", "sign-in-with-sso": "Entrar com {{sso}}", "size": "Size", + "size-evolution-graph": "Size Evolution Graph", "skew": "Inclinação", "skipped": "Skipped", "slack": "Slack", @@ -1483,6 +1488,7 @@ "service-with-space-not-allowed": "Nomes de serviços com espaços não são permitidos", "session-expired": "Sua sessão expirou! Por favor, faça login novamente para acessar o OpenMetadata.", "setup-custom-property": "O OpenMetadata suporta propriedades personalizadas na entidade Tabela. Crie uma propriedade personalizada adicionando um nome de propriedade exclusivo. O nome deve começar com uma letra minúscula, como preferido no formato camelCase. Letras maiúsculas e números podem ser incluídos no nome do campo; mas espaços, sublinhados e pontos não são suportados. Selecione o Tipo de propriedade preferido entre as opções fornecidas. Descreva sua propriedade personalizada para fornecer mais informações à sua equipe.", + "size-evolution-description": "Size evolution of assets in organization.", "soft-delete-message-for-entity": "O soft delete desativará a {{entity}}. Isso desabilitará quaisquer operações de descoberta, leitura ou gravação na {{entity}}.", "something-went-wrong": "Algo deu errado", "special-character-not-allowed": "Caracteres especiais não são permitidos.", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json index c7c8abc2912f..3d24342e4370 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/ru-ru.json @@ -4,6 +4,7 @@ "accept": "Принять", "accept-suggestion": "Согласовать предложение", "access": "Доступ", + "accessed": "Accessed", "account": "Аккаунт", "account-email": "Адрес электронной почты", "account-name": "Наименование аккаунта", @@ -104,6 +105,7 @@ "back-to-login-lowercase": "Вернуться на страницу входа", "basic-configuration": "Базовая конфигурация", "batch-size": "Размер пакета", + "before-number-of-day-plural": "Before {{numberOfDays}} days", "beta": "Бета", "bot": "Бот", "bot-detail": "Детали бота", @@ -182,6 +184,7 @@ "conversation-plural": "Обсуждения", "copied": "Скопировано", "copy": "Скопировать", + "cost-analysis": "Cost Analysis", "count": "Количество", "create": "Создать", "create-entity": "Создать {{entity}}", @@ -530,6 +533,7 @@ "kpi-name": "Наименование KPI", "kpi-title": "Ключевой показатель эффективности (KPI)", "kpi-uppercase": "KPI", + "kpi-uppercase-plural": "KPIs", "language": "Язык", "last": "Последний", "last-error": "Последняя ошибка", @@ -905,6 +909,7 @@ "show-or-hide-advanced-config": "{{showAdv}} Расширенная конфигурация", "sign-in-with-sso": "Войдите с помощью {{sso}}", "size": "Размер", + "size-evolution-graph": "Size Evolution Graph", "skew": "Перекос", "skipped": "Пропущено", "slack": "Slack", @@ -1483,6 +1488,7 @@ "service-with-space-not-allowed": "Имя службы с пробелами не допускается", "session-expired": "Время вашей сессии истекло! Пожалуйста, войдите снова, чтобы получить доступ к OpenMetadata.", "setup-custom-property": "OpenMetadata поддерживает настраиваемые свойства в табличном объекте. Создайте пользовательское свойство, добавив уникальное имя свойства. Имя должно начинаться со строчной буквы, что является предпочтительным в формате camelCase. В имя поля можно включать прописные буквы и цифры; но пробелы, символы подчеркивания и точки не поддерживаются. Выберите предпочтительный тип свойства из предложенных вариантов. Опишите свое пользовательское свойство, чтобы предоставить больше информации вашей команде.", + "size-evolution-description": "Size evolution of assets in organization.", "soft-delete-message-for-entity": "Мягкое удаление деактивирует {{entity}}. Это отключит любые операции обнаружения, чтения или записи для {{entity}}.", "something-went-wrong": "Что-то пошло не так", "special-character-not-allowed": "Спецсимволы не допустимы.", diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json index 4dae6466e293..855a65d4658d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/zh-cn.json @@ -4,6 +4,7 @@ "accept": "接受", "accept-suggestion": "接受建议", "access": "访问", + "accessed": "Accessed", "account": "帐号", "account-email": "帐号邮箱", "account-name": "帐号名称", @@ -104,6 +105,7 @@ "back-to-login-lowercase": "返回登录", "basic-configuration": "基本配置", "batch-size": "批大小", + "before-number-of-day-plural": "Before {{numberOfDays}} days", "beta": "Beta", "bot": "机器人", "bot-detail": "机器人详情", @@ -182,6 +184,7 @@ "conversation-plural": "对话", "copied": "已复制", "copy": "复制", + "cost-analysis": "Cost Analysis", "count": "计数", "create": "新建", "create-entity": "新建{{entity}}", @@ -530,6 +533,7 @@ "kpi-name": "KPI 名称", "kpi-title": "关键绩效指标 (KPI)", "kpi-uppercase": "KPI", + "kpi-uppercase-plural": "KPIs", "language": "语言", "last": "最近", "last-error": "最近错误", @@ -905,6 +909,7 @@ "show-or-hide-advanced-config": "{{showAdv}}高级配置", "sign-in-with-sso": "使用 {{sso}} 单点登录", "size": "大小", + "size-evolution-graph": "Size Evolution Graph", "skew": "偏态", "skipped": "已跳过", "slack": "Slack", @@ -1483,6 +1488,7 @@ "service-with-space-not-allowed": "服务名称不允许使用空格", "session-expired": "您的会话已超时，请重新登录！", "setup-custom-property": "OpenMetadata 支持数据表中的自定义属性。通过添加唯一的属性名称来创建自定义属性。名称必须以小写字母开头，以 camelCase 驼峰格式为首选。字段名称可以包含大写字母和数字，但不支持空格、下划线和标点符号。从提供的选项中指定一个属性类型，并通过描述您的自定义属性向团队提供更多信息。", + "size-evolution-description": "Size evolution of assets in organization.", "soft-delete-message-for-entity": "软删除将停用{{entity}}，这将禁用{{entity}}上的任何发现、读取或写入操作", "something-went-wrong": "出现了一些问题", "special-character-not-allowed": "不允许使用特殊字符", diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsight.interface.ts b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsight.interface.ts index 4ee215c09d4f..2fe283cf2087 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsight.interface.ts +++ b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsight.interface.ts @@ -11,7 +11,15 @@ * limitations under the License. */ -import { SearchDropdownOption } from '../../components/SearchDropdown/SearchDropdown.interface'; +import { ReactNode } from 'react'; +import { DateRangeObject } from '../../components/ProfilerDashboard/component/TestSummary'; +import { + SearchDropdownOption, + SearchDropdownProps, +} from '../../components/SearchDropdown/SearchDropdown.interface'; +import { Kpi } from '../../generated/dataInsight/kpi/kpi'; +import { Tag } from '../../generated/entity/classification/tag'; +import { ChartFilter } from '../../interface/data-insight.interface'; export type TeamStateType = { defaultOptions: SearchDropdownOption[]; @@ -19,3 +27,23 @@ export type TeamStateType = { options: SearchDropdownOption[]; }; export type TierStateType = Omit; + +export interface DataInsightProviderProps { + children: ReactNode; +} + +export interface DataInsightContextType { + teamFilter: Omit; + tierFilter: Omit; + selectedDaysFilter: number; + chartFilter: ChartFilter; + onChartFilterChange: (value: DateRangeObject, days?: number) => void; + kpi: { + isLoading: boolean; + data: Kpi[]; + }; + tierTag: { + tags: Tag[]; + isLoading: boolean; + }; +} diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightClassBase.ts b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightClassBase.ts new file mode 100644 index 000000000000..c3499740a065 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightClassBase.ts @@ -0,0 +1,84 @@ +/* + * Copyright 2023 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 { ReactComponent as AppAnalyticsIcon } from '../../assets/svg/app-analytics.svg'; +import { ReactComponent as DataAssetsIcon } from '../../assets/svg/data-asset.svg'; +import { ReactComponent as KPIIcon } from '../../assets/svg/kpi.svg'; +import AppAnalyticsTab from '../../components/DataInsightDetail/AppAnalyticsTab/AppAnalyticsTab.component'; +import DataAssetsTab from '../../components/DataInsightDetail/DataAssetsTab/DataAssetsTab.component'; +import { DataInsightTabs } from '../../interface/data-insight.interface'; +import { getDataInsightPathWithFqn } from '../../utils/DataInsightUtils'; +import i18n from '../../utils/i18next/LocalUtil'; +import KPIList from './KPIList'; + +type LeftSideBarType = { + key: DataInsightTabs; + label: string; + icon: SvgComponent; + iconProps: React.SVGProps; +}; + +class DataInsightClassBase { + public getLeftSideBar(): LeftSideBarType[] { + return [ + { + key: DataInsightTabs.DATA_ASSETS, + label: i18n.t('label.data-asset-plural'), + icon: AppAnalyticsIcon, + iconProps: { + className: 'side-panel-icons', + }, + }, + { + key: DataInsightTabs.APP_ANALYTICS, + label: i18n.t('label.app-analytic-plural'), + icon: DataAssetsIcon, + iconProps: { + className: 'side-panel-icons', + }, + }, + { + key: DataInsightTabs.KPIS, + label: i18n.t('label.kpi-uppercase-plural'), + icon: KPIIcon, + iconProps: { + className: 'side-panel-icons', + }, + }, + ]; + } + + public getDataInsightTab() { + return [ + { + key: DataInsightTabs.DATA_ASSETS, + path: getDataInsightPathWithFqn(DataInsightTabs.DATA_ASSETS), + component: DataAssetsTab, + }, + { + key: DataInsightTabs.APP_ANALYTICS, + path: getDataInsightPathWithFqn(DataInsightTabs.APP_ANALYTICS), + component: AppAnalyticsTab, + }, + { + key: DataInsightTabs.KPIS, + path: getDataInsightPathWithFqn(DataInsightTabs.KPIS), + component: KPIList, + }, + ]; + } +} + +const dataInsightClassBase = new DataInsightClassBase(); + +export default dataInsightClassBase; +export { DataInsightClassBase }; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightHeader/DataInsightHeader.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightHeader/DataInsightHeader.component.tsx new file mode 100644 index 000000000000..c8cc92617cb9 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightHeader/DataInsightHeader.component.tsx @@ -0,0 +1,143 @@ +/* + * Copyright 2023 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, Row, Space, Typography } from 'antd'; +import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useHistory, useParams } from 'react-router-dom'; +import DataInsightSummary from '../../../components/DataInsightDetail/DataInsightSummary'; +import KPIChart from '../../../components/DataInsightDetail/KPIChart'; +import DatePickerMenu from '../../../components/DatePickerMenu/DatePickerMenu.component'; +import { usePermissionProvider } from '../../../components/PermissionProvider/PermissionProvider'; +import { ResourceEntity } from '../../../components/PermissionProvider/PermissionProvider.interface'; +import SearchDropdown from '../../../components/SearchDropdown/SearchDropdown'; +import { ROUTES } from '../../../constants/constants'; +import { Operation } from '../../../generated/entity/policies/policy'; +import { DataInsightTabs } from '../../../interface/data-insight.interface'; +import { getOptionalDataInsightTabFlag } from '../../../utils/DataInsightUtils'; +import { formatDate } from '../../../utils/date-time/DateTimeUtils'; +import { checkPermission } from '../../../utils/PermissionsUtils'; +import { useDataInsightProvider } from '../DataInsightProvider'; +import { DataInsightHeaderProps } from './DataInsightHeader.interface'; + +const DataInsightHeader = ({ onScrollToChart }: DataInsightHeaderProps) => { + const { + teamFilter: team, + tierFilter: tier, + chartFilter, + onChartFilterChange, + kpi, + } = useDataInsightProvider(); + + const { tab } = useParams<{ tab: DataInsightTabs }>(); + const history = useHistory(); + const { t } = useTranslation(); + const { permissions } = usePermissionProvider(); + + const { showDataInsightSummary, showKpiChart } = + getOptionalDataInsightTabFlag(tab); + + const viewKPIPermission = useMemo( + () => checkPermission(Operation.ViewAll, ResourceEntity.KPI, permissions), + [permissions] + ); + + const createKPIPermission = useMemo( + () => checkPermission(Operation.Create, ResourceEntity.KPI, permissions), + [permissions] + ); + + const handleAddKPI = () => { + history.push(ROUTES.ADD_KPI); + }; + + return ( + + + +
+ + {t('label.data-insight-plural')} + + + {t('message.data-insight-subtitle')} + +
+ + {createKPIPermission && ( + + )} + + + + + + + + + + + + {`${formatDate(chartFilter.startTs)} - ${formatDate( + chartFilter.endTs + )}`} + + + + + + + {/* Do not show summary for KPIs */} + {showDataInsightSummary && ( + + + + )} + + {/* Do not show KPIChart for app analytics */} + {showKpiChart && ( + + + + )} + + ); +}; + +export default DataInsightHeader; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightHeader/DataInsightHeader.interface.ts b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightHeader/DataInsightHeader.interface.ts new file mode 100644 index 000000000000..b8c96957dff7 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightHeader/DataInsightHeader.interface.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2023 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 { DataInsightChartType } from '../../../generated/dataInsight/dataInsightChartResult'; + +export interface DataInsightHeaderProps { + onScrollToChart: (chartType: DataInsightChartType) => void; +} diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightLeftPanel.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightLeftPanel/DataInsightLeftPanel.test.tsx similarity index 93% rename from openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightLeftPanel.test.tsx rename to openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightLeftPanel/DataInsightLeftPanel.test.tsx index 661879a48ae3..8f886aa57b66 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightLeftPanel.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightLeftPanel/DataInsightLeftPanel.test.tsx @@ -32,7 +32,7 @@ describe('Test Data insight left panel', () => { const dataAssets = await screen.findByText('label.data-asset-plural'); const appAnalytics = await screen.findByText('label.app-analytic-plural'); - const kpi = await screen.findByText('label.kpi-uppercases'); + const kpi = await screen.findByText('label.kpi-uppercase-plural'); expect(menuContainer).toBeInTheDocument(); expect(dataAssets).toBeInTheDocument(); @@ -44,7 +44,7 @@ describe('Test Data insight left panel', () => { render(); const appAnalytics = await screen.findByText('label.app-analytic-plural'); - const kpi = await screen.findByText('label.kpi-uppercases'); + const kpi = await screen.findByText('label.kpi-uppercase-plural'); expect(appAnalytics).toBeInTheDocument(); expect(kpi).toBeInTheDocument(); diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightLeftPanel.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightLeftPanel/DataInsightLeftPanel.tsx similarity index 52% rename from openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightLeftPanel.tsx rename to openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightLeftPanel/DataInsightLeftPanel.tsx index d2cd379febb2..bd089dacc25b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightLeftPanel.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightLeftPanel/DataInsightLeftPanel.tsx @@ -12,42 +12,34 @@ */ import { Menu, MenuProps } from 'antd'; -import React from 'react'; -import { useTranslation } from 'react-i18next'; +import React, { useMemo } from 'react'; import { useHistory, useParams } from 'react-router-dom'; -import { ReactComponent as AppAnalyticsIcon } from '../../assets/svg/app-analytics.svg'; -import { ReactComponent as DataAssetsIcon } from '../../assets/svg/data-asset.svg'; -import { ReactComponent as KPIIcon } from '../../assets/svg/kpi.svg'; -import LeftPanelCard from '../../components/common/LeftPanelCard/LeftPanelCard'; -import { DataInsightTabs } from '../../interface/data-insight.interface'; -import { getDataInsightPathWithFqn } from '../../utils/DataInsightUtils'; +import LeftPanelCard from '../../../components/common/LeftPanelCard/LeftPanelCard'; +import { DataInsightTabs } from '../../../interface/data-insight.interface'; +import { getDataInsightPathWithFqn } from '../../../utils/DataInsightUtils'; +import DataInsightClassBase from '../DataInsightClassBase'; const DataInsightLeftPanel = () => { const { tab } = useParams<{ tab: DataInsightTabs }>(); const history = useHistory(); - const { t } = useTranslation(); - const menuItems: MenuProps['items'] = [ - { - key: DataInsightTabs.DATA_ASSETS, - label: t('label.data-asset-plural'), - icon: , - }, - { - key: DataInsightTabs.APP_ANALYTICS, - label: t('label.app-analytic-plural'), - icon: , - }, - { - key: DataInsightTabs.KPIS, - label: `${t('label.kpi-uppercase')}s`, - icon: , - }, - ]; + const menuItems: MenuProps['items'] = useMemo(() => { + const data = DataInsightClassBase.getLeftSideBar(); + + return data.map((value) => { + const SvgIcon = value.icon; + + return { + key: value.key, + label: value.label, + icon: , + }; + }); + }, []); const handleMenuClick: MenuProps['onClick'] = (e) => { - history.push(getDataInsightPathWithFqn(e.key)); + history.push(getDataInsightPathWithFqn(e.key as DataInsightTabs)); }; return ( diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightPage.component.tsx index 4cbff54dbd0c..dab3e9bf8a42 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightPage.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightPage.component.tsx @@ -11,77 +11,48 @@ * limitations under the License. */ -import { Button, Col, Row, Space, Typography } from 'antd'; +import { Col, Row } from 'antd'; import { t } from 'i18next'; -import { isEmpty, isEqual } from 'lodash'; -import React, { useEffect, useLayoutEffect, useMemo, useState } from 'react'; -import { ListItem } from 'react-awesome-query-builder'; -import { useHistory, useParams } from 'react-router-dom'; +import React, { useLayoutEffect, useMemo, useState } from 'react'; +import { + Redirect, + Route, + Switch, + useHistory, + useParams, +} from 'react-router-dom'; import ErrorPlaceHolder from '../../components/common/error-with-placeholder/ErrorPlaceHolder'; import PageLayoutV1 from '../../components/containers/PageLayoutV1'; -import DailyActiveUsersChart from '../../components/DataInsightDetail/DailyActiveUsersChart'; -import DataInsightSummary from '../../components/DataInsightDetail/DataInsightSummary'; -import DescriptionInsight from '../../components/DataInsightDetail/DescriptionInsight'; -import KPIChart from '../../components/DataInsightDetail/KPIChart'; -import OwnerInsight from '../../components/DataInsightDetail/OwnerInsight'; -import PageViewsByEntitiesChart from '../../components/DataInsightDetail/PageViewsByEntitiesChart'; -import TierInsight from '../../components/DataInsightDetail/TierInsight'; -import TopActiveUsers from '../../components/DataInsightDetail/TopActiveUsers'; -import TopViewEntities from '../../components/DataInsightDetail/TopViewEntities'; -import TotalEntityInsight from '../../components/DataInsightDetail/TotalEntityInsight'; -import DatePickerMenu from '../../components/DatePickerMenu/DatePickerMenu.component'; import { usePermissionProvider } from '../../components/PermissionProvider/PermissionProvider'; import { ResourceEntity } from '../../components/PermissionProvider/PermissionProvider.interface'; -import { DateRangeObject } from '../../components/ProfilerDashboard/component/TestSummary'; -import SearchDropdown from '../../components/SearchDropdown/SearchDropdown'; -import { SearchDropdownOption } from '../../components/SearchDropdown/SearchDropdown.interface'; -import { autocomplete } from '../../constants/AdvancedSearch.constants'; -import { PAGE_SIZE, ROUTES } from '../../constants/constants'; -import { - ENTITIES_CHARTS, - INITIAL_CHART_FILTER, -} from '../../constants/DataInsight.constants'; -import { - DEFAULT_RANGE_DATA, - DEFAULT_SELECTED_RANGE, -} from '../../constants/profiler.constant'; -import { EntityFields } from '../../enums/AdvancedSearch.enum'; +import { ROUTES } from '../../constants/constants'; +import { ENTITIES_CHARTS } from '../../constants/DataInsight.constants'; import { ERROR_PLACEHOLDER_TYPE } from '../../enums/common.enum'; -import { SearchIndex } from '../../enums/search.enum'; import { DataInsightChartType } from '../../generated/dataInsight/dataInsightChartResult'; -import { Kpi } from '../../generated/dataInsight/kpi/kpi'; -import { Tag } from '../../generated/entity/classification/tag'; import { Operation } from '../../generated/entity/policies/policy'; -import { - ChartFilter, - DataInsightTabs, -} from '../../interface/data-insight.interface'; -import { getListKPIs } from '../../rest/KpiAPI'; -import { searchQuery } from '../../rest/searchAPI'; -import { getTags } from '../../rest/tagAPI'; -import { - getDataInsightPathWithFqn, - getTeamFilter, -} from '../../utils/DataInsightUtils'; -import { formatDate } from '../../utils/date-time/DateTimeUtils'; -import { getEntityName } from '../../utils/EntityUtils'; +import { DataInsightTabs } from '../../interface/data-insight.interface'; +import { getDataInsightPathWithFqn } from '../../utils/DataInsightUtils'; import { checkPermission } from '../../utils/PermissionsUtils'; -import { TeamStateType, TierStateType } from './DataInsight.interface'; import './DataInsight.less'; -import DataInsightLeftPanel from './DataInsightLeftPanel'; -import KPIList from './KPIList'; - -const fetchTeamSuggestions = autocomplete({ - searchIndex: SearchIndex.TEAM, - entitySearchIndex: SearchIndex.TEAM, - entityField: EntityFields.OWNER, -}); +import DataInsightClassBase from './DataInsightClassBase'; +import DataInsightHeader from './DataInsightHeader/DataInsightHeader.component'; +import DataInsightLeftPanel from './DataInsightLeftPanel/DataInsightLeftPanel'; +import DataInsightProvider from './DataInsightProvider'; const DataInsightPage = () => { const { tab } = useParams<{ tab: DataInsightTabs }>(); const { permissions } = usePermissionProvider(); const history = useHistory(); + const isHeaderVisible = useMemo( + () => + [ + DataInsightTabs.DATA_ASSETS, + DataInsightTabs.KPIS, + DataInsightTabs.APP_ANALYTICS, + ].includes(tab), + [tab] + ); const viewDataInsightChartPermission = useMemo( () => @@ -98,206 +69,8 @@ const DataInsightPage = () => { [permissions] ); - const createKPIPermission = useMemo( - () => checkPermission(Operation.Create, ResourceEntity.KPI, permissions), - [permissions] - ); - - const [teamsOptions, setTeamOptions] = useState({ - defaultOptions: [], - selectedOptions: [], - options: [], - }); - const [tierOptions, setTierOptions] = useState({ - selectedOptions: [], - options: [], - }); - - const [activeTab, setActiveTab] = useState(DataInsightTabs.DATA_ASSETS); - const [chartFilter, setChartFilter] = - useState(INITIAL_CHART_FILTER); - const [kpiList, setKpiList] = useState>([]); - const [isKpiLoading, setIsKpiLoading] = useState(false); - const [selectedDaysFilter, setSelectedDaysFilter] = useState( - DEFAULT_SELECTED_RANGE.days - ); - const [dateRangeObject, setDateRangeObject] = - useState(DEFAULT_RANGE_DATA); - const [tier, setTier] = useState<{ tags: Tag[]; isLoading: boolean }>({ - tags: [], - isLoading: true, - }); - const [selectedChart, setSelectedChart] = useState(); - const defaultTierOptions = useMemo(() => { - return tier.tags.map((op) => ({ - key: op.fullyQualifiedName ?? op.name, - label: getEntityName(op), - })); - }, [tier]); - - const { descriptionKpi, ownerKpi } = useMemo(() => { - return { - descriptionKpi: kpiList.find( - (kpi) => - kpi.dataInsightChart.name === - DataInsightChartType.PercentageOfEntitiesWithDescriptionByType - ), - ownerKpi: kpiList.find( - (kpi) => - kpi.dataInsightChart.name === - DataInsightChartType.PercentageOfEntitiesWithOwnerByType - ), - }; - }, [kpiList]); - - const handleTierChange = (tiers: SearchDropdownOption[] = []) => { - setTierOptions((prev) => ({ ...prev, selectedOptions: tiers })); - setChartFilter((previous) => ({ - ...previous, - tier: tiers.length ? tiers.map((tier) => tier.key).join(',') : undefined, - })); - }; - - const handleDateRangeChange = ( - value: DateRangeObject, - daysValue?: number - ) => { - if (!isEqual(value, dateRangeObject)) { - setDateRangeObject(value); - setSelectedDaysFilter(daysValue ?? 0); - setChartFilter((previous) => ({ - ...previous, - startTs: value.startTs, - endTs: value.endTs, - })); - } - }; - - const handleTeamChange = (teams: SearchDropdownOption[] = []) => { - setTeamOptions((prev) => ({ - ...prev, - selectedOptions: teams, - })); - setChartFilter((previous) => ({ - ...previous, - team: teams.length ? teams.map((team) => team.key).join(',') : undefined, - })); - }; - - const handleTeamSearch = async (query: string) => { - if (fetchTeamSuggestions && !isEmpty(query)) { - try { - const response = await fetchTeamSuggestions(query, PAGE_SIZE); - setTeamOptions((prev) => ({ - ...prev, - options: getTeamFilter(response.values as ListItem[]), - })); - } catch (_error) { - // we will not show the toast error message for suggestion API - } - } else { - setTeamOptions((prev) => ({ - ...prev, - options: prev.defaultOptions, - })); - } - }; - - const handleTierSearch = async (query: string) => { - if (query) { - setTierOptions((prev) => ({ - ...prev, - options: prev.options.filter( - (value) => - value.label - .toLocaleLowerCase() - .includes(query.toLocaleLowerCase()) || - value.key.toLocaleLowerCase().includes(query.toLocaleLowerCase()) - ), - })); - } else { - setTierOptions((prev) => ({ - ...prev, - options: defaultTierOptions, - })); - } - }; - - const fetchDefaultTeamOptions = async () => { - if (teamsOptions.defaultOptions.length) { - setTeamOptions((prev) => ({ - ...prev, - options: prev.defaultOptions, - })); - - return; - } - - try { - const response = await searchQuery({ - searchIndex: SearchIndex.TEAM, - query: '*', - pageSize: PAGE_SIZE, - }); - const hits = response.hits.hits; - const teamFilterOptions = hits.map((hit) => { - const source = hit._source; - - return { key: source.name, label: source.displayName ?? source.name }; - }); - setTeamOptions((prev) => ({ - ...prev, - defaultOptions: teamFilterOptions, - options: teamFilterOptions, - })); - } catch (_error) { - // we will not show the toast error message for search API - } - }; - - const getTierTag = async () => { - setTier((prev) => ({ ...prev, isLoading: true })); - try { - const { data } = await getTags({ - parent: 'Tier', - }); - - setTier((prev) => ({ ...prev, tags: data })); - setTierOptions((prev) => ({ - ...prev, - options: data.map((op) => ({ - key: op.fullyQualifiedName ?? op.name, - label: getEntityName(op), - })), - })); - } catch (error) { - // error - } finally { - setTier((prev) => ({ ...prev, isLoading: false })); - } - }; - - const fetchDefaultTierOptions = () => { - setTierOptions((prev) => ({ - ...prev, - options: defaultTierOptions, - })); - }; - - const fetchKpiList = async () => { - setIsKpiLoading(true); - try { - const response = await getListKPIs({ fields: 'dataInsightChart' }); - setKpiList(response.data); - } catch (_err) { - setKpiList([]); - } finally { - setIsKpiLoading(false); - } - }; - const handleScrollToChart = (chartType: DataInsightChartType) => { if (ENTITIES_CHARTS.includes(chartType)) { history.push(getDataInsightPathWithFqn(DataInsightTabs.DATA_ASSETS)); @@ -307,10 +80,6 @@ const DataInsightPage = () => { setSelectedChart(chartType); }; - const handleAddKPI = () => { - history.push(ROUTES.ADD_KPI); - }; - useLayoutEffect(() => { if (selectedChart) { const element = document.getElementById(selectedChart); @@ -321,234 +90,66 @@ const DataInsightPage = () => { } }, [selectedChart]); - useEffect(() => { - getTierTag(); - fetchDefaultTeamOptions(); - fetchKpiList(); - }, []); - - useEffect(() => { - setChartFilter(INITIAL_CHART_FILTER); - }, []); + const { noDataInsightPermission, noKPIPermission, dataInsightTabs } = + useMemo(() => { + const data = { + noDataInsightPermission: + !viewDataInsightChartPermission && + (tab === DataInsightTabs.APP_ANALYTICS || + tab === DataInsightTabs.DATA_ASSETS), + noKPIPermission: !viewKPIPermission && tab === DataInsightTabs.KPIS, + dataInsightTabs: DataInsightClassBase.getDataInsightTab(), + }; - useEffect(() => { - setActiveTab(tab ?? DataInsightTabs.DATA_ASSETS); - }, [tab]); + return data; + }, [viewDataInsightChartPermission, viewKPIPermission, tab]); if (!viewDataInsightChartPermission && !viewKPIPermission) { return ; } - const getTabContent = () => { - const noDataInsightPermission = - !viewDataInsightChartPermission && - (activeTab === DataInsightTabs.APP_ANALYTICS || - activeTab === DataInsightTabs.DATA_ASSETS); - - const noKPIPermission = - !viewKPIPermission && activeTab === DataInsightTabs.KPIS; - - if (noDataInsightPermission || noKPIPermission) { - return ( - - - - - - ); - } - + if (noDataInsightPermission || noKPIPermission) { return ( - + - -
- - {t('label.data-insight-plural')} - - - {t('message.data-insight-subtitle')} - -
- - {createKPIPermission && ( - - )} - + - - - - - - - - - - {`${formatDate(chartFilter.startTs)} - ${formatDate( - chartFilter.endTs - )}`} - - - - - - - {/* Do not show summary for KPIs */} - {tab !== DataInsightTabs.KPIS && ( - - - - )} - - {/* Do not show KPIChart for app analytics */} - {tab !== DataInsightTabs.APP_ANALYTICS && ( - - - - )} - {activeTab === DataInsightTabs.DATA_ASSETS && ( - <> - - - - - - - - - - - - - - - - - - - - )} - {activeTab === DataInsightTabs.APP_ANALYTICS && ( - <> - - - - - - - - - - - - - - )} - - {activeTab === DataInsightTabs.KPIS && ( - - )} ); - }; + } return ( } pageTitle={t('label.data-insight')}> - {getTabContent()} + + + {isHeaderVisible && ( + + + + )} + + + {dataInsightTabs.map((tab) => ( + + ))} + + + + + + + + ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightPage.test.tsx index 1234ed0a5864..2e93013f9bd2 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightPage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightPage.test.tsx @@ -11,101 +11,56 @@ * limitations under the License. */ -import { act, render, screen } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import React from 'react'; import { MemoryRouter } from 'react-router-dom'; import { DataInsightTabs } from '../../interface/data-insight.interface'; import DataInsightPage from './DataInsightPage.component'; -let activeTab = DataInsightTabs.DATA_ASSETS; +const activeTab = DataInsightTabs.DATA_ASSETS; jest.mock('react-router-dom', () => ({ + ...jest.requireActual('react-router-dom'), + Switch: jest.fn().mockImplementation(({ children }) =>
{children}
), + Route: jest + .fn() + .mockImplementation(({ children }) => ( +
{children}
+ )), useHistory: jest.fn().mockReturnValue({ push: jest.fn() }), useParams: jest.fn().mockImplementation(() => ({ tab: activeTab })), })); - jest.mock('../../components/containers/PageLayoutV1', () => jest.fn().mockImplementation(({ children }) => <>{children}) ); -jest.mock('../../components/MyData/LeftSidebar/LeftSidebar.component', () => - jest.fn().mockReturnValue(

Sidebar

) -); - -jest.mock('../../components/DataInsightDetail/DataInsightSummary', () => - jest - .fn() - .mockReturnValue( -
DataInsight Summary
- ) -); - -jest.mock('../../components/DataInsightDetail/DescriptionInsight', () => - jest - .fn() - .mockReturnValue( -
DescriptionInsight
- ) -); - -jest.mock('../../components/DataInsightDetail/OwnerInsight', () => - jest.fn().mockReturnValue(
OwnerInsight
) -); - -jest.mock('../../components/DataInsightDetail/TierInsight', () => - jest.fn().mockReturnValue(
TierInsight
) -); - -jest.mock('../../components/DataInsightDetail/TopActiveUsers', () => - jest - .fn() - .mockReturnValue(
TopActiveUsers
) -); - -jest.mock('../../components/DataInsightDetail/TopViewEntities', () => - jest - .fn() - .mockReturnValue( -
TopViewEntities
- ) -); - -jest.mock('../../components/DataInsightDetail/TotalEntityInsight', () => - jest - .fn() - .mockReturnValue( -
TotalEntityInsight
- ) -); - -jest.mock('../../utils/DataInsightUtils', () => ({ - getTeamFilter: jest.fn().mockReturnValue([]), -})); - -jest.mock('../../components/DataInsightDetail/DailyActiveUsersChart', () => - jest - .fn() - .mockReturnValue( -
DailyActiveUsersChart
- ) -); -jest.mock('../../components/DataInsightDetail/PageViewsByEntitiesChart', () => - jest - .fn() - .mockReturnValue( -
PageViewsByEntitiesChart
- ) -); -jest.mock('../../components/DataInsightDetail/KPIChart', () => - jest.fn().mockReturnValue(
KPIChart
) +jest.mock('./DataInsightProvider', () => + jest.fn().mockImplementation(({ children }) => <>{children}) ); jest.mock('./KPIList', () => jest.fn().mockReturnValue(
KPI List
) ); -jest.mock('./DataInsightLeftPanel', () => +jest.mock('./DataInsightLeftPanel/DataInsightLeftPanel', () => jest.fn().mockReturnValue(
Left panel
) ); +jest.mock('./DataInsightHeader/DataInsightHeader.component', () => + jest.fn().mockReturnValue(
DataInsightHeader.component
) +); +jest.mock( + '../../components/DataInsightDetail/DataAssetsTab/DataAssetsTab.component', + () => jest.fn().mockReturnValue(
DataAssetsTab.component
) +); +const mockComponent = () =>
dataAssetsComponent
; +jest.mock('./DataInsightClassBase', () => ({ + getDataInsightTab: jest.fn().mockReturnValue([ + { + key: 'data-assets', + path: '/data-insights/data-assets', + component: mockComponent, + }, + ]), +})); jest.mock('../../components/PermissionProvider/PermissionProvider', () => ({ usePermissionProvider: jest.fn().mockReturnValue({ @@ -122,47 +77,13 @@ jest.mock('../../components/PermissionProvider/PermissionProvider', () => ({ describe('Test DataInsightPage Component', () => { it('Should render all child elements', async () => { - render(); - - const container = screen.getByTestId('data-insight-container'); - const insightSummary = screen.getByTestId('data-insight-summary'); - const descriptionInsight = screen.getAllByTestId('description-insight'); - const ownerInsight = screen.getAllByTestId('owner-insight'); - const tierInsight = screen.getByTestId('tier-insight'); - - const totalEntityInsight = screen.getByTestId('total-entity-insight'); - - expect(container).toBeInTheDocument(); - - expect(insightSummary).toBeInTheDocument(); - expect(descriptionInsight).toHaveLength(2); - expect(ownerInsight).toHaveLength(2); - expect(tierInsight).toBeInTheDocument(); - - expect(totalEntityInsight).toBeInTheDocument(); - }); - - it('Should not render the KPI chart for app analytics', async () => { - activeTab = DataInsightTabs.APP_ANALYTICS; - - await act(async () => { - render(, { wrapper: MemoryRouter }); - }); - - const kpiChart = screen.queryByTestId('kpi-chart'); - - expect(kpiChart).toBeNull(); - }); - - it('Should not render the insights summary for KPIs', async () => { - activeTab = DataInsightTabs.KPIS; - - await act(async () => { - render(, { wrapper: MemoryRouter }); - }); - - const dataInsightsSummary = screen.queryByTestId('data-insight-summary'); - - expect(dataInsightsSummary).toBeNull(); + render(, { wrapper: MemoryRouter }); + + expect( + await screen.findByText('DataInsightHeader.component') + ).toBeInTheDocument(); + expect( + await screen.findByTestId('data-insight-container') + ).toBeInTheDocument(); }); }); diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightProvider.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightProvider.tsx new file mode 100644 index 000000000000..885d5dd611fe --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightProvider.tsx @@ -0,0 +1,293 @@ +/* + * Copyright 2023 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 { isEmpty, isEqual } from 'lodash'; +import React, { + createContext, + useContext, + useEffect, + useMemo, + useState, +} from 'react'; +import { ListItem } from 'react-awesome-query-builder'; +import Loader from '../../components/Loader/Loader'; +import { DateRangeObject } from '../../components/ProfilerDashboard/component/TestSummary'; +import { SearchDropdownOption } from '../../components/SearchDropdown/SearchDropdown.interface'; +import { autocomplete } from '../../constants/AdvancedSearch.constants'; +import { PAGE_SIZE } from '../../constants/constants'; +import { INITIAL_CHART_FILTER } from '../../constants/DataInsight.constants'; +import { + DEFAULT_RANGE_DATA, + DEFAULT_SELECTED_RANGE, +} from '../../constants/profiler.constant'; +import { EntityFields } from '../../enums/AdvancedSearch.enum'; +import { SearchIndex } from '../../enums/search.enum'; +import { Kpi } from '../../generated/dataInsight/kpi/kpi'; +import { Tag } from '../../generated/entity/classification/tag'; +import { ChartFilter } from '../../interface/data-insight.interface'; +import { getListKPIs } from '../../rest/KpiAPI'; +import { searchQuery } from '../../rest/searchAPI'; +import { getTags } from '../../rest/tagAPI'; +import { getTeamFilter } from '../../utils/DataInsightUtils'; +import { getEntityName } from '../../utils/EntityUtils'; +import { + DataInsightContextType, + DataInsightProviderProps, + TeamStateType, + TierStateType, +} from './DataInsight.interface'; + +export const DataInsightContext = createContext( + {} as DataInsightContextType +); +const fetchTeamSuggestions = autocomplete({ + searchIndex: SearchIndex.TEAM, + entitySearchIndex: SearchIndex.TEAM, + entityField: EntityFields.OWNER, +}); + +const DataInsightProvider = ({ children }: DataInsightProviderProps) => { + const [teamsOptions, setTeamOptions] = useState({ + defaultOptions: [], + selectedOptions: [], + options: [], + }); + const [tierOptions, setTierOptions] = useState({ + selectedOptions: [], + options: [], + }); + + const [chartFilter, setChartFilter] = + useState(INITIAL_CHART_FILTER); + const [kpiList, setKpiList] = useState>([]); + const [isKpiLoading, setIsKpiLoading] = useState(true); + const [selectedDaysFilter, setSelectedDaysFilter] = useState( + DEFAULT_SELECTED_RANGE.days + ); + const [dateRangeObject, setDateRangeObject] = + useState(DEFAULT_RANGE_DATA); + const [tier, setTier] = useState<{ tags: Tag[]; isLoading: boolean }>({ + tags: [], + isLoading: true, + }); + + const defaultTierOptions = useMemo(() => { + return tier.tags.map((op) => ({ + key: op.fullyQualifiedName ?? op.name, + label: getEntityName(op), + })); + }, [tier]); + + const handleTierChange = (tiers: SearchDropdownOption[] = []) => { + setTierOptions((prev) => ({ ...prev, selectedOptions: tiers })); + setChartFilter((previous) => ({ + ...previous, + tier: tiers.length ? tiers.map((tier) => tier.key).join(',') : undefined, + })); + }; + + const handleDateRangeChange = ( + value: DateRangeObject, + daysValue?: number + ) => { + if (!isEqual(value, dateRangeObject)) { + setDateRangeObject(value); + setSelectedDaysFilter(daysValue ?? 0); + setChartFilter((previous) => ({ + ...previous, + startTs: value.startTs, + endTs: value.endTs, + })); + } + }; + + const handleTeamChange = (teams: SearchDropdownOption[] = []) => { + setTeamOptions((prev) => ({ + ...prev, + selectedOptions: teams, + })); + setChartFilter((previous) => ({ + ...previous, + team: teams.length ? teams.map((team) => team.key).join(',') : undefined, + })); + }; + + const handleTeamSearch = async (query: string) => { + if (fetchTeamSuggestions && !isEmpty(query)) { + try { + const response = await fetchTeamSuggestions(query, PAGE_SIZE); + setTeamOptions((prev) => ({ + ...prev, + options: getTeamFilter(response.values as ListItem[]), + })); + } catch (_error) { + // we will not show the toast error message for suggestion API + } + } else { + setTeamOptions((prev) => ({ + ...prev, + options: prev.defaultOptions, + })); + } + }; + + const handleTierSearch = async (query: string) => { + if (query) { + setTierOptions((prev) => ({ + ...prev, + options: prev.options.filter( + (value) => + value.label + .toLocaleLowerCase() + .includes(query.toLocaleLowerCase()) || + value.key.toLocaleLowerCase().includes(query.toLocaleLowerCase()) + ), + })); + } else { + setTierOptions((prev) => ({ + ...prev, + options: defaultTierOptions, + })); + } + }; + + const fetchDefaultTeamOptions = async () => { + if (teamsOptions.defaultOptions.length) { + setTeamOptions((prev) => ({ + ...prev, + options: prev.defaultOptions, + })); + + return; + } + + try { + const response = await searchQuery({ + searchIndex: SearchIndex.TEAM, + query: '*', + pageSize: PAGE_SIZE, + }); + const hits = response.hits.hits; + const teamFilterOptions = hits.map((hit) => { + const source = hit._source; + + return { key: source.name, label: source.displayName ?? source.name }; + }); + setTeamOptions((prev) => ({ + ...prev, + defaultOptions: teamFilterOptions, + options: teamFilterOptions, + })); + } catch (_error) { + // we will not show the toast error message for search API + } + }; + + const getTierTag = async () => { + setTier((prev) => ({ ...prev, isLoading: true })); + try { + const { data } = await getTags({ + parent: 'Tier', + }); + + setTier((prev) => ({ ...prev, tags: data })); + setTierOptions((prev) => ({ + ...prev, + options: data.map((op) => ({ + key: op.fullyQualifiedName ?? op.name, + label: getEntityName(op), + })), + })); + } catch (error) { + // error + } finally { + setTier((prev) => ({ ...prev, isLoading: false })); + } + }; + + const fetchDefaultTierOptions = () => { + setTierOptions((prev) => ({ + ...prev, + options: defaultTierOptions, + })); + }; + + const fetchKpiList = async () => { + setIsKpiLoading(true); + try { + const response = await getListKPIs({ fields: 'dataInsightChart' }); + setKpiList(response.data); + } catch (_err) { + setKpiList([]); + } finally { + setIsKpiLoading(false); + } + }; + + const dataInsightHeaderProps = useMemo( + () => ({ + chartFilter: chartFilter, + selectedDaysFilter, + onChartFilterChange: handleDateRangeChange, + kpi: { + isLoading: isKpiLoading, + data: kpiList, + }, + teamFilter: { + options: teamsOptions.options, + selectedKeys: teamsOptions.selectedOptions, + onChange: handleTeamChange, + onGetInitialOptions: fetchDefaultTeamOptions, + onSearch: handleTeamSearch, + }, + tierFilter: { + options: tierOptions.options, + selectedKeys: tierOptions.selectedOptions, + onChange: handleTierChange, + onGetInitialOptions: fetchDefaultTierOptions, + onSearch: handleTierSearch, + }, + tierTag: tier, + }), + [ + handleTeamSearch, + chartFilter, + isKpiLoading, + kpiList, + handleDateRangeChange, + handleTierSearch, + fetchDefaultTierOptions, + handleTierChange, + tierOptions, + fetchDefaultTeamOptions, + handleTeamChange, + teamsOptions, + ] + ); + + useEffect(() => { + getTierTag(); + fetchDefaultTeamOptions(); + fetchKpiList(); + setChartFilter(INITIAL_CHART_FILTER); + }, []); + + return ( + + {isKpiLoading ? : children} + + ); +}; + +export const useDataInsightProvider = () => useContext(DataInsightContext); + +export default DataInsightProvider; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/KPIList.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/KPIList.test.tsx index 892fce9631a2..c5cee921da16 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/KPIList.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/KPIList.test.tsx @@ -62,7 +62,7 @@ jest.mock('../../rest/KpiAPI', () => ({ describe('KPI list component', () => { it('Should render the kpi list', async () => { - render(, { wrapper: MemoryRouter }); + render(, { wrapper: MemoryRouter }); const container = await screen.findByTestId('kpi-table'); const descriptionKPI = await screen.findByText('Description KPI'); @@ -77,7 +77,7 @@ describe('KPI list component', () => { it('Action button should work', async () => { const KPI = KPI_DATA[0]; - render(, { wrapper: MemoryRouter }); + render(, { wrapper: MemoryRouter }); const editButton = await screen.findByTestId( `edit-action-${KPI.displayName}` diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/KPIList.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/KPIList.tsx index b8c2582884f0..c91308431d9b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/KPIList.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/KPIList.tsx @@ -25,6 +25,8 @@ import { PagingHandlerParams } from '../../components/common/next-previous/NextP import RichTextEditorPreviewer from '../../components/common/rich-text-editor/RichTextEditorPreviewer'; import Table from '../../components/common/Table/Table'; import { EmptyGraphPlaceholder } from '../../components/DataInsightDetail/EmptyGraphPlaceholder'; +import { usePermissionProvider } from '../../components/PermissionProvider/PermissionProvider'; +import { ResourceEntity } from '../../components/PermissionProvider/PermissionProvider.interface'; import { getKpiPath, INITIAL_PAGING_VALUE, @@ -34,17 +36,24 @@ import { import { ERROR_PLACEHOLDER_TYPE } from '../../enums/common.enum'; import { EntityType } from '../../enums/entity.enum'; import { Kpi, KpiTargetType } from '../../generated/dataInsight/kpi/kpi'; +import { Operation } from '../../generated/entity/policies/policy'; import { Paging } from '../../generated/type/paging'; import { useAuth } from '../../hooks/authHooks'; import { getListKPIs } from '../../rest/KpiAPI'; import { formatDateTime } from '../../utils/date-time/DateTimeUtils'; import { getEntityName } from '../../utils/EntityUtils'; +import { checkPermission } from '../../utils/PermissionsUtils'; import SVGIcons, { Icons } from '../../utils/SvgUtils'; -const KPIList = ({ viewKPIPermission }: { viewKPIPermission: boolean }) => { +const KPIList = () => { const history = useHistory(); const { isAdminUser } = useAuth(); const { t } = useTranslation(); + const { permissions } = usePermissionProvider(); + const viewKPIPermission = useMemo( + () => checkPermission(Operation.ViewAll, ResourceEntity.KPI, permissions), + [permissions] + ); const [kpiList, setKpiList] = useState>([]); const [isLoading, setIsLoading] = useState(false); const [kpiPage, setKpiPage] = useState(INITIAL_PAGING_VALUE); diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/AddKPIPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/AddKPIPage.test.tsx index 9556a0deaab1..a7b6204da6c6 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/AddKPIPage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/AddKPIPage.test.tsx @@ -70,6 +70,7 @@ jest.mock('../../components/common/ResizablePanels/ResizablePanels', () => ); jest.mock('../../utils/DataInsightUtils', () => ({ + ...jest.requireActual('../../utils/DataInsightUtils'), getKpiTargetValueByMetricType: jest.fn().mockReturnValue(10), getDisabledDates: jest.fn().mockReturnValue(true), })); diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/AddKPIPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/AddKPIPage.tsx index fb3d807c91f8..30f92ca2dc78 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/AddKPIPage.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/AddKPIPage.tsx @@ -55,6 +55,7 @@ import { Kpi } from '../../generated/dataInsight/kpi/kpi'; import { getListDataInsightCharts } from '../../rest/DataInsightAPI'; import { getListKPIs, postKPI } from '../../rest/KpiAPI'; import { + getDataInsightPathWithFqn, getDisabledDates, getKpiTargetValueByMetricType, } from '../../utils/DataInsightUtils'; @@ -67,7 +68,7 @@ const { Option } = Select; const breadcrumb = [ { name: t('label.data-insight'), - url: ROUTES.DATA_INSIGHT, + url: getDataInsightPathWithFqn(), }, { name: t('label.kpi-list'), diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/EditKPIPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/EditKPIPage.test.tsx index fdb73889b927..e65310ab7210 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/EditKPIPage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/EditKPIPage.test.tsx @@ -56,6 +56,7 @@ jest.mock('../../hooks/authHooks', () => ({ })); jest.mock('../../utils/DataInsightUtils', () => ({ + ...jest.requireActual('../../utils/DataInsightUtils'), getKpiTargetValueByMetricType: jest.fn().mockReturnValue(10), getDisabledDates: jest.fn().mockReturnValue(true), })); diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/EditKPIPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/EditKPIPage.tsx index 1b141b2ab73e..6adead632ce4 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/EditKPIPage.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/EditKPIPage.tsx @@ -45,6 +45,7 @@ import { useAuth } from '../../hooks/authHooks'; import { getChartById } from '../../rest/DataInsightAPI'; import { getKPIByName, patchKPI } from '../../rest/KpiAPI'; import { + getDataInsightPathWithFqn, getDisabledDates, getKpiTargetValueByMetricType, } from '../../utils/DataInsightUtils'; @@ -74,7 +75,7 @@ const EditKPIPage = () => { () => [ { name: t('label.data-insight'), - url: ROUTES.DATA_INSIGHT, + url: getDataInsightPathWithFqn(), }, { name: t('label.kpi-list'), diff --git a/openmetadata-ui/src/main/resources/ui/src/rest/searchAPI.ts b/openmetadata-ui/src/main/resources/ui/src/rest/searchAPI.ts index 62ef0f446acd..7e8ba26be070 100644 --- a/openmetadata-ui/src/main/resources/ui/src/rest/searchAPI.ts +++ b/openmetadata-ui/src/main/resources/ui/src/rest/searchAPI.ts @@ -14,8 +14,10 @@ import { AxiosResponse } from 'axios'; import { isArray, isNil } from 'lodash'; import { SearchIndex } from '../enums/search.enum'; +import { DataInsightSearchRequest } from '../interface/data-insight.interface'; import { Aggregations, + DataInsightSearchResponse, KeysOfUnion, RawSuggestResponse, SearchIndexSearchSourceMapping, @@ -234,6 +236,61 @@ export const searchQuery = async < return formatSearchQueryResponse(res.data); }; +/** + * Access point for the Search API. + * Executes a request to /search/query, returning a formatted response. + * + * @param req Request object + */ +export const searchQueryDataInsight = async ( + req: DataInsightSearchRequest +): Promise => { + const { + query, + pageNumber = 1, + pageSize = 10, + queryFilter, + sortField, + sortOrder, + searchIndex, + includeDeleted, + trackTotalHits, + postFilter, + fetchSource, + filters, + } = req; + + const queryWithSlash = getQueryWithSlash(query || ''); + + const apiQuery = query + ? filters + ? `${queryWithSlash} AND ` + : queryWithSlash + : ''; + + const apiUrl = `/search/query?q=${apiQuery}${filters ?? ''}`; + + const res = await APIClient.get(apiUrl, { + params: { + index: searchIndex, + from: (pageNumber - 1) * pageSize, + size: pageSize, + deleted: includeDeleted, + query_filter: JSON.stringify(queryFilter), + post_filter: JSON.stringify(postFilter), + sort_field: sortField, + sort_order: sortOrder, + track_total_hits: trackTotalHits, + fetch_source: fetchSource, + include_source_fields: req.fetchSource ? req.includeFields : undefined, + }, + }); + + return formatSearchQueryResponse( + res.data + ) as unknown as DataInsightSearchResponse; +}; + /** * Formats a response from {@link rawSuggestQuery} * diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/DataInsightUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/DataInsightUtils.tsx index a2442f8d3cd7..0d19a15be2fa 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/DataInsightUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/DataInsightUtils.tsx @@ -25,6 +25,7 @@ import { omit, round, sortBy, + startCase, sumBy, toNumber, } from 'lodash'; @@ -33,15 +34,15 @@ import React from 'react'; import { ListItem } from 'react-awesome-query-builder'; import { LegendProps, Surface } from 'recharts'; import { SearchDropdownOption } from '../components/SearchDropdown/SearchDropdown.interface'; +import { + ENTITIES_SUMMARY_LIST, + WEB_SUMMARY_LIST, +} from '../constants/DataInsight.constants'; import { GRAYED_OUT_COLOR, PLACEHOLDER_ROUTE_TAB, ROUTES, } from '../constants/constants'; -import { - ENTITIES_SUMMARY_LIST, - WEB_SUMMARY_LIST, -} from '../constants/DataInsight.constants'; import { KpiTargetType } from '../generated/api/dataInsight/kpi/createKpiRequest'; import { DataInsightChartResult, @@ -53,6 +54,7 @@ import { TotalEntitiesByTier } from '../generated/dataInsight/type/totalEntities import { ChartValue, DataInsightChartTooltipProps, + DataInsightTabs, } from '../interface/data-insight.interface'; import { pluralize } from './CommonUtils'; import { customFormatDateTime, formatDate } from './date-time/DateTimeUtils'; @@ -67,7 +69,8 @@ const checkIsPercentageGraph = (dataInsightChartType: DataInsightChartType) => export const renderLegend = ( legendData: LegendProps, - activeKeys = [] as string[] + activeKeys = [] as string[], + valueFormatter?: (value: string) => string ) => { const { payload = [] } = legendData; @@ -101,7 +104,7 @@ export const renderLegend = ( /> - {entry.value} + {valueFormatter ? valueFormatter(entry.value) : entry.value} ); @@ -110,7 +113,7 @@ export const renderLegend = ( ); }; -const getEntryFormattedValue = ( +export const getEntryFormattedValue = ( value: number | string | undefined, dataKey: number | string | undefined, kpiTooltipRecord: DataInsightChartTooltipProps['kpiTooltipRecord'], @@ -138,7 +141,7 @@ const getEntryFormattedValue = ( } else if (isInteger(value)) { return `${value}${suffix}`; } else { - return `${value.toFixed(2)}${suffix}`; + return `${round(value, 2)}${suffix}`; } } else { return ''; @@ -146,7 +149,13 @@ const getEntryFormattedValue = ( }; export const CustomTooltip = (props: DataInsightChartTooltipProps) => { - const { active, payload = [], isPercentage, kpiTooltipRecord } = props; + const { + active, + payload = [], + isPercentage, + valueFormatter, + kpiTooltipRecord, + } = props; if (active && payload && payload.length) { const timestamp = formatDate(payload[0].payload.timestampValue || 0); @@ -163,15 +172,17 @@ export const CustomTooltip = (props: DataInsightChartTooltipProps) => { - {entry.dataKey} + {startCase(entry.dataKey as string)} - {getEntryFormattedValue( - entry.value, - entry.dataKey, - kpiTooltipRecord, - isPercentage - )} + {valueFormatter + ? valueFormatter(entry.value) + : getEntryFormattedValue( + entry.value, + entry.dataKey, + kpiTooltipRecord, + isPercentage + )} ))} @@ -656,5 +667,15 @@ export const getKpiResultFeedback = (day: number, isTargetMet: boolean) => { } }; -export const getDataInsightPathWithFqn = (fqn: string) => - ROUTES.DATA_INSIGHT_WITH_TAB.replace(PLACEHOLDER_ROUTE_TAB, fqn); +export const getDataInsightPathWithFqn = (tab = DataInsightTabs.DATA_ASSETS) => + ROUTES.DATA_INSIGHT_WITH_TAB.replace(PLACEHOLDER_ROUTE_TAB, tab); + +export const getOptionalDataInsightTabFlag = (tab: DataInsightTabs) => { + return { + showDataInsightSummary: + tab === DataInsightTabs.APP_ANALYTICS || + tab === DataInsightTabs.DATA_ASSETS, + showKpiChart: + tab === DataInsightTabs.KPIS || tab === DataInsightTabs.DATA_ASSETS, + }; +};