datajunction-ui 0.0.1-rc.3 → 0.0.1-rc.5

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1-rc.3",
+  "version": "0.0.1-rc.5",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {
@@ -38,12 +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",
+    "datajunction": "0.0.1-rc.0",
+    "file-loader": "6.2.0",
     "fontfaceobserver": "2.3.0",
     "husky": "8.0.1",
     "i18next": "21.9.2",
@@ -74,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",
@@ -81,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",
@@ -149,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,100 @@ 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
+                  djClient={
+                    Object {
+                      "dag": [Function],
+                      "downstreams": [Function],
+                      "lineage": [Function],
+                      "metric": [Function],
+                      "namespace": [Function],
+                      "namespaces": [Function],
+                      "node": [Function],
+                      "upstreams": [Function],
+                    }
+                  }
+                />
+              }
+              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
+                  djClient={
+                    Object {
+                      "dag": [Function],
+                      "downstreams": [Function],
+                      "lineage": [Function],
+                      "metric": [Function],
+                      "namespace": [Function],
+                      "namespaces": [Function],
+                      "node": [Function],
+                      "upstreams": [Function],
+                    }
+                  }
+                />
+              }
+              path=":namespace"
+            />
+          </Route>
+        </React.Fragment>
+      </Route>
+      <Route
+        element={<Unknown />}
+        path="*"
+      />
+    </Routes>
+  </Context.Provider>
 </BrowserRouter>
 `;

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,8 +12,13 @@ import { NodePage } from './pages/NodePage/Loadable';
 import { NotFoundPage } from './pages/NotFoundPage/Loadable';
 import { Root } from './pages/Root/Loadable';
 import { ListNamespacesPage } from './pages/ListNamespacesPage';
+import { DataJunctionAPI } from './services/DJService';
+
+const DJClientContext = React.createContext({ DataJunctionAPI });
 
 export function App() {
+  const DJClient = React.useContext(DJClientContext);
+
   return (
     <BrowserRouter>
       <Helmet
@@ -25,30 +30,33 @@ export function App() {
           content="DataJunction serves as a semantic layer to help manage metrics"
         />
       </Helmet>
+      <DJClientContext.Provider value={{ DataJunctionAPI: DataJunctionAPI }}>
+        <Routes>
+          <Route
+            path="/"
+            element={<Root />}
+            children={
+              <>
+                <Route path="nodes" key="nodes">
+                  <Route path=":name" element={<NodePage djClient={ DJClient.DataJunctionAPI } />} />
+                </Route>
 
-      <Routes>
-        <Route
-          path="/"
-          element={<Root />}
-          children={
-            <>
-              <Route path="nodes" key="nodes">
-                <Route path=":name" element={<NodePage />} />
-              </Route>
-
-              <Route path="/" element={<ListNamespacesPage />} key="index" />
-              <Route path="namespaces">
-                <Route
-                  path=":namespace"
-                  element={<NamespacePage />}
-                  key="namespaces"
-                />
-              </Route>
-            </>
-          }
-        />
-        <Route path="*" element={<NotFoundPage />} />
-      </Routes>
+                <Route path="/" element={<ListNamespacesPage djClient={ DJClient.DataJunctionAPI }/>} key="index" />
+                <Route path="namespaces">
+                  <Route
+                    path=":namespace"
+                    element={<NamespacePage djClient={ DJClient.DataJunctionAPI }/>}
+                    key="namespaces"
+                  />
+                </Route>
+              </>
+            }
+          />
+          <Route path="*" element={<NotFoundPage />} />
+        </Routes>
+      </DJClientContext.Provider>
     </BrowserRouter>
   );
 }
+
+export { DJClientContext };

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

@@ -1,22 +1,24 @@
 import * as React from 'react';
 import { useEffect, useState } from 'react';
-import { DataJunctionAPI } from '../../services/DJService';
 import NamespaceHeader from '../../components/NamespaceHeader';
+import { DataJunctionAPI } from '../../services/DJService';
+// const datajunction = require('datajunction');
+// const dj = new datajunction.DJClient('http://localhost:8000');
 
-export function ListNamespacesPage() {
+export function ListNamespacesPage({ djClient }) {
   const [state, setState] = useState({
     namespaces: [],
   });
 
   useEffect(() => {
     const fetchData = async () => {
-      const namespaces = await DataJunctionAPI.namespaces();
+      const namespaces = await djClient.namespaces.get();
       setState({
         namespaces: namespaces,
       });
     };
     fetchData().catch(console.error);
-  }, []);
+  }, [djClient.namespaces]);
 
   const namespacesList = state.namespaces.map(node => (
     <tr>
@@ -50,3 +52,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/index.jsx

@@ -5,16 +5,7 @@ import { DataJunctionAPI } from '../../services/DJService';
 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;
-}
-
-export function NamespacePage() {
+export function NamespacePage({ djClient = DataJunctionAPI }) {
   const { namespace } = useParams();
 
   const [state, setState] = useState({
@@ -24,9 +15,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 +26,7 @@ export function NamespacePage() {
       });
     };
     fetchData().catch(console.error);
-  }, [namespace]);
+  }, [djClient, namespace]);
 
   const nodesList = state.nodes.map(node => (
     <tr>

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

@@ -12,10 +12,9 @@ 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';
 
-const NodeLineage = djNode => {
+const NodeLineage = (djNode, djClient) => {
   const nodeTypes = useMemo(() => ({ DJNode: DJNode }), []);
 
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
@@ -25,47 +24,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 +117,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),
@@ -137,11 +137,11 @@ const NodeLineage = djNode => {
     };
 
     dagFetch();
-  }, []);
+  }, [dagreGraph, djNode.djNode, setEdges, setNodes]);
 
   const onConnect = useCallback(
     params => setEdges(eds => addEdge(params, eds)),
-    [],
+    [setEdges],
   );
 
   return (

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

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 import { useEffect, useState } from 'react';
-import { DataJunctionAPI } from '../../services/DJService';
 import Tab from '../../components/Tab';
 import NamespaceHeader from '../../components/NamespaceHeader';
 import NodeInfoTab from './NodeInfoTab';
 import NodeColumnTab from './NodeColumnTab';
 import NodeLineage from './NodeGraphTab';
+import { DataJunctionAPI } from '../../services/DJService';
 
-export function NodePage() {
+export function NodePage({ djClient = DataJunctionAPI}) {
   const [state, setState] = useState({
     selectedTab: 0,
   });
@@ -35,11 +35,11 @@ export function NodePage() {
 
   useEffect(() => {
     const fetchData = async () => {
-      const data = await DataJunctionAPI.node(name);
+      const data = await djClient.node(name);
       setNode(data);
     };
     fetchData().catch(console.error);
-  }, [name]);
+  }, [djClient, name]);
 
   const TabsJson = [
     {
@@ -66,7 +66,7 @@ export function NodePage() {
       tabToDisplay = <NodeColumnTab node={node} />;
       break;
     case 2:
-      tabToDisplay = <NodeLineage djNode={node} />;
+      tabToDisplay = <NodeLineage djNode={node} djClient={djClient} />;
       break;
     default:
       tabToDisplay = <NodeInfoTab node={node} />;

package/src/styles/index.css

@@ -379,8 +379,8 @@ tbody th {
 }
 
 .node_type__cube {
-  background-color: #c2180750 !important;
-  color: #c21807;
+  background-color: #dbafff !important;
+  color: #580076;
 }
 
 .status__valid {
@@ -498,8 +498,8 @@ pre {
   flex-grow: 0 !important;
 }
 .logo img {
-  padding: 10px;
-  margin-bottom: -1.2rem;
+  padding: 15px;
+  margin-bottom: 0.2rem;
 }
 
 .menu-lg-row > .menu-item {

package/webpack.config.js

@@ -1,3 +1,4 @@
+const webpack = require('webpack');
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 // const MiniCssExtractPlugin = require('mini-css-extract-plugin');
@@ -37,6 +38,13 @@ module.exports = {
       fs: false,
       os: false,
       module: false,
+      http: false,
+      tls: false,
+      https: false,
+      url: false,
+      browser: false,
+      net: false,
+      process: false,
     },
   },
   module: {
@@ -90,6 +98,9 @@ module.exports = {
     new HtmlWebpackPlugin({
       template: path.resolve(__dirname, 'public', 'index.html'),
     }),
+    new webpack.DefinePlugin({
+      REACT_APP_DJ_URL: 'http://localhost:8000',
+    }),
     // new MiniCssExtractPlugin({
     //   filename: './styles/index.css',
     // }),

package/dist/index.html

@@ -1 +0,0 @@
-<!doctype html><html lang="en"><head><base href="/"/><meta charset="utf-8"/><link rel="icon" href="public/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="public/manifest.json"/><link rel="manifest" href="src/styles/index.css"/><meta property="og:title" content="DataJunction UI"/><meta property="og:description" content=""/><title>DataJunction App</title><meta name="description" content=""/><script defer="defer" src="/static/main.ebaa9bc7ec95d2f8d4fb.js"></script><script defer="defer" src="/static/vendor.ebaa9bc7ec95d2f8d4fb.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet"/></body></html>