@truedat/qx 7.0.8 → 7.1.0

package/src/components/scores/__tests__/__snapshots__/ScoreGroupsTable.spec.js.snap

@@ -0,0 +1,147 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ScoreGroupsTable /> matches the latest snapshot 1`] = `
+<div>
+  <table
+    class="ui celled collapsing striped table"
+  >
+    <thead
+      class=""
+    >
+      <tr
+        class=""
+      >
+        <th
+          class=""
+        >
+          Created
+        </th>
+        <th
+          class="center aligned"
+        >
+          Pending
+        </th>
+        <th
+          class="center aligned"
+        >
+          Queued
+        </th>
+        <th
+          class="center aligned"
+        >
+          Succeeded
+        </th>
+        <th
+          class="center aligned"
+        >
+          Failed
+        </th>
+      </tr>
+    </thead>
+    <tbody
+      class=""
+    >
+      <tr
+        class=""
+      >
+        <td
+          class=""
+        >
+          <a
+            href="/scoreGroups/36"
+          >
+            <time
+              datetime="1737381058260"
+            >
+              2025-01-20 13:50
+            </time>
+          </a>
+        </td>
+        <td
+          class="center aligned"
+        >
+          <div
+            class="ui yellow circular label"
+          >
+            1
+          </div>
+        </td>
+        <td
+          class="center aligned"
+        >
+          <div
+            class="ui yellow circular label"
+          >
+            2
+          </div>
+        </td>
+        <td
+          class="center aligned"
+        />
+        <td
+          class="center aligned"
+        />
+      </tr>
+      <tr
+        class=""
+      >
+        <td
+          class=""
+        >
+          <a
+            href="/scoreGroups/36"
+          >
+            <time
+              datetime="1737381058260"
+            >
+              2025-01-20 13:50
+            </time>
+          </a>
+        </td>
+        <td
+          class="center aligned"
+        />
+        <td
+          class="center aligned"
+        />
+        <td
+          class="center aligned"
+        >
+          <div
+            class="ui green circular label"
+          >
+            1
+          </div>
+        </td>
+        <td
+          class="center aligned"
+        >
+          <div
+            class="ui red circular label"
+          >
+            3
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;
+
+exports[`<ScoreGroupsTable /> matches the latest snapshot for empty list 1`] = `
+<div>
+  <h4
+    class="ui header"
+  >
+    <i
+      aria-hidden="true"
+      class="search icon"
+    />
+    <div
+      class="content"
+    >
+      No execution groups found
+    </div>
+  </h4>
+</div>
+`;

package/src/components/scores/__tests__/__snapshots__/ScoreStatusDecorator.spec.js.snap

@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ScoreStatusDecorator /> matches the latest snapshot for status FAILED 1`] = `
+<div>
+  <a
+    href="/scores/8"
+  >
+    <i
+      aria-hidden="true"
+      class="red warning circle large icon"
+    />
+    Failed
+  </a>
+</div>
+`;
+
+exports[`<ScoreStatusDecorator /> matches the latest snapshot for status PENDING 1`] = `
+<div>
+  <a
+    href="/scores/8"
+  >
+    <i
+      aria-hidden="true"
+      class="grey info circle large icon"
+    />
+    Pending
+  </a>
+</div>
+`;
+
+exports[`<ScoreStatusDecorator /> matches the latest snapshot for status QUEUED 1`] = `
+<div>
+  <a
+    href="/scores/8"
+  >
+    <i
+      aria-hidden="true"
+      class="green play circle outline large icon"
+    />
+    Queued
+  </a>
+</div>
+`;
+
+exports[`<ScoreStatusDecorator /> matches the latest snapshot for status STARTED 1`] = `
+<div>
+  <a
+    href="/scores/8"
+  >
+    <i
+      aria-hidden="true"
+      class="green play circle outline large icon"
+    />
+    Started
+  </a>
+</div>
+`;
+
+exports[`<ScoreStatusDecorator /> matches the latest snapshot for status SUCCEEDED 1`] = `
+<div>
+  <a
+    href="/scores/8"
+  >
+    <i
+      aria-hidden="true"
+      class="green check circle outline large icon"
+    />
+    Succeeded
+  </a>
+</div>
+`;

package/src/components/scores/__tests__/__snapshots__/ScoreTabs.spec.js.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ScoreTabs /> matches the latest snapshot for details 1`] = `
+<div>
+  <div
+    class="ui pointing secondary top attached tabular menu"
+  >
+    <a
+      class="active item"
+      href="/scores/15"
+    >
+      Details
+    </a>
+    <a
+      class="item"
+      href="/scores/15/events"
+    >
+      Events
+    </a>
+  </div>
+</div>
+`;
+
+exports[`<ScoreTabs /> matches the latest snapshot for events 1`] = `
+<div>
+  <div
+    class="ui pointing secondary top attached tabular menu"
+  >
+    <a
+      class="item"
+      href="/scores/15"
+    >
+      Details
+    </a>
+    <a
+      class="active item"
+      href="/scores/15/events"
+    >
+      Events
+    </a>
+  </div>
+</div>
+`;

