datajunction-ui 0.0.1-a44.dev2 → 0.0.1-a44.dev5

package/package.json

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

package/src/app/pages/AddEditNodePage/__tests__/AddEditNodePageFormFailed.test.jsx

@@ -101,9 +101,7 @@ describe('AddEditNodePage submission failed', () => {
         status: 404,
       });
 
-      expect(
-        await screen.getByText('Update failed, Some tags were not found'),
-      ).toBeInTheDocument();
+      expect(await screen.getByText('Update failed')).toBeInTheDocument();
     });
   }, 60000);
 });

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

@@ -24,6 +24,7 @@ import { DisplayNameField } from './DisplayNameField';
 import { DescriptionField } from './DescriptionField';
 import { NodeModeField } from './NodeModeField';
 import { RequiredDimensionsSelect } from './RequiredDimensionsSelect';
+import LoadingIcon from '../../icons/LoadingIcon';
 
 class Action {
   static Add = new Action('add');
@@ -63,19 +64,18 @@ export function AddEditNodePage() {
     return errors;
   };
 
-  const handleSubmit = (values, { setSubmitting, setStatus }) => {
+  const handleSubmit = async (values, { setSubmitting, setStatus }) => {
     if (action === Action.Add) {
-      setTimeout(() => {
-        createNode(values, setStatus);
+      await createNode(values, setStatus).then(_ => {
+        window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
         setSubmitting(false);
-      }, 400);
+      });
     } else {
-      setTimeout(() => {
-        patchNode(values, setStatus);
+      await patchNode(values, setStatus).then(_ => {
+        window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
         setSubmitting(false);
-      }, 400);
+      });
     }
-    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
   };
 
   const pageTitle =
@@ -169,7 +169,7 @@ export function AddEditNodePage() {
       });
     } else {
       setStatus({
-        failure: `${json.message}, ${tagsResponse.json.message}`,
+        failure: `${json.message}`,
       });
     }
   };
@@ -410,7 +410,12 @@ export function AddEditNodePage() {
                         <NodeModeField />
 
                         <button type="submit" disabled={isSubmitting}>
-                          {action === Action.Add ? 'Create' : 'Save'} {nodeType}
+                          {isSubmitting ? (
+                            <LoadingIcon />
+                          ) : (
+                            (action === Action.Add ? 'Create ' : 'Save ') +
+                            (nodeType ? nodeType : '')
+                          )}
                         </button>
                       </>
                     )}

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

@@ -3,7 +3,8 @@ import * as React from 'react';
 import DJClientContext from '../../providers/djclient';
 import { ErrorMessage, Field, Form, Formik } from 'formik';
 import { displayMessageAfterSubmit, labelize } from '../../../utils/form';
-import {ConfigField} from "./MaterializationConfigField";
+import { ConfigField } from './MaterializationConfigField';
+import LoadingIcon from '../../icons/LoadingIcon';
 
 export default function AddMaterializationPopover({ node, onSubmit }) {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
@@ -34,29 +35,34 @@ export default function AddMaterializationPopover({ node, onSubmit }) {
     };
   }, [djClient, setPopoverAnchor]);
 
