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

package/Makefile

@@ -2,3 +2,8 @@ dev-release:
 	yarn version --prerelease --preid dev --no-git-tag-version
 	npm publish
 
+test:
+	yarn test --coverage --watchAll --runInBand
+
+lint:
+	npm run lint

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1-a45.dev5",
+  "version": "0.0.1a46",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {
@@ -166,7 +166,7 @@
       "global": {
         "statements": 89,
         "branches": 75,
-        "lines": 90,
+        "lines": 80,
         "functions": 85
       }
     }

package/src/app/components/NodeMaterializationDelete.jsx

@@ -0,0 +1,80 @@
+import DJClientContext from '../providers/djclient';
+import * as React from 'react';
+import DeleteIcon from '../icons/DeleteIcon';
+import { Form, Formik } from 'formik';
+import { useContext } from 'react';
+import { displayMessageAfterSubmit } from '../../utils/form';
+
+export default function NodeMaterializationDelete({
+  nodeName,
+  materializationName,
+}) {
+  const [deleteButton, setDeleteButton] = React.useState(<DeleteIcon />);
+
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const deleteNode = async (values, { setStatus }) => {
+    if (
+      !window.confirm(
+        'Deleting materialization job ' +
+          values.materializationName +
+          '. Are you sure?',
+      )
+    ) {
+      return;
+    }
+    const { status, json } = await djClient.deleteMaterialization(
+      values.nodeName,
+      values.materializationName,
+    );
+    if (status === 200 || status === 201 || status === 204) {
+      window.location.reload();
+      setStatus({
+        success: (
+          <>
+            Successfully deleted materialization job:{' '}
+            {values.materializationName}
+          </>
+        ),
+      });
+      setDeleteButton(''); // hide the Delete button
+    } else {
+      setStatus({
+        failure: `${json.message}`,
+      });
+    }
+  };
+
+  const initialValues = {
+    nodeName: nodeName,
+    materializationName: materializationName,
+  };
+
+  return (
+    <div>
+      <Formik initialValues={initialValues} onSubmit={deleteNode}>
+        {function Render({ status, setFieldValue }) {
+          return (
+            <Form className="deleteNode">
+              {displayMessageAfterSubmit(status)}
+              {
+                <>
+                  <button
+                    type="submit"
+                    style={{
+                      marginLeft: 0,
+                      all: 'unset',
+                      color: '#005c72',
+                      cursor: 'pointer',
+                    }}
+                  >
+                    {deleteButton}
+                  </button>
+                </>
+              }
+            </Form>
+          );
+        }}
+      </Formik>
+    </div>
+  );
+}

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

@@ -9,9 +9,9 @@ import { displayMessageAfterSubmit } from '../../../utils/form';
 import { useParams } from 'react-router-dom';
 import { Action } from '../../components/forms/Action';
 import NodeNameField from '../../components/forms/NodeNameField';
-import NodeTagsInput from '../../components/forms/NodeTagsInput';
 import { MetricsSelect } from './MetricsSelect';
 import { DimensionsSelect } from './DimensionsSelect';
