@truedat/dd 5.2.8 → 5.2.9

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [5.2.9] 2023-02-28
+
+### Added
+
+- [TD-5599] Support for Tasks
+
 ## [5.2.8] 2023-02-28
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "5.2.8",
+  "version": "5.2.9",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -87,9 +87,9 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.1",
-    "@truedat/auth": "5.2.4",
-    "@truedat/core": "5.2.4",
-    "@truedat/df": "5.2.4",
+    "@truedat/auth": "5.2.9",
+    "@truedat/core": "5.2.9",
+    "@truedat/df": "5.2.9",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "path-to-regexp": "^1.7.0",
@@ -114,5 +114,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "562bc4667fa44eeb0e224a886c41849adbd69a18"
+  "gitHead": "39162d892066f21b9e894be20abfe38304b62f91"
 }

package/src/api/queries.js

@@ -446,3 +446,34 @@ export const DATA_STRUCTURE_VERSION_QUERY = gql`
     }
   }
 `;
+
+export const TASKS_QUERY = gql`
+  query Tasks {
+    tasks {
+      id
+      index
+      status
+      started_at
+      last_message_at
+      count
+      processed
+      elapsed
+    }
+  }
+`;
+
+export const TASK_QUERY = gql`
+  query Task($id: String) {
+    task(id: $id) {
+      id
+      index
+      status
+      started_at
+      last_message_at
+      count
+      processed
+      memory_trace
+      elapsed
+    }
+  }
+`;

package/src/components/DictionaryRoutes.js

@@ -11,6 +11,7 @@ import {
   STRUCTURE_TAGS,
   STRUCTURE_TYPES,
   SYSTEMS,
+  TASKS,
 } from "@truedat/core/routes";
 import PendingStructureNotes from "./PendingStructureNotes";
 import ProfileExecution from "./ProfileExecution";
@@ -28,6 +29,7 @@ import StructureTypesRoutes from "./StructureTypesRoutes";
 import SystemsRoutes from "./SystemsRoutes";
 import SystemsLoader from "./SystemsLoader";
 import TagsRoutes from "./TagsRoutes";
+import TasksRoutes from "./TasksRoutes";
 
 const TemplatesLoader = React.lazy(() =>
   import("@truedat/df/templates/components/TemplatesLoader")
@@ -124,6 +126,7 @@ export const DictionaryRoutes = () => {
           </>
         )}
       />
+      <Route path={TASKS} render={() => <TasksRoutes />} />
     </>
   );
 };

package/src/components/Task.js

