@truedat/dq 4.33.7 → 4.34.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [4.34.0] 2021-12-02
+
+### Changed
+
+- [TD-4270] Move goal and threshold from Rule to Implementation
+- [TD-4295] Changed how implementation Information section is displayed
+
+## [4.33.10] 2021-11-30
+
+- [TD-4306] Fix popups inside execution popup
+
+## [4.33.9] 2021-11-29
+
+- [TD-4306] Add `df_content` to execution groups
+
 ## [4.33.6] 2021-11-29
 
 ### Added
@@ -16,7 +31,7 @@
 
 ### Hotfix
 
-[TD-4327] Fix dropdown domain selector for glossay new quality rule
+- [TD-4327] Fix dropdown domain selector for glossay new quality rule
 
 ## [4.31.4] 2021-10-25
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dq",
-  "version": "4.33.7",
+  "version": "4.34.0",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -31,7 +31,7 @@
     "@babel/plugin-transform-modules-commonjs": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.5",
-    "@truedat/test": "4.33.7",
+    "@truedat/test": "4.34.0",
     "babel-jest": "^27.0.6",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -82,8 +82,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.4.10",
-    "@truedat/core": "4.33.7",
-    "@truedat/df": "4.33.7",
+    "@truedat/core": "4.34.0",
+    "@truedat/df": "4.34.0",
     "axios": "^0.19.2",
     "graphql": "^15.5.3",
     "path-to-regexp": "^1.7.0",
@@ -103,5 +103,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "417ace837309731f004f2d56371df420e82a4380"
+  "gitHead": "b1fe4f405c612bd342510cf34e8e9d89de0280fb"
 }

package/src/components/ConditionSummary.js

@@ -1,7 +1,7 @@
 import _ from "lodash/fp";
 import React, { Fragment } from "react";
 import PropTypes from "prop-types";
-import { Header, Icon, Table } from "semantic-ui-react";
+import { Header, Icon, Segment, Table } from "semantic-ui-react";
 import { Link } from "react-router-dom";
 import { FormattedMessage } from "react-intl";
 import { linkTo } from "@truedat/core/routes";
@@ -168,26 +168,28 @@ export const ConditionSummary = ({ rows, type, icon }) =>
           />
         </Header.Content>
       </Header>
-      <Table basic="very">
-        <Table.Header>
-          <Table.Row>
-            <Table.HeaderCell>
-              <FormattedMessage id={`ruleImplementation.summary.field`} />
-            </Table.HeaderCell>
-            <Table.HeaderCell>
-              <FormattedMessage id={`ruleImplementation.summary.operator`} />
-            </Table.HeaderCell>
-            <Table.HeaderCell>
-              <FormattedMessage id={`ruleImplementation.summary.values`} />
-            </Table.HeaderCell>
-          </Table.Row>
-        </Table.Header>
-        <Table.Body>
-          {rows.map((row, i) => (
-            <ConditionCell key={i} row={row} />
-          ))}
-        </Table.Body>
-      </Table>
+      <Segment>
+        <Table basic="very">
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell>
+                <FormattedMessage id={`ruleImplementation.summary.field`} />
+              </Table.HeaderCell>
+              <Table.HeaderCell>
+                <FormattedMessage id={`ruleImplementation.summary.operator`} />
+              </Table.HeaderCell>
+              <Table.HeaderCell>
+                <FormattedMessage id={`ruleImplementation.summary.values`} />
+              </Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {rows.map((row, i) => (
+              <ConditionCell key={i} row={row} />
+            ))}
+          </Table.Body>
+        </Table>
+      </Segment>
     </>
   );
 

package/src/components/ExecutionDetails.js

@@ -8,7 +8,7 @@ import { Table, Message, Icon } from "semantic-ui-react";
 import { DateTime } from "@truedat/core/components";
 import { selectColor } from "../functions/selectors";
 
