@truedat/qx 7.0.8 → 7.1.0

package/src/components/qualityControls/QualityControlRow.js

@@ -1,12 +1,28 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { Table } from "semantic-ui-react";
+import { Checkbox, Table } from "semantic-ui-react";
 import { columnDecorator } from "@truedat/core/services";
 
-export default function QualityControlRow({ columns, qualityControl }) {
+export default function QualityControlRow({
+  columns,
+  qualityControl,
+  withCheck = false,
+  onChange,
+  checked,
+}) {
   return _.isEmpty(columns) || _.isEmpty(qualityControl) ? null : (
     <Table.Row>
+      {withCheck ? (
+        <Table.Cell collapsing width="1" textAlign="center">
+          <Checkbox
+            id={`row-checkbox-${qualityControl.id}`}
+            checked={checked}
+            onChange={onChange}
+          />
+        </Table.Cell>
+      ) : null}
+
       {columns.map((column, i) => (
         <Table.Cell
           key={i}
@@ -21,4 +37,7 @@ export default function QualityControlRow({ columns, qualityControl }) {
 QualityControlRow.propTypes = {
   columns: PropTypes.array,
   qualityControl: PropTypes.object,
+  withCheck: PropTypes.bool,
+  onChange: PropTypes.func,
+  checked: PropTypes.bool,
 };

package/src/components/qualityControls/QualityControlScores.js

@@ -0,0 +1,140 @@
+import _ from "lodash/fp";
+import React, { useContext } from "react";
+import { useIntl } from "react-intl";
+import { useParams, Link } from "react-router-dom";
+import { Button, Table, Label, Message, Icon } from "semantic-ui-react";
+import { ConfirmModal, Loading } from "@truedat/core/components";
+import { columnDecorator } from "@truedat/core/services";
+import { linkTo } from "@truedat/core/routes";
+import { useQualityControlScores, useScoreDelete } from "../../hooks/useScores";
+import QxContext from "../QxContext";
+import columns from "./qualityControlScoresColumns";
+
+const VALID_DELETE_STATUSES = ["PENDING", "SUCCEEDED", "FAILED"];
+
+export default function QualityControlScores() {
+  const { id } = useParams();
+  const { formatMessage } = useIntl();
+  const {
+    data,
+    loading: loadingQualityScores,
+    mutate,
+  } = useQualityControlScores(id);
+  const { trigger: deleteScore, loading: deletingScore } = useScoreDelete();
+  const {
+    qualityControl,
+    actions,
+    loading: loadingQualityControl,
+  } = useContext(QxContext);
+
+  const canDeleteScore = _.includes("delete_score")(actions);
+
+  const loading =
+    loadingQualityScores || loadingQualityControl || deletingScore;
+  const scores = data?.data;
+
+  const versionsMap = _.flow(
+    _.prop("versions"),
+    _.map((qcv) => [qcv.version_id, qcv]),
+    _.fromPairs
+  )(qualityControl);
+
+  const scoreRows = _.flow(
+    _.groupBy("quality_control_version_id"),
+    _.toPairs,
+    _.orderBy(([id, _info]) => id, "desc"),
+    _.map(([id, info]) => [versionsMap[parseInt(id)], info]),
+    _.mapValues(([qcv, info]) =>
+      info.map((score, indexWithinVersion) => ({
+        ...score,
+        quality_control: qcv,
+        firstInVersion: indexWithinVersion == 0,
+      }))
+    ),
+    _.reduce((acc, versionScores) => [...acc, ...versionScores], [])
+  )(scores);
+
+  return loading ? (
+    <Loading />
+  ) : _.isEmpty(scores) ? (
+    <Message
+      header={formatMessage({
+        id: "scores.empty",
+      })}
+    />
+  ) : (
+    <Table>
+      <Table.Header>
+        <Table.Row>
+          {columns.map(({ name }, idx) => (
+            <Table.HeaderCell
+              key={idx}
+              content={formatMessage({ id: `scores.props.${name}` })}
+            />
+          ))}
+          {canDeleteScore ? <Table.HeaderCell /> : null}
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {scoreRows.map((score, key) => {
+          const active =
+            score.quality_control.version === qualityControl.version;
+          const tagLabel = score.firstInVersion
+            ? `${formatMessage({
+                id: "quality_control.props.version",
+              })}: ${score.quality_control.version}`
+            : null;
+          return (
+            <React.Fragment key={key}>
+              {tagLabel ? (
+                <Table.Row>
+                  <Table.Cell>
+                    <Label
+                      as={Link}
+                      to={linkTo.QUALITY_CONTROL_HISTORY({ id })}
+                      active={active}
+                      ribbon
+                    >
+                      {tagLabel}
+                    </Label>
+                  </Table.Cell>
+                </Table.Row>
+              ) : null}
+              <Table.Row warning={active}>
+                {columns.map((column, key) => (
+                  <Table.Cell
+                    key={key}
+                    textAlign={column.textAlign}
+                    content={columnDecorator(column)(score)}
+                  />
+                ))}
+
+                {canDeleteScore ? (
+                  <Table.Cell onClick={(e) => e.stopPropagation()}>
+                    {_.includes(score.status)(VALID_DELETE_STATUSES) ? (
+                      <ConfirmModal
+                        icon="trash"
+                        trigger={
+                          <Button icon basic color="red">
+                            <Icon name="trash alternate outline" color="red" />
+                          </Button>
+                        }
+                        header={formatMessage({
+                          id: "score.actions.delete.confirmation.header",
+                        })}
+                        content={formatMessage({
+                          id: "score.actions.delete.confirmation.content",
+                        })}
+                        onConfirm={() => deleteScore(score).then(mutate)}
+                      />
+                    ) : null}
+                  </Table.Cell>
+                ) : null}
+              </Table.Row>
+            </React.Fragment>
+          );
+        })}
+      </Table.Body>
+    </Table>
+  );
+}

package/src/components/qualityControls/QualityControlTabs.js

@@ -1,34 +1,35 @@
 import React from "react";
 import { Menu } from "semantic-ui-react";
-import { Link, useRouteMatch, useParams } from "react-router-dom";
+import { Link, useLocation, useParams } from "react-router-dom";
 import { FormattedMessage } from "react-intl";
-import {
-  QUALITY_CONTROL,
-  QUALITY_CONTROL_HISTORY,
-  linkTo,
-} from "@truedat/core/routes";
+import { linkTo } from "@truedat/core/routes";
 
 export default function QualityControlTabs() {
-  const match = useRouteMatch();
-  const { id } = useParams();
+  const { pathname } = useLocation();
+  const urlParams = useParams();
+
+  const tabs = [
+    {
+      url: linkTo.QUALITY_CONTROL(urlParams),
+      text: "quality_control.tabs.quality_control",
+    },
+    {
+      url: linkTo.QUALITY_CONTROL_HISTORY(urlParams),
+      text: "quality_control.tabs.history",
+    },
+    {
+      url: linkTo.QUALITY_CONTROL_SCORES(urlParams),
+      text: "quality_control.tabs.scores",
+    },
+  ];
 
   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>
+      {tabs.map(({ url, text }, key) => (
+        <Menu.Item key={key} active={pathname === url} as={Link} to={url}>
+          <FormattedMessage id={text} />
+        </Menu.Item>
+      ))}
     </Menu>
   );
 }

package/src/components/qualityControls/QualityControls.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useEffect } from "react";
+import React, { useState } from "react";
 import { useIntl, FormattedMessage } from "react-intl";
 import { Link, useHistory } from "react-router-dom";
 import {
@@ -10,15 +10,17 @@ import {
   Icon,
   Segment,
   Grid,
+  Dimmer,
+  Loader,
 } from "semantic-ui-react";
 import { linkTo, QUALITY_CONTROL_NEW } from "@truedat/core/routes";
 import useAuthorizedAction from "@truedat/core/hooks/useAuthorizedAction";
-import Loading from "@truedat/core/components/Loading";
 import { useSearchContext } from "@truedat/core/search/SearchContext";
 import SearchWidget from "@truedat/core/search/SearchWidget";
-import { useExecutionGroupsCreate } from "../../hooks/useExecutionGroups";
-import ExecutionPopup from "./ExecutionPopup";
+import { useScoreGroupCreate } from "@truedat/qx/hooks/useScoreGroups";
+import { ScoreGroupPopup } from "../scores";
 import QualityControlsTable from "./QualityControlsTable";
+import QualityControlsLabelResults from "./QualityControlsLabelResults";
 
 export const QualityControls = () => {
   const { formatMessage } = useIntl();
@@ -30,39 +32,111 @@ export const QualityControls = () => {
   const canCreate = _.prop("has_any_domain")(data);
 
   const {
+    count,
     query,
     searchMust,
-    loadingFilters: loading,
     hiddenFilters,
     toggleHiddenFilterValue,
     searchData,
     defaultFilters,
+    removeHiddenFilter,
+    loading,
   } = useSearchContext();
 
-  const canExecuteQualityControl = _.matches({ executable: [true] })(
-    hiddenFilters
+  const [selectedQualityControls, setSelectedQualityControls] = useState([]);
+  const [executeQualityControlOn, setExecuteMode] = useState(
+    _.matches({ active: [true] })(hiddenFilters)
   );
 
-  const status = _.prop("status")(defaultFilters);
-
   const qualityControls = searchData?.data;
   const qualityControlsActions = searchData?.actions;
+  const status = _.prop("status")(defaultFilters);
 
-  const { trigger: triggerCreateExecutionGroup } = useExecutionGroupsCreate();
+  const allChecked = () => {
+    const ids = _.map(_.prop("version_id"))(qualityControls);
+    return (
+      _.negate(_.isEmpty)(selectedQualityControls) &&
+      _.every((id) => _.includes(id)(selectedQualityControls))(ids)
+    );
+  };
 
-  const handleSubmit = (df_content) => {
-    triggerCreateExecutionGroup({
-      query,
-      must: searchMust,
-      df_content,
-    }).then(({ data }) => {
+  const addAll = (_e, target) => {
+    const checkedAll = _.prop("checked")(target);
+    const ids = _.map(_.prop("version_id"))(qualityControls);
+    checkedAll
+      ? setSelectedQualityControls(
+          _.flow(_.concat(ids), _.uniq)(selectedQualityControls)
+        )
+      : setSelectedQualityControls(
+          _.flow(_.difference(selectedQualityControls), _.uniq)(ids)
+        );
+  };
+  const isRowChecked = (qualityControl) => {
+    const id = _.prop("version_id")(qualityControl);
+    return _.some((selectedId) => _.eq(id, selectedId))(
+      selectedQualityControls
+    );
+  };
+
+  const checkRow = (qualityControl) => {
+    const id = _.prop("version_id")(qualityControl);
+    const exists = _.some((selectedId) => _.eq(id, selectedId))(
+      selectedQualityControls
+    );
+    exists
+      ? setSelectedQualityControls(
+          _.flow(
+            _.remove((selectedId) => _.eq(id, selectedId)),
+            _.uniq
+          )(selectedQualityControls)
+        )
+      : setSelectedQualityControls(
+          _.flow(_.concat(id), _.uniq)(selectedQualityControls)
+        );
+  };
+
+  const { trigger: triggerCreateScoreGroup, loading: groupCreating } =
+    useScoreGroupCreate();
+
+  const showActiveInfo = () => {
+    toggleHiddenFilterValue({
+      filter: "for_execution",
+      value: true,
+    });
+  };
+
+  const hideActiveInfo = () => {
+    removeHiddenFilter({ filter: "for_execution" });
+  };
+
+  const handleExecuteChange = (checked) => {
+    setExecuteMode(checked);
+    checked ? showActiveInfo() : hideActiveInfo();
+  };
+
+  const handleSubmit = ({ content, df_type }) => {
+    const score_group = {
+      dynamic_content: content,
+      df_type,
+    };
+    const body = _.isEmpty(selectedQualityControls)
+      ? {
+          score_group,
+          search: { query, must: searchMust },
+        }
+      : {
+          score_group,
+          ids: selectedQualityControls,
+        };
+
+    triggerCreateScoreGroup(body).then(({ data }) => {
       const id = _.prop("data.id")(data);
-      history.push(linkTo.QUALITY_CONTROLS_EXECUTION_GROUP({ id }));
+      history.push(linkTo.SCORE_GROUP({ id }));
     });
   };
 
   return (
-    <Segment loading={false}>
+    <Segment>
       <Header as="h2">
         <Icon circular name="archive" />
         <Header.Content>
@@ -76,53 +150,62 @@ export const QualityControls = () => {
         <Grid.Column width={8}>
           <SearchWidget />
         </Grid.Column>
-
         <Grid.Column width={8}>
           <Container textAlign="right">
-            {loading ? (
-              <Loading />
-            ) : (
-              <>
-                {status === "published" &&
-                _.size(qualityControls) > 0 &&
-                qualityControlsActions?.execute ? (
-                  <>
-                    <Checkbox
-                      id="execute_checkbox"
-                      className="bgOrange"
-                      toggle
-                      onChange={() =>
-                        toggleHiddenFilterValue({
-                          filter: "executable",
-                          value: true,
-                        })
-                      }
-                      checked={canExecuteQualityControl}
-                      style={{ top: "6px", marginRight: "7.5px" }}
-                    />
-                    <ExecutionPopup
-                      disabled={!canExecuteQualityControl}
-                      onSubmit={handleSubmit}
-                      executionGroupType={"quality_control"}
-                    />
-                  </>
-                ) : null}
-                {canCreate ? (
-                  <Button
-                    primary
-                    as={Link}
-                    to={QUALITY_CONTROL_NEW}
-                    content={formatMessage({
-                      id: "quality_controls.actions.create",
-                    })}
+            <>
+              {status === "published" &&
+              _.size(qualityControls) > 0 &&
+              qualityControlsActions?.execute ? (
+                <>
+                  <Checkbox
+                    id="execute_checkbox"
+                    className="bgOrange"
+                    toggle
+                    onChange={() =>
+                      handleExecuteChange(!executeQualityControlOn)
+                    }
+                    checked={executeQualityControlOn}
+                    style={{ top: "6px", marginRight: "7.5px" }}
                   />
-                ) : null}
-              </>
-            )}
+                  <ScoreGroupPopup
+                    loading={groupCreating}
+                    disabled={!executeQualityControlOn}
+                    onSubmit={handleSubmit}
+                    count={_.size(selectedQualityControls) || count}
+                  />
+                </>
+              ) : null}
+              {canCreate ? (
+                <Button
+                  primary
+                  as={Link}
+                  to={QUALITY_CONTROL_NEW}
+                  content={formatMessage({
+                    id: "quality_controls.actions.create",
+                  })}
+                />
+              ) : null}
+            </>
           </Container>
         </Grid.Column>
       </Grid>
-      <QualityControlsTable />
+      <QualityControlsLabelResults
+        executeQualityControlOn={executeQualityControlOn}
+        qualityControlsToExecute={_.size(selectedQualityControls)}
+      />
+      <Dimmer.Dimmable dimmed={loading}>
+        <Dimmer active={loading} inverted>
+          <Loader />
+        </Dimmer>
+
+        <QualityControlsTable
+          addAll={addAll}
+          checkedAll={allChecked()}
+          checkRow={checkRow}
+          executeQualityControlOn={executeQualityControlOn}
+          isRowChecked={isRowChecked}
+        />
+      </Dimmer.Dimmable>
     </Segment>
   );
 };

package/src/components/qualityControls/QualityControlsLabelResults.js

@@ -0,0 +1,51 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { FormattedMessage } from "react-intl";
+import { Label } from "semantic-ui-react";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+
+export const QualityControlsLabelResults = ({
+  executeQualityControlOn,
+  qualityControlsToExecute,
+}) => {
+  const { loading, count } = useSearchContext();
+
+  return (
+    <>
+      <Label className="quality-controls-label-results">
+        {loading ? (
+          <FormattedMessage id="quality_controls.searching" />
+        ) : (
+          <FormattedMessage
+            id="quality_controls.retrieved.results"
+            values={{ count }}
+          />
+        )}
+      </Label>
+
+      {!loading && executeQualityControlOn ? (
+        <Label className="quality-controls-label-results">
+          <FormattedMessage
+            id="quality_controls.execute.filtered"
+            values={{
+              count:
+                qualityControlsToExecute == 0
+                  ? count
+                  : qualityControlsToExecute,
+            }}
+          />
+        </Label>
+      ) : null}
+    </>
+  );
+};
+
+QualityControlsLabelResults.propTypes = {
+  executeQualityControlOn: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.bool,
+  ]),
+  qualityControlsToExecute: PropTypes.number,
+};
+
+export default QualityControlsLabelResults;

package/src/components/qualityControls/QualityControlsTable.js

@@ -3,7 +3,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Link } from "react-router-dom";
 import { useIntl, FormattedMessage } from "react-intl";
-import { Table, Header, Icon } from "semantic-ui-react";
+import { Checkbox, Table, Header, Icon } from "semantic-ui-react";
 import { linkTo } from "@truedat/core/routes";
 import Moment from "react-moment";
 
@@ -24,7 +24,54 @@ DateDecorator.propTypes = {
   date: PropTypes.string,
 };
 
-export default function QualityControlsTable() {
+export 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: "control_mode",
+    sort: { name: "control_mode" },
+    fieldSelector: ({ control_mode }) =>
+      control_mode
+        ? translateDecorator(`quality_control.control_mode.${control_mode}`)
+        : "-",
+    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",
+  },
+];
+
+export default function QualityControlsTable({
+  addAll,
+  checkedAll,
+  checkRow,
+  executeQualityControlOn,
+  isRowChecked,
+}) {
   const {
     searchData,
     loading,
@@ -36,53 +83,21 @@ export default function QualityControlsTable() {
 
   const qualityControls = searchData?.data;
 
-  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>
+              {executeQualityControlOn ? (
+                <Table.HeaderCell textAlign="center">
+                  <Checkbox
+                    id="selectQualityControl"
+                    onChange={addAll}
+                    checked={checkedAll}
+                  />
+                </Table.HeaderCell>
+              ) : null}
               {columns
                 ? columns.map((column, key) => (
                     <Table.HeaderCell
@@ -112,8 +127,11 @@ export default function QualityControlsTable() {
             {qualityControls.map((qc, i) => (
               <QualityControlRow
                 key={i}
+                checked={isRowChecked && isRowChecked(qc)}
                 qualityControl={qc}
                 columns={columns}
+                onChange={() => checkRow && checkRow(qc)}
+                withCheck={executeQualityControlOn}
               />
             ))}
           </Table.Body>
@@ -130,3 +148,11 @@ export default function QualityControlsTable() {
     </>
   );
 }
+
+QualityControlsTable.propTypes = {
+  addAll: PropTypes.func,
+  checkedAll: PropTypes.bool,
+  checkRow: PropTypes.func,
+  executeQualityControlOn: PropTypes.bool,
+  isRowChecked: PropTypes.func,
+};