@@ -0,0 +1,149 @@
+import _ from "lodash/fp";
+import React from "react";
+import { useParams, Link } from "react-router-dom";
+import { useQuery } from "@apollo/client";
+import { FormattedMessage } from "react-intl";
+import {
+  Breadcrumb,
+  Button,
+  Header,
+  Icon,
+  Grid,
+  Item,
+  Segment,
+  Progress,
+  Divider,
+} from "semantic-ui-react";
+import { Dimmer, Loader } from "semantic-ui-react";
+import Moment from "react-moment";
+import { TASKS } from "@truedat/core/routes";
+import { TASK_QUERY } from "../api/queries";
+
+function Task() {
+  const { id } = useParams();
+  const { loading, data, refetch } = useQuery(TASK_QUERY, {
+    fetchPolicy: "cache-and-network",
+    variables: { id },
+  });
+
+  const task = _.get("task")(data);
+
+  const memoryStats = _.flow(
+    _.get("memory_trace"),
+    _.reduce(
+      (stats, [_ts, memory]) => ({
+        max: Math.max(stats.max || -Infinity, memory),
+        min: Math.min(stats.min || Infinity, memory),
+        last: memory,
+      }),
+      {}
+    )
+  )(task);
+
+  const parseMemory = (value) => `${Math.round(value / 1024 / 1024)}MB`;
+
+  const properties = [
+    { name: "task.index", content: task?.index },
+    { name: "task.status", content: task?.status },
+
+    {
+      name: "task.started_at",
+      content: <Moment date={task?.started_at} format="YYYY-MM-DD HH:mm" />,
+    },
+    {
+      name: "task.last_message_at",
+      content: (
+        <Moment date={task?.last_message_at} format="YYYY-MM-DD HH:mm" />
+      ),
+    },
+    { name: "task.elapsed", content: `${task?.elapsed / 1000}s` },
+  ];
+
+  const propertyElement = (name, content) => (
+    <Grid.Column key={name} width={3}>
+      <Item>
+        <Item.Content>
+          <Item.Header as="h5">
+            <FormattedMessage id={name} />
+          </Item.Header>
+          <Item.Description>{content}</Item.Description>
+        </Item.Content>
+      </Item>
+    </Grid.Column>
+  );
+
+  return (
+    <>
+      <Breadcrumb>
+        <Breadcrumb.Section as={Link} to={TASKS} active={false}>
+          <FormattedMessage id="tasks.header" />
+        </Breadcrumb.Section>
+        <>
+          <Breadcrumb.Divider icon="right angle" />
+          <Breadcrumb.Section active>{task?.index}</Breadcrumb.Section>
+        </>
+      </Breadcrumb>
+      <Segment>
+        <Header as="h2">
+          <Icon circular name="check" />
+          <Header.Content>
+            <FormattedMessage id="task.header" />
+            <Header.Subheader>
+              <FormattedMessage id="task.subheader" />
+            </Header.Subheader>
+          </Header.Content>
+        </Header>
+        <Segment basic>
+          <Button
+            primary
+            onClick={() => refetch()}
+            content={<FormattedMessage id="task.refresh" />}
+          />
+        </Segment>
+        <Dimmer.Dimmable dimmed={loading}>
+          <Dimmer active={loading} inverted>
+            <Loader />
+          </Dimmer>
+          {task ? (
+            <>
+              <Grid columns={4} divided>
+                <Grid.Row>
+                  {properties.map(({ name, content }) =>
+                    propertyElement(name, content)
+                  )}
+                </Grid.Row>
+              </Grid>
+              <Divider />
+              <Progress
+                percent={Math.round((task.processed / task.count) * 100)}
+                progress
+              >
+                <FormattedMessage id="task.progress" />
+              </Progress>
+              <Divider />
+
+              <Grid columns={4} divided>
+                <Grid.Row>
+                  {propertyElement(
+                    "task.memory.max",
+                    parseMemory(memoryStats?.max)
+                  )}
+                  {propertyElement(
+                    "task.memory.min",
+                    parseMemory(memoryStats?.min)
+                  )}
+                  {propertyElement(
+                    "task.memory.last",
+                    parseMemory(memoryStats?.last)
+                  )}
+                </Grid.Row>
+              </Grid>
+            </>
+          ) : null}
+        </Dimmer.Dimmable>
+      </Segment>
+    </>
+  );
+}
+
+export default Task;

package/src/components/Tasks.js