+import { TagsField } from '../AddEditNodePage/TagsField';
 
 export function CubeBuilderPage() {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
@@ -29,6 +29,7 @@ export function CubeBuilderPage() {
     metrics: [],
     dimensions: [],
     filters: [],
+    tags: [],
   };
 
   const handleSubmit = (values, { setSubmitting, setStatus }) => {
@@ -105,10 +106,23 @@ export function CubeBuilderPage() {
     }
   };
 
-  const updateFieldsWithNodeData = (data, setFieldValue) => {
+  const updateFieldsWithNodeData = (data, setFieldValue, setSelectTags) => {
     setFieldValue('display_name', data.display_name || '', false);
     setFieldValue('description', data.description || '', false);
     setFieldValue('mode', data.mode || 'draft', false);
+    setFieldValue(
+      'tags',
+      data.tags.map(tag => tag.name),
+    );
+    // For react-select fields, we have to explicitly set the entire
+    // field rather than just the values
+    setSelectTags(
+      <TagsField
+        defaultValue={data.tags.map(t => {
+          return { value: t.name, label: t.display_name };
+        })}
+      />,
+    );
   };
 
   const staticFieldsInEdit = () => (
@@ -144,14 +158,15 @@ export function CubeBuilderPage() {
         >
           {function Render({ isSubmitting, status, setFieldValue, props }) {
             const [node, setNode] = useState([]);
+            const [selectTags, setSelectTags] = useState(null);
 
             // Get cube
             useEffect(() => {
               const fetchData = async () => {
                 if (name) {
                   const cube = await djClient.cube(name);
-                  updateFieldsWithNodeData(cube, setFieldValue);
                   setNode(cube);
+                  updateFieldsWithNodeData(cube, setFieldValue, setSelectTags);
                 }
               };
               fetchData().catch(console.error);
@@ -227,7 +242,7 @@ export function CubeBuilderPage() {
                         <option value="published">Published</option>
                       </Field>
                     </div>
-                    <NodeTagsInput action={action} node={node} />
+                    {action === Action.Edit ? selectTags : <TagsField />}
                     <button
                       type="submit"
                       disabled={isSubmitting}

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

@@ -6,6 +6,7 @@ import DJClientContext from '../../providers/djclient';
 import Explorer from '../NamespacePage/Explorer';
 import NodeListActions from '../../components/NodeListActions';
 import AddNamespacePopover from './AddNamespacePopover';
+import 'styles/node-list.css';
 
 export function NamespacePage() {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
@@ -94,7 +95,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/AddBackfillPopover.jsx

@@ -3,6 +3,8 @@ import * as React from 'react';
 import DJClientContext from '../../providers/djclient';
 import { Field, Form, Formik } from 'formik';
 import { displayMessageAfterSubmit } from '../../../utils/form';
+import PartitionValueForm from './PartitionValueForm';
+import LoadingIcon from '../../icons/LoadingIcon';
 
 export default function AddBackfillPopover({
   node,
@@ -26,30 +28,39 @@ export default function AddBackfillPopover({
   }, [setPopoverAnchor]);
 
   const partitionColumns = node.columns.filter(col => col.partition !== null);
-
-  const temporalPartitionColumns = partitionColumns.filter(
-    col => col.partition.type_ === 'temporal',
-  );
-
   const initialValues = {
     node: node.name,
     materializationName: materialization.name,
-    partitionColumn:
-      temporalPartitionColumns.length > 0
-        ? temporalPartitionColumns[0].name
-        : '',
-    from: '',
-    to: '',
+    partitionValues: {},
   };
 
-  const savePartition = async (values, { setSubmitting, setStatus }) => {
-    setSubmitting(false);
+  for (const partitionCol of partitionColumns) {
+    if (partitionCol.partition.type_ === 'temporal') {
+      initialValues.partitionValues[partitionCol.name] = {
+        from: '',
+        to: '',
+      };
+    } else {
+      initialValues.partitionValues[partitionCol.name] = '';
+    }
+  }
+
+  const runBackfill = async (values, setStatus) => {
     const response = await djClient.runBackfill(
       values.node,
       values.materializationName,
-      values.partitionColumn,
-      values.from,
-      values.to,
+      Object.entries(values.partitionValues).map(entry => {
+        if (typeof entry[1] === 'object' && entry[1] !== null) {
+          return {
+            columnName: entry[0],
+            range: [entry[1].from, entry[1].to],
+          };
+        }
+        return {
+          columnName: entry[0],
+          values: [entry[1]],
+        };
+      }),
     );
     if (response.status === 200 || response.status === 201) {
       setStatus({ success: 'Saved!' });
@@ -58,21 +69,26 @@ export default function AddBackfillPopover({
         failure: `${response.json.message}`,
       });
     }
-    onSubmit();
-    window.location.reload();
+  };
+
+  const submitBackfill = async (values, { setSubmitting, setStatus }) => {
+    await runBackfill(values, setStatus).then(_ => {
+      window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+      setSubmitting(false);
+    });
   };
 
   return (
     <>
       <button
-        className="edit_button"
+        className="edit_button add_button"
         aria-label="AddBackfill"
         tabIndex="0"
         onClick={() => {
           setPopoverAnchor(!popoverAnchor);
         }}
       >
-        <span className="add_node">+ Add Backfill</span>
+        <span className="add_button">+ Run</span>
       </button>
       <div
         className="fade modal-backdrop in"
@@ -85,10 +101,12 @@ export default function AddBackfillPopover({
         style={{
           display: popoverAnchor === false ? 'none' : 'block',
           width: '50%',
+          minWidth: '800px',
+          left: '-25%',
         }}
         ref={ref}
       >
-        <Formik initialValues={initialValues} onSubmit={savePartition}>
+        <Formik initialValues={initialValues} onSubmit={submitBackfill}>
           {function Render({ isSubmitting, status, setFieldValue }) {
             return (
               <Form>
@@ -115,41 +133,17 @@ export default function AddBackfillPopover({
                 <br />
                 <br />
                 <label htmlFor="partition" style={{ paddingBottom: '1rem' }}>
-                  Partition Range
+                  Partition
                 </label>
                 {node.columns
                   .filter(col => col.partition !== null)
                   .map(col => {
                     return (
-                      <div
-                        className="partition__full"
+                      <PartitionValueForm
+                        col={col}
+                        materialization={materialization}
                         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="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="to"
-                            id={`${col.name}__to`}
-                            placeholder="20230102"
-                            default="20230102"
-                            style={{ width: '7rem' }}
-                          />
-                        </div>
-                      </div>
+                      />
                     );
                   })}
                 <br />
@@ -158,8 +152,9 @@ export default function AddBackfillPopover({
                   type="submit"
                   aria-label="SaveEditColumn"
                   aria-hidden="false"
+                  disabled={isSubmitting}
                 >
-                  Save
+                  {isSubmitting ? <LoadingIcon /> : 'Save'}
                 </button>
               </Form>
             );

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

@@ -39,6 +39,9 @@ export default function AddMaterializationPopover({ node, onSubmit }) {
     const config = {};
     config.spark = values.spark_config;
     config.lookback_window = values.lookback_window;
+    if (!values.job_type) {
+      values.job_type = 'spark_sql';
+    }
     const { status, json } = await djClient.materialize(
       values.node,
       values.job_type,
@@ -48,6 +51,7 @@ export default function AddMaterializationPopover({ node, onSubmit }) {
     );
     if (status === 200 || status === 201) {
       setStatus({ success: json.message });
+      window.location.reload();
     } else {
       setStatus({
         failure: `${json.message}`,
@@ -111,36 +115,41 @@ export default function AddMaterializationPopover({ node, onSubmit }) {
               <Form>
                 <h2>Configure Materialization</h2>
                 {displayMessageAfterSubmit(status)}
-                <span data-testid="job-type">
-                  <label htmlFor="job_type">Job Type</label>
-                  <Field as="select" name="job_type">
-                    <>
-                      <option
-                        key={'druid_measures_cube'}
-                        value={'druid_measures_cube'}
-                      >
-                        Druid Measures Cube (Pre-Agg Cube)
-                      </option>
-                      <option
-                        key={'druid_metrics_cube'}
-                        value={'druid_metrics_cube'}
-                      >
-                        Druid Metrics Cube (Post-Agg Cube)
-                      </option>
-                      <option key={'spark_sql'} value={'spark_sql'}>
-                        Iceberg Table
-                      </option>
-                    </>
-                  </Field>
-                </span>
+                {node.type === 'cube' ? (
+                  <span data-testid="job-type">
+                    <label htmlFor="job_type">Job Type</label>
+
+                    <Field as="select" name="job_type">
+                      <>
+                        <option
+                          key={'druid_measures_cube'}
+                          value={'druid_measures_cube'}
+                        >
+                          Druid Measures Cube (Pre-Agg Cube)
+                        </option>
+                        <option
+                          key={'druid_metrics_cube'}
+                          value={'druid_metrics_cube'}
+                        >
+                          Druid Metrics Cube (Post-Agg Cube)
+                        </option>
+                        <option key={'spark_sql'} value={'spark_sql'}>
+                          Iceberg Table
+                        </option>
+                      </>
+                    </Field>
+                    <br />
+                    <br />
+                  </span>
+                ) : (
+                  ''
+                )}
                 <input
                   hidden={true}
                   name="node"
                   value={node?.name}
                   readOnly={true}
                 />
-                <br />
-                <br />
                 <span data-testid="edit-partition">
                   <label htmlFor="strategy">Strategy</label>
                   <Field as="select" name="strategy">

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

@@ -16,38 +16,45 @@ export const ConfigField = ({ djClient, value }) => {
 
   return (
     <div className="DescriptionInput">
-      <ErrorMessage name="spark_config" component="span" />
-      <label htmlFor="SparkConfig">Spark Config</label>
-      <Field
-        type="textarea"
-        style={{ display: 'none' }}
-        as="textarea"
-        name="spark_config"
-        id="SparkConfig"
-      />
-      <div role="button" tabIndex={0} className="relative flex bg-[#282a36]">
-        <CodeMirror
-          id={'spark_config'}
-          name={'spark_config'}
-          extensions={[jsonExt]}
-          value={JSON.stringify(value, null, '    ')}
-          options={{
-            theme: 'default',
-            lineNumbers: true,
-          }}
-          width="100%"
-          height="170px"
-          style={{
-            margin: '0 0 23px 0',
-            flex: 1,
-            fontSize: '150%',
-            textAlign: 'left',
-          }}
-          onChange={(value, viewUpdate) => {
-            updateFormik(value);
-          }}
+      <details>
+        <summary>
+          <label htmlFor="SparkConfig" style={{ display: 'inline-block' }}>
+            Spark Config
+          </label>
+        </summary>
+        <ErrorMessage name="spark_config" component="span" />
+        <Field
+          type="textarea"
+          style={{ display: 'none' }}
+          as="textarea"
+          name="spark_config"
+          id="SparkConfig"
         />
-      </div>
+        <div role="button" tabIndex={0} className="relative flex bg-[#282a36]">
+          <CodeMirror
+            id={'spark_config'}
+            name={'spark_config'}
+            extensions={[jsonExt]}
+            value={JSON.stringify(value, null, '    ')}
+            options={{
+              theme: 'default',
+              lineNumbers: true,
+            }}
+            width="100%"
+            height="170px"
+            style={{
+              margin: '0 0 23px 0',
+              flex: 1,
+              fontSize: '150%',
+              textAlign: 'left',
+            }}
+            onChange={(value, viewUpdate) => {
+              updateFormik(value);
+            }}
+          />
+        </div>
+      </details>{' '}
+      <></>
     </div>
   );
 };

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">