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

package/.babel-plugin-macrosrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  styledComponents: {
+    displayName: process.env.NODE_ENV !== 'production',
+  },
+};

package/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": ["@babel/plugin-proposal-class-properties"]
+}

package/.prettierignore

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

package/.vscode/extensions.json

@@ -2,7 +2,6 @@
   "recommendations": [
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "styled-components.vscode-styled-components",
     "orta.vscode-jest"
   ]
 }

package/Dockerfile

@@ -2,5 +2,6 @@ FROM node:19 AS ui-build
 WORKDIR /usr/src/app
 COPY . .
 EXPOSE 3000
+RUN yarn webpack build
 
-CMD ["yarn", "start"]
+CMD ["yarn", "webpack-start", "--host", "0.0.0.0", "--port", "3000"]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1-rc.0",
+  "version": "0.0.1-rc.10",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {
@@ -20,6 +20,9 @@
   },
   "homepage": "https://github.com/DataJunction/dj#readme",
   "dependencies": {
+    "@babel/core": "^7.18.2",
+    "@babel/preset-env": "^7.18.2",
+    "@babel/preset-react": "7.18.6",
     "@reduxjs/toolkit": "1.8.5",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
@@ -32,17 +35,16 @@
     "@types/react-test-renderer": "^18.0.0",
     "@types/rimraf": "^3.0.2",
     "@types/shelljs": "^0.8.11",
-    "@types/styled-components": "^5.1.26",
     "@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",
     "datajunction": "0.0.1-rc.0",
-    "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-react-hooks": "4.6.0",
+    "file-loader": "6.2.0",
     "fontfaceobserver": "2.3.0",
     "husky": "8.0.1",
     "i18next": "21.9.2",
@@ -50,7 +52,6 @@
     "i18next-scanner": "4.0.0",
     "inquirer": "7.3.3",
     "inquirer-directory": "2.2.0",
-    "jest-styled-components": "7.1.1",
     "lint-staged": "13.0.3",
     "node-plop": "0.26.3",
     "plop": "2.7.6",
@@ -74,16 +75,20 @@
     "serve": "14.0.1",
     "shelljs": "0.8.5",
     "sql-formatter": "^12.2.0",
-    "styled-components": "5.3.5",
+    "style-loader": "3.3.2",
     "stylelint": "14.12.0",
     "stylelint-config-recommended": "9.0.0",
-    "stylelint-config-styled-components": "0.1.1",
-    "stylelint-processor-styled-components": "1.10.0",
+    "ts-loader": "9.4.2",
     "ts-node": "10.9.1",
     "typescript": "4.6.4",
-    "web-vitals": "2.1.4"
+    "web-vitals": "2.1.4",
+    "webpack": "5.81.0",
+    "webpack-cli": "5.0.2",
+    "webpack-dev-server": "4.13.3"
   },
   "scripts": {
+    "webpack-start": "webpack-dev-server --open",
+    "webpack-build": "webpack",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
@@ -98,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"
@@ -145,6 +151,12 @@
     }
   },
   "devDependencies": {
-    "jest": "^29.5.0"
+    "@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/public/index.html

@@ -1,18 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <base href="/" />
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <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="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <meta property="og:title" content="React Boilerplate Example App" />
+    <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="" />
-    <meta
-      property="og:image"
-      content="https://repository-images.githubusercontent.com/250347048/15514f00-8713-11ea-9f9d-796a89b5de4d"
-    />
     <title>DataJunction App</title>
     <meta name="description" content="" />
   </head>

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

@@ -14,32 +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={<Unknown />}
-          path="/namespaces/:namespace"
-        />
-        <Route
-          element={<ListNamespacesPage />}
-          path="/namespaces/"
-        />
-      </React.Fragment>
-    </Route>
-    <Route
-      element={<Unknown />}
-      path="*"
-    />
-  </Routes>
-  <Memo(l) />
-  <Memo(l) />
+  <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,17 +7,9 @@ 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">
-            <a
-              id={id}
-              role="button"
-              className="nav-link"
-              tabIndex="0"
-              href="#/"
-              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>*/}
-            </a>
+            </button>
           </div>
         </div>
       </div>

package/src/app/index.tsx

@@ -7,14 +7,13 @@ import * as React from 'react';
 import { Helmet } from 'react-helmet-async';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
-import { GlobalStyle } from 'styles/global-styles';
-import { DAGStyle } from '../styles/dag-styles';
-
 import { NamespacePage } from './pages/NamespacePage/Loadable';
 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 (
@@ -28,26 +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/:namespace"
-                element={<NamespacePage />}
-              />
-              <Route path="/namespaces/" element={<ListNamespacesPage />} />
-            </>
-          }
-        />
-        <Route path="*" element={<NotFoundPage />} />
-      </Routes>
-      <GlobalStyle />
-      <DAGStyle />
+                <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/Loadable.jsx

@@ -3,21 +3,12 @@
  */
 
 import * as React from 'react';
-import { lazyLoad } from 'utils/loadable';
-import styled from 'styled-components/macro';
-
-const LoadingWrapper = styled.div`
-  width: 100%;
-  height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
+import { lazyLoad } from '../../../utils/loadable';
 
 export const ListNamespacesPage = lazyLoad(
   () => import('./index'),
   module => module.ListNamespacesPage,
   {
-    fallback: <LoadingWrapper></LoadingWrapper>,
+    fallback: <div></div>,
   },
 );

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

@@ -1,30 +1,33 @@
 import * as React from 'react';
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import NamespaceHeader from '../../components/NamespaceHeader';
-const datajunction = require('datajunction');
-const dj = new datajunction.DJClient('http://localhost:8000');
+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 dj.namespaces.get();
+      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>
   ));
 
@@ -51,3 +54,7 @@ export function ListNamespacesPage() {
     </>
   );
 }
+
+ListNamespacesPage.defaultProps = {
+  djClient: DataJunctionAPI,
+};

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

@@ -3,21 +3,14 @@
  */
 
 import * as React from 'react';
-import { lazyLoad } from 'utils/loadable';
-import styled from 'styled-components/macro';
+import { lazyLoad } from '../../../utils/loadable';
 
-const LoadingWrapper = styled.div`
-  width: 100%;
-  height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-export const NamespacePage = lazyLoad(
-  () => import('./index'),
-  module => module.NamespacePage,
-  {
-    fallback: <LoadingWrapper></LoadingWrapper>,
-  },
-);
+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

@@ -3,21 +3,14 @@
  */
 
 import * as React from 'react';
-import { lazyLoad } from 'utils/loadable';
-import styled from 'styled-components/macro';
+import { lazyLoad } from '../../../utils/loadable';
 
-const LoadingWrapper = styled.div`
-  width: 100%;
-  height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-export const NodePage = lazyLoad(
-  () => import('./index'),
-  module => module.NodePage,
-  {
-    fallback: <LoadingWrapper></LoadingWrapper>,
-  },
-);
+export const NodePage = props => {
+  return lazyLoad(
+    () => import('./index'),
+    module => module.NodePage,
+    {
+      fallback: <div></div>,
+    },
+  )(props);
+};