@truedat/dq 4.33.10 → 4.35.2

package/src/components/InformationSummary.js

@@ -0,0 +1,68 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { FormattedMessage } from "react-intl";
+import { Header, Icon, Segment, List } from "semantic-ui-react";
+
+export default function InformationSummary({ ruleImplementation }) {
+  return (
+    <>
+      <Header as="h3">
+        <Icon name="info" size="small" />
+        <Header.Content>
+          <FormattedMessage id="ruleImplementationForm.step.information" />
+        </Header.Content>
+      </Header>
+      <Segment>
+        <List>
+          <List.Item>
+            <List.Header>
+              <FormattedMessage id="quality.thresholds" />
+            </List.Header>
+            <List.Content>
+              <List.Description>
+                <FormattedMessage
+                  id={`ruleImplementations.props.result_type.${ruleImplementation.result_type}`}
+                />
+              </List.Description>
+            </List.Content>
+          </List.Item>
+          <List.Item>
+            <Icon name="circle" color="yellow" />
+            <List.Content>
+              <List.Header>
+                <FormattedMessage id="quality.threshold" />
+              </List.Header>
+              <List.Description>
+                {ruleImplementation.minimum &&
+                  `${ruleImplementation.minimum} ${
+                    ruleImplementation.result_type !== "errors_number"
+                      ? "%"
+                      : ""
+                  }`}
+              </List.Description>
+            </List.Content>
+          </List.Item>
+          <List.Item>
+            <Icon name="circle" color="green" />
+            <List.Content>
+              <List.Header>
+                <FormattedMessage id="quality.goal" />
+              </List.Header>
+              <List.Description>
+                {ruleImplementation.goal &&
+                  `${ruleImplementation.goal} ${
+                    ruleImplementation.result_type !== "errors_number"
+                      ? "%"
+                      : ""
+                  }`}
+              </List.Description>
+            </List.Content>
+          </List.Item>
+        </List>
+      </Segment>
+    </>
+  );
+}
+InformationSummary.propTypes = {
+  ruleImplementation: PropTypes.object.isRequired,
+};

package/src/components/NewRuleImplementation.js

@@ -220,6 +220,9 @@ export const NewRuleImplementation = ({
           },
           dfName: _.prop("df_name")(ruleImplementationProps),
           dfContent: ruleImplementationProps.df_content,
+          result_type: ruleImplementationProps.result_type,
+          minimum: ruleImplementationProps.minimum,
+          goal: ruleImplementationProps.goal,
         }
       : {
           executable: true,
@@ -237,6 +240,9 @@ export const NewRuleImplementation = ({
           },
           dfName: "",
           dfContent: {},
+          result_type: "percentage",
+          minimum: null,
+          goal: null,
         }
   );
 
