datajunction-ui 0.0.1-a1

package/src/app/pages/NamespacePage/__tests__/index.test.jsx

@@ -0,0 +1,217 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import DJClientContext from '../../../providers/djclient';
+import { NamespacePage } from '../index';
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+
+const mockDjClient = {
+  namespaces: jest.fn(),
+  namespace: jest.fn(),
+  addNamespace: jest.fn(),
+};
+
+describe('NamespacePage', () => {
+  const original = window.location;
+
+  const reloadFn = () => {
+    window.location.reload();
+  };
+
+  beforeAll(() => {
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: { reload: jest.fn() },
+    });
+  });
+
+  afterAll(() => {
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: original,
+    });
+  });
+
+  beforeEach(() => {
+    fetch.resetMocks();
+    mockDjClient.namespaces.mockResolvedValue([
+      {
+        namespace: 'common.one',
+        num_nodes: 3,
+      },
+      {
+        namespace: 'common.one.a',
+        num_nodes: 6,
+      },
+      {
+        namespace: 'common.one.b',
+        num_nodes: 17,
+      },
+      {
+        namespace: 'common.one.c',
+        num_nodes: 64,
+      },
+      {
+        namespace: 'default',
+        num_nodes: 41,
+      },
+      {
+        namespace: 'default.fruits',
+        num_nodes: 1,
+      },
+      {
+        namespace: 'default.fruits.citrus.lemons',
+        num_nodes: 1,
+      },
+      {
+        namespace: 'default.vegetables',
+        num_nodes: 2,
+      },
+    ]);
+    mockDjClient.namespace.mockResolvedValue([
+      {
+        name: 'testNode',
+        display_name: 'Test Node',
+        type: 'transform',
+        mode: 'active',
+        updated_at: new Date(),
+      },
+    ]);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('displays namespaces and renders nodes', async () => {
+    reloadFn();
+    const element = (
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <NamespacePage />
+      </DJClientContext.Provider>
+    );
+    render(
+      <MemoryRouter initialEntries={['/namespaces/test.namespace']}>
+        <Routes>
+          <Route path="namespaces/:namespace" element={element} />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.namespaces).toHaveBeenCalledTimes(1);
+      expect(screen.getByText('Namespaces')).toBeInTheDocument();
+
+      // check that it displays namespaces
+      expect(screen.getByText('common')).toBeInTheDocument();
+      expect(screen.getByText('one')).toBeInTheDocument();
+      expect(screen.getByText('fruits')).toBeInTheDocument();
+      expect(screen.getByText('vegetables')).toBeInTheDocument();
+
+      // check that it renders nodes
+      expect(screen.getByText('Test Node')).toBeInTheDocument();
+
+      // click to open and close tab
+      fireEvent.click(screen.getByText('common'));
+      fireEvent.click(screen.getByText('common'));
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('can add new namespace via add namespace popover', async () => {
+    mockDjClient.addNamespace.mockReturnValue({
+      status: 201,
+      json: {},
+    });
+    const element = (
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <NamespacePage />
+      </DJClientContext.Provider>
+    );
+    render(
+      <MemoryRouter initialEntries={['/namespaces/test.namespace']}>
+        <Routes>
+          <Route path="namespaces/:namespace" element={element} />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    // Find the button to toggle the add namespace popover
+    const addNamespaceToggle = screen.getByRole('button', {
+      name: 'AddNamespaceTogglePopover',
+    });
+    expect(addNamespaceToggle).toBeInTheDocument();
+
+    // Click the toggle and verify that the popover displays
+    fireEvent.click(addNamespaceToggle);
+    const addNamespacePopover = screen.getByRole('dialog', {
+      name: 'AddNamespacePopover',
+    });
+    expect(addNamespacePopover).toBeInTheDocument();
+
+    // Type in the new namespace
+    await userEvent.type(
+      screen.getByLabelText('Namespace'),
+      'some.random.namespace',
+    );
+
+    // Save
+    const saveNamespace = screen.getByRole('button', {
+      name: 'SaveNamespace',
+    });
+    await waitFor(() => {
+      fireEvent.click(saveNamespace);
+    });
+    expect(mockDjClient.addNamespace).toHaveBeenCalled();
+    expect(mockDjClient.addNamespace).toHaveBeenCalledWith(
+      'some.random.namespace',
+    );
+    expect(screen.getByText('Saved')).toBeInTheDocument();
+    expect(window.location.reload).toHaveBeenCalled();
+  });
+
+  it('can fail to add namespace', async () => {
+    mockDjClient.addNamespace.mockReturnValue({
+      status: 500,
+      json: { message: 'you failed' },
+    });
+    const element = (
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <NamespacePage />
+      </DJClientContext.Provider>
+    );
+    render(
+      <MemoryRouter initialEntries={['/namespaces/test.namespace']}>
+        <Routes>
+          <Route path="namespaces/:namespace" element={element} />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    // Open the add namespace popover
+    const addNamespaceToggle = screen.getByRole('button', {
+      name: 'AddNamespaceTogglePopover',
+    });
+    fireEvent.click(addNamespaceToggle);
+
+    // Type in the new namespace
+    await userEvent.type(
+      screen.getByLabelText('Namespace'),
+      'some.random.namespace',
+    );
+
+    // Save
+    const saveNamespace = screen.getByRole('button', {
+      name: 'SaveNamespace',
+    });
+    await waitFor(() => {
+      fireEvent.click(saveNamespace);
+    });
+
+    // Should display failure alert
+    expect(screen.getByText('you failed')).toBeInTheDocument();
+  });
+});

package/src/app/pages/NamespacePage/index.jsx

@@ -0,0 +1,199 @@
+import * as React from 'react';
+import { useParams } from 'react-router-dom';
+import { useContext, useEffect, useState } from 'react';
+import NodeStatus from '../NodePage/NodeStatus';
+import DJClientContext from '../../providers/djclient';
+import Explorer from '../NamespacePage/Explorer';
+import EditIcon from '../../icons/EditIcon';
+import DeleteNode from '../../components/DeleteNode';
+import AddNamespacePopover from './AddNamespacePopover';
+
+export function NamespacePage() {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  var { namespace } = useParams();
+
+  const [state, setState] = useState({
+    namespace: namespace,
+    nodes: [],
+  });
+
+  const [namespaceHierarchy, setNamespaceHierarchy] = useState([]);
+
+  const createNamespaceHierarchy = namespaceList => {
+    const hierarchy = [];
+
+    for (const item of namespaceList) {
+      const namespaces = item.namespace.split('.');
+      let currentLevel = hierarchy;
+
+      let path = '';
+      for (const ns of namespaces) {
+        path += ns;
+
+        let existingNamespace = currentLevel.find(el => el.namespace === ns);
+        if (!existingNamespace) {
+          existingNamespace = {
+            namespace: ns,
+            children: [],
+            path: path,
+          };
+          currentLevel.push(existingNamespace);
+        }
+
+        currentLevel = existingNamespace.children;
+        path += '.';
+      }
+    }
+    return hierarchy;
+  };
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const namespaces = await djClient.namespaces();
+      const hierarchy = createNamespaceHierarchy(namespaces);
+      setNamespaceHierarchy(hierarchy);
+    };
+    fetchData().catch(console.error);
+  }, [djClient, djClient.namespaces]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (namespace === undefined && namespaceHierarchy !== undefined) {
+        namespace = namespaceHierarchy[0].namespace;
+      }
+      const nodes = await djClient.namespace(namespace);
+      const foundNodes = await Promise.all(nodes);
+      setState({
+        namespace: namespace,
+        nodes: foundNodes,
+      });
+    };
+    fetchData().catch(console.error);
+  }, [djClient, namespace, namespaceHierarchy]);
+
+  const nodesList = state.nodes.map(node => (
+    <tr>
+      <td>
+        <a href={'/nodes/' + node.name} className="link-table">
+          {node.name}
+        </a>
+        <span
+          className="rounded-pill badge bg-secondary-soft"
+          style={{ marginLeft: '0.5rem' }}
+        >
+          {node.version}
+        </span>
+      </td>
+      <td>
+        <a href={'/nodes/' + node.name} className="link-table">
+          {node.type !== 'source' ? node.display_name : ''}
+        </a>
+      </td>
+      <td>
+        <span className={'node_type__' + node.type + ' badge node_type'}>
+          {node.type}
+        </span>
+      </td>
+      <td>
+        <NodeStatus node={node} />
+      </td>
+      <td>
+        <span className="status">{node.mode}</span>
+      </td>
+      <td>
+        <span className="status">
+          {new Date(node.updated_at).toLocaleString('en-us')}
+        </span>
+      </td>
+      <td>
+        <a href={`/nodes/${node?.name}/edit`} style={{ marginLeft: '0.5rem' }}>
+          <EditIcon />
+        </a>
+        <DeleteNode nodeName={node?.name} />
+      </td>
+    </tr>
+  ));
+
+  return (
+    <div className="mid">
+      <div className="card">
+        <div className="card-header">
+          <h2>Explore</h2>
+
+          <span className="menu-link">
+            <span className="menu-title">
+              <div className="dropdown">
+                <span className="add_node">+ Add Node</span>
+                <div className="dropdown-content">
+                  <a href={`/create/source`}>
+                    <div className="node_type__source node_type_creation_heading">
+                      Register Table
+                    </div>
+                  </a>
+                  <a href={`/create/transform/${namespace}`}>
+                    <div className="node_type__transform node_type_creation_heading">
+                      Transform
+                    </div>
+                  </a>
+                  <a href={`/create/metric/${namespace}`}>
+                    <div className="node_type__metric node_type_creation_heading">
+                      Metric
+                    </div>
+                  </a>
+                  <a href={`/create/dimension/${namespace}`}>
+                    <div className="node_type__dimension node_type_creation_heading">
+                      Dimension
+                    </div>
+                  </a>
+                  <a href={`/create/tag`}>
+                    <div className="entity__tag node_type_creation_heading">
+                      Tag
+                    </div>
+                  </a>
+                </div>
+              </div>
+            </span>
+          </span>
+          <div className="table-responsive">
+            <div className={`sidebar`}>
+              <span
+                style={{
+                  textTransform: 'uppercase',
+                  fontSize: '0.8125rem',
+                  fontWeight: '600',
+                  color: '#95aac9',
+                  padding: '1rem 1rem 1rem 0',
+                }}
+              >
+                Namespaces <AddNamespacePopover />
+              </span>
+              {namespaceHierarchy
+                ? namespaceHierarchy.map(child => (
+                    <Explorer
+                      item={child}
+                      current={state.namespace}
+                      defaultExpand={true}
+                    />
+                  ))
+                : null}
+            </div>
+            <table className="card-table table">
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th>Display Name</th>
+                  <th>Type</th>
+                  <th>Status</th>
+                  <th>Mode</th>
+                  <th>Last Updated</th>
+                  <th>Actions</th>
+                </tr>
+              </thead>
+              <tbody>{nodesList}</tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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>
+    </>
+  );
+}