@truedat/dq 4.43.0 → 4.43.3

package/src/components/RuleImplementationResultTabs.js

@@ -0,0 +1,113 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { Menu } from "semantic-ui-react";
+import { Link, withRouter } from "react-router-dom";
+import { compose } from "redux";
+import { connect } from "react-redux";
+import { FormattedMessage } from "react-intl";
+import {
+  RULE_IMPLEMENTATION_RESULT_DETAILS,
+  RULE_IMPLEMENTATION_RESULT_SEGMENTS_RESULTS,
+  //TODO: change name route
+  RULE_IMPLEMENTATION_RESULT_DETAILS_REMEDIATION_PLAN,
+  linkTo,
+} from "@truedat/core/routes";
+
+import RuleResultRemediationLoader from "./RuleResultRemediationLoader";
+const TemplatesLoader = React.lazy(() =>
+  import("@truedat/df/templates/components/TemplatesLoader")
+);
+
+export const RuleImplementationResultTabs = ({
+  rule,
+  ruleImplementation,
+  ruleResult,
+  match,
+  authCreateRemediation,
+  templates,
+}) => {
+  const renderSegmentResult = () => {
+    return ruleResult.has_segments ? (
+      <Menu.Item
+        active={match.path === RULE_IMPLEMENTATION_RESULT_SEGMENTS_RESULTS}
+        as={Link}
+        to={linkTo.RULE_IMPLEMENTATION_RESULT_SEGMENTS_RESULTS({
+          id: rule.id,
+          implementation_id: ruleImplementation.id,
+          rule_result_id: ruleResult.id,
+        })}
+      >
+        <FormattedMessage id="tabs.dq.ruleImplementationResult.segmentResult" />
+      </Menu.Item>
+    ) : null;
+  };
+
+  const renderRemediationPlan = () => {
+    const canCreateRemediation = authCreateRemediation && !_.isEmpty(templates);
+    const renderCondition = ruleResult.has_remediation || canCreateRemediation;
+
+    return renderCondition ? (
+      <Menu.Item
+        active={
+          match.path === RULE_IMPLEMENTATION_RESULT_DETAILS_REMEDIATION_PLAN
+        }
+        as={Link}
+        to={linkTo.RULE_IMPLEMENTATION_RESULT_DETAILS_REMEDIATION_PLAN({
+          id: rule.id,
+          implementation_id: ruleImplementation.id,
+          rule_result_id: ruleResult.id,
+        })}
+      >
+        <FormattedMessage id="tabs.dq.ruleImplementationResult.remediationPlan" />
+      </Menu.Item>
+    ) : null;
+  };
+
+  return _.isEmpty(ruleImplementation) || _.isEmpty(rule) ? null : (
+    <>
+      <RuleResultRemediationLoader propRuleResultId={ruleResult.id} />
+      <TemplatesLoader scope="remediation" />
+      <Menu attached="top" pointing secondary tabular>
+        <Menu.Item
+          active={match.path === RULE_IMPLEMENTATION_RESULT_DETAILS}
+          as={Link}
+          to={linkTo.RULE_IMPLEMENTATION_RESULT_DETAILS({
+            id: rule.id,
+            implementation_id: ruleImplementation.id,
+            rule_result_id: ruleResult.id,
+          })}
+        >
+          <FormattedMessage id="tabs.dq.ruleImplementationResult.info" />
+        </Menu.Item>
+        {renderSegmentResult()}
+        {renderRemediationPlan()}
+      </Menu>
+    </>
+  );
+};
+
+RuleImplementationResultTabs.propTypes = {
+  rule: PropTypes.object,
+  ruleResult: PropTypes.object,
+  ruleImplementation: PropTypes.object,
+  match: PropTypes.object,
+  authCreateRemediation: PropTypes.bool,
+  templates: PropTypes.array,
+};
+
+const mapStateToProps = (
+  { rule, ruleImplementation, remediationActions, templates },
+  ownProps
+) => ({
+  rule,
+  ruleResult: ownProps.ruleResult,
+  ruleImplementation,
+  authCreateRemediation: _.has("create")(remediationActions),
+  templates,
+});
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps)
+)(RuleImplementationResultTabs);

package/src/components/RuleImplementationResults.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useEffect } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { connect } from "react-redux";

package/src/components/RuleResult.js

