@truedat/dq 4.46.12 → 4.47.2

package/src/components/RuleResultRow.js

@@ -3,8 +3,9 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { useIntl } from "react-intl";
+import { useHistory } from "react-router-dom";
 import { Link } from "react-router-dom";
-import { Table, Icon } from "semantic-ui-react";
+import { Table, Icon, Label } from "semantic-ui-react";
 import { ConfirmModal, DateTime } from "@truedat/core/components";
 import { columnDecorator } from "@truedat/core/services";
 import { linkTo } from "@truedat/core/routes";
@@ -13,91 +14,118 @@ import { deleteRuleResult } from "../routines";
 import "../styles/ruleResultRow.less";
 
 export const RuleResultRow = ({
+  active = false,
   deleteRuleResult,
   optionalColumns,
   ruleResult,
   customColumns,
   isAdmin,
   ruleImplementation,
+  tagLabel,
 }) => {
   const { formatMessage, formatNumber: _formatNumber } = useIntl();
   const formatNumber = (num) => (_.isNil(num) ? num : _formatNumber(num));
+  const history = useHistory();
 
   return (
-    <Table.Row>
-      <Table.Cell>
-        <Link
-          to={linkTo.IMPLEMENTATION_RESULT_DETAILS({
-            implementation_id: ruleImplementation.id,
-            ruleImplementation,
-            rule_result_id: ruleResult.id,
-          })}
-        >
-          <DateTime className="rule-result-date" value={ruleResult.date} />
-          {ruleResult.has_segments ? (
-            <Icon
-              circular
-              inverted
-              name="grid layout"
-              color="blue"
-              size="small"
-            />
-          ) : null}
-
-          {ruleResult.has_remediation ? (
-            <Icon circular inverted name="rain" color="blue" size="small" />
-          ) : null}
-        </Link>
-      </Table.Cell>
-      <Table.Cell>
-        <Icon
-          name="circle"
-          color={selectColor({ ...ruleImplementation, ...ruleResult })}
-        />
-        {`${parseFloat(ruleResult.result)} %`}
-      </Table.Cell>
-      {_.includes("records")(optionalColumns) ? (
-        <Table.Cell>{formatNumber(ruleResult.records)}</Table.Cell>
-      ) : null}
-      {_.includes("errors")(optionalColumns) ? (
-        <Table.Cell>{formatNumber(ruleResult.errors)}</Table.Cell>
+    <>
+      {tagLabel ? (
+        <Table.Row>
+          <Table.Cell colSpan={8}>
+            <Label
+              as="a"
+              active={active}
+              ribbon
+              onClick={() =>
+                history.push(
+                  linkTo.IMPLEMENTATION({
+                    implementation_id: ruleImplementation.id,
+                  })
+                )
+              }
+            >
+              {tagLabel}
+            </Label>
+          </Table.Cell>
+        </Table.Row>
       ) : null}
-      {customColumns?.map((column, index) => (
-        <Table.Cell key={index}>
-          {columnDecorator(column)(ruleResult)}
-        </Table.Cell>
-      ))}
-      {isAdmin ? (
-        <Table.Cell onClick={(e) => e.stopPropagation()}>
-          <ConfirmModal
-            icon="trash"
-            trigger={<Icon name="trash alternate outline" color="red" />}
-            header={formatMessage({
-              id: "rule_result.actions.delete.confirmation.header",
-            })}
-            content={formatMessage({
-              id: "rule_result.actions.delete.confirmation.content",
+      <Table.Row warning={active}>
+        <Table.Cell>
+          <Link
+            to={linkTo.IMPLEMENTATION_RESULT_DETAILS({
+              implementation_id: ruleImplementation.id,
+              ruleImplementation,
+              rule_result_id: ruleResult.id,
             })}
-            onConfirm={() =>
-              deleteRuleResult({
-                id: ruleResult.id,
-                rule_implementation_id: ruleImplementation.id,
-              })
-            }
+          >
+            <DateTime className="rule-result-date" value={ruleResult.date} />
+            {ruleResult.has_segments ? (
+              <Icon
+                circular
+                inverted
+                name="grid layout"
+                color="blue"
+                size="small"
+              />
+            ) : null}
+
+            {ruleResult.has_remediation ? (
+              <Icon circular inverted name="rain" color="blue" size="small" />
+            ) : null}
+          </Link>
+        </Table.Cell>
+        <Table.Cell>
+          <Icon
+            name="circle"
+            color={selectColor({ ...ruleImplementation, ...ruleResult })}
           />
+          {`${parseFloat(ruleResult.result)} %`}
         </Table.Cell>
-      ) : null}
-    </Table.Row>
+        {_.includes("records")(optionalColumns) ? (
+          <Table.Cell>{formatNumber(ruleResult.records)}</Table.Cell>
+        ) : null}
+        {_.includes("errors")(optionalColumns) ? (
+          <Table.Cell>{formatNumber(ruleResult.errors)}</Table.Cell>
+        ) : null}
+        {customColumns?.map((column, index) => (
+          <Table.Cell key={index}>
+            {columnDecorator(column)(ruleResult)}
+          </Table.Cell>
+        ))}
+        {isAdmin ? (
+          <Table.Cell onClick={(e) => e.stopPropagation()}>
+            <ConfirmModal
+              icon="trash"
+              trigger={<Icon name="trash alternate outline" color="red" />}
+              header={formatMessage({
+                id: "rule_result.actions.delete.confirmation.header",
+              })}
+              content={formatMessage({
+                id: "rule_result.actions.delete.confirmation.content",
+              })}
+              onConfirm={() =>
+                deleteRuleResult({
+                  id: ruleResult.id,
+                  rule_implementation_id: ruleImplementation.id,
+                })
+              }
+            />
+          </Table.Cell>
+        ) : null}
+      </Table.Row>
+    </>
   );
 };
 
 RuleResultRow.propTypes = {
+  active: PropTypes.bool,
   customColumns: PropTypes.array,
   deleteRuleResult: PropTypes.func,
   isAdmin: PropTypes.bool,
   optionalColumns: PropTypes.array,
   ruleImplementation: PropTypes.object,
   ruleResult: PropTypes.object,
+  tagLabel: PropTypes.string,
 };
 
 const mapDispatchToProps = { deleteRuleResult };

package/src/components/RuleResultsRoutes.js

@@ -1,11 +1,14 @@
 import React from "react";
-import { Route } from "react-router-dom";
+import { Route, useParams } from "react-router-dom";
 import { Segment } from "semantic-ui-react";
+import { useQuery } from "@apollo/client";
+import { Loading } from "@truedat/core/components";
 import {
   IMPLEMENTATION_RESULT_DETAILS,
   IMPLEMENTATION_RESULT_SEGMENTS_RESULTS,
   IMPLEMENTATION_RESULT_REMEDIATION_PLAN,
 } from "@truedat/core/routes";
+import { IMPLEMENTATION_RESULT } from "../api/queries";
 import RuleResult from "./RuleResult";
 import RuleResultDetails from "./RuleResultDetails";
 import RuleResultSegments from "./RuleResultSegments";
@@ -13,46 +16,55 @@ import RuleResultRemediations from "./RuleResultRemediations";
 import ImplementationCrumbs from "./ImplementationCrumbs";
 import RuleResultSegmentsLoader from "./RuleResultSegmentsLoader";
 
-export const RuleResultsRoutes = ({}) => (
-  <>
-    <Route
-      exact
-      path={IMPLEMENTATION_RESULT_DETAILS}
-      render={() => (
-        <Segment>
-          <ImplementationCrumbs />
-          <RuleResult>
-            <RuleResultDetails />
-          </RuleResult>
-        </Segment>
-      )}
-    />
-    <Route
-      exact
-      path={IMPLEMENTATION_RESULT_SEGMENTS_RESULTS}
-      render={() => (
-        <Segment>
-          <ImplementationCrumbs />
-          <RuleResult>
-            <RuleResultSegmentsLoader />
-            <RuleResultSegments />
-          </RuleResult>
-        </Segment>
-      )}
-    />
-    <Route
-      exact
-      path={IMPLEMENTATION_RESULT_REMEDIATION_PLAN}
-      render={() => (
-        <Segment>
-          <ImplementationCrumbs />
-          <RuleResult>
-            <RuleResultRemediations />
-          </RuleResult>
-        </Segment>
-      )}
-    />
-  </>
-);
+export const RuleResultsRoutes = ({}) => {
+  const { rule_result_id } = useParams();
+  const { loading, error, data } = useQuery(IMPLEMENTATION_RESULT, {
+    variables: { id: rule_result_id },
+  });
+  if (error) return null;
+  if (loading) return <Loading />;
+  const result = data?.implementationResult;
+  return (
+    <>
+      <Route
+        exact
+        path={IMPLEMENTATION_RESULT_DETAILS}
+        render={() => (
+          <Segment>
+            <ImplementationCrumbs ruleResult={result} />
+            <RuleResult ruleResult={result}>
+              <RuleResultDetails ruleResult={result} />
+            </RuleResult>
+          </Segment>
+        )}
+      />
+      <Route
+        exact
+        path={IMPLEMENTATION_RESULT_SEGMENTS_RESULTS}
+        render={() => (
+          <Segment>
+            <ImplementationCrumbs ruleResult={result} />
+            <RuleResult ruleResult={result}>
+              <RuleResultSegmentsLoader />
+              <RuleResultSegments />
+            </RuleResult>
+          </Segment>
+        )}
+      />
+      <Route
+        exact
+        path={IMPLEMENTATION_RESULT_REMEDIATION_PLAN}
+        render={() => (
+          <Segment>
+            <ImplementationCrumbs ruleResult={result} />
+            <RuleResult ruleResult={result}>
+              <RuleResultRemediations ruleResult={result} />
+            </RuleResult>
+          </Segment>
+        )}
+      />
+    </>
+  );
+};
 
 export default RuleResultsRoutes;

package/src/components/__tests__/RuleImplementationProperties.spec.js

@@ -14,13 +14,8 @@ describe("<RuleImplementationProperties />", () => {
         id: 10,
         executable: true,
         name: "NameRule2",
-        system: "SYS",
         type: "integer_values_range",
-        system: {
-          external_id: "Microstrategy",
-          id: 1,
-          name: "Microstrategy",
-        },
+        status: "published",
         system_params: {
           table: { name: "aaaxxx" },
           column: {
@@ -61,14 +56,8 @@ describe("<RuleImplementationProperties />", () => {
         id: 10,
         executable: true,
         name: "NameRule2",
-        system: "SYS",
         type: "integer_values_range",
         status: "published",
-        system: {
-          external_id: "Microstrategy",
-          id: 1,
-          name: "Microstrategy",
-        },
         system_params: {
           table: { name: "aaaxxx" },
           column: {

package/src/components/__tests__/RuleImplementationResults.spec.js

@@ -1,35 +1,99 @@
 import _ from "lodash/fp";
 import React from "react";
-import { shallow } from "enzyme";
+import { render } from "@truedat/test/render";
 import { intl } from "@truedat/test/intl-stub";
 import {
   RuleImplementationResults,
   getCustomColumnsWithData,
 } from "../RuleImplementationResults";
 
+const renderOpts = {
+  messages: {
+    en: {
+      "ruleResult.props.date": "date",
+      "ruleResult.props.quality": "quality",
+      "ruleResult.props.records": "records",
+      "ruleResult.props.errors": "errors",
+      "quality.error": "errors",
+    },
+  },
+};
+
 // workaround for enzyme issue with React.useContext
 // see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
 jest.spyOn(React, "useContext").mockImplementation(() => intl);
 
 describe("<RuleImplementationResults />", () => {
-  const rule = {
-    result_type: "percentage",
-    minimum: 50,
-    goal: 100,
-  };
   const ruleImplementation = {
-    results: [{ foo: "bar" }],
+    id: 1,
+    implementation_key: "default_key",
+    versions: [
+      {
+        implementation_key: "default_key",
+        id: 1,
+        goal: "20.0",
+        minimum: "10.0",
+        results: [
+          {
+            errors: 2,
+            has_remediation: false,
+            has_segments: true,
+            id: "66577",
+            records: 31,
+            result: "93.54",
+            result_type: "percentage",
+          },
+          {
+            errors: 2,
+            has_remediation: false,
+            has_segments: true,
+            id: "66578",
+            records: 31,
+            result: "93.54",
+            result_type: "percentage",
+          },
+        ],
+      },
+      {
+        implementation_key: "key_2",
+        id: 2,
+        goal: "20.0",
+        minimum: "10.0",
+        results: [
+          {
+            errors: 2,
+            has_remediation: false,
+            has_segments: true,
+            id: "66579",
+            records: 31,
+            result: "93.54",
+            result_type: "percentage",
+          },
+          {
+            errors: 2,
+            has_remediation: false,
+            has_segments: true,
+            id: "66580",
+            records: 31,
+            result: "93.54",
+            result_type: "percentage",
+          },
+        ],
+      },
+    ],
   };
-  const customColumns = [{ foo: "bar", name: "foo" }];
+  const ruleResultsColumns = [{ foo: "bar", name: "foo" }];
   const props = {
-    rule,
     ruleImplementation,
-    customColumns,
+    ruleResultsColumns,
   };
 
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<RuleImplementationResults {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(
+      <RuleImplementationResults {...props} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
   });
 });
 

package/src/components/__tests__/RuleResultDetails.spec.js

@@ -1,3 +1,4 @@
+import _ from "lodash/fp";
 import React, { Suspense } from "react";
 import { render } from "@truedat/test/render";
 import messages from "@truedat/dq/messages";
@@ -18,13 +19,33 @@ const renderOpts = {
   },
 };
 
+const commonProps = {
+  ruleImplementation: {
+    id: 1,
+    implementation_key: "key",
+    minimum: 10,
+    goal: 20,
+    result_type: "percentage",
+  },
+  ruleResult: {
+    id: 100,
+    result: "93.54",
+    params: {},
+    details: {},
+    records: 31,
+    date: "2022-06-24",
+    errors: 2,
+    has_remediation: true,
+    has_segments: true,
+  },
+};
+
 describe("<RuleResultDetails>", () => {
   it("matches the latest snapshot", () => {
-    const props = {
-      ruleImplementation: {
-        results: [{ foo: "bar", id: 100, details: { Query: "ImZvbyI=" } }],
-      },
-    };
+    const props = _.update("ruleResult.details", () => ({ Query: "ImZvbyI=" }))(
+      commonProps
+    );
+
     const { container } = render(
       <Suspense fallback={null}>
         <RuleResultDetails {...props} />
@@ -35,20 +56,11 @@ describe("<RuleResultDetails>", () => {
   });
 
   it("decodes details with base64 prefix", () => {
-    const props = {
-      ruleImplementation: {
-        results: [
-          {
-            foo: "bar",
-            id: 100,
-            details: {
-              value: "valor",
-              base64_test: "QmFzZTY0X3ZhbHVl", //base64 for Base64_value
-            },
-          },
-        ],
-      },
-    };
+    const props = _.update("ruleResult.details", () => ({
+      value: "valor",
+      base64_test: "QmFzZTY0X3ZhbHVl", //base64 for Base64_value
+    }))(commonProps);
+
     const { getByText } = render(
       <Suspense fallback={null}>
         <RuleResultDetails {...props} />
@@ -60,14 +72,9 @@ describe("<RuleResultDetails>", () => {
   });
 
   it("without details", () => {
-    const propsWithoutDetails = {
-      ruleImplementation: {
-        results: [{ foo: "bar", id: 100 }],
-      },
-    };
     const { container } = render(
       <Suspense fallback={null}>
-        <RuleResultDetails {...propsWithoutDetails} />
+        <RuleResultDetails {...commonProps} />
       </Suspense>,
       renderOpts
     );

package/src/components/__tests__/RuleResultRemediations.spec.js

@@ -20,30 +20,22 @@ describe("<RuleResultRemediations />", () => {
   it("renders remediation plan if has rule result", () => {
     const props = {
       ruleImplementation: {
-        id: 23,
+        id: 852,
         minimum: 1,
         goal: 10,
         result_type: "percentage",
-        results: [
-          {
-            date: "2021-06-03T05:44:00Z",
-            details: {},
-            id: 65599,
-            implementation_id: 852,
-            result: "80.00",
-            result_type: "percentage",
-          },
-          {
-            date: "2021-06-03T05:44:00Z",
-            details: {},
-            id: 65600,
-            implementation_id: 852,
-            result: "80.00",
-            result_type: "percentage",
-          },
-        ],
       },
-      ruleResultId: 65599,
+      ruleResult: {
+        id: 65599,
+        result: "93.54",
+        params: {},
+        details: {},
+        records: 31,
+        date: "2022-06-24",
+        errors: 2,
+        has_remediation: true,
+        has_segments: true,
+      },
     };
 
     const { container } = render(

package/src/components/__tests__/RuleResultRoutes.spec.js

@@ -1,12 +1,84 @@
 import React from "react";
 import { render } from "@truedat/test/render";
+import {
+  IMPLEMENTATION_RESULT_DETAILS,
+  IMPLEMENTATION_RESULT_SEGMENTS_RESULTS,
+  IMPLEMENTATION_RESULT_REMEDIATION_PLAN,
+} from "@truedat/core/routes";
+import { IMPLEMENTATION_RESULT } from "../../api/queries";
 import { RuleResultsRoutes } from "../RuleResultsRoutes";
 
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useParams: () => ({ rule_result_id: 1 }),
+}));
+
 describe("<RuleResultsRoutes>", () => {
-  const props = {};
+  const implementationResult = {
+    implementationResult: {
+      date: "2022-06-24",
+      errors: 2,
+      has_remediation: true,
+      has_segments: true,
+      id: 1,
+      records: 31,
+      details: {},
+      result: "93.54",
+      params: {},
+      result_type: "percentage",
+    },
+  };
+
+  const mock = {
+    request: { query: IMPLEMENTATION_RESULT, variables: { id: 1 } },
+    result: { data: implementationResult },
+  };
+  const key = "mi implementación molona";
+  const state = {
+    ruleImplementation: {
+      id: 2,
+      implementation_key: key,
+    },
+    authentication: { role: "admin" },
+  };
+
+  const renderOpts = { mocks: [mock], state };
+
+  it("matches the latest loading snapshot", () => {
+    const routes = [IMPLEMENTATION_RESULT_DETAILS];
+    const { container } = render(<RuleResultsRoutes />, {
+      ...renderOpts,
+      routes,
+    });
+    expect(container).toMatchSnapshot();
+  });
 
-  it("matches the latest snapshot", () => {
-    const { container } = render(<RuleResultsRoutes {...props} />, {});
+  it("matches the latest success details route snapshot", async () => {
+    const routes = [IMPLEMENTATION_RESULT_DETAILS];
+    const { container, findByText } = render(<RuleResultsRoutes />, {
+      ...renderOpts,
+      routes,
+    });
+    await findByText(key);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest success segments route snapshot", async () => {
+    const routes = [IMPLEMENTATION_RESULT_SEGMENTS_RESULTS];
+    const { container, findByText } = render(<RuleResultsRoutes />, {
+      ...renderOpts,
+      routes,
+    });
+    await findByText(key);
+    expect(container).toMatchSnapshot();
+  });
+  it("matches the latest success remediation route snapshot", async () => {
+    const routes = [IMPLEMENTATION_RESULT_REMEDIATION_PLAN];
+    const { container, findByText } = render(<RuleResultsRoutes />, {
+      ...renderOpts,
+      routes,
+    });
+    await findByText(key);
     expect(container).toMatchSnapshot();
   });
 });