Minor: supporting PR for UI/UX improvement in DQ

open-metadata · Nov 15, 2024 · fa84130 · fa84130
1 parent 00fbf07
commit fa84130
Show file tree

Hide file tree

Showing 27 changed files with 202 additions and 58 deletions.
diff --git a/...ts/DataQuality/ChartWidgets/IncidentTimeChartWidget/IncidentTimeChartWidget.component.tsx b/...ts/DataQuality/ChartWidgets/IncidentTimeChartWidget/IncidentTimeChartWidget.component.tsx
@@ -11,8 +11,9 @@
  *  limitations under the License.
  */
 import { Card, Typography } from 'antd';
-import { isNull } from 'lodash';
+import { isNull, isUndefined } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
+import { Link } from 'react-router-dom';
 import { fetchIncidentTimeMetrics } from '../../../../rest/dataQualityDashboardAPI';
 import { convertMillisecondsToHumanReadableFormat } from '../../../../utils/date-time/DateTimeUtils';
 import { CustomAreaChartData } from '../../../Visualisations/Chart/Chart.interface';
@@ -25,6 +26,7 @@ const IncidentTimeChartWidget = ({
   title,
   chartFilter,
   height,
+  redirectPath,
 }: IncidentTimeChartWidgetProps) => {
   const [chartData, setChartData] = useState<CustomAreaChartData[]>([]);
   const [isChartLoading, setIsChartLoading] = useState(true);
@@ -34,7 +36,17 @@ const IncidentTimeChartWidget = ({
       return acc + curr.count;
     }, 0);
 
-    return totalTime > 0 ? totalTime / chartData.length : 0;
+    const avgTime = totalTime > 0 ? totalTime / chartData.length : 0;
+
+    return (
+      <Typography.Paragraph
+        className="font-medium text-xl m-b-0"
+        data-testid="average-time">
+        {chartData.length > 0
+          ? convertMillisecondsToHumanReadableFormat(avgTime)
+          : '--'}
+      </Typography.Paragraph>
+    );
   }, [chartData]);
 
   const getRespondTimeMetrics = async () => {
@@ -77,13 +89,12 @@ const IncidentTimeChartWidget = ({
       <Typography.Paragraph className="text-xs text-grey-muted">
         {title}
       </Typography.Paragraph>
-      <Typography.Paragraph
-        className="font-medium text-xl m-b-0"
-        data-testid="average-time">
-        {chartData.length > 0
-          ? convertMillisecondsToHumanReadableFormat(avgTimeValue)
-          : '--'}
-      </Typography.Paragraph>
+
+      {isUndefined(redirectPath) ? (
+        avgTimeValue
+      ) : (
+        <Link to={redirectPath}>{avgTimeValue}</Link>
+      )}
 
       <CustomAreaChart
         data={chartData}

diff --git a/...uality/ChartWidgets/IncidentTypeAreaChartWidget/IncidentTypeAreaChartWidget.component.tsx b/...uality/ChartWidgets/IncidentTypeAreaChartWidget/IncidentTypeAreaChartWidget.component.tsx
@@ -12,27 +12,42 @@
  */
 import { Card, Typography } from 'antd';
 import React, { useEffect, useMemo, useState } from 'react';
+import { Link } from 'react-router-dom';
 import { fetchCountOfIncidentStatusTypeByDays } from '../../../../rest/dataQualityDashboardAPI';
 import { CustomAreaChartData } from '../../../Visualisations/Chart/Chart.interface';
 import CustomAreaChart from '../../../Visualisations/Chart/CustomAreaChart.component';
 import { IncidentTypeAreaChartWidgetProps } from '../../DataQuality.interface';
+import '../chart-widgets.less';
 
 const IncidentTypeAreaChartWidget = ({
   incidentStatusType,
   title,
   name,
   chartFilter,
+  redirectPath,
 }: IncidentTypeAreaChartWidgetProps) => {
   const [isChartLoading, setIsChartLoading] = useState(true);
   const [chartData, setChartData] = useState<CustomAreaChartData[]>([]);
 
-  const totalValue = useMemo(
-    () =>
-      chartData.reduce((acc, curr) => {
-        return acc + curr.count;
-      }, 0),
-    [chartData]
-  );
+  const totalValueElement = useMemo(() => {
+    const totalValue = chartData.reduce((acc, curr) => {
+      return acc + curr.count;
+    }, 0);
+
+    return (
+      <Typography.Paragraph
+        className="font-medium text-xl m-b-0 chart-total-count-value-link"
+        data-testid="total-value">
+        {redirectPath ? (
+          <Link className="font-medium text-xl" to={redirectPath}>
+            {totalValue}
+          </Link>
+        ) : (
+          totalValue
+        )}
+      </Typography.Paragraph>
+    );
+  }, [chartData]);
 
   const getCountOfIncidentStatus = async () => {
     setIsChartLoading(true);
@@ -64,12 +79,7 @@ const IncidentTypeAreaChartWidget = ({
       <Typography.Paragraph className="text-xs text-grey-muted">
         {title}
       </Typography.Paragraph>
-      <Typography.Paragraph
-        className="font-medium text-xl m-b-0"
-        data-testid="total-value">
-        {totalValue}
-      </Typography.Paragraph>
-
+      {totalValueElement}
       <CustomAreaChart data={chartData} name={name} />
     </Card>
   );

diff --git a/...uality/ChartWidgets/StatusByDimensionCardWidget/StatusByDimensionCardWidget.component.tsx b/...uality/ChartWidgets/StatusByDimensionCardWidget/StatusByDimensionCardWidget.component.tsx
@@ -10,16 +10,20 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Card, Col, Divider, Row } from 'antd';
+import { Card, Col, Row } from 'antd';
+import classNames from 'classnames';
 import { isUndefined } from 'lodash';
-import React, { Fragment, useEffect, useMemo, useState } from 'react';
+import QueryString from 'qs';
+import React, { useEffect, useMemo, useState } from 'react';
 import { DataQualityReport } from '../../../../generated/tests/dataQualityReport';
 import { DataQualityDimensions } from '../../../../generated/tests/testDefinition';
+import { DataQualityPageTabs } from '../../../../pages/DataQuality/DataQualityPage.interface';
 import { fetchTestCaseSummaryByDimension } from '../../../../rest/dataQualityDashboardAPI';
 import {
   getDimensionIcon,
   transformToTestCaseStatusByDimension,
 } from '../../../../utils/DataQuality/DataQualityUtils';
+import { getDataQualityPagePath } from '../../../../utils/RouterUtils';
 import { PieChartWidgetCommonProps } from '../../DataQuality.interface';
 import StatusByDimensionWidget from '../StatusCardWidget/StatusCardWidget.component';
 import './status-by-dimension-card-widget.less';
@@ -64,26 +68,31 @@ const StatusByDimensionCardWidget = ({
 
   return (
     <Card
+      bodyStyle={{ padding: '40px 14px' }}
       className="status-by-dimension-card-widget-container"
       loading={isDqByDimensionLoading}>
-      <Row justify="space-between">
+      <Row gutter={[24, 40]}>
         {dqDimensions.map((dimension, index) => (
-          <Fragment key={dimension.title}>
-            <Col>
-              <StatusByDimensionWidget
-                icon={getDimensionIcon(
-                  dimension.title as DataQualityDimensions
-                )}
-                key={dimension.title}
-                statusData={dimension}
-              />
-            </Col>
-            {dqDimensions.length - 1 > index && (
-              <Col>
-                <Divider className="dimension-widget-divider" type="vertical" />
-              </Col>
-            )}
-          </Fragment>
+          <Col
+            className={classNames({
+              'dimension-widget-divider': (index + 1) % 4 !== 0,
+            })}
+            key={dimension.title}
+            span={6}>
+            <StatusByDimensionWidget
+              icon={getDimensionIcon(dimension.title as DataQualityDimensions)}
+              key={dimension.title}
+              redirectPath={{
+                pathname: getDataQualityPagePath(
+                  DataQualityPageTabs.TEST_CASES
+                ),
+                search: QueryString.stringify({
+                  dataQualityDimension: dimension.title,
+                }),
+              }}
+              statusData={dimension}
+            />
+          </Col>
         ))}
       </Row>
     </Card>

diff --git a/...DataQuality/ChartWidgets/StatusByDimensionCardWidget/status-by-dimension-card-widget.less b/...DataQuality/ChartWidgets/StatusByDimensionCardWidget/status-by-dimension-card-widget.less
@@ -10,9 +10,11 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
+
+@import url('../../../../styles/variables.less');
+
 .status-by-dimension-card-widget-container {
   .dimension-widget-divider {
-    height: 100%;
-    margin-top: 4px;
+    border-right: @global-border;
   }
 }
diff --git a/...i/src/components/DataQuality/ChartWidgets/StatusCardWidget/StatusCardWidget.component.tsx b/...i/src/components/DataQuality/ChartWidgets/StatusCardWidget/StatusCardWidget.component.tsx
@@ -13,11 +13,17 @@
 import { Space, Tooltip, Typography } from 'antd';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 import { PRIMARY_COLOR } from '../../../../constants/Color.constants';
+import '../chart-widgets.less';
 import './status-card-widget.less';
 import { StatusCardWidgetProps } from './StatusCardWidget.interface';
 
-const StatusDataWidget = ({ statusData, icon }: StatusCardWidgetProps) => {
+const StatusDataWidget = ({
+  statusData,
+  icon,
+  redirectPath,
+}: StatusCardWidgetProps) => {
   const IconSvg = icon;
   const { t } = useTranslation();
 
@@ -46,9 +52,15 @@ const StatusDataWidget = ({ statusData, icon }: StatusCardWidgetProps) => {
         </Typography.Text>
       </div>
       <Typography.Text
-        className="font-medium text-md"
+        className="font-medium text-md chart-total-count-value-link"
         data-testid="total-value">
-        {statusData.total}
+        {redirectPath ? (
+          <Link className="font-medium text-xl" to={redirectPath}>
+            {statusData.total}
+          </Link>
+        ) : (
+          statusData.total
+        )}
       </Typography.Text>
       <div className="d-flex items-center gap-3">
         {Object.entries(countCard).map(([key, value]) => (

diff --git a/...ui/src/components/DataQuality/ChartWidgets/StatusCardWidget/StatusCardWidget.interface.ts b/...ui/src/components/DataQuality/ChartWidgets/StatusCardWidget/StatusCardWidget.interface.ts
@@ -1,3 +1,5 @@
+import { LinkProps } from 'react-router-dom';
+
 /*
  *  Copyright 2024 Collate.
  *  Licensed under the Apache License, Version 2.0 (the "License");
@@ -21,4 +23,5 @@ export type StatusData = {
 export interface StatusCardWidgetProps {
   statusData: StatusData;
   icon: SvgComponent;
+  redirectPath?: LinkProps['to'];
 }
diff --git a/...ty/ChartWidgets/TestCaseStatusAreaChartWidget/TestCaseStatusAreaChartWidget.component.tsx b/...ty/ChartWidgets/TestCaseStatusAreaChartWidget/TestCaseStatusAreaChartWidget.component.tsx
@@ -14,10 +14,12 @@ import { Card, Typography } from 'antd';
 import classNames from 'classnames';
 import { toLower } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
+import { Link } from 'react-router-dom';
 import { fetchTestCaseStatusMetricsByDays } from '../../../../rest/dataQualityDashboardAPI';
 import { CustomAreaChartData } from '../../../Visualisations/Chart/Chart.interface';
 import CustomAreaChart from '../../../Visualisations/Chart/CustomAreaChart.component';
 import { TestCaseStatusAreaChartWidgetProps } from '../../DataQuality.interface';
+import '../chart-widgets.less';
 import './test-case-status-area-chart-widget.less';
 
 const TestCaseStatusAreaChartWidget = ({
@@ -27,14 +29,29 @@ const TestCaseStatusAreaChartWidget = ({
   chartColorScheme,
   chartFilter,
   height,
+  redirectPath,
 }: TestCaseStatusAreaChartWidgetProps) => {
   const [chartData, setChartData] = useState<CustomAreaChartData[]>([]);
   const [isChartLoading, setIsChartLoading] = useState(true);
 
-  const totalValue = useMemo(() => {
-    return chartData.reduce((acc, curr) => {
+  const totalValueElement = useMemo(() => {
+    const totalValue = chartData.reduce((acc, curr) => {
       return acc + curr.count;
     }, 0);
+
+    return (
+      <Typography.Paragraph
+        className="font-medium text-xl m-b-0 chart-total-count-value-link"
+        data-testid="total-value">
+        {redirectPath ? (
+          <Link className="font-medium text-xl" to={redirectPath}>
+            {totalValue}
+          </Link>
+        ) : (
+          totalValue
+        )}
+      </Typography.Paragraph>
+    );
   }, [chartData]);
 
   const getTestCaseStatusMetrics = async () => {
@@ -74,11 +91,7 @@ const TestCaseStatusAreaChartWidget = ({
       <Typography.Paragraph className="text-xs text-grey-muted">
         {title}
       </Typography.Paragraph>
-      <Typography.Paragraph
-        className="font-medium text-xl m-b-0"
-        data-testid="total-value">
-        {totalValue}
-      </Typography.Paragraph>
+      {totalValueElement}
 
       <CustomAreaChart
         colorScheme={chartColorScheme}

diff --git a/...adata-ui/src/main/resources/ui/src/components/DataQuality/ChartWidgets/chart-widgets.less b/...adata-ui/src/main/resources/ui/src/components/DataQuality/ChartWidgets/chart-widgets.less
@@ -0,0 +1,19 @@
+/*
+ *  Copyright 2024 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.
+ */
+.chart-total-count-value-link {
+  &.ant-typography a {
+    font-size: 1.25rem /* 20px */;
+    line-height: 1.75rem /* 28px */;
+    font-weight: 500;
+  }
+}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/DataQuality.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/DataQuality.interface.ts
@@ -42,13 +42,15 @@ export type TestCaseSearchParams = {
   tier?: string;
   tags?: string;
   serviceName?: string;
+  dataQualityDimension?: string;
 };
 
 export interface IncidentTypeAreaChartWidgetProps {
   title: string;
   incidentStatusType: TestCaseResolutionStatusTypes;
   name: string;
   chartFilter?: DataQualityDashboardChartFilters;
+  redirectPath?: LinkProps['to'];
 }
 
 export interface IncidentTimeChartWidgetProps {
@@ -57,6 +59,7 @@ export interface IncidentTimeChartWidgetProps {
   name: string;
   chartFilter?: DataQualityDashboardChartFilters;
   height?: number;
+  redirectPath?: LinkProps['to'];
 }
 export interface TestCaseStatusAreaChartWidgetProps {
   title: string;
@@ -65,6 +68,7 @@ export interface TestCaseStatusAreaChartWidgetProps {
   chartColorScheme?: AreaChartColorScheme;
   chartFilter?: DataQualityDashboardChartFilters;
   height?: number;
+  redirectPath?: LinkProps['to'];
 }
 
 export interface PieChartWidgetCommonProps {

diff --git a/...ata-ui/src/main/resources/ui/src/components/DataQuality/TestCases/TestCases.component.tsx b/...ata-ui/src/main/resources/ui/src/components/DataQuality/TestCases/TestCases.component.tsx
@@ -48,6 +48,7 @@ import {
 } from '../../../constants/constants';
 import {
   DEFAULT_SORT_ORDER,
+  TEST_CASE_DIMENSIONS_OPTION,
   TEST_CASE_FILTERS,
   TEST_CASE_PLATFORM_OPTION,
   TEST_CASE_STATUS_OPTION,
@@ -621,6 +622,20 @@ export const TestCases = () => {
                 />
               </Form.Item>
             )}
+            {selectedFilter.includes(TEST_CASE_FILTERS.dimension) && (
+              <Form.Item
+                className="m-0 w-80"
+                label={t('label.dimension')}
+                name="dataQualityDimension">
+                <Select
+                  allowClear
+                  showSearch
+                  data-testid="dimension-select-filter"
+                  options={TEST_CASE_DIMENSIONS_OPTION}
+                  placeholder={t('label.dimension')}
+                />
+              </Form.Item>
+            )}
           </Space>
         </Form>
       </Col>