@truedat/dq 4.53.8 → 4.53.10

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.53.10] 2022-10-17
+
+### Added
+
+- [TD-4177] Implementation executions components
+
 ## [4.53.8] 2022-10-17
 
 ### Added
@@ -23,7 +29,7 @@
 
 ### Fixed
 
-- [TD-5098] Missing value modifier parameter translations, put key in Fragment
+- [TD-5098] Missing value modifier parameter translations
 
 ## [4.53.2] 2022-10-07
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dq",
-  "version": "4.53.8",
+  "version": "4.53.10",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.53.8",
+    "@truedat/test": "4.53.10",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -92,9 +92,9 @@
     ]
   },
   "dependencies": {
-    "@apollo/client": "^3.6.4",
-    "@truedat/core": "4.53.8",
-    "@truedat/df": "4.53.8",
+    "@apollo/client": "^3.7.0",
+    "@truedat/core": "4.53.10",
+    "@truedat/df": "4.53.10",
     "graphql": "^15.5.3",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.8.1",
@@ -114,5 +114,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "56190c74eddc249134cb973cc21470c36a4701d0"
+  "gitHead": "66304ff9ac3d25820b3bec2d0147f21cb0a2c579"
 }

package/src/api/queries.js

@@ -1,33 +1,33 @@
 import { gql } from "@apollo/client";
 
-export const IMPLEMENTATION_WITH_VERSIONS_QUERY = gql`
-  query Implementation($id: ID!) {
+export const IMPLEMENTATION_VERSIONS_QUERY = gql`
+  query ImplementationVersions($id: ID!) {
     implementation(id: $id) {
       id
       versions {
         id
-        implementation_key
+        implementationKey
         version
         status
-        updated_at
+        updatedAt
       }
     }
   }
 `;
 
-export const IMPLEMENTATION_RESULTS = gql`
+export const IMPLEMENTATION_RESULTS_QUERY = gql`
   query Implementation($id: ID!) {
     implementation(id: $id) {
       id
-      implementation_key
-      last_quality_event {
-        inserted_at
+      implementationKey
+      lastQualityEvent {
+        insertedAt
         message
         type
       }
       versions {
         id
-        implementation_key
+        implementationKey
         version
         status
         minimum
@@ -37,19 +37,19 @@ export const IMPLEMENTATION_RESULTS = gql`
           date
           details
           errors
-          has_remediation
-          has_segments
+          hasRemediation
+          hasSegments
           params
           records
           result
-          result_type
+          resultType
         }
       }
     }
   }
 `;
 
-export const IMPLEMENTATION_RESULT = gql`
+export const IMPLEMENTATION_RESULT_QUERY = gql`
   query ImplementationResult($id: ID!) {
     implementationResult(id: $id) {
       id
@@ -59,9 +59,9 @@ export const IMPLEMENTATION_RESULT = gql`
       errors
       records
       result
