datajunction-ui 0.0.1-rc.7 → 0.0.1-rc.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1-rc.7",
+  "version": "0.0.1-rc.9",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {

package/src/app/index.tsx

@@ -12,13 +12,10 @@ 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 });
+import DJClientContext from './providers/djclient';
+import {DataJunctionAPI} from "./services/DJService";
 
 export function App() {
-  const DJClient = React.useContext(DJClientContext);
-
   return (
     <BrowserRouter>
       <Helmet
@@ -30,31 +27,31 @@ export function App() {
           content="DataJunction serves as a semantic layer to help manage metrics"
         />
       </Helmet>
-      <Routes>
-        <Route
-          path="/"
-          element={<Root />}
-          children={
-            <>
-              <Route path="nodes" key="nodes">
-                <Route path=":name" element={<NodePage djClient={ DJClient.DataJunctionAPI } />} />
-              </Route>
+      <DJClientContext.Provider value={{ DataJunctionAPI }}>
+        <Routes>
+          <Route
+            path="/"
+            element={<Root />}
+            children={
+              <>
+                <Route path="nodes" key="nodes">
+                  <Route path=":name" element={<NodePage />} />
+                </Route>
 
-              <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>
+                <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>
   );
 }
-
-export { DJClientContext };

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

@@ -1,18 +1,22 @@
 import * as React from 'react';
-import { useEffect, useState } from 'react';
+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({ djClient }) {
+export function ListNamespacesPage() {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
   const [state, setState] = useState({
     namespaces: [],
   });
 
   useEffect(() => {
     const fetchData = async () => {
-      const namespaces = await djClient.namespaces.get();
+      // const namespaces = await djClient.namespaces.get();
+      console.log(djClient);
+      const namespaces = await djClient.namespaces();
       setState({
         namespaces: namespaces,
       });

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

@@ -1,11 +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';
+import DJClientContext from '../../providers/djclient';
 
-export function NamespacePage({ djClient = DataJunctionAPI }) {
+export function NamespacePage() {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
   const { namespace } = useParams();
 
   const [state, setState] = useState({
@@ -68,13 +69,15 @@ export function NamespacePage({ djClient = DataJunctionAPI }) {
           <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/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,
@@ -13,8 +13,10 @@ import '../../../styles/dag.css';
 import 'reactflow/dist/style.css';
 import DJNode from '../../components/djgraph/DJNode';
 import dagre from 'dagre';
+import DJClientContext from '../../providers/djclient';
 
-const NodeLineage = (djNode, djClient) => {
+const NodeLineage = djNode => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
   const nodeTypes = useMemo(() => ({ DJNode: DJNode }), []);
 
   const [nodes, setNodes, onNodesChange] = useNodesState([]);

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

@@ -1,13 +1,15 @@
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import Tab from '../../components/Tab';
 import NamespaceHeader from '../../components/NamespaceHeader';
 import NodeInfoTab from './NodeInfoTab';
 import NodeColumnTab from './NodeColumnTab';
 import NodeLineage from './NodeGraphTab';
+import DJClientContext from '../../providers/djclient';
 
-export function NodePage({ djClient }) {
+export function NodePage() {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
   const [state, setState] = useState({
     selectedTab: 0,
   });

package/src/app/providers/djclient.jsx

@@ -0,0 +1,5 @@
+import { DataJunctionAPI } from '../services/DJService';
+import * as React from 'react';
+
+const DJClientContext = React.createContext({ DataJunctionAPI });
+export default DJClientContext;