ui: clean-up in data insight page (open-metadata#13193)

* ui: clean-up in data insight page

* updated datePickerMenu with type

* added option to allow/disallowed Custom Range

* added icon and some utils change

* refactor cost analysis page

* translation

* DI enum

* updated di interface file

* removed duplicated code

* updated date picker

* export the getEntryFormattedValue function

* miner fix

* created dataInsight provider and move all the props in to provider, created classBase file

* translation sync

* fixed failing unit test

* fixed failing unite test

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 (
+    <Row gutter={[16, 16]}>
+      <Col span={24}>
+        <TopViewEntities chartFilter={chartFilter} />
+      </Col>
+      <Col span={24}>
+        <PageViewsByEntitiesChart
+          chartFilter={chartFilter}
+          selectedDays={selectedDaysFilter}
+        />
+      </Col>
+      <Col span={24}>
+        <DailyActiveUsersChart
+          chartFilter={chartFilter}
+          selectedDays={selectedDaysFilter}
+        />
+      </Col>
+      <Col span={24}>
+        <TopActiveUsers chartFilter={chartFilter} />
+      </Col>
+    </Row>
+  );
+};
+
+export default AppAnalyticsTab;

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 <Loader />;
+  }
+
+  return (
+    <Row gutter={[16, 16]}>
+      <Col span={24}>
+        <TotalEntityInsight
+          chartFilter={chartFilter}
+          selectedDays={selectedDaysFilter}
+        />
+      </Col>
+      <Col span={24}>
+        <DescriptionInsight
+          chartFilter={chartFilter}
+          dataInsightChartName={
+            DataInsightChartType.PercentageOfEntitiesWithDescriptionByType
+          }
+          header={t('label.data-insight-description-summary-type', {
+            type: t('label.data-asset'),
+          })}
+          kpi={descriptionKpi}
+          selectedDays={selectedDaysFilter}
+        />
+      </Col>
+      <Col span={24}>
+        <OwnerInsight
+          chartFilter={chartFilter}
+          dataInsightChartName={
+            DataInsightChartType.PercentageOfEntitiesWithOwnerByType
+          }
+          header={t('label.data-insight-owner-summary-type', {
+            type: t('label.data-asset'),
+          })}
+          kpi={ownerKpi}
+          selectedDays={selectedDaysFilter}
+        />
+      </Col>
+      <Col span={24}>
+        <DescriptionInsight
+          chartFilter={chartFilter}
+          dataInsightChartName={
+            DataInsightChartType.PercentageOfServicesWithDescription
+          }
+          header={t('label.data-insight-description-summary-type', {
+            type: t('label.service'),
+          })}
+          kpi={descriptionKpi}
+          selectedDays={selectedDaysFilter}
+        />
+      </Col>
+      <Col span={24}>
+        <OwnerInsight
+          chartFilter={chartFilter}
+          dataInsightChartName={
+            DataInsightChartType.PercentageOfServicesWithOwner
+          }
+          header={t('label.data-insight-owner-summary-type', {
+            type: t('label.service'),
+          })}
+          kpi={ownerKpi}
+          selectedDays={selectedDaysFilter}
+        />
+      </Col>
+      <Col span={24}>
+        <TierInsight
+          chartFilter={chartFilter}
+          selectedDays={selectedDaysFilter}
+          tierTags={tier}
+        />
+      </Col>
+    </Row>
+  );
+};
+
+export default DataAssetsTab;

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

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<string>(
-    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<string>(
+    defaultOptions.key
+  );
 
   const [isMenuOpen, setIsMenuOpen] = useState<boolean>(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: (
-            <DatePicker.RangePicker
-              bordered={false}
-              clearIcon={<CloseCircleOutlined />}
-              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: (
+                <DatePicker.RangePicker
+                  bordered={false}
+                  clearIcon={<CloseCircleOutlined />}
+                  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;
   };

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