@truedat/dd 4.33.3 → 4.33.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.33.4] 2021-11-26
+
+### Added
+
+- [TD-4262] Lineage graph polling
+
 ## [4.33.3] 2021-11-25
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "4.33.3",
+  "version": "4.33.4",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.33.3",
+    "@truedat/test": "4.33.4",
     "babel-jest": "^27.0.6",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -84,9 +84,9 @@
     ]
   },
   "dependencies": {
-    "@truedat/auth": "4.33.3",
-    "@truedat/core": "4.33.3",
-    "@truedat/df": "4.33.3",
+    "@truedat/auth": "4.33.4",
+    "@truedat/core": "4.33.4",
+    "@truedat/df": "4.33.4",
     "lodash": "^4.17.21",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.7.2",
@@ -107,5 +107,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "4423c4077cf22e7d21d2679670287ed3d86ec8d7"
+  "gitHead": "08160df210692628d37599956bc78c587c019afc"
 }

package/src/api.js

@@ -14,8 +14,10 @@ const API_GRANT_REQUESTS = "/api/grant_requests";
 const API_GRANTS_CSV = "/api/grants/csv";
 const API_GRANTS_SEARCH = "/api/grants/search";
 const API_GRAPH = "/api/graphs/:id";
+const API_GRAPH_HASH = "/api/graphs/hash/:hash";
 const API_GRAPHS = "/api/graphs";
 const API_GRAPH_CSV = "/api/graphs/csv";
+const API_LINEAGE_EVENTS = "/api/lineage_events";
 const API_MY_GRANT_FILTERS_SEARCH = "/api/grant_filters/search/mine";
 const API_MY_GRANTS_SEARCH = "/api/grants/search/mine";
 const API_NODE = "/api/nodes/:id";
@@ -58,9 +60,11 @@ export {
   API_GRANT_REQUESTS,
   API_GRANTS_SEARCH,
   API_GRAPH,
+  API_GRAPH_HASH,
   API_GRAPHS,
   API_GRAPH_CSV,
   API_GRANTS_CSV,
+  API_LINEAGE_EVENTS,
   API_MY_GRANTS_SEARCH,
   API_MY_GRANT_FILTERS_SEARCH,
   API_NODE,

package/src/components/GraphLoader.js

@@ -2,27 +2,41 @@ import _ from "lodash/fp";
 import { useEffect } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { useRouteMatch } from "react-router-dom";
+import { useRouteMatch, useHistory } from "react-router-dom";
 import { GRAPH } from "@truedat/core/routes";
-import { fetchGraph, clearGraph } from "../routines";
+import { fetchGraph, clearGraph, cancelPoll } from "../routines";
 
-export const GraphLoader = ({ clearGraph, fetchGraph, graph }) => {
+export const GraphLoader = ({ clearGraph, fetchGraph, graph, cancelPoll }) => {
   const match = useRouteMatch(GRAPH);
   const id = _.path("params.id")(match);
+  
+  const history = useHistory();
+
   useEffect(() => {
     return () => {
       clearGraph();
     };
   }, [clearGraph]);
+
   useEffect(() => {
     if (id) {
       if (_.isEmpty(graph)) {
         fetchGraph({ id });
-      } else if (!_.propEq("id", id)(graph)) {
+      } else if (id != graph.id) {
         fetchGraph({ id });
       }
     }
-  }, [graph, fetchGraph, id]);
+  }, [/*graph, *//*fetchGraph,*/ id]);
+
+  useEffect(() => {
+    return () => {
+      // && history.location.pathname === "any specific path")
+      if (history.action === "POP") {
+        cancelPoll();
+      }
+    };
+  }, [history]);
+
   return null;
 };
 
@@ -30,10 +44,12 @@ GraphLoader.propTypes = {
   clearGraph: PropTypes.func.isRequired,
   fetchGraph: PropTypes.func.isRequired,
   graph: PropTypes.object,
+  cancelPoll: PropTypes.func,
 };
 
 const mapStateToProps = ({ graph }) => ({ graph });
 
