@truedat/qx 7.0.8 → 7.1.0

package/src/components/qualityControls/scoreCriterias/__tests__/__snapshots__/ErrorCount.spec.js.snap

@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ErrorCount /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="field"
+  >
+    <label
+      class="field-label"
+    >
+      Goal
+      <span>
+        *
+      </span>
+    </label>
+    <div
+      class="field"
+    >
+      <div
+        class="ui input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="Goal"
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="field"
+  >
+    <label
+      class="field-label"
+    >
+      Threshold
+      <span>
+        *
+      </span>
+    </label>
+    <div
+      class="field"
+    >
+      <div
+        class="ui input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="Threshold"
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/qualityControls/scoreCriterias/__tests__/__snapshots__/Percentage.spec.js.snap

@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Percentage /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="field"
+  >
+    <label
+      class="field-label"
+    >
+      Threshold
+      <span>
+        *
+      </span>
+    </label>
+    <div
+      class="field"
+    >
+      <div
+        class="ui input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="Threshold"
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="field"
+  >
+    <label
+      class="field-label"
+    >
+      Goal
+      <span>
+        *
+      </span>
+    </label>
+    <div
+      class="field"
+    >
+      <div
+        class="ui input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="Goal"
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/{executions/ExecutionGroupsHeader.js → scores/MyScoreGroups.js}

@@ -3,7 +3,9 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 import { Header, Icon, Grid, Segment } from "semantic-ui-react";
 
