datajunction-ui 0.0.1-a42.dev0 → 0.0.1-a43.dev0

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

@@ -9,12 +9,21 @@ import NamespaceHeader from '../../components/NamespaceHeader';
 import { useContext, useEffect, useState } from 'react';
 import DJClientContext from '../../providers/djclient';
 import 'styles/node-creation.scss';
-import AlertIcon from '../../icons/AlertIcon';
 import { useParams, useNavigate } from 'react-router-dom';
 import { FullNameField } from './FullNameField';
-import { FormikSelect } from './FormikSelect';
+import { MetricQueryField } from './MetricQueryField';
+import { displayMessageAfterSubmit } from '../../../utils/form';
+import { PrimaryKeySelect } from './PrimaryKeySelect';
 import { NodeQueryField } from './NodeQueryField';
-import { displayMessageAfterSubmit, labelize } from '../../../utils/form';
+import { MetricMetadataFields } from './MetricMetadataFields';
+import { UpstreamNodeField } from './UpstreamNodeField';
+import { TagsField } from './TagsField';
+import { NamespaceField } from './NamespaceField';
+import { AlertMessage } from './AlertMessage';
+import { DisplayNameField } from './DisplayNameField';
+import { DescriptionField } from './DescriptionField';
+import { NodeModeField } from './NodeModeField';
+import { RequiredDimensionsSelect } from './RequiredDimensionsSelect';
 
 class Action {
   static Add = new Action('add');
@@ -32,20 +41,15 @@ export function AddEditNodePage() {
   let { nodeType, initialNamespace, name } = useParams();
   const action = name !== undefined ? Action.Edit : Action.Add;
 
-  const [namespaces, setNamespaces] = useState([]);
-  const [tags, setTags] = useState([]);
-  const [metricUnits, setMetricUnits] = useState([]);
-  const [metricDirections, setMetricDirections] = useState([]);
-
   const initialValues = {
     name: action === Action.Edit ? name : '',
     namespace: action === Action.Add ? initialNamespace : '',
     display_name: '',
     query: '',
-    node_type: '',
+    type: nodeType,
     description: '',
     primary_key: '',
-    mode: 'draft',
+    mode: 'published',
   };
 
   const validator = values => {
@@ -53,7 +57,7 @@ export function AddEditNodePage() {
     if (!values.name) {
       errors.name = 'Required';
     }
-    if (!values.query) {
+    if (values.type !== 'metric' && !values.query) {
       errors.query = 'Required';
     }
     return errors;
@@ -98,7 +102,7 @@ export function AddEditNodePage() {
   );
 
   const primaryKeyToList = primaryKey => {
-    return primaryKey.split(',').map(columnName => columnName.trim());
+    return primaryKey.map(columnName => columnName.trim());
   };
 
   const createNode = async (values, setStatus) => {
@@ -107,12 +111,15 @@ export function AddEditNodePage() {
       values.name,
       values.display_name,
       values.description,
-      values.query,
+      values.type === 'metric'
+        ? `SELECT ${values.aggregate_expression} FROM ${values.upstream_node}`
+        : values.query,
       values.mode,
       values.namespace,
       values.primary_key ? primaryKeyToList(values.primary_key) : null,
       values.metric_direction,
       values.metric_unit,
+      values.required_dimensions,
     );
     if (status === 200 || status === 201) {
       if (values.tags) {
@@ -138,11 +145,14 @@ export function AddEditNodePage() {
       values.name,
       values.display_name,
       values.description,
-      values.query,
+      values.type === 'metric'
+        ? `SELECT ${values.aggregate_expression} FROM ${values.upstream_node}`
+        : values.query,
       values.mode,
       values.primary_key ? primaryKeyToList(values.primary_key) : null,
       values.metric_direction,
       values.metric_unit,
+      values.required_dimensions,
     );
     const tagsResponse = await djClient.tagsNode(
       values.name,
@@ -164,22 +174,6 @@ export function AddEditNodePage() {
     }
   };
 
-  const namespaceInput = (
-    <div className="NamespaceInput">
-      <ErrorMessage name="namespace" component="span" />
-      <label htmlFor="react-select-3-input">Namespace *</label>
-      <FormikSelect
-        selectOptions={namespaces}
-        formikFieldName="namespace"
-        placeholder="Choose Namespace"
-        defaultValue={{
-          value: initialNamespace,
-          label: initialNamespace,
-        }}
-      />
-    </div>
-  );
-
   const fullNameInput = (
     <div className="FullNameInput NodeCreationInput">
       <ErrorMessage name="name" component="span" />
@@ -192,7 +186,57 @@ export function AddEditNodePage() {
     return new Set(['transform', 'metric', 'dimension']).has(nodeType);
   };
 
-  const updateFieldsWithNodeData = (data, setFieldValue) => {
+  const getExistingNodeData = async name => {
+    const data = await djClient.node(name);
+    if (data.type === 'metric') {
+      const metric = await djClient.metric(name);
+      data.upstream_node = metric.upstream_node;
+      data.expression = metric.expression;
+      data.required_dimensions = metric.required_dimensions;
+    }
+    return data;
+  };
+
+  const primaryKeyFromNode = node => {
+    return node.columns
+      .filter(
+        col =>
+          col.attributes &&
+          col.attributes.filter(
+            attr => attr.attribute_type.name === 'primary_key',
+          ).length > 0,
+      )
+      .map(col => col.name);
+  };
+
+  const runValidityChecks = (data, setNode, setMessage) => {
+    // Check if node exists
+    if (data.message !== undefined) {
+      setNode(null);
+      setMessage(`Node ${name} does not exist!`);
+      return;
+    }
+
+    // Check if node type can be edited
+    if (!nodeCanBeEdited(data.type)) {
+      setNode(null);
+      if (data.type === 'cube') {
+        navigate(`/nodes/${data.name}/edit-cube`);
+      }
+      setMessage(`Node ${name} is of type ${data.type} and cannot be edited`);
+    }
+  };
+
+  const updateFieldsWithNodeData = (
+    data,
+    setFieldValue,
+    setNode,
+    setSelectTags,
+    setSelectPrimaryKey,
+    setSelectUpstreamNode,
+    setSelectRequiredDims,
+  ) => {
+    // Update fields with existing data to prepare for edit
     const fields = [
       'display_name',
       'query',
@@ -201,19 +245,13 @@ export function AddEditNodePage() {
       'primary_key',
       'mode',
       'tags',
+      'expression',
+      'upstream_node',
     ];
-    const primaryKey = data.columns
-      .filter(
-        col =>
-          col.attributes &&
-          col.attributes.filter(
-            attr => attr.attribute_type.name === 'primary_key',
-          ).length > 0,
-      )
-      .map(col => col.name);
+    const primaryKey = primaryKeyFromNode(data);
     fields.forEach(field => {
       if (field === 'primary_key') {
-        setFieldValue(field, primaryKey.join(', '));
+        setFieldValue(field, primaryKey);
       } else if (field === 'tags') {
         setFieldValue(
           field,
@@ -232,57 +270,47 @@ export function AddEditNodePage() {
         data.metric_metadata.unit.name.toLowerCase(),
       );
     }
-  };
+    if (data.expression) {
+      setFieldValue('aggregate_expression', data.expression);
+    }
+    if (data.upstream_node) {
+      setFieldValue('upstream_node', data.upstream_node);
+    }
+    setNode(data);
 
-  const alertMessage = message => {
-    return (
-      <div className="message alert">
-        <AlertIcon />
-        {message}
-      </div>
+    // 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 };
+        })}
+      />,
+    );
+    setSelectPrimaryKey(
+      <PrimaryKeySelect
+        defaultValue={primaryKey.map(col => {
+          return { value: col, label: col };
+        })}
+      />,
+    );
+    setSelectRequiredDims(
+      <RequiredDimensionsSelect
+        defaultValue={data.required_dimensions.map(dim => {
+          return { value: dim, label: dim };
+        })}
+      />,
+    );
+    setSelectUpstreamNode(
+      <UpstreamNodeField
+        defaultValue={{
+          value: data.upstream_node,
+          label: data.upstream_node,
+        }}
+      />,
     );
   };
 
-  // Get namespaces, only necessary when creating a node
-  useEffect(() => {
-    if (action === Action.Add) {
-      const fetchData = async () => {
-        const namespaces = await djClient.namespaces();
-        setNamespaces(
-          namespaces.map(m => ({
-            value: m['namespace'],
-            label: m['namespace'],
-          })),
-        );
-      };
-      fetchData().catch(console.error);
-    }
-  }, [action, djClient, djClient.metrics]);
-
-  // Get list of tags
-  useEffect(() => {
-    const fetchData = async () => {
-      const tags = await djClient.listTags();
-      setTags(
-        tags.map(tag => ({
-          value: tag.name,
-          label: tag.display_name,
-        })),
-      );
-    };
-    fetchData().catch(console.error);
-  }, [djClient, djClient.listTags]);
-
-  // Get metric metadata values
-  useEffect(() => {
-    const fetchData = async () => {
-      const metadata = await djClient.listMetricMetadata();
-      setMetricDirections(metadata.directions);
-      setMetricUnits(metadata.units);
-    };
-    fetchData().catch(console.error);
-  }, [djClient]);
-
   return (
     <div className="mid">
       <NamespaceHeader namespace="" />
@@ -297,172 +325,89 @@ export function AddEditNodePage() {
             >
               {function Render({ isSubmitting, status, setFieldValue }) {
                 const [node, setNode] = useState([]);
+                const [selectPrimaryKey, setSelectPrimaryKey] = useState(null);
+                const [selectRequiredDims, setSelectRequiredDims] =
+                  useState(null);
+                const [selectUpstreamNode, setSelectUpstreamNode] =
+                  useState(null);
                 const [selectTags, setSelectTags] = useState(null);
                 const [message, setMessage] = useState('');
 
-                const tagsInput = (
-                  <div
-                    className="TagsInput"
-                    style={{ width: '25%', margin: '1rem 0 1rem 1.2rem' }}
-                  >
-                    <ErrorMessage name="tags" component="span" />
-                    <label htmlFor="react-select-3-input">Tags</label>
-                    <span data-testid="select-tags">
-                      {action === Action.Edit ? (
-                        selectTags
-                      ) : (
-                        <FormikSelect
-                          isMulti={true}
-                          selectOptions={tags}
-                          formikFieldName="tags"
-                          placeholder="Choose Tags"
-                        />
-                      )}
-                    </span>
-                  </div>
-                );
-
-                const metricMetadataInput = (
-                  <>
-                    <div
-                      className="MetricDirectionInput NodeCreationInput"
-                      style={{ width: '25%' }}
-                    >
-                      <ErrorMessage name="metric_direction" component="span" />
-                      <label htmlFor="MetricDirection">Metric Direction</label>
-                      <Field
-                        as="select"
-                        name="metric_direction"
-                        id="MetricDirection"
-                      >
-                        <option value=""></option>
-                        {metricDirections.map(direction => (
-                          <option value={direction}>
-                            {labelize(direction)}
-                          </option>
-                        ))}
-                      </Field>
-                    </div>
-                    <div
-                      className="MetricUnitInput NodeCreationInput"
-                      style={{ width: '25%' }}
-                    >
-                      <ErrorMessage name="metric_unit" component="span" />
-                      <label htmlFor="MetricUnit">Metric Unit</label>
-                      <Field as="select" name="metric_unit" id="MetricUnit">
-                        <option value=""></option>
-                        {metricUnits.map(unit => (
-                          <option value={unit.name}>{unit.label}</option>
-                        ))}
-                      </Field>
-                    </div>
-                  </>
-                );
-
                 useEffect(() => {
                   const fetchData = async () => {
                     if (action === Action.Edit) {
-                      const data = await djClient.node(name);
-
-                      // Check if node exists
-                      if (data.message !== undefined) {
-                        setNode(null);
-                        setMessage(`Node ${name} does not exist!`);
-                        return;
-                      }
-
-                      // Check if node type can be edited
-                      if (!nodeCanBeEdited(data.type)) {
-                        setNode(null);
-                        if (data.type === 'cube') {
-                          navigate(`/nodes/${data.name}/edit-cube`);
-                        }
-                        setMessage(
-                          `Node ${name} is of type ${data.type} and cannot be edited`,
-                        );
-                        return;
-                      }
-
-                      // Update fields with existing data to prepare for edit
-                      updateFieldsWithNodeData(data, setFieldValue);
-                      setNode(data);
-                      setSelectTags(
-                        <FormikSelect
-                          isMulti={true}
-                          selectOptions={tags}
-                          formikFieldName="tags"
-                          placeholder="Choose Tags"
-                          defaultValue={data.tags.map(t => {
-                            return { value: t.name, label: t.display_name };
-                          })}
-                        />,
+                      const data = await getExistingNodeData(name);
+                      runValidityChecks(data, setNode, setMessage);
+                      updateFieldsWithNodeData(
+                        data,
+                        setFieldValue,
+                        setNode,
+                        setSelectTags,
+                        setSelectPrimaryKey,
+                        setSelectUpstreamNode,
+                        setSelectRequiredDims,
                       );
                     }
                   };
                   fetchData().catch(console.error);
-                }, [setFieldValue, tags]);
+                }, [setFieldValue]);
                 return (
                   <Form>
                     {displayMessageAfterSubmit(status)}
                     {action === Action.Edit && message ? (
-                      alertMessage(message)
+                      <AlertMessage message={message} />
                     ) : (
                       <>
-                        {action === Action.Add
-                          ? namespaceInput
-                          : staticFieldsInEdit(node)}
-                        <div className="DisplayNameInput NodeCreationInput">
-                          <ErrorMessage name="display_name" component="span" />
-                          <label htmlFor="displayName">Display Name *</label>
-                          <Field
-                            type="text"
-                            name="display_name"
-                            id="displayName"
-                            placeholder="Human readable display name"
-                          />
-                        </div>
+                        {action === Action.Add ? (
+                          <NamespaceField initialNamespace={initialNamespace} />
+                        ) : (
+                          staticFieldsInEdit(node)
+                        )}
+                        <DisplayNameField />
                         {action === Action.Add ? fullNameInput : ''}
-                        <div className="DescriptionInput NodeCreationInput">
-                          <ErrorMessage name="description" component="span" />
-                          <label htmlFor="Description">Description</label>
-                          <Field
-                            type="textarea"
-                            as="textarea"
-                            name="description"
-                            id="Description"
-                            placeholder="Describe your node"
+                        <DescriptionField />
+                        <br />
+                        {nodeType === 'metric' || node?.type === 'metric' ? (
+                          action === Action.Edit ? (
+                            selectUpstreamNode
+                          ) : (
+                            <UpstreamNodeField />
+                          )
+                        ) : (
+                          ''
+                        )}
+                        <br />
+                        <br />
+                        {nodeType === 'metric' || node.type === 'metric' ? (
+                          <MetricQueryField
+                            djClient={djClient}
+                            value={node.expression ? node.expression : ''}
                           />
-                        </div>
-                        {nodeType === 'metric' || node.type === 'metric'
-                          ? metricMetadataInput
-                          : ''}
-                        <div className="QueryInput NodeCreationInput">
-                          <ErrorMessage name="query" component="span" />
-                          <label htmlFor="Query">Query *</label>
+                        ) : (
                           <NodeQueryField
                             djClient={djClient}
                             value={node.query ? node.query : ''}
                           />
-                        </div>
-                        <div className="PrimaryKeyInput NodeCreationInput">
-                          <ErrorMessage name="primary_key" component="span" />
-                          <label htmlFor="primaryKey">Primary Key</label>
-                          <Field
-                            type="text"
-                            name="primary_key"
-                            id="primaryKey"
-                            placeholder="Comma-separated list of PKs"
-                          />
-                        </div>
-                        {tagsInput}
-                        <div className="NodeModeInput NodeCreationInput">
-                          <ErrorMessage name="mode" component="span" />
-                          <label htmlFor="Mode">Mode</label>
-                          <Field as="select" name="mode" id="Mode">
-                            <option value="draft">Draft</option>
-                            <option value="published">Published</option>
-                          </Field>
-                        </div>
+                        )}
+                        <br />
+                        {nodeType === 'metric' || node.type === 'metric' ? (
+                          <MetricMetadataFields />
+                        ) : (
+                          ''
+                        )}
+                        {nodeType !== 'metric' && node.type !== 'metric' ? (
+                          action === Action.Edit ? (
+                            selectPrimaryKey
+                          ) : (
+                            <PrimaryKeySelect />
+                          )
+                        ) : action === Action.Edit ? (
+                          selectRequiredDims
+                        ) : (
+                          <RequiredDimensionsSelect />
+                        )}
+                        {action === Action.Edit ? selectTags : <TagsField />}
+                        <NodeModeField />
 
                         <button type="submit" disabled={isSubmitting}>
                           {action === Action.Add ? 'Create' : 'Save'} {nodeType}

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

@@ -38,7 +38,6 @@ export const MetricsSelect = ({ cube }) => {
 
       const metrics = await djClient.metrics();
       setMetrics(metrics.map(m => ({ value: m, label: m })));
-      console.log('metrics', metrics);
     };
     fetchData().catch(console.error);
   }, [djClient, djClient.metrics, cube]);

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

@@ -305,7 +305,7 @@ describe('CubeBuilderPage', () => {
         '',
         '',
         '',
-        'draft',
+        'published',
         [
           'default.num_repair_orders',
           'default.avg_repair_price',

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

@@ -25,7 +25,7 @@ export function CubeBuilderPage() {
     namespace: action === Action.Add ? initialNamespace : '',
     display_name: '',
     description: '',
-    mode: 'draft',
+    mode: 'published',
     metrics: [],
     dimensions: [],
     filters: [],

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

@@ -40,7 +40,6 @@ export default function AddMaterializationPopover({ node, onSubmit }) {
     setSubmitting(false);
     const config = JSON.parse(values.config);
     config.lookback_window = values.lookback_window;
-    console.log('values', values);
     const response = await djClient.materialize(
       values.node,
       values.job_type,

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

@@ -11,8 +11,8 @@ export default function NodeHistory({ node, djClient }) {
     const fetchData = async () => {
       if (node) {
         const data = await djClient.history('node', node.name);
-        setHistory(data);
         const revisions = await djClient.revisions(node.name);
+        setHistory(data);
         setRevisions(revisions);
       }
     };

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

@@ -20,6 +20,7 @@ export default function NodeInfoTab({ node }) {
     </div>
   ));
   const djClient = useContext(DJClientContext).DataJunctionAPI;
+
   useEffect(() => {
     const fetchData = async () => {
       if (checked === true) {
@@ -38,6 +39,24 @@ export default function NodeInfoTab({ node }) {
   function toggle(value) {
     return !value;
   }
+  const metricQueryDiv = (
+    <div className="list-group-item d-flex">
+      <div className="gap-2 w-100 justify-content-between py-3">
+        <div style={{ marginBottom: '30px' }}>
+          <h6 className="mb-0 w-100">Upstream Node</h6>
+          <p>
+            <a href={`/nodes/${node?.upstream_node}`}>{node?.upstream_node}</a>
+          </p>
+        </div>
+        <div>
+          <h6 className="mb-0 w-100">Aggregate Expression</h6>
+          <SyntaxHighlighter language="sql" style={foundation}>
+            {node?.expression}
+          </SyntaxHighlighter>
+        </div>
+      </div>
+    </div>
+  );
   const queryDiv = node?.query ? (
     <div className="list-group-item d-flex">
       <div className="d-flex gap-2 w-100 justify-content-between py-3">
@@ -153,8 +172,39 @@ export default function NodeInfoTab({ node }) {
   ) : (
     <></>
   );
+
+  const primaryKeyOrRequiredDims = (
+    <div style={{ maxWidth: '25%' }}>
+      <h6 className="mb-0 w-100">
+        {node?.type !== 'metric' ? 'Primary Key' : 'Required Dimensions'}
+      </h6>
+      <p
+        className="mb-0 opacity-75"
+        role="dialog"
+        aria-hidden="false"
+        aria-label={
+          node?.type !== 'metric' ? 'PrimaryKey' : 'RequiredDimensions'
+        }
+      >
+        {node?.type !== 'metric'
+          ? node?.primary_key?.map(dim => (
+              <span className="rounded-pill badge bg-secondary-soft PrimaryKey">
+                <a href={`/nodes/${node?.name}`}>{dim}</a>
+              </span>
+            ))
+          : node?.required_dimensions?.map(dim => (
+              <span className="rounded-pill badge bg-secondary-soft PrimaryKey">
+                <a href={`/nodes/${node?.upstream_node}`}>{dim}</a>
+              </span>
+            ))}
+      </p>
+    </div>
+  );
   return (
-    <div className="list-group align-items-center justify-content-between flex-md-row gap-2">
+    <div
+      className="list-group align-items-center justify-content-between flex-md-row gap-2"
+      style={{ minWidth: '700px' }}
+    >
       <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">
@@ -223,17 +273,7 @@ export default function NodeInfoTab({ node }) {
               {nodeTags}
             </p>
           </div>
-          <div>
-            <h6 className="mb-0 w-100">Primary Key</h6>
-            <p
-              className="mb-0 opacity-75"
-              role="dialog"
-              aria-hidden="false"
-              aria-label="PrimaryKey"
-            >
-              {node?.primary_key?.join(', ')}
-            </p>
-          </div>
+          {primaryKeyOrRequiredDims}
           <div>
             <h6 className="mb-0 w-100">Last Updated</h6>
             <p
@@ -248,7 +288,8 @@ export default function NodeInfoTab({ node }) {
         </div>
       </div>
       {metricMetadataDiv}
-      {node?.type !== 'cube' ? queryDiv : ''}
+      {node?.type !== 'cube' && node?.type !== 'metric' ? queryDiv : ''}
+      {node?.type === 'metric' ? metricQueryDiv : ''}
       {cubeElementsDiv}
     </div>
   );