datajunction-ui 0.0.1-a46 → 0.0.1-a46.dev3

package/Makefile

@@ -2,8 +2,3 @@ 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.1a46",
+  "version": "0.0.1a46.dev3",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {
@@ -166,7 +166,7 @@
       "global": {
         "statements": 89,
         "branches": 75,
-        "lines": 80,
+        "lines": 90,
         "functions": 85
       }
     }

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

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

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

@@ -39,9 +39,6 @@ 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,
@@ -51,7 +48,6 @@ export default function AddMaterializationPopover({ node, onSubmit }) {
     );
     if (status === 200 || status === 201) {
       setStatus({ success: json.message });
-      window.location.reload();
     } else {
       setStatus({
         failure: `${json.message}`,
@@ -115,41 +111,36 @@ export default function AddMaterializationPopover({ node, onSubmit }) {
               <Form>
                 <h2>Configure Materialization</h2>
                 {displayMessageAfterSubmit(status)}
-                {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>
-                ) : (
-                  ''
-                )}
+                <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>
                 <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,45 +16,38 @@ export const ConfigField = ({ djClient, value }) => {
 
   return (
     <div className="DescriptionInput">
-      <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"
+      <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);
+          }}
         />
-        <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>
     </div>
   );
 };