-const GeneralInformation = ({ rule, ruleResult }) => {
+const GeneralInformation = ({ ruleImplementation, ruleResult }) => {
   const { formatMessage, formatNumber: _formatNumber } = useIntl();
   const formatNumber = (num) => (_.isNil(num) ? num : _formatNumber(num));
   return (
@@ -18,7 +18,10 @@ const GeneralInformation = ({ rule, ruleResult }) => {
           {formatMessage({ id: "ruleResult.props.quality" })}
         </Table.Cell>
         <Table.Cell>
-          <Icon name="circle" color={selectColor({ ...rule, ...ruleResult })} />
+          <Icon
+            name="circle"
+            color={selectColor({ ...ruleImplementation, ...ruleResult })}
+          />
           {`${parseFloat(ruleResult.result)} %`}
         </Table.Cell>
       </Table.Row>
@@ -50,7 +53,7 @@ const GeneralInformation = ({ rule, ruleResult }) => {
 };
 
 GeneralInformation.propTypes = {
-  rule: PropTypes.object,
+  ruleImplementation: PropTypes.object,
   ruleResult: PropTypes.object,
 };
 
@@ -70,11 +73,7 @@ const DetailRow = ({ details }) => {
   )(details);
 };
 
-export const ExecutionDetails = ({
-  rule,
-  ruleImplementation,
-  rule_result_id,
-}) => {
+export const ExecutionDetails = ({ ruleImplementation, rule_result_id }) => {
   const { formatMessage } = useIntl();
   const { rule_result_id: id } = useParams();
 
@@ -104,7 +103,10 @@ export const ExecutionDetails = ({
         </Table.Row>
       </Table.Header>
       <Table.Body>
-        <GeneralInformation rule={rule} ruleResult={ruleResult} />
+        <GeneralInformation
+          ruleImplementation={ruleImplementation}
+          ruleResult={ruleResult}
+        />
       </Table.Body>
 
       <Table.Header>
@@ -126,16 +128,11 @@ export const ExecutionDetails = ({
 
 ExecutionDetails.propTypes = {
   ruleImplementation: PropTypes.object,
-  rule: PropTypes.object,
-  customColumns: PropTypes.array,
-  isAdmin: PropTypes.bool,
   rule_result_id: PropTypes.number,
 };
 
 const mapStateToProps = (state) => ({
-  rule: state.rule,
   ruleImplementation: state.ruleImplementation,
-  isAdmin: state.authentication.role === "admin",
 });
 
 export default connect(mapStateToProps)(ExecutionDetails);

package/src/components/ExecutionForm.js

@@ -0,0 +1,116 @@
+import _ from "lodash/fp";
+import React, { Suspense, useState } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { useIntl } from "react-intl";
+import { Button, Form, Header } from "semantic-ui-react";
+import { validateContent } from "@truedat/df/utils";
+import { selectTemplate } from "@truedat/df/routines";
+
+const TemplateSelector = React.lazy(() =>
+  import("@truedat/df/templates/components/TemplateSelector")
+);
+
+const TemplateLoader = React.lazy(() =>
+  import("@truedat/df/templates/components/TemplateLoader")
+);
+
+const DynamicForm = React.lazy(() =>
+  import("@truedat/df/components/DynamicForm")
+);
+
+export const ExecutionForm = ({
+  count,
+  selectTemplate,
+  template,
+  templates,
+  handleSubmit,
+  onCancel,
+}) => {
+  const { formatMessage } = useIntl();
+  const [content, setContent] = useState({});
+
+  const handleContentChange = (content) => setContent(content);
+
+  const handleTemplateSelected = (e, { value }) =>
+    selectTemplate({ id: value });
+
+  const isInvalid = () =>
+    template && !_.isEmpty(validateContent(template)(content));
+
+  if (_.size(templates) == 1) {
+    const id = _.flow(_.head, _.prop("id"))(templates);
+    selectTemplate({ id });
+  }
+
+  return (
+    <>
+      <Header
+        as="h2"
+        content={formatMessage({
+          id: "implementations.actions.execution.confirmation.header",
+        })}
+      />
+      <Suspense fallback={null}>
+        <Form>
+          <TemplateLoader scope="qe" />
+          {_.size(templates) > 1 && (
+            <TemplateSelector
+              name="template"
+              selectedValue={_.prop("id")(template)}
+              onChange={handleTemplateSelected}
+              isOptional={true}
+            />
+          )}
+          {template && template.id && (
+            <>
+              <Header
+                as="h3"
+                content={formatMessage({
+                  id: "implementations.actions.execution.confirmation.legend",
+                })}
+              />
+              <div
+                style={{ maxHeight: "calc(100vh - 550px)", overflowY: "auto" }}
+              >
+                <DynamicForm onChange={handleContentChange} content={content} />
+              </div>
+            </>
+          )}
+          <p>
+            {formatMessage(
+              { id: "implementations.actions.execution.confirmation.content" },
+              { implementations_count: count }
+            )}
+          </p>
+          <div className="actions">
+            <Button
+              secondary
+              onClick={onCancel}
+              content={formatMessage({ id: "actions.cancel" })}
+            />
+            <Button
+              primary
+              disabled={isInvalid()}
+              onClick={() => handleSubmit(content)}
+              content={formatMessage({ id: "actions.create" })}
+            />
+          </div>
+        </Form>
+      </Suspense>
+    </>
+  );
+};
+
+ExecutionForm.propTypes = {
+  count: PropTypes.number,
+  template: PropTypes.object,
+  templates: PropTypes.array,
+  selectTemplate: PropTypes.func,
+  handleSubmit: PropTypes.func,
+  onCancel: PropTypes.func,
+};
+
+const mapStateToProps = _.pick(["templates", "template"]);
+
+export default connect(mapStateToProps, { selectTemplate })(ExecutionForm);

package/src/components/ExecutionGroup.js

@@ -1,4 +1,4 @@
-import { flow, pick, reject, size, sortBy } from "lodash/fp";
+import { flow, pick, filter, reject, size, prop, sortBy } from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
@@ -15,41 +15,41 @@ const columns = [
   {
     name: "ruleImplementations.props.status",
     fieldDecorator: RuleEventDecorator,
-    fieldSelector: pick(["_embedded.quality_events"])
+    fieldSelector: pick(["_embedded.quality_events"]),
   },
   {
     name: "ruleImplementations.props.implementation_key",
     fieldSelector: "_embedded.implementation",
-    fieldDecorator: RuleImplementationResultsLink
+    fieldDecorator: RuleImplementationResultsLink,
   },
   {
     name: "rule.props.name",
-    fieldSelector: "_embedded.rule.name"
+    fieldSelector: "_embedded.rule.name",
   },
   {
     name: "ruleResult.props.date",
     fieldDecorator: DateTime,
     textAlign: "center",
-    fieldSelector: ({ _embedded }) => ({ value: _embedded?.result?.date })
+    fieldSelector: ({ _embedded }) => ({ value: _embedded?.result?.date }),
   },
   {
     name: "ruleResult.props.records",
     textAlign: "right",
-    fieldSelector: "_embedded.result.records"
+    fieldSelector: "_embedded.result.records",
   },
   {
     name: "ruleResult.props.errors",
     textAlign: "right",
-    fieldSelector: "_embedded.result.errors"
+    fieldSelector: "_embedded.result.errors",
   },
   {
     name: "ruleResult.props.quality",
     fieldSelector: ({ _embedded }) => ({
       ruleResult: _embedded?.result,
-      rule: _embedded?.rule
+      ruleImplementation: _embedded?.implementation,
     }),
-    fieldDecorator: RuleResultDecorator
-  }
+    fieldDecorator: RuleResultDecorator,
+  },
 ];
 
 export const ExecutionRow = ({ execution }) => (
@@ -65,7 +65,7 @@ export const ExecutionRow = ({ execution }) => (
 );
 
 ExecutionRow.propTypes = {
-  execution: PropTypes.object
+  execution: PropTypes.object,
 };
 
 export const ExecutionGroup = ({ executionGroup, executionGroupLoading }) => {
@@ -74,10 +74,19 @@ export const ExecutionGroup = ({ executionGroup, executionGroupLoading }) => {
     executionGroup?._embedded?.executions
   );
   const count = size(executions);
-  const pendingCount = flow(reject("_embedded.result"), size)(executions);
+  const missingResultCount = flow(reject("_embedded.result"), size)(executions);
+  const errorCount = flow(
+    filter(flow(prop("_embedded.quality_events"), size)),
+    size
+  )(executions);
+
   return executionGroupLoading ? null : (
     <>
-      <ExecutionGroupMessage count={count} pending={pendingCount} />
+      <ExecutionGroupMessage
+        count={count}
+        pending={missingResultCount - errorCount}
+        error={errorCount}
+      />
       <Table>
         <Table.Header>
           <Table.Row>
@@ -102,12 +111,12 @@ export const ExecutionGroup = ({ executionGroup, executionGroupLoading }) => {
 
 ExecutionGroup.propTypes = {
   executionGroup: PropTypes.object,
-  executionGroupLoading: PropTypes.bool
+  executionGroupLoading: PropTypes.bool,
 };
 
 export const mapStateToProps = ({ executionGroup, executionGroupLoading }) => ({
   executionGroup,
-  executionGroupLoading
+  executionGroupLoading,
 });
 
 export default connect(mapStateToProps)(ExecutionGroup);

package/src/components/ExecutionPopup.js

@@ -0,0 +1,58 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { useIntl } from "react-intl";
+import { Button, Popup } from "semantic-ui-react";
+import ExecutionForm from "./ExecutionForm";
+
+export const ExecutionPopup = ({
+  disabled,
+  executionGroupLoading,
+  count,
+  handleSubmit,
+}) => {
+  const { formatMessage } = useIntl();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popup
+      on="click"
+      basic
+      flowing
+      onOpen={() => setOpen(true)}
+      onClose={() => false}
+      open={open}
+      position="bottom right"
+      size="large"
+      positionFixed
+      trigger={
+        <Button
+          secondary
+          disabled={disabled}
+          loading={executionGroupLoading}
+          content={formatMessage({
+            id: "implementations.actions.do_execution",
+          })}
+        />
+      }
+    >
+      <ExecutionForm
+        count={count}
+        handleSubmit={handleSubmit}
+        onCancel={() => setOpen(false)}
+      />
+    </Popup>
+  );
+};
+
+ExecutionPopup.propTypes = {
+  count: PropTypes.number,
+  disabled: PropTypes.bool,
+  executionGroupLoading: PropTypes.bool,
+  handleSubmit: PropTypes.func,
+};
+
+const mapStateToProps = _.pick(["executionGroupLoading"]);
+
+export default connect(mapStateToProps)(ExecutionPopup);

package/src/components/ImplementationResultBar.js

@@ -0,0 +1,80 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { Popup } from "semantic-ui-react";
+import { Link } from "react-router-dom";
+import { FormattedMessage, useIntl } from "react-intl";
+import { linkTo } from "@truedat/core/routes";
+import { calculateResultDecoration } from "./RuleResultDecorator";
+import "../styles/ruleSummary.less";
+
+export default function ImplementationResultBar({ implementation }) {
+  const intl = useIntl();
+  const ruleResult = _.head(implementation?.results);
+  const { color, resultText } =
+    implementation.event_type === "FAILED"
+      ? {
+          color: "failed",
+          resultText: intl.formatMessage({ id: "quality.error" }),
+        }
+      : calculateResultDecoration({
+          ruleResult,
+          ruleImplementation: implementation,
+          date: ruleResult?.date,
+          intl,
+        });
+
+  const propsByColor = {
+    red: {
+      className: "under-minimum-color",
+      tooltip: "under_minimum",
+    },
+    yellow: {
+      className: "under-goal-color",
+      tooltip: "under_goal",
+    },
+    green: {
+      className: "over-goal-color",
+      tooltip: "over_goal",
+    },
+    grey: {
+      className: "not-executed-color",
+      tooltip: "no_execution",
+    },
+    failed: {
+      className: "failed-color",
+      tooltip: "failed",
+    },
+  };
+  const summaryProps = propsByColor[color];
+  return (
+    <div className="rule-summary-wrapper">
+      <Link
+        as="div"
+        className="rule-summary pointer"
+        to={linkTo.RULE_IMPLEMENTATION_RESULTS({
+          id: implementation.rule_id,
+          implementation_id: implementation.id,
+        })}
+      >
+        <Popup
+          position="bottom center"
+          basic
+          on="hover"
+          content={
+            <FormattedMessage id={`quality_result.${summaryProps.tooltip}`} />
+          }
+          trigger={
+            <span className={summaryProps.className} style={{ width: "100%" }}>
+              <span className="value">{resultText}</span>
+            </span>
+          }
+        />
+      </Link>
+    </div>
+  );
+}
+
+ImplementationResultBar.propTypes = {
+  implementation: PropTypes.object.isRequired,
+};