datajunction-ui 0.0.1-rc.17 → 0.0.1-rc.19

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

@@ -13,6 +13,8 @@ import NodeMaterializationTab from './NodeMaterializationTab';
 import ClientCodePopover from './ClientCodePopover';
 import NodesWithDimension from './NodesWithDimension';
 import NodeColumnLineage from './NodeLineageTab';
+import EditIcon from '../../icons/EditIcon';
+import AlertIcon from '../../icons/AlertIcon';
 
 export function NodePage() {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
@@ -109,7 +111,8 @@ export function NodePage() {
   let tabToDisplay = null;
   switch (state.selectedTab) {
     case 0:
-      tabToDisplay = node ? <NodeInfoTab node={node} /> : '';
+      tabToDisplay =
+        node && node.message === undefined ? <NodeInfoTab node={node} /> : '';
       break;
     case 1:
       tabToDisplay = <NodeColumnTab node={node} djClient={djClient} />;
@@ -136,41 +139,55 @@ export function NodePage() {
     default:
       tabToDisplay = <NodeInfoTab node={node} />;
   }
-
   // @ts-ignore
   return (
     <div className="node__header">
       <NamespaceHeader namespace={name.split('.').slice(0, -1).join('.')} />
       <div className="card">
-        <div className="card-header">
-          <h3
-            className="card-title align-items-start flex-column"
-            style={{ display: 'inline-block' }}
-          >
-            <span className="card-label fw-bold text-gray-800">
-              {node?.display_name}{' '}
-              <span className={'node_type__' + node?.type + ' badge node_type'}>
-                {node?.type}
+        {node !== undefined && node.message === undefined ? (
+          <div className="card-header">
+            <h3
+              className="card-title align-items-start flex-column"
+              style={{ display: 'inline-block' }}
+            >
+              <span className="card-label fw-bold text-gray-800">
+                {node?.display_name}{' '}
+                <span
+                  className={'node_type__' + node?.type + ' badge node_type'}
+                >
+                  {node?.type}
+                </span>
               </span>
-            </span>
-          </h3>
-          <ClientCodePopover code={node?.createNodeClientCode} />
-          <div>
-            <a href={'/nodes/' + node?.name} className="link-table">
-              {node?.name}
-            </a>
-            <span
-              className="rounded-pill badge bg-secondary-soft"
+            </h3>
+            <a
+              href={`/nodes/${node?.name}/edit`}
               style={{ marginLeft: '0.5rem' }}
             >
-              {node?.version}
-            </span>
+              <EditIcon />
+            </a>
+            <ClientCodePopover code={node?.createNodeClientCode} />
+            <div>
+              <a href={'/nodes/' + node?.name} className="link-table">
+                {node?.name}
+              </a>
+              <span
+                className="rounded-pill badge bg-secondary-soft"
+                style={{ marginLeft: '0.5rem' }}
+              >
+                {node?.version}
+              </span>
+            </div>
+            <div className="align-items-center row">
+              {tabsList(node).map(buildTabs)}
+            </div>
+            {tabToDisplay}
           </div>
-          <div className="align-items-center row">
-            {tabsList(node).map(buildTabs)}
+        ) : (
+          <div className="message alert" style={{ margin: '20px' }}>
+            <AlertIcon />
+            Node `{name}` does not exist!
           </div>
-          {tabToDisplay}
-        </div>
+        )}
       </div>
     </div>
   );

package/src/app/pages/Root/index.tsx

@@ -1,8 +1,16 @@
+import { useContext } from 'react';
 import { Outlet } from 'react-router-dom';
-import logo from './assets/dj-logo.png';
+import DJLogo from '../../icons/DJLogo';
 import { Helmet } from 'react-helmet-async';
+import DJClientContext from '../../providers/djclient';
 
 export function Root() {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  const handleLogout = async () => {
+    await djClient.logout();
+    window.location.reload();
+  };
   return (
     <>
       <Helmet>
@@ -16,8 +24,8 @@ export function Root() {
         <div className="header">
           <div className="logo">
             <h2>
-              <img src={logo} alt="DJ Logo" width="15%" />
-              DataJunction
+              <DJLogo />
+              Data<b>Junction</b>
             </h2>
           </div>
           <div className="menu">
@@ -46,6 +54,15 @@ export function Root() {
             </div>
           </div>
         </div>
+        {process.env.REACT_DISABLE_AUTH === 'true' ? (
+          ''
+        ) : (
+          <span className="menu-link">
+            <span className="menu-title">
+              <button onClick={handleLogout}>Logout</button>
+            </span>
+          </span>
+        )}
       </div>
       <Outlet />
     </>

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

@@ -6,10 +6,14 @@ import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { foundation } from 'react-syntax-highlighter/src/styles/hljs';
 import Select from 'react-select';
 import QueryInfo from '../../components/QueryInfo';
+import 'react-querybuilder/dist/query-builder.scss';
+import QueryBuilder, { formatQuery } from 'react-querybuilder';
+import 'styles/styles.scss';
 
 export function SQLBuilderPage() {
   const DEFAULT_NUM_ROWS = 100;
   const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const validator = ruleType => !!ruleType.value;
   const [stagedMetrics, setStagedMetrics] = useState([]);
   const [metrics, setMetrics] = useState([]);
   const [commonDimensionsList, setCommonDimensionsList] = useState([]);
@@ -17,6 +21,8 @@ export function SQLBuilderPage() {
   const [stagedDimensions, setStagedDimensions] = useState([]);
   const [selectedMetrics, setSelectedMetrics] = useState([]);
   const [query, setQuery] = useState('');
+  const [fields, setFields] = useState([]);
+  const [filters, setFilters] = useState({ combinator: 'and', rules: [] });
   const [queryInfo, setQueryInfo] = useState({});
   const [data, setData] = useState(null);
   const [loadingData, setLoadingData] = useState(false);
@@ -48,7 +54,11 @@ export function SQLBuilderPage() {
     setQueryInfo({});
     const fetchData = async () => {
       if (process.env.REACT_USE_SSE) {
-        const sse = await djClient.stream(selectedMetrics, selectedDimensions);
+        const sse = await djClient.stream(
+          selectedMetrics,
+          selectedDimensions,
+          formatQuery(filters, { format: 'sql', parseNumbers: true }),
+        );
         sse.onmessage = e => {
           const messageData = JSON.parse(JSON.parse(e.data));
           setQueryInfo(messageData);
@@ -99,6 +109,24 @@ export function SQLBuilderPage() {
     fetchData().catch(console.error);
   }, [djClient, djClient.metrics]);
 
+  const attributeToFormInput = dimension => {
+    const attribute = {
+      name: dimension.name,
+      label: `${dimension.name} (via ${dimension.path.join(' ▶ ')})`,
+      placeholder: `from ${dimension.path}`,
+      defaultOperator: '=',
+      validator,
+    };
+    if (dimension.type === 'bool') {
+      attribute.valueEditorType = 'checkbox';
+    }
+    if (dimension.type === 'timestamp') {
+      attribute.inputType = 'datetime-local';
+      attribute.defaultOperator = 'between';
+    }
+    return [dimension.name, attribute];
+  };
+
   // Get common dimensions
   useEffect(() => {
     const fetchData = async () => {
@@ -113,8 +141,15 @@ export function SQLBuilderPage() {
             path: d.path.join(' ▶ '),
           })),
         );
+        const uniqueFields = Object.fromEntries(
+          new Map(
+            commonDimensions.map(dimension => attributeToFormInput(dimension)),
+          ),
+        );
+        setFields(Object.keys(uniqueFields).map(f => uniqueFields[f]));
       } else {
         setCommonDimensionsList([]);
+        setFields([]);
       }
     };
     fetchData().catch(console.error);
@@ -123,15 +158,22 @@ export function SQLBuilderPage() {
   // Get SQL
   useEffect(() => {
     const fetchData = async () => {
-      if (selectedMetrics.length && selectedDimensions.length) {
-        const query = await djClient.sqls(selectedMetrics, selectedDimensions);
-        setQuery(query.sql);
+      if (
+        selectedMetrics.length > 0 &&
+        (selectedDimensions.length > 0 || filters.rules.length > 0)
+      ) {
+        const result = await djClient.sqls(
+          selectedMetrics,
+          selectedDimensions,
+          formatQuery(filters, { format: 'sql', parseNumbers: true }),
+        );
+        setQuery(result.sql);
       } else {
         resetView();
       }
     };
     fetchData().catch(console.error);
-  }, [selectedMetrics, selectedDimensions, djClient]);
+  }, [djClient, filters, selectedDimensions, selectedMetrics]);
 
   // Set number of rows to display
   useEffect(() => {
@@ -166,9 +208,7 @@ export function SQLBuilderPage() {
               name="metrics"
               options={metrics}
               isDisabled={
-                selectedMetrics.length && selectedDimensions.length
-                  ? true
-                  : false
+                !!(selectedMetrics.length && selectedDimensions.length)
               }
               noOptionsMessage={() => 'No metrics found.'}
               placeholder={`${metrics.length} Available Metrics`}
@@ -206,6 +246,12 @@ export function SQLBuilderPage() {
                 setSelectedDimensions(stagedDimensions);
               }}
             />
+            <h4>Filter By</h4>
+            <QueryBuilder
+              fields={fields}
+              query={filters}
+              onQueryChange={q => setFilters(q)}
+            />
           </div>
           <div className="card-header">
             {!viewData && !query ? (

package/src/app/services/DJService.js

@@ -5,8 +5,29 @@ const DJ_URL = process.env.REACT_APP_DJ_URL
   : 'http://localhost:8000';
 
 export const DataJunctionAPI = {
+  whoami: async function () {
+    const data = await (
+      await fetch(`${DJ_URL}/whoami/`, { credentials: 'include' })
+    ).json();
+    return data;
+  },
+
+  logout: async function () {
+    await await fetch(`${DJ_URL}/basic/logout/`, {
+      credentials: 'include',
+      method: 'POST',
+    });
+  },
+
   node: async function (name) {
-    const data = await (await fetch(DJ_URL + '/nodes/' + name + '/')).json();
+    const data = await (
+      await fetch(`${DJ_URL}/nodes/${name}/`, {
+        credentials: 'include',
+      })
+    ).json();
+    if (data.message !== undefined) {
+      return data;
+    }
     data.primary_key = data.columns
       .filter(col =>
         col.attributes.some(attr => attr.attribute_type.name === 'primary_key'),
@@ -15,60 +36,150 @@ export const DataJunctionAPI = {
     return data;
   },
 
+  nodes: async function (prefix) {
+    return await (
+      await fetch(`${DJ_URL}/nodes/?prefix=${prefix}`, {
+        credentials: 'include',
+      })
+    ).json();
+  },
+
+  createNode: async function (
+    nodeType,
+    name,
+    display_name,
+    description,
+    query,
+    mode,
+    namespace,
+    primary_key,
+  ) {
+    const response = await fetch(`${DJ_URL}/nodes/${nodeType}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        name: name,
+        display_name: display_name,
+        description: description,
+        query: query,
+        mode: mode,
+        namespace: namespace,
+        primary_key: primary_key,
+      }),
+      credentials: 'include',
+    });
+    return { status: response.status, json: await response.json() };
+  },
+
+  patchNode: async function (
+    name,
+    display_name,
+    description,
+    query,
+    mode,
+    primary_key,
+  ) {
+    try {
+      const response = await fetch(`${DJ_URL}/nodes/${name}`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          display_name: display_name,
+          description: description,
+          query: query,
+          mode: mode,
+          primary_key: primary_key,
+        }),
+        credentials: 'include',
+      });
+      return { status: response.status, json: await response.json() };
+    } catch (error) {
+      return { status: 500, json: { message: 'Update failed' } };
+    }
+  },
+
   upstreams: async function (name) {
     const data = await (
-      await fetch(DJ_URL + '/nodes/' + name + '/upstream/')
+      await fetch(`${DJ_URL}/nodes/${name}/upstream/`, {
+        credentials: 'include',
+      })
     ).json();
     return data;
   },
 
   downstreams: async function (name) {
     const data = await (
-      await fetch(DJ_URL + '/nodes/' + name + '/downstream/')
+      await fetch(`${DJ_URL}/nodes/` + name + '/downstream/', {
+        credentials: 'include',
+      })
     ).json();
     return data;
   },
 
   node_dag: async function (name) {
     const data = await (
-      await fetch(DJ_URL + '/nodes/' + name + '/dag/')
+      await fetch(`${DJ_URL}/nodes/` + name + '/dag/', {
+        credentials: 'include',
+      })
     ).json();
     return data;
   },
 
   node_lineage: async function (name) {
     const data = await (
-      await fetch(DJ_URL + '/nodes/' + name + '/lineage/')
+      await fetch(`${DJ_URL}/nodes/` + name + '/lineage/', {
+        credentials: 'include',
+      })
     ).json();
     return data;
   },
 
   metric: async function (name) {
-    const data = await (await fetch(DJ_URL + '/metrics/' + name + '/')).json();
+    const data = await (
+      await fetch(`${DJ_URL}/metrics/` + name + '/', {
+        credentials: 'include',
+      })
+    ).json();
     return data;
   },
 
   clientCode: async function (name) {
     const data = await (
-      await fetch(DJ_URL + '/datajunction-clients/python/new_node/' + name)
+      await fetch(`${DJ_URL}/datajunction-clients/python/new_node/` + name, {
+        credentials: 'include',
+      })
     ).json();
     return data;
   },
 
   cube: async function (name) {
-    const data = await (await fetch(DJ_URL + '/cubes/' + name + '/')).json();
+    const data = await (
+      await fetch(`${DJ_URL}/cubes/` + name + '/', {
+        credentials: 'include',
+      })
+    ).json();
     return data;
   },
 
   metrics: async function (name) {
-    const data = await (await fetch(DJ_URL + '/metrics/')).json();
+    const data = await (
+      await fetch(`${DJ_URL}/metrics/`, {
+        credentials: 'include',
+      })
+    ).json();
     return data;
   },
 
   commonDimensions: async function (metrics) {
     const metricsQuery = '?' + metrics.map(m => `metric=${m}`).join('&');
     const data = await (
-      await fetch(DJ_URL + '/metrics/common/dimensions/' + metricsQuery)
+      await fetch(`${DJ_URL}/metrics/common/dimensions/` + metricsQuery, {
+        credentials: 'include',
+      })
     ).json();
     return data;
   },
@@ -76,10 +187,12 @@ export const DataJunctionAPI = {
   history: async function (type, name, offset, limit) {
     const data = await (
       await fetch(
-        DJ_URL +
-          '/history?node=' +
+        `${DJ_URL}/history?node=` +
           name +
           `&offset=${offset ? offset : 0}&limit=${limit ? limit : 100}`,
+        {
+          credentials: 'include',
+        },
       )
     ).json();
     return data;
@@ -87,27 +200,38 @@ export const DataJunctionAPI = {
 
   revisions: async function (name) {
     const data = await (
-      await fetch(DJ_URL + '/nodes/' + name + '/revisions/')
+      await fetch(`${DJ_URL}/nodes/` + name + '/revisions/', {
+        credentials: 'include',
+      })
     ).json();
     return data;
   },
 
   namespace: async function (nmspce) {
     const data = await (
-      await fetch(DJ_URL + '/namespaces/' + nmspce + '/')
+      await fetch(`${DJ_URL}/namespaces/` + nmspce + '/', {
+        credentials: 'include',
+      })
     ).json();
     return data;
   },
 
   namespaces: async function () {
-    const data = await (await fetch(DJ_URL + '/namespaces/')).json();
+    const data = await (
+      await fetch(`${DJ_URL}/namespaces/`, {
+        credentials: 'include',
+      })
+    ).json();
     return data;
   },
 
   sql: async function (metric_name, selection) {
     const data = await (
       await fetch(
-        DJ_URL + '/sql/' + metric_name + '?' + new URLSearchParams(selection),
+        `${DJ_URL}/sql/` + metric_name + '?' + new URLSearchParams(selection),
+        {
+          credentials: 'include',
+        },
       )
     ).json();
     return data;
@@ -115,22 +239,28 @@ export const DataJunctionAPI = {
 
   nodesWithDimension: async function (name) {
     const data = await (
-      await fetch(DJ_URL + '/dimensions/' + name + '/nodes/')
+      await fetch(`${DJ_URL}/dimensions/` + name + '/nodes/', {
+        credentials: 'include',
+      })
     ).json();
     return data;
   },
 
   materializations: async function (node) {
     const data = await (
-      await fetch(DJ_URL + `/nodes/${node}/materializations/`)
+      await fetch(`${DJ_URL}/nodes/${node}/materializations/`, {
+        credentials: 'include',
+      })
     ).json();
 
     return await Promise.all(
       data.map(async materialization => {
         materialization.clientCode = await (
           await fetch(
-            DJ_URL +
-              `/datajunction-clients/python/add_materialization/${node}/${materialization.name}`,
+            `${DJ_URL}/datajunction-clients/python/add_materialization/${node}/${materialization.name}`,
+            {
+              credentials: 'include',
+            },
           )
         ).json();
         return materialization;
@@ -144,8 +274,10 @@ export const DataJunctionAPI = {
         if (col.dimension) {
           col.clientCode = await (
             await fetch(
-              DJ_URL +
-                `/datajunction-clients/python/link_dimension/${node.name}/${col.name}/${col.dimension?.name}`,
+              `${DJ_URL}/datajunction-clients/python/link_dimension/${node.name}/${col.name}/${col.dimension?.name}`,
+              {
+                credentials: 'include',
+              },
             )
           ).json();
         }
@@ -154,12 +286,16 @@ export const DataJunctionAPI = {
     );
   },
 
-  sqls: async function (metricSelection, dimensionSelection) {
+  sqls: async function (metricSelection, dimensionSelection, filters) {
     const params = new URLSearchParams();
     metricSelection.map(metric => params.append('metrics', metric));
     dimensionSelection.map(dimension => params.append('dimensions', dimension));
-    const data = await (await fetch(DJ_URL + '/sql/?' + params)).json();
-    return data;
+    params.append('filters', filters);
+    return await (
+      await fetch(`${DJ_URL}/sql/?${params}`, {
+        credentials: 'include',
+      })
+    ).json();
   },
 
   data: async function (metricSelection, dimensionSelection) {
@@ -167,32 +303,44 @@ export const DataJunctionAPI = {
     metricSelection.map(metric => params.append('metrics', metric));
     dimensionSelection.map(dimension => params.append('dimensions', dimension));
     const data = await (
-      await fetch(DJ_URL + '/data/?' + params + '&limit=10000')
+      await fetch(`${DJ_URL}/data/?` + params + '&limit=10000', {
+        credentials: 'include',
+      })
     ).json();
     return data;
   },
 
-  stream: async function (metricSelection, dimensionSelection) {
+  stream: async function (metricSelection, dimensionSelection, filters) {
     const params = new URLSearchParams();
     metricSelection.map(metric => params.append('metrics', metric));
     dimensionSelection.map(dimension => params.append('dimensions', dimension));
+    params.append('filters', filters);
     return new EventSource(
-      DJ_URL + '/stream/?' + params + '&limit=10000&async_=true',
+      `${DJ_URL}/stream/?${params}&limit=10000&async_=true`,
+      {
+        withCredentials: true,
+      },
     );
   },
 
   lineage: async function (node) {},
 
   compiledSql: async function (node) {
-    const data = await (await fetch(DJ_URL + `/sql/${node}/`)).json();
+    const data = await (
+      await fetch(`${DJ_URL}/sql/${node}/`, {
+        credentials: 'include',
+      })
+    ).json();
     return data;
   },
 
   dag: async function (namespace = 'default') {
     const edges = [];
-    const data = await (await fetch(DJ_URL + '/nodes/')).json();
-
-    // const metrics = await (await fetch(DJ_URL + '/metrics/')).json();
+    const data = await (
+      await fetch(`${DJ_URL}/nodes/`, {
+        credentials: 'include',
+      })
+    ).json();
 
     data.forEach(obj => {
       obj.parents.forEach(parent => {

package/src/setupTests.ts

@@ -1,6 +1,6 @@
 // react-testing-library renders your components to document.body,
 // this adds jest-dom's custom assertions
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import 'react-app-polyfill/ie11';
 import 'react-app-polyfill/stable';