Refactor: Add TestCaseStatusAreaChartWidget component and related int…

…erfaces
open-metadata · Oct 18, 2024 · 826b2ce · 826b2ce
1 parent 4f97c4f
commit 826b2ce
Show file tree

Hide file tree

Showing 7 changed files with 172 additions and 21 deletions.
diff --git a/...ty/ChartWidgets/TestCaseStatusAreaChartWidget/TestCaseStatusAreaChartWidget.component.tsx b/...ty/ChartWidgets/TestCaseStatusAreaChartWidget/TestCaseStatusAreaChartWidget.component.tsx
@@ -0,0 +1,84 @@
+/*
+ *  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.
+ */
+import { Card, Typography } from 'antd';
+import classNames from 'classnames';
+import { toLower } from 'lodash';
+import React, { useEffect, useMemo, useState } from 'react';
+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 './test-case-status-area-chart-widget.less';
+
+const TestCaseStatusAreaChartWidget = ({
+  testCaseStatus,
+  name,
+  title,
+  chartColorScheme,
+}: TestCaseStatusAreaChartWidgetProps) => {
+  const [chartData, setChartData] = useState<CustomAreaChartData[]>([]);
+  const [isChartLoading, setIsChartLoading] = useState(true);
+
+  const totalValue = useMemo(() => {
+    return chartData.reduce((acc, curr) => {
+      return acc + curr.count;
+    }, 0);
+  }, [chartData]);
+
+  const getTestCaseStatusMetrics = async () => {
+    setIsChartLoading(true);
+    try {
+      const { data } = await fetchTestCaseStatusMetricsByDays(testCaseStatus);
+      const updatedData = data.map((cur) => {
+        return {
+          timestamp: +cur.timestamp,
+          count: +cur['testCase.fullyQualifiedName'],
+        };
+      });
+
+      setChartData(updatedData);
+    } catch (error) {
+      setChartData([]);
+    } finally {
+      setIsChartLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getTestCaseStatusMetrics();
+  }, []);
+
+  return (
+    <Card
+      className={classNames(
+        'test-case-area-chart-widget-container',
+        toLower(testCaseStatus)
+      )}
+      loading={isChartLoading}>
+      <Typography.Paragraph className="text-xs text-grey-muted">
+        {title}
+      </Typography.Paragraph>
+      <Typography.Paragraph className="font-medium text-xl m-b-0">
+        {totalValue}
+      </Typography.Paragraph>
+
+      <CustomAreaChart
+        colorScheme={chartColorScheme}
+        data={chartData}
+        name={name}
+      />
+    </Card>
+  );
+};
+
+export default TestCaseStatusAreaChartWidget;
diff --git a/...uality/ChartWidgets/TestCaseStatusAreaChartWidget/test-case-status-area-chart-widget.less b/...uality/ChartWidgets/TestCaseStatusAreaChartWidget/test-case-status-area-chart-widget.less
@@ -0,0 +1,25 @@
+/*
+ *  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.
+ */
+@import (reference) url('../../../../styles/variables.less');
+
+.test-case-area-chart-widget-container {
+  &.success {
+    background-color: @green-8;
+  }
+  &.failed {
+    background-color: @red-8;
+  }
+  &.aborted {
+    background-color: @yellow-8;
+  }
+}
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
@@ -3,6 +3,7 @@ import { TestCaseStatus } from '../../generated/tests/testCase';
 import { TestCaseResolutionStatusTypes } from '../../generated/tests/testCaseResolutionStatus';
 import { TestPlatform } from '../../generated/tests/testDefinition';
 import { TestCaseType } from '../../rest/testAPI';
