@truedat/dd 8.10.2 → 8.10.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "8.10.2",
+  "version": "8.10.4",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "module": "src/index.js",
@@ -54,7 +54,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.10.2",
+    "@truedat/test": "8.10.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -89,5 +89,5 @@
     "svg-pan-zoom": "^3.6.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "40436c0d8d650f31421d9695035f2d54e5b1c28c"
+  "gitHead": "fe4fda03b2b73d26f644219d806dcc45767a3c7a"
 }

package/src/components/Graphs.js

@@ -0,0 +1,109 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { useParams } from "react-router";
+import { Segment } from "semantic-ui-react";
+import LineageHeader from "./LineageHeader";
+import LineageSelectionPanel from "./LineageSelectionPanel";
+import GraphRedirector from "./GraphRedirector";
+import LineageGraph from "./LineageGraph";
+
+export const Graphs = () => {
+  const { id } = useParams();
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(Boolean(id));
+  const [sidebarHintActive, setSidebarHintActive] = useState(Boolean(id));
+  const [sidebarHintOn, setSidebarHintOn] = useState(Boolean(id));
+  const [sidebarHintToken, setSidebarHintToken] = useState(0);
+  const sidebarHintTimeoutRef = useRef();
+  const sidebarHintIntervalRef = useRef();
+  const clearSidebarHint = useCallback(() => {
+    if (sidebarHintTimeoutRef.current) {
+      clearTimeout(sidebarHintTimeoutRef.current);
+      sidebarHintTimeoutRef.current = undefined;
+    }
+    if (sidebarHintIntervalRef.current) {
+      clearInterval(sidebarHintIntervalRef.current);
+      sidebarHintIntervalRef.current = undefined;
+    }
+    setSidebarHintActive(false);
+    setSidebarHintOn(false);
+  }, []);
+  const showSidebarHint = useCallback(() => {
+    if (sidebarHintTimeoutRef.current)
+      clearTimeout(sidebarHintTimeoutRef.current);
+    if (sidebarHintIntervalRef.current)
+      clearInterval(sidebarHintIntervalRef.current);
+
+    setSidebarHintToken((token) => token + 1);
+    setSidebarHintActive(true);
+    setSidebarHintOn(true);
+    const pulseCountRef = { current: 0 };
+    sidebarHintIntervalRef.current = setInterval(() => {
+      pulseCountRef.current += 1;
+      setSidebarHintOn((active) => !active);
+
+      if (pulseCountRef.current >= 3) {
+        clearInterval(sidebarHintIntervalRef.current);
+        sidebarHintIntervalRef.current = undefined;
+      }
+    }, 300);
+    sidebarHintTimeoutRef.current = setTimeout(() => {
+      setSidebarHintActive(false);
+      setSidebarHintOn(false);
+      sidebarHintTimeoutRef.current = undefined;
+      if (sidebarHintIntervalRef.current) {
+        clearInterval(sidebarHintIntervalRef.current);
+        sidebarHintIntervalRef.current = undefined;
+      }
+    }, 1200);
+  }, []);
+  const collapseSidebarWithHint = useCallback(() => {
+    setSidebarCollapsed(true);
+    showSidebarHint();
+  }, [showSidebarHint]);
+  const handleToggleSidebar = useCallback(() => {
+    clearSidebarHint();
+    setSidebarCollapsed((collapsed) => !collapsed);
+  }, [clearSidebarHint]);
+
+  useEffect(() => {
+    if (id) collapseSidebarWithHint();
+  }, [collapseSidebarWithHint, id]);
+
+  useEffect(
+    () => () => {
+      if (sidebarHintTimeoutRef.current) {
+        clearTimeout(sidebarHintTimeoutRef.current);
+      }
+      if (sidebarHintIntervalRef.current) {
+        clearInterval(sidebarHintIntervalRef.current);
+      }
+    },
+    [],
+  );
+
+  return (
+    <Segment className="lineage-view">
+      <LineageHeader />
+      <div
+        className={`lineage-view__workspace${
+          sidebarCollapsed ? " lineage-view__workspace--sidebar-collapsed" : ""
+        }`}
+      >
+        <LineageSelectionPanel
+          collapsed={sidebarCollapsed}
+          onGraphLoad={collapseSidebarWithHint}
+          onToggle={handleToggleSidebar}
+          sidebarHintActive={sidebarHintActive}
+          sidebarHintOn={sidebarHintOn}
+          sidebarHintToken={sidebarHintToken}
+        />
+        <main className="lineage-view__main">
+          <GraphRedirector />
+          <LineageGraph />
+        </main>
+      </div>
+    </Segment>
+  );
+};
+
+export default Graphs;

