datajunction-ui 0.0.1-a86.dev1 → 0.0.1-a86.dev3

package/package.json

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

package/src/app/components/Search.jsx

@@ -47,7 +47,7 @@ export default function Search() {
     };
     fetchNodes();
   }, []);
-  
+
   const handleChange = e => {
     setSearchValue(e.target.value);
     if (fuse) {

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

@@ -6,7 +6,12 @@ import { useContext, useMemo, useState, useEffect } from 'react';
 import DJClientContext from '../../providers/djclient';
 import { FormikSelect } from './FormikSelect';
 
-export const ColumnsSelect = ({ defaultValue, fieldName, label, isMulti = false }) => {
+export const ColumnsSelect = ({
+  defaultValue,
+  fieldName,
+  label,
+  isMulti = false,
+}) => {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
 
   // Used to pull out current form values for node validation
@@ -32,7 +37,7 @@ export const ColumnsSelect = ({ defaultValue, fieldName, label, isMulti = false
       );
       if (json?.columns) {
         setAvailableColumns(
-          json.columns.map(col => ({ value: col.name, label: col.name }))
+          json.columns.map(col => ({ value: col.name, label: col.name })),
         );
       }
     } catch (error) {
@@ -44,18 +49,25 @@ export const ColumnsSelect = ({ defaultValue, fieldName, label, isMulti = false
     fetchColumns();
   }, [values.type, values.name, values.query]);
 
-  return selectableOptions === undefined ? '' : (
+  return selectableOptions === undefined ? (
+    ''
+  ) : (
     <div className="CubeCreationInput">
       <ErrorMessage name={fieldName} component="span" />
       <label htmlFor="react-select-3-input">{label}</label>
       <span data-testid={`select-${fieldName}`}>
         <FormikSelect
-          className={isMulti ? "MultiSelectInput" : "SelectInput"}
-          defaultValue={isMulti ? defaultValue.map(val => {return {
-            value: val,
-            label: val,
-          }}) : {value: defaultValue,
-            label: defaultValue,}}
+          className={isMulti ? 'MultiSelectInput' : 'SelectInput'}
+          defaultValue={
+            isMulti
+              ? defaultValue.map(val => {
+                  return {
+                    value: val,
+                    label: val,
+                  };
+                })
+              : { value: defaultValue, label: defaultValue }
+          }
           selectOptions={selectableOptions}
           formikFieldName={fieldName}
           onFocus={event => fetchColumns(event)}

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

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

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

@@ -31,7 +31,7 @@ export const TagsField = ({ defaultValue }) => {
       style={{ width: '25%', margin: '1rem 0 1rem 1.2rem' }}
     >
       <ErrorMessage name="tags" component="span" />
-      <label htmlFor="react-select-3-input">Tags</label>
+      <label htmlFor="tags">Tags</label>
       <span data-testid="select-tags">
         <FormikSelect
           isMulti={true}

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

@@ -93,10 +93,10 @@ export function AddEditNodePage({ extensions = {} }) {
   const staticFieldsInEdit = node => (
     <>
       <div className="NodeNameInput NodeCreationInput">
-        <label htmlFor="name">Name</label> {name}
+        <label>Name</label> {name}
       </div>
       <div className="NodeNameInput NodeCreationInput">
-        <label htmlFor="name">Type</label> {node.type}
+        <label>Type</label> {node.type}
       </div>
     </>
   );
@@ -295,13 +295,15 @@ export function AddEditNodePage({ extensions = {} }) {
         isMulti={true}
       />,
     );
-    setSelectRequiredDims(
-      <RequiredDimensionsSelect
-        defaultValue={data.required_dimensions.map(dim => {
-          return { value: dim, label: dim };
-        })}
-      />,
-    );
+    if (data.required_dimensions) {
+      setSelectRequiredDims(
+        <RequiredDimensionsSelect
+          defaultValue={data.required_dimensions.map(dim => {
+            return { value: dim, label: dim };
+          })}
+        />,
+      );
+    }
     setSelectUpstreamNode(
       <UpstreamNodeField
         defaultValue={{
@@ -330,17 +332,17 @@ export function AddEditNodePage({ extensions = {} }) {
             <Formik
               initialValues={initialValues}
               validate={validator}
-              onSubmit={
-                (values, { setSubmitting, setStatus }) => {
-                  try {
-                    submitHandlers.map(handler => handler(values, { setSubmitting, setStatus }));
-                  } catch (error) {
-                    console.error("Error in submission", error);
-                  } finally {
-                    setSubmitting(false);
-                  }
+              onSubmit={(values, { setSubmitting, setStatus }) => {
+                try {
+                  submitHandlers.map(handler =>
+                    handler(values, { setSubmitting, setStatus }),
+                  );
+                } catch (error) {
+                  console.error('Error in submission', error);
+                } finally {
+                  setSubmitting(false);
                 }
-              }
+              }}
             >
               {function Render({ isSubmitting, status, setFieldValue }) {
                 const [node, setNode] = useState([]);
@@ -425,15 +427,21 @@ export function AddEditNodePage({ extensions = {} }) {
                         ) : (
                           <RequiredDimensionsSelect />
                         )}
-                        {Object.entries(extensions).map(([key, ExtensionComponent]) => (
-                          <div key={key} className="mt-4 border-t pt-4">
-                            <ExtensionComponent
-                              node={node}
-                              action={action}
-                              registerSubmitHandler={onSubmit => submitHandlers.indexOf(onSubmit) === -1 ? submitHandlers.push(onSubmit) : null}
-                            />
-                          </div>
-                        ))}
+                        {Object.entries(extensions).map(
+                          ([key, ExtensionComponent]) => (
+                            <div key={key} className="mt-4 border-t pt-4">
+                              <ExtensionComponent
+                                node={node}
+                                action={action}
+                                registerSubmitHandler={onSubmit =>
+                                  submitHandlers.indexOf(onSubmit) === -1
+                                    ? submitHandlers.push(onSubmit)
+                                    : null
+                                }
+                              />
+                            </div>
+                          ),
+                        )}
                         {action === Action.Edit ? selectTags : <TagsField />}
                         <NodeModeField />
 

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

@@ -44,23 +44,22 @@ export default function AddMaterializationPopover({ node, onSubmit }) {
     if (!values.job_type) {
       values.job_type = 'spark_sql';
     }
-    const { status, json } = (
-      values.job_type === 'druid_cube' ?
-      await djClient.materializeCube(
-        values.node,
-        values.job_type,
-        values.strategy,
-        values.schedule,
-        values.lookback_window,
-      ) :
-      await djClient.materialize(
-        values.node,
-        values.job_type,
-        values.strategy,
-        values.schedule,
-        config,
-      )
-  );
+    const { status, json } =
+      values.job_type === 'druid_cube'
+        ? await djClient.materializeCube(
+            values.node,
+            values.job_type,
+            values.strategy,
+            values.schedule,
+            values.lookback_window,
+          )
+        : await djClient.materialize(
+            values.node,
+            values.job_type,
+            values.strategy,
+            values.schedule,
+            config,
+          );
     if (status === 200 || status === 201) {
       setStatus({ success: json.message });
       window.location.reload();
@@ -110,9 +109,9 @@ export default function AddMaterializationPopover({ node, onSubmit }) {
         <Formik
           initialValues={{
             node: node?.name,
-            job_type:
-              node?.type === 'cube' ? 'druid_cube' : 'spark_sql',
-            strategy: timePartitionColumns.length == 1 ? 'incremental_time' : 'full',
+            job_type: node?.type === 'cube' ? 'druid_cube' : 'spark_sql',
+            strategy:
+              timePartitionColumns.length == 1 ? 'incremental_time' : 'full',
             schedule: '@daily',
             lookback_window: '1 DAY',
             spark_config: {
@@ -133,10 +132,7 @@ export default function AddMaterializationPopover({ node, onSubmit }) {
 
                     <Field as="select" name="job_type">
                       <>
-                        <option
-                          key={'druid_cube'}
-                          value={'druid_cube'}
-                        >
+                        <option key={'druid_cube'} value={'druid_cube'}>
                           Druid
                         </option>
                       </>
@@ -153,7 +149,10 @@ export default function AddMaterializationPopover({ node, onSubmit }) {
                   value={node?.name}
                   readOnly={true}
                 />
-                {console.log('timePartitionColumns.length', timePartitionColumns.length)}
+                {console.log(
+                  'timePartitionColumns.length',
+                  timePartitionColumns.length,
+                )}
                 <span data-testid="edit-partition">
                   <label htmlFor="strategy">Strategy</label>
                   <Field as="select" name="strategy">

package/src/app/services/DJService.js

@@ -980,7 +980,13 @@ export const DataJunctionAPI = {
     );
     return { status: response.status, json: await response.json() };
   },
-  materializeCube: async function (nodeName, jobType, strategy, schedule, lookbackWindow) {
+  materializeCube: async function (
+    nodeName,
+    jobType,
+    strategy,
+    schedule,
+    lookbackWindow,
+  ) {
     const response = await fetch(
       `${DJ_URL}/nodes/${nodeName}/materialization`,
       {