datajunction-ui 0.0.1-rc.24 → 0.0.1-rc.26

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

@@ -0,0 +1,166 @@
+import { useContext, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
+import DJClientContext from '../../providers/djclient';
+import { ErrorMessage, Field, Form, Formik } from 'formik';
+import { FormikSelect } from '../AddEditNodePage/FormikSelect';
+import EditIcon from '../../icons/EditIcon';
+import { displayMessageAfterSubmit, labelize } from '../../../utils/form';
+
+export default function AddBackfillPopover({
+  node,
+  materialization,
+  onSubmit,
+}) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [popoverAnchor, setPopoverAnchor] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setPopoverAnchor(false);
+      }
+    };
+    document.addEventListener('click', handleClickOutside, true);
+    return () => {
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  }, [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: '',
+  };
+
+  const savePartition = async (values, { setSubmitting, setStatus }) => {
+    setSubmitting(false);
+    const response = await djClient.runBackfill(
+      values.node,
+      values.materializationName,
+      values.partitionColumn,
+      values.from,
+      values.to,
+    );
+    if (response.status === 200 || response.status === 201) {
+      setStatus({ success: 'Saved!' });
+    } else {
+      setStatus({
+        failure: `${response.json.message}`,
+      });
+    }
+    onSubmit();
+    window.location.reload();
+  };
+
+  return (
+    <>
+      <button
+        className="edit_button"
+        aria-label="AddBackfill"
+        tabIndex="0"
+        onClick={() => {
+          setPopoverAnchor(!popoverAnchor);
+        }}
+      >
+        <span className="add_node">+ Add Backfill</span>
+      </button>
+      <div
+        className="fade modal-backdrop in"
+        style={{ display: popoverAnchor === false ? 'none' : 'block' }}
+      ></div>
+      <div
+        className="centerPopover"
+        role="dialog"
+        aria-label="client-code"
+        style={{
+          display: popoverAnchor === false ? 'none' : 'block',
+          width: '50%',
+        }}
+        ref={ref}
+      >
+        <Formik initialValues={initialValues} onSubmit={savePartition}>
+          {function Render({ isSubmitting, status, setFieldValue }) {
+            return (
+              <Form>
+                {displayMessageAfterSubmit(status)}
+                <h2>Run Backfill</h2>
+                <span data-testid="edit-partition">
+                  <label htmlFor="engine" style={{ paddingBottom: '1rem' }}>
+                    Engine
+                  </label>
+                  <Field as="select" name="engine" id="engine" disabled={true}>
+                    <option value={materialization?.engine?.name}>
+                      {materialization?.engine?.name}{' '}
+                      {materialization?.engine?.version}
+                    </option>
+                  </Field>
+                </span>
+                <br />
+                <br />
+                <label htmlFor="partition" style={{ paddingBottom: '1rem' }}>
+                  Partition Range
+                </label>
+                {node.columns
+                  .filter(col => col.partition !== null)
+                  .map(col => {
+                    return (
+                      <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 />
+                <button
+                  className="add_node"
+                  type="submit"
+                  aria-label="SaveEditColumn"
+                  aria-hidden="false"
+                >
+                  Save
+                </button>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,161 @@
+import { useContext, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
+import DJClientContext from '../../providers/djclient';
+import { ErrorMessage, Field, Form, Formik } from 'formik';
+import { FormikSelect } from '../AddEditNodePage/FormikSelect';
+import EditIcon from '../../icons/EditIcon';
+import { displayMessageAfterSubmit, labelize } from '../../../utils/form';
+
+export default function AddMaterializationPopover({ node, onSubmit }) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [popoverAnchor, setPopoverAnchor] = useState(false);
+  const [engines, setEngines] = useState([]);
+  const [defaultEngine, setDefaultEngine] = useState('');
+
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const engines = await djClient.engines();
+      setEngines(engines);
+      setDefaultEngine(
+        engines && engines.length > 0
+          ? engines[0].name + '__' + engines[0].version
+          : '',
+      );
+    };
+    fetchData().catch(console.error);
+    const handleClickOutside = event => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setPopoverAnchor(false);
+      }
+    };
+    document.addEventListener('click', handleClickOutside, true);
+    return () => {
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  }, [djClient, setPopoverAnchor]);
+
+  const configureMaterialization = async (
+    values,
+    { setSubmitting, setStatus },
+  ) => {
+    setSubmitting(false);
+    const engineVersion = values.engine.split('__').slice(-1).join('');
+    const engineName = values.engine.split('__').slice(0, -1).join('');
+    const response = await djClient.materialize(
+      values.node,
+      engineName,
+      engineVersion,
+      values.schedule,
+      values.config,
+    );
+    if (response.status === 200 || response.status === 201) {
+      setStatus({ success: 'Saved!' });
+    } else {
+      setStatus({
+        failure: `${response.json.message}`,
+      });
+    }
+    onSubmit();
+    // window.location.reload();
+  };
+
+  return (
+    <>
+      <button
+        className="edit_button"
+        aria-label="PartitionColumn"
+        tabIndex="0"
+        onClick={() => {
+          setPopoverAnchor(!popoverAnchor);
+        }}
+      >
+        <span className="add_node">+ Add Materialization</span>
+      </button>
+      <div
+        className="fade modal-backdrop in"
+        style={{ display: popoverAnchor === false ? 'none' : 'block' }}
+      ></div>
+      <div
+        className="centerPopover"
+        role="dialog"
+        aria-label="client-code"
+        style={{
+          display: popoverAnchor === false ? 'none' : 'block',
+          width: '50%',
+        }}
+        ref={ref}
+      >
+        <Formik
+          initialValues={{
+            node: node?.name,
+            engine: defaultEngine,
+            config: '{"spark": {"spark.executor.memory": "6g"}}',
+            schedule: '@daily',
+          }}
+          onSubmit={configureMaterialization}
+        >
+          {function Render({ isSubmitting, status, setFieldValue }) {
+            return (
+              <Form>
+                <h2>Configure Materialization</h2>
+                {displayMessageAfterSubmit(status)}
+                <span data-testid="edit-partition">
+                  <label htmlFor="engine">Engine</label>
+                  <Field as="select" name="engine">
+                    <>
+                      {engines?.map(engine => (
+                        <option value={engine.name + '__' + engine.version}>
+                          {engine.name} {engine.version}
+                        </option>
+                      ))}
+                      <option value=""></option>
+                    </>
+                  </Field>
+                </span>
+                <input
+                  hidden={true}
+                  name="node"
+                  value={node?.name}
+                  readOnly={true}
+                />
+                <br />
+                <br />
+                <label htmlFor="schedule">Schedule</label>
+                <Field
+                  type="text"
+                  name="schedule"
+                  id="schedule"
+                  placeholder="Cron"
+                  default="@daily"
+                />
+                <br />
+                <br />
+                <div className="DescriptionInput">
+                  <ErrorMessage name="description" component="span" />
+                  <label htmlFor="Config">Config</label>
+                  <Field
+                    type="textarea"
+                    as="textarea"
+                    name="config"
+                    id="Config"
+                    placeholder="Optional engine-specific configuration (i.e., Spark conf etc)"
+                  />
+                </div>
+                <button
+                  className="add_node"
+                  type="submit"
+                  aria-label="SaveEditColumn"
+                  aria-hidden="false"
+                >
+                  Save
+                </button>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+}

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

@@ -1,4 +1,4 @@
-import {useContext, useEffect, useRef, useState} from 'react';
+import { useContext, useEffect, useRef, useState } from 'react';
 import * as React from 'react';
 import DJClientContext from '../../providers/djclient';
 import { Form, Formik } from 'formik';

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

@@ -35,7 +35,6 @@ export default function LinkDimensionPopover({
     { setSubmitting, setStatus },
   ) => {
     setSubmitting(false);
-    console.log('dimension', dimension, 'columnDimension', columnDimension);
     if (columnDimension?.name && dimension === 'Remove') {
       await unlinkDimension(node, column, columnDimension?.name, setStatus);
     } else {

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

@@ -4,6 +4,7 @@ import * as React from 'react';
 import EditColumnPopover from './EditColumnPopover';
 import LinkDimensionPopover from './LinkDimensionPopover';
 import { labelize } from '../../../utils/form';
+import PartitionColumnPopover from './PartitionColumnPopover';
 
 export default function NodeColumnTab({ node, djClient }) {
   const [attributes, setAttributes] = useState([]);
@@ -49,6 +50,41 @@ export default function NodeColumnTab({ node, djClient }) {
     ));
   };
 
+  const showColumnPartition = col => {
+    if (col.partition) {
+      return (
+        <>
+          <span
+            className="node_type badge node_type__blank"
+            key={`col-attr-partition-type`}
+          >
+            <span
+              className="partition_value badge"
+              key={`col-attr-partition-type`}
+            >
+              <b>Type:</b> {col.partition.type_}
+            </span>
+            <br />
+            <span
+              className="partition_value badge"
+              key={`col-attr-partition-type`}
+            >
+              <b>Format:</b> <code>{col.partition.format}</code>
+            </span>
+            <br />
+            <span
+              className="partition_value badge"
+              key={`col-attr-partition-type`}
+            >
+              <b>Granularity:</b> <code>{col.partition.granularity}</code>
+            </span>
+          </span>
+        </>
+      );
+    }
+    return '';
+  };
+
   const columnList = columns => {
     return columns.map(col => (
       <tr key={col.name}>
@@ -62,39 +98,72 @@ export default function NodeColumnTab({ node, djClient }) {
         </td>
         <td>
           <span
-            className="node_type__transform badge node_type"
+            className=""
             role="columnheader"
-            aria-label="ColumnType"
+            aria-label="ColumnDisplayName"
             aria-hidden="false"
           >
-            {col.type}
+            {col.display_name}
           </span>
         </td>
         <td>
-          {col.dimension !== undefined && col.dimension !== null ? (
-            <>
-              <a href={`/nodes/${col.dimension.name}`}>{col.dimension.name}</a>
-              <ClientCodePopover code={col.clientCode} />
-            </>
-          ) : (
-            ''
-          )}{' '}
-          <LinkDimensionPopover
-            column={col}
-            node={node}
-            options={dimensions}
-            onSubmit={async () => {
-              const res = await djClient.node(node.name);
-              setColumns(res.columns);
-            }}
-          />
+          <span
+            className={`node_type__${
+              node.type === 'cube' ? col.type : 'transform'
+            } badge node_type`}
+            role="columnheader"
+            aria-label="ColumnType"
+            aria-hidden="false"
+          >
+            {col.type}
+          </span>
         </td>
+        {node.type !== 'cube' ? (
+          <td>
+            {col.dimension !== undefined && col.dimension !== null ? (
+              <>
+                <a href={`/nodes/${col.dimension.name}`}>
+                  {col.dimension.name}
+                </a>
+                <ClientCodePopover code={col.clientCode} />
+              </>
+            ) : (
+              ''
+            )}{' '}
+            <LinkDimensionPopover
+              column={col}
+              node={node}
+              options={dimensions}
+              onSubmit={async () => {
+                const res = await djClient.node(node.name);
+                setColumns(res.columns);
+              }}
+            />
+          </td>
+        ) : (
+          ''
+        )}
+        {node.type !== 'cube' ? (
+          <td>
+            {showColumnAttributes(col)}
+            <EditColumnPopover
+              column={col}
+              node={node}
+              options={attributes}
+              onSubmit={async () => {
+                const res = await djClient.node(node.name);
+                setColumns(res.columns);
+              }}
+            />
+          </td>
+        ) : (
+          ''
+        )}
         <td>
-          {showColumnAttributes(col)}
-          <EditColumnPopover
+          {showColumnPartition(col)}
+          <PartitionColumnPopover
             column={col}
             node={node}
-            options={attributes}
             onSubmit={async () => {
               const res = await djClient.node(node.name);
               setColumns(res.columns);
@@ -111,9 +180,17 @@ export default function NodeColumnTab({ node, djClient }) {
         <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
           <tr>
             <th className="text-start">Column</th>
+            <th>Display Name</th>
             <th>Type</th>
-            <th>Linked Dimension</th>
-            <th>Attributes</th>
+            {node?.type !== 'cube' ? (
+              <>
+                <th>Linked Dimension</th>
+                <th>Attributes</th>
+              </>
+            ) : (
+              ''
+            )}
+            <th>Partition</th>
           </tr>
         </thead>
         <tbody>{columnList(columns)}</tbody>

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

@@ -13,7 +13,11 @@ foundation.hljs['padding'] = '2rem';
 export default function NodeInfoTab({ node }) {
   const [compiledSQL, setCompiledSQL] = useState('');
   const [checked, setChecked] = useState(false);
-  const nodeTags = node?.tags.map(tag => <div>{tag}</div>);
+  const nodeTags = node?.tags.map(tag => (
+    <div className={'badge tag_value'}>
+      <a href={`/tags/${tag.name}`}>{tag.display_name}</a>
+    </div>
+  ));
   const djClient = useContext(DJClientContext).DataJunctionAPI;
   useEffect(() => {
     const fetchData = async () => {
@@ -62,6 +66,28 @@ export default function NodeInfoTab({ node }) {
     <></>
   );
 
+  const displayCubeElement = cubeElem => {
+    return (
+      <div
+        className="button-3 cube-element"
+        key={cubeElem.name}
+        role="cell"
+        aria-label="CubeElement"
+        aria-hidden="false"
+      >
+        <a href={`/nodes/${cubeElem.node_name}`}>{cubeElem.display_name}</a>
+        <span
+          className={`badge node_type__${
+            cubeElem.type === 'metric' ? cubeElem.type : 'dimension'
+          }`}
+          style={{ fontSize: '100%', textTransform: 'capitalize' }}
+        >
+          {cubeElem.type === 'metric' ? cubeElem.type : 'dimension'}
+        </span>
+      </div>
+    );
+  };
+
   const cubeElementsDiv = node?.cube_elements ? (
     <div className="list-group-item d-flex">
       <div className="d-flex gap-2 w-100 justify-content-between py-3">
@@ -72,28 +98,12 @@ export default function NodeInfoTab({ node }) {
         >
           <h6 className="mb-0 w-100">Cube Elements</h6>
           <div className={`list-group-item`}>
-            {node.cube_elements.map(cubeElem => (
-              <div
-                className="button-3 cube-element"
-                key={cubeElem.name}
-                role="cell"
-                aria-label="CubeElement"
-                aria-hidden="false"
-              >
-                <a href={`/nodes/${cubeElem.node_name}`}>
-                  {cubeElem.type === 'metric'
-                    ? cubeElem.node_name
-                    : cubeElem.name}
-                </a>
-                <span
-                  className={`badge node_type__${
-                    cubeElem.type === 'metric' ? cubeElem.type : 'dimension'
-                  }`}
-                >
-                  {cubeElem.type === 'metric' ? cubeElem.type : 'dimension'}
-                </span>
-              </div>
-            ))}
+            {node.cube_elements.map(cubeElem =>
+              cubeElem.type === 'metric' ? displayCubeElement(cubeElem) : '',
+            )}
+            {node.cube_elements.map(cubeElem =>
+              cubeElem.type !== 'metric' ? displayCubeElement(cubeElem) : '',
+            )}
           </div>
         </div>
       </div>