@@ -0,0 +1,108 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { connect } from "react-redux";
+import { useParams } from "react-router-dom";
+import { Header, Table, Icon } from "semantic-ui-react";
+import { DateTime } from "@truedat/core/components";
+import { FormattedMessage } from "react-intl";
+import { selectColor } from "../functions/selectors";
+import RuleImplementationResultTabs from "./RuleImplementationResultTabs";
+
+const GeneralInformation = ({ ruleImplementation, ruleResult }) => {
+  const { formatMessage, formatNumber: _formatNumber } = useIntl();
+  const formatNumber = (num) => (_.isNil(num) ? num : _formatNumber(num));
+  return (
+    <>
+      <Table.Row>
+        <Table.Cell>
+          {formatMessage({ id: "ruleResult.props.quality" })}
+        </Table.Cell>
+        <Table.Cell>
+          <Icon
+            name="circle"
+            color={selectColor({ ...ruleImplementation, ...ruleResult })}
+          />
+          {`${parseFloat(ruleResult.result)} %`}
+        </Table.Cell>
+      </Table.Row>
+
+      <Table.Row>
+        <Table.Cell>
+          {formatMessage({ id: "ruleResult.props.date" })}
+        </Table.Cell>
+        <Table.Cell>
+          <DateTime value={ruleResult.date} />
+        </Table.Cell>
+      </Table.Row>
+
+      <Table.Row>
+        <Table.Cell>
+          {formatMessage({ id: "ruleResult.props.records" })}
+        </Table.Cell>
+        <Table.Cell>{formatNumber(ruleResult.records)}</Table.Cell>
+      </Table.Row>
+
+      <Table.Row>
+        <Table.Cell>
+          {formatMessage({ id: "ruleResult.props.errors" })}
+        </Table.Cell>
+        <Table.Cell>{formatNumber(ruleResult.errors)}</Table.Cell>
+      </Table.Row>
+    </>
+  );
+};
+
+GeneralInformation.propTypes = {
+  ruleImplementation: PropTypes.object,
+  ruleResult: PropTypes.object,
+};
+
+export const RuleResult = ({ ruleImplementation, ruleResultId, children }) => {
+  const { rule_result_id: paramsId } = useParams();
+
+  const resultId = _.defaultTo(_.toNumber(paramsId))(ruleResultId);
+
+  const ruleResult = _.find(_.propEq("id", resultId))(
+    ruleImplementation.results
+  );
+
+  const renderRuleResult = () => {
+    return (
+      <>
+        <Header as="h2">
+          <Icon circular name="chart pie" />
+          <Header.Content>
+            <FormattedMessage id="ruleResult" />
+          </Header.Content>
+        </Header>
+        <RuleImplementationResultTabs ruleResult={ruleResult} />
+        {children}
+      </>
+    );
+  };
+
+  return _.isEmpty(ruleResult) ? null : renderRuleResult();
+};
+
+RuleResult.propTypes = {
+  ruleImplementation: PropTypes.object,
+  ruleResultId: PropTypes.number,
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(PropTypes.node),
+  ]),
+};
+
+const mapStateToProps = (
+  { ruleImplementation, remediationLoading, templatesLoading },
+  ownProps
+) => ({
+  ruleImplementation,
+  remediationLoading,
+  templatesLoading,
+  ...ownProps,
+});
+
+export default connect(mapStateToProps)(RuleResult);

package/src/components/{ExecutionDetails.js → RuleResultDetails.js}

@@ -4,11 +4,9 @@ import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { connect } from "react-redux";
 import { useParams } from "react-router-dom";
-import { Header, Table, Icon } from "semantic-ui-react";
+import { Table, Icon } from "semantic-ui-react";
 import { DateTime } from "@truedat/core/components";
-import { FormattedMessage } from "react-intl";
 import { selectColor } from "../functions/selectors";
