Merged PR 2965: able comparison improvements

- table comparison improvements - table comparison styling improvements - table comparison reference list improvements - opdating checks before comparing tables - making sure that checksUi are defined
dqops · Aug 27, 2024 · 8695646 · 8695646
2 parents 3323ced + 0d3e009
commit 8695646
Show file tree

Hide file tree

Showing 15 changed files with 161 additions and 194 deletions.
diff --git a/dqops/src/main/frontend/src/components/Connection/TableView/ResultBox.tsx b/dqops/src/main/frontend/src/components/Connection/TableView/ResultBox.tsx
@@ -1,10 +1,10 @@
+import clsx from 'clsx';
 import React from 'react';
 import {
   CompareThresholdsModel,
   ComparisonCheckResultModel,
   TableComparisonModel
 } from '../../../api';
-import clsx from 'clsx';
 import Input from '../../Input';
 import { CheckName } from './ResultPanel';
 
@@ -142,28 +142,28 @@ const ResultBox = ({
         </div>
       </td>
       {secondBool && (
-        <>
-          <td className="flex justify-between w-2/3 ">
-            <th className="text-sm font-light">Results:</th>
+        <div className="mt-1">
+          <td className="flex justify-between w-[100%] ">
+            <th className="text-sm font-bold">Results</th>
           </td>
-          <td className="flex justify-between w-2/3 ">
-            <th className="text-xs font-light">Valid:</th>
+          <td className="flex justify-between w-[100%] ">
+            <th className="text-xs font-light">Correct results:</th>
             {item.valid_results}
           </td>
-          <td className="flex justify-between w-2/3 ">
+          <td className="flex justify-between w-[100%] ">
+            <th className="text-xs font-light">Warning:</th>
+            {item.warnings}
+          </td>
+          <td className="flex justify-between w-[100%] ">
             <th className="text-xs font-light">Errors:</th>
             {item.errors}
           </td>
-          <td className="flex justify-between w-2/3 ">
-            <th className="text-xs font-light">Fatal:</th>
+          <td className="flex justify-between w-[100%] ">
+            <th className="text-xs font-light">Fatal errors:</th>
             {item.fatals}
           </td>
-          <td className="flex justify-between w-2/3 ">
-            <th className="text-xs font-light">Warning:</th>
-            {item.warnings}
-          </td>
           <td>
-            <a className="group relative text-blue-300 underline whitespace-normal cursor-pointer text-xs">
+            <a className="group relative text-teal-500 underline whitespace-normal cursor-pointer text-xs">
               Show mismatches
               <section
                 className="hidden group-hover:grid grid-cols-1 absolute px-1 gap-y-1 rounded-md border border-gray-400 z-50 bg-white text-black no-underline font-light"
@@ -186,7 +186,7 @@ const ResultBox = ({
               </section>
             </a>
           </td>
-        </>
+        </div>
       )}
     </tr>
   );

diff --git a/dqops/src/main/frontend/src/components/Connection/TableView/SelectGroupColumnsTable.tsx b/dqops/src/main/frontend/src/components/Connection/TableView/SelectGroupColumnsTable.tsx
@@ -59,7 +59,7 @@ export const SelectGroupColumnsTable = ({
   const message = `The last known distinct count statistics for this column detected more than ${dqoLimit} rows or the statistics were not collected for this table yet`;
 
   return (
-    <SectionWrapper className={clsx(className, 'text-sm')} title={title}>
+    <SectionWrapper className={clsx(className, 'text-sm mt-2.5')} title={title}>
       <table className="w-full">
         <tbody>
           {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((item, index) => {

diff --git a/...ts/Connection/TableView/TableComparison/CreatingComparison/FirstLineNameConfiguration.tsx b/...ts/Connection/TableView/TableComparison/CreatingComparison/FirstLineNameConfiguration.tsx
@@ -224,7 +224,7 @@ export default function FirstLineNameConfiguration({
         </div>
         <Input
           className={clsx(
-            'flex-1 w-64',
+            'flex-1 !w-72',
             editConfigurationParameters.name &&
               editConfigurationParameters?.name?.length > 0
               ? ''
@@ -241,6 +241,14 @@ export default function FirstLineNameConfiguration({
         </div>
       ) : null}
       <div className="flex justify-center items-center gap-x-2">
+        <Button
+          label="Back"
+          color="primary"
+          variant="text"
+          className="px-0 !mr-2"
+          leftIcon={<SvgIcon name="chevron-left" className="w-4 h-4 mr-2" />}
+          onClick={onBack}
+        />
         <Button
           onClick={onCreate}
           label="Save"
@@ -251,14 +259,6 @@ export default function FirstLineNameConfiguration({
             userProfile.can_manage_data_sources !== true
           }
         />
-        <Button
-          label="Back"
-          color="primary"
-          variant="text"
-          className="px-0"
-          leftIcon={<SvgIcon name="chevron-left" className="w-4 h-4 mr-2" />}
-          onClick={onBack}
-        />
       </div>
     </div>
   );

diff --git a/...mponents/Connection/TableView/TableComparison/CreatingComparison/SelectColumnGrouping.tsx b/...mponents/Connection/TableView/TableComparison/CreatingComparison/SelectColumnGrouping.tsx
@@ -177,7 +177,7 @@ export default function SelectColumnGrouping({
                 onClick={() => onChangeEditColumnGrouping(false)}
               />
             ) : (
-              'Column' + item
+              'Column ' + item
             )}
           </div>
         ))}

diff --git a/...ntend/src/components/Connection/TableView/TableComparison/EditProfilingReferenceTable.tsx b/...ntend/src/components/Connection/TableView/TableComparison/EditProfilingReferenceTable.tsx
@@ -97,12 +97,11 @@ export const EditProfilingReferenceTable = ({
   };
 
   const onUpdateChecksUI = (
-    checksUI: any,
     type: 'row' | 'column',
     disabled?: boolean,
     severity?: TSeverityValues
   ) => {
-    const checks = checksUI.categories.find(
+    const checks = checksUI?.categories?.find(
       (item: any) =>
         String(item.category) ===
         `comparisons/${
@@ -120,6 +119,7 @@ export const EditProfilingReferenceTable = ({
         String(item.check_name).includes('column')
       );
     }
+
     if (disabled !== undefined) {
       selectedCheck.configured = disabled;
       if (type === 'row') {
@@ -374,6 +374,27 @@ export const EditProfilingReferenceTable = ({
   };
 
   const compareTables = async () => {
+    const runChecks = async () => {
+      setIsUpdated(false);
+      try {
+        const res = await JobApiClient.runChecks(undefined, false, undefined, {
+          check_search_filters: categoryCheck
+            ? categoryCheck?.run_checks_job_template
+            : {
+                connection: connection,
+                fullTableName: schema + '.' + table,
+                tableComparisonName:
+                  reference?.table_comparison_configuration_name,
+                enabled: true,
+                checkCategory: 'comparisons',
+                checkType: checkTypes as CheckSearchFiltersCheckTypeEnum
+              }
+        });
+        setJobId(res.data?.jobId?.jobId);
+      } catch (err) {
+        console.error(err);
+      }
+    };
     onUpdate(
       connection,
       schema,
@@ -382,27 +403,9 @@ export const EditProfilingReferenceTable = ({
       timePartitioned,
       reference,
       handleChange,
-      checksUI
+      checksUI,
+      runChecks
     );
-    setIsUpdated(false);
-    try {
-      const res = await JobApiClient.runChecks(undefined, false, undefined, {
-        check_search_filters: categoryCheck
-          ? categoryCheck?.run_checks_job_template
-          : {
-              connection: connection,
-              fullTableName: schema + '.' + table,
-              tableComparisonName:
-                reference?.table_comparison_configuration_name,
-              enabled: true,
-              checkCategory: 'comparisons',
-              checkType: checkTypes as CheckSearchFiltersCheckTypeEnum
-            }
-      });
-      setJobId(res.data?.jobId?.jobId);
-    } catch (err) {
-      console.error(err);
-    }
   };
 
   const deleteData = async (params: { [key: string]: string | boolean }) => {
@@ -559,6 +562,7 @@ export const EditProfilingReferenceTable = ({
       </div>
     );
   }
+  console.log(checksUI);
 
   return (
     <div className="text-sm">
@@ -623,7 +627,6 @@ export const EditProfilingReferenceTable = ({
                 }
                 showRowCount={showRowCount}
                 onUpdateChecksUI={onUpdateChecksUI}
-                checksUI={checksUI}
                 setIsUpdated={setIsUpdated}
                 tableComparisonResults={tableComparisonResults}
                 showColumnCount={showColumnCount}
@@ -641,7 +644,6 @@ export const EditProfilingReferenceTable = ({
                           onChange={onChangeCompareRowCount}
                           reference={reference}
                           onUpdateChecksUI={onUpdateChecksUI}
-                          checksUI={checksUI}
                           type="row"
                         />
                       ) : (
@@ -663,7 +665,6 @@ export const EditProfilingReferenceTable = ({
                             onChange={onChangeCompareColumnCount}
                             reference={reference}
                             onUpdateChecksUI={onUpdateChecksUI}
-                            checksUI={checksUI}
                             type="column"
                           />
                         ) : (

diff --git a/...omponents/Connection/TableView/TableComparison/EditingComparison/EditingViewFirstLine.tsx b/...omponents/Connection/TableView/TableComparison/EditingComparison/EditingViewFirstLine.tsx
@@ -84,12 +84,20 @@ export default function EditingViewFirstLine({
     <div>
       <div className="flex items-center justify-between my-4">
         <div className="flex items-center justify-center gap-x-5">
-          <div className="font-bold text-center">
+          <div className="text-center">
             Table comparison configuration name:{' '}
           </div>
-          <span className="font-bold">{editConfigurationParameters.name}</span>
+          <span>{editConfigurationParameters.name}</span>
         </div>
         <div className="flex justify-center items-center gap-x-2">
+          <Button
+            label="Back"
+            color="primary"
+            variant="text"
+            className="px-0 mr-2"
+            leftIcon={<SvgIcon name="chevron-left" className="w-4 h-4 mr-2" />}
+            onClick={onBack}
+          />
           <Button
             color="primary"
             variant="contained"
@@ -122,14 +130,6 @@ export default function EditingViewFirstLine({
               userProfile.can_manage_data_sources !== true
             }
           />
-          <Button
-            label="Back"
-            color="primary"
-            variant="text"
-            className="px-0"
-            leftIcon={<SvgIcon name="chevron-left" className="w-4 h-4 mr-2" />}
-            onClick={onBack}
-          />
         </div>
       </div>
       <DeleteOnlyDataDialog

diff --git a/...s/Connection/TableView/TableComparison/EditingComparison/SelectColumnGroupingOverlook.tsx b/...s/Connection/TableView/TableComparison/EditingComparison/SelectColumnGroupingOverlook.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import SvgIcon from '../../../../SvgIcon';
 import { TableComparisonGroupingColumnPairModel } from '../../../../../api';
+import SvgIcon from '../../../../SvgIcon';
 
 type TSelecColumnGroupingOverlook = {
   onChangeEditColumnGrouping: (open: boolean) => void;
@@ -21,29 +21,15 @@ export default function SelecColumnGroupingOverlook({
         Data grouping on compared table:{' '}
         {dataGroupingArray
           ?.map((item) => item?.compared_table_column_name ?? '')
-          .map((x, index) =>
-            index !==
-            (dataGroupingArray?.map(
-              (item) => item?.compared_table_column_name ?? ''
-            ).length ?? 9) -
-              1
-              ? x + ','
-              : x
-          )}
+          .filter(Boolean)
+          .join(', ')}
       </div>
       <div className="pl-8">
         Data grouping on reference table:{' '}
         {dataGroupingArray
           ?.map((item) => item?.reference_table_column_name ?? '')
-          .map((x, index) =>
-            index !==
-            (dataGroupingArray?.map(
-              (item) => item?.reference_table_column_name ?? ''
-            ).length ?? 9) -
-              1
-              ? x + ','
-              : x
-          )}
+          .filter(Boolean)
+          .join(', ')}
       </div>
     </div>
   );

diff --git a/...ntend/src/components/Connection/TableView/TableComparison/ProfilingReferenceTableList.tsx b/...ntend/src/components/Connection/TableView/TableComparison/ProfilingReferenceTableList.tsx
@@ -27,36 +27,54 @@ export const ProfilingReferenceTableList = ({
       <table className="mb-4 w-full">
         <thead>
           {references.length !== 0 ? (
-            <tr>
+            <tr className="border-b border-gray-100">
               <th className="text-left py-2">
                 Table comparison configuration name
               </th>
               <th className="text-left px-2 py-2">Reference connection</th>
               <th className="text-left px-2 py-2">Reference schema</th>
               <th className="text-left px-2 py-2">Reference table name</th>
+              <th className="text-left px-2 py-2">
+                <div className="flex items-center justify-start ml-6.5">
+                  Action
+                </div>
+              </th>
             </tr>
           ) : null}
         </thead>
+        <div className="w-full h-2"></div>
         <tbody>
           {references &&
             references.map((reference, index) => (
               <tr key={index}>
                 <Button
                   variant="text"
-                  color="primary"
-                  className="text-sm px-0.5"
+                  className="text-sm px-0.5 underline"
                   label={reference.table_comparison_configuration_name}
                   onClick={() => selectReference(reference)}
                 />
                 <td className="px-2">{reference.reference_connection}</td>
                 <td className="px-2">
                   {reference.reference_table?.schema_name}
                 </td>
-                <td className="px-2">
+                <td className="px-2 max-w-50 truncate">
                   {reference.reference_table?.table_name}
                 </td>
                 <td className="px-2">
                   {' '}
+                  <IconButton
+                    size="sm"
+                    className="group bg-teal-500 ml-3 !shadow-none hover:!shadow-none hover:bg-[#028770]"
+                    onClick={() => {
+                      selectReference(reference);
+                    }}
+                    disabled={canUserCreateTableComparison === false}
+                  >
+                    <SvgIcon name="edit" className="w-4" />
+                    <span className="hidden absolute right-0 bottom-6 p-1 normal-case bg-black text-white rounded-md group-hover:block whitespace-nowrap">
+                      Edit table comparison
+                    </span>
+                  </IconButton>
                   <IconButton
                     size="sm"
                     className="group bg-teal-500 ml-3 !shadow-none hover:!shadow-none hover:bg-[#028770]"
@@ -69,7 +87,6 @@ export const ProfilingReferenceTableList = ({
                     disabled={canUserCreateTableComparison === false}
                   >
                     <SvgIcon name="delete" className="w-4" />
-
                     <span className="hidden absolute right-0 bottom-6 p-1 normal-case bg-black text-white rounded-md group-hover:block whitespace-nowrap">
                       Delete table comparison
                     </span>
-Original file line number
+Diff line change
@@ Expand Up / @@ -177,7 +177,7 @@ export default function SelectColumnGrouping({ @@
                     onClick={() => onChangeEditColumnGrouping(false)}
                   />
                 ) : (
-                  'Column' + item
+                  'Column ' + item
                 )}
               </div>
             ))}
@@ Expand Down @@