datajunction-ui 0.0.1-a45.dev5 → 0.0.1-a46.dev1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1-a45.dev5",
+  "version": "0.0.1a46.dev1",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {

package/src/app/pages/AddEditNodePage/QueryTesterSection.jsx

@@ -0,0 +1,62 @@
+/**
+ * Query tester component
+ */
+import { ErrorMessage, useFormikContext } from 'formik';
+import React, { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import { FormikSelect } from './FormikSelect';
+import QueryBuilder from 'react-querybuilder';
+
+export const QueryTesterSection = ({}) => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  const [fields, setFields] = useState([]);
+  const [filters, setFilters] = useState({
+    combinator: 'and',
+    rules: [],
+  });
+
+  // Used to pull out current form values for node validation
+  const { values } = useFormikContext();
+
+  // Select options, i.e., the available dimensions
+  const [selectOptions, setSelectOptions] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (values.query) {
+        const data = await djClient.node(values.upstream_node);
+        setSelectOptions(
+          data.columns.map(col => {
+            return {
+              value: col.name,
+              label: col.name,
+            };
+          }),
+        );
+      }
+    };
+    fetchData().catch(console.error);
+  }, [djClient, values.upstream_node]);
+
+  return (
+    <>
+      <h4>Test Query</h4>
+      <label>Add Filters</label>
+      <QueryBuilder
+        fields={fields}
+        query={filters}
+        onQueryChange={q => setFilters(q)}
+      />
+      <span
+        className="button-3 execute-button"
+        // onClick={getData}
+        role="button"
+        aria-label="RunQuery"
+        aria-hidden="false"
+      >
+        {'Run Query'}
+      </span>
+    </>
+  );
+};

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