-import RemediationPlan from "./RemediationPlan";
 import "../styles/executionDetails.less";
 
 const GeneralInformation = ({ ruleImplementation, ruleResult }) => {
@@ -84,11 +82,7 @@ const DetailRow = ({ details }) => {
 
 DetailRow.propTypes = { details: PropTypes.object };
 
-const TemplatesLoader = React.lazy(() =>
-  import("@truedat/df/templates/components/TemplatesLoader")
-);
-
-export const ExecutionDetails = ({ ruleImplementation, ruleResultId }) => {
+export const RuleResultDetails = ({ ruleImplementation, ruleResultId }) => {
   const { formatMessage } = useIntl();
   const { rule_result_id: paramsId } = useParams();
 
@@ -100,12 +94,6 @@ export const ExecutionDetails = ({ ruleImplementation, ruleResultId }) => {
 
   return _.isEmpty(ruleResult) ? null : (
     <>
-      <Header as="h2">
-        <Icon circular name="chart pie" />
-        <Header.Content>
-          <FormattedMessage id="ruleResult" />
-        </Header.Content>
-      </Header>
       <Table className="implementation-results medium">
         <Table.Header>
           <Table.Row>
@@ -141,16 +129,11 @@ export const ExecutionDetails = ({ ruleImplementation, ruleResultId }) => {
           </>
         ) : null}
       </Table>
-      <TemplatesLoader scope="remediation" />
-      <RemediationPlan
-        className="execution-details-remediation"
-        latestResultId={resultId}
-      />
     </>
   );
 };
 
-ExecutionDetails.propTypes = {
+RuleResultDetails.propTypes = {
   ruleImplementation: PropTypes.object,
   ruleResultId: PropTypes.number,
 };
@@ -159,4 +142,4 @@ const mapStateToProps = ({ ruleImplementation }) => ({
   ruleImplementation,
 });
 
-export default connect(mapStateToProps)(ExecutionDetails);
+export default connect(mapStateToProps)(RuleResultDetails);

package/src/components/RuleResultRemediationLoader.js

@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+
+import { fetchRemediation, clearRemediation } from "../routines";
+
+export const RuleResultRemediationLoader = ({
+  fetchRemediation,
+  clearRemediation,
+  propRuleResultId,
+}) => {
+  const [ruleResultId, setRuleResultId] = useState(null);
+
+  const { rule_result_id: paramsRuleResultId } = useParams();
+
+  useEffect(() => {
+    setRuleResultId(paramsRuleResultId || propRuleResultId);
+  }, [paramsRuleResultId, propRuleResultId]);
+
+  useEffect(() => {
+    ruleResultId && fetchRemediation({ rule_result_id: ruleResultId });
+  }, [fetchRemediation, ruleResultId]);
+
+  useEffect(
+    () => () => {
+      clearRemediation();
+    },
+    [clearRemediation]
+  );
+
+  return null;
+};
+
+RuleResultRemediationLoader.propTypes = {
+  clearRemediation: PropTypes.func,
+  fetchRemediation: PropTypes.func,
+  propRuleResultId: PropTypes.number,
+};
+
+export default connect(null, {
+  fetchRemediation,
+  clearRemediation,
+})(RuleResultRemediationLoader);

package/src/components/RuleResultRemediations.js

@@ -0,0 +1,47 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { useParams } from "react-router-dom";
+import RemediationPlan from "./RemediationPlan";
+import "../styles/executionDetails.less";
+
+import RuleResultRemediationLoader from "./RuleResultRemediationLoader";
+const TemplatesLoader = React.lazy(() =>
+  import("@truedat/df/templates/components/TemplatesLoader")
+);
+
+export const RuleResultRemediations = ({
+  ruleImplementation,
+  ruleResultId,
+}) => {
+  const { rule_result_id: paramsId } = useParams();
+
+  const resultId = _.defaultTo(_.toNumber(paramsId))(ruleResultId);
+
+  const ruleResult = _.find(_.propEq("id", resultId))(
+    ruleImplementation.results
+  );
+
+  return _.isEmpty(ruleResult) ? null : (
+    <>
+      <RuleResultRemediationLoader propRuleResultId={ruleResult.id} />
+      <TemplatesLoader scope="remediation" />
+      <RemediationPlan
+        className="execution-details-remediation"
+        latestResultId={resultId}
+      />
+    </>
+  );
+};
+
+RuleResultRemediations.propTypes = {
+  ruleImplementation: PropTypes.object,
+  ruleResultId: PropTypes.number,
+};
+
+const mapStateToProps = ({ ruleImplementation }) => ({
+  ruleImplementation,
+});
+
+export default connect(mapStateToProps)(RuleResultRemediations);

package/src/components/RuleResultRow.js

@@ -37,9 +37,6 @@ export const RuleResultRow = ({
           })}
         >
           <DateTime className="rule-result-date" value={ruleResult.date} />
-          {!_.isEmpty(ruleResult.details) ? (
-            <Icon circular inverted name="info" color="blue" size="small" />
-          ) : null}
           {ruleResult.has_remediation ? (
             <Icon circular inverted name="rain" color="blue" size="small" />
           ) : null}

package/src/components/RuleResultSegmentRow.js

@@ -0,0 +1,83 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { useIntl } from "react-intl";
+import { Table, Icon } from "semantic-ui-react";
+import { ConfirmModal } from "@truedat/core/components";
+import { columnDecorator } from "@truedat/core/services";
+import { selectColor } from "../functions/selectors";
+import { deleteRuleResult } from "../routines";
+import "../styles/ruleResultRow.less";
+
+export const RuleResultSegmentRow = ({
+  deleteRuleResult,
+  optionalColumns,
+  segmentResult,
+  customColumns,
+  isAdmin,
+  ruleImplementation,
+  rule,
+}) => {
+  const { formatMessage, formatNumber: _formatNumber } = useIntl();
+  const formatNumber = (num) => (_.isNil(num) ? num : _formatNumber(num));
+
+  return (
+    <Table.Row>
+      <Table.Cell>{_.prop("name")(segmentResult.params)}</Table.Cell>
+      <Table.Cell>
+        <Icon
+          name="circle"
+          color={selectColor({ ...ruleImplementation, ...segmentResult })}
+        />
+        {`${parseFloat(segmentResult.result)} %`}
+      </Table.Cell>
+      {_.includes("records")(optionalColumns) ? (
+        <Table.Cell>{formatNumber(segmentResult.records)}</Table.Cell>
+      ) : null}
+      {_.includes("errors")(optionalColumns) ? (
+        <Table.Cell>{formatNumber(segmentResult.errors)}</Table.Cell>
+      ) : null}
+      {customColumns?.map((column, index) => (
+        <Table.Cell key={index}>
+          {columnDecorator(column)(segmentResult)}
+        </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: segmentResult.id,
+                rule_id: rule.id,
+                rule_implementation_id: ruleImplementation.id,
+              })
+            }
+          />
+        </Table.Cell>
+      ) : null}
+    </Table.Row>
+  );
+};
+
+RuleResultSegmentRow.propTypes = {
+  customColumns: PropTypes.array,
+  deleteRuleResult: PropTypes.func,
+  isAdmin: PropTypes.bool,
+  optionalColumns: PropTypes.array,
+  rule: PropTypes.object,
+  ruleImplementation: PropTypes.object,
+  ruleResult: PropTypes.object,
+};
+
+const mapDispatchToProps = { deleteRuleResult };
+
+export default connect(null, mapDispatchToProps)(RuleResultSegmentRow);

package/src/components/RuleResultSegments.js

@@ -0,0 +1,102 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { connect } from "react-redux";
+import { Table, Message, Divider } from "semantic-ui-react";
+import { columnDecorator } from "@truedat/core/services";
+import RuleResultSegmentRow from "./RuleResultSegmentRow";
+
+export const getCustomColumnsWithData = (segmentResults, columns) =>
+  _.filter((column) =>
+    _.any(_.flow(columnDecorator(column), _.negate(_.isEmpty)))(segmentResults)
+  )(columns);
+
+export const RuleResultSegments = ({
+  rule,
+  isAdmin,
+  ruleImplementation,
+  segmentResults,
+}) => {
+  const { formatMessage } = useIntl();
+  const customColumns = [];
+  const optionalColumns = ["errors", "records", "details"];
+
+  if (_.isEmpty(rule) || _.isEmpty(segmentResults)) return null;
+
+  return (
+    <>
+      {_.isEmpty(segmentResults) ? (
+        <Message
+          style={{ marginTop: "14px" }}
+          header={formatMessage({
+            id: "rule.ruleImplementation.results.empty",
+          })}
+        />
+      ) : (
+        <Table className="implementation-results small">
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell
+                content={formatMessage({ id: "ruleResultSegment.props.name" })}
+              />
+              <Table.HeaderCell
+                content={formatMessage({ id: "ruleResult.props.quality" })}
+              />
+              {_.includes("records")(optionalColumns) ? (
+                <Table.HeaderCell
+                  content={formatMessage({ id: "ruleResult.props.records" })}
+                />
+              ) : null}
+              {_.includes("errors")(optionalColumns) ? (
+                <Table.HeaderCell
+                  content={formatMessage({ id: "ruleResult.props.errors" })}
+                />
+              ) : null}
+              {customColumns.map((column, index) => (
+                <Table.HeaderCell
+                  key={index}
+                  content={formatMessage({
+                    id: `ruleResult.props.${column.name}`,
+                    defaultMessage: column.name,
+                  })}
+                />
+              ))}
+              {<Table.HeaderCell />}
+              {isAdmin ? <Table.HeaderCell /> : null}
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {segmentResults.map((result, i) => (
+              <RuleResultSegmentRow
+                key={i}
+                optionalColumns={optionalColumns}
+                segmentResult={result}
+                customColumns={customColumns}
+                isAdmin={isAdmin}
+                ruleImplementation={ruleImplementation}
+                rule={rule}
+              />
+            ))}
+          </Table.Body>
+        </Table>
+      )}
+    </>
+  );
+};
+
+RuleResultSegments.propTypes = {
+  ruleImplementation: PropTypes.object,
+  rule: PropTypes.object,
+  segmentResults: PropTypes.object,
+  isAdmin: PropTypes.bool,
+};
+
+const mapStateToProps = (state) => ({
+  rule: state.rule,
+  ruleImplementation: state.ruleImplementation,
+  segmentResults: state.segmentResults,
+  isAdmin: state.authentication.role === "admin",
+});
+
+export default connect(mapStateToProps)(RuleResultSegments);

package/src/components/RuleResultSegmentsLoader.js

@@ -0,0 +1,34 @@
+import { useEffect } from "react";
+import { useParams } from "react-router-dom";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { clearSegmentResults, fetchSegmentResults } from "../routines";
+
+export const RuleResultSegmentsLoader = ({
+  clearSegmentResults,
+  fetchSegmentResults,
+}) => {
+  const { rule_result_id } = useParams();
+  useEffect(() => {
+    fetchSegmentResults({ rule_result_id });
+  }, [rule_result_id, fetchSegmentResults]);
+
+  useEffect(() => {
+    return () => {
+      clearSegmentResults();
+    };
+  }, [clearSegmentResults]);
+
+  return null;
+};
+
+RuleResultSegmentsLoader.propTypes = {
+  clearSegmentResults: PropTypes.func,
+  fetchSegmentResults: PropTypes.func,
+  rule_result_id: PropTypes.number,
+};
+
+export default connect(null, {
+  clearSegmentResults,
+  fetchSegmentResults,
+})(RuleResultSegmentsLoader);

package/src/components/RuleResultsRoutes.js

@@ -0,0 +1,73 @@
+import React from "react";
+import { Route } from "react-router-dom";
+import { Segment } from "semantic-ui-react";
+import {
+  RULE_IMPLEMENTATION_RESULT_DETAILS,
+  RULE_IMPLEMENTATION_RESULT_SEGMENTS_RESULTS,
+  RULE_IMPLEMENTATION_RESULT_DETAILS_REMEDIATION_PLAN,
+} from "@truedat/core/routes";
+
+import RuleResult from "./RuleResult";
+import RuleResultDetails from "./RuleResultDetails";
+import RuleResultSegments from "./RuleResultSegments";
+import RuleResultRemediations from "./RuleResultRemediations";
+import RuleCrumbs from "./RuleCrumbs";
+import RuleResultSegmentsLoader from "./RuleResultSegmentsLoader";
+
+export const RuleResultsRoutes = ({}) => {
+  return (
+    <>
+      <Route
+        exact
+        path={RULE_IMPLEMENTATION_RESULT_DETAILS}
+        render={() => (
+          <>
+            <Segment>
+              <>
+                <RuleCrumbs />
+                <RuleResult>
+                  <RuleResultDetails />
+                </RuleResult>
+              </>
+            </Segment>
+          </>
+        )}
+      />
+      <Route
+        exact
+        path={RULE_IMPLEMENTATION_RESULT_SEGMENTS_RESULTS}
+        render={() => (
+          <>
+            <Segment>
+              <>
+                <RuleCrumbs />
+                <RuleResult>
+                  <RuleResultSegmentsLoader />
+                  <RuleResultSegments />
+                </RuleResult>
+              </>
+            </Segment>
+          </>
+        )}
+      />
+      <Route
+        exact
+        path={RULE_IMPLEMENTATION_RESULT_DETAILS_REMEDIATION_PLAN}
+        render={() => (
+          <>
+            <Segment>
+              <>
+                <RuleCrumbs />
+                <RuleResult>
+                  <RuleResultRemediations />
+                </RuleResult>
+              </>
+            </Segment>
+          </>
+        )}
+      />
+    </>
+  );
+};
+
+export default RuleResultsRoutes;