+import { AreaChartColorScheme } from '../Visualisations/Chart/Chart.interface';
 
 /*
  *  Copyright 2023 Collate.
@@ -52,3 +53,9 @@ export interface IncidentTimeChartWidgetProps {
   incidentMetricType: IncidentTimeMetricsType;
   name: string;
 }
+export interface TestCaseStatusAreaChartWidgetProps {
+  title: string;
+  testCaseStatus: TestCaseStatus;
+  name: string;
+  chartColorScheme?: AreaChartColorScheme;
+}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Visualisations/Chart/Chart.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/Visualisations/Chart/Chart.interface.ts
@@ -41,14 +41,16 @@ export type CustomAreaChartData = {
   timestamp: number;
   count: number;
 };
+
+export type AreaChartColorScheme = {
+  gradientStartColor?: string;
+  gradientEndColor?: string;
+  strokeColor?: string;
+};
 export interface CustomAreaChartProps {
   data: CustomAreaChartData[];
   name: string;
   height?: number;
   valueFormatter?: (value: number) => string;
-  colorScheme?: {
-    gradientStartColor?: string;
-    gradientEndColor?: string;
-    strokeColor?: string;
-  };
+  colorScheme?: AreaChartColorScheme;
 }
diff --git a/...i/src/main/resources/ui/src/components/Visualisations/Chart/CustomAreaChart.component.tsx b/...i/src/main/resources/ui/src/components/Visualisations/Chart/CustomAreaChart.component.tsx
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 import { Card, Divider, Typography } from 'antd';
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   Area,
   AreaChart,
@@ -57,6 +57,26 @@ const CustomAreaChart = ({
 
     return null;
   };
+  const gradientId = `${name}-splitColor`;
+
+  const gradientArea = useMemo(() => {
+    return (
+      <defs>
+        <linearGradient id={gradientId} x1="0" x2="0" y1="0" y2="1">
+          <stop
+            offset="0%"
+            stopColor={colorScheme?.gradientStartColor ?? BLUE_2}
+            stopOpacity="0.7"
+          />
+          <stop
+            offset="100%"
+            stopColor={colorScheme?.gradientEndColor ?? WHITE_COLOR}
+            stopOpacity="0.2"
+          />
+        </linearGradient>
+      </defs>
+    );
+  }, [colorScheme, gradientId]);
 
   return (
     <ResponsiveContainer
@@ -73,25 +93,12 @@ const CustomAreaChart = ({
         }}>
         <Tooltip content={<CustomTooltip />} />
 
-        <defs>
-          <linearGradient id="splitColor" x1="0" x2="0" y1="0" y2="1">
-            <stop
-              offset="0%"
-              stopColor={colorScheme?.gradientStartColor ?? BLUE_2}
-              stopOpacity="0.7"
-            />
-            <stop
-              offset="100%"
-              stopColor={colorScheme?.gradientEndColor ?? WHITE_COLOR}
-              stopOpacity="0.2"
-            />
-          </linearGradient>
-        </defs>
+        {gradientArea}
         <Area
           connectNulls
           dataKey="count"
           dot={false}
-          fill="url(#splitColor)"
+          fill={`url(#${gradientId})`}
           isAnimationActive={false}
           stroke={colorScheme?.strokeColor ?? PRIMARY_COLOR}
           strokeWidth={2}

diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/Chart.constants.ts b/openmetadata-ui/src/main/resources/ui/src/constants/Chart.constants.ts
@@ -10,4 +10,27 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
+
+import { AreaChartColorScheme } from '../components/Visualisations/Chart/Chart.interface';
+import { GREEN_3, RED_3, YELLOW_2 } from './Color.constants';
+import { WHITE_COLOR } from './constants';
+
 export const CHART_BASE_SIZE = 300;
+
+export const ABORTED_CHART_COLOR_SCHEME: AreaChartColorScheme = {
+  gradientEndColor: WHITE_COLOR,
+  gradientStartColor: YELLOW_2,
+  strokeColor: YELLOW_2,
+};
+
+export const FAILED_CHART_COLOR_SCHEME: AreaChartColorScheme = {
+  gradientEndColor: WHITE_COLOR,
+  gradientStartColor: RED_3,
+  strokeColor: RED_3,
+};
+
+export const SUCCESS_CHART_COLOR_SCHEME: AreaChartColorScheme = {
+  gradientEndColor: WHITE_COLOR,
+  gradientStartColor: GREEN_3,
+  strokeColor: GREEN_3,
+};
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/variables.less b/openmetadata-ui/src/main/resources/ui/src/styles/variables.less
@@ -27,13 +27,15 @@
 @green-5: #91ffd8;
 @green-6: #effffb;
 @green-7: #00b871;
+@green-8: #f8fefb;
 @yellow-1: #fbf2db;
 @yellow-2: #ffbe0e;
 @yellow-3: #ffbe0e1a;
 @yellow-4: #ffd978;
 @yellow-5: #fff8e6;
 @yellow-6: #c18100;
 @yellow-7: #e7b85d;
+@yellow-8: #fffdf8;
 @error-light-color: #ff9a8e40;
 @failed-color: #cb2431;
 @red-1: #cb2531;
@@ -43,6 +45,7 @@
 @red-5: #ffc2c2;
 @red-6: #fcf0f1;
 @red-7: #cf1800;
+@red-8: #fffbfa;
 @purple-1: #f2edfd;
 @purple-2: #7147e8;
 @purple-3: #a2a1ff;