datajunction-ui 0.0.1-a1

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

@@ -0,0 +1,233 @@
+import { useEffect, useState } from 'react';
+import ClientCodePopover from './ClientCodePopover';
+import TableIcon from '../../icons/TableIcon';
+import AddMaterializationPopover from './AddMaterializationPopover';
+import * as React from 'react';
+import AddBackfillPopover from './AddBackfillPopover';
+
+const cronstrue = require('cronstrue');
+
+export default function NodeMaterializationTab({ node, djClient }) {
+  const [materializations, setMaterializations] = useState([]);
+  useEffect(() => {
+    const fetchData = async () => {
+      if (node) {
+        const data = await djClient.materializations(node.name);
+        setMaterializations(data);
+      }
+    };
+    fetchData().catch(console.error);
+  }, [djClient, node]);
+  //
+  // const rangePartition = partition => {
+  //   return (
+  //     <div>
+  //       <span className="badge partition_value">
+  //         <span className="badge partition_value">{partition.range[0]}</span>to
+  //         <span className="badge partition_value">{partition.range[1]}</span>
+  //       </span>
+  //     </div>
+  //   );
+  // };
+
+  const partitionColumnsMap = node
+    ? Object.fromEntries(
+        node?.columns
+          .filter(col => col.partition !== null)
+          .map(col => [col.name, col.display_name]),
+      )
+    : {};
+  const cron = materialization => {
+    var parsedCron = '';
+    try {
+      parsedCron = cronstrue.toString(materialization.schedule);
+    } catch (e) {}
+    return parsedCron;
+  };
+
+  const materializationRows = materializations => {
+    return materializations.map(materialization => (
+      <tr key={materialization.name}>
+        <td className="text-start node_name">
+          <span className={`badge cron`}>{materialization.schedule}</span>
+          <div className={`cron-description`}>{cron(materialization)} </div>
+        </td>
+        <td>
+          {materialization.engine.name}
+          <br />
+          {materialization.engine.version}
+          <ClientCodePopover code={materialization.clientCode} />
+        </td>
+        <td>
+          {node.columns
+            .filter(col => col.partition !== null)
+            .map(column => {
+              return (
+                <div className="partition__full" key={column.name}>
+                  <div className="partition__header">{column.display_name}</div>
+                  <div className="partition__body">
+                    <code>{column.name}</code>
+                    <span className="badge partition_value">
+                      {column.partition.type_}
+                    </span>
+                  </div>
+                </div>
+              );
+            })}
+        </td>
+        <td>
+          {materialization.output_tables.map(table => (
+            <div className={`table__full`} key={table}>
+              <div className="table__header">
+                <TableIcon />{' '}
+                <span className={`entity-info`}>
+                  {table.split('.')[0] + '.' + table.split('.')[1]}
+                </span>
+              </div>
+              <div className={`table__body upstream_tables`}>
+                {table.split('.')[2]}
+              </div>
+            </div>
+          ))}
+        </td>
+        <td>
+          {materialization.backfills.map(backfill => (
+            <a href={backfill.urls[0]} className="partitionLink">
+              <div className="partition__full" key={backfill.spec.column_name}>
+                <div className="partition__header">
+                  {partitionColumnsMap[backfill.spec.column_name]}
+                </div>
+                <div className="partition__body">
+                  <span className="badge partition_value">
+                    {backfill.spec.range[0]}
+                  </span>
+                  to
+                  <span className="badge partition_value">
+                    {backfill.spec.range[1]}
+                  </span>
+                </div>
+              </div>
+            </a>
+          ))}
+          <AddBackfillPopover node={node} materialization={materialization} />
+        </td>
+        <td>
+          {materialization.urls.map((url, idx) => (
+            <a href={url} key={`url-${idx}`}>
+              [{idx + 1}]
+            </a>
+          ))}
+        </td>
+      </tr>
+    ));
+  };
+  return (
+    <>
+      <div className="table-vertical">
+        <div>
+          <h2>Materializations</h2>
+          <AddMaterializationPopover node={node} />
+          {materializations.length > 0 ? (
+            <table
+              className="card-inner-table table"
+              aria-label="Materializations"
+              aria-hidden="false"
+            >
+              <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
+                <tr>
+                  <th className="text-start">Schedule</th>
+                  <th>Engine</th>
+                  <th>Partitions</th>
+                  <th>Output Tables</th>
+                  <th>Backfills</th>
+                  <th>URLs</th>
+                </tr>
+              </thead>
+              <tbody>
+                {materializationRows(
+                  materializations.filter(
+                    materialization =>
+                      !(
+                        materialization.name === 'default' &&
+                        node.type === 'cube'
+                      ),
+                  ),
+                )}
+              </tbody>
+            </table>
+          ) : (
+            <div className="message alert" style={{ marginTop: '10px' }}>
+              No materialization workflows configured for this node.
+            </div>
+          )}
+        </div>
+        <div>
+          <h2>Materialized Datasets</h2>
+          {node && node.availability !== null ? (
+            <table
+              className="card-inner-table table"
+              aria-label="Availability"
+              aria-hidden="false"
+            >
+              <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
+                <tr>
+                  <th className="text-start">Catalog</th>
+                  <th>Schema</th>
+                  <th>Table</th>
+                  <th>Valid Through</th>
+                  <th>Partitions</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>{node.availability.schema_}</td>
+                  <td>
+                    {
+                      <div
+                        className={`table__full`}
+                        key={node.availability.table}
+                      >
+                        <div className="table__header">
+                          <TableIcon />{' '}
+                          <span className={`entity-info`}>
+                            {node.availability.catalog +
+                              '.' +
+                              node.availability.schema_}
+                          </span>
+                        </div>
+                        <div className={`table__body upstream_tables`}>
+                          <a href={node.availability.url}>
+                            {node.availability.table}
+                          </a>
+                        </div>
+                      </div>
+                    }
+                  </td>
+                  <td>{node.availability.valid_through_ts}</td>
+                  <td>
+                    <span
+                      className={`badge partition_value`}
+                      style={{ fontSize: '100%' }}
+                    >
+                      <span className={`badge partition_value_highlight`}>
+                        {node.availability.min_temporal_partition}
+                      </span>
+                      to
+                      <span className={`badge partition_value_highlight`}>
+                        {node.availability.max_temporal_partition}
+                      </span>
+                    </span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          ) : (
+            <div className="message alert" style={{ marginTop: '10px' }}>
+              No materialized datasets available for this node.
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,82 @@
+import { useContext, useEffect, useState } from 'react';
+import Select from 'react-select';
+import DJClientContext from '../../providers/djclient';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { foundation } from 'react-syntax-highlighter/src/styles/hljs';
+
+const NodeSQLTab = djNode => {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [query, setQuery] = useState('');
+
+  const [selection, setSelection] = useState({
+    dimensions: [],
+    filters: [],
+  });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const query = await djClient.sql(djNode.djNode.name, selection);
+      setQuery(query.sql);
+    };
+    fetchData().catch(console.error);
+  }, [djClient, djNode.djNode.name, selection]);
+  const dimensionsList = djNode.djNode.dimensions
+    ? djNode.djNode.dimensions.map(dim => ({
+        value: dim.name,
+        label: dim.name + ` (${dim.type})`,
+      }))
+    : [''];
+
+  const handleSubmit = event => {
+    event.preventDefault();
+  };
+
+  const handleChange = event => {
+    setSelection({ filters: [], dimensions: event.map(dim => dim.value) });
+  };
+
+  return (
+    <form
+      id="retrieve-sql"
+      name="retrieve-sql"
+      onSubmit={handleSubmit.bind(this)}
+    >
+      <div>
+        <h4>Group By</h4>
+        <Select
+          name="dimensions"
+          options={dimensionsList}
+          isMulti
+          isClearable
+          onChange={handleChange}
+        />
+        {/*<h4>Filters</h4>*/}
+        {/*<Select*/}
+        {/*  name="filter_name"*/}
+        {/*  options={dimensionsList}*/}
+        {/*  className="filters_attribute"*/}
+        {/*/>*/}
+        {/*<Select*/}
+        {/*  name="filter_operator"*/}
+        {/*  options={options}*/}
+        {/*  className="filters_attribute"*/}
+        {/*/>*/}
+        {/*<textarea name="filter_value" className="filters_attribute" />*/}
+
+        <div
+          style={{
+            width: window.innerWidth * 0.8,
+            marginTop: '2rem',
+          }}
+        >
+          <h6 className="mb-0 w-100">Query</h6>
+          <SyntaxHighlighter language="sql" style={foundation}>
+            {query}
+          </SyntaxHighlighter>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+export default NodeSQLTab;

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

@@ -0,0 +1,28 @@
+import { Component } from 'react';
+import ValidIcon from '../../icons/ValidIcon';
+import InvalidIcon from '../../icons/InvalidIcon';
+
+export default class NodeStatus extends Component {
+  render() {
+    const { node } = this.props;
+    return (
+      <>
+        {node?.status === 'valid' ? (
+          <span
+            className="status__valid status"
+            style={{ alignContent: 'center' }}
+          >
+            <ValidIcon />
+          </span>
+        ) : (
+          <span
+            className="status__invalid status"
+            style={{ alignContent: 'center' }}
+          >
+            <InvalidIcon />
+          </span>
+        )}
+      </>
+    );
+  }
+}

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

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+import * as React from 'react';
+
+export default function NodesWithDimension({ node, djClient }) {
+  const [availableNodes, setAvailableNodes] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const data = await djClient.nodesWithDimension(node.name);
+      setAvailableNodes(data);
+    };
+    fetchData().catch(console.error);
+  }, [djClient, node]);
+  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">Name</th>
+            <th>Type</th>
+          </tr>
+        </thead>
+        <tbody>
+          {availableNodes.map(node => (
+            <tr>
+              <td>
+                <a href={`/nodes/${node.name}`}>{node.display_name}</a>
+              </td>
+              <td>
+                <span
+                  className={'node_type__' + node.type + ' badge node_type'}
+                >
+                  {node.type}
+                </span>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

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

@@ -0,0 +1,153 @@
+import { useContext, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
+import DJClientContext from '../../providers/djclient';
+import { Field, Form, Formik } from 'formik';
+import { FormikSelect } from '../AddEditNodePage/FormikSelect';
+import EditIcon from '../../icons/EditIcon';
+import { displayMessageAfterSubmit, labelize } from '../../../utils/form';
+
+export default function PartitionColumnPopover({ column, node, 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 savePartition = async (
+    { node, column, partition_type, format, granularity },
+    { setSubmitting, setStatus },
+  ) => {
+    setSubmitting(false);
+    const response = await djClient.setPartition(
+      node,
+      column,
+      partition_type,
+      format,
+      granularity,
+    );
+    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);
+        }}
+      >
+        <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,
+            partition_type: '',
+            format: 'yyyyMMdd',
+            granularity: 'day',
+          }}
+          onSubmit={savePartition}
+        >
+          {function Render({ values, isSubmitting, status, setFieldValue }) {
+            return (
+              <Form>
+                {displayMessageAfterSubmit(status)}
+                <span data-testid="edit-partition">
+                  <label htmlFor="react-select-3-input">Partition Type</label>
+                  <Field
+                    as="select"
+                    name="partition_type"
+                    id="partitionType"
+                    placeholder="Partition Type"
+                  >
+                    <option value=""></option>
+                    <option value="temporal">Temporal</option>
+                    <option value="categorical">Categorical</option>
+                  </Field>
+                </span>
+                <input
+                  hidden={true}
+                  name="column"
+                  value={column.name}
+                  readOnly={true}
+                />
+                <input
+                  hidden={true}
+                  name="node"
+                  value={node.name}
+                  readOnly={true}
+                />
+                <br />
+                <br />
+                {values.partition_type === 'temporal' ? (
+                  <>
+                    <label htmlFor="react-select-3-input">
+                      Partition Format
+                    </label>
+                    <Field
+                      type="text"
+                      name="format"
+                      id="partitionFormat"
+                      placeholder="Optional temporal partition format (ex: yyyyMMdd)"
+                    />
+                    <br />
+                    <br />
+                    <label htmlFor="react-select-3-input">
+                      Partition Granularity
+                    </label>
+                    <Field
+                      as="select"
+                      name="granularity"
+                      id="partitionGranularity"
+                      placeholder="Granularity"
+                    >
+                      <option value="day">Day</option>
+                      <option value="hour">Hour</option>
+                    </Field>
+                  </>
+                ) : (
+                  ''
+                )}
+                <button
+                  className="add_node"
+                  type="submit"
+                  aria-label="SaveEditColumn"
+                  aria-hidden="false"
+                >
+                  Save
+                </button>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { render, fireEvent, waitFor, screen } from '@testing-library/react';
+import EditColumnPopover from '../EditColumnPopover';
+import DJClientContext from '../../../providers/djclient';
+import AddBackfillPopover from '../AddBackfillPopover';
+import { mocks } from '../../../../mocks/mockNodes';
+
+const mockDjClient = {
+  DataJunctionAPI: {
+    runBackfill: jest.fn(),
+  },
+};
+
+describe('<AddBackfillPopover />', () => {
+  it('renders correctly and handles form submission', async () => {
+    // Mock onSubmit function
+    const onSubmitMock = jest.fn();
+
+    mockDjClient.DataJunctionAPI.runBackfill.mockReturnValue({
+      status: 201,
+      json: { message: '' },
+    });
+
+    // Render the component
+    const { getByLabelText, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <AddBackfillPopover
+          node={mocks.mockMetricNode}
+          materialization={mocks.nodeMaterializations}
+          onSubmit={onSubmitMock}
+        />
+      </DJClientContext.Provider>,
+    );
+
+    // Open the popover
+    fireEvent.click(getByLabelText('AddBackfill'));
+
+    fireEvent.click(getByText('Save'));
+    getByText('Save').click();
+
+    // Expect setAttributes to be called
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.runBackfill).toHaveBeenCalled();
+      expect(getByText('Saved!')).toBeInTheDocument();
+    });
+  });
+});

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import ClientCodePopover from '../ClientCodePopover';
+import userEvent from '@testing-library/user-event';
+
+describe('<ClientCodePopover />', () => {
+  const defaultProps = {
+    code: "print('Hello, World!')",
+  };
+
+  it('toggles the code popover visibility when the button is clicked', async () => {
+    render(<ClientCodePopover {...defaultProps} />);
+
+    const button = screen.getByRole('button', 'code-button');
+
+    // Initially, the popover should be hidden
+    expect(screen.getByRole('dialog', { hidden: true })).toHaveStyle(
+      'display: none',
+    );
+
+    // Clicking the button should display the popover
+    fireEvent.click(button);
+    expect(screen.getByRole('dialog', { hidden: true })).not.toHaveStyle(
+      'display: none',
+    );
+
+    // Clicking the button again should hide the popover
+    fireEvent.click(button);
+    expect(screen.getByRole('dialog', { hidden: true })).toHaveStyle(
+      'display: none',
+    );
+
+    // Trigger onClose by pressing <escape>
+    userEvent.keyboard('{Escape}');
+    // fireEvent.click(screen.getByTestId('body').firstChild());
+    await waitFor(() => {
+      expect(screen.getByRole('dialog', { hidden: true })).toHaveStyle(
+        'display: none',
+      );
+    });
+  });
+
+  it('renders the provided code within the SyntaxHighlighter', () => {
+    render(<ClientCodePopover {...defaultProps} />);
+    expect(screen.getByRole('dialog', { hidden: true })).toHaveTextContent(
+      defaultProps.code,
+    );
+  });
+});