datajunction-ui 0.0.1-rc.9 → 0.0.2-0.dev1

package/src/app/pages/NodePage/NodeGraphTab.jsx

@@ -1,168 +1,139 @@
-import React, { useCallback, useContext, useEffect, useMemo } from 'react';
-import ReactFlow, {
-  addEdge,
-  MiniMap,
-  Controls,
-  Background,
-  useNodesState,
-  useEdgesState,
-  MarkerType,
-} from 'reactflow';
+import { useContext } from 'react';
+import { MarkerType } from 'reactflow';
 
 import '../../../styles/dag.css';
 import 'reactflow/dist/style.css';
-import DJNode from '../../components/djgraph/DJNode';
-import dagre from 'dagre';
 import DJClientContext from '../../providers/djclient';
+import LayoutFlow from '../../components/djgraph/LayoutFlow';
 
-const NodeLineage = djNode => {
+const NodeGraphTab = djNode => {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
-  const nodeTypes = useMemo(() => ({ DJNode: DJNode }), []);
 
-  const [nodes, setNodes, onNodesChange] = useNodesState([]);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-
-  const minimapStyle = {
-    height: 100,
-    width: 150,
-  };
-
-  const dagreGraph = useMemo(() => new dagre.graphlib.Graph(), []);
-  dagreGraph.setDefaultEdgeLabel(() => ({}));
-
-  useEffect(() => {
-    const setElementsLayout = (
-      nodes,
-      edges,
-      direction = 'LR',
-      nodeWidth = 800,
-      nodeHeight = 150,
-    ) => {
-      const isHorizontal = direction === 'TB';
-      dagreGraph.setGraph({ rankdir: direction });
-
-      nodes.forEach(node => {
-        dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
-      });
-
-      edges.forEach(edge => {
-        dagreGraph.setEdge(edge.source, edge.target);
-      });
-
-      dagre.layout(dagreGraph);
-
-      nodes.forEach(node => {
-        const nodeWithPosition = dagreGraph.node(node.id);
-        node.targetPosition = isHorizontal ? 'left' : 'top';
-        node.sourcePosition = isHorizontal ? 'right' : 'bottom';
-        node.position = {
-          x: nodeWithPosition.x - nodeWidth / 2,
-          y: nodeWithPosition.y - nodeHeight / 2,
+  const createNode = node => {
+    const primary_key = node.columns
+      .filter(col =>
+        col.attributes.some(attr => attr.attribute_type.name === 'primary_key'),
+      )
+      .map(col => col.name);
+    const dimensionLinkForeignKeys = node.dimension_links
+      ? node.dimension_links.flatMap(link =>
+          Object.keys(link.foreign_keys).map(key => key.split('.').slice(-1)),
+        )
+      : [];
+    const column_names = node.columns
+      .map(col => {
+        return {
+          name: col.name,
+          type: col.type,
+          dimension: col.dimension !== null ? col.dimension.name : null,
+          order: primary_key.includes(col.name)
+            ? -1
+            : dimensionLinkForeignKeys.includes(col.name)
+            ? 0
+            : 1,
         };
-        return node;
-      });
-
-      return { nodes, edges };
+      })
+      .sort((a, b) => a.order - b.order);
+    return {
+      id: String(node.name),
+      type: 'DJNode',
+      data: {
+        label:
+          node.table !== null
+            ? String(node.schema_ + '.' + node.table)
+            : 'default.' + node.name,
+        table: node.table,
+        name: String(node.name),
+        display_name: String(node.display_name),
+        type: node.type,
+        primary_key: primary_key,
+        column_names: column_names,
+        is_current: node.name === djNode.djNode.name,
+      },
     };
+  };
 
-    const dagFetch = async () => {
-      let upstreams = await djClient.upstreams(djNode.djNode.name);
-      let downstreams = await djClient.downstreams(djNode.djNode.name);
-      var djNodes = [djNode.djNode];
-      for (const iterable of [upstreams, downstreams]) {
-        for (const item of iterable) {
-          djNodes.push(item);
-        }
-      }
-      let edges = [];
-      djNodes.forEach(obj => {
-        obj.parents.forEach(parent => {
-          if (parent.name) {
-            edges.push({
-              id: obj.name + '-' + parent.name,
-              target: obj.name,
-              source: parent.name,
-              animated: true,
-              markerEnd: {
+  const dimensionEdges = node => {
+    return node.dimension_links === undefined
+      ? []
+      : node.dimension_links.flatMap(link => {
+          return Object.keys(link.foreign_keys).map(fk => {
+            return {
+              id:
+                link.dimension.name +
+                '->' +
+                node.name +
+                '=' +
+                link.foreign_keys[fk] +
+                '->' +
+                fk,
+              source: link.dimension.name,
+              sourceHandle: link.foreign_keys[fk],
+              target: node.name,
+              targetHandle: fk,
+              draggable: true,
+              markerStart: {
                 type: MarkerType.Arrow,
+                width: 20,
+                height: 20,
+                color: '#b0b9c2',
+              },
+              style: {
+                strokeWidth: 3,
+                stroke: '#b0b9c2',
               },
-            });
-          }
+            };
+          });
         });
+  };
 
-        obj.columns.forEach(col => {
-          if (col.dimension) {
-            edges.push({
-              id: obj.name + '-' + col.dimension.name,
-              target: obj.name,
-              source: col.dimension.name,
-              draggable: true,
-            });
-          }
-        });
-      });
-      const nodes = djNodes.map(node => {
-        const primary_key = node.columns
-          .filter(col =>
-            col.attributes.some(
-              attr => attr.attribute_type.name === 'primary_key',
-            ),
-          )
-          .map(col => col.name);
-        const column_names = node.columns.map(col => {
-          return { name: col.name, type: col.type };
-        });
+  const parentEdges = node => {
+    return node.parents
+      .filter(parent => parent.name)
+      .map(parent => {
         return {
-          id: String(node.name),
-          type: 'DJNode',
-          data: {
-            label:
-              node.table !== null
-                ? String(node.schema_ + '.' + node.table)
-                : 'default.' + node.name,
-            table: node.table,
-            name: String(node.name),
-            display_name: String(node.display_name),
-            type: node.type,
-            primary_key: primary_key,
-            column_names: column_names,
-            // dimensions: dimensions,
+          id: node.name + '-' + parent.name,
+          source: parent.name,
+          sourceHandle: parent.name,
+          target: node.name,
+          targetHandle: node.name,
+          animated: true,
+          markerEnd: {
+            type: MarkerType.Arrow,
+          },
+          style: {
+            strokeWidth: 3,
+            stroke: '#b0b9c2',
           },
-          // parentNode: [node.name.split(".").slice(-2, -1)],
-          // extent: 'parent',
         };
       });
-      console.log(djNodes);
-      setNodes(nodes);
-      setEdges(edges);
-      setElementsLayout(nodes, edges);
-    };
-
-    dagFetch();
-  }, [dagreGraph, djNode.djNode, setEdges, setNodes]);
-
-  const onConnect = useCallback(
-    params => setEdges(eds => addEdge(params, eds)),
-    [setEdges],
-  );
+  };
 
-  return (
-    <div style={{ height: '600px' }}>
-      <ReactFlow
-        nodes={nodes}
-        edges={edges}
-        nodeTypes={nodeTypes}
-        onNodesChange={onNodesChange}
-        onEdgesChange={onEdgesChange}
-        onConnect={onConnect}
-        snapToGrid={true}
-        fitView
-      >
-        <MiniMap style={minimapStyle} zoomable pannable />
-        <Controls />
-        <Background color="#aaa" gap={16} />
-      </ReactFlow>
-    </div>
-  );
+  const dagFetch = async (getLayoutedElements, setNodes, setEdges) => {
+    let related_nodes = djNode.djNode
+      ? await djClient.node_dag(djNode.djNode.name)
+      : [];
+    var djNodes = djNode.djNode ? [djNode.djNode] : [];
+    for (const iterable of [related_nodes]) {
+      for (const item of iterable) {
+        if (item.type !== 'cube') {
+          djNodes.push(item);
+        }
+      }
+    }
+    let edges = [];
+    djNodes.forEach(node => {
+      edges = edges.concat(parentEdges(node));
+      edges = edges.concat(dimensionEdges(node));
+    });
+    const nodes = djNodes.map(node => createNode(node));
+
+    // use dagre to determine the position of the parents (the DJ nodes)
+    // the positions of the columns are relative to each DJ node
+    getLayoutedElements(nodes, edges);
+    setNodes(nodes);
+    setEdges(edges);
+  };
+  return LayoutFlow(djNode, dagFetch);
 };
-export default NodeLineage;
+export default NodeGraphTab;

package/src/app/pages/NodePage/NodeHistory.jsx

@@ -0,0 +1,236 @@
+import { useEffect, useState } from 'react';
+import * as React from 'react';
+import DiffIcon from '../../icons/DiffIcon';
+import { labelize } from '../../../utils/form';
+import CommitIcon from '../../icons/CommitIcon';
+
+export default function NodeHistory({ node, djClient }) {
+  const [history, setHistory] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (node) {
+        const data = await djClient.history('node', node.name);
+        setHistory(data);
+      }
+    };
+    fetchData().catch(console.error);
+  }, [djClient, node]);
+
+  const eventData = event => {
+    const standard = (
+      <>
+        <a href={'#'} className={'highlight-svg'} title="Browse Details">
+          <CommitIcon /> Details
+        </a>
+      </>
+    );
+
+    if (event.activity_type === 'update' && event.entity_type === 'node') {
+      return (
+        <>
+          <a href={`/nodes/${event.node}/revisions/${event.details.version}`}>
+            <span className={`badge version`}>{event.details.version}</span>
+          </a>
+          <a
+            href={`/nodes/${event.node}/revisions/${event.details.version}`}
+            className={'highlight-svg'}
+            title="View Diff"
+          >
+            <DiffIcon /> Diff
+          </a>
+        </>
+      );
+    }
+    return '';
+  };
+
+  const eventDescription = event => {
+    if (event.activity_type === 'create' && event.entity_type === 'node') {
+      return (
+        <div className="history-left">
+          <b style={{ textTransform: 'capitalize' }}>{event.activity_type}</b>{' '}
+          {event.entity_type}{' '}
+          <b>
+            <a href={'/nodes/' + event.entity_name}>{event.entity_name}</a>
+          </b>
+        </div>
+      );
+    }
+    if (
+      ['create', 'update', 'delete'].includes(event.activity_type) &&
+      event.entity_type === 'link'
+    ) {
+      return (
+        <div className="history-left">
+          <b style={{ textTransform: 'capitalize' }}>{event.activity_type}</b>{' '}
+          {event.entity_type} from{' '}
+          <b>
+            <a href={'/nodes/' + event.entity_name}>{event.entity_name}</a>
+          </b>{' '}
+          to{' '}
+          <b>
+            <a href={'/nodes/' + event.details.dimension}>
+              {event.details.dimension}
+            </a>
+          </b>
+        </div>
+      );
+    }
+    if (event.activity_type === 'refresh') {
+      return (
+        <div className="history-left">
+          <b style={{ textTransform: 'capitalize' }}>{event.activity_type}</b>{' '}
+          {event.entity_type}{' '}
+          <b>
+            <a href={'/nodes/' + event.entity_name}>{event.entity_name}</a>
+          </b>
+        </div>
+      );
+    }
+    if (event.activity_type === 'update' && event.entity_type === 'node') {
+      if (event.details?.old_owners) {
+        return (
+          <div className="history-left">
+            <b style={{ textTransform: 'capitalize' }}>Ownership Change</b> for{' '}
+            {event.entity_type}{' '}
+            <b>
+              <a href={'/nodes/' + event.entity_name}>{event.entity_name}</a>
+            </b>
+            <small>
+              {' '}
+              to{' '}
+              {event.details?.new_owners.map(owner => (
+                <span className="badge version" style={{ margin: '2px' }}>
+                  {owner}
+                </span>
+              ))}
+            </small>
+          </div>
+        );
+      }
+      return (
+        <div className="history-left">
+          <b style={{ textTransform: 'capitalize' }}>{event.activity_type}</b>{' '}
+          {event.entity_type}{' '}
+          <b>
+            <a href={'/nodes/' + event.entity_name}>{event.entity_name}</a>
+          </b>
+        </div>
+      );
+    }
+    if (event.activity_type === 'tag' && event.entity_type === 'node') {
+      return (
+        <div className="history-left">
+          Add tag{event.details.tags.length > 1 ? 's' : ''}{' '}
+          {event.details.tags.map(tag => (
+            <span className={'badge version'}>
+              <a href={`/tags/${tag}`}>{tag}</a>
+            </span>
+          ))}
+        </div>
+      );
+    }
+    if (event.activity_type === 'create' && event.entity_type === 'partition') {
+      return (
+        <div className="history-left">
+          Set <b>{event.details.partition.type_} partition</b> on{' '}
+          <a href={'/nodes/' + event.node}>{event.details.column}</a>
+        </div>
+      );
+    }
+
+    if (
+      event.activity_type === 'set_attribute' &&
+      event.entity_type === 'column_attribute'
+    ) {
+      return (
+        <div className="history-left">
+          <b>Set column attributes</b> on{' '}
+          <b>
+            <a href={'/nodes/' + event.node}>{event.node}</a>
+          </b>
+        </div>
+      );
+    }
+
+    if (event.entity_type === 'materialization') {
+      return (
+        <div className="history-left">
+          <span style={{ textTransform: 'capitalize' }}>
+            {event.activity_type}
+          </span>{' '}
+          <b>{event.entity_type}</b>{' '}
+          <a href={`/nodes/${event.node}/materializations`}>
+            {event.entity_name}
+          </a>
+        </div>
+      );
+    }
+
+    if (
+      event.activity_type === 'status_change' &&
+      event.entity_type === 'node'
+    ) {
+      return (
+        <div className="history-left">
+          <b style={{ textTransform: 'capitalize' }}>
+            {labelize(event.activity_type)}
+          </b>{' '}
+          on <a href={`/nodes/${event.node}`}>{event.node}</a> from{' '}
+          <b>{event.pre.status}</b> to <b>{event.post.status}</b>
+        </div>
+      );
+    }
+
+    if (
+      event.activity_type === 'create' &&
+      event.entity_type === 'availability'
+    ) {
+      return (
+        <div className="history-left">
+          <b>Materialized</b> table{' '}
+          <code>
+            {event.post.catalog}.{event.post.schema_}.{event.post.table}
+          </code>{' '}
+          with partitions between {event.post.min_temporal_partition} and{' '}
+          {event.post.max_temporal_partition} available for{' '}
+          <a href={'/nodes/' + event.node}>{event.node}</a>.
+        </div>
+      );
+    }
+
+    if (event.activity_type === 'create' && event.entity_type === 'backfill') {
+      return (
+        <div className="history-left">
+          <b>Backfill</b> created for materialization{' '}
+          {event.details.materialization} for partition{' '}
+          {event.details.partition[0].column_name} from{' '}
+          {event.details.partition[0].range[0]} to{' '}
+          {event.details.partition[0].range[1]}
+        </div>
+      );
+    }
+  };
+
+  const removeTagNodeEventsWithoutTags = event =>
+    event.activity_type !== 'tag' ||
+    (event.activity_type === 'tag' &&
+      event.entity_type === 'node' &&
+      event.details.tags.length > 0);
+
+  return (
+    <ul className="history-border" role="list" aria-label="Activity">
+      {history.filter(removeTagNodeEventsWithoutTags).map(event => (
+        <li key={`history-row-${event.id}`} className="history">
+          {eventDescription(event)}
+          <div className={'history-small'}>
+            done by <a href="#">{event.user ? event.user : 'unknown'}</a> on{' '}
+            {new Date(Date.parse(event.created_at)).toLocaleString()}
+          </div>
+          <div className="history-right">{eventData(event)}</div>
+        </li>
+      ))}
+    </ul>
+  );
+}