@truedat/qx 5.17.2 → 5.18.0

package/src/components/qualityControls/QualityControlHistory.js

@@ -0,0 +1,81 @@
+import _ from "lodash/fp";
+import React, { useContext } from "react";
+import { FormattedMessage } from "react-intl";
+import { Table, Header, Icon } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { columnDecorator } from "@truedat/core/services";
+
+import QxContext from "../QxContext";
+
+const translateDecorator = (id) =>
+  id ? <FormattedMessage id={id} defaultMessage={id} /> : null;
+
+export default function QualityControlsHistory() {
+  const { qualityControl, loading } = useContext(QxContext);
+  const versions = _.propOr([], "versions")(qualityControl);
+
+  const columns = [
+    {
+      name: "name",
+    },
+    {
+      name: "version",
+    },
+    {
+      name: "status",
+      fieldSelector: ({ status }) =>
+        translateDecorator(`quality_control.status.${status}`),
+      width: 2,
+    },
+  ];
+
+  const { formatMessage } = useIntl();
+  return (
+    <>
+      {!_.isEmpty(versions) && (
+        <Table sortable>
+          <Table.Header>
+            <Table.Row>
+              {columns
+                ? columns.map((column, key) => (
+                    <Table.HeaderCell
+                      key={key}
+                      width={column.width}
+                      content={formatMessage({
+                        id: `quality_control.form.${
+                          column.header || column.name
+                        }`,
+                        defaultMessage: column.name,
+                      })}
+                      className={_.path("sort.name")(column) ? "" : "disabled"}
+                    />
+                  ))
+                : null}
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {versions.map((version, i) => (
+              <Table.Row key={i}>
+                {columns.map((column, i) => (
+                  <Table.Cell
+                    key={i}
+                    textAlign={column.textAlign}
+                    content={columnDecorator(column)(version)}
+                  />
+                ))}
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+      )}
+      {_.isEmpty(versions) && !loading && (
+        <Header as="h4">
+          <Icon name="search" />
+          <Header.Content>
+            {formatMessage({ id: "ruleImplementations.search.results.empty" })}
+          </Header.Content>
+        </Header>
+      )}
+    </>
+  );
+}

package/src/components/qualityControls/QualityControlRoutes.js

@@ -0,0 +1,84 @@
+import React from "react";
+import { Route, Switch } from "react-router-dom";
+import { Unauthorized } from "@truedat/core/components";
+import { useAuthorized } from "@truedat/core/hooks";
+import {
+  QUALITY_CONTROLS,
+  QUALITY_CONTROL_NEW,
+  QUALITY_CONTROL_EDIT,
+  QUALITY_CONTROL_NEW_DRAFT,
+  QUALITY_CONTROL,
+} from "@truedat/core/routes";
+import { QUALITY_CONTROL_HISTORY } from "../../../../core/src/routes";
+import { SearchContextProvider } from "../search/SearchContext";
+import QualityControls from "./QualityControls";
+import QualityControl from "./QualityControl";
+import QualityControlHeader from "./QualityControlHeader";
+import QualityControlHistory from "./QualityControlHistory";
+import NewQualityControl from "./NewQualityControl";
+import EditQualityControl from "./EditQualityControl";
+import NewDraftQualityControl from "./NewDraftQualityControl";
+
+export default function QxRoutes() {
+  const authorized = useAuthorized("quality_control");
+
+  return (
+    <SearchContextProvider
+      initialSortColumn="updated_at"
+      initialSortDirection="descending"
+    >
+      <Switch>
+        <Route
+          exact
+          path={QUALITY_CONTROLS}
+          render={() => (authorized ? <QualityControls /> : <Unauthorized />)}
+        />
+        <Route
+          exact
+          path={QUALITY_CONTROL_NEW}
+          render={() => (authorized ? <NewQualityControl /> : <Unauthorized />)}
+        />
+        <Route
+          exact
+          path={QUALITY_CONTROL_EDIT}
+          render={() =>
+            authorized ? <EditQualityControl /> : <Unauthorized />
+          }
+        />
+        <Route
+          exact
+          path={QUALITY_CONTROL_NEW_DRAFT}
+          render={() =>
+            authorized ? <NewDraftQualityControl /> : <Unauthorized />
+          }
+        />
+        <Route
+          exact
+          path={QUALITY_CONTROL}
+          render={() =>
+            authorized ? (
+              <QualityControlHeader>
+                <QualityControl />
+              </QualityControlHeader>
+            ) : (
+              <Unauthorized />
+            )
+          }
+        />
+        <Route
+          exact
+          path={QUALITY_CONTROL_HISTORY}
+          render={() =>
+            authorized ? (
+              <QualityControlHeader>
+                <QualityControlHistory />
+              </QualityControlHeader>
+            ) : (
+              <Unauthorized />
+            )
+          }
+        />
+      </Switch>
+    </SearchContextProvider>
+  );
+}

package/src/components/qualityControls/QualityControlRow.js

@@ -0,0 +1,24 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { Table } from "semantic-ui-react";
+import { columnDecorator } from "@truedat/core/services";
+
+export default function QualityControlRow({ columns, qualityControl }) {
+  return _.isEmpty(columns) || _.isEmpty(qualityControl) ? null : (
+    <Table.Row>
+      {columns.map((column, i) => (
+        <Table.Cell
+          key={i}
+          textAlign={column.textAlign}
+          content={columnDecorator(column)(qualityControl)}
+        />
+      ))}
+    </Table.Row>
+  );
+}
+
+QualityControlRow.propTypes = {
+  columns: PropTypes.array,
+  qualityControl: PropTypes.object,
+};

package/src/components/qualityControls/QualityControlTabs.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { Menu } from "semantic-ui-react";
+import { Link, useRouteMatch, useParams } from "react-router-dom";
+import { FormattedMessage } from "react-intl";
+import {
+  QUALITY_CONTROL,
+  QUALITY_CONTROL_HISTORY,
+  linkTo,
+} from "@truedat/core/routes";
+
+export default function QualityControlTabs() {
+  const match = useRouteMatch();
+  const { id } = useParams();
+
+  return (
+    <Menu attached="top" pointing secondary tabular>
+      <Menu.Item
+        active={match.path === QUALITY_CONTROL}
+        as={Link}
+        to={linkTo.QUALITY_CONTROL({ id })}
+      >
+        <FormattedMessage id="quality_control.tabs.quality_control" />
+      </Menu.Item>
+
+      <Menu.Item
+        active={match.path === QUALITY_CONTROL_HISTORY}
+        as={Link}
+        to={linkTo.QUALITY_CONTROL_HISTORY({ id })}
+      >
+        <FormattedMessage id="quality_control.tabs.history" />
+      </Menu.Item>
+    </Menu>
+  );
+}

package/src/components/qualityControls/QualityControls.js

@@ -0,0 +1,66 @@
+import _ from "lodash/fp";
+import React from "react";
+import { useIntl, FormattedMessage } from "react-intl";
+import { Link } from "react-router-dom";
+import {
+  Button,
+  Container,
+  Header,
+  Icon,
+  Segment,
+  Grid,
+} from "semantic-ui-react";
+import { QUALITY_CONTROL_NEW } from "@truedat/core/routes";
+import useAuthorizedAction from "@truedat/core/hooks/useAuthorizedAction";
+import Loading from "@truedat/core/src/components/Loading";
+import QualityControlsSearch from "../search/QualityControlsSearch";
+import QualityControlsTable from "./QualityControlsTable";
+
+export default function QualityControls() {
+  const { formatMessage } = useIntl();
+
+  const { data, loading } = useAuthorizedAction({
+    action: "createQualityControls",
+  });
+  const canCreate = _.prop("has_any_domain")(data);
+  return (
+    <Segment loading={false}>
+      <Header as="h2">
+        <Icon circular name="archive" />
+        <Header.Content>
+          <FormattedMessage id="quality_controls.header" />
+          <Header.Subheader>
+            <FormattedMessage id="quality_controls.subheader" />
+          </Header.Subheader>
+        </Header.Content>
+      </Header>
+      <Grid>
+        <Grid.Column width={8}>
+          <QualityControlsSearch />
+        </Grid.Column>
+
+        <Grid.Column width={8}>
+          <Container textAlign="right">
+            {loading ? (
+              <Loading />
+            ) : (
+              <>
+                {canCreate ? (
+                  <Button
+                    primary
+                    as={Link}
+                    to={QUALITY_CONTROL_NEW}
+                    content={formatMessage({
+                      id: "quality_controls.actions.create",
+                    })}
+                  />
+                ) : null}
+              </>
+            )}
+          </Container>
+        </Grid.Column>
+      </Grid>
+      <QualityControlsTable />
+    </Segment>
+  );
+}

package/src/components/qualityControls/QualityControlsTable.js

@@ -0,0 +1,139 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { Link } from "react-router-dom";
+import { sortColumn as sortHandler } from "@truedat/core/services/sort";
+import { useIntl, FormattedMessage } from "react-intl";
+import { Table, Header, Icon } from "semantic-ui-react";
+import { linkTo } from "@truedat/core/routes";
+import Moment from "react-moment";
+
+import { useSearchContext } from "../search/SearchContext";
+import QualityControlRow from "./QualityControlRow";
+
+const translateDecorator = (id) =>
+  id ? <FormattedMessage id={id} defaultMessage={id} /> : null;
+
+const DateDecorator = ({ date }) => {
+  const { locale } = useIntl();
+  return date ? (
+    <Moment locale={locale} date={date} format="YYYY-MM-DD HH:mm" />
+  ) : null;
+};
+
+DateDecorator.propTypes = {
+  date: PropTypes.string,
+};
+
+export default function QualityControlsTable() {
+  const {
+    qualityControls,
+    loadingSearch: loading,
+    sortColumn,
+    sortDirection,
+    setSortColumn,
+    setSortDirection,
+  } = useSearchContext();
+  const { formatMessage } = useIntl();
+
+  const columns = [
+    {
+      name: "name",
+      fieldSelector: _.pick(["id", "name"]),
+      fieldDecorator: ({ id, name }) => (
+        <Link to={linkTo.QUALITY_CONTROL({ id })}>{name}</Link>
+      ),
+    },
+    {
+      name: "df_type",
+      sort: { name: "df_type" },
+      width: 2,
+    },
+    {
+      name: "result_type",
+      sort: { name: "result_type" },
+      fieldSelector: ({ result_type }) =>
+        result_type
+          ? translateDecorator(`quality_control.result_type.${result_type}`)
+          : "-",
+      width: 2,
+    },
+    {
+      name: "status",
+      sort: { name: "status" },
+      fieldSelector: ({ status }) =>
+        translateDecorator(`quality_control.status.${status}`),
+      width: 2,
+    },
+    {
+      name: "updated_at",
+      sort: { name: "updated_at" },
+      fieldSelector: ({ updated_at }) => ({
+        date: updated_at,
+      }),
+      width: 2,
+      fieldDecorator: DateDecorator,
+      textAlign: "center",
+    },
+  ];
+
+  return (
+    <>
+      {!_.isEmpty(qualityControls) && (
+        <Table sortable>
+          <Table.Header>
+            <Table.Row>
+              {columns
+                ? columns.map((column, key) => (
+                    <Table.HeaderCell
+                      key={key}
+                      width={column.width}
+                      content={formatMessage({
+                        id: `quality_control.form.${
+                          column.header || column.name
+                        }`,
+                        defaultMessage: column.name,
+                      })}
+                      sorted={
+                        _.path("sort.name")(column) === sortColumn
+                          ? sortDirection
+                          : null
+                      }
+                      className={_.path("sort.name")(column) ? "" : "disabled"}
+                      onClick={() =>
+                        sortHandler(
+                          column,
+                          () => {},
+                          setSortDirection,
+                          setSortColumn,
+                          sortDirection,
+                          sortColumn
+                        )
+                      }
+                    />
+                  ))
+                : null}
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {qualityControls.map((qc, i) => (
+              <QualityControlRow
+                key={i}
+                qualityControl={qc}
+                columns={columns}
+              />
+            ))}
+          </Table.Body>
+        </Table>
+      )}
+      {_.isEmpty(qualityControls) && !loading && (
+        <Header as="h4">
+          <Icon name="search" />
+          <Header.Content>
+            {formatMessage({ id: "ruleImplementations.search.results.empty" })}
+          </Header.Content>
+        </Header>
+      )}
+    </>
+  );
+}

package/src/components/qualityControls/ResultCriteria.js

@@ -0,0 +1,120 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { FormattedMessage } from "react-intl";
+import { Header, Icon, Segment, List } from "semantic-ui-react";
+
+export default function ResultCriteria({ qualityControl }) {
+  const { result_criteria, result_type } = qualityControl;
+  const resultCriteriaForType = {
+    percentage: <ResultCriteriaPercentage resultCriteria={result_criteria} />,
+    deviation: <ResultCriteriaDeviation resultCriteria={result_criteria} />,
+    errors_number: (
+      <ResultCriteriaErrorsNumber resultCriteria={result_criteria} />
+    ),
+  };
+
+  return (
+    <>
+      <Header as="h3">
+        <Icon name="flag checkered" size="small" />
+        <Header.Content>
+          <FormattedMessage id="quality_control.result_criteria" />
+        </Header.Content>
+      </Header>
+      <Segment>
+        {result_criteria ? (
+          <List>
+            <List.Item>
+              <List.Header>
+                <FormattedMessage id="quality.thresholds" />
+              </List.Header>
+              <List.Content>
+                <List.Description>
+                  <FormattedMessage
+                    id={`quality_control.result_type.${result_type}`}
+                  />
+                </List.Description>
+              </List.Content>
+            </List.Item>
+            {resultCriteriaForType[result_type]}
+          </List>
+        ) : (
+          <FormattedMessage id="quality_control.result_criteria.empty" />
+        )}
+      </Segment>
+    </>
+  );
+}
+
+const ResultCriteriaPercentage = ({ resultCriteria }) => (
+  <>
+    <List.Item>
+      <Icon name="circle" color="green" />
+      <List.Content>
+        <List.Header>
+          <FormattedMessage id="quality.goal" />
+        </List.Header>
+        <List.Description>{resultCriteria.goal}%</List.Description>
+      </List.Content>
+    </List.Item>
+    <List.Item>
+      <Icon name="circle" color="yellow" />
+      <List.Content>
+        <List.Header>
+          <FormattedMessage id="quality.threshold" />
+        </List.Header>
+        <List.Description>{resultCriteria.minimum}%</List.Description>
+      </List.Content>
+    </List.Item>
+  </>
+);
+
+const ResultCriteriaDeviation = ({ resultCriteria }) => (
+  <>
+    <List.Item>
+      <Icon name="circle" color="green" />
+      <List.Content>
+        <List.Header>
+          <FormattedMessage id="quality.goal" />
+        </List.Header>
+        <List.Description>{resultCriteria.goal}%</List.Description>
+      </List.Content>
+    </List.Item>
+    <List.Item>
+      <Icon name="circle" color="yellow" />
+      <List.Content>
+        <List.Header>
+          <FormattedMessage id="quality.threshold" />
+        </List.Header>
+        <List.Description>{resultCriteria.maximum}%</List.Description>
+      </List.Content>
+    </List.Item>
+  </>
+);
+
+const ResultCriteriaErrorsNumber = ({ resultCriteria }) => (
+  <>
+    <List.Item>
+      <Icon name="circle" color="green" />
+      <List.Content>
+        <List.Header>
+          <FormattedMessage id="quality.goal" />
+        </List.Header>
+        <List.Description>{resultCriteria.goal}</List.Description>
+      </List.Content>
+    </List.Item>
+    <List.Item>
+      <Icon name="circle" color="yellow" />
+      <List.Content>
+        <List.Header>
+          <FormattedMessage id="quality.threshold" />
+        </List.Header>
+        <List.Description>{resultCriteria.maximum}</List.Description>
+      </List.Content>
+    </List.Item>
+  </>
+);
+
+ResultCriteria.propTypes = {
+  qualityControl: PropTypes.object,
+};

package/src/components/qualityControls/ResultType.js

@@ -0,0 +1,57 @@
+import _ from "lodash/fp";
+import React, { useContext } from "react";
+import { useIntl } from "react-intl";
+import { Controller, useFormContext } from "react-hook-form";
+import { Dropdown, Form, Segment } from "semantic-ui-react";
+import QxContext from "@truedat/qx/components/QxContext";
+
+import Deviation from "./resultCriterias/Deviation";
+import ErrorsNumber from "./resultCriterias/ErrorsNumber";
+import Percentage from "./resultCriterias/Percentage";
+
+export default function ResultType() {
+  const { formatMessage } = useIntl();
+  const { control, watch } = useFormContext();
+  const context = useContext(QxContext);
+
+  const resultType = watch("result_type");
+  const resultTypeOptions = _.map((v) => ({
+    key: v,
+    value: v,
+    text: formatMessage({ id: `quality_control.result_type.${v}` }),
+  }))(["percentage", "deviation", "errors_number"]);
+
+  const resultCriteriaForType = {
+    deviation: <Deviation />,
+    errors_number: <ErrorsNumber />,
+    percentage: <Percentage />,
+  };
+
+  return (
+    <Segment>
+      <Controller
+        name={"result_type"}
+        control={control}
+        rules={{ required: true }}
+        render={({ field: { onBlur, onChange, value } }) => (
+          <Form.Field required>
+            <label>
+              {formatMessage({ id: "quality_control.result_type" })}
+            </label>
+            <Dropdown
+              selection
+              placeholder={formatMessage({ id: "quality_control.result_type" })}
+              onBlur={onBlur}
+              options={resultTypeOptions}
+              onChange={(_e, { value }) => onChange(value)}
+              value={value}
+            />
+          </Form.Field>
+        )}
+      />
+      <QxContext.Provider value={{ ...context, field: "result_criteria" }}>
+        {resultType ? resultCriteriaForType[resultType] : null}
+      </QxContext.Provider>
+    </Segment>
+  );
+}

package/src/components/qualityControls/resultCriterias/Deviation.js

@@ -0,0 +1,89 @@
+import React, { useContext } from "react";
+import { useIntl } from "react-intl";
+import { Controller, useFormContext } from "react-hook-form";
+import { Form } from "semantic-ui-react";
+import QxContext from "@truedat/qx/components/QxContext";
+import { FieldLabel } from "@truedat/core/components";
+import { numberRules } from "@truedat/core/services/formRules";
+
+export default function Deviation() {
+  const { formatMessage } = useIntl();
+  const { field } = useContext(QxContext);
+  const { control, watch } = useFormContext();
+
+  const maximumField = `${field}.maximum`;
+  const goalField = `${field}.goal`;
+  const maximum = watch(maximumField);
+  const goal = watch(goalField);
+
+  return (
+    <>
+      <Controller
+        name={goalField}
+        control={control}
+        rules={numberRules({
+          formatMessage,
+          minValue: 0,
+          maxValue: maximum,
+          required: true,
+        })}
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <FieldLabel
+            label={formatMessage({
+              id: "quality_control.result_criteria.deviation.goal",
+            })}
+            required
+            error={error?.message}
+          >
+            <Form.Input
+              autoComplete="off"
+              placeholder={formatMessage({
+                id: "quality_control.result_criteria.deviation.goal",
+              })}
+              error={!!error}
+              onBlur={onBlur}
+              onChange={(_e, { value }) => onChange(value)}
+              value={value}
+            />
+          </FieldLabel>
+        )}
+      />
+      <Controller
+        name={maximumField}
+        control={control}
+        rules={numberRules({
+          formatMessage,
+          minValue: goal,
+          maxValue: 100,
+          required: true,
+        })}
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <FieldLabel
+            label={formatMessage({
+              id: "quality_control.result_criteria.deviation.maximum",
+            })}
+            required
+            error={error?.message}
+          >
+            <Form.Input
+              autoComplete="off"
+              placeholder={formatMessage({
+                id: "quality_control.result_criteria.deviation.maximum",
+              })}
+              error={!!error}
+              onBlur={onBlur}
+              onChange={(_e, { value }) => onChange(value)}
+              value={value}
+            />
+          </FieldLabel>
+        )}
+      />
+    </>
+  );
+}