package/src/components/LineageDomainSelectorSkeleton.js

@@ -0,0 +1,8 @@
+const LineageDomainSelectorSkeleton = () => (
+  <div className="lineage-domain-selector-skeleton" aria-hidden="true">
+    <span className="lineage-domain-selector-skeleton__label" />
+    <span className="lineage-domain-selector-skeleton__icon" />
+  </div>
+);
+
+export default LineageDomainSelectorSkeleton;

package/src/components/LineageDownloadButton.js

@@ -16,17 +16,25 @@ const staticLabels = [
 ];
 
 export const LineageDownloadButton = ({
+  basic = false,
+  className,
   graph,
   csvGraphDownloading,
   graphLoading,
   downloadCsvGraph,
+  disabled = false,
+  content,
+  compact = false,
+  labelPosition = "left",
+  size,
 }) => {
   const { formatMessage } = useIntl();
   const headerLabels = _.flow(
     _.map((l) => [l, formatMessage({ id: `graph.header.${l}` })]),
     _.fromPairs,
   )(staticLabels);
-  const messagePopup = _.negate(_.isEmpty)(graph)
+  const downloadDisabled = disabled || _.isEmpty(graph);
+  const messagePopup = !downloadDisabled
     ? formatMessage({ id: "graph.actions.download.tooltip" })
     : formatMessage({ id: "graph.actions.download.popup" });
   return (
@@ -37,13 +45,21 @@ export const LineageDownloadButton = ({
         trigger={
           <span>
             <Button
-              secondary
+              basic={basic}
+              className={className}
+              compact={compact}
+              content={content}
               icon="download"
-              onClick={() =>
-                downloadCsvGraph({ headerLabels, id: _.prop("id")(graph) })
-              }
+              labelPosition={content ? labelPosition : undefined}
+              onClick={() => {
+                if (downloadDisabled) return;
+
+                downloadCsvGraph({ headerLabels, id: _.prop("id")(graph) });
+              }}
               loading={csvGraphDownloading}
-              disabled={_.isEmpty(graph)}
+              disabled={downloadDisabled}
+              secondary={!basic}
+              size={size}
             />
           </span>
         }
@@ -53,10 +69,17 @@ export const LineageDownloadButton = ({
 };
 
 LineageDownloadButton.propTypes = {
+  basic: PropTypes.bool,
+  className: PropTypes.string,
+  compact: PropTypes.bool,
+  content: PropTypes.node,
+  disabled: PropTypes.bool,
   graph: PropTypes.object,
   csvGraphDownloading: PropTypes.bool,
   graphLoading: PropTypes.bool,
   downloadCsvGraph: PropTypes.func,
+  labelPosition: PropTypes.string,
+  size: PropTypes.string,
 };
 
 const mapStateToProps = (state, ownProps) => ({

package/src/components/LineageEventsPanel.js

@@ -0,0 +1,206 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useNavigate } from "react-router";
+import { connect } from "react-redux";
+import { FormattedMessage, useIntl } from "react-intl";
+import { Icon, Popup } from "semantic-ui-react";
+import Moment from "react-moment";
+import { linkTo } from "@truedat/core/routes";
+import {
+  isCompletedStatus,
+  isFailedStatus,
+  lineageEventType,
+  graphLabel,
+  graphScope,
+  graphDomain,
+  graphFirstLevel,
+  graphTypeMessageId,
+  graphTypeIcon,
+  eventErrorMessage,
+  eventTimestamp,
+} from "./lineageEventHelpers";
+
+export const LineageEventsPanel = ({
+  lineageEvents = [],
+  lineageEventsLoading,
+  onGraphLoad,
+}) => {
+  const { formatMessage } = useIntl();
+  const navigate = useNavigate();
+  const sortedEvents = [...lineageEvents].sort(
+    (a, b) => eventTimestamp(b) - eventTimestamp(a),
+  );
+
+  return (
+    <div className="lineage-events-panel">
+      <div className="lineage-events-panel__header">
+        <span>
+          <FormattedMessage id="lineage.events.panel.header" />
+        </span>
+        <Icon name="clock outline" />
+      </div>
+      <div className="lineage-events-panel__scrollable">
+        {lineageEventsLoading ? (
+          <div className="lineage-events-panel__empty">
+            <Icon loading name="circle notched" />
+            <span>
+              <FormattedMessage id="lineage.events.panel.loading" />
+            </span>
+          </div>
+        ) : null}
+        {!lineageEventsLoading && sortedEvents.length ? (
+          <div className="lineage-events-panel__list">
+            {sortedEvents.map((event, index) => {
+              const completed = isCompletedStatus(event.status);
+              const failed = isFailedStatus(event.status);
+              const canLoadGraph = completed && event.graph_id;
+              const type = lineageEventType(event);
+              const errorMessage = eventErrorMessage(event);
+              const scope = graphScope(event.graph_data);
+              const domain = graphDomain(event);
+              const firstLevel = graphFirstLevel(event);
+
+              const handleCardClick = () => {
+                if (onGraphLoad) onGraphLoad();
+                navigate(linkTo.GRAPH({ id: event.graph_id }));
+              };
+
+              const handleCardKeyDown = (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleCardClick();
+                }
+              };
+
+              return (
+                <article
+                  className={`lineage-events-panel__item${
+                    canLoadGraph ? " lineage-events-panel__item--clickable" : ""
+                  }`}
+                  key={event.graph_id || event.id || index}
+                  onClick={canLoadGraph ? handleCardClick : undefined}
+                  onKeyDown={canLoadGraph ? handleCardKeyDown : undefined}
+                  role={canLoadGraph ? "button" : undefined}
+                  aria-label={
+                    canLoadGraph
+                      ? formatMessage({ id: "lineage.events.panel.load" })
+                      : undefined
+                  }
+                  tabIndex={canLoadGraph ? 0 : undefined}
+                >
+                  <div className="lineage-events-panel__item-header">
+                    <div className="lineage-events-panel__item-title">
+                      <Icon name="code branch" />
+                      <span>{graphLabel(event, index)}</span>
+                    </div>
+                    <div
+                      className={`lineage-events-panel__card-status${
+                        completed
+                          ? " lineage-events-panel__card-status--completed"
+                          : ""
+                      }${
+                        failed
+                          ? " lineage-events-panel__card-status--failed"
+                          : ""
+                      }`}
+                    >
+                      {failed ? (
+                        <Popup
+                          inverted
+                          on="hover click"
+                          position="top center"
+                          trigger={
+                            <button
+                              aria-label={formatMessage({
+                                id: "lineage.events.panel.error",
+                              })}
+                              className="lineage-events-panel__card-status-trigger"
+                              type="button"
+                            >
+                              <Icon name="warning circle" />
+                              KO
+                            </button>
+                          }
+                        >
+                          {errorMessage || (
+                            <FormattedMessage id="lineage.events.panel.error.empty" />
+                          )}
+                        </Popup>
+                      ) : (
+                        <span className="lineage-events-panel__card-status-trigger">
+                          <Icon
+                            name={completed ? "check circle" : "circle notched"}
+                          />
+                          {completed ? "OK" : "..."}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                  {domain || firstLevel ? (
+                    <div className="lineage-events-panel__meta">
+                      {domain ? (
+                        <span>
+                          <FormattedMessage id="lineage.events.panel.domain" />:{" "}
+                          {domain}
+                        </span>
+                      ) : null}
+                      {firstLevel ? (
+                        <span>
+                          <FormattedMessage id="lineage.events.panel.first_level" />
+                          : {firstLevel}
+                        </span>
+                      ) : null}
+                    </div>
+                  ) : null}
+                  {scope ? (
+                    <p className="lineage-events-panel__scope">{scope}</p>
+                  ) : null}
+                  <div className="lineage-events-panel__row">
+                    <div className="lineage-events-panel__row-main">
+                      <div className="lineage-events-panel__type">
+                        <Icon name={graphTypeIcon(type)} />
+                        <FormattedMessage id={graphTypeMessageId(type)} />
+                      </div>
+                      <div className="lineage-events-panel__date">
+                        {event.inserted_at ? (
+                          <Moment
+                            locale="es"
+                            date={event.inserted_at}
+                            format="YYYY-MM-DD HH:mm"
+                          />
+                        ) : (
+                          "-"
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </article>
+              );
+            })}
+          </div>
+        ) : null}
+        {!lineageEventsLoading && !sortedEvents.length ? (
+          <div className="lineage-events-panel__empty">
+            <Icon name="clock outline" />
+            <span>
+              <FormattedMessage id="lineage.events.search.results.empty" />
+            </span>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+LineageEventsPanel.propTypes = {
+  lineageEvents: PropTypes.array,
+  lineageEventsLoading: PropTypes.bool,
+  onGraphLoad: PropTypes.func,
+};
+
+const mapStateToProps = (state) => ({
+  lineageEvents: state.lineageEvents,
+  lineageEventsLoading: state.lineageEventsLoading,
+});
+
+export default connect(mapStateToProps)(LineageEventsPanel);