-export default function ExecutionGroupsHeader({ children }) {
+import ScoreGroupsTable from "./ScoreGroupsTable";
+
+export default function MyScoreGroups() {
   return (
     <Segment>
       <Grid>
@@ -11,12 +13,12 @@ export default function ExecutionGroupsHeader({ children }) {
           <Header as="h2">
             <Icon circular name="tasks" />
             <Header.Content>
-              <FormattedMessage id="sidemenu.quality_controls_execution_groups" />
+              <FormattedMessage id="score_groups.header" />
             </Header.Content>
           </Header>
         </Grid.Column>
       </Grid>
-      {children}
+      <ScoreGroupsTable />
     </Segment>
   );
 }

package/src/components/scores/QualityBar.js

@@ -0,0 +1,73 @@
+import _ from "lodash/fp";
+import React, { useContext } from "react";
+import { Popup } from "semantic-ui-react";
+import { FormattedMessage, useIntl } from "react-intl";
+import qualityByControlMode from "../qualityControls/qualityByControlMode";
+import ScoreContext from "./ScoreContext";
+
+export default function QualityBar() {
+  const { score } = useContext(ScoreContext);
+  const { formatMessage } = useIntl();
+  const quality = qualityByControlMode(score);
+
+  const { color, text } = quality.isFailed
+    ? {
+        color: "failed",
+        text: formatMessage({ id: "score.status.failed" }),
+      }
+    : quality.isEmpty
+    ? {
+        color: "empyDataset",
+        text: formatMessage({ id: "score.no_results" }),
+      }
+    : quality;
+
+  const propsByColor = {
+    red: {
+      className: "under-minimum-color",
+      tooltip: "not_comply",
+    },
+    yellow: {
+      className: "under-goal-color",
+      tooltip: "warning",
+    },
+    green: {
+      className: "over-goal-color",
+      tooltip: "comply",
+    },
+    grey: {
+      className: "not-executed-color",
+      tooltip: "no_execution",
+    },
+    empyDataset: {
+      className: "empty-dataset-color",
+      tooltip: "no_content",
+    },
+    failed: {
+      className: "failed-color",
+      tooltip: "failed",
+    },
+  };
+  const summaryProps = propsByColor[color];
+  return (
+    <div className="quality-bar-wrapper">
+      <div className="quality-bar">
+        <Popup
+          position="bottom center"
+          basic
+          on="hover"
+          content={
+            <FormattedMessage
+              id={`score.result_label.${summaryProps.tooltip}`}
+            />
+          }
+          trigger={
+            <span className={summaryProps.className} style={{ width: "100%" }}>
+              <span className="value">{text}</span>
+            </span>
+          }
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/scores/Score.js

@@ -0,0 +1,32 @@
+import _ from "lodash/fp";
+import React from "react";
+import { useParams } from "react-router-dom";
+import { FormattedMessage } from "react-intl";
+import { Segment, Header, Icon } from "semantic-ui-react";
+import { useScoreShow } from "../../hooks/useScores";
+import ScoreContext from "./ScoreContext";
+import ScoreCrumbs from "./ScoreCrumbs";
+import ScoreTabs from "./ScoreTabs";
+import QualityBar from "./QualityBar";
+
+export default function Score({ children }) {
+  const { id } = useParams();
+  const { data: score } = useScoreShow(id);
+
+  return score ? (
+    <ScoreContext.Provider value={{ score }}>
+      <ScoreCrumbs />
+      <Segment>
+        <Header as="h2">
+          <Icon circular name="line graph" />
+          <Header.Content>
+            <FormattedMessage id={"scores.detail.header"} />
+            <QualityBar />
+          </Header.Content>
+        </Header>
+        <ScoreTabs />
+        {children}
+      </Segment>
+    </ScoreContext.Provider>
+  ) : null;
+}

package/src/components/scores/ScoreContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export default createContext();

package/src/components/scores/ScoreCrumbs.js

@@ -0,0 +1,40 @@
+import _ from "lodash/fp";
+import React, { useContext } from "react";
+import { Breadcrumb } from "semantic-ui-react";
+import { Link } from "react-router-dom";
+import { FormattedMessage } from "react-intl";
+import { QUALITY_CONTROLS, linkTo } from "@truedat/core/routes";
+import { DateDecorator } from "@truedat/core/services/columnDecorators";
+import ScoreContext from "./ScoreContext";
+
+export default function ScoreCrumbs() {
+  const { score } = useContext(ScoreContext);
+  const qualityControl = _.prop("quality_control")(score);
+  const executionTimestamp = _.prop("execution_timestamp")(score);
+
+  return (
+    <Breadcrumb>
+      <Breadcrumb.Section as={Link} to={QUALITY_CONTROLS} active={false}>
+        <FormattedMessage id="quality_controls.header" />
+      </Breadcrumb.Section>
+
+      <Breadcrumb.Divider icon="right angle" />
+
+      <Breadcrumb.Section
+        as={Link}
+        to={linkTo.QUALITY_CONTROL_SCORES({ id: qualityControl.id })}
+      >
+        {qualityControl.name}
+      </Breadcrumb.Section>
+      <Breadcrumb.Divider icon="right angle" />
+
+      <Breadcrumb.Section active>
+        {executionTimestamp ? (
+          <DateDecorator date={executionTimestamp} />
+        ) : (
+          <FormattedMessage id={`score.not_executed`} />
+        )}
+      </Breadcrumb.Section>
+    </Breadcrumb>
+  );
+}

package/src/components/scores/ScoreDetails.js

@@ -0,0 +1,67 @@
+import _ from "lodash/fp";
+import React, { useContext } from "react";
+import { FormattedMessage } from "react-intl";
+import { Header, Icon, List, Segment } from "semantic-ui-react";
+import { columnDecorator } from "@truedat/core/services";
+import columns from "../qualityControls/qualityControlScoresColumns";
+import ScoreContext from "./ScoreContext";
+
+export default function ScoreDetails() {
+  const { score } = useContext(ScoreContext);
+  const details = _.prop("details")(score);
+
+  return (
+    <>
+      <Header as="h3">
+        <Icon name="info" size="small" />
+        <Header.Content>
+          <FormattedMessage id="score.information" />
+        </Header.Content>
+      </Header>
+      <Segment>
+        <List>
+          {columns.map((column, key) => (
+            <List.Item key={key}>
+              <List.Header>
+                <FormattedMessage id={`scores.props.${column.name}`} />
+              </List.Header>
+              <List.Description>
+                {columnDecorator(column)(score)}
+              </List.Description>
+            </List.Item>
+          ))}
+        </List>
+      </Segment>
+      {details && !_.isEmpty(details) ? (
+        <>
+          <Header as="h3">
+            <Icon name="tasks" size="small" />
+            <Header.Content>
+              <FormattedMessage id="score.details" />
+            </Header.Content>
+          </Header>
+          <Segment>
+            <List>
+              {_.flow(
+                _.toPairs,
+                _.map(([key, value]) => (
+                  <List.Item key={key}>
+                    <List.Content>
+                      <List.Header>
+                        <FormattedMessage
+                          id={`score.detail.label.${key}`}
+                          defaultMessage={key}
+                        />
+                      </List.Header>
+                      <List.Description>{`${value}`}</List.Description>
+                    </List.Content>
+                  </List.Item>
+                ))
+              )(details)}
+            </List>
+          </Segment>
+        </>
+      ) : null}
+    </>
+  );
+}

package/src/components/scores/ScoreEvents.js

@@ -0,0 +1,59 @@
+import _ from "lodash/fp";
+import React, { useContext } from "react";
+import { useIntl, FormattedMessage } from "react-intl";
+import { Table } from "semantic-ui-react";
+import { columnDecorator } from "@truedat/core/services";
+import { DateDecorator } from "@truedat/core/services/columnDecorators";
+
+import ScoreContext from "./ScoreContext";
+
+const columns = [
+  {
+    name: "inserted_at",
+    fieldSelector: ({ inserted_at }) => ({ date: inserted_at }),
+    fieldDecorator: DateDecorator,
+  },
+  {
+    name: "type",
+    fieldDecorator: (type) => (
+      <FormattedMessage id={`score.event.type.${type}`} />
+    ),
+  },
+  {
+    name: "message",
+  },
+];
+export default function ScoreEvents() {
+  const { score } = useContext(ScoreContext);
+  const { formatMessage } = useIntl();
+
+  const events = _.prop("events")(score);
+
+  return (
+    <Table>
+      <Table.Header>
+        <Table.Row>
+          {columns.map(({ name }, idx) => (
+            <Table.HeaderCell
+              key={idx}
+              content={formatMessage({ id: `scores.event.props.${name}` })}
+            />
+          ))}
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {events.map((event, rowKey) => (
+          <Table.Row key={rowKey}>
+            {columns.map((column, key) => (
+              <Table.Cell
+                key={key}
+                textAlign={column.textAlign}
+                content={columnDecorator(column)(event)}
+              />
+            ))}
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  );
+}

package/src/components/scores/ScoreGroup.js

@@ -0,0 +1,83 @@
+import _ from "lodash/fp";
+import React from "react";
+import { useIntl } from "react-intl";
+import { useParams, Link } from "react-router-dom";
+import { Table } from "semantic-ui-react";
+import { columnDecorator } from "@truedat/core/services";
+import { linkTo } from "@truedat/core/routes";
+import { useScoreGroupShow } from "../../hooks/useScoreGroups";
+import ScoreGroupMessage from "./ScoreGroupMessage";
+import ScoreStatusDecorator from "./ScoreStatusDecorator";
+import ScoreGroupBreadcrumbs from "./ScoreGroupBreadcrumbs";
+
+const DynamicFormViewer = React.lazy(() =>
+  import("@truedat/df/components/DynamicFormViewer")
+);
+
+const QualityControlLink = ({ id, name }) => (
+  <Link to={linkTo.QUALITY_CONTROL({ id })}>{name}</Link>
+);
+const COLUMNS = [
+  {
+    name: "score.props.status",
+    fieldSelector: _.identity,
+    fieldDecorator: ScoreStatusDecorator,
+  },
+  {
+    name: "quality_control.props.name",
+    fieldSelector: "quality_control",
+    fieldDecorator: QualityControlLink,
+  },
+];
+
+export default function ScoreGroup() {
+  const { formatMessage } = useIntl();
+  const { id } = useParams();
+
+  const { data } = useScoreGroupShow(id);
+  const scoreGroup = data?.data;
+
+  const scores = scoreGroup?.scores;
+  const count = _.size(scores);
+  const pendingCount = _.flow(
+    _.reject(({ status }) => _.contains(status)(["SUCCEEDED", "FAILED"])),
+    _.size
+  )(scores);
+
+  return _.isEmpty(scoreGroup) ? null : (
+    <>
+      <ScoreGroupBreadcrumbs timestamp={scoreGroup.inserted_at} />
+      <ScoreGroupMessage count={count} pending={pendingCount} />
+      <DynamicFormViewer
+        template={scoreGroup.df_type}
+        content={scoreGroup.dynamic_content}
+      />
+      <Table>
+        <Table.Header>
+          <Table.Row>
+            {COLUMNS.map(({ name: id, textAlign }, i) => (
+              <Table.HeaderCell
+                key={i}
+                content={formatMessage({ id })}
+                textAlign={textAlign}
+              />
+            ))}
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {scores?.map((score, i) => (
+            <Table.Row key={i}>
+              {COLUMNS.map(({ textAlign, ...column }, i) => (
+                <Table.Cell
+                  key={i}
+                  content={columnDecorator(column)(score)}
+                  textAlign={textAlign}
+                />
+              ))}
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table>
+    </>
+  );
+}

package/src/components/scores/ScoreGroupBreadcrumbs.js

@@ -0,0 +1,25 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Breadcrumb } from "semantic-ui-react";
+import { Link } from "react-router-dom";
+import { FormattedMessage } from "react-intl";
+import { DateTime } from "@truedat/core/components";
+import { SCORE_GROUPS } from "@truedat/core/routes";
+
+export default function ScoreGroupBreadcrumbs({ timestamp }) {
+  return (
+    <Breadcrumb>
+      <Breadcrumb.Section as={Link} to={SCORE_GROUPS}>
+        <FormattedMessage id="sidemenu.executions" />
+      </Breadcrumb.Section>
+      <Breadcrumb.Divider icon="right angle" />
+      <Breadcrumb.Section active>
+        <DateTime value={timestamp} />
+      </Breadcrumb.Section>
+    </Breadcrumb>
+  );
+}
+
+ScoreGroupBreadcrumbs.propTypes = {
+  timestamp: PropTypes.string,
+};

package/src/components/{qualityControls/ExecutionForm.js → scores/ScoreGroupForm.js}

@@ -10,7 +10,7 @@ const DynamicForm = React.lazy(() =>
   import("@truedat/df/components/DynamicForm")
 );
 
-export const ExecutionForm = ({ count, onSubmit, onCancel }) => {
+export default function ScoreGroupForm({ count, onSubmit, onCancel }) {
   const { formatMessage } = useIntl();
   const [content, setContent] = useState({});
   const [template, setTemplate] = useState();
@@ -25,17 +25,17 @@ export const ExecutionForm = ({ count, onSubmit, onCancel }) => {
     }
   };
 
-  const handleTemplateSelected = (e, { template }) => setTemplate(template);
+  const handleTemplateSelected = (_e, { template }) => setTemplate(template);
 
   const isInvalid = () =>
-    template && !_.isEmpty(validateContent(template)(content));
+    !template || !_.isEmpty(validateContent(template)(content));
 
   return (
     <>
       <Header
         as="h2"
         content={formatMessage({
-          id: "implementations.actions.execution.confirmation.header",
+          id: "quality_controls.actions.execution.confirmation.header",
         })}
       />
       <Form loading={templatesLoading}>
@@ -51,7 +51,7 @@ export const ExecutionForm = ({ count, onSubmit, onCancel }) => {
             <Header
               as="h3"
               content={formatMessage({
-                id: "implementations.actions.execution.confirmation.legend",
+                id: "quality_controls.actions.execution.confirmation.legend",
               })}
             />
             <div
@@ -73,10 +73,10 @@ export const ExecutionForm = ({ count, onSubmit, onCancel }) => {
             {
               id:
                 count === 1
-                  ? "implementation.actions.execution.confirmation.content"
-                  : "implementations.actions.execution.confirmation.content",
+                  ? "quality_control.actions.execution.confirmation.content"
+                  : "quality_controls.actions.execution.confirmation.content",
             },
-            { implementations_count: count }
+            { count }
           )}
         </p>
         <div className="actions">
@@ -88,19 +88,17 @@ export const ExecutionForm = ({ count, onSubmit, onCancel }) => {
           <Button
             primary
             disabled={isInvalid()}
-            onClick={() => onSubmit(content)}
+            onClick={() => onSubmit({ content, df_type: template.name })}
             content={formatMessage({ id: "actions.create" })}
           />
         </div>
       </Form>
     </>
   );
-};
+}
 
-ExecutionForm.propTypes = {
+ScoreGroupForm.propTypes = {
   count: PropTypes.number,
   onSubmit: PropTypes.func,
   onCancel: PropTypes.func,
 };
-
-export default ExecutionForm;

package/src/components/scores/ScoreGroupLink.js

@@ -0,0 +1,18 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Link } from "react-router-dom";
+import { DateTime } from "@truedat/core/components";
+import { linkTo } from "@truedat/core/routes";
+
+export default function ScoreGroupLink({ id, inserted_at }) {
+  return (
+    <Link to={linkTo.SCORE_GROUP({ id })}>
+      <DateTime value={inserted_at} />
+    </Link>
+  );
+}
+
+ScoreGroupLink.propTypes = {
+  id: PropTypes.string,
+  inserted_at: PropTypes.string,
+};

package/src/components/scores/ScoreGroupMessage.js

@@ -0,0 +1,25 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { Message } from "semantic-ui-react";
+
+export default function ScoreGroupMessage({ count, pending }) {
+  const { formatMessage } = useIntl();
+  return pending ? (
+    <Message
+      header={formatMessage({ id: "scores.pending.header" })}
+      content={formatMessage({ id: "scores.pending.content" }, { pending })}
+    />
+  ) : (
+    <Message
+      success
+      header={formatMessage({ id: "scores.completed.header" })}
+      content={formatMessage({ id: "scores.completed.content" }, { count })}
+    />
+  );
+}
+
+ScoreGroupMessage.propTypes = {
+  count: PropTypes.number,
+  pending: PropTypes.number,
+};