-      result_type
-      has_segments
-      has_remediation
+      resultType
+      hasSegments
+      hasRemediation
     }
   }
 `;
@@ -98,3 +98,63 @@ export const MY_EXECUTION_GROUPS_QUERY = gql`
     }
   }
 `;
+
+export const IMPLEMENTATION_EXECUTION_FILTERS_QUERY = gql`
+  query ImplementationExecutionFilters($id: ID!) {
+    implementation(id: $id) {
+      id
+      executionFilters {
+        field
+        values
+      }
+    }
+  }
+`;
+
+export const IMPLEMENTATION_EXECUTIONS_QUERY = gql`
+  query ImplementationExecutions(
+    $id: ID!
+    $after: Cursor
+    $before: Cursor
+    $last: Int
+    $first: Int
+    $filters: [ExecutionFilterInput]
+  ) {
+    implementation(id: $id) {
+      id
+      executionFilters {
+        field
+        values
+      }
+      executionsConnection(
+        first: $first
+        last: $last
+        before: $before
+        after: $after
+        filters: $filters
+      ) {
+        totalCount
+        page {
+          id
+          insertedAt
+          implementation {
+            id
+            version
+          }
+          latestEvent {
+            id
+            insertedAt
+            type
+            message
+          }
+        }
+        pageInfo {
+          startCursor
+          endCursor
+          hasNextPage
+          hasPreviousPage
+        }
+      }
+    }
+  }
+`;

package/src/components/ExecutionGroups.js

@@ -1,61 +1,15 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { useQuery } from "@apollo/client";
 import queryString from "query-string";
 import { useIntl } from "react-intl";
-import { useLocation, Link } from "react-router-dom";
-import { Header, Menu, Segment } from "semantic-ui-react";
+import { useLocation } from "react-router-dom";
+import { Header, Segment } from "semantic-ui-react";
+import { CursorPagination } from "@truedat/core/components";
 import { MY_EXECUTION_GROUPS_QUERY } from "../api/queries";
 import ExecutionGroupsTable from "./ExecutionGroupsTable";
 
 const PAGE_SIZE = 20;
 
-export const Pagination = ({ pageInfo }) => {
-  const { endCursor, startCursor, hasPreviousPage, hasNextPage } =
-    pageInfo || {};
-  const next =
-    hasNextPage && endCursor ? { search: "?after=" + endCursor } : null;
-  const prev =
-    hasPreviousPage && startCursor
-      ? { search: "?before=" + startCursor }
-      : null;
-  return (
-    <Menu pagination role="navigation">
-      <Menu.Item
-        as={next ? Link : null}
-        link={!!next}
-        content="«"
-        disabled={!hasNextPage}
-        to={{ search: "" }}
-        replace={next ? true : null}
-        aria-label="Latest"
-      />
-      <Menu.Item
-        as={next ? Link : null}
-        link={!!next}
-        content="⟨"
-        disabled={!hasNextPage}
-        to={next}
-        replace={next ? true : null}
-        aria-label="Later"
-      />
-      <Menu.Item
-        as={prev ? Link : null}
-        link={!!prev}
-        content="⟩"
-        disabled={!hasPreviousPage}
-        to={prev}
-        replace={prev ? true : null}
-        aria-label="Earlier"
-      />
-    </Menu>
-  );
-};
-
-Pagination.propTypes = {
-  pageInfo: PropTypes.object,
-};
-
 export const ExecutionGroups = () => {
   const { formatMessage } = useIntl();
   const { search } = useLocation();
@@ -71,7 +25,7 @@ export const ExecutionGroups = () => {
   return (
     <Segment loading={loading}>
       <Header as="h2" content={formatMessage({ id: "sidemenu.executions" })} />
-      <Pagination {...connection} />
+      <CursorPagination {...connection} />
       {loading ? null : <ExecutionGroupsTable {...connection} />}
     </Segment>
   );

package/src/components/ImplementationExecutionFilters.js

@@ -0,0 +1,79 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { useQuery } from "@apollo/client";
+import queryString from "query-string";
+import { useIntl } from "react-intl";
+import { useLocation, useParams, Link } from "react-router-dom";
+import { Menu } from "semantic-ui-react";
+import { Loading } from "@truedat/core/components";
+import { IMPLEMENTATION_EXECUTION_FILTERS_QUERY } from "../api/queries";
+
+export const ExecutionFilter = ({ field, values, header }) => {
+  const { search } = useLocation();
+  const { formatMessage } = useIntl();
+  const { [field]: value } = queryString.parse(search);
+
+  return (
+    <Menu compact secondary pointing>
+      {header ? (
+        <Menu.Item
+          header
+          disabled
+          name={formatMessage({
+            id: `execution.filter.${field}`,
+            defaultMessage: _.capitalize(field),
+          })}
+        />
+      ) : null}
+      <Menu.Item
+        link
+        name={formatMessage({
+          id: `execution.${field}.all`,
+          defaultMessage: "All",
+        })}
+        value={null}
+        active={!value}
+        as={Link}
+        to={{ search: null }}
+        replace
+      />
+      {values.map((v, i) => (
+        <Menu.Item
+          key={i}
+          link
+          name={formatMessage({
+            id: `execution.${field}.${v}`,
+            defaultMessage: _.capitalize(v),
+          })}
+          value={v}
+          active={value === v}
+          as={Link}
+          to={{ search: "?" + queryString.stringify({ [field]: v }) }}
+          replace
+        />
+      ))}
+    </Menu>
+  );
+};
+
+ExecutionFilter.propTypes = {
+  header: PropTypes.bool,
+  field: PropTypes.string,
+  values: PropTypes.arrayOf(PropTypes.string),
+};
+
+export const ImplementationExecutionFilters = () => {
+  const { implementation_id: id } = useParams();
+  const variables = { id };
+  const { data, error, loading } = useQuery(
+    IMPLEMENTATION_EXECUTION_FILTERS_QUERY,
+    { variables }
+  );
+  if (error) return null;
+  if (loading) return <Loading />;
+  const filters = data?.implementation?.executionFilters || [];
+  return filters.map((props, i) => <ExecutionFilter key={i} {...props} />);
+};
+
+export default ImplementationExecutionFilters;

package/src/components/ImplementationExecutions.js

@@ -0,0 +1,125 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { useQuery } from "@apollo/client";
+import queryString from "query-string";
+import { FormattedMessage } from "react-intl";
+import { useLocation, useParams } from "react-router-dom";
+import { Grid, Segment, Table } from "semantic-ui-react";
+import { CursorPagination, DateTime, Loading } from "@truedat/core/components";
+import { IMPLEMENTATION_EXECUTIONS_QUERY } from "../api/queries";
+import ImplementationExecutionFilters from "./ImplementationExecutionFilters";
+
+const PAGE_SIZE = 20;
+
+const STYLES = {
+  PENDING: { warning: true },
+  STARTED: { warning: true },
+  SUCCEEDED: { positive: true },
+  FAILED: { error: true },
+};
+
+export const ExecutionRow = ({
+  id,
+  insertedAt,
+  latestEvent,
+  implementation,
+}) => {
+  const status = latestEvent?.type;
+  const styles = _.propOr(STYLES.PENDING, latestEvent?.type)(STYLES);
+  return (
+    <Table.Row key={id} {...styles}>
+      <Table.Cell width="1" textAlign="right">
+        {implementation?.version}
+      </Table.Cell>
+      <Table.Cell width="2">
+        <DateTime value={insertedAt} />
+      </Table.Cell>
+      <Table.Cell width="2">
+        {latestEvent ? <DateTime value={latestEvent.insertedAt} /> : null}
+      </Table.Cell>
+      <Table.Cell width="2">
+        {status ? (
+          <FormattedMessage
+            id={`execution.status.${status}`}
+            defaultMessage={_.capitalize(status)}
+          />
+        ) : null}
+      </Table.Cell>
+      <Table.Cell>{latestEvent?.message}</Table.Cell>
+    </Table.Row>
+  );
+};
+
+ExecutionRow.propTypes = {
+  id: PropTypes.string,
+  insertedAt: PropTypes.string,
+  latestEvent: PropTypes.object,
+  implementation: PropTypes.object,
+};
+
+export const ImplementationExecutions = ({ page }) => (
+  <Table basic="very">
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell width="1" textAlign="right">
+          <FormattedMessage id="ruleImplementations.props.version" />
+        </Table.HeaderCell>
+        <Table.HeaderCell width="2">
+          <FormattedMessage id="execution" />
+        </Table.HeaderCell>
+        <Table.HeaderCell width="2">
+          <FormattedMessage id="execution.latestEvent.insertedAt" />
+        </Table.HeaderCell>
+        <Table.HeaderCell width="2">
+          <FormattedMessage id="execution.latestEvent.type" />
+        </Table.HeaderCell>
+        <Table.HeaderCell>
+          <FormattedMessage id="execution.latestEvent.message" />
+        </Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
+    <Table.Body>
+      {page.map((props, key) => (
+        <ExecutionRow key={key} {...props} />
+      ))}
+    </Table.Body>
+  </Table>
+);
+
+ImplementationExecutions.propTypes = {
+  filters: PropTypes.array,
+  page: PropTypes.array,
+};
+
+export const ImplementationExecutionsLoader = () => {
+  const { implementation_id: id } = useParams();
+  const { search } = useLocation();
+  const { before, after, status } = queryString.parse(search);
+  const filters = status ? [{ field: "status", values: [status] }] : [];
+  const variables = after
+    ? { id, after, before, first: PAGE_SIZE, filters }
+    : { id, after, before, last: PAGE_SIZE, filters };
+  const { data, loading } = useQuery(IMPLEMENTATION_EXECUTIONS_QUERY, {
+    variables: _.pickBy(_.identity)(variables),
+  });
+  const connection = data?.implementation?.executionsConnection;
+  return (
+    <Segment attached="bottom">
+      <Grid>
+        <Grid.Row columns={2}>
+          <Grid.Column>
+            <ImplementationExecutionFilters />
+          </Grid.Column>
+          <Grid.Column textAlign="right">
+            <CursorPagination {...connection} />
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
+      {loading ? <Loading /> : null}
+      {connection ? <ImplementationExecutions {...connection} /> : null}
+    </Segment>
+  );
+};
+
+export default ImplementationExecutionsLoader;

package/src/components/ImplementationsRoutes.js

@@ -12,6 +12,7 @@ import {
   IMPLEMENTATION_CONCEPT_LINKS,
   IMPLEMENTATION_EDIT,
   IMPLEMENTATION_EVENTS,
+  IMPLEMENTATION_EXECUTIONS,
   IMPLEMENTATION_HISTORY,
   IMPLEMENTATION_MOVE,
   IMPLEMENTATION_NEW,
@@ -31,6 +32,7 @@ import {
   getImplementationStructuresLoaded,
 } from "../selectors";
 import ImplementationCrumbs from "./ImplementationCrumbs";
+import ImplementationExecutions from "./ImplementationExecutions";
 import ImplementationStructures from "./ImplementationStructures";
 import ImplementationStructuresNew from "./ImplementationStructuresNew";
 import Implementations from "./Implementations";
@@ -143,6 +145,22 @@ export const ImplementationsRoutes = ({
                 </>
               )}
             />
+            <Route
+              exact
+              path={IMPLEMENTATION_EXECUTIONS}
+              render={() => (
+                <>
+                  <ImplementationCrumbs />
+                  <Segment>
+                    {ruleImplementationLoaded ? (
+                      <RuleImplementation>
+                        <ImplementationExecutions />
+                      </RuleImplementation>
+                    ) : null}
+                  </Segment>
+                </>
+              )}
+            />
             <Route
               exact
               path={IMPLEMENTATION_CLONE}
@@ -291,7 +309,6 @@ export const ImplementationsRoutes = ({
                 </>
               )}
             />
-
             <Route
               exact
               path={IMPLEMENTATION_RESULTS_DETAILS}

package/src/components/RuleImplementationHistory.js

@@ -7,7 +7,7 @@ import { connect } from "react-redux";
 import { Segment, Grid, Table } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
 import { Loading } from "@truedat/core/components";
-import { IMPLEMENTATION_WITH_VERSIONS_QUERY } from "../api/queries";
+import { IMPLEMENTATION_VERSIONS_QUERY } from "../api/queries";
 
 import RuleImplementationHistoryRow from "./RuleImplementationHistoryRow";
 
@@ -16,7 +16,7 @@ export const RuleImplementationHistory = ({ implementation }) => (
     <Grid>
       <Grid.Row>
         <Grid.Column>
-          {!_.isEmpty(implementation) && (
+          {_.isEmpty(implementation) ? null : (
             <Table selectable>
               <Table.Header>
                 <Table.Row>
@@ -65,12 +65,9 @@ RuleImplementationHistory.propTypes = {
 
 export const RuleImplementationHistoryLoader = (props) => {
   const { implementation_id: id } = useParams();
-  const { loading, error, data } = useQuery(
-    IMPLEMENTATION_WITH_VERSIONS_QUERY,
-    {
-      variables: { id },
-    }
-  );
+  const { loading, error, data } = useQuery(IMPLEMENTATION_VERSIONS_QUERY, {
+    variables: { id },
+  });
   if (error) return null;
   if (loading) return <Loading />;
   const implementation = data?.implementation;

package/src/components/RuleImplementationHistoryRow.js

@@ -1,7 +1,6 @@
-import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { useHistory } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { Table } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
 import { DateTime } from "@truedat/core/components";
@@ -10,39 +9,35 @@ import { linkTo } from "@truedat/core/routes";
 export const RuleImplementationHistoryRow = ({
   id,
   status,
-  updated_at,
+  updatedAt,
   version,
-  implementation_key,
+  implementationKey,
   active,
-}) => {
-  const history = useHistory();
-  return (
-    <Table.Row
-      active={active}
-      onClick={() =>
-        history.push(linkTo.IMPLEMENTATION({ implementation_id: id }))
-      }
-    >
-      <Table.Cell content={implementation_key} />
-      <Table.Cell
-        content={
-          <FormattedMessage
-            id={`concepts.status.${status}`}
-            defaultMessage={status}
-          />
-        }
+}) => (
+  <Table.Row active={active}>
+    <Table.Cell>
+      <Link to={linkTo.IMPLEMENTATION_HISTORY({ implementation_id: id })}>
+        {implementationKey}
+      </Link>
+    </Table.Cell>
+    <Table.Cell>
+      <FormattedMessage
+        id={`concepts.status.${status}`}
+        defaultMessage={status}
       />
-      <Table.Cell content={version} />
-      <Table.Cell content={<DateTime value={updated_at} />} />
-    </Table.Row>
-  );
-};
+    </Table.Cell>
+    <Table.Cell content={version} />
+    <Table.Cell>
+      <DateTime value={updatedAt} />
+    </Table.Cell>
+  </Table.Row>
+);
 
 RuleImplementationHistoryRow.propTypes = {
   id: PropTypes.number,
-  implementation_key: PropTypes.string,
+  implementationKey: PropTypes.string,
   status: PropTypes.string,
-  updated_at: PropTypes.string,
+  updatedAt: PropTypes.string,
   version: PropTypes.number,
   active: PropTypes.bool,
 };

package/src/components/RuleImplementationResultTabs.js

@@ -21,7 +21,7 @@ export const RuleImplementationResultTabs = ({
   templates,
 }) => {
   const renderSegmentResult = () => {
-    return ruleResult.has_segments ? (
+    return ruleResult.hasSegments ? (
       <Menu.Item
         active={match.path === IMPLEMENTATION_RESULT_SEGMENTS_RESULTS}
         as={Link}
@@ -37,7 +37,7 @@ export const RuleImplementationResultTabs = ({
 
   const renderRemediationPlan = () => {
     const canCreateRemediation = authCreateRemediation && !_.isEmpty(templates);
-    const renderCondition = ruleResult.has_remediation || canCreateRemediation;
+    const renderCondition = ruleResult.hasRemediation || canCreateRemediation;
 
     return renderCondition ? (
       <Menu.Item