@truedat/dq 4.33.10 → 4.35.2

package/src/components/RuleImplementationsActions.js

@@ -2,9 +2,7 @@ import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Button, Checkbox } from "semantic-ui-react";
-import { useIntl } from "react-intl";
-import { downloadImplementations } from "../routines";
+import { Checkbox } from "semantic-ui-react";
 import { getImplementationsExecution } from "../selectors";
 import {
   addImplementationFilter,
@@ -13,35 +11,11 @@ import {
   createExecutionGroup,
 } from "../routines";
 import ExecutionPopup from "./ExecutionPopup";
-
-const staticHeaderLabels = [
-  "implementation_key",
-  "implementation_type",
-  "rule",
-  "template",
-  "goal",
-  "minimum",
-  "business_concept",
-  "last_execution_at",
-  "result",
-  "execution",
-  "inserted_at",
-  "executable",
-];
-
-const staticContentLabels = [
-  "quality_result.under_minimum",
-  "quality_result.under_goal",
-  "quality_result.over_goal",
-  "quality_result.no_execution",
-  "executable.true",
-  "executable.false",
-];
+import RuleImplementationsOptions from "./RuleImplementationsOptions";
 
 export const RuleImplementationsActions = ({
   addImplementationFilter,
   canExecute,
-  downloadImplementations,
   executeImplementationsOn,
   toggleImplementationFilterValue,
   removeImplementationFilter,
@@ -51,21 +25,8 @@ export const RuleImplementationsActions = ({
   setMode,
   implementationsExecution,
   ruleImplementationCount,
-  ruleImplementationsDownloading,
   ruleImplementationsLoading,
 }) => {
-  const { formatMessage } = useIntl();
-
-  const headerLabels = _.flow(
-    _.map((l) => [l, formatMessage({ id: `ruleImplementations.props.${l}` })]),
-    _.fromPairs
-  )(staticHeaderLabels);
-
-  const contentLabels = _.flow(
-    _.map((l) => [l, formatMessage({ id: `ruleImplementations.props.${l}` })]),
-    _.fromPairs
-  )(staticContentLabels);
-
   const showExecutableInfo = () => {
     addImplementationFilter({ filter: "executable" });
     toggleImplementationFilterValue({
@@ -112,27 +73,13 @@ export const RuleImplementationsActions = ({
           />
         </>
       )}
-      {!ruleImplementationsLoading && (
-        <Button
-          floated="right"
-          secondary
-          icon="download"
-          data-tooltip={formatMessage({
-            id: "implementations.actions.download.tooltip",
-          })}
-          onClick={() =>
-            downloadImplementations({ contentLabels, headerLabels })
-          }
-          loading={ruleImplementationsDownloading}
-        />
-      )}
+      <RuleImplementationsOptions loading={ruleImplementationsLoading} />
     </div>
   );
 };
 
 RuleImplementationsActions.propTypes = {
   addImplementationFilter: PropTypes.func,
-  downloadImplementations: PropTypes.func,
   canExecute: PropTypes.bool,
   createExecutionGroup: PropTypes.func,
   executeImplementationsOn: PropTypes.bool,
@@ -143,7 +90,6 @@ RuleImplementationsActions.propTypes = {
   selectedImplementations: PropTypes.array,
   setMode: PropTypes.func,
   toggleImplementationFilterValue: PropTypes.func,
-  ruleImplementationsDownloading: PropTypes.bool,
   ruleImplementationsLoading: PropTypes.bool,
 };
 
@@ -151,13 +97,11 @@ const mapStateToProps = (state) => ({
   canExecute: _.propOr(false, "userImplementationsPermissions.execute")(state),
   ruleImplementationCount: state.ruleImplementationCount,
   implementationsExecution: getImplementationsExecution(state),
-  ruleImplementationsDownloading: state.ruleImplementationsDownloading,
   ruleImplementationsLoading: state.ruleImplementationsLoading,
 });
 
 export default connect(mapStateToProps, {
   addImplementationFilter,
-  downloadImplementations,
   toggleImplementationFilterValue,
   removeImplementationFilter,
   createExecutionGroup,

package/src/components/RuleImplementationsDownload.js

@@ -0,0 +1,86 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Dropdown } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { downloadImplementations } from "../routines";
+
+const staticHeaderLabels = [
+  "implementation_key",
+  "implementation_type",
+  "rule",
+  "template",
+  "goal",
+  "minimum",
+  "business_concept",
+  "last_execution_at",
+  "result",
+  "execution",
+  "inserted_at",
+  "executable",
+];
+
+const staticContentLabels = [
+  "quality_result.under_minimum",
+  "quality_result.under_goal",
+  "quality_result.over_goal",
+  "quality_result.no_execution",
+  "executable.true",
+  "executable.false",
+];
+
+export const RuleImplementationsDownload = ({
+  downloadImplementations,
+  ruleImplementationsDownloading,
+  ruleImplementations,
+}) => {
+  const { formatMessage } = useIntl();
+
+  const headerLabels = _.flow(
+    _.map((l) => [l, formatMessage({ id: `ruleImplementations.props.${l}` })]),
+    _.fromPairs
+  )(staticHeaderLabels);
+
+  const contentLabels = _.flow(
+    _.map((l) => [l, formatMessage({ id: `ruleImplementations.props.${l}` })]),
+    _.fromPairs
+  )(staticContentLabels);
+
+  const isDisabled = _.isEmpty(ruleImplementations);
+
+  return (
+    <Dropdown.Item
+      icon="download"
+      content={
+        <>
+          <span>
+            {formatMessage({ id: "implementations.actions.download.tooltip" })}
+          </span>
+          {isDisabled && (
+            <p className="menu-item-description">
+              {formatMessage({ id: "implementations.actions.download.empty" })}
+            </p>
+          )}
+        </>
+      }
+      onClick={() => downloadImplementations({ contentLabels, headerLabels })}
+      disabled={isDisabled || ruleImplementationsDownloading}
+    />
+  );
+};
+
+RuleImplementationsDownload.propTypes = {
+  downloadImplementations: PropTypes.func,
+  ruleImplementationsDownloading: PropTypes.bool,
+  ruleImplementations: PropTypes.array,
+};
+
+const mapStateToProps = _.pick([
+  "ruleImplementationsDownloading",
+  "ruleImplementations",
+]);
+
+export default connect(mapStateToProps, {
+  downloadImplementations,
+})(RuleImplementationsDownload);

package/src/components/RuleImplementationsOptions.js

@@ -0,0 +1,28 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Dropdown } from "semantic-ui-react";
+import RuleImplementationsDownload from "./RuleImplementationsDownload";
+import RuleResultsUpload from "./RuleResultsUpload";
+import ImplementationsUploadButton from "./ImplementationsUploadButton";
+
+export const RuleImplementationsOptions = ({ loading }) => (
+  <Dropdown
+    icon="ellipsis vertical"
+    className="button icon group-actions button-update"
+    direction="left"
+    floating
+    disabled={loading}
+  >
+    <Dropdown.Menu>
+      <RuleImplementationsDownload />
+      <ImplementationsUploadButton />
+      <RuleResultsUpload />
+    </Dropdown.Menu>
+  </Dropdown>
+);
+
+RuleImplementationsOptions.propTypes = {
+  loading: PropTypes.bool,
+};
+
+export default RuleImplementationsOptions;

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/RuleResultsUpload.js

@@ -0,0 +1,47 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Dropdown } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { UploadModal } from "@truedat/core/components";
+import { uploadResults } from "../routines";
+
+export const RuleResultsUpload = ({ uploadResults, loading }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <UploadModal
+      icon="upload"
+      trigger={
+        <Dropdown.Item
+          icon="upload"
+          text={formatMessage({ id: "ruleResults.actions.upload.tooltip" })}
+          disabled={loading}
+        />
+      }
+      header={formatMessage({
+        id: "ruleResults.actions.upload.confirmation.header",
+      })}
+      content={formatMessage({
+        id: "uploadModal.actions.upload.confirmation.content",
+      })}
+      param={"rule_results"}
+      handleSubmit={(data) =>
+        uploadResults({
+          data,
+        })
+      }
+    />
+  );
+};
+
+RuleResultsUpload.propTypes = {
+  uploadResults: PropTypes.func,
+  loading: PropTypes.bool,
+};
+
+const mapStateToProps = ({ uploadingResults }) => ({
+  loading: uploadingResults,
+});
+
+export default connect(mapStateToProps, { uploadResults })(RuleResultsUpload);

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">

package/src/components/RulesActions.js

@@ -5,26 +5,33 @@ import { Link } from "react-router-dom";
 import { Button } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
 import { RULE_NEW } from "@truedat/core/routes";
+import { uploadRules } from "../routines";
+import RulesUploadButton from "./RulesUploadButton";
 
-export const RulesActions = ({ userRulesPermissions }) => (
+export const RulesActions = ({ userRulesPermissions, upload }) => (
   <div style={{ float: "right" }}>
     {userRulesPermissions.manage_quality_rules && (
-      <Button
-        primary
-        as={Link}
-        to={RULE_NEW}
-        content={<FormattedMessage id="quality.actions.create" />}
-      />
+      <>
+        <Button
+          primary
+          as={Link}
+          to={RULE_NEW}
+          content={<FormattedMessage id="quality.actions.create" />}
+        />
+        {upload && <RulesUploadButton />}
+        <RulesUploadButton />
+      </>
     )}
   </div>
 );
 
 RulesActions.propTypes = {
-  userRulesPermissions: PropTypes.object
+  userRulesPermissions: PropTypes.object,
+  upload: PropTypes.bool,
 };
 
 const mapStateToProps = ({ userRulesPermissions }) => ({
-  userRulesPermissions
+  userRulesPermissions,
 });
 
-export default connect(mapStateToProps)(RulesActions);
+export default connect(mapStateToProps)(RulesActions, uploadRules);

package/src/components/RulesUploadButton.js

@@ -0,0 +1,58 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Button } from "semantic-ui-react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { UploadModal } from "@truedat/core/components";
+import { API_RULES_UPLOAD } from "../api";
+import { uploadRules } from "../routines";
+
+const uploadAction = {
+  method: "POST",
+  href: API_RULES_UPLOAD,
+};
+
+export const RulesUploadButton = ({ uploadRules, loading }) => {
+  const { formatMessage } = useIntl();
+  return (
+    <UploadModal
+      icon="upload"
+      trigger={
+        <Button
+          secondary
+          floated="right"
+          icon="upload"
+          loading={loading}
+          data-tooltip={formatMessage({
+            id: "rules.actions.upload.tooltip",
+          })}
+        />
+      }
+      header={
+        <FormattedMessage id="rules.actions.upload.confirmation.header" />
+      }
+      content={
+        <FormattedMessage id="rules.actions.upload.confirmation.content" />
+      }
+      param={"rules"}
+      handleSubmit={(data) =>
+        uploadRules({
+          action: "upload",
+          data,
+          ...uploadAction,
+        })
+      }
+    />
+  );
+};
+
+RulesUploadButton.propTypes = {
+  uploadRules: PropTypes.func,
+  loading: PropTypes.bool,
+};
+
+const mapStateToProps = ({ uploadRulesFile: { loading } }) => ({
+  loading,
+});
+
+export default connect(mapStateToProps, { uploadRules })(RulesUploadButton);

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

@@ -11,11 +11,15 @@ describe("<ExecutionGroup />", () => {
   const rule = {
     id: 1,
     name: "rule_name",
+  };
+  const implementation = {
+    id: 1,
+    implementation_key: "foo",
+    rule_id: 1,
     result_type: "percentage",
     minimum: 10,
-    goal: 20
+    goal: 20,
   };
-  const implementation = { id: 1, implementation_key: "foo", rule_id: 1 };
   const result = {
     id: 1,
     implementation_key: "foo",
@@ -25,7 +29,7 @@ describe("<ExecutionGroup />", () => {
     errors: 30,
     result_type: "percentage",
     minimum: 10,
-    goal: 20
+    goal: 20,
   };
   const quality_events = [
     {
@@ -33,14 +37,14 @@ describe("<ExecutionGroup />", () => {
       execution_id: 1,
       id: 1,
       type: "SUCCESS",
-      message: ""
-    }
+      message: "",
+    },
   ];
   const executions = [
-    { id: 1, _embedded: { rule, implementation, result, quality_events } }
+    { id: 1, _embedded: { rule, implementation, result, quality_events } },
   ];
   const props = {
-    executionGroup: { id: 1, _embedded: { executions } }
+    executionGroup: { id: 1, _embedded: { executions } },
   };
 
   it("matches the latest snapshot", () => {