datajunction-ui 0.0.1-rc.9 → 0.0.2-0.dev1

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

@@ -0,0 +1,367 @@
+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 AddItemIcon from '../../icons/AddItemIcon';
+import { displayMessageAfterSubmit } from '../../../utils/form';
+import LoadingIcon from '../../icons/LoadingIcon';
+import CodeMirror from '@uiw/react-codemirror';
+import { langs } from '@uiw/codemirror-extensions-langs';
+
+export default function AddComplexDimensionLinkPopover({
+  node,
+  dimensions,
+  existingLink = null,
+  isEditMode = false,
+  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 joinTypeOptions = [
+    { value: 'left', label: 'LEFT' },
+    { value: 'right', label: 'RIGHT' },
+    { value: 'inner', label: 'INNER' },
+    { value: 'full', label: 'FULL' },
+    { value: 'cross', label: 'CROSS' },
+  ];
+
+  const joinCardinalityOptions = [
+    { value: 'one_to_one', label: 'ONE TO ONE' },
+    { value: 'one_to_many', label: 'ONE TO MANY' },
+    { value: 'many_to_one', label: 'MANY TO ONE' },
+    { value: 'many_to_many', label: 'MANY TO MANY' },
+  ];
+
+  const handleSubmit = async (values, { setSubmitting, setStatus }) => {
+    try {
+      // If editing, remove the old link first
+      if (isEditMode && existingLink) {
+        await djClient.removeComplexDimensionLink(
+          node.name,
+          existingLink.dimension.name,
+          existingLink.role,
+        );
+      }
+
+      // Add the new/updated link
+      const response = await djClient.addComplexDimensionLink(
+        node.name,
+        values.dimensionNode,
+        values.joinOn.trim(),
+        values.joinType || 'left',
+        values.joinCardinality || 'many_to_one',
+        values.role?.trim() || null,
+      );
+
+      if (response.status === 200 || response.status === 201) {
+        setStatus({
+          success: `Complex dimension link ${
+            isEditMode ? 'updated' : 'added'
+          } successfully!`,
+        });
+        setTimeout(() => {
+          setPopoverAnchor(false);
+          window.location.reload();
+        }, 1000);
+      } else {
+        setStatus({
+          failure:
+            response.json?.message ||
+            `Failed to ${isEditMode ? 'update' : 'add'} link`,
+        });
+      }
+    } catch (error) {
+      setStatus({ failure: error.message });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <>
+      {isEditMode ? (
+        <button
+          onClick={() => setPopoverAnchor(!popoverAnchor)}
+          style={{
+            padding: '0.25rem 0.5rem',
+            fontSize: '0.75rem',
+            background: '#007bff',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: 'pointer',
+            marginRight: '0.5rem',
+          }}
+        >
+          Edit
+        </button>
+      ) : (
+        <button
+          className="edit_button"
+          aria-label="AddComplexDimensionLinkTogglePopover"
+          tabIndex="0"
+          onClick={() => setPopoverAnchor(!popoverAnchor)}
+          title="Add complex dimension link with custom SQL"
+          style={{
+            marginLeft: '0.5rem',
+            padding: '0.25rem 0.5rem',
+            fontSize: '0.875rem',
+          }}
+        >
+          <AddItemIcon />
+        </button>
+      )}
+      {popoverAnchor && (
+        <>
+          {/* Backdrop overlay */}
+          <div
+            style={{
+              position: 'fixed',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              backgroundColor: 'rgba(0, 0, 0, 0.5)',
+              zIndex: 1000,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: '2rem',
+            }}
+            onClick={() => setPopoverAnchor(false)}
+          >
+            {/* Modal */}
+            <div
+              role="dialog"
+              aria-label="AddComplexDimensionLinkPopover"
+              ref={ref}
+              onClick={e => e.stopPropagation()}
+              style={{
+                backgroundColor: 'white',
+                borderRadius: '8px',
+                boxShadow: '0 4px 20px rgba(0, 0, 0, 0.15)',
+                width: '65%',
+                maxWidth: '100%',
+                maxHeight: '100%',
+                overflow: 'visible',
+                padding: '1.5rem',
+                textTransform: 'none',
+                fontWeight: 'normal',
+                position: 'relative',
+                zIndex: 1000,
+              }}
+            >
+              <div
+                style={{ maxHeight: 'calc(85vh - 4rem)', overflowY: 'auto' }}
+              >
+                <Formik
+                  initialValues={{
+                    dimensionNode: existingLink?.dimension.name || '',
+                    joinType: existingLink?.join_type || 'left',
+                    joinOn: existingLink?.join_sql || '',
+                    joinCardinality:
+                      existingLink?.join_cardinality || 'many_to_one',
+                    role: existingLink?.role || '',
+                  }}
+                  onSubmit={handleSubmit}
+                  validate={values => {
+                    const errors = {};
+                    if (!values.dimensionNode) {
+                      errors.dimensionNode = 'Required';
+                    }
+                    if (!values.joinOn) {
+                      errors.joinOn = 'Required';
+                    }
+                    return errors;
+                  }}
+                >
+                  {function Render({ isSubmitting, status, values }) {
+                    return (
+                      <Form>
+                        <h3
+                          style={{
+                            margin: '0 0 1rem 0',
+                            fontSize: '1.25rem',
+                            fontWeight: '600',
+                          }}
+                        >
+                          {isEditMode ? 'Edit' : 'Add'} Complex Dimension Link
+                        </h3>
+                        {displayMessageAfterSubmit(status)}
+
+                        <div style={{ marginBottom: '1rem' }}>
+                          <ErrorMessage name="dimensionNode" component="span" />
+                          <label htmlFor="dimensionNode">
+                            Dimension Node *
+                          </label>
+                          {isEditMode ? (
+                            <div
+                              style={{
+                                padding: '0.5rem',
+                                backgroundColor: '#f5f5f5',
+                                borderRadius: '4px',
+                                color: '#666',
+                              }}
+                            >
+                              {existingLink?.dimension.name}
+                              <small
+                                style={{
+                                  display: 'block',
+                                  marginTop: '0.25rem',
+                                  fontSize: '0.75rem',
+                                  color: '#999',
+                                }}
+                              >
+                                To link a different dimension node, remove this
+                                link and create a new one
+                              </small>
+                            </div>
+                          ) : (
+                            <FormikSelect
+                              selectOptions={dimensions}
+                              formikFieldName="dimensionNode"
+                              placeholder="Select dimension"
+                            />
+                          )}
+                        </div>
+
+                        <div
+                          style={{
+                            display: 'flex',
+                            gap: '1rem',
+                            marginBottom: '1rem',
+                          }}
+                        >
+                          <div style={{ flex: 1 }}>
+                            <label htmlFor="joinType">Join Type</label>
+                            <FormikSelect
+                              selectOptions={joinTypeOptions}
+                              formikFieldName="joinType"
+                              placeholder="Select join type"
+                              defaultValue={
+                                values.joinType
+                                  ? joinTypeOptions.find(
+                                      opt => opt.value === values.joinType,
+                                    )
+                                  : null
+                              }
+                            />
+                          </div>
+                          <div style={{ flex: 1 }}>
+                            <label htmlFor="joinCardinality">
+                              Join Cardinality
+                            </label>
+                            <FormikSelect
+                              selectOptions={joinCardinalityOptions}
+                              formikFieldName="joinCardinality"
+                              placeholder="Select join cardinality"
+                              defaultValue={
+                                values.joinCardinality
+                                  ? joinCardinalityOptions.find(
+                                      opt =>
+                                        opt.value === values.joinCardinality,
+                                    )
+                                  : null
+                              }
+                            />
+                          </div>
+                        </div>
+
+                        <div style={{ marginBottom: '1rem' }}>
+                          <ErrorMessage name="joinOn" component="span" />
+                          <label htmlFor="joinOn">Join SQL *</label>
+                          <small
+                            style={{ color: '#6c757d', fontSize: '0.75rem' }}
+                          >
+                            Specify the join condition
+                          </small>
+                          <Field name="joinOn">
+                            {({ field, form }) => (
+                              <div
+                                role="button"
+                                tabIndex={0}
+                                className="relative flex bg-[#282a36]"
+                              >
+                                <CodeMirror
+                                  id="joinOn"
+                                  name="joinOn"
+                                  extensions={[langs.sql()]}
+                                  value={field.value?.trim()}
+                                  placeholder="e.g., node_table.dimension_id = dimension_table.id"
+                                  width="100%"
+                                  height="150px"
+                                  style={{
+                                    fontSize: '14px',
+                                    textAlign: 'left',
+                                  }}
+                                  onChange={value => {
+                                    form.setFieldValue('joinOn', value);
+                                  }}
+                                />
+                              </div>
+                            )}
+                          </Field>
+                        </div>
+
+                        <div style={{ marginBottom: '1rem' }}>
+                          <label htmlFor="role">Role (Optional)</label>
+                          <Field
+                            type="text"
+                            name="role"
+                            id="role"
+                            placeholder="e.g., birth_date, registration_date"
+                            style={{
+                              width: '100%',
+                              padding: '0.5rem',
+                            }}
+                          />
+                          <small
+                            style={{ color: '#6c757d', fontSize: '0.75rem' }}
+                          >
+                            Optional role if linking the same dimension multiple
+                            times
+                          </small>
+                        </div>
+
+                        <button
+                          className="add_node"
+                          type="submit"
+                          aria-label="SaveComplexDimensionLink"
+                          disabled={isSubmitting}
+                          style={{ marginTop: '1rem' }}
+                        >
+                          {isSubmitting ? (
+                            <LoadingIcon />
+                          ) : isEditMode ? (
+                            'Save Changes'
+                          ) : (
+                            'Add Link'
+                          )}
+                        </button>
+                      </Form>
+                    );
+                  }}
+                </Formik>
+              </div>
+            </div>
+          </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>
+  );
+}