package/src/components/scores/index.js

@@ -0,0 +1,15 @@
+import Score from "./Score";
+import ScoreDetails from "./ScoreDetails";
+import ScoreEvents from "./ScoreEvents";
+import ScoreGroup from "./ScoreGroup";
+import ScoreGroupPopup from "./ScoreGroupPopup";
+import MyScoreGroups from "./MyScoreGroups";
+
+export {
+  Score,
+  ScoreDetails,
+  ScoreEvents,
+  ScoreGroup,
+  ScoreGroupPopup,
+  MyScoreGroups,
+};

package/src/hooks/useQualityControls.js

@@ -10,20 +10,14 @@ import {
 import {
   API_QUALITY_CONTROLS,
   API_QUALITY_CONTROL,
-  // API_QUALITY_CONTROL_VERSIONS,
-  // API_QUALITY_CONTROL_PUBLISHED,
   API_QUALITY_CONTROL_DRAFT,
   API_QUALITY_CONTROL_STATUS,
-  API_QUALITY_CONTROL_DOMAINS,
+  API_QUALITY_CONTROL_MAIN,
   API_QUALITY_CONTROL_SEARCH,
   API_QUALITY_CONTROL_FILTERS,
   API_QUALITY_CONTROL_QUERIES,
 } from "../api";
 
-export const useQualityControls = () => {
-  const { data, error, mutate } = useSWR(API_QUALITY_CONTROLS, apiJson);
-  return { data: data?.data, error, loading: !error && !data, mutate };
-};
 export const useQualityControl = (id) => {
   const url = compile(API_QUALITY_CONTROL)({ id });
   const { data, error, mutate } = useSWR(url, apiJson);
@@ -51,8 +45,8 @@ export const useQualityControlUpdateStatus = (id) => {
   return useSWRMutations(url, (url, { arg }) => apiJsonPatch(url, arg));
 };
 
-export const useQualityControlUpdateDomains = (id) => {
-  const url = compile(API_QUALITY_CONTROL_DOMAINS)({ id });
+export const useQualityControlUpdateMain = (id) => {
+  const url = compile(API_QUALITY_CONTROL_MAIN)({ id });
   return useSWRMutations(url, (url, { arg }) => apiJsonPatch(url, arg));
 };
 

package/src/hooks/useScoreGroups.js

@@ -0,0 +1,23 @@
+import { compile } from "path-to-regexp";
+import useSWR from "swr";
+import useSWRMutations from "swr/mutation";
+import { apiJson, apiJsonPost } from "@truedat/core/services/api";
+import { API_SCORE_GROUPS, API_SCORE_GROUP } from "../api";
+
+export const useScoreGroupCreate = () => {
+  return useSWRMutations(API_SCORE_GROUPS, (url, { arg }) =>
+    apiJsonPost(url, arg)
+  );
+};
+
+export const useScoreGroupShow = (id) => {
+  const url = compile(API_SCORE_GROUP)({ id });
+  const { data, error, mutate } = useSWR(url, apiJson);
+  return { data: data?.data, error, loading: !error && !data, mutate };
+};
+
+export const useMyScoreGroupsIndex = () => {
+  const url = `${API_SCORE_GROUPS}?created_by=me`;
+  const { data, error, mutate } = useSWR(url, apiJson);
+  return { data: data?.data, error, loading: !error && !data, mutate };
+};

package/src/hooks/useScores.js

@@ -0,0 +1,22 @@
+import { compile } from "path-to-regexp";
+import useSWR from "swr";
+import useSWRMutations from "swr/mutation";
+import { apiJson, apiJsonDelete } from "@truedat/core/services/api";
+import { API_SCORE, API_QUALITY_CONTROL_SCORES } from "../api";
+
+export const useQualityControlScores = (id) => {
+  const url = compile(API_QUALITY_CONTROL_SCORES)({ id });
+  const { data, error, mutate } = useSWR(url, apiJson);
+  return { data: data?.data, error, loading: !error && !data, mutate };
+};
+
+export const useScoreShow = (id) => {
+  const url = compile(API_SCORE)({ id });
+  const { data, error, mutate } = useSWR(url, apiJson);
+  return { data: data?.data?.data, error, loading: !error && !data, mutate };
+};
+export const useScoreDelete = () => {
+  return useSWRMutations(API_SCORE, (_url, { arg }) =>
+    apiJsonDelete(compile(API_SCORE)(arg))
+  );
+};

package/src/styles/Expression.less

@@ -296,4 +296,20 @@ ul.function-tree {
   display: flex;
   justify-content: space-between;
   align-items: center;
+}
+
+.flex-gapped {
+  display: flex;
+  gap: 4px;
+}
+
+.control-subheader {
+  padding-top: 6px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.no-margin {
+  margin: 0px;
 }

package/src/styles/scores.less

@@ -0,0 +1,63 @@
+.quality-bar-wrapper {
+  box-sizing: border-box;
+  min-width: 200px;
+}
+
+.quality-bar:hover {
+  height: 18px;
+  border-radius: 9px;
+  margin: 0px auto;
+  > span > span {
+    color: white;
+  }
+}
+
+.quality-bar {
+  display: flex;
+  height: 8px;
+  width: 100%;
+  border-radius: 4px;
+  margin: 5px auto;
+  transition: all 100ms ease-in-out;
+  overflow: hidden;
+
+  span:first-child {
+    margin-left: 0px;
+  }
+
+  span:last-child {
+    margin-right: 0px;
+  }
+
+  span {
+    margin: 1px;
+    cursor: default;
+    color: transparent;
+    text-align: center;
+    font-size: 10px;
+    line-height: 15px;
+    white-space: pre;
+  }
+}
+
+.quality-bar {
+  @import "~semantic-ui-less/definitions/globals/site";
+  .over-goal-color {
+    background-color: @overGoalRuleColor;
+  }
+  .under-goal-color {
+    background-color: @underGoalRuleColor;
+  }
+  .under-minimum-color {
+    background-color: @underMinimumRuleColor;
+  }
+  .not-executed-color {
+    background-color: @notExecutedRuleColor;
+  }
+  .failed-color {
+    background-color: @failedRuleColor;
+  }
+  .empty-dataset-color {
+    background-color: @emptyDataColor;
+  }
+}

package/src/components/executions/ExecutionGroupBreadcrumbs.js

@@ -1,25 +0,0 @@
-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 { QUALITY_CONTROLS_EXECUTION_GROUPS } from "@truedat/core/routes";
-
-export const ExecutionGroupBreadcrumbs = ({ timestamp }) => (
-  <Breadcrumb>
-    <Breadcrumb.Section as={Link} to={QUALITY_CONTROLS_EXECUTION_GROUPS}>
-      <FormattedMessage id="sidemenu.executions" />
-    </Breadcrumb.Section>
-    <Breadcrumb.Divider icon="right angle" />
-    <Breadcrumb.Section active>
-      <DateTime value={timestamp} />
-    </Breadcrumb.Section>
-  </Breadcrumb>
-);
-
-ExecutionGroupBreadcrumbs.propTypes = {
-  timestamp: PropTypes.string,
-};
-
-export default ExecutionGroupBreadcrumbs;

package/src/components/executions/ExecutionGroupContent.js

@@ -1,42 +0,0 @@
-import _ from "lodash/fp";
-import React from "react";
-import PropTypes from "prop-types";
-import { useQuery } from "@apollo/client";
-import { TEMPLATES_QUERY } from "@truedat/core/api/queries";
-
-const DynamicFormViewer = React.lazy(() =>
-  import("@truedat/df/components/DynamicFormViewer")
-);
-
-const templateFieldNames = _.flow(
-  _.prop("content"),
-  _.flatMap("fields"),
-  _.map("name")
-);
-
-export const ExecutionGroupContent = ({ content }) => {
-  const { data } = useQuery(TEMPLATES_QUERY, {
-    variables: { scope: "qe" },
-  });
-  // NOTE: We don't have the template name, so select one with fields matching content
-  const contentFieldNames = _.keys(content);
-  const matchingFieldCount = _.flow(
-    templateFieldNames,
-    _.intersection(contentFieldNames),
-    _.size
-  );
-  const template = _.flow(
-    _.propOr([], "templates"),
-    _.maxBy(matchingFieldCount)
-  )(data);
-
-  return template ? (
-    <DynamicFormViewer template={template} content={content} />
-  ) : null;
-};
-
-ExecutionGroupContent.propTypes = {
-  content: PropTypes.object,
-};
-
-export default ExecutionGroupContent;

package/src/components/executions/ExecutionGroupLink.js

@@ -1,18 +0,0 @@
-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 const ExecutionGroupLink = ({ id, created }) => (
-  <Link to={linkTo.QUALITY_CONTROLS_EXECUTION_GROUP({ id })}>
-    <DateTime value={created} />
-  </Link>
-);
-
-ExecutionGroupLink.propTypes = {
-  id: PropTypes.string,
-  created: PropTypes.string,
-};
-
-export default ExecutionGroupLink;

package/src/components/executions/ExecutionGroupMessage.js

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

package/src/components/executions/ExecutionGroupsTable.js

@@ -1,101 +0,0 @@
-import _ from "lodash/fp";
-import React from "react";
-import PropTypes from "prop-types";
-import { FormattedMessage } from "react-intl";
-import { Table, Header, Icon } from "semantic-ui-react";
-import { columnDecorator } from "@truedat/core/services";
-import { useExecutionGroupsIndex } from "../../hooks/useExecutionGroups";
-import ExecutionGroupLink from "./ExecutionGroupLink";
-
-export const HeaderRow = ({ columns }) => (
-  <Table.Row>
-    {columns.map(({ name: id, textAlign }, i) => (
-      <Table.HeaderCell key={i} textAlign={textAlign}>
-        <FormattedMessage id={id} defaultMessage={id} />
-      </Table.HeaderCell>
-    ))}
-  </Table.Row>
-);
-
-HeaderRow.propTypes = {
-  columns: PropTypes.arrayOf(PropTypes.object),
-};
-
-export const ExecutionGroupRow = ({ columns, ...props }) => (
-  <Table.Row>
-    {columns.map((col, i) => (
-      <Table.Cell
-        key={i}
-        textAlign={col.textAlign}
-        content={columnDecorator(col)(props)}
-      />
-    ))}
-  </Table.Row>
-);
-
-ExecutionGroupRow.propTypes = {
-  columns: PropTypes.arrayOf(PropTypes.object),
-};
-
-export default function ExecutionGroupsTable() {
-  const { data: executionGroups } = useExecutionGroupsIndex();
-
-  const columns = [
-    {
-      name: "quality_controls.table.header.created",
-      width: 2,
-      fieldSelector: _.identity,
-      fieldDecorator: ExecutionGroupLink,
-    },
-    {
-      name: "quality_controls.table.header.pending",
-      fieldSelector: "pending_count",
-      textAlign: "right",
-      width: 1,
-    },
-    {
-      name: "quality_controls.table.header.started",
-      fieldSelector: "started_count",
-      textAlign: "right",
-      width: 1,
-    },
-    {
-      name: "quality_controls.table.header.succeded",
-      fieldSelector: "succeeded_count",
-      textAlign: "right",
-      width: 1,
-    },
-    {
-      name: "quality_controls.table.header.failed",
-      fieldSelector: "failed_count",
-      textAlign: "right",
-      width: 1,
-    },
-  ];
-
-  return (
-    <>
-      {!_.isEmpty(executionGroups) && (
-        <Table>
-          <Table.Header>
-            <HeaderRow columns={columns} />
-          </Table.Header>
-          <Table.Body>
-            {executionGroups &&
-              executionGroups.map((props, key) => (
-                <ExecutionGroupRow key={key} columns={columns} {...props} />
-              ))}
-          </Table.Body>
-        </Table>
-      )}
-      {_.isEmpty(executionGroups) && (
-        <Header as="h4">
-          <Icon name="search" />
-          <Header.Content>
-            <FormattedMessage id="quality_control_execution_group.search.results.empty" />
-          </Header.Content>
-        </Header>
-      )}
-    </>
-  );
-}