@@ -94,7 +94,7 @@ export function NamespacePage() {
         </span>
       </td>
       <td>
-        <NodeStatus node={node} />
+        <NodeStatus node={node} revalidate={false} />
       </td>
       <td>
         <span className="status">{node.mode}</span>

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

@@ -11,7 +11,7 @@ export default function NodeHistory({ node, djClient }) {
     const fetchData = async () => {
       if (node) {
         const data = await djClient.history('node', node.name);
-        setHistory(data.reverse());
+        setHistory(data);
       }
     };
     fetchData().catch(console.error);

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

@@ -7,6 +7,9 @@ import ListGroupItem from '../../components/ListGroupItem';
 import ToggleSwitch from '../../components/ToggleSwitch';
 import DJClientContext from '../../providers/djclient';
 import { labelize } from '../../../utils/form';
+import { AlertMessage } from '../AddEditNodePage/AlertMessage';
+import AlertIcon from '../../icons/AlertIcon';
+import InvalidIcon from '../../icons/InvalidIcon';
 
 SyntaxHighlighter.registerLanguage('sql', sql);
 foundation.hljs['padding'] = '2rem';
@@ -39,6 +42,35 @@ export default function NodeInfoTab({ node }) {
   function toggle(value) {
     return !value;
   }
+  const metricsWarning =
+    node?.type === 'metric' && node?.incompatible_druid_functions.length > 0 ? (
+      <div className="message warning" style={{ marginTop: '0.7rem' }}>
+        ⚠{' '}
+        <small>
+          The following functions used in the metric definition may not be
+          compatible with Druid SQL:{' '}
+          {node?.incompatible_druid_functions.map(func => (
+            <li style={{ listStyleType: 'none', margin: '0.7rem 0.7rem' }}>
+              ⇢{' '}
+              <span style={{ background: '#fff', padding: '0.3rem' }}>
+                {func}
+              </span>
+            </li>
+          ))}
+          If you need your metrics to be compatible with Druid, please use{' '}
+          <a
+            href={
+              'https://druid.apache.org/docs/latest/querying/sql-functions/'
+            }
+          >
+            these supported functions
+          </a>
+          .
+        </small>
+      </div>
+    ) : (
+      ''
+    );
   const metricQueryDiv = (
     <div className="list-group-item d-flex">
       <div className="gap-2 w-100 justify-content-between py-3">
@@ -205,6 +237,7 @@ export default function NodeInfoTab({ node }) {
       className="list-group align-items-center justify-content-between flex-md-row gap-2"
       style={{ minWidth: '700px' }}
     >
+      {node?.type === 'metric' ? metricsWarning : ''}
       <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">

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

@@ -1,28 +1,101 @@
-import { Component } from 'react';
+import { Component, useContext, useEffect, useRef, useState } from 'react';
 import ValidIcon from '../../icons/ValidIcon';
 import InvalidIcon from '../../icons/InvalidIcon';
+import DJClientContext from '../../providers/djclient';
+import { foundation } from 'react-syntax-highlighter/src/styles/hljs';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import markdown from 'react-syntax-highlighter/dist/cjs/languages/hljs/markdown';
+import * as React from 'react';
+import { AlertMessage } from '../AddEditNodePage/AlertMessage';
+import AlertIcon from '../../icons/AlertIcon';
+import { labelize } from '../../../utils/form';
 
-export default class NodeStatus extends Component {
-  render() {
-    const { node } = this.props;
-    return (
+SyntaxHighlighter.registerLanguage('markdown', markdown);
+
+export default function NodeStatus({ node, revalidate = true }) {
+  const MAX_ERROR_LENGTH = 200;
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [validation, setValidation] = useState([]);
+
+  const [codeAnchor, setCodeAnchor] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (revalidate) {
+      const fetchData = async () => {
+        setValidation(await djClient.revalidate(node.name));
+      };
+      fetchData().catch(console.error);
+    }
+  }, [djClient, node, revalidate]);
+
+  const displayValidation =
+    revalidate && validation?.errors?.length > 0 ? (
       <>
-        {node?.status === 'valid' ? (
-          <span
-            className="status__valid status"
-            style={{ alignContent: 'center' }}
-          >
-            <ValidIcon />
-          </span>
-        ) : (
-          <span
-            className="status__invalid status"
-            style={{ alignContent: 'center' }}
-          >
-            <InvalidIcon />
-          </span>
-        )}
+        <button
+          className="badge"
+          style={{
+            backgroundColor: '#b34b00',
+            fontSize: '15px',
+            outline: '0',
+            border: '0',
+            cursor: 'pointer',
+          }}
+          onClick={() => setCodeAnchor(!codeAnchor)}
+        >
+          ⚠ {validation?.errors?.length} error
+          {validation?.errors?.length > 1 ? 's' : ''}
+        </button>
+        <div
+          className="popover"
+          ref={ref}
+          style={{
+            display: codeAnchor === false ? 'none' : 'block',
+            border: 'none',
+            paddingTop: '0px !important',
+            marginTop: '0px',
+            backgroundColor: 'transparent',
+          }}
+        >
+          {validation?.errors?.map((error, idx) => (
+            <div className="validation_error">
+              <b
+                style={{
+                  color: '#b34b00',
+                }}
+              >
+                {labelize(error.type.toLowerCase())}:
+              </b>{' '}
+              {error.message.length > MAX_ERROR_LENGTH
+                ? error.message.slice(0, MAX_ERROR_LENGTH - 1) + '...'
+                : error.message}
+            </div>
+          ))}
+        </div>
       </>
+    ) : (
+      <></>
     );
-  }
+
+  return (
+    <>
+      {revalidate && validation?.errors?.length > 0 ? (
+        displayValidation
+      ) : validation?.status === 'valid' || node?.status === 'valid' ? (
+        <span
+          className="status__valid status"
+          style={{ alignContent: 'center' }}
+        >
+          <ValidIcon />
+        </span>
+      ) : (
+        <span
+          className="status__invalid status"
+          style={{ alignContent: 'center' }}
+        >
+          <InvalidIcon />
+        </span>
+      )}
+    </>
+  );
 }

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

@@ -0,0 +1,63 @@
+import { useContext, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
+import DJClientContext from '../../providers/djclient';
+import { Field, Form, Formik } from 'formik';
+import { displayMessageAfterSubmit } from '../../../utils/form';
+
+export default function PartitionValueForm({ col, materialization }) {
+  if (col.partition.type_ === 'temporal') {
+    return (
+      <>
+        <div
+          className="partition__full"
+          key={col.name}
+          style={{ width: '50%' }}
+        >
+          <div className="partition__header">{col.display_name}</div>
+          <div className="partition__body">
+            <span style={{ padding: '0.5rem' }}>From</span>{' '}
+            <Field
+              type="text"
+              name={`partitionValues.['${col.name}'].from`}
+              id={`${col.name}.from`}
+              placeholder="20230101"
+              default="20230101"
+              style={{ width: '7rem', paddingRight: '1rem' }}
+            />{' '}
+            <span style={{ padding: '0.5rem' }}>To</span>
+            <Field
+              type="text"
+              name={`partitionValues.['${col.name}'].to`}
+              id={`${col.name}.to`}
+              placeholder="20230102"
+              default="20230102"
+              style={{ width: '7rem' }}
+            />
+          </div>
+        </div>
+      </>
+    );
+  } else {
+    return (
+      <>
+        <div
+          className="partition__full"
+          key={col.name}
+          style={{ width: '50%' }}
+        >
+          <div className="partition__header">{col.display_name}</div>
+          <div className="partition__body">
+            <Field
+              type="text"
+              name={`partitionValues.['${col.name}']`}
+              id={col.name}
+              placeholder=""
+              default=""
+              style={{ width: '7rem', paddingRight: '1rem' }}
+            />
+          </div>
+        </div>
+      </>
+    );
+  }
+}

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

@@ -149,7 +149,7 @@ export default function RevisionDiff() {
           </div>
           {Object.keys(diffObjects).map(field => {
             return (
-              <div className="diff">
+              <div className="diff" aria-label={'DiffView'} role={'gridcell'}>
                 <h4>
                   {labelize(field)}{' '}
                   <small className="no-change-banner">

package/src/app/pages/NodePage/__tests__/NodePage.test.jsx

@@ -88,6 +88,7 @@ describe('<NodePage />', () => {
       created_at: '2023-08-21T16:48:56.932162+00:00',
       tags: [{ name: 'purpose', display_name: 'Purpose' }],
       primary_key: [],
+      incompatible_druid_functions: ['IF'],
       createNodeClientCode:
         'dj = DJBuilder(DJ_URL)\n\navg_repair_price = dj.create_metric(\n    description="Average repair price",\n    display_name="Default: Avg Repair Price",\n    name="default.avg_repair_price",\n    primary_key=[],\n    query="""SELECT  avg(price) default_DOT_avg_repair_price \n FROM default.repair_order_details\n\n"""\n)',
       dimensions: [

package/src/app/pages/NodePage/__tests__/RevisionDiff.test.jsx

@@ -14,11 +14,11 @@ describe('<RevisionDiff />', () => {
 
   const mockNodesWithDimension = [
     {
-      node_revision_id: 2,
-      node_id: 2,
-      type: 'source',
-      name: 'default.repair_order_details',
-      display_name: 'Default: Repair Order Details',
+      node_revision_id: 1,
+      node_id: 1,
+      type: 'dimension',
+      name: 'default.repair_order',
+      display_name: 'Repair Orders',
       version: 'v1.0',
       status: 'valid',
       mode: 'published',
@@ -30,10 +30,10 @@ describe('<RevisionDiff />', () => {
         extra_params: {},
         name: 'warehouse',
       },
-      schema_: 'roads',
-      table: 'repair_order_details',
-      description: 'Details on repair orders',
-      query: null,
+      description: 'Repair order dimension',
+      query:
+        'SELECT repair_order_id, municipality_id, hard_hat_id, order_date, ' +
+        'dispatcher_id FROM default.repair_orders',
       availability: null,
       columns: [
         {
@@ -45,26 +45,26 @@ describe('<RevisionDiff />', () => {
           },
         },
         {
-          name: 'repair_type_id',
+          name: 'municipality_id',
           type: 'int',
           attributes: [],
           dimension: null,
         },
         {
-          name: 'price',
-          type: 'float',
+          name: 'hard_hat_id',
+          type: 'int',
           attributes: [],
           dimension: null,
         },
         {
-          name: 'quantity',
-          type: 'int',
+          name: 'order_date',
+          type: 'date',
           attributes: [],
           dimension: null,
         },
         {
-          name: 'discount',
-          type: 'float',
+          name: 'dispatcher_id',
+          type: 'int',
           attributes: [],
           dimension: null,
         },
@@ -74,12 +74,12 @@ describe('<RevisionDiff />', () => {
       parents: [],
     },
     {
-      node_revision_id: 1,
-      node_id: 1,
-      type: 'source',
-      name: 'default.repair_orders',
-      display_name: 'Default: Repair Orders',
-      version: 'v1.0',
+      node_revision_id: 2,
+      node_id: 2,
+      type: 'dimension',
+      name: 'default.repair_order',
+      display_name: 'Repair Orders',
+      version: 'v2.0',
       status: 'valid',
       mode: 'published',
       catalog: {
@@ -90,10 +90,10 @@ describe('<RevisionDiff />', () => {
         extra_params: {},
         name: 'warehouse',
       },
-      schema_: 'roads',
-      table: 'repair_orders',
-      description: 'Repair orders',
-      query: null,
+      description: 'Repair order dimension',
+      query:
+        'SELECT repair_order_id, municipality_id, hard_hat_id, ' +
+        'dispatcher_id FROM default.repair_orders',
       availability: null,
       columns: [
         {
@@ -106,7 +106,7 @@ describe('<RevisionDiff />', () => {
         },
         {
           name: 'municipality_id',
-          type: 'string',
+          type: 'int',
           attributes: [],
           dimension: null,
         },
@@ -116,24 +116,6 @@ describe('<RevisionDiff />', () => {
           attributes: [],
           dimension: null,
         },
-        {
-          name: 'order_date',
-          type: 'date',
-          attributes: [],
-          dimension: null,
-        },
-        {
-          name: 'required_date',
-          type: 'date',
-          attributes: [],
-          dimension: null,
-        },
-        {
-          name: 'dispatched_date',
-          type: 'date',
-          attributes: [],
-          dimension: null,
-        },
         {
           name: 'dispatcher_id',
           type: 'int',
@@ -141,7 +123,7 @@ describe('<RevisionDiff />', () => {
           dimension: null,
         },
       ],
-      updated_at: '2023-08-21T16:48:52.880498+00:00',
+      updated_at: '2023-08-21T16:48:52.981201+00:00',
       materializations: [],
       parents: [],
     },
@@ -163,7 +145,7 @@ describe('<RevisionDiff />', () => {
     );
     const { container } = render(
       <MemoryRouter
-        initialEntries={['/nodes/default.repair_orders_cube/revisions/v1.0']}
+        initialEntries={['/nodes/default.repair_orders_cube/revisions/v2.0']}
       >
         <Routes>
           <Route path="nodes/:name/revisions/:revision" element={element} />
@@ -174,6 +156,9 @@ describe('<RevisionDiff />', () => {
       expect(mockDjClient.DataJunctionAPI.revisions).toHaveBeenCalledWith(
         'default.repair_orders_cube',
       );
+
+      const diffViews = screen.getAllByRole('gridcell', 'DiffView');
+      diffViews.map(diffView => expect(diffView).toBeInTheDocument());
     });
   });
 });

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

@@ -58,6 +58,7 @@ export function NodePage() {
         data.required_dimensions = metric.required_dimensions;
         data.upstream_node = metric.upstream_node;
         data.expression = metric.expression;
+        data.incompatible_druid_functions = metric.incompatible_druid_functions;
       }
       if (data.type === 'cube') {
         const cube = await djClient.cube(name);

package/src/app/pages/QueryRunner.jsx

@@ -0,0 +1,31 @@
+import QueryBuilder from 'react-querybuilder';
+import { useState } from 'react';
+
+export function QueryRunner() {
+  const [fields, setFields] = useState([]);
+  const [filters, setFilters] = useState({
+    combinator: 'and',
+    rules: [],
+  });
+
+  return (
+    <>
+      <h4>Test Query</h4>
+      <label>Add Filters</label>
+      <QueryBuilder
+        fields={fields}
+        query={filters}
+        onQueryChange={q => setFilters(q)}
+      />
+      <span
+        className="button-3 execute-button"
+        // onClick={getData}
+        role="button"
+        aria-label="RunQuery"
+        aria-hidden="false"
+      >
+        {'Run Query'}
+      </span>
+    </>
+  );
+}

package/src/app/services/DJService.js

@@ -844,4 +844,15 @@ export const DataJunctionAPI = {
       })
     ).json();
   },
+  revalidate: async function (node) {
+    return await (
+      await fetch(`${DJ_URL}/nodes/${node}/validate`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include',
+      })
+    ).json();
+  },
 };

package/src/app/services/__tests__/DJService.test.jsx

@@ -34,6 +34,22 @@ describe('DataJunctionAPI', () => {
     });
   });
 
+  it('calls catalogs correctly', async () => {
+    fetch.mockResponseOnce(JSON.stringify({}));
+    await DataJunctionAPI.catalogs();
+    expect(fetch).toHaveBeenCalledWith(`${DJ_URL}/catalogs`, {
+      credentials: 'include',
+    });
+  });
+
+  it('calls engines correctly', async () => {
+    fetch.mockResponseOnce(JSON.stringify({}));
+    await DataJunctionAPI.engines();
+    expect(fetch).toHaveBeenCalledWith(`${DJ_URL}/engines`, {
+      credentials: 'include',
+    });
+  });
+
   it('calls node correctly', async () => {
     fetch.mockResponseOnce(JSON.stringify(mocks.mockMetricNode));
     const nodeData = await DataJunctionAPI.node(mocks.mockMetricNode.name);

package/src/mocks/mockNodes.jsx

@@ -103,6 +103,7 @@ export const mocks = {
     created_at: '2023-08-21T16:48:56.841631+00:00',
     tags: [{ name: 'purpose', display_name: 'Purpose' }],
     dimension_links: [],
+    incompatible_druid_functions: ['IF'],
     dimensions: [
       {
         value: 'default.date_dim.dateint',

package/src/styles/index.css

@@ -1202,3 +1202,18 @@ pre {
   text-transform: uppercase;
   padding-left: 10px;
 }
+
+.validation_error {
+  border: #b34b0025 1px solid;
+  border-left: #b34b00 5px solid;
+  padding-left: 20px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  font-size: small;
+  width: 600px;
+  word-wrap: break-word;
+  margin-top: 3px;
+  background-color: #ffffff;
+  margin-bottom: 3px;
+  margin-left: -20px;
+}

package/src/styles/node-creation.scss

@@ -254,6 +254,15 @@ form {
   }
 }
 
+.warning {
+  background-color: rgb(253, 248, 242);
+  color: rgb(190, 105, 37);
+  svg {
+    filter: invert(16%) sepia(68%) saturate(2827%) hue-rotate(344deg)
+      brightness(96%) contrast(100%);
+  }
+}
+
 .SourceCreationInput {
   margin: 0.5rem 0;
   display: inline-grid;