@@ -0,0 +1,138 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { useHistory } from "react-router-dom";
+import { useQuery } from "@apollo/client";
+import { connect } from "react-redux";
+import { FormattedMessage } from "react-intl";
+import { Button, Header, Icon, Table, Segment } from "semantic-ui-react";
+import { Dimmer, Loader } from "semantic-ui-react";
+import Moment from "react-moment";
+import { reindexAllGrants, reindexAllStructures } from "@truedat/core/routines";
+import { linkTo } from "@truedat/core/routes";
+import { TASKS_QUERY } from "../api/queries";
+
+export const Tasks = ({ reindexAllGrants, reindexAllStructures }) => {
+  const { loading, data, refetch } = useQuery(TASKS_QUERY, {
+    fetchPolicy: "cache-and-network",
+  });
+  const history = useHistory();
+
+  const tasks = _.flow(
+    _.get("tasks"),
+    _.orderBy(["started_at"], ["desc"])
+  )(data);
+
+  return (
+    <Segment>
+      <Header as="h2">
+        <Icon circular name="check" />
+        <Header.Content>
+          <FormattedMessage id="tasks.header" />
+          <Header.Subheader>
+            <FormattedMessage id="tasks.subheader" />
+          </Header.Subheader>
+        </Header.Content>
+      </Header>
+      <Segment basic>
+        <Button
+          primary
+          onClick={() => refetch()}
+          content={<FormattedMessage id="task.refresh" />}
+        />
+        <Button
+          primary
+          floated="right"
+          onClick={() => {
+            reindexAllStructures();
+            refetch();
+          }}
+          content={<FormattedMessage id="task.reindex_all_structures" />}
+        />
+        <Button
+          primary
+          floated="right"
+          onClick={() => {
+            reindexAllGrants();
+            refetch();
+          }}
+          content={<FormattedMessage id="task.reindex_all_grants" />}
+        />
+      </Segment>
+      <Dimmer.Dimmable dimmed={loading}>
+        <Dimmer active={loading} inverted>
+          <Loader />
+        </Dimmer>
+        {data ? (
+          <Table selectable>
+            <Table.Header>
+              <Table.Row>
+                <Table.HeaderCell
+                  content={<FormattedMessage id={`task.index`} />}
+                />
+                <Table.HeaderCell
+                  content={<FormattedMessage id={`task.status`} />}
+                />
+                <Table.HeaderCell
+                  content={<FormattedMessage id={`task.started_at`} />}
+                />
+                <Table.HeaderCell
+                  content={<FormattedMessage id={`task.last_message_at`} />}
+                />
+                <Table.HeaderCell
+                  content={<FormattedMessage id={`task.progress`} />}
+                />
+                <Table.HeaderCell
+                  content={<FormattedMessage id={`task.elapsed`} />}
+                />
+              </Table.Row>
+            </Table.Header>
+            <Table.Body>
+              {tasks.map((task) => (
+                <Table.Row
+                  key={task.started_at}
+                  onClick={() => history.push(linkTo.TASK(task))}
+                >
+                  <Table.Cell content={task.index} />
+                  <Table.Cell content={task.status} />
+
+                  <Table.Cell
+                    content={
+                      <Moment
+                        date={task.started_at}
+                        format="YYYY-MM-DD HH:mm"
+                      />
+                    }
+                  />
+                  <Table.Cell
+                    content={
+                      <Moment
+                        date={task.last_message_at}
+                        format="YYYY-MM-DD HH:mm"
+                      />
+                    }
+                  />
+                  <Table.Cell
+                    content={
+                      task.processed ? `${task.processed}/${task.count}` : "-"
+                    }
+                  />
+                  <Table.Cell
+                    content={task.elapsed ? `${task.elapsed / 1000}s` : "-"}
+                  />
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table>
+        ) : null}
+      </Dimmer.Dimmable>
+    </Segment>
+  );
+};
+
+Tasks.propTypes = {
+  reindexAllGrants: PropTypes.func,
+  reindexAllStructures: PropTypes.func,
+};
+
+export default connect(null, { reindexAllGrants, reindexAllStructures })(Tasks);

package/src/components/TasksRoutes.js

@@ -0,0 +1,27 @@
+import { Route } from "react-router-dom";
+import React from "react";
+import { Unauthorized } from "@truedat/core/components";
+import { useAuthorized } from "@truedat/core/hooks";
+import { TASKS, TASK } from "@truedat/core/routes";
+import Tasks from "./Tasks";
+import Task from "./Task";
+
+export const TasksRoutes = () => {
+  const authorized = useAuthorized();
+  return (
+    <>
+      <Route
+        exact
+        path={TASK}
+        render={() => (authorized ? <Task /> : <Unauthorized />)}
+      />
+      <Route
+        exact
+        path={TASKS}
+        render={() => (authorized ? <Tasks /> : <Unauthorized />)}
+      />
+    </>
+  );
+};
+
+export default TasksRoutes;

package/src/components/__tests__/Task.spec.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import Task from "../Task";
+import { TASK_QUERY } from "../../api/queries";
+import en from "../../messages/en";
+
+jest.mock("@truedat/core/hooks", () => ({
+  useAuthorized: jest.fn(() => true),
+}));
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useParams: () => ({ id: "123" }),
+}));
+
+const task = {
+  __typename: "Task",
+  id: "123",
+  started_at: "2020-01-01T00:00:00.000Z",
+  last_message_at: "2020-01-01T00:01:00.000Z",
+  index: "grants",
+  status: "processing",
+  count: 10000,
+  processed: 1000,
+  memory_trace: [["2020-01-01T00:01:00.000Z", 100000]],
+  elapsed: 10,
+};
+
+const taskMock = {
+  request: { query: TASK_QUERY, variables: { id: "123" } },
+  result: { data: { task } },
+};
+
+describe("<Task />", () => {
+  it("matches the latest snapshot", async () => {
+    const renderOpts = {
+      messages: { en },
+      mocks: [taskMock],
+    };
+    const { container, findByText } = render(<Task />, renderOpts);
+    await findByText("processing");
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/__tests__/Tasks.spec.js

@@ -0,0 +1,120 @@
+/* eslint-disable fp/no-mutation */
+/* eslint-disable fp/no-let */
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import userEvent from "@testing-library/user-event";
+import { Tasks } from "../Tasks";
+import { TASKS_QUERY } from "../../api/queries";
+import en from "../../messages/en";
+
+const mockHistory = {
+  push: jest.fn(),
+};
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useHistory: () => mockHistory,
+}));
+
+const task = {
+  __typename: "Task",
+  id: "123",
+  started_at: "2020-01-01T00:00:00.000Z",
+  last_message_at: "2020-01-01T00:01:00.000Z",
+  index: "grants",
+  status: "processing",
+  count: 10000,
+  processed: 1000,
+  memory_trace: [["2020-01-01T00:01:00.000Z", 100000]],
+  elapsed: 10,
+};
+
+const refetchTask = {
+  __typename: "Task",
+  id: "123",
+  started_at: "2020-01-01T00:00:00.000Z",
+  last_message_at: "2020-01-01T00:02:00.000Z",
+  index: "grants",
+  status: "done",
+  count: 10000,
+  processed: 10000,
+  memory_trace: [["2020-01-01T00:01:00.000Z", 100000]],
+  elapsed: 20,
+};
+
+let queryCalled = false;
+const tasksMock = {
+  request: { query: TASKS_QUERY },
+  newData: () => {
+    if (queryCalled) {
+      return {
+        data: { tasks: [refetchTask] },
+      };
+    } else {
+      queryCalled = true;
+      return {
+        data: { tasks: [task] },
+      };
+    }
+  },
+};
+const renderOpts = {
+  messages: { en },
+  mocks: [tasksMock],
+};
+const props = {
+  reindexAllGrants: jest.fn(),
+  reindexAllStructures: jest.fn(),
+};
+
+describe("<Tasks />", () => {
+  it("matches the latest snapshot", async () => {
+    queryCalled = false;
+    const { container, findByText } = render(<Tasks {...props} />, renderOpts);
+    await findByText("processing");
+    expect(container).toMatchSnapshot();
+  });
+
+  it("refetches button", async () => {
+    queryCalled = false;
+    const { container, findByText, findByRole } = render(
+      <Tasks {...props} />,
+      renderOpts
+    );
+    await findByText("processing");
+
+    userEvent.click(await findByRole("button", { name: /Refresh/i }));
+    await findByText("done");
+    expect(container).toMatchSnapshot();
+  });
+
+  it("triggers Reindex Grants and Structures", async () => {
+    queryCalled = false;
+    const { findByText, findByRole } = render(<Tasks {...props} />, renderOpts);
+    await findByText("processing");
+
+    userEvent.click(
+      await findByRole("button", { name: /Reindex all structures/i })
+    );
+    await waitFor(() =>
+      expect(props.reindexAllStructures).toHaveBeenCalledTimes(1)
+    );
+
+    userEvent.click(
+      await findByRole("button", { name: /Reindex all grants/i })
+    );
+    await waitFor(() =>
+      expect(props.reindexAllGrants).toHaveBeenCalledTimes(1)
+    );
+  });
+
+  it("navigates to task detail", async () => {
+    queryCalled = false;
+    const { findByText } = render(<Tasks {...props} />, renderOpts);
+    await findByText("processing");
+
+    userEvent.click(await findByText(/processing/i));
+    expect(mockHistory.push.mock.calls[0][0]).toBe("/tasks/123");
+  });
+});

package/src/components/__tests__/TasksRoutes.spec.js

@@ -0,0 +1,56 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import TasksRoutes from "../TasksRoutes";
+import { TASK_QUERY, TASKS_QUERY } from "../../api/queries";
+import en from "../../messages/en";
+
+jest.mock("@truedat/core/hooks", () => ({
+  useAuthorized: jest.fn(() => true),
+}));
+
+const task = {
+  __typename: "Task",
+  id: "123",
+  started_at: "2020-01-01T00:00:00.000Z",
+  last_message_at: "2020-01-01T00:01:00.000Z",
+  index: "grants",
+  status: "processing",
+  count: 10000,
+  processed: 1000,
+  memory_trace: [["2020-01-01T00:01:00.000Z", 100000]],
+  elapsed: 10,
+};
+
+const tasksMock = {
+  request: { query: TASKS_QUERY },
+  result: { data: { tasks: [task] } },
+};
+
+const taskMock = {
+  request: { query: TASK_QUERY, variables: { id: "123" } },
+  result: { data: { task } },
+};
+
+describe("<TasksRoutes />", () => {
+  it("matches the latest snapshot (list route)", async () => {
+    const renderOpts = {
+      messages: { en },
+      routes: ["/tasks"],
+      mocks: [tasksMock],
+    };
+    const { container, findByText } = render(<TasksRoutes />, renderOpts);
+    await findByText("processing");
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot (view route)", async () => {
+    const renderOpts = {
+      messages: { en },
+      routes: ["/tasks/123"],
+      mocks: [taskMock],
+    };
+    const { container, findByText } = render(<TasksRoutes />, renderOpts);
+    await findByText("processing");
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/__tests__/__snapshots__/DictionaryRoutes.spec.js.snap

@@ -37,5 +37,9 @@ exports[`<DictionaryRoutes /> matches the latest snapshot 1`] = `
     path="/profileGroups/:id"
     render={[Function]}
   />
+  <Route
+    path="/tasks"
+    render={[Function]}
+  />
 </Fragment>
 `;