datajunction-ui 0.0.1-rc.2 → 0.0.1-rc.20

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

@@ -0,0 +1,174 @@
+import { useEffect, useState } from 'react';
+import ClientCodePopover from './ClientCodePopover';
+import TableIcon from '../../icons/TableIcon';
+
+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 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">
+          <a href={materialization.urls[0]}>{materialization.name}</a>
+          <ClientCodePopover code={materialization.clientCode} />
+        </td>
+        <td>
+          <span className={`badge cron`}>{materialization.schedule}</span>
+          <div className={`cron-description`}>{cron(materialization)} </div>
+        </td>
+        <td>
+          {materialization.engine.name}
+          <br />
+          {materialization.engine.version}
+        </td>
+        <td>
+          {materialization.config.partitions ? (
+            materialization.config.partitions.map(partition =>
+              partition.type_ === 'categorical' ? (
+                <div className="partition__full" key={partition.name}>
+                  <div className="partition__header">{partition.name}</div>
+                  <div className="partition__body">
+                    {partition.values !== null && partition.values.length > 0
+                      ? partition.values.map(val => (
+                          <span
+                            className="badge partition_value"
+                            key={`partition-value-${val}`}
+                          >
+                            {val}
+                          </span>
+                        ))
+                      : null}
+                    {partition.range !== null && partition.range.length > 0
+                      ? rangePartition(partition)
+                      : null}
+                    {(partition.range === null && partition.values === null) ||
+                    (partition.range?.length === 0 &&
+                      partition.values?.length === 0) ? (
+                      <span className={`badge partition_value_highlight`}>
+                        ALL
+                      </span>
+                    ) : null}
+                  </div>
+                </div>
+              ) : null,
+            )
+          ) : (
+            <br />
+          )}
+        </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>{Object.keys(materialization.config.spark).map(key => <li className={`list-group-item`}>{key}: {materialization.config.spark[key]}</li>)}</td>*/}
+
+        <td>
+          {materialization.config.partitions ? (
+            materialization.config.partitions.map(partition =>
+              partition.type_ === 'temporal' ? (
+                <div className="partition__full" key={partition.name}>
+                  <div className="partition__header">{partition.name}</div>
+                  <div className="partition__body">
+                    {partition.values !== null && partition.values.length > 0
+                      ? partition.values.map(val => (
+                          <span className="badge partition_value">{val}</span>
+                        ))
+                      : null}
+                    {partition.range !== null && partition.range.length > 0
+                      ? rangePartition(partition)
+                      : null}
+                  </div>
+                </div>
+              ) : null,
+            )
+          ) : (
+            <br />
+          )}
+        </td>
+        <td>
+          {materialization.urls.map((url, idx) => (
+            <a href={url} key={`url-${idx}`}>
+              [{idx + 1}]
+            </a>
+          ))}
+        </td>
+      </tr>
+    ));
+  };
+  return (
+    <div className="table-responsive">
+      {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">Name</th>
+              <th>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 materializations available for this node
+        </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

@@ -1,34 +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 (
-      <span className="status__valid status" style={{ alignContent: 'center' }}>
+      <>
         {node?.status === 'valid' ? (
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="25"
-            height="25"
-            fill="currentColor"
-            className="bi bi-check-circle-fill"
-            viewBox="0 0 16 16"
+          <span
+            className="status__valid status"
+            style={{ alignContent: 'center' }}
           >
-            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
-          </svg>
+            <ValidIcon />
+          </span>
         ) : (
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            fill="currentColor"
-            className="bi bi-x-circle-fill"
-            viewBox="0 0 16 16"
+          <span
+            className="status__invalid status"
+            style={{ alignContent: 'center' }}
           >
-            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z" />
-          </svg>
+            <InvalidIcon />
+          </span>
         )}
-      </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/__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,
+    );
+  });
+});

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

