datajunction-ui 0.0.1-rc.9 → 0.0.2

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

@@ -0,0 +1,165 @@
+import { useContext, useEffect, useRef, useState } from 'react';
+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,
+  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 initialValues = {
+    node: node.name,
+    materializationName: materialization.name,
+    partitionValues: {},
+  };
+
+  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 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]],
+        };
+      }),
+    );
+    if (response.status === 200 || response.status === 201) {
+      setStatus({ success: 'Saved!' });
+    } else {
+      setStatus({
+        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);
+    });
+  };
+
+  return (
+    <>
+      <button
+        className="edit_button add_button"
+        aria-label="AddBackfill"
+        tabIndex="0"
+        onClick={() => {
+          setPopoverAnchor(!popoverAnchor);
+        }}
+      >
+        <span className="add_button">+ Run</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%',
+          minWidth: '800px',
+        }}
+        ref={ref}
+      >
+        <Formik initialValues={initialValues} onSubmit={submitBackfill}>
+          {function Render({ isSubmitting, status, setFieldValue }) {
+            return (
+              <Form>
+                {displayMessageAfterSubmit(status)}
+                <h2>Run Backfill</h2>
+                <span data-testid="edit-partition">
+                  <label
+                    htmlFor="materializationName"
+                    style={{ paddingBottom: '1rem' }}
+                  >
+                    Materialization Name
+                  </label>
+                  <Field
+                    as="select"
+                    name="materializationName"
+                    id="materializationName"
+                    disabled={true}
+                  >
+                    <option value={materialization?.name}>
+                      {materialization?.name}{' '}
+                    </option>
+                  </Field>
+                </span>
+                <br />
+                <br />
+                <label htmlFor="partition" style={{ paddingBottom: '1rem' }}>
+                  Partition
+                </label>
+                {node.columns
+                  .filter(col => col.partition !== null)
+                  .map(col => {
+                    return (
+                      <PartitionValueForm
+                        col={col}
+                        materialization={materialization}
+                        key={col.name}
+                      />
+                    );
+                  })}
+                <br />
+                <button
+                  className="add_node"
+                  type="submit"
+                  aria-label="SaveEditColumn"
+                  aria-hidden="false"
+                  disabled={isSubmitting}
+                >
+                  {isSubmitting ? <LoadingIcon /> : 'Save'}
+                </button>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,222 @@
+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 { displayMessageAfterSubmit, labelize } from '../../../utils/form';
+import { ConfigField } from './MaterializationConfigField';
+import LoadingIcon from '../../icons/LoadingIcon';
+
+export default function AddMaterializationPopover({ node, onSubmit }) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [popoverAnchor, setPopoverAnchor] = useState(false);
+  const [options, setOptions] = useState([]);
+  const [jobs, setJobs] = useState([]);
+
+  const timePartitionColumns = node.columns.filter(col => col.partition);
+
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const options = await djClient.materializationInfo();
+      setOptions(options);
+      const allowedJobs = options.job_types?.filter(job =>
+        job.allowed_node_types.includes(node.type),
+      );
+      setJobs(allowedJobs);
+    };
+    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 materialize = async (values, setStatus) => {
+    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 } =
+      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();
+    } else {
+      setStatus({
+        failure: `${json.message}`,
+      });
+    }
+  };
+
+  const configureMaterialization = async (
+    values,
+    { setSubmitting, setStatus },
+  ) => {
+    await materialize(values, setStatus).then(_ => {
+      window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+      setSubmitting(false);
+    });
+  };
+
+  return (
+    <>
+      <button
+        className="edit_button"
+        aria-label="AddMaterialization"
+        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,
+            job_type: node?.type === 'cube' ? 'druid_cube' : 'spark_sql',
+            strategy:
+              timePartitionColumns.length == 1 ? 'incremental_time' : 'full',
+            schedule: '@daily',
+            lookback_window: '1 DAY',
+            spark_config: {
+              'spark.executor.memory': '16g',
+              'spark.memory.fraction': '0.3',
+            },
+          }}
+          onSubmit={configureMaterialization}
+        >
+          {function Render({ isSubmitting, status, setFieldValue }) {
+            return (
+              <Form>
+                <h2>Configure Materialization for the Latest Node Version</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_cube'} value={'druid_cube'}>
+                          Druid
+                        </option>
+                      </>
+                    </Field>
+                    <br />
+                    <br />
+                  </span>
+                ) : (
+                  ''
+                )}
+                <input
+                  hidden={true}
+                  name="node"
+                  value={node?.name}
+                  readOnly={true}
+                />
+                <span data-testid="edit-partition">
+                  <label htmlFor="strategy">Strategy</label>
+                  <Field as="select" name="strategy" id="strategy">
+                    <>
+                      <option key={'full'} value={'full'}>
+                        Full
+                      </option>
+                      <option
+                        key={'incremental_time'}
+                        value={'incremental_time'}
+                      >
+                        Incremental Time
+                      </option>
+                    </>
+                  </Field>
+                </span>
+                <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="lookback_window">Lookback Window</label>
+                  <Field
+                    type="text"
+                    name="lookback_window"
+                    id="lookback_window"
+                    placeholder="1 DAY"
+                    default="1 DAY"
+                  />
+                </div>
+                <br />
+                <ConfigField
+                  value={{
+                    'spark.executor.memory': '16g',
+                    'spark.memory.fraction': '0.3',
+                  }}
+                />
+                <div
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                    marginTop: '20px',
+                  }}
+                >
+                  <button
+                    className="add_node"
+                    type="submit"
+                    aria-label="SaveEditColumn"
+                    aria-hidden="false"
+                    disabled={isSubmitting}
+                  >
+                    {isSubmitting ? <LoadingIcon /> : 'Save'}
+                  </button>
+                </div>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,67 @@
+import TableIcon from '../../icons/TableIcon';
+
+export default function AvailabilityStateBlock({ availability }) {
+  return (
+    <table
+      className="card-inner-table table"
+      aria-label="Availability"
+      aria-hidden="false"
+      style={{ marginBottom: '20px' }}
+    >
+      <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
+        <tr>
+          <th className="text-start">Output Dataset</th>
+          <th>Valid Through</th>
+          <th>Partitions</th>
+          <th>Links</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>
+            <div className={`table__full`} key={availability.table}>
+              <div className="table__header">
+                <TableIcon />{' '}
+                <span className={`entity-info`}>
+                  {availability.catalog + '.' + availability.schema_}
+                </span>
+              </div>
+              <div className={`table__body upstream_tables`}>
+                <a href={availability.url}>{availability.table}</a>
+              </div>
+            </div>
+          </td>
+          <td>{new Date(availability.valid_through_ts).toISOString()}</td>
+          <td>
+            <span
+              className={`badge partition_value`}
+              style={{ fontSize: '100%' }}
+            >
+              <span className={`badge partition_value_highlight`}>
+                {availability.min_temporal_partition?.join(', ') || 'N/A'}
+              </span>
+              to
+              <span className={`badge partition_value_highlight`}>
+                {availability.max_temporal_partition?.join(', ') || 'N/A'}
+              </span>
+            </span>
+          </td>
+          <td>
+            {availability.links &&
+            Object.keys(availability.links).length > 0 ? (
+              Object.entries(availability.links).map(([key, value]) => (
+                <div key={key}>
+                  <a href={value} target="_blank" rel="noreferrer">
+                    {key}
+                  </a>
+                </div>
+              ))
+            ) : (
+              <></>
+            )}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+}

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

@@ -0,0 +1,94 @@
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { useEffect, useRef, useState } from 'react';
+import { nightOwl } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import PythonIcon from '../../icons/PythonIcon';
+
+export default function ClientCodePopover({ code }) {
+  const [showModal, setShowModal] = useState(false);
+  const modalRef = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (modalRef.current && !modalRef.current.contains(event.target)) {
+        setShowModal(false);
+      }
+    };
+
+    if (showModal) {
+      document.addEventListener('mousedown', handleClickOutside);
+    } else {
+      document.removeEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [showModal]);
+
+  return (
+    <>
+      <button
+        className="button-3"
+        onClick={() => setShowModal(true)}
+        style={{ height: '2.5rem' }}
+      >
+        <PythonIcon /> See Python
+      </button>
+
+      {showModal && (
+        <div
+          className="modal-backdrop fade in"
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: '100vw',
+            height: '100vh',
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            zIndex: 9999,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <div
+            className="centerPopover"
+            ref={modalRef}
+            style={{
+              position: 'relative',
+              maxWidth: '80%',
+              width: '600px',
+              maxHeight: '80vh',
+              overflowY: 'auto',
+              padding: '1.5rem',
+              background: '#fff',
+              borderRadius: '10px',
+              boxShadow: '0 3px 10px rgba(0, 0, 0, 0.3)',
+            }}
+          >
+            <button
+              onClick={() => setShowModal(false)}
+              style={{
+                position: 'absolute',
+                top: '1rem',
+                right: '1rem',
+                background: 'none',
+                border: 'none',
+                fontSize: '1.5rem',
+                cursor: 'pointer',
+                color: '#999',
+              }}
+              aria-label="Close modal"
+            >
+              ×
+            </button>
+            <h2>Python Client Code</h2>
+            <SyntaxHighlighter language="python" style={nightOwl}>
+              {code}
+            </SyntaxHighlighter>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,86 @@
+import { useContext, useEffect, useState } from 'react';
+import * as React from 'react';
+import DJClientContext from '../../providers/djclient';
+import CreatableSelect from 'react-select/creatable';
+
+export default function DimensionFilter({ dimension, onChange }) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [dimensionValues, setDimensionValues] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const dimensionNode = await djClient.node(dimension.metadata.node_name);
+
+      // Only include the primary keys as filterable dimensions for now, until we figure out how
+      // to build a manageable UI experience around all dimensional attributes
+      if (dimensionNode && dimensionNode.type === 'dimension') {
+        const primaryKey =
+          dimensionNode.name +
+          '.' +
+          dimensionNode.columns
+            .filter(col =>
+              col.attributes.some(
+                attr => attr.attribute_type.name === 'primary_key',
+              ),
+            )
+            .map(col => col.name);
+        const label =
+          dimensionNode.name +
+          '.' +
+          dimensionNode.columns
+            .filter(col =>
+              col.attributes.some(attr => attr.attribute_type.name === 'label'),
+            )
+            .map(col => col.name);
+
+        const data = await djClient.nodeData(dimension.metadata.node_name);
+        /* istanbul ignore if */
+        if (dimensionNode && data.results && data.results.length > 0) {
+          const columnNames = data.results[0].columns.map(
+            column => column.semantic_entity,
+          );
+          const dimValues = data.results[0].rows.map(row => {
+            const rowData = { value: '', label: '' };
+            row.forEach((value, index) => {
+              if (columnNames[index] === primaryKey) {
+                rowData.value = value;
+                if (rowData.label === '') {
+                  rowData.label = value;
+                }
+              } else if (columnNames[index] === label) {
+                rowData.label = value;
+              }
+            });
+            return rowData;
+          });
+          setDimensionValues(dimValues);
+        }
+      }
+    };
+    fetchData().catch(console.error);
+  }, [dimension.metadata.node_name, djClient]);
+
+  return (
+    <div key={dimension.metadata.node_name}>
+      {dimension.label.split('[').slice(0)[0]} (
+      {
+        <a href={`/nodes/${dimension.metadata.node_name}`}>
+          {dimension.metadata.node_display_name}
+        </a>
+      }
+      )
+      <CreatableSelect
+        name="dimensions"
+        options={dimensionValues}
+        isMulti
+        isClearable
+        onChange={event => {
+          onChange({
+            dimension: dimension.value,
+            values: event,
+          });
+        }}
+      />
+    </div>
+  );
+}