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

package/.github/workflows/ci.yml

@@ -2,9 +2,9 @@ name: CI/CD
 
 on:
   push:
-    branches: [master]
+    branches: [main]
   pull_request:
-    branches: [master]
+    branches: [main]
 
 jobs:
   build:
@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Set up Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3.6.
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
 

package/.prettierignore

@@ -1,4 +1,6 @@
 build/
 node_modules/
 package-lock.json
-yarn.lock
+yarn.lock
+dist/
+coverage/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1-rc.1",
+  "version": "0.0.1-rc.10",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {
@@ -38,14 +38,13 @@
     "@types/testing-library__jest-dom": "^5.14.5",
     "@types/webpack": "^5.28.0",
     "@types/webpack-env": "^1.18.0",
+    "babel-loader": "9.1.2",
     "chalk": "4.1.2",
     "cross-env": "7.0.3",
+    "css-loader": "6.7.3",
     "dagre": "^0.8.5",
-    "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "fbemitter": "3.0.0",
-    "flux": "4.0.4",
+    "datajunction": "0.0.1-rc.0",
+    "file-loader": "6.2.0",
     "fontfaceobserver": "2.3.0",
     "husky": "8.0.1",
     "i18next": "21.9.2",
@@ -76,6 +75,7 @@
     "serve": "14.0.1",
     "shelljs": "0.8.5",
     "sql-formatter": "^12.2.0",
+    "style-loader": "3.3.2",
     "stylelint": "14.12.0",
     "stylelint-config-recommended": "9.0.0",
     "ts-loader": "9.4.2",
@@ -83,7 +83,8 @@
     "typescript": "4.6.4",
     "web-vitals": "2.1.4",
     "webpack": "5.81.0",
-    "webpack-cli": "5.0.2"
+    "webpack-cli": "5.0.2",
+    "webpack-dev-server": "4.13.3"
   },
   "scripts": {
     "webpack-start": "webpack-dev-server --open",
@@ -102,7 +103,8 @@
     "generate": "plop --plopfile internals/generators/plopfile.ts",
     "cleanAndSetup": "ts-node ./internals/scripts/clean.ts",
     "prettify": "prettier --write",
-    "extract-messages": "i18next-scanner --config=internals/extractMessages/i18next-scanner.config.js"
+    "extract-messages": "i18next-scanner --config=internals/extractMessages/i18next-scanner.config.js",
+    "prepublishOnly": "webpack --mode=production"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -150,6 +152,9 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "7.18.6",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-react-hooks": "4.6.0",
     "html-webpack-plugin": "5.5.1",
     "jest": "^29.5.0",
     "mini-css-extract-plugin": "2.7.5"

package/src/app/__tests__/__snapshots__/index.test.tsx.snap

@@ -14,30 +14,70 @@ exports[`<App /> should render and match the snapshot 1`] = `
       name="description"
     />
   </Helmet>
-  <Routes>
-    <Route
-      element={<Unknown />}
-      path="/"
-    >
-      <React.Fragment>
-        <Route
-          element={<Unknown />}
-          path="nodes/:name"
-        />
-        <Route
-          element={<ListNamespacesPage />}
-          path="namespaces"
-        />
-        <Route
-          element={<Unknown />}
-          path="namespaces/:namespace"
-        />
-      </React.Fragment>
-    </Route>
-    <Route
-      element={<Unknown />}
-      path="*"
-    />
-  </Routes>
+  <Context.Provider
+    value={
+      Object {
+        "DataJunctionAPI": Object {
+          "dag": [Function],
+          "downstreams": [Function],
+          "lineage": [Function],
+          "metric": [Function],
+          "namespace": [Function],
+          "namespaces": [Function],
+          "node": [Function],
+          "upstreams": [Function],
+        },
+      }
+    }
+  >
+    <Routes>
+      <Route
+        element={<Unknown />}
+        path="/"
+      >
+        <React.Fragment>
+          <Route
+            path="nodes"
+          >
+            <Route
+              element={<NodePage />}
+              path=":name"
+            />
+          </Route>
+          <Route
+            element={
+              <ListNamespacesPage
+                djClient={
+                  Object {
+                    "dag": [Function],
+                    "downstreams": [Function],
+                    "lineage": [Function],
+                    "metric": [Function],
+                    "namespace": [Function],
+                    "namespaces": [Function],
+                    "node": [Function],
+                    "upstreams": [Function],
+                  }
+                }
+              />
+            }
+            path="/"
+          />
+          <Route
+            path="namespaces"
+          >
+            <Route
+              element={<NamespacePage />}
+              path=":namespace"
+            />
+          </Route>
+        </React.Fragment>
+      </Route>
+      <Route
+        element={<Unknown />}
+        path="*"
+      />
+    </Routes>
+  </Context.Provider>
 </BrowserRouter>
 `;

package/src/app/components/DashboardItem.jsx

@@ -0,0 +1,29 @@
+import { Component } from 'react';
+
+export default class DashboardItem extends Component {
+  render() {
+    const { label, value } = this.props;
+    return (
+      // <div className="col-xl col-md-6 col-12">
+      //   <div className="card">
+      //     <div className="card-body">
+      //       <div className="align-items-center row">
+      //         <div className="col"><h6 className="text-uppercase text-muted mb-2">{ label }</h6><span
+      //           className="h2 mb-0">{ value }</span><span className="mt-n1 ms-2 badge bg-success-soft">+3.5%</span></div>
+      //         <div className="col-auto">
+      //           <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+      //                stroke-linecap="round" stroke-linejoin="round" className="feather feather-dollar-sign text-muted">
+      //             <g>
+      //               <line x1="12" y1="1" x2="12" y2="23"></line>
+      //               <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
+      //             </g>
+      //           </svg>
+      //         </div>
+      //       </div>
+      //     </div>
+      //   </div>
+      // </div>
+      <div></div>
+    );
+  }
+}

package/src/app/components/Tab.jsx

@@ -7,15 +7,8 @@ export default class Tab extends Component {
       <div className={selectedTab === id ? 'col active' : 'col'}>
         <div className="header-tabs nav-overflow nav nav-tabs">
           <div className="nav-item">
-            <button
-              id={id}
-              role="button"
-              className="nav-link"
-              tabIndex="0"
-              onClick={onClick}
-            >
+            <button id={id} className="nav-link" tabIndex="0" onClick={onClick}>
               {this.props.name}
-              {/*<span className="rounded-pill badge bg-secondary-soft">823</span>*/}
             </button>
           </div>
         </div>

package/src/app/components/djgraph/DJNode.jsx

@@ -61,12 +61,12 @@ export function DJNode({ id, data }) {
         <td style={{ textAlign: 'right' }}>{col.type}</td>
       </tr>
     ));
-  const dimensionsRenderer = data =>
-    data.dimensions.map(dim => (
-      <tr>
-        <td>{dim}</td>
-      </tr>
-    ));
+  // const dimensionsRenderer = data =>
+  //   data.dimensions.map(dim => (
+  //     <tr>
+  //       <td>{dim}</td>
+  //     </tr>
+  //   ));
 
   return (
     <>

package/src/app/index.tsx

@@ -12,6 +12,8 @@ import { NodePage } from './pages/NodePage/Loadable';
 import { NotFoundPage } from './pages/NotFoundPage/Loadable';
 import { Root } from './pages/Root/Loadable';
 import { ListNamespacesPage } from './pages/ListNamespacesPage';
+import DJClientContext from './providers/djclient';
+import { DataJunctionAPI } from './services/DJService';
 
 export function App() {
   return (
@@ -25,21 +27,31 @@ export function App() {
           content="DataJunction serves as a semantic layer to help manage metrics"
         />
       </Helmet>
+      <DJClientContext.Provider value={{ DataJunctionAPI }}>
+        <Routes>
+          <Route
+            path="/"
+            element={<Root />}
+            children={
+              <>
+                <Route path="nodes" key="nodes">
+                  <Route path=":name" element={<NodePage />} />
+                </Route>
 
-      <Routes>
-        <Route
-          path="/"
-          element={<Root />}
-          children={
-            <>
-              <Route path="nodes/:name" element={<NodePage />} />
-              <Route path="namespaces" element={<ListNamespacesPage />} />
-              <Route path="namespaces/:namespace" element={<NamespacePage />} />
-            </>
-          }
-        />
-        <Route path="*" element={<NotFoundPage />} />
-      </Routes>
+                <Route path="/" element={<ListNamespacesPage />} key="index" />
+                <Route path="namespaces">
+                  <Route
+                    path=":namespace"
+                    element={<NamespacePage />}
+                    key="namespaces"
+                  />
+                </Route>
+              </>
+            }
+          />
+          <Route path="*" element={<NotFoundPage />} />
+        </Routes>
+      </DJClientContext.Provider>
     </BrowserRouter>
   );
 }

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

@@ -1,29 +1,33 @@
 import * as React from 'react';
-import { useEffect, useState } from 'react';
-import { DataJunctionAPI } from '../../services/DJService';
+import { useContext, useEffect, useState } from 'react';
 import NamespaceHeader from '../../components/NamespaceHeader';
+import { DataJunctionAPI } from '../../services/DJService';
+import DJClientContext from '../../providers/djclient';
+// const datajunction = require('datajunction');
+// const dj = new datajunction.DJClient('http://localhost:8000');
 
 export function ListNamespacesPage() {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
   const [state, setState] = useState({
     namespaces: [],
   });
 
   useEffect(() => {
     const fetchData = async () => {
-      const namespaces = await DataJunctionAPI.namespaces();
+      const namespaces = await djClient.namespaces();
       setState({
         namespaces: namespaces,
       });
     };
     fetchData().catch(console.error);
-  }, []);
+  }, [djClient, djClient.namespaces]);
 
   const namespacesList = state.namespaces.map(node => (
     <tr>
       <td>
         <a href={'/namespaces/' + node.namespace}>{node.namespace}</a>
       </td>
-      <td>5</td>
+      <td></td>
     </tr>
   ));
 
@@ -50,3 +54,7 @@ export function ListNamespacesPage() {
     </>
   );
 }
+
+ListNamespacesPage.defaultProps = {
+  djClient: DataJunctionAPI,
+};

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

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

package/src/app/pages/NamespacePage/__tests__/__snapshots__/index.test.tsx.snap

@@ -21,22 +21,25 @@ exports[`<NamespacePage /> should render and match the snapshot 1`] = `
           className="card-table table"
         >
           <thead>
-            <th>
-              Namespace
-            </th>
-            <th>
-              Name
-            </th>
-            <th>
-              Type
-            </th>
-            <th>
-              Status
-            </th>
-            <th>
-              Mode
-            </th>
+            <tr>
+              <th>
+                Namespace
+              </th>
+              <th>
+                Name
+              </th>
+              <th>
+                Type
+              </th>
+              <th>
+                Status
+              </th>
+              <th>
+                Mode
+              </th>
+            </tr>
           </thead>
+          <tbody />
         </table>
       </div>
     </div>

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

@@ -1,20 +1,12 @@
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
-import { useEffect, useState } from 'react';
-import { DataJunctionAPI } from '../../services/DJService';
+import { useContext, useEffect, useState } from 'react';
 import NamespaceHeader from '../../components/NamespaceHeader';
 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';
 
 export function NamespacePage() {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
   const { namespace } = useParams();
 
   const [state, setState] = useState({
@@ -24,9 +16,9 @@ export function NamespacePage() {
 
   useEffect(() => {
     const fetchData = async () => {
-      const djNodes = await DataJunctionAPI.namespace(namespace);
+      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,7 +27,7 @@ export function NamespacePage() {
       });
     };
     fetchData().catch(console.error);
-  }, [namespace]);
+  }, [djClient, namespace]);
 
   const nodesList = state.nodes.map(node => (
     <tr>
@@ -77,13 +69,15 @@ export function NamespacePage() {
           <div className="table-responsive">
             <table className="card-table table">
               <thead>
-                <th>Namespace</th>
-                <th>Name</th>
-                <th>Type</th>
-                <th>Status</th>
-                <th>Mode</th>
+                <tr>
+                  <th>Namespace</th>
+                  <th>Name</th>
+                  <th>Type</th>
+                  <th>Status</th>
+                  <th>Mode</th>
+                </tr>
               </thead>
-              {nodesList}
+              <tbody>{nodesList}</tbody>
             </table>
           </div>
         </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/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,47 +26,48 @@ 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,
+      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 dagFetch = async () => {
-      let upstreams = await DataJunctionAPI.upstreams(djNode.djNode.name);
-      let downstreams = await DataJunctionAPI.downstreams(djNode.djNode.name);
+      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) {
@@ -117,7 +119,7 @@ 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),
@@ -130,18 +132,17 @@ const NodeLineage = djNode => {
           // extent: 'parent',
         };
       });
-      console.log(djNodes);
       setNodes(nodes);
       setEdges(edges);
       setElementsLayout(nodes, edges);
     };
 
     dagFetch();
-  }, []);
+  }, [dagreGraph, djClient, djNode.djNode, setEdges, setNodes]);
 
   const onConnect = useCallback(
     params => setEdges(eds => addEdge(params, eds)),
-    [],
+    [setEdges],
   );
 
   return (