@@ -0,0 +1,148 @@
+import React from 'react';
+import { render, fireEvent, waitFor, screen } from '@testing-library/react';
+import EditColumnPopover from '../EditColumnPopover';
+import DJClientContext from '../../../providers/djclient';
+
+const mockDjClient = {
+  DataJunctionAPI: {
+    setAttributes: jest.fn(),
+  },
+};
+
+describe('<EditColumnPopover />', () => {
+  it('renders correctly and handles form submission', async () => {
+    // Mock necessary data
+    const column = {
+      name: 'column1',
+      dimension: { name: 'dimension1' },
+      attributes: [
+        { attribute_type: { name: 'primary_key', namespace: 'system' } },
+      ],
+    };
+    const node = { name: 'default.node1' };
+    const options = [
+      { value: 'dimension', label: 'Dimension' },
+      { value: 'primary_key', label: 'Primary Key' },
+    ];
+
+    // Mock onSubmit function
+    const onSubmitMock = jest.fn();
+
+    mockDjClient.DataJunctionAPI.setAttributes.mockReturnValue({
+      status: 201,
+      json: [
+        {
+          name: 'id',
+          type: 'int',
+          attributes: [
+            { attribute_type: { name: 'primary_key', namespace: 'system' } },
+          ],
+          dimension: null,
+        },
+      ],
+    });
+
+    // Render the component
+    const { getByLabelText, getByText, getByTestId } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <EditColumnPopover
+          column={column}
+          node={node}
+          options={options}
+          onSubmit={onSubmitMock}
+        />
+      </DJClientContext.Provider>,
+    );
+
+    // Open the popover
+    fireEvent.click(getByLabelText('EditColumn'));
+
+    // Click on one attribute in the select
+    const editAttributes = getByTestId('edit-attributes');
+    fireEvent.keyDown(editAttributes.firstChild, { key: 'ArrowDown' });
+    fireEvent.click(screen.getByText('Dimension'));
+    fireEvent.click(getByText('Save'));
+    getByText('Save').click();
+
+    // Expect setAttributes to be called
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.setAttributes).toHaveBeenCalled();
+      expect(getByText('Saved!')).toBeInTheDocument();
+    });
+
+    // Click on two attributes in the select
+    fireEvent.keyDown(editAttributes.firstChild, { key: 'ArrowDown' });
+    fireEvent.click(screen.getByText('Dimension'));
+    fireEvent.click(screen.getByText('Primary Key'));
+    fireEvent.click(getByText('Save'));
+    getByText('Save').click();
+
+    // Expect setAttributes to be called
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.setAttributes).toHaveBeenCalledWith(
+        'default.node1',
+        'column1',
+        ['primary_key', 'dimension'],
+      );
+      expect(getByText('Saved!')).toBeInTheDocument();
+    });
+
+    // Close the popover
+    fireEvent.click(getByLabelText('EditColumn'));
+  });
+
+  it('handles failed form submission', async () => {
+    // Mock necessary data
+    const column = {
+      name: 'column1',
+      dimension: { name: 'dimension1' },
+      attributes: [
+        { attribute_type: { name: 'primary_key', namespace: 'system' } },
+      ],
+    };
+    const node = { name: 'default.node1' };
+    const options = [
+      { value: 'dimension', label: 'Dimension' },
+      { value: 'primary_key', label: 'Primary Key' },
+    ];
+
+    // Mock onSubmit function
+    const onSubmitMock = jest.fn();
+
+    mockDjClient.DataJunctionAPI.setAttributes.mockReturnValue({
+      status: 500,
+      json: { message: 'bad request' },
+    });
+
+    // Render the component
+    const { getByLabelText, getByText, getByTestId } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <EditColumnPopover
+          column={column}
+          node={node}
+          options={options}
+          onSubmit={onSubmitMock}
+        />
+      </DJClientContext.Provider>,
+    );
+
+    // Open the popover
+    fireEvent.click(getByLabelText('EditColumn'));
+
+    // Click on one attribute in the select
+    const editAttributes = getByTestId('edit-attributes');
+    fireEvent.keyDown(editAttributes.firstChild, { key: 'ArrowDown' });
+    fireEvent.click(screen.getByText('Dimension'));
+    fireEvent.click(getByText('Save'));
+    getByText('Save').click();
+
+    // Expect setAttributes to be called and the failure message to show up
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.setAttributes).toHaveBeenCalled();
+      expect(getByText('bad request')).toBeInTheDocument();
+    });
+
+    // Close the popover
+    fireEvent.click(getByLabelText('EditColumn'));
+  });
+});