fix: dataInsight page break issue (#10068)

* fix: dataInsight page break issue * Added unit test around the bug
2025-11-02 11:39:12 +00:00 · 2023-02-02 17:16:43 +05:30 · 2023-02-02 17:16:43 +05:30 · 72d6bfca1d
commit 72d6bfca1d
parent 66f4136fc8
5 changed files with 228 additions and 42 deletions
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.test.tsx
@ -12,7 +12,12 @@
 */

 import { act, queryByAttribute, render, screen } from '@testing-library/react';
+import {
+  DUMMY_GRAPH_DATA,
+  DUMMY_GRAPH_DATA_WITH_MISSING_ENTITY,
+} from 'mocks/DataInsight.mock';
 import React from 'react';
+import { getGraphDataByEntityType } from 'utils/DataInsightUtils';
 import { INITIAL_CHART_FILTER } from '../../constants/DataInsight.constants';

 import DescriptionInsight from './DescriptionInsight';
@ -21,44 +26,18 @@ jest.mock('../../utils/DataInsightUtils', () => ({
  renderLegend: jest
    .fn()
    .mockReturnValue(<ul data-testid="graph-legend">Graph Legend</ul>),
-  getGraphDataByEntityType: jest.fn().mockImplementation(() => ({
-    data: [
-      {
-        timestamp: '27/Oct',
-        Table: 0.5674,
-        Topic: 0.0453,
-        Database: 0.9874,
-        Pipeline: 0.5432,
-        Messaging: 0.3215,
-      },
-      {
-        timestamp: '25/Oct',
-        Table: 0.3674,
-        Topic: 0.0353,
-        Database: 0.9874,
-        Pipeline: 0.4432,
-        Messaging: 0.3115,
-      },
-      {
-        timestamp: '24/Oct',
-        Table: 0.3374,
-        Topic: 0.0353,
-        Database: 0.9774,
-        Pipeline: 0.4482,
-        Messaging: 0.3105,
-      },
-    ],
-    entities: ['Table', 'Topic', 'Database', 'Pipeline', 'Messaging'],
-    latestData: {
-      timestamp: '24/Oct',
-      Table: 0.3374,
-      Topic: 0.0353,
-      Database: 0.9774,
-      Pipeline: 0.4482,
-      Messaging: 0.3105,
-    },
-  })),
+  getGraphDataByEntityType: jest
+    .fn()
+    .mockImplementation(() => DUMMY_GRAPH_DATA),
 }));
+jest.mock('./DataInsightProgressBar', () => {
+  return jest.fn().mockImplementation(({ startValue, successValue }) => (
+    <div>
+      DataInsightProgressBar.component
+      <p data-testid={successValue}>{startValue}</p>
+    </div>
+  ));
+});

 jest.mock('react-i18next', () => ({
  useTranslation: jest.fn().mockReturnValue({
@ -88,4 +67,32 @@ describe('Test DescriptionInsight Component', () => {
      expect(graph).toBeInTheDocument();
    });
  });
+
+  it('Should render the graph and progress bar even if one entity dont have values', async () => {
+    (getGraphDataByEntityType as jest.Mock).mockImplementationOnce(
+      () => DUMMY_GRAPH_DATA_WITH_MISSING_ENTITY
+    );
+    await act(async () => {
+      const { container } = render(
+        <DescriptionInsight
+          chartFilter={INITIAL_CHART_FILTER}
+          kpi={undefined}
+          selectedDays={30}
+        />
+      );
+      const card = screen.getByTestId('entity-description-percentage-card');
+
+      const graph = queryByAttribute(
+        'id',
+        container,
+        'description-summary-graph'
+      );
+      const missingEntityValue = await screen.findByTestId('Table');
+
+      expect(card).toBeInTheDocument();
+      expect(graph).toBeInTheDocument();
+      expect(missingEntityValue).toBeInTheDocument();
+      expect(missingEntityValue.textContent).toBe('0');
+    });
+  });
 });
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.tsx
@ -13,7 +13,7 @@

 import { Card, Col, Row, Typography } from 'antd';
 import { AxiosError } from 'axios';
-import { isEmpty, uniqueId } from 'lodash';
+import { isEmpty, round, uniqueId } from 'lodash';
 import React, { FC, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@ -232,7 +232,7 @@ const DescriptionInsight: FC<Props> = ({ chartFilter, kpi, selectedDays }) => {
                      showEndValueAsLabel
                      progress={latestData[entity]}
                      showLabel={false}
-                      startValue={latestData[entity].toFixed(2)}
+                      startValue={round(latestData[entity] || 0, 2)}
                      successValue={entity}
                      suffix={isPercentageGraph ? '%' : ''}
                    />
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/OwnerInsight.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/OwnerInsight.test.tsx
@ -0,0 +1,90 @@
+/*
+ *  Copyright 2022 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+import { act, queryByAttribute, render, screen } from '@testing-library/react';
+import {
+  DUMMY_GRAPH_DATA,
+  DUMMY_GRAPH_DATA_WITH_MISSING_ENTITY,
+} from 'mocks/DataInsight.mock';
+import React from 'react';
+import { getGraphDataByEntityType } from 'utils/DataInsightUtils';
+import { INITIAL_CHART_FILTER } from '../../constants/DataInsight.constants';
+
+import OwnerInsight from './OwnerInsight';
+
+jest.mock('../../utils/DataInsightUtils', () => ({
+  renderLegend: jest
+    .fn()
+    .mockReturnValue(<ul data-testid="graph-legend">Graph Legend</ul>),
+  getGraphDataByEntityType: jest
+    .fn()
+    .mockImplementation(() => DUMMY_GRAPH_DATA),
+}));
+jest.mock('./DataInsightProgressBar', () => {
+  return jest.fn().mockImplementation(({ startValue, successValue }) => (
+    <div>
+      DataInsightProgressBar.component
+      <p data-testid={successValue}>{startValue}</p>
+    </div>
+  ));
+});
+
+jest.mock('react-i18next', () => ({
+  useTranslation: jest.fn().mockReturnValue({
+    t: (label: string) => label,
+  }),
+}));
+
+describe('Test DescriptionInsight Component', () => {
+  it('Should render the graph', async () => {
+    await act(async () => {
+      const { container } = render(
+        <OwnerInsight
+          chartFilter={INITIAL_CHART_FILTER}
+          kpi={undefined}
+          selectedDays={30}
+        />
+      );
+      const card = screen.getByTestId('entity-summary-card-percentage');
+
+      const graph = queryByAttribute('id', container, 'owner-summary-graph');
+
+      expect(card).toBeInTheDocument();
+      expect(graph).toBeInTheDocument();
+    });
+  });
+
+  it('Should render the graph and progress bar even if one entity dont have values', async () => {
+    (getGraphDataByEntityType as jest.Mock).mockImplementationOnce(
+      () => DUMMY_GRAPH_DATA_WITH_MISSING_ENTITY
+    );
+    await act(async () => {
+      const { container } = render(
+        <OwnerInsight
+          chartFilter={INITIAL_CHART_FILTER}
+          kpi={undefined}
+          selectedDays={30}
+        />
+      );
+      const card = screen.getByTestId('entity-summary-card-percentage');
+
+      const graph = queryByAttribute('id', container, 'owner-summary-graph');
+      const missingEntityValue = await screen.findByTestId('Table');
+
+      expect(card).toBeInTheDocument();
+      expect(graph).toBeInTheDocument();
+      expect(missingEntityValue).toBeInTheDocument();
+      expect(missingEntityValue.textContent).toBe('0');
+    });
+  });
+});
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/OwnerInsight.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/OwnerInsight.tsx
@ -13,7 +13,7 @@

 import { Card, Col, Row, Typography } from 'antd';
 import { AxiosError } from 'axios';
-import { isEmpty, uniqueId } from 'lodash';
+import { isEmpty, round, uniqueId } from 'lodash';
 import React, { FC, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@ -151,7 +151,10 @@ const OwnerInsight: FC<Props> = ({ chartFilter, kpi, selectedDays }) => {
      {data.length ? (
        <Row gutter={DI_STRUCTURE.rowContainerGutter}>
          <Col span={DI_STRUCTURE.leftContainerSpan}>
-            <ResponsiveContainer debounce={1} minHeight={400}>
+            <ResponsiveContainer
+              debounce={1}
+              id="owner-summary-graph"
+              minHeight={400}>
              <LineChart data={data} margin={BAR_CHART_MARGIN}>
                <CartesianGrid
                  stroke={GRAPH_BACKGROUND_COLOR}
@ -226,7 +229,7 @@ const OwnerInsight: FC<Props> = ({ chartFilter, kpi, selectedDays }) => {
                      showEndValueAsLabel
                      progress={latestData[entity]}
                      showLabel={false}
-                      startValue={latestData[entity].toFixed(2)}
+                      startValue={round(latestData[entity] || 0, 2)}
                      successValue={entity}
                      suffix={isPercentageGraph ? '%' : ''}
                    />
--- a/openmetadata-ui/src/main/resources/ui/src/mocks/DataInsight.mock.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/mocks/DataInsight.mock.ts
@ -0,0 +1,86 @@
+/*
+ *  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 const DUMMY_GRAPH_DATA = {
+  data: [
+    {
+      timestamp: '27/Oct',
+      Table: 0.5674,
+      Topic: 0.0453,
+      Database: 0.9874,
+      Pipeline: 0.5432,
+      Messaging: 0.3215,
+    },
+    {
+      timestamp: '25/Oct',
+      Table: 0.3674,
+      Topic: 0.0353,
+      Database: 0.9874,
+      Pipeline: 0.4432,
+      Messaging: 0.3115,
+    },
+    {
+      timestamp: '24/Oct',
+      Table: 0.3374,
+      Topic: 0.0353,
+      Database: 0.9774,
+      Pipeline: 0.4482,
+      Messaging: 0.3105,
+    },
+  ],
+  entities: ['Table', 'Topic', 'Database', 'Pipeline', 'Messaging'],
+  latestData: {
+    timestamp: '24/Oct',
+    Table: 0.3374,
+    Topic: 0.0353,
+    Database: 0.9774,
+    Pipeline: 0.4482,
+    Messaging: 0.3105,
+  },
+};
+export const DUMMY_GRAPH_DATA_WITH_MISSING_ENTITY = {
+  data: [
+    {
+      timestamp: '27/Oct',
+      Table: 0.5674,
+      Topic: 0.0453,
+      Database: 0.9874,
+      Pipeline: 0.5432,
+      Messaging: 0.3215,
+    },
+    {
+      timestamp: '25/Oct',
+      Table: 0.3674,
+      Topic: 0.0353,
+      Database: 0.9874,
+      Pipeline: 0.4432,
+      Messaging: 0.3115,
+    },
+    {
+      timestamp: '24/Oct',
+      Table: 0.3374,
+      Topic: 0.0353,
+      Database: 0.9774,
+      Pipeline: 0.4482,
+      Messaging: 0.3105,
+    },
+  ],
+  entities: ['Table', 'Topic', 'Database', 'Pipeline', 'Messaging'],
+  latestData: {
+    timestamp: '24/Oct',
+    Topic: 0.0353,
+    Database: 0.9774,
+    Pipeline: 0.4482,
+    Messaging: 0.3105,
+  },
+};