datajunction-ui 0.0.1-a1

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/ClientCodePopover.jsx

@@ -0,0 +1,46 @@
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { useEffect, useRef, useState } from 'react';
+import { nightOwl } from 'react-syntax-highlighter/src/styles/hljs';
+import PythonIcon from '../../icons/PythonIcon';
+
+export default function ClientCodePopover({ code }) {
+  const [codeAnchor, setCodeAnchor] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setCodeAnchor(false);
+      }
+    };
+    document.addEventListener('click', handleClickOutside, true);
+    return () => {
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  }, [setCodeAnchor]);
+
+  return (
+    <>
+      <button
+        className="code-button"
+        aria-label="code-button"
+        tabIndex="0"
+        height="45px"
+        onClick={() => setCodeAnchor(!codeAnchor)}
+      >
+        <PythonIcon />
+      </button>
+      <div
+        id={`node-create-code`}
+        role="dialog"
+        aria-label="client-code"
+        style={{ display: codeAnchor === false ? 'none' : 'block' }}
+        ref={ref}
+      >
+        <SyntaxHighlighter language="python" style={nightOwl}>
+          {code}
+        </SyntaxHighlighter>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,116 @@
+import { useContext, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
+import DJClientContext from '../../providers/djclient';
+import { Form, Formik } from 'formik';
+import { FormikSelect } from '../AddEditNodePage/FormikSelect';
+import EditIcon from '../../icons/EditIcon';
+import { displayMessageAfterSubmit, labelize } from '../../../utils/form';
+
+export default function EditColumnPopover({ column, node, options, 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 saveAttributes = async (
+    { node, column, attributes },
+    { setSubmitting, setStatus },
+  ) => {
+    setSubmitting(false);
+    const response = await djClient.setAttributes(node, column, attributes);
+    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="EditColumn"
+        tabIndex="0"
+        onClick={() => {
+          setPopoverAnchor(!popoverAnchor);
+        }}
+      >
+        <EditIcon />
+      </button>
+      <div
+        className="popover"
+        role="dialog"
+        aria-label="client-code"
+        style={{ display: popoverAnchor === false ? 'none' : 'block' }}
+        ref={ref}
+      >
+        <Formik
+          initialValues={{
+            column: column.name,
+            node: node.name,
+            attributes: [],
+          }}
+          onSubmit={saveAttributes}
+        >
+          {function Render({ isSubmitting, status, setFieldValue }) {
+            return (
+              <Form>
+                {displayMessageAfterSubmit(status)}
+                <span data-testid="edit-attributes">
+                  <FormikSelect
+                    selectOptions={options}
+                    formikFieldName="attributes"
+                    placeholder="Select column attributes"
+                    className=""
+                    defaultValue={column.attributes.map(attr => {
+                      return {
+                        value: attr.attribute_type.name,
+                        label: labelize(attr.attribute_type.name),
+                      };
+                    })}
+                    isMulti={true}
+                  />
+                </span>
+                <input
+                  hidden={true}
+                  name="column"
+                  value={column.name}
+                  readOnly={true}
+                />
+                <input
+                  hidden={true}
+                  name="node"
+                  value={node.name}
+                  readOnly={true}
+                />
+                <button
+                  className="add_node"
+                  type="submit"
+                  aria-label="SaveEditColumn"
+                  aria-hidden="false"
+                >
+                  Save
+                </button>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,149 @@
+import { useContext, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
+import DJClientContext from '../../providers/djclient';
+import { Form, Formik } from 'formik';
+import { FormikSelect } from '../AddEditNodePage/FormikSelect';
+import EditIcon from '../../icons/EditIcon';
+import { displayMessageAfterSubmit } from '../../../utils/form';
+
+export default function LinkDimensionPopover({
+  column,
+  node,
+  options,
+  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 columnDimension = column.dimension;
+
+  const handleSubmit = async (
+    { node, column, dimension },
+    { setSubmitting, setStatus },
+  ) => {
+    setSubmitting(false);
+    if (columnDimension?.name && dimension === 'Remove') {
+      await unlinkDimension(node, column, columnDimension?.name, setStatus);
+    } else {
+      await linkDimension(node, column, dimension, setStatus);
+    }
+    onSubmit();
+  };
+
+  const linkDimension = async (node, column, dimension, setStatus) => {
+    const response = await djClient.linkDimension(node, column, dimension);
+    if (response.status === 200 || response.status === 201) {
+      setStatus({ success: 'Saved!' });
+    } else {
+      setStatus({
+        failure: `${response.json.message}`,
+      });
+    }
+  };
+
+  const unlinkDimension = async (node, column, currentDimension, setStatus) => {
+    const response = await djClient.unlinkDimension(
+      node,
+      column,
+      currentDimension,
+    );
+    if (response.status === 200 || response.status === 201) {
+      setStatus({ success: 'Removed dimension link!' });
+    } else {
+      setStatus({
+        failure: `${response.json.message}`,
+      });
+    }
+  };
+
+  return (
+    <>
+      <button
+        className="edit_button"
+        aria-label="LinkDimension"
+        tabIndex="0"
+        onClick={() => {
+          setPopoverAnchor(!popoverAnchor);
+        }}
+      >
+        <EditIcon />
+      </button>
+      <div
+        className="popover"
+        role="dialog"
+        aria-label="client-code"
+        style={{ display: popoverAnchor === false ? 'none' : 'block' }}
+        ref={ref}
+      >
+        <Formik
+          initialValues={{
+            column: column.name,
+            node: node.name,
+            dimension: '',
+            currentDimension: column.dimension?.name,
+          }}
+          onSubmit={handleSubmit}
+        >
+          {function Render({ isSubmitting, status, setFieldValue }) {
+            return (
+              <Form>
+                {displayMessageAfterSubmit(status)}
+                <span data-testid="link-dimension">
+                  <FormikSelect
+                    selectOptions={[
+                      { value: 'Remove', label: '[Remove Dimension]' },
+                    ].concat(options)}
+                    formikFieldName="dimension"
+                    placeholder="Select dimension to link"
+                    className=""
+                    defaultValue={
+                      column.dimension
+                        ? {
+                            value: column.dimension.name,
+                            label: column.dimension.name,
+                          }
+                        : ''
+                    }
+                  />
+                </span>
+                <input
+                  hidden={true}
+                  name="column"
+                  value={column.name}
+                  readOnly={true}
+                />
+                <input
+                  hidden={true}
+                  name="node"
+                  value={node.name}
+                  readOnly={true}
+                />
+                <button
+                  className="add_node"
+                  type="submit"
+                  aria-label="SaveLinkDimension"
+                  aria-hidden="false"
+                >
+                  Save
+                </button>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,200 @@
+import { useEffect, useState } from 'react';
+import ClientCodePopover from './ClientCodePopover';
+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([]);
+  const [dimensions, setDimensions] = useState([]);
+  const [columns, setColumns] = useState([]);
+  useEffect(() => {
+    const fetchData = async () => {
+      setColumns(await djClient.columns(node));
+    };
+    fetchData().catch(console.error);
+  }, [djClient, node]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const attributes = await djClient.attributes();
+      const options = attributes.map(attr => {
+        return { value: attr.name, label: labelize(attr.name) };
+      });
+      setAttributes(options);
+    };
+    fetchData().catch(console.error);
+  }, [djClient]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const dimensions = await djClient.dimensions();
+      const options = dimensions.map(name => {
+        return { value: name, label: name };
+      });
+      setDimensions(options);
+    };
+    fetchData().catch(console.error);
+  }, [djClient]);
+
+  const showColumnAttributes = col => {
+    return col.attributes.map((attr, idx) => (
+      <span
+        className="node_type__dimension badge node_type"
+        key={`col-attr-${col.name}-${idx}`}
+      >
+        {attr.attribute_type.name.replace(/_/, ' ')}
+      </span>
+    ));
+  };
+
+  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}>
+        <td
+          className="text-start"
+          role="columnheader"
+          aria-label="ColumnName"
+          aria-hidden="false"
+        >
+          {col.name}
+        </td>
+        <td>
+          <span
+            className=""
+            role="columnheader"
+            aria-label="ColumnDisplayName"
+            aria-hidden="false"
+          >
+            {col.display_name}
+          </span>
+        </td>
+        <td>
+          <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>
+          {showColumnPartition(col)}
+          <PartitionColumnPopover
+            column={col}
+            node={node}
+            onSubmit={async () => {
+              const res = await djClient.node(node.name);
+              setColumns(res.columns);
+            }}
+          />
+        </td>
+      </tr>
+    ));
+  };
+
+  return (
+    <div className="table-responsive">
+      <table className="card-inner-table table">
+        <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>
+            {node?.type !== 'cube' ? (
+              <>
+                <th>Linked Dimension</th>
+                <th>Attributes</th>
+              </>
+            ) : (
+              ''
+            )}
+            <th>Partition</th>
+          </tr>
+        </thead>
+        <tbody>{columnList(columns)}</tbody>
+      </table>
+    </div>
+  );
+}