@@ -343,6 +349,9 @@ export const NewRuleImplementation = ({
             df_content: dfContent,
             rule_id: rule.id,
             raw_content: { ...raw_content, source },
+            result_type: ruleImplementation.result_type,
+            minimum: ruleImplementation.minimum,
+            goal: ruleImplementation.goal,
           }
         : {
             executable: ruleImplementation.executable,
@@ -355,6 +364,9 @@ export const NewRuleImplementation = ({
             df_name,
             df_content: dfContent,
             rule_id: rule.id,
+            result_type: ruleImplementation.result_type,
+            minimum: ruleImplementation.minimum,
+            goal: ruleImplementation.goal,
           };
 
     clone || !edition

package/src/components/RuleForm.js

@@ -85,12 +85,9 @@ export class RuleForm extends React.Component {
     domain_id: null,
     name: "",
     description: null,
-    minimum: null,
-    goal: null,
     type_params: {},
     df_name: "",
     df_content: {},
-    result_type: "percentage",
   };
 
   componentDidMount() {
@@ -218,86 +215,6 @@ export class RuleForm extends React.Component {
     this.setState({ activeSelection: !activeSelection });
   };
 
-  percentageResultValidationMessages = () => {
-    const rule = this.state;
-    const {
-      intl: { formatMessage },
-    } = this.props;
-    const minimumMessages = [];
-    const goalMessages = [];
-    if (rule.goal > 100)
-      goalMessages.push(formatMessage({ id: "rule.form.validation.max_goal" }));
-
-    if (
-      !_.isNil(rule.minimum) &&
-      !_.isNil(rule.goal) &&
-      rule.minimum > rule.goal
-    ) {
-      minimumMessages.push(
-        formatMessage({ id: "rule.form.validation.minimum_greater" })
-      );
-      goalMessages.push(
-        formatMessage({ id: "rule.form.validation.goal_less" })
-      );
-    }
-    return { minimumMessages, goalMessages };
-  };
-
-  errorsNumberResultValidationMessages = () => {
-    const rule = this.state;
-    const {
-      intl: { formatMessage },
-    } = this.props;
-    const minimumMessages = [];
-    const goalMessages = [];
-
-    if (
-      !_.isNil(rule.minimum) &&
-      !_.isNil(rule.goal) &&
-      rule.minimum < rule.goal
-    ) {
-      minimumMessages.push(
-        formatMessage({
-          id: "rule.form.validation.minimum.greater_eq.goal",
-        })
-      );
-      goalMessages.push(
-        formatMessage({ id: "rule.form.validation.goal.less_eq.minimum" })
-      );
-    }
-    return { minimumMessages, goalMessages };
-  };
-
-  deviationResultValidationMessages = () => {
-    const rule = this.state;
-    const {
-      intl: { formatMessage },
-    } = this.props;
-    const minimumMessages = [];
-    const goalMessages = [];
-
-    if (rule.minimum > 100)
-      minimumMessages.push(
-        formatMessage({ id: "rule.form.validation.max_minimum" })
-      );
-
-    if (
-      !_.isNil(rule.minimum) &&
-      !_.isNil(rule.goal) &&
-      rule.minimum < rule.goal
-    ) {
-      minimumMessages.push(
-        formatMessage({
-          id: "rule.form.validation.minimum.greater_eq.goal",
-        })
-      );
-      goalMessages.push(
-        formatMessage({ id: "rule.form.validation.goal.less_eq.minimum" })
-      );
-    }
-    return { minimumMessages, goalMessages };
-  };
-
   generateValidationMessages = () => {
     const rule = this.state;
     const {
@@ -311,30 +228,9 @@ export class RuleForm extends React.Component {
       : undefined;
     const domain = _.isNil(rule.domain_id) ? [requiredMessage] : undefined;
 
-    const { minimumMessages, goalMessages } = (() => {
-      switch (rule.result_type) {
-        case "percentage":
-          return this.percentageResultValidationMessages();
-        case "errors_number":
-          return this.errorsNumberResultValidationMessages();
-        case "deviation":
-          return this.deviationResultValidationMessages();
-      }
-    })();
-
-    if (_.isNil(rule.minimum)) minimumMessages.push(requiredMessage);
-    if (_.isNil(rule.goal)) goalMessages.push(requiredMessage);
-
-    const minimum_validation = !_.isEmpty(minimumMessages)
-      ? minimumMessages
-      : undefined;
-    const goal_validation = !_.isEmpty(goalMessages) ? goalMessages : undefined;
-
     return {
       domain,
       name: name_validation,
-      minimum: minimum_validation,
-      goal: goal_validation,
     };
   };
 
@@ -454,80 +350,6 @@ export class RuleForm extends React.Component {
               </Accordion>
             </Segment>
           )}
-          <Segment>
-            <FieldLabelWrapping
-              label={formatMessage({ id: "rule.props.result_type" })}
-              messages={_.prop("result_type")(messages)}
-              required
-              tooltip={formatMessage({ id: "rule.form.tooltip.result_type" })}
-            >
-              <Form.Group inline>
-                <Form.Radio
-                  name={"result_type"}
-                  label={formatMessage({
-                    id: "rule.props.result_type.percentage",
-                  })}
-                  value={"percentage"}
-                  checked={rule.result_type == "percentage"}
-                  onChange={this.handleChange}
-                />
-                <Form.Radio
-                  name={"result_type"}
-                  label={formatMessage({
-                    id: "rule.props.result_type.deviation",
-                  })}
-                  value={"deviation"}
-                  checked={rule.result_type == "deviation"}
-                  onChange={this.handleChange}
-                />
-                <Form.Radio
-                  name={"result_type"}
-                  label={formatMessage({
-                    id: "rule.props.result_type.errors_number",
-                  })}
-                  value={"errors_number"}
-                  checked={rule.result_type == "errors_number"}
-                  onChange={this.handleChange}
-                />
-              </Form.Group>
-            </FieldLabelWrapping>
-            <FieldLabelWrapping
-              label={formatMessage({ id: "rule.props.minimum" })}
-              messages={_.prop("minimum")(messages)}
-              required
-              tooltip={formatMessage({
-                id: `rule.form.tooltip.${rule.result_type}.minimum`,
-              })}
-            >
-              <Form.Input
-                name="minimum"
-                onChange={this.handleChangeInteger}
-                value={_.isNil(rule.minimum) ? "" : rule.minimum}
-                placeholder={formatMessage({
-                  id: "rule.props.minimum.placeholder",
-                })}
-                autoComplete="off"
-              />
-            </FieldLabelWrapping>
-            <FieldLabelWrapping
-              label={formatMessage({ id: "rule.props.goal" })}
-              messages={_.prop("goal")(messages)}
-              required
-              tooltip={formatMessage({
-                id: `rule.form.tooltip.${rule.result_type}.goal`,
-              })}
-            >
-              <Form.Input
-                name="goal"
-                onChange={this.handleChangeInteger}
-                value={_.isNil(rule.goal) ? "" : rule.goal}
-                placeholder={formatMessage({
-                  id: "rule.props.goal.placeholder",
-                })}
-                autoComplete="off"
-              />
-            </FieldLabelWrapping>
-          </Segment>
           {!_.isNil(rule.df_content) && templatesLoaded && (
             <DynamicRuleForm
               name="dynamicForm"

package/src/components/RuleImplementation.js

@@ -4,12 +4,13 @@ import { Link } from "react-router-dom";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { connect } from "react-redux";
-import { Header, Label, Menu, Grid } from "semantic-ui-react";
+import { Header, Label, Menu, Grid, Icon } from "semantic-ui-react";
 import { ConfirmModal, GroupActions } from "@truedat/core/components";
 import { useAuthorized } from "@truedat/core/hooks";
 import { linkTo } from "@truedat/core/routes";
 import { setRuleImplementationStatus } from "../routines";
 import RuleImplementationTabs from "./RuleImplementationTabs";
+import ImplementationResultBar from "./ImplementationResultBar";
 
 const getAvailableActions = (props, formatMessage) => {
   const contentActions = [
@@ -177,11 +178,13 @@ export const RuleImplementation = ({
     <>
       <Grid>
         <Grid.Column width={8}>
-          <Header
-            as="h2"
-            content={ruleImplementation.implementation_key}
-            icon={{ name: "clipboard check", circular: true }}
-          />
+          <Header as="h2">
+            <Icon circular name="clipboard check" />
+            <Header.Content>
+              {ruleImplementation.implementation_key}
+              <ImplementationResultBar implementation={ruleImplementation} />
+            </Header.Content>
+          </Header>
         </Grid.Column>
         <Grid.Column width={8} textAlign="right">
           <>
@@ -215,6 +218,7 @@ RuleImplementation.propTypes = {
   rule: PropTypes.object,
   ruleImplementation: PropTypes.object,
   userRulePermissions: PropTypes.object,
+  children: PropTypes.node,
 };
 
 const mapStateToProps = ({

package/src/components/RuleImplementationProperties.js

@@ -3,19 +3,22 @@ import React from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import { connect } from "react-redux";
-import { Header, Grid, Icon, Label, Segment, List } from "semantic-ui-react";
+import { Grid, Label, Segment } from "semantic-ui-react";
+import InformationSummary from "./InformationSummary";
 import ImplementationSummary from "./ImplementationSummary";
 import RawContent from "./RawContent";
-import RuleResultDecorator from "./RuleResultDecorator";
-import QualityEventError from "./QualityEventError";
+
+const DynamicFormViewer = React.lazy(() =>
+  import("@truedat/df/components/DynamicFormViewer")
+);
 
 const summarySteps = ["dataset", "population", "validations"];
 
 export const RuleImplementationProperties = ({
-  rule,
   ruleImplementation,
   ruleImplementationRaw,
-  ruleResult,
+  templateImpl,
+  ruleImplementationLoaded,
 }) => {
   return _.isEmpty(ruleImplementation) &&
     _.isEmpty(ruleImplementationRaw) ? null : (
@@ -30,6 +33,18 @@ export const RuleImplementationProperties = ({
             </Label>
           </Grid.Column>
         </Grid.Row>
+        <Grid.Row>
+          <Grid.Column width={10}>
+            <InformationSummary ruleImplementation={ruleImplementation} />
+            {!_.isEmpty(templateImpl) && ruleImplementationLoaded && (
+              <DynamicFormViewer
+                boxLayout
+                template={templateImpl}
+                content={ruleImplementation.df_content}
+              />
+            )}
+          </Grid.Column>
+        </Grid.Row>
         <Grid.Column width={10}>
           {_.isEmpty(ruleImplementationRaw) ? (
             <ImplementationSummary
@@ -41,85 +56,37 @@ export const RuleImplementationProperties = ({
           )}
         </Grid.Column>
       </Grid>
-      <Header as="h3">
-        <FormattedMessage id={`rule.props.result_type.${rule.result_type}`} />
-      </Header>
-      <List>
-        <List.Item>
-          <Icon name="circle" color="yellow" />
-          <List.Content>
-            <List.Description>
-              <FormattedMessage id="quality.threshold" />
-              {`: ${rule.minimum} ${
-                rule.result_type !== "errors_number" ? "%" : ""
-              }`}
-            </List.Description>
-          </List.Content>
-        </List.Item>
-        <List.Item>
-          <Icon name="circle" color="green" />
-          <List.Content>
-            <List.Description>
-              <FormattedMessage id="quality.goal" />
-              {`: ${rule.goal} ${
-                rule.result_type !== "errors_number" ? "%" : ""
-              }`}
-            </List.Description>
-          </List.Content>
-        </List.Item>
-      </List>
-      <Header as="h3">
-        <FormattedMessage id="quality.rule.quality" />
-      </Header>
-      {ruleResult ? (
-        <p>
-          <RuleResultDecorator
-            ruleResult={ruleResult}
-            date={ruleResult?.date}
-            rule={rule}
-          />
-        </p>
-      ) : (
-        <FormattedMessage id="quality.result.no.data" />
-      )}
-      {ruleImplementation.event_type !== "FAILED" ? null : (
-        <>
-          <Header as="h3">
-            <Icon name="warning circle" color="red" size="small" />
-            <FormattedMessage id="quality.error" />
-          </Header>
-          <QualityEventError
-            inserted_at={ruleImplementation.event_inserted_at}
-            message={ruleImplementation.event_message}
-            type={ruleImplementation.event_type}
-          />
-        </>
-      )}
     </Segment>
   );
 };
 RuleImplementationProperties.propTypes = {
-  rule: PropTypes.object,
   ruleImplementation: PropTypes.object.isRequired,
   ruleImplementationRaw: PropTypes.object,
-  ruleResult: PropTypes.array,
+  templateImpl: PropTypes.object,
+  ruleImplementationLoaded: PropTypes.bool,
 };
 
 const mapStateToProps = ({
-  rule,
   ruleImplementation,
   ruleImplementationRaw,
+  templates,
+  ruleImplementationLoading,
 }) => ({
-  rule,
   ruleImplementation: _.pick([
     ...summarySteps,
     "executable",
     "event_type",
     "event_message",
     "event_inserted_at",
+    "result_type",
+    "minimum",
+    "goal",
+    "df_content",
   ])(ruleImplementation),
   ruleImplementationRaw,
-  ruleResult: _.head(ruleImplementation?.results),
+  templateImpl: _.find(_.propEq("name", ruleImplementation.df_name))(templates),
+  ruleImplementationLoaded:
+    !ruleImplementationLoading && !_.isEmpty(ruleImplementation),
 });
 
 export default connect(mapStateToProps)(RuleImplementationProperties);

package/src/components/RuleImplementationResults.js

@@ -3,8 +3,9 @@ import React from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { connect } from "react-redux";
-import { Table, Message } from "semantic-ui-react";
+import { Table, Message, Divider } from "semantic-ui-react";
 import { columnDecorator } from "@truedat/core/services";
+import Moment from "react-moment";
 import { getRuleResultsColumns } from "../selectors";
 import RuleResultRow from "./RuleResultRow";
 
@@ -25,65 +26,98 @@ export const RuleImplementationResults = ({
   customColumns,
   isAdmin,
 }) => {
-  const { formatMessage } = useIntl();
+  const { formatMessage, locale } = useIntl();
 
   if (_.isEmpty(rule) || _.isEmpty(ruleImplementation)) return null;
 
   const ruleResults = ruleImplementation.results;
   const optionalColumns = getOptionalColumnsWithData(ruleResults);
 
-  return _.isEmpty(ruleResults) ? (
-    <Message
-      style={{ marginTop: "14px" }}
-      header={formatMessage({ id: "rule.ruleImplementation.results.empty" })}
-    />
-  ) : (
-    <Table className="implementation-results small" selectable>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell
-            content={formatMessage({ id: "ruleResult.props.quality" })}
+  return (
+    <>
+      {ruleImplementation.event_type === "FAILED" && (
+        <Message negative style={{ marginTop: "14px" }}>
+          <Message.Header>
+            {formatMessage({
+              id: "quality.error",
+            })}
+          </Message.Header>
+          <Divider />
+          <Moment
+            style={{
+              position: "absolute",
+              top: "14px",
+              right: "21px",
+            }}
+            locale={locale}
+            date={ruleImplementation.event_inserted_at}
+            format="YYYY-MM-DD HH:mm"
           />
-          <Table.HeaderCell
-            content={formatMessage({ id: "ruleResult.props.date" })}
-          />
-          {_.includes("records")(optionalColumns) && (
-            <Table.HeaderCell
-              content={formatMessage({ id: "ruleResult.props.records" })}
-            />
-          )}
-          {_.includes("errors")(optionalColumns) && (
-            <Table.HeaderCell
-              content={formatMessage({ id: "ruleResult.props.errors" })}
-            />
-          )}
-          {customColumns.map((column, index) => (
-            <Table.HeaderCell
-              key={index}
-              content={formatMessage({
-                id: `ruleResult.props.${column.name}`,
-                defaultMessage: column.name,
-              })}
-            />
-          ))}
-          {<Table.HeaderCell />}
-          {isAdmin && <Table.HeaderCell />}
-        </Table.Row>
-      </Table.Header>
-      <Table.Body>
-        {ruleResults.map((result, i) => (
-          <RuleResultRow
-            key={i}
-            optionalColumns={optionalColumns}
-            ruleResult={result}
-            customColumns={customColumns}
-            isAdmin={isAdmin}
-            ruleImplementation={ruleImplementation}
-            rule={rule}
-          />
-        ))}
-      </Table.Body>
-    </Table>
+          <p
+            style={{
+              whiteSpace: "pre-wrap",
+            }}
+          >
+            {ruleImplementation.event_message}
+          </p>
+        </Message>
+      )}
+      {_.isEmpty(ruleResults) ? (
+        <Message
+          style={{ marginTop: "14px" }}
+          header={formatMessage({
+            id: "rule.ruleImplementation.results.empty",
+          })}
+        />
+      ) : (
+        <Table className="implementation-results small" selectable>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell
+                content={formatMessage({ id: "ruleResult.props.quality" })}
+              />
+              <Table.HeaderCell
+                content={formatMessage({ id: "ruleResult.props.date" })}
+              />
+              {_.includes("records")(optionalColumns) && (
+                <Table.HeaderCell
+                  content={formatMessage({ id: "ruleResult.props.records" })}
+                />
+              )}
+              {_.includes("errors")(optionalColumns) && (
+                <Table.HeaderCell
+                  content={formatMessage({ id: "ruleResult.props.errors" })}
+                />
+              )}
+              {customColumns.map((column, index) => (
+                <Table.HeaderCell
+                  key={index}
+                  content={formatMessage({
+                    id: `ruleResult.props.${column.name}`,
+                    defaultMessage: column.name,
+                  })}
+                />
+              ))}
+              {<Table.HeaderCell />}
+              {isAdmin && <Table.HeaderCell />}
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {ruleResults.map((result, i) => (
+              <RuleResultRow
+                key={i}
+                optionalColumns={optionalColumns}
+                ruleResult={result}
+                customColumns={customColumns}
+                isAdmin={isAdmin}
+                ruleImplementation={ruleImplementation}
+                rule={rule}
+              />
+            ))}
+          </Table.Body>
+        </Table>
+      )}
+    </>
   );
 };