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

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

@@ -1,18 +1,36 @@
-import { Component } from 'react';
+import { useState, useContext, useEffect } from 'react';
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { foundation } from 'react-syntax-highlighter/src/styles/hljs';
 import sql from 'react-syntax-highlighter/dist/esm/languages/hljs/sql';
 import { format } from 'sql-formatter';
-
 import NodeStatus from './NodeStatus';
 import ListGroupItem from '../../components/ListGroupItem';
+import ToggleSwitch from '../../components/ToggleSwitch';
+import DJClientContext from '../../providers/djclient';
 
 SyntaxHighlighter.registerLanguage('sql', sql);
 foundation.hljs['padding'] = '2rem';
 
-export default class NodeInfoTab extends Component {
-  nodeTags = this.props.node?.tags.map(tag => <div>{tag}</div>);
-  queryDiv = this.props.node?.query ? (
+export default function NodeInfoTab({ node }) {
+  const [compiledSQL, setCompiledSQL] = useState('');
+  const [checked, setChecked] = useState(false);
+  const nodeTags = node?.tags.map(tag => <div>{tag}</div>);
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  useEffect(() => {
+    const fetchData = async () => {
+      const data = await djClient.compiledSql(node.name);
+      if (data.sql) {
+        setCompiledSQL(data.sql);
+      } else {
+        setCompiledSQL('/* Ran into an issue while generating compiled SQL */');
+      }
+    };
+    fetchData().catch(console.error);
+  }, [node, djClient]);
+  function toggle(value) {
+    return !value;
+  }
+  const queryDiv = node?.query ? (
     <div className="list-group-item d-flex">
       <div className="d-flex gap-2 w-100 justify-content-between py-3">
         <div
@@ -21,15 +39,34 @@ export default class NodeInfoTab extends Component {
           }}
         >
           <h6 className="mb-0 w-100">Query</h6>
+          {['metric', 'dimension', 'transform'].indexOf(node?.type) > -1 ? (
+            <ToggleSwitch
+              id="toggleSwitch"
+              checked={checked}
+              onChange={() => setChecked(toggle)}
+              toggleName="Show Compiled SQL"
+            />
+          ) : (
+            <></>
+          )}
           <SyntaxHighlighter language="sql" style={foundation}>
-            {format(this.props.node?.query, {
-              language: 'spark',
-              tabWidth: 2,
-              keywordCase: 'upper',
-              denseOperators: true,
-              logicalOperatorNewline: 'before',
-              expressionWidth: 10,
-            })}
+            {checked
+              ? format(compiledSQL, {
+                  language: 'spark',
+                  tabWidth: 2,
+                  keywordCase: 'upper',
+                  denseOperators: true,
+                  logicalOperatorNewline: 'before',
+                  expressionWidth: 10,
+                })
+              : format(node?.query, {
+                  language: 'spark',
+                  tabWidth: 2,
+                  keywordCase: 'upper',
+                  denseOperators: true,
+                  logicalOperatorNewline: 'before',
+                  expressionWidth: 10,
+                })}
           </SyntaxHighlighter>
         </div>
       </div>
@@ -38,50 +75,96 @@ export default class NodeInfoTab extends Component {
     <></>
   );
 
-  render() {
-    return (
-      <div className="list-group align-items-center justify-content-between flex-md-row gap-2">
-        <ListGroupItem
-          label="Description"
-          value={this.props.node?.description}
-        />
-        <div className="list-group-item d-flex">
-          <div className="d-flex gap-2 w-100 justify-content-between py-3">
-            <div>
-              <h6 className="mb-0 w-100">Version</h6>
-
-              <p className="mb-0 opacity-75">
+  const cubeElementsDiv = node?.cube_elements ? (
+    <div className="list-group-item d-flex">
+      <div className="d-flex gap-2 w-100 justify-content-between py-3">
+        <div
+          style={{
+            width: window.innerWidth * 0.8,
+          }}
+        >
+          <h6 className="mb-0 w-100">Cube Elements</h6>
+          <div className={`list-group-item`}>
+            {node.cube_elements.map(cubeElem => (
+              <div className="button-3 cube-element">
+                <a href={`/nodes/${cubeElem.node_name}`}>
+                  {cubeElem.type === 'metric'
+                    ? cubeElem.node_name
+                    : cubeElem.name}
+                </a>
                 <span
-                  className="rounded-pill badge bg-secondary-soft"
-                  style={{ marginLeft: '0.5rem', fontSize: '100%' }}
+                  className={`badge node_type__${
+                    cubeElem.type === 'metric' ? cubeElem.type : 'dimension'
+                  }`}
                 >
-                  {this.props.node?.version}
+                  {cubeElem.type === 'metric' ? cubeElem.type : 'dimension'}
                 </span>
-              </p>
-            </div>
-            <div>
-              <h6 className="mb-0 w-100">Status</h6>
-              <p className="mb-0 opacity-75">
-                <NodeStatus node={this.props.node} />
-              </p>
-            </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  ) : (
+    <></>
+  );
+  return (
+    <div className="list-group align-items-center justify-content-between flex-md-row gap-2">
+      <ListGroupItem label="Description" value={node?.description} />
+      <div className="list-group-item d-flex">
+        <div className="d-flex gap-2 w-100 justify-content-between py-3">
+          <div>
+            <h6 className="mb-0 w-100">Version</h6>
+
+            <p className="mb-0 opacity-75">
+              <span
+                className="rounded-pill badge bg-secondary-soft"
+                style={{ marginLeft: '0.5rem', fontSize: '100%' }}
+              >
+                {node?.version}
+              </span>
+            </p>
+          </div>
+          {node.type === 'source' ? (
             <div>
-              <h6 className="mb-0 w-100">Mode</h6>
+              <h6 className="mb-0 w-100">Table</h6>
               <p className="mb-0 opacity-75">
-                <span className="status">{this.props.node?.mode}</span>
+                {node?.catalog.name}.{node?.schema_}.{node?.table}
               </p>
             </div>
-            <div>
-              <h6 className="mb-0 w-100">Tags</h6>
-              <p className="mb-0 opacity-75">{this.nodeTags}</p>
-            </div>
+          ) : (
+            <></>
+          )}
+          <div>
+            <h6 className="mb-0 w-100">Status</h6>
+            <p className="mb-0 opacity-75">
+              <NodeStatus node={node} />
+            </p>
+          </div>
+          <div>
+            <h6 className="mb-0 w-100">Mode</h6>
+            <p className="mb-0 opacity-75">
+              <span className="status">{node?.mode}</span>
+            </p>
+          </div>
+          <div>
+            <h6 className="mb-0 w-100">Tags</h6>
+            <p className="mb-0 opacity-75">{nodeTags}</p>
+          </div>
+          <div>
+            <h6 className="mb-0 w-100">Primary Key</h6>
+            <p className="mb-0 opacity-75">{node?.primary_key}</p>
+          </div>
+          <div>
+            <h6 className="mb-0 w-100">Last Updated</h6>
+            <p className="mb-0 opacity-75">
+              {new Date(node?.updated_at).toDateString()}
+            </p>
           </div>
-        </div>
-        {this.queryDiv}
-        <div className="list-group-item d-flex">
-          {this.props.node?.primary_key}
         </div>
       </div>
-    );
-  }
+      {node?.type !== 'cube' ? queryDiv : ''}
+      {cubeElementsDiv}
+    </div>
+  );
 }

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

@@ -0,0 +1,151 @@
+import { useEffect, useState } from 'react';
+import ClientCodePopover from './ClientCodePopover';
+import TableIcon from '../../icons/TableIcon';
+
+const cronstrue = require('cronstrue');
+
+export default function NodeMaterializationTab({ node, djClient }) {
+  const [materializations, setMaterializations] = useState([]);
+  useEffect(() => {
+    const fetchData = async () => {
+      const data = await djClient.materializations(node.name);
+      setMaterializations(data);
+    };
+    fetchData().catch(console.error);
+  }, [djClient, node]);
+
+  const rangePartition = partition => {
+    return (
+      <div>
+        <span className="badge partition_value">
+          <span className="badge partition_value">{partition.range[0]}</span>to
+          <span className="badge partition_value">{partition.range[1]}</span>
+        </span>
+      </div>
+    );
+  };
+
+  const cron = materialization => {
+    var parsedCron = '';
+    try {
+      parsedCron = cronstrue.toString(materialization.schedule);
+    } catch (e) {}
+    return parsedCron;
+  };
+
+  const materializationRows = materializations => {
+    return materializations.map(materialization => (
+      <tr>
+        <td className="text-start node_name">
+          <a href={materialization.urls[0]}>{materialization.name}</a>
+          <ClientCodePopover code={materialization.clientCode} />
+        </td>
+        <td>
+          <span className={`badge cron`}>{materialization.schedule}</span>
+          <div className={`cron-description`}>{cron(materialization)} </div>
+        </td>
+        <td>
+          {materialization.engine.name}
+          <br />
+          {materialization.engine.version}
+        </td>
+        <td>
+          {materialization.config.partitions ? (
+            materialization.config.partitions.map(partition =>
+              partition.type_ === 'categorical' ? (
+                <div className="partition__full">
+                  <div className="partition__header">{partition.name}</div>
+                  <div className="partition__body">
+                    {partition.values !== null && partition.values.length > 0
+                      ? partition.values.map(val => (
+                          <span className="badge partition_value">{val}</span>
+                        ))
+                      : null}
+                    {partition.range !== null && partition.range.length > 0
+                      ? rangePartition(partition)
+                      : null}
+                    {(partition.range === null && partition.values === null) ||
+                    (partition.range.length === 0 &&
+                      partition.values.length === 0) ? (
+                      <span className={`badge partition_value_highlight`}>
+                        ALL
+                      </span>
+                    ) : null}
+                  </div>
+                </div>
+              ) : null,
+            )
+          ) : (
+            <br />
+          )}
+        </td>
+        <td>
+          {materialization.output_tables.map(table => (
+            <div className={`table__full`}>
+              <div className="table__header">
+                <TableIcon />{' '}
+                <span className={`entity-info`}>
+                  {table.split('.')[0] + '.' + table.split('.')[1]}
+                </span>
+              </div>
+              <div className={`table__body upstream_tables`}>
+                {table.split('.')[2]}
+              </div>
+            </div>
+          ))}
+        </td>
+        {/*<td>{Object.keys(materialization.config.spark).map(key => <li className={`list-group-item`}>{key}: {materialization.config.spark[key]}</li>)}</td>*/}
+
+        <td>
+          {materialization.config.partitions ? (
+            materialization.config.partitions.map(partition =>
+              partition.type_ === 'temporal' ? (
+                <div className="partition__full">
+                  <div className="partition__header">{partition.name}</div>
+                  <div className="partition__body">
+                    {partition.values !== null && partition.values.length > 0
+                      ? partition.values.map(val => (
+                          <span className="badge partition_value">{val}</span>
+                        ))
+                      : null}
+                    {partition.range !== null && partition.range.length > 0
+                      ? rangePartition(partition)
+                      : null}
+                  </div>
+                </div>
+              ) : null,
+            )
+          ) : (
+            <br />
+          )}
+        </td>
+        <td>
+          {materialization.urls.map((url, idx) => (
+            <a href={url}>[{idx + 1}]</a>
+          ))}
+        </td>
+      </tr>
+    ));
+  };
+  return (
+    <div className="table-responsive">
+      <table className="card-inner-table table">
+        <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
+          <th className="text-start">Name</th>
+          <th>Schedule</th>
+          <th>Engine</th>
+          <th>Partitions</th>
+          <th>Output Tables</th>
+          <th>Backfills</th>
+          <th>URLs</th>
+        </thead>
+        {materializationRows(
+          materializations.filter(
+            materialization =>
+              !(materialization.name === 'default' && node.type === 'cube'),
+          ),
+        )}
+      </table>
+    </div>
+  );
+}

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

@@ -0,0 +1,100 @@
+import { useContext, useEffect, useState } from 'react';
+import Select from 'react-select';
+import DJClientContext from '../../providers/djclient';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { foundation } from 'react-syntax-highlighter/src/styles/hljs';
+import { format } from 'sql-formatter';
+
+const NodeSQLTab = djNode => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [query, setQuery] = useState('');
+
+  const [selection, setSelection] = useState({
+    dimensions: [],
+    filters: [],
+  });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const query = await djClient.sql(djNode.djNode.name, selection);
+      setQuery(query.sql);
+    };
+    fetchData().catch(console.error);
+  }, [djClient, djNode.djNode.name, selection]);
+  const dimensionsList = djNode.djNode.dimensions
+    ? djNode.djNode.dimensions.map(dim => ({
+        value: dim.name,
+        label: dim.name + ` (${dim.type})`,
+      }))
+    : [''];
+
+  // const options = [
+  //   { value: '>=', label: '>=' },
+  //   { value: '<=', label: '<=' },
+  //   { value: '>', label: '>' },
+  //   { value: '<', label: '<' },
+  //   { value: '=', label: '=' },
+  //   { value: '!=', label: '!=' },
+  //   { value: 'IN', label: 'IN' },
+  // ];
+
+  const handleSubmit = event => {
+    event.preventDefault();
+  };
+
+  const handleChange = event => {
+    setSelection({ filters: [], dimensions: event.map(dim => dim.value) });
+  };
+
+  return (
+    <form
+      id="retrieve-sql"
+      name="retrieve-sql"
+      onSubmit={handleSubmit.bind(this)}
+    >
+      <div>
+        <h4>Group By</h4>
+        <Select
+          name="dimensions"
+          options={dimensionsList}
+          isMulti
+          isClearable
+          onChange={handleChange}
+        />
+        {/*<h4>Filters</h4>*/}
+        {/*<Select*/}
+        {/*  name="filter_name"*/}
+        {/*  options={dimensionsList}*/}
+        {/*  className="filters_attribute"*/}
+        {/*/>*/}
+        {/*<Select*/}
+        {/*  name="filter_operator"*/}
+        {/*  options={options}*/}
+        {/*  className="filters_attribute"*/}
+        {/*/>*/}
+        {/*<textarea name="filter_value" className="filters_attribute" />*/}
+
+        <div
+          style={{
+            width: window.innerWidth * 0.8,
+            marginTop: '2rem',
+          }}
+        >
+          <h6 className="mb-0 w-100">Query</h6>
+          <SyntaxHighlighter language="sql" style={foundation}>
+            {format(query, {
+              language: 'spark',
+              tabWidth: 2,
+              keywordCase: 'upper',
+              denseOperators: true,
+              logicalOperatorNewline: 'before',
+              expressionWidth: 10,
+            })}
+          </SyntaxHighlighter>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+export default NodeSQLTab;

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

@@ -1,34 +1,28 @@
 import { Component } from 'react';
+import ValidIcon from '../../icons/ValidIcon';
+import InvalidIcon from '../../icons/InvalidIcon';
 
 export default class NodeStatus extends Component {
   render() {
     const { node } = this.props;
     return (
-      <span className="status__valid status" style={{ alignContent: 'center' }}>
+      <>
         {node?.status === 'valid' ? (
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="25"
-            height="25"
-            fill="currentColor"
-            className="bi bi-check-circle-fill"
-            viewBox="0 0 16 16"
+          <span
+            className="status__valid status"
+            style={{ alignContent: 'center' }}
           >
-            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
-          </svg>
+            <ValidIcon />
+          </span>
         ) : (
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            fill="currentColor"
-            className="bi bi-x-circle-fill"
-            viewBox="0 0 16 16"
+          <span
+            className="status__invalid status"
+            style={{ alignContent: 'center' }}
           >
-            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z" />
-          </svg>
+            <InvalidIcon />
+          </span>
         )}
-      </span>
+      </>
     );
   }
 }

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

@@ -1,14 +1,19 @@
 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 Tab from '../../components/Tab';
 import NamespaceHeader from '../../components/NamespaceHeader';
 import NodeInfoTab from './NodeInfoTab';
 import NodeColumnTab from './NodeColumnTab';
 import NodeLineage from './NodeGraphTab';
+import NodeHistory from './NodeHistory';
+import DJClientContext from '../../providers/djclient';
+import NodeSQLTab from './NodeSQLTab';
+import NodeMaterializationTab from './NodeMaterializationTab';
+import ClientCodePopover from './ClientCodePopover';
 
 export function NodePage() {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
   const [state, setState] = useState({
     selectedTab: 0,
   });
@@ -35,11 +40,22 @@ export function NodePage() {
 
   useEffect(() => {
     const fetchData = async () => {
-      const data = await DataJunctionAPI.node(name);
+      const data = await djClient.node(name);
+      data.createNodeClientCode = await djClient.clientCode(name);
       setNode(data);
+      if (data.type === 'metric') {
+        const metric = await djClient.metric(name);
+        data.dimensions = metric.dimensions;
+        setNode(data);
+      }
+      if (data.type === 'cube') {
+        const cube = await djClient.cube(name);
+        data.cube_elements = cube.cube_elements;
+        setNode(data);
+      }
     };
     fetchData().catch(console.error);
-  }, [name]);
+  }, [djClient, name]);
 
   const TabsJson = [
     {
@@ -54,6 +70,18 @@ export function NodePage() {
       id: 2,
       name: 'Graph',
     },
+    {
+      id: 3,
+      name: 'History',
+    },
+    {
+      id: 4,
+      name: 'SQL',
+    },
+    {
+      id: 5,
+      name: 'Materializations',
+    },
   ];
   //
   //
@@ -63,10 +91,20 @@ export function NodePage() {
       tabToDisplay = node ? <NodeInfoTab node={node} /> : '';
       break;
     case 1:
-      tabToDisplay = <NodeColumnTab node={node} />;
+      tabToDisplay = <NodeColumnTab node={node} djClient={djClient} />;
       break;
     case 2:
-      tabToDisplay = <NodeLineage djNode={node} />;
+      tabToDisplay = <NodeLineage djNode={node} djClient={djClient} />;
+      break;
+    case 3:
+      tabToDisplay = <NodeHistory node={node} djClient={djClient} />;
+      break;
+    case 4:
+      tabToDisplay =
+        node.type === 'metric' ? <NodeSQLTab djNode={node} /> : <br />;
+      break;
+    case 5:
+      tabToDisplay = <NodeMaterializationTab node={node} djClient={djClient} />;
       break;
     default:
       tabToDisplay = <NodeInfoTab node={node} />;
@@ -78,17 +116,15 @@ export function NodePage() {
       <NamespaceHeader namespace={name.split('.').slice(0, -1).join('.')} />
       <div className="card">
         <div className="card-header">
-          <h3 className="card-title align-items-start flex-column">
+          <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>
           </h3>
-          <span
-            className="fs-6 fw-semibold text-gray-400"
-            style={{ marginTop: '-4rem' }}
-          >
-            Updated {new Date(node?.updated_at).toDateString()}
-          </span>
+          <ClientCodePopover code={node?.createNodeClientCode} />
           <div className="align-items-center row">
             {TabsJson.map(buildTabs)}
           </div>

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

@@ -27,6 +27,11 @@ export function Root() {
                   <a href="/">Explore</a>
                 </span>
               </span>
+              <span className="menu-link">
+                <span className="menu-title">
+                  <a href="/sql">SQL</a>
+                </span>
+              </span>
               <span className="menu-link">
                 <span className="menu-title">
                   <a href="/">Help</a>

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

@@ -0,0 +1,16 @@
+/**
+ * Asynchronously loads the component for the Node page
+ */
+
+import * as React from 'react';
+import { lazyLoad } from '../../../utils/loadable';
+
+export const SQLBuilderPage = props => {
+  return lazyLoad(
+    () => import('./index'),
+    module => module.SQLBuilderPage,
+    {
+      fallback: <div></div>,
+    },
+  )(props);
+};