-  const configureMaterialization = async (
-    values,
-    { setSubmitting, setStatus },
-  ) => {
-    setSubmitting(false);
+  const materialize = async (values, setStatus) => {
     const config = {};
     config.spark = values.spark_config;
     config.lookback_window = values.lookback_window;
-    const response = await djClient.materialize(
+    const { status, json } = await djClient.materialize(
       values.node,
       values.job_type,
       values.strategy,
       values.schedule,
       config,
     );
-    if (response.status === 200 || response.status === 201) {
-      setStatus({ success: response.json.message });
+    if (status === 200 || status === 201) {
+      setStatus({ success: json.message });
     } else {
       setStatus({
-        failure: `${response.json.message}`,
+        failure: `${json.message}`,
       });
     }
-    // window.location.reload();
+  };
+
+  const configureMaterialization = async (
+    values,
+    { setSubmitting, setStatus },
+  ) => {
+    await materialize(values, setStatus).then(_ => {
+      window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+      setSubmitting(false);
+    });
   };
 
   return (
@@ -88,13 +94,14 @@ export default function AddMaterializationPopover({ node, onSubmit }) {
         <Formik
           initialValues={{
             node: node?.name,
-            job_type: node?.type === 'cube' ? 'druid_cube' : 'spark_sql',
+            job_type:
+              node?.type === 'cube' ? 'druid_metrics_cube' : 'spark_sql',
             strategy: 'full',
             schedule: '@daily',
             lookback_window: '1 DAY',
             spark_config: {
-                "spark.executor.memory": "16g",
-                "spark.memory.fraction": "0.3"
+              'spark.executor.memory': '16g',
+              'spark.memory.fraction': '0.3',
             },
           }}
           onSubmit={configureMaterialization}
@@ -108,9 +115,21 @@ export default function AddMaterializationPopover({ node, onSubmit }) {
                   <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>
+                      <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>
@@ -129,7 +148,10 @@ export default function AddMaterializationPopover({ node, onSubmit }) {
                       <option key={'full'} value={'full'}>
                         Full
                       </option>
-                      <option key={'incremental_time'} value={'incremental_time'}>
+                      <option
+                        key={'incremental_time'}
+                        value={'incremental_time'}
+                      >
                         Incremental Time
                       </option>
                     </>
@@ -159,17 +181,20 @@ export default function AddMaterializationPopover({ node, onSubmit }) {
                   />
                 </div>
                 <br />
-                <ConfigField value={{
-                    "spark.executor.memory": "16g",
-                    "spark.memory.fraction": "0.3"
-                }}/>
+                <ConfigField
+                  value={{
+                    'spark.executor.memory': '16g',
+                    'spark.memory.fraction': '0.3',
+                  }}
+                />
                 <button
                   className="add_node"
                   type="submit"
                   aria-label="SaveEditColumn"
                   aria-hidden="false"
+                  disabled={isSubmitting}
                 >
-                  Save
+                  {isSubmitting ? <LoadingIcon /> : 'Save'}
                 </button>
               </Form>
             );

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

@@ -11,7 +11,7 @@ export const ConfigField = ({ djClient, value }) => {
   const jsonExt = langs.json();
 
   const updateFormik = val => {
-    formik.setFieldValue('spark_config', val);
+    formik.setFieldValue('spark_config', JSON.parse(val));
   };
 
   return (
@@ -30,7 +30,7 @@ export const ConfigField = ({ djClient, value }) => {
           id={'spark_config'}
           name={'spark_config'}
           extensions={[jsonExt]}
-          value={JSON.stringify(value, null, "    ")}
+          value={JSON.stringify(value, null, '    ')}
           options={{
             theme: 'default',
             lineNumbers: true,

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

@@ -15,8 +15,11 @@ const NodeLineage = djNode => {
         col.attributes.some(attr => attr.attribute_type.name === 'primary_key'),
       )
       .map(col => col.name);
-    const dimensionLinkForeignKeys = node.dimension_links ? node.dimension_links
-      .flatMap(link => Object.keys(link.foreign_keys).map(key => key.split('.').slice(-1))) : [];
+    const dimensionLinkForeignKeys = node.dimension_links
+      ? node.dimension_links.flatMap(link =>
+          Object.keys(link.foreign_keys).map(key => key.split('.').slice(-1)),
+        )
+      : [];
     const column_names = node.columns
       .map(col => {
         return {
@@ -51,11 +54,19 @@ const NodeLineage = djNode => {
   };
 
   const dimensionEdges = node => {
-    return node.dimension_links === undefined ? [] : node.dimension_links
-      .flatMap(link => {
-        return Object.keys(link.foreign_keys).map(fk => {
+    return node.dimension_links === undefined
+      ? []
+      : node.dimension_links.flatMap(link => {
+          return Object.keys(link.foreign_keys).map(fk => {
             return {
-              id: link.dimension.name + '->' + node.name + '=' + link.foreign_keys[fk] + '->' + fk,
+              id:
+                link.dimension.name +
+                '->' +
+                node.name +
+                '=' +
+                link.foreign_keys[fk] +
+                '->' +
+                fk,
               source: link.dimension.name,
               sourceHandle: link.foreign_keys[fk],
               target: node.name,
@@ -72,9 +83,8 @@ const NodeLineage = djNode => {
                 stroke: '#b0b9c2',
               },
             };
-          }
-        )
-      });
+          });
+        });
   };
 
   const parentEdges = node => {

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

@@ -134,8 +134,7 @@ export default function NodeMaterializationTab({ node, djClient }) {
       <div className="table-vertical">
         <div>
           <h2>Materializations</h2>
-          {node ?
-          <AddMaterializationPopover node={node} /> : <></>}
+          {node ? <AddMaterializationPopover node={node} /> : <></>}
           {materializations.length > 0 ? (
             <table
               className="card-inner-table table"