-export default connect(mapStateToProps, { clearGraph, fetchGraph })(
+export default connect(mapStateToProps, { clearGraph, fetchGraph, cancelPoll })(
   GraphLoader
 );
+

package/src/components/LineageEvents.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { Header, Icon, Segment, Dimmer, Loader } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import LineageEventsTable from "./LineageEventsTable"
+
+export const LineageEvents = () => (
+  <Segment>
+    <Header as="h2">
+      <Icon circular name="cogs" />
+      <Header.Content>
+        <FormattedMessage id="lineage.events.header" />
+        <Header.Subheader>
+          <FormattedMessage id="lineage.events.subheader" />
+        </Header.Subheader>
+      </Header.Content>
+    </Header>
+    <Segment attached="bottom">
+      <LineageEventsTable />
+    </Segment>
+  </Segment>
+);
+
+export default LineageEvents;

package/src/components/LineageEventsTable.js

@@ -0,0 +1,91 @@
+import _ from "lodash/fp";
+import React, { useEffect } from "react";
+import PropTypes from "prop-types";
+import { FormattedMessage } from "react-intl";
+import { Header, Icon, Table } from "semantic-ui-react";
+import { useHistory, } from "react-router-dom";
+import { connect } from "react-redux";
+import { useIntl } from "react-intl";
+import { columnDecorator } from "@truedat/core/services";
+import { linkTo } from "@truedat/core/routes";
+import { lineageEventColumns as columns } from "../selectors/getLineageEventColumns";
+import { fetchLineageEvents } from "../routines";
+
+
+export const LineageEventsTable = ({ fetchLineageEvents, lineageEvents, lineageEventsLoading }) => {
+  const { formatMessage } = useIntl();
+  const history = useHistory();
+
+  useEffect(() => {
+    fetchLineageEvents();
+  }, [fetchLineageEvents]);
+
+  return (
+    <>
+      {!_.isEmpty(lineageEvents) && (
+        <Table sortable selectable>
+          <Table.Header>
+            <Table.Row>
+              {columns.map((column, i) => {
+                return (
+                  <Table.HeaderCell
+                    key={i}
+                    width={column.width}
+                    content={formatMessage({
+                      id: `lineage.events.props.${column.name}`,
+                      defaultMessage: column.name,
+                    })}
+                  />
+                );
+              })}
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {lineageEvents.map((event, i) => (
+              <Table.Row
+                key={i}
+                onClick={
+                  event.graph_id
+                    ? () => history.push(linkTo.GRAPH({ id: event?.graph_id }))
+                    : null
+                }
+              >
+                {columns &&
+                  columns.map((column, key) => (
+                    <Table.Cell
+                      key={key}
+                      textAlign={column.textAlign}
+                      content={columnDecorator(column)(event)}
+                    />
+                  ))}
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+      )}
+      {_.isEmpty(lineageEvents) && !lineageEventsLoading && (
+        <Header as="h4">
+          <Icon name="search" />
+          <Header.Content>
+            <FormattedMessage id="lineage.events.search.results.empty" />
+          </Header.Content>
+        </Header>
+      )}
+    </>
+  );
+};
+
+LineageEventsTable.propTypes = {
+  lineageEvents: PropTypes.array,
+  fetchLineageEvents: PropTypes.func,
+  lineageEventsLoading: PropTypes.bool,
+};
+
+const mapStateToProps = (state) => ({
+  lineageEvents: state.lineageEvents,
+  lineageEventsLoading: state.lineageEventsLoading,
+});
+
+export default connect(mapStateToProps, { fetchLineageEvents })(
+  LineageEventsTable
+);

package/src/components/LineageForm.js

@@ -54,10 +54,11 @@ export const LineageForm = ({
   const [open, setOpen] = useState(true);
   const [selectLevels, setSelectLevels] = useState(levelsSelection);
   const [levels, setLevels] = useState(lineageLevels);
-  const handleSubmit = (type) => () =>
+  const handleSubmit = (type) => () => {
     _.isNil(levels)
       ? createGraph({ ids: selectedResources, type })
       : createGraph({ ids: selectedResources, type, levels });
+  }
   const disabled = _.isEmpty(selectedResources);
   useEffect(() => {
     setOpen(!graphLoading && _.isEmpty(graph));

package/src/components/LineageGraph.js

@@ -4,12 +4,19 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Dimmer, Loader } from "semantic-ui-react";
 import svgPanZoom from "svg-pan-zoom";
-import { FormattedMessage } from "react-intl";
-import { clearNode, selectNode, hoverNode, initSvg } from "../routines";
+import { FormattedMessage, useIntl } from "react-intl";
+import {
+  clearNode,
+  selectNode,
+  hoverNode,
+  initSvg,
+  cancelPoll,
+} from "../routines";
 import LineageLink from "./LineageLink";
 import LineageDefs from "./LineageDefs";
 import LineageGroup from "./LineageGroup";
 import LineageResource from "./LineageResource";
+import "../styles/lineageGraph.less";
 
 const svgOptions = { minZoom: 0.2, maxZoom: 2.0, fit: false, center: false };
 const disablePanZoom = (svg) => {
@@ -50,11 +57,18 @@ export const LineageGraph = ({
   groups = [],
   resources = [],
   loading,
+  loadingInfo,
+  cancelPoll,
 }) => {
   const ref = useRef(null);
   const [state, dispatch] = useReducer(reducer, initialState);
   const { selectedNode, hover, svg } = state;
 
+  useEffect(() => {
+    // Anything in here is fired on component mount.
+    return () => cancelPoll();
+  }, []);
+
   useEffect(() => {
     if (!_.isEmpty(resources)) {
       const svg = svgPanZoom(ref.current, svgOptions);
@@ -67,6 +81,8 @@ export const LineageGraph = ({
   const onSelect = (g) => () => dispatch(selectNode.trigger(g));
   const onHover = (g) =>
     selectedNode ? undefined : () => dispatch(hoverNode.trigger(g));
+  const { formatMessage } = useIntl();
+
   return (
     <>
       <Dimmer.Dimmable dimmed={loading} className="dl">
@@ -74,8 +90,34 @@ export const LineageGraph = ({
           <Loader size="large">
             <FormattedMessage
               id="lineage.graph.loading"
-              defaultMessage="Analyzing..."
+              defaultMessage={"Analyzing..."}
             />
+            {loadingInfo?.data?.graph_hash && loadingInfo?.data?.status && (
+              <p>
+                {formatMessage({
+                  id:
+                    loadingInfo?.data?.status === "already_started"
+                      ? "lineage.graph.loading.background.existing"
+                      : loadingInfo?.data?.status === "just_started" &&
+                        "lineage.graph.loading.background.launched",
+                })}
+              </p>
+            )}
+            {loadingInfo?.data?.graph_hash && (
+              <p>
+                Graph hash:{" "}
+                <span className="graph-hash">
+                  {loadingInfo?.data?.graph_hash}
+                </span>
+              </p>
+            )}
+            <p>
+              {loadingInfo?.data?.retry &&
+                formatMessage(
+                  { id: "lineage.graph.loading.polling" },
+                  { retry: loadingInfo?.data?.retry }
+                )}
+            </p>
           </Loader>
         </Dimmer>
         <svg
@@ -121,17 +163,23 @@ LineageGraph.propTypes = {
   paths: PropTypes.array,
   resources: PropTypes.array,
   height: PropTypes.string,
+  loading: PropTypes.bool,
+  loadingInfo: PropTypes.object,
+  cancelPoll: PropTypes.func,
 };
 
 const mapStateToProps = (
   { graph = {}, graphLoading, selectedNode },
   ownProps
-) => ({
-  paths: _.prop("paths")(_.propOr(graph, "graph")(ownProps)),
-  groups: _.prop("groups")(_.propOr(graph, "graph")(ownProps)),
-  resources: _.prop("resources")(_.propOr(graph, "graph")(ownProps)),
-  loading: graphLoading,
-  selectedNode,
-});
+) => {
+  return {
+    paths: _.prop("paths")(_.propOr(graph, "graph")(ownProps)),
+    groups: _.prop("groups")(_.propOr(graph, "graph")(ownProps)),
+    resources: _.prop("resources")(_.propOr(graph, "graph")(ownProps)),
+    loading: graphLoading !== false,
+    loadingInfo: graphLoading,
+    selectedNode,
+  };
+};
 
-export default connect(mapStateToProps, { clearNode })(LineageGraph);
+export default connect(mapStateToProps, { clearNode, cancelPoll })(LineageGraph);

package/src/components/LineageRoutes.js

@@ -2,7 +2,8 @@ import React from "react";
 import { Route } from "react-router-dom";
 import { Unauthorized } from "@truedat/core/components";
 import { useAuthorized } from "@truedat/core/hooks";
-import { GRAPH, GRAPHS, SAMPLE } from "@truedat/core/routes";
+import { GRAPH, GRAPHS, LINEAGE_EVENTS, SAMPLE } from "@truedat/core/routes";
+import LineageEvents from "./LineageEvents"
 import LineageGraph from "./LineageGraph";
 import LineageSample from "./LineageSample";
 import LineageForm from "./LineageForm";
@@ -13,16 +14,13 @@ const Graphs = () => (
   <>
     <LineageForm />
     <GraphRedirector />
-  </>
-);
-
-const Graph = () => (
-  <>
-    <GraphLoader />
+    {/* Load LineageGraph here so that its <Loader> is already available when clicking the LinageForm */}
     <LineageGraph />
   </>
 );
 
+const Graph = () => <GraphLoader />;
+
 export const LineageRoutes = () => {
   const authorized = useAuthorized("lineage");
   return (
@@ -35,6 +33,10 @@ export const LineageRoutes = () => {
         path={GRAPH}
         render={() => (authorized ? <Graph /> : <Unauthorized />)}
       />
+      <Route
+        path={LINEAGE_EVENTS}
+        render={() => (authorized ? <LineageEvents /> : <Unauthorized />)}
+      />
       <Route
         path={SAMPLE}
         render={() => (authorized ? <LineageSample /> : <Unauthorized />)}

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

@@ -0,0 +1,40 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { LineageEventsTable } from "../LineageEventsTable";
+import en from "../../messages/en";
+
+
+describe("<LineageEventsTable />", () => {
+  const lineageEvents = [
+    {
+      graph_id: 1234,
+      graph_data: "graph_data",
+      status: "COMPLETED",
+      message: "message",
+      inserted_at: "2021-11-26T10:09:27.168999Z",
+    },
+  ];
+
+  const lineageEventsLoading = false;
+  const fetchLineageEvents = jest.fn();
+
+  it("matches the latest snapshot", () => {
+    const props = { fetchLineageEvents, lineageEvents, lineageEventsLoading };
+    const { container } = render(<LineageEventsTable {...props} />, {
+      messages: { en },
+    });
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot (no jobs)", () => {
+    const props = {
+      fetchLineageEvents,
+      lineageEvents: [],
+      lineageEventsLoading,
+    };
+    const { container } = render(<LineageEventsTable {...props} />, {
+      messages: { en },
+    });
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,88 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<LineageEventsTable /> matches the latest snapshot (no jobs) 1`] = `
+<div>
+  <h4
+    class="ui header"
+  >
+    <i
+      aria-hidden="true"
+      class="search icon"
+    />
+    <div
+      class="content"
+    >
+      No graphs found
+    </div>
+  </h4>
+</div>
+`;
+
+exports[`<LineageEventsTable /> matches the latest snapshot 1`] = `
+<div>
+  <table
+    class="ui selectable sortable table"
+  >
+    <thead
+      class=""
+    >
+      <tr
+        class=""
+      >
+        <th
+          class="two wide"
+        >
+          Graph
+        </th>
+        <th
+          class="two wide"
+        >
+          Status
+        </th>
+        <th
+          class="two wide"
+        >
+          Message
+        </th>
+        <th
+          class="two wide"
+        >
+          Date
+        </th>
+      </tr>
+    </thead>
+    <tbody
+      class=""
+    >
+      <tr
+        class=""
+      >
+        <td
+          class=""
+        >
+          graph_data
+        </td>
+        <td
+          class=""
+        >
+          Completed
+        </td>
+        <td
+          class=""
+        >
+          message
+        </td>
+        <td
+          class="center aligned"
+        >
+          <time
+            datetime="1637921367168"
+          >
+            2021-11-26 10:09
+          </time>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;

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

@@ -10,6 +10,10 @@ exports[`<LineageRoutes /> matches the latest snapshot 1`] = `
     path="/graphs/:id"
     render={[Function]}
   />
+  <Route
+    path="/lineage_events"
+    render={[Function]}
+  />
   <Route
     path="/sample"
     render={[Function]}

package/src/messages/en.js

@@ -103,12 +103,27 @@ export default {
   "graph.header.target_class": "Target Type",
   "graph.header.target_external_id": "Target External Id",
   "graph.header.target_name": "Target Name",
+  "lineage.events.header": "My graphs",
+  "lineage.events.props.graph_data": "Graph",
+  "lineage.events.props.inserted_at": "Date",
+  "lineage.events.props.message": "Message",
+  "lineage.events.props.status": "Status",
+  "lineage.events.search.results.empty": "No graphs found",
+  "lineage.events.subheader": "Lineage graphs",
   "lineage.form.header": "Select Structures",
   "lineage.form.levels.all.label": "All",
   "lineage.form.levels.header": "Levels",
   "lineage.form.levels.select.input": "Select...",
   "lineage.form.levels.select.label": "Depth",
   "lineage.graph.loading": "Analyzing...",
+  "lineage.graph.loading.background.launched": "Background task launched",
+  "lineage.graph.loading.background.existing": "The task for this graph was already launched",
+  "lineage.graph.loading.polling": "Poll retry #{retry}",
+  "lineage.graph.status.already_calculated": "Already calculated",
+  "lineage.graph.status.already_started": "Already started",
+  "lineage.graph.status.just_started": "Just started",
+  "lineage.graph.status.completed": "Completed",
+  "lineage.graph.status.failed": "Failed",
   "lineage.group.placeholder": "Select Top Level Structure",
   "lineage.resources.placeholder": "Select Child Structures",
   "lineage.subgroup.placeholder": "Select Child Structure",

package/src/messages/es.js

@@ -105,12 +105,27 @@ export default {
   "graph.header.target_class": "Tipo Destino",
   "graph.header.target_external_id": "Id Externo Destino",
   "graph.header.target_name": "Nombre Destino",
+  "lineage.events.header": "Mis grafos",
+  "lineage.events.props.graph_data": "Grafo",
+  "lineage.events.props.inserted_at": "Fecha",
+  "lineage.events.props.message": "Mensaje",
+  "lineage.events.props.status": "Estado",
+  "lineage.events.search.results.empty": "Ningún grafo encontrado",
+  "lineage.events.subheader": "Grafos de linaje",
   "lineage.form.header": "Seleccionar Estructuras",
   "lineage.form.levels.all.label": "Completo",
   "lineage.form.levels.header": "Niveles",
   "lineage.form.levels.select.input": "Seleccionar...",
   "lineage.form.levels.select.label": "Profundidad",
   "lineage.graph.loading": "Analizando...",
+  "lineage.graph.loading.background.launched": "Tarea en segundo plano lanzada para grafo",
+  "lineage.graph.loading.background.existing": "La tarea en segundo plano para este grafo ya fue lanzada",
+  "lineage.graph.loading.polling": "Sondeo #{retry}",
+  "lineage.graph.status.already_calculated": "Previamente calculado",
+  "lineage.graph.status.already_started": "Previamente iniciado",
+  "lineage.graph.status.just_started": "Iniciado",
+  "lineage.graph.status.completed": "Finalizado",
+  "lineage.graph.status.failed": "Fallido",
   "lineage.group.placeholder": "Seleccionar Estructura Padre",
   "lineage.resources.placeholder": "Seleccionar Estructuras Hijos",
   "lineage.subgroup.placeholder": "Seleccionar Estructura Hijo",

package/src/reducers/__tests__/graphLoading.spec.js

@@ -5,7 +5,7 @@ import {
   createStructureGraph,
   fetchGraph,
   fetchStructure,
-  fetchStructureGraph
+  fetchStructureGraph,
 } from "../../routines";
 import { graphLoading } from "..";
 
@@ -17,7 +17,7 @@ describe("reducers: graphLoading", () => {
   });
 
   it("should be true after receiving the createGraph.REQUEST action", () => {
-    expect(graphLoading(false, { type: createGraph.REQUEST })).toBe(true);
+    expect(graphLoading(false, { type: createGraph.REQUEST })).toBeTruthy();
   });
 
   it("should be true after receiving the createStructureGraph.REQUEST action", () => {

package/src/reducers/__tests__/lineageEventsLoading.spec.js

@@ -0,0 +1,24 @@
+import { lineageEventsLoading } from "../lineageEventsLoading";
+import { fetchLineageEvents } from "../../routines";
+
+const fooState = { foo: "bar" };
+
+describe("reducers: lineageEventsLoading", () => {
+  it("should provide the initial state", () => {
+    expect(lineageEventsLoading(undefined, {})).toBe(false);
+  });
+
+  it("returns to initial state on fetchLineageEvents.FULFILL action", () => {
+    expect(lineageEventsLoading(fooState, { type: fetchLineageEvents.FULFILL })).toBe(
+      false
+    );
+  });
+
+  it("returns true on fetchLineageEvents.REQUEST action", () => {
+    expect(lineageEventsLoading(fooState, { type: fetchLineageEvents.REQUEST })).toBe(true);
+  });
+
+  it("should ignore unhandled actions", () => {
+    expect(lineageEventsLoading(fooState, { type: "FOO" })).toBe(fooState);
+  });
+});

package/src/reducers/graph.js

@@ -3,7 +3,8 @@ import {
   clearGraph,
   clearStructure,
   fetchGraph,
-  fetchStructure
+  fetchStructure,
+  createGraph
 } from "../routines";
 
 export const initialState = {};
@@ -18,6 +19,8 @@ export const graph = (state = initialState, { type, payload }) => {
       return initialState;
     case fetchGraph.SUCCESS:
       return _.prop("data")(payload);
+    case createGraph.SUCCESS:
+      return _.prop("data")(payload);
     default:
       return state;
   }

package/src/reducers/graphLoading.js

@@ -5,25 +5,29 @@ import {
   createStructureGraph,
   fetchGraph,
   fetchStructure,
-  fetchStructureGraph
+  fetchStructureGraph,
 } from "../routines";
 
-export const graphLoading = (state = false, { type }) => {
+export const graphLoading = (state = false, { type, payload }) => {
   switch (type) {
     case clearGraph.TRIGGER:
       return false;
     case clearStructure.TRIGGER:
       return false;
+    case createGraph.SUCCESS:
+    case createGraph.FAILURE:
     case createGraph.FULFILL:
       return false;
     case createGraph.REQUEST:
-      return true;
+      return payload || true;
     case createStructureGraph.REQUEST:
       return true;
     case fetchGraph.FULFILL:
       return false;
     case fetchGraph.REQUEST:
-      return true;
+      return payload || true;
+    case fetchGraph.FAILURE:
+      return payload;
     case fetchStructure.TRIGGER:
       return false;
     case fetchStructureGraph.FULFILL:

package/src/reducers/graphRedirect.js

@@ -13,8 +13,7 @@ export const graphRedirect = (state = initialState, { type, payload }) => {
     case clearRedirect.TRIGGER:
       return initialState;
     case createGraph.SUCCESS:
-      const { data } = payload;
-      return linkTo.GRAPH(data);
+      return linkTo.GRAPH(payload?.data);
     default:
       return state;
   }

package/src/reducers/index.js

@@ -19,6 +19,8 @@ import { grantsPageSize } from "./grantsPageSize";
 import { graph } from "./graph";
 import { graphLoading } from "./graphLoading";
 import { graphRedirect } from "./graphRedirect";
+import { lineageEvents } from "./lineageEvents";
+import { lineageEventsLoading } from "./lineageEventsLoading";
 import { lineageQuery } from "./lineageQuery";
 import { linkedStructureTags } from "./linkedStructureTags";
 import { linkedStructureTagsLoading } from "./linkedStructureTagsLoading";
@@ -112,6 +114,8 @@ export {
   graph,
   graphLoading,
   graphRedirect,
+  lineageEvents,
+  lineageEventsLoading,
   lineageQuery,
   linkedStructureTags,
   linkedStructureTagsLoading,

package/src/reducers/lineageEvents.js

@@ -0,0 +1,13 @@
+import _ from "lodash/fp";
+import { fetchLineageEvents } from "../routines";
+
+export const initialState = [];
+
+export const lineageEvents = (state = initialState, { type, payload }) => {
+  switch (type) {
+    case fetchLineageEvents.SUCCESS:
+      return _.prop("data")(payload);
+    default:
+      return state;
+  }
+};

package/src/reducers/lineageEventsLoading.js

@@ -0,0 +1,14 @@
+import { fetchLineageEvents } from "../routines";
+
+const lineageEventsLoading = (state = false, { type }) => {
+  switch (type) {
+    case fetchLineageEvents.REQUEST:
+      return true;
+    case fetchLineageEvents.FULFILL:
+      return false;
+    default:
+      return state;
+  }
+};
+
+export { lineageEventsLoading };

package/src/routines.js

@@ -13,6 +13,7 @@ export const applyStructureUserFilter = createRoutine(
   "APPLY_STRUCTURE_USER_FILTER"
 );
 export const bulkUpdateStructures = createRoutine("BULK_UPDATE_STRUCTURES");
+export const cancelPoll = createRoutine("CANCEL_POLL");
 export const clearGrantFilters = createRoutine("CLEAR_GRANT_FILTERS");
 export const clearGrants = createRoutine("CLEAR_GRANTS");
 export const clearGrantsSort = createRoutine("CLEAR_GRANTS_SORT");
@@ -68,6 +69,7 @@ export const fetchGrant = createRoutine("FETCH_GRANT");
 export const fetchGrantFilters = createRoutine("FETCH_GRANT_FILTERS");
 export const fetchGrants = createRoutine("FETCH_GRANTS");
 export const fetchGraph = createRoutine("FETCH_GRAPH");
+export const fetchLineageEvents = createRoutine("FETCH_LINEAGE_EVENTS");
 export const fetchLinksStructureTags = createRoutine(
   "FETCH_LINKS_STRUCTURE_TAGS"
 );
@@ -93,6 +95,7 @@ export const fetchUnitDomains = createRoutine("FETCH_UNIT_DOMAINS");
 export const filterStructures = createRoutine("FILTER_STRUCTURES");
 export const hoverNode = createRoutine("HOVER_NODE");
 export const initSvg = createRoutine("INIT_SVG");
+export const loadLineageEvents = createRoutine("LOAD_LINEAGE_EVENTS");
 export const linkStructureTag = createRoutine("LINK_STRUCTURE_TAG");
 export const openGrantFilter = createRoutine("OPEN_GRANT_FILTER");
 export const openStructureFilter = createRoutine("OPEN_STRUCTURE_FILTER");

package/src/sagas/__tests__/createGraph.spec.js

@@ -1,13 +1,48 @@
+import { compile } from "path-to-regexp";
 import { takeLatest } from "redux-saga/effects";
 import { testSaga } from "redux-saga-test-plan";
-import { apiJsonPost, JSON_OPTS } from "@truedat/core/services/api";
+import { apiJson, apiJsonPost, JSON_OPTS } from "@truedat/core/services/api";
 import {
   createGraphRequestSaga,
   createGraphSaga,
-  selectLineageQuery
+  polling,
+  POLLING_CANCELLED,
+  selectLineageQuery,
 } from "../createGraph";
-import { createGraph, excludeNode } from "../../routines";
-import { API_GRAPHS } from "../../api";
+import {
+  cancelPoll,
+  createGraph,
+  fetchGraph,
+  excludeNode,
+} from "../../routines";
+import { API_GRAPHS, API_GRAPH_HASH } from "../../api";
+
+const graphAcceptedData = {
+  graph_hash: "CUYAfW8NAUhqDByfK1dSOBnKcv-rE2CjLtqoIKFMWoc=",
+  status: "just_started",
+  task_reference: "0.3951494048.1635778562.126161",
+};
+
+const graphPendingData = {
+  graph_data: '["BASILEAII_HIST_PROA_MOROSIDAD [ 2 ] [ 1 ].SOBREGIROCAPITAL"]',
+  graph_hash: "CUYAfW8NAUhqDByfK1dSOBnKcv-rE2CjLtqoIKFMWoc=",
+  inserted_at: "2021-11-25T16:03:29.145893",
+  status: "already_started",
+  task_reference: "0.3951494048.1635778562.126161",
+};
+
+const graphData = {
+  hash: "CUYAfW8NAUhqDByfK1dSOBnKcv-rE2CjLtqoIKFMWoc=",
+  id: 1692,
+  excludes: [],
+  groups: [],
+  ids: ["BASILEAII_HIST_PROA_MOROSIDAD [ 2 ] [ 1 ].SOBREGIROCAPITAL"],
+  opts: {
+    type: "lineage",
+  },
+  paths: [],
+  resources: [],
+};
 
 describe("sagas: createGraphRequestSaga", () => {
   it("should invoke createGraphSaga on trigger", () => {
@@ -33,20 +68,58 @@ describe("sagas: createGraphRequestSaga", () => {
 });
 
 describe("sagas: createGraphSaga", () => {
-  const query = { type: "lineage", ids: ["foo"], excludes: [] };
-  const data = { foo: "bar" };
+  const query = {
+    ids: ["BASILEAII_HIST_PROA_MOROSIDAD [ 2 ] [ 1 ].SOBREGIROCAPITAL"],
+    type: "lineage",
+    exclude: [],
+  };
 
-  it("should put a success action when uuids are requested and a response is returned", () => {
+  const graphAccepted = {
+    data: graphAcceptedData,
+    status: 202,
+  };
+
+  const graphCreated = {
+    data: graphData,
+    status: 201,
+  };
+
+  it("should put a success action when uuids are requested and a 201 (created) graph data response is returned", () => {
     expect(() => {
-      testSaga(createGraphSaga, {})
+      testSaga(createGraphSaga)
         .next()
         .select(selectLineageQuery)
         .next(query)
         .put(createGraph.request(query))
         .next()
         .call(apiJsonPost, API_GRAPHS, query, JSON_OPTS)
-        .next({ data })
-        .put(createGraph.success(data))
+        .next(graphCreated)
+        .put(createGraph.success(graphCreated))
+        .next()
+        .put(createGraph.fulfill())
+        .next()
+        .isDone();
+    }).not.toThrow();
+  });
+
+  it("should fork a polling task when uuids are requested and a 202 (accepted) graph hash response is returned. Then, wait for task cancellation.", () => {
+
+    expect(() => {
+      testSaga(createGraphSaga)
+        .next()
+        .select(selectLineageQuery)
+        .next(query)
+        .put(createGraph.request(query))
+        .next()
+        .call(apiJsonPost, API_GRAPHS, query, JSON_OPTS)
+        .next(graphAccepted)
+        .put(fetchGraph.request(graphAccepted))
+        .next()
+        .fork(polling, graphAccepted)
+        .next()
+        .take(cancelPoll.TRIGGER)
+        .next()
+        .cancel()
         .next()
         .put(createGraph.fulfill())
         .next()
@@ -59,8 +132,8 @@ describe("sagas: createGraphSaga", () => {
     const error = { message };
 
     expect(() => {
-      testSaga(createGraphSaga, {})
-        .next(query)
+      testSaga(createGraphSaga)
+        .next()
         .select(selectLineageQuery)
         .next(query)
         .put(createGraph.request(query))
@@ -75,3 +148,82 @@ describe("sagas: createGraphSaga", () => {
     }).not.toThrow();
   });
 });
+
+describe("generator: polling", () => {
+  const graphAccepted = {
+    data: graphAcceptedData,
+    status: 202,
+  };
+
+  const graphPending = {
+    data: graphPendingData,
+    status: 202,
+  };
+
+  const graphCompleted = {
+    data: graphData,
+    status: 200,
+  };
+
+  it("polling should keep requesting by graph hash until graph is received", () => {
+    expect(() => {
+      testSaga(polling, graphAccepted)
+        .next()
+        .delay(1000)
+        .next()
+        .call(
+          apiJson,
+          compile(API_GRAPH_HASH)({ hash: graphAccepted.data.graph_hash }),
+          JSON_OPTS
+        )
+        .next(graphPending)
+        .put(
+          fetchGraph.failure({
+            data: { graph_hash: graphAccepted.data.graph_hash, retry: 1 },
+          })
+        )
+        .next()
+        .cancelled()
+        .next(false)
+        .delay(1200)
+        .next()
+        .call(
+          apiJson,
+          compile(API_GRAPH_HASH)({ hash: graphAccepted.data.graph_hash }),
+          JSON_OPTS
+        )
+        .next(graphCompleted)
+        .cancelled()
+        .next(false)
+        .put(createGraph.success(graphCompleted))
+        .next()
+        .isDone();
+    }).not.toThrow();
+  });
+
+  it("cancel should stop polling and return createGraph failure", () => {
+    expect(() => {
+      testSaga(polling, graphAccepted)
+        .next()
+        .delay(1000)
+        .next()
+        .call(
+          apiJson,
+          compile(API_GRAPH_HASH)({ hash: graphAccepted.data.graph_hash }),
+          JSON_OPTS
+        )
+        .next(graphPending)
+        .put(
+          fetchGraph.failure({
+            data: { graph_hash: graphAccepted.data.graph_hash, retry: 1 },
+          })
+        )
+        .next()
+        .cancelled()
+        .next(true)
+        .put(createGraph.failure(POLLING_CANCELLED))
+        .next()
+        .isDone();
+    }).not.toThrow();
+  });
+});

package/src/sagas/createGraph.js

@@ -1,17 +1,63 @@
+/* eslint-disable fp/no-mutation */
+/* eslint-disable fp/no-let */
 import _ from "lodash/fp";
-import { all, call, put, select, takeLatest } from "redux-saga/effects";
-import { apiJsonPost, JSON_OPTS } from "@truedat/core/services/api";
-import { excludeNode, createGraph } from "../routines";
-import { API_GRAPHS } from "../api";
+import {
+  all,
+  call,
+  cancel,
+  cancelled,
+  fork,
+  put,
+  select,
+  take,
+  takeLatest,
+  delay,
+} from "redux-saga/effects";
+import { apiJson, apiJsonPost, JSON_OPTS } from "@truedat/core/services/api";
+import { compile } from "path-to-regexp";
+import { excludeNode, cancelPoll, createGraph, fetchGraph } from "../routines";
+import { API_GRAPHS, API_GRAPH_HASH } from "../api";
 
 export const selectLineageQuery = _.prop("lineageQuery");
 
+export const POLLING_CANCELLED = "Polling cancelled!";
+
+function* exponentialBackoff(base, power) {
+  while (true) {
+    yield Math.pow(base, power);
+    // eslint-disable-next-line fp/no-mutation, no-param-reassign
+    power++;
+  }
+}
+
 export function* createGraphSaga() {
+  let graphAcceptedOrCreated;
   try {
     const body = yield select(selectLineageQuery);
     yield put(createGraph.request(body));
-    const { data } = yield call(apiJsonPost, API_GRAPHS, body, JSON_OPTS);
-    yield put(createGraph.success(data));
+
+    /* graph is either new (accepted) or "created" (actually previously stored
+      from an earlier accepted one) */
+    graphAcceptedOrCreated = yield call(
+      apiJsonPost,
+      API_GRAPHS,
+      body,
+      JSON_OPTS
+    );
+
+    if (graphAcceptedOrCreated.status == 202) {
+      yield put(fetchGraph.request(graphAcceptedOrCreated));
+      // starts the task in the background
+      const pollingTask = yield fork(polling, graphAcceptedOrCreated);
+
+      // wait for the user stop action
+      yield take(cancelPoll.TRIGGER);
+      // user clicked stop. cancel the background task
+      // this will cause the forked bgSync task to jump into its finally block
+      yield cancel(pollingTask);
+    } else if (graphAcceptedOrCreated.status == 201) {
+      yield put(createGraph.success(graphAcceptedOrCreated));
+    }
   } catch (error) {
     if (error.response) {
       const { status, data } = error.response;
@@ -24,6 +70,51 @@ export function* createGraphSaga() {
   }
 }
 
+export function* polling(graphAccepted) {
+  const backoff = exponentialBackoff(1.2, 0);
+  let backoffTime,
+    retry = 0,
+    graphResp,
+    isCancelled = false;
+
+  do {
+    backoffTime = backoff.next().value * 1000;
+    yield delay(backoffTime);
+
+    try {
+      graphResp = yield call(
+        apiJson,
+        compile(API_GRAPH_HASH)({
+          hash: graphAccepted.data.graph_hash,
+        }),
+        JSON_OPTS
+      );
+    } catch (error) {
+      if (error.response) {
+        const { status, data } = error.response;
+        yield put(createGraph.failure({ status, data }));
+      } else {
+        yield put(createGraph.failure(error.message));
+      }
+    }
+
+    graphResp?.status == 202 &&
+      (yield put(
+        fetchGraph.failure({
+          data: {
+            graph_hash: graphAccepted.data.graph_hash,
+            retry: ++retry,
+          },
+        })
+      ));
+
+    isCancelled = yield cancelled();
+    isCancelled && (yield put(createGraph.failure(POLLING_CANCELLED)));
+  } while (!isCancelled && graphResp?.status == 202);
+
+  graphResp?.status == 200 && (yield put(createGraph.success(graphResp)));
+}
+
 export function* createGraphRequestSaga() {
   yield all([
     takeLatest(createGraph.TRIGGER, createGraphSaga),

package/src/sagas/fetchGraph.js

@@ -11,6 +11,7 @@ export function* fetchGraphSaga({ payload }) {
     const url = toApiPath(payload);
     yield put(fetchGraph.request(payload));
     const { data } = yield call(apiJson, url, JSON_OPTS);
+
     yield put(fetchGraph.success(data));
   } catch (error) {
     if (error.response) {

package/src/sagas/fetchLineageEvents.js

@@ -0,0 +1,26 @@
+import { call, put, takeLatest } from "redux-saga/effects";
+import { apiJson, JSON_OPTS } from "@truedat/core/services/api";
+import { fetchLineageEvents } from "../routines";
+import { API_LINEAGE_EVENTS } from "../api";
+
+export function* fetchLineageEventsSaga() {
+  try {
+    const url = API_LINEAGE_EVENTS;
+    yield put(fetchLineageEvents.request());
+    const { data, headers } = yield call(apiJson, url, JSON_OPTS);
+    yield put(fetchLineageEvents.success({ data, headers }));
+  } catch (error) {
+    if (error.response) {
+      const { status, data } = error.response;
+      yield put(fetchLineageEvents.failure({ status, data }));
+    } else {
+      yield put(fetchLineageEvents.failure(error.message));
+    }
+  } finally {
+    yield put(fetchLineageEvents.fulfill());
+  }
+}
+
+export function* fetchLineageEventsRequestSaga() {
+  yield takeLatest(fetchLineageEvents.TRIGGER, fetchLineageEventsSaga);
+}

package/src/sagas/index.js

@@ -1,4 +1,5 @@
 import { bulkUpdateStructuresRequestsSaga } from "./bulkUpdateStructures";
+//import { cancelPollRequestSaga } from "./cancelPoll";
 import { createGrantRequestApprovalRequestSaga } from "./createGrantRequestApproval";
 import { createGraphRequestSaga } from "./createGraph";
 import { createProfileGroupRequestSaga } from "./createProfileGroup";
@@ -19,6 +20,7 @@ import { fetchGrantsRequestSaga } from "./fetchGrants";
 import { fetchGrantRequestRequestSaga } from "./fetchGrantRequest";
 import { fetchGrantRequestsRequestSaga } from "./fetchGrantRequests";
 import { fetchGraphRequestSaga } from "./fetchGraph";
+import { fetchLineageEventsRequestSaga } from "./fetchLineageEvents";
 import { fetchLinksStructureTagsRequestSaga } from "./fetchLinksStructureTags";
 import { fetchNodesRequestSaga } from "./fetchNodes";
 import { fetchProfileExecutionRequestSaga } from "./fetchProfileExecution";
@@ -48,6 +50,7 @@ import { operateGrantRequestToCartRequestSaga } from "./operateGrantRequestCart"
 
 export {
   bulkUpdateStructuresRequestsSaga,
+  //cancelPollRequestSaga,
   createGrantRequestApprovalRequestSaga,
   createGraphRequestSaga,
   createProfileGroupRequestSaga,
@@ -68,6 +71,7 @@ export {
   fetchGrantRequestRequestSaga,
   fetchGrantRequestsRequestSaga,
   fetchGraphRequestSaga,
+  fetchLineageEventsRequestSaga,
   fetchLinksStructureTagsRequestSaga,
   fetchNodesRequestSaga,
   fetchProfileExecutionRequestSaga,
@@ -98,6 +102,7 @@ export {
 
 export default [
   bulkUpdateStructuresRequestsSaga(),
+  //cancelPollRequestSaga(),
   createGrantRequestApprovalRequestSaga(),
   createGraphRequestSaga(),
   createProfileGroupRequestSaga(),
@@ -118,6 +123,7 @@ export default [
   fetchGrantRequestRequestSaga(),
   fetchGrantRequestsRequestSaga(),
   fetchGraphRequestSaga(),
+  fetchLineageEventsRequestSaga(),
   fetchLinksStructureTagsRequestSaga(),
   fetchNodesRequestSaga(),
   fetchProfileExecutionRequestSaga(),

package/src/selectors/getLineageEventColumns.js

@@ -0,0 +1,52 @@
+import _ from "lodash/fp";
+import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+import Moment from "react-moment";
+
+const dateDecorator = (date) =>
+  date && <Moment locale="es" date={date} format="YYYY-MM-DD HH:mm" />;
+
+const statusDecorator = (status) =>
+  <FormattedMessage id={`lineage.graph.status.${_.lowerCase(status)}`} />
+
+const customLineageEventColumns = null;
+const defaultLineageEventColumns = [
+  {
+    name: "graph_data",
+    sort: { name: "graph_data.sort" },
+    width: 2
+  }, 
+  // {
+  //   name: "graph_hash",
+  //   sort: { name: "graph_hash.sort" },
+    
+  //   width: 2
+  // },
+  {
+    name: "status",
+    sort: { name: "status.sort" },
+    fieldDecorator: statusDecorator,
+    width: 2
+  },
+  // {
+  //   name: "task_reference",
+  //   sort: { name: "task_reference.sort" },
+  //   fieldSelector: _.path("type"),
+  //   width: 2
+  // },
+  {
+    name: "message",
+    width: 2
+  },
+  {
+    name: "inserted_at",
+    sort: { name: "inserted_at" },
+    fieldDecorator: dateDecorator,
+    textAlign: "center",
+    width: 2
+  }
+];
+
+
+export const lineageEventColumns =
+  customLineageEventColumns || defaultLineageEventColumns;

package/src/styles/lineageGraph.less

@@ -0,0 +1,3 @@
+.graph-hash {
+  font-family: monospace;
+}