@truedat/dq 4.33.8 → 4.34.2

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>
+      )}
+    </>
   );
 };
 

package/src/components/RuleImplementationsActions.js

@@ -4,9 +4,7 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Button, Checkbox } from "semantic-ui-react";
 import { useIntl } from "react-intl";
-import { FormattedMessage } from "react-intl";
-import { ConfirmModal } from "@truedat/core/components";
-import { downloadImplementations } from "../routines";
+import { downloadImplementations, uploadImplementations } from "../routines";
 import { getImplementationsExecution } from "../selectors";
 import {
   addImplementationFilter,
@@ -14,6 +12,9 @@ import {
   removeImplementationFilter,
   createExecutionGroup,
 } from "../routines";
+import ImplementationsUploadButton from "./ImplementationsUploadButton";
+
+import ExecutionPopup from "./ExecutionPopup";
 
 const staticHeaderLabels = [
   "implementation_key",
@@ -39,20 +40,6 @@ const staticContentLabels = [
   "executable.false",
 ];
 
-const actions = (handleSubmit) => [
-  {
-    key: "no",
-    secondary: true,
-    content: <FormattedMessage id="confirmation.no" />,
-  },
-  {
-    key: "yes",
-    primary: true,
-    content: <FormattedMessage id="confirmation.yes" />,
-    onClick: handleSubmit,
-  },
-];
-
 export const RuleImplementationsActions = ({
   addImplementationFilter,
   canExecute,
@@ -60,7 +47,6 @@ export const RuleImplementationsActions = ({
   executeImplementationsOn,
   toggleImplementationFilterValue,
   removeImplementationFilter,
-  executionGroupLoading,
   createExecutionGroup,
   selectedImplementations,
   implementationQuery,
@@ -69,6 +55,7 @@ export const RuleImplementationsActions = ({
   ruleImplementationCount,
   ruleImplementationsDownloading,
   ruleImplementationsLoading,
+  upload,
 }) => {
   const { formatMessage } = useIntl();
 
@@ -99,11 +86,11 @@ export const RuleImplementationsActions = ({
     checked ? showExecutableInfo() : hideExecutableInfo();
   };
 
-  const handleSubmit = () => {
+  const handleSubmit = (df_content) => {
     const query = _.isEmpty(selectedImplementations)
       ? implementationQuery
       : { filters: { id: selectedImplementations } };
-    createExecutionGroup({ ...query });
+    createExecutionGroup({ ...query, df_content });
   };
   return (
     <div style={{ float: "right" }}>
@@ -117,32 +104,14 @@ export const RuleImplementationsActions = ({
             checked={executeImplementationsOn}
             style={{ top: "6px", marginRight: "7.5px" }}
           />
-          <ConfirmModal
-            actions={actions(handleSubmit)}
-            trigger={
-              <Button
-                id="execute_button"
-                secondary
-                disabled={!executeImplementationsOn}
-                loading={executionGroupLoading}
-                content={
-                  <FormattedMessage id="implementations.actions.do_execution" />
-                }
-              />
-            }
-            header={
-              <FormattedMessage id="implementations.actions.execution.confirmation.header" />
-            }
-            content={
-              <FormattedMessage
-                id="implementations.actions.execution.confirmation.content"
-                values={{
-                  implementations_count: _.isEmpty(selectedImplementations)
-                    ? ruleImplementationCount
-                    : selectedImplementations.length,
-                }}
-              />
+          <ExecutionPopup
+            disabled={!executeImplementationsOn}
+            count={
+              _.isEmpty(selectedImplementations)
+                ? ruleImplementationCount
+                : selectedImplementations.length
             }
+            handleSubmit={handleSubmit}
           />
         </>
       )}
@@ -160,6 +129,8 @@ export const RuleImplementationsActions = ({
           loading={ruleImplementationsDownloading}
         />
       )}
+      {upload && <ImplementationsUploadButton />}
+      <ImplementationsUploadButton />
     </div>
   );
 };
@@ -170,7 +141,6 @@ RuleImplementationsActions.propTypes = {
   canExecute: PropTypes.bool,
   createExecutionGroup: PropTypes.func,
   executeImplementationsOn: PropTypes.bool,
-  executionGroupLoading: PropTypes.bool,
   implementationsExecution: PropTypes.bool,
   implementationQuery: PropTypes.object,
   removeImplementationFilter: PropTypes.func,
@@ -180,11 +150,11 @@ RuleImplementationsActions.propTypes = {
   toggleImplementationFilterValue: PropTypes.func,
   ruleImplementationsDownloading: PropTypes.bool,
   ruleImplementationsLoading: PropTypes.bool,
+  upload: PropTypes.bool,
 };
 
 const mapStateToProps = (state) => ({
   canExecute: _.propOr(false, "userImplementationsPermissions.execute")(state),
-  executionGroupLoading: state.executionGroupLoading,
   ruleImplementationCount: state.ruleImplementationCount,
   implementationsExecution: getImplementationsExecution(state),
   ruleImplementationsDownloading: state.ruleImplementationsDownloading,
@@ -197,4 +167,4 @@ export default connect(mapStateToProps, {
   toggleImplementationFilterValue,
   removeImplementationFilter,
   createExecutionGroup,
-})(RuleImplementationsActions);
+})(RuleImplementationsActions, uploadImplementations);

package/src/components/RuleProperties.js

@@ -3,12 +3,10 @@ import React from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import { connect } from "react-redux";
-import { useHistory, Link } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { List, Label } from "semantic-ui-react";
 import "rc-slider/assets/index.css";
 import { linkTo } from "@truedat/core/routes";
-import RuleRangeNumber from "./RuleRangeNumber";
-import RuleRangePercentage from "./RuleRangePercentage";
 
 const RichTextEditor = React.lazy(() =>
   import("@truedat/core/components/RichTextEditor")
@@ -27,7 +25,6 @@ export const RuleProperties = ({
   domain,
   domain_id,
   active,
-  result_type,
 }) => {
   return (
     <List size="big" relaxed>
@@ -67,11 +64,6 @@ export const RuleProperties = ({
             </Link>
           </List.Item>
         )}
-      {["percentage", "deviation"].includes(result_type) ? (
-        <RuleRangePercentage />
-      ) : (
-        <RuleRangeNumber />
-      )}
     </List>
   );
 };
@@ -83,7 +75,6 @@ RuleProperties.propTypes = {
   description: PropTypes.object,
   domain: PropTypes.object,
   domain_id: PropTypes.number,
-  result_type: PropTypes.string,
 };
 
 const mapStateToProps = ({ rule }) => rule;

package/src/components/RuleResultDecorator.js

@@ -10,31 +10,30 @@ const nilResult = (ruleResult) =>
   isNil(ruleResult) ||
   (has("result_text")(ruleResult) && isNil(ruleResult?.result_text));
 
-export const RuleResultDecorator = ({ ruleResult, rule, date }) => {
-  const { formatMessage, formatNumber: _formatNumber } = useIntl();
+export const calculateResultDecoration = ({
+  ruleResult,
+  ruleImplementation,
+  date,
+  intl: { formatMessage, formatNumber: _formatNumber },
+}) => {
   const formatNumber = (num) => (isNil(num) ? num : _formatNumber(num));
-  if (nilResult(ruleResult) && isNil(date)) {
-    return null;
-  }
+
   if (ruleResult?.result_text === "quality_result.failed") {
-    return (
-      <>
-        <Icon
-          name="warning circle"
-          color="red"
-          title={formatMessage({ id: "quality_result.failed" })}
-        />
-        {formatMessage({ id: "quality_result.failed" })}
-      </>
-    );
+    const resultText = formatMessage({ id: "quality_result.failed" });
+    return {
+      iconName: "warning circle",
+      resultText: resultText,
+      color: "red",
+      resultText,
+    };
   }
-  const resultText = ruleResult?.result_text;
-  const resultType = rule?.result_type;
+
+  const resultType = ruleImplementation?.result_type;
   const result =
     resultType === "errors_number"
       ? formatNumber(ruleResult?.errors)
       : ruleResult?.result;
-  const resultTitle = isNil(result)
+  const resultText = isNil(result)
     ? formatMessage({ id: "quality.result.no.data" })
     : date
     ? formatMessage(
@@ -45,23 +44,41 @@ export const RuleResultDecorator = ({ ruleResult, rule, date }) => {
         { id: `quality.result.${resultType}.description` },
         { result }
       );
-  const color = selectColor({ ...rule, ...ruleResult });
+  const color = selectColor({ ...ruleImplementation, ...ruleResult });
+  const iconTitle = ruleResult?.result_text
+    ? formatMessage({ id: ruleResult?.result_text })
+    : null;
+
+  return { iconName: "circle", color, resultText, iconTitle };
+};
+
+export const RuleResultDecorator = ({
+  ruleResult,
+  ruleImplementation,
+  date,
+}) => {
+  const intl = useIntl();
+  if (nilResult(ruleResult) && isNil(date)) {
+    return null;
+  }
+  const { iconName, color, resultText, iconTitle } = calculateResultDecoration({
+    ruleResult,
+    ruleImplementation,
+    date,
+    intl,
+  });
 
   return (
     <>
-      <Icon
-        name="circle"
-        title={resultText ? formatMessage({ id: resultText }) : null}
-        color={color}
-      />
-      {resultTitle}
+      <Icon name={iconName} title={iconTitle} color={color} />
+      {resultText}
     </>
   );
 };
 
 RuleResultDecorator.propTypes = {
   ruleResult: PropTypes.object,
-  rule: PropTypes.object,
+  ruleImplementation: PropTypes.object,
   date: PropTypes.string,
 };
 

package/src/components/RuleResultRow.js

@@ -41,7 +41,10 @@ export const RuleResultRow = ({
       }
     >
       <Table.Cell>
-        <Icon name="circle" color={selectColor({ ...rule, ...ruleResult })} />
+        <Icon
+          name="circle"
+          color={selectColor({ ...ruleImplementation, ...ruleResult })}
+        />
         {`${parseFloat(ruleResult.result)} %`}
       </Table.Cell>
       <Table.Cell>

package/src/components/RuleRoutes.js

@@ -66,7 +66,6 @@ const RuleRoutes = ({
   templatesLoaded,
   template,
   structuresAliasesLoading,
-  templateImpl,
   ruleImplementation,
 }) => {
   const latest = _.head(ruleImplementation.results);
@@ -227,14 +226,6 @@ const RuleRoutes = ({
                             <RuleImplementationProperties />
                           </RuleImplementation>
                         )}
-                        {!_.isEmpty(templateImpl) && ruleImplementationLoaded && (
-                          <Segment attached="bottom">
-                            <DynamicFormViewer
-                              template={templateImpl}
-                              content={ruleImplementation.df_content}
-                            />
-                          </Segment>
-                        )}
                       </Segment>
                     </>
                   )}
@@ -305,7 +296,6 @@ RuleRoutes.propTypes = {
   implementationStructures: PropTypes.array,
   ruleLoaded: PropTypes.bool,
   template: PropTypes.object,
-  templateImpl: PropTypes.object,
   ruleImplementation: PropTypes.object,
   ruleImplementationLoaded: PropTypes.bool,
   implementationStructuresLoaded: PropTypes.bool,
@@ -325,9 +315,6 @@ const mapStateToProps = (state) => ({
   templatesLoaded: !state.templatesLoading && !_.isEmpty(state.templates),
   template: _.find(_.propEq("name", state.rule.df_name))(state.templates),
   structuresAliasesLoading: state.structuresAliasesLoading,
-  templateImpl: _.find(_.propEq("name", state.ruleImplementation.df_name))(
-    state.templates
-  ),
   ruleImplementation: state.ruleImplementation,
 });
 

package/src/components/RuleSummary.js

@@ -22,8 +22,12 @@ const mapSummary = (implementations) => {
   const failed = _.size(failedImplementations);
   const quality = _.reduce(
     (summary, implementation) => {
-      const { errors, result } = implementation.execution_result_info;
-      const { goal, minimum, result_type } = implementation.rule;
+      const {
+        goal,
+        minimum,
+        result_type,
+        execution_result_info: { errors, result },
+      } = implementation;
       const color = selectColor({ errors, result, minimum, goal, result_type });
       return _.set(color, summary[color] + 1)(summary);
     },
@@ -71,6 +75,15 @@ const SummaryBar = ({
   </>
 );
 
+SummaryBar.propTypes = {
+  key: PropTypes.string,
+  className: PropTypes.string,
+  summary: PropTypes.object,
+  percentages: PropTypes.array,
+  showPercentages: PropTypes.bool,
+  tooltip: PropTypes.string,
+};
+
 const SummaryBars = (props) => {
   return (
     <div className="rule-summary">