datajunction-ui 0.0.1-rc.1 → 0.0.1-rc.11

package/src/app/pages/NamespacePage/index.jsx

@@ -1,32 +1,66 @@
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
-import { useEffect, useState } from 'react';
-import { DataJunctionAPI } from '../../services/DJService';
-import NamespaceHeader from '../../components/NamespaceHeader';
+import { useContext, useEffect, useState } from 'react';
 import NodeStatus from '../NodePage/NodeStatus';
-
-export async function loader({ params }) {
-  const djNode = await DataJunctionAPI.node(params.name);
-  if (djNode.type === 'metric') {
-    const metricNode = await DataJunctionAPI.metric(params.name);
-    djNode.dimensions = metricNode.dimensions;
-  }
-  return djNode;
-}
+import DJClientContext from '../../providers/djclient';
+import Explorer from '../NamespacePage/Explorer';
 
 export function NamespacePage() {
-  const { namespace } = useParams();
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  var { namespace } = useParams();
 
   const [state, setState] = useState({
     namespace: namespace,
     nodes: [],
   });
 
+  const [namespaceHierarchy, setNamespaceHierarchy] = useState([]);
+
+  const createNamespaceHierarchy = namespaceList => {
+    const hierarchy = [];
+
+    for (const item of namespaceList) {
+      const namespaces = item.namespace.split('.');
+      let currentLevel = hierarchy;
+
+      let path = '';
+      for (const ns of namespaces) {
+        path += ns;
+
+        let existingNamespace = currentLevel.find(el => el.namespace === ns);
+        if (!existingNamespace) {
+          existingNamespace = {
+            namespace: ns,
+            children: [],
+            path: path,
+          };
+          currentLevel.push(existingNamespace);
+        }
+
+        currentLevel = existingNamespace.children;
+        path += '.';
+      }
+    }
+    return hierarchy;
+  };
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const namespaces = await djClient.namespaces();
+      const hierarchy = createNamespaceHierarchy(namespaces);
+      setNamespaceHierarchy(hierarchy);
+    };
+    fetchData().catch(console.error);
+  }, [djClient, djClient.namespaces]);
+
   useEffect(() => {
     const fetchData = async () => {
-      const djNodes = await DataJunctionAPI.namespace(namespace);
+      if (namespace === undefined && namespaceHierarchy !== undefined) {
+        namespace = namespaceHierarchy.children[0].path;
+      }
+      const djNodes = await djClient.namespace(namespace);
       const nodes = djNodes.map(node => {
-        return DataJunctionAPI.node(node);
+        return djClient.node(node);
       });
       const foundNodes = await Promise.all(nodes);
       setState({
@@ -35,13 +69,10 @@ export function NamespacePage() {
       });
     };
     fetchData().catch(console.error);
-  }, [namespace]);
+  }, [djClient, namespace, namespaceHierarchy]);
 
   const nodesList = state.nodes.map(node => (
     <tr>
-      <td>
-        <a href={'/namespaces/' + node.namespace}>{node.namespace}</a>
-      </td>
       <td>
         <a href={'/nodes/' + node.name} className="link-table">
           {node.display_name}
@@ -64,26 +95,57 @@ export function NamespacePage() {
       <td>
         <span className="status">{node.mode}</span>
       </td>
+      <td>
+        <span className="status">{node.tags}</span>
+      </td>
+      <td>
+        <span className="status">
+          {new Date(node.updated_at).toLocaleString('en-us')}
+        </span>
+      </td>
     </tr>
   ));
 
-  // @ts-ignore
   return (
     <div className="mid">
-      <NamespaceHeader namespace={namespace} />
       <div className="card">
         <div className="card-header">
-          <h2>Nodes</h2>
+          <h2>Explore</h2>
           <div className="table-responsive">
+            <div className={`sidebar`}>
+              <span
+                style={{
+                  textTransform: 'uppercase',
+                  fontSize: '0.8125rem',
+                  fontWeight: '600',
+                  color: '#95aac9',
+                  padding: '1rem 1rem 1rem 0',
+                }}
+              >
+                Namespaces
+              </span>
+              {namespaceHierarchy
+                ? namespaceHierarchy.map(child => (
+                    <Explorer
+                      item={child}
+                      current={state.namespace}
+                      defaultExpand={true}
+                    />
+                  ))
+                : null}
+            </div>
             <table className="card-table table">
               <thead>
-                <th>Namespace</th>
-                <th>Name</th>
-                <th>Type</th>
-                <th>Status</th>
-                <th>Mode</th>
+                <tr>
+                  <th>Name</th>
+                  <th>Type</th>
+                  <th>Status</th>
+                  <th>Mode</th>
+                  <th>Tags</th>
+                  <th>Last Updated</th>
+                </tr>
               </thead>
-              {nodesList}
+              <tbody>{nodesList}</tbody>
             </table>
           </div>
         </div>

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

@@ -0,0 +1,30 @@
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { useState } from 'react';
+import { nightOwl } from 'react-syntax-highlighter/src/styles/hljs';
+import PythonIcon from '../../icons/PythonIcon';
+
+export default function ClientCodePopover({ code }) {
+  const [codeAnchor, setCodeAnchor] = useState(false);
+
+  return (
+    <>
+      <button
+        className="code-button"
+        tabIndex="0"
+        height="45px"
+        onClick={() => setCodeAnchor(!codeAnchor)}
+      >
+        <PythonIcon />
+      </button>
+      <div
+        id={`node-create-code`}
+        onClose={() => setCodeAnchor(null)}
+        style={{ display: codeAnchor === false ? 'none' : 'block' }}
+      >
+        <SyntaxHighlighter language="python" style={nightOwl}>
+          {code}
+        </SyntaxHighlighter>
+      </div>
+    </>
+  );
+}

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

@@ -5,10 +5,12 @@
 import * as React from 'react';
 import { lazyLoad } from '../../../utils/loadable';
 
-export const NodePage = lazyLoad(
-  () => import('./index'),
-  module => module.NodePage,
-  {
-    fallback: <div></div>,
-  },
-);
+export const NodePage = props => {
+  return lazyLoad(
+    () => import('./index'),
+    module => module.NodePage,
+    {
+      fallback: <div></div>,
+    },
+  )(props);
+};

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

@@ -1,8 +1,17 @@
-import { Component } from 'react';
+import { Component, useEffect, useState } from 'react';
+import ClientCodePopover from './ClientCodePopover';
 
-export default class NodeColumnTab extends Component {
-  columnList = node => {
-    return node.columns.map(col => (
+export default function NodeColumnTab({ node, djClient }) {
+  const [columns, setColumns] = useState([]);
+  useEffect(() => {
+    const fetchData = async () => {
+      setColumns(await djClient.columns(node));
+    };
+    fetchData().catch(console.error);
+  }, [djClient, node]);
+
+  const columnList = columns => {
+    return columns.map(col => (
       <tr>
         <td className="text-start">{col.name}</td>
         <td>
@@ -10,7 +19,16 @@ export default class NodeColumnTab extends Component {
             {col.type}
           </span>
         </td>
-        <td>{col.dimension ? col.dimension.name : ''}</td>
+        <td>
+          {col.dimension ? (
+            <>
+              <a href={`/nodes/${col.dimension.name}`}>{col.dimension.name}</a>
+              <ClientCodePopover code={col.clientCode} />
+            </>
+          ) : (
+            ''
+          )}{' '}
+        </td>
         <td>
           {col.attributes.find(
             attr => attr.attribute_type.name === 'dimension',
@@ -26,19 +44,17 @@ export default class NodeColumnTab extends Component {
     ));
   };
 
-  render() {
-    return (
-      <div className="table-responsive">
-        <table className="card-inner-table table">
-          <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
-            <th className="text-start">Column</th>
-            <th>Type</th>
-            <th>Dimension</th>
-            <th>Attributes</th>
-          </thead>
-          {this.columnList(this.props.node)}
-        </table>
-      </div>
-    );
-  }
+  return (
+    <div className="table-responsive">
+      <table className="card-inner-table table">
+        <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
+          <th className="text-start">Column</th>
+          <th>Type</th>
+          <th>Dimension</th>
+          <th>Attributes</th>
+        </thead>
+        {columnList(columns)}
+      </table>
+    </div>
+  );
 }

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo } from 'react';
 import ReactFlow, {
   addEdge,
   MiniMap,
@@ -12,10 +12,11 @@ import ReactFlow, {
 import '../../../styles/dag.css';
 import 'reactflow/dist/style.css';
 import DJNode from '../../components/djgraph/DJNode';
-import { DataJunctionAPI } from '../../services/DJService';
 import dagre from 'dagre';
+import DJClientContext from '../../providers/djclient';
 
 const NodeLineage = djNode => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
   const nodeTypes = useMemo(() => ({ DJNode: DJNode }), []);
 
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
@@ -25,51 +26,60 @@ const NodeLineage = djNode => {
     height: 100,
     width: 150,
   };
-  const dagreGraph = new dagre.graphlib.Graph();
-  dagreGraph.setDefaultEdgeLabel(() => ({}));
 
-  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,
-      };
-      return node;
-    });
-
-    return { nodes, edges };
-  };
+  const dagreGraph = useMemo(() => new dagre.graphlib.Graph(), []);
+  dagreGraph.setDefaultEdgeLabel(() => ({}));
 
   useEffect(() => {
+    const setElementsLayout = (
+      nodes,
+      edges,
+      direction = 'LR',
+      nodeWidth = 800,
+    ) => {
+      const isHorizontal = direction === 'TB';
+      dagreGraph.setGraph({ rankdir: direction });
+      const nodeHeightTracker = {};
+
+      nodes.forEach(node => {
+        nodeHeightTracker[node.id] =
+          Math.min(node.data.column_names.length, 10) * 37 + 250;
+        dagreGraph.setNode(node.id, {
+          width: nodeWidth,
+          height: nodeHeightTracker[node.id],
+        });
+      });
+
+      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 - nodeHeightTracker[node.id] / 2,
+        };
+        node.width = nodeWidth;
+        node.height = nodeHeightTracker[node.id];
+        return node;
+      });
+      return { nodes, edges };
+    };
+
     const dagFetch = async () => {
-      let upstreams = await DataJunctionAPI.upstreams(djNode.djNode.name);
-      let downstreams = await DataJunctionAPI.downstreams(djNode.djNode.name);
+      let related_nodes = await djClient.node_dag(djNode.djNode.name);
+      // djNode.djNode.is_current = true;
       var djNodes = [djNode.djNode];
-      for (const iterable of [upstreams, downstreams]) {
+      for (const iterable of [related_nodes]) {
         for (const item of iterable) {
-          djNodes.push(item);
+          if (item.type !== 'cube') {
+            djNodes.push(item);
+          }
         }
       }
       let edges = [];
@@ -78,24 +88,43 @@ const NodeLineage = djNode => {
           if (parent.name) {
             edges.push({
               id: obj.name + '-' + parent.name,
-              target: obj.name,
               source: parent.name,
+              sourceHandle: parent.name,
+              target: obj.name,
+              targetHandle: obj.name,
               animated: true,
               markerEnd: {
                 type: MarkerType.Arrow,
               },
+              style: {
+                strokeWidth: 3,
+                stroke: '#b0b9c2',
+              },
             });
           }
         });
 
         obj.columns.forEach(col => {
           if (col.dimension) {
-            edges.push({
-              id: obj.name + '-' + col.dimension.name,
-              target: obj.name,
+            const edge = {
+              id: col.dimension.name + '->' + obj.name + '.' + col.name,
               source: col.dimension.name,
+              sourceHandle: col.dimension.name,
+              target: obj.name,
+              targetHandle: obj.name + '.' + col.name,
               draggable: true,
-            });
+              markerStart: {
+                type: MarkerType.Arrow,
+                width: 20,
+                height: 20,
+                color: '#b0b9c2',
+              },
+              style: {
+                strokeWidth: 3,
+                stroke: '#b0b9c2',
+              },
+            };
+            edges.push(edge);
           }
         });
       });
@@ -117,35 +146,35 @@ const NodeLineage = djNode => {
             label:
               node.table !== null
                 ? String(node.schema_ + '.' + node.table)
-                : String(node.name),
+                : '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,
+            is_current: node.name === djNode.djNode.name,
           },
-          // parentNode: [node.name.split(".").slice(-2, -1)],
-          // extent: 'parent',
         };
       });
-      console.log(djNodes);
       setNodes(nodes);
       setEdges(edges);
+
+      // use dagre to determine the position of the parents (the DJ nodes)
+      // the positions of the columns are relative to each DJ node
       setElementsLayout(nodes, edges);
     };
 
     dagFetch();
-  }, []);
+  }, [dagreGraph, djClient, djNode.djNode, setEdges, setNodes]);
 
   const onConnect = useCallback(
     params => setEdges(eds => addEdge(params, eds)),
-    [],
+    [setEdges],
   );
 
   return (
-    <div style={{ height: '600px' }}>
+    <div style={{ height: '800px' }}>
       <ReactFlow
         nodes={nodes}
         edges={edges}

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

@@ -0,0 +1,71 @@
+import { useEffect, useState } from 'react';
+
+export default function NodeHistory({ node, djClient }) {
+  const [history, setHistory] = useState([]);
+  const [revisions, setRevisions] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const data = await djClient.history('node', node.name);
+      setHistory(data);
+      const revisions = await djClient.revisions(node.name);
+      setRevisions(revisions);
+    };
+    fetchData().catch(console.error);
+  }, [djClient, node]);
+  const tableData = history => {
+    return history.map(event => (
+      <tr>
+        <td className="text-start">
+          <span
+            className={`history_type__${event.activity_type} badge node_type`}
+          >
+            {event.activity_type}
+          </span>
+        </td>
+        <td>{event.entity_type}</td>
+        <td>{event.entity_name}</td>
+        <td>{event.user ? event.user : 'unknown'}</td>
+        <td>{event.created_at}</td>
+      </tr>
+    ));
+  };
+
+  const revisionsTable = revisions => {
+    return revisions.map(revision => (
+      <tr>
+        <td className="text-start">
+          <span className={`badge node_type__source`}>{revision.version}</span>
+        </td>
+        <td>{revision.display_name}</td>
+        <td>{revision.description}</td>
+        <td>{revision.query}</td>
+        <td>{revision.tags}</td>
+      </tr>
+    ));
+  };
+  return (
+    <div className="table-responsive">
+      <table className="card-inner-table table">
+        <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
+          <th className="text-start">Version</th>
+          <th>Display Name</th>
+          <th>Description</th>
+          <th>Query</th>
+          <th>Tags</th>
+        </thead>
+        {revisionsTable(revisions)}
+      </table>
+      <table className="card-inner-table table">
+        <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
+          <th className="text-start">Activity</th>
+          <th>Type</th>
+          <th>Name</th>
+          <th>User</th>
+          <th>Timestamp</th>
+        </thead>
+        {tableData(history)}
+      </table>
+    </div>
+  );
+}