datajunction-ui 0.0.1-rc.24 → 0.0.1-rc.26

package/src/app/pages/NodePage/__tests__/__snapshots__/NodePage.test.jsx.snap

@@ -104,9 +104,6 @@ exports[`<NodePage /> renders the NodeMaterialization tab with materializations
       <th
         class="text-start"
       >
-        Name
-      </th>
-      <th>
         Schedule
       </th>
       <th>
@@ -131,11 +128,22 @@ exports[`<NodePage /> renders the NodeMaterialization tab with materializations
       <td
         class="text-start node_name"
       >
-        <a
-          href="http://fake.url/job"
+        <span
+          class="badge cron"
         >
-          country_birth_date_contractor_id_379232101
-        </a>
+          0 * * * *
+        </span>
+        <div
+          class="cron-description"
+        >
+          Every hour
+           
+        </div>
+      </td>
+      <td>
+        spark
+        <br />
+        2.4.4
         <button
           aria-label="code-button"
           class="code-button"
@@ -222,79 +230,7 @@ exports[`<NodePage /> renders the NodeMaterialization tab with materializations
           </pre>
         </div>
       </td>
-      <td>
-        <span
-          class="badge cron"
-        >
-          0 * * * *
-        </span>
-        <div
-          class="cron-description"
-        >
-          Every hour
-           
-        </div>
-      </td>
-      <td>
-        spark
-        <br />
-        2.4.4
-      </td>
-      <td>
-        <div
-          class="partition__full"
-        >
-          <div
-            class="partition__header"
-          >
-            country
-          </div>
-          <div
-            class="partition__body"
-          >
-            <span
-              class="badge partition_value"
-            >
-              DE
-            </span>
-            <span
-              class="badge partition_value"
-            >
-              MY
-            </span>
-          </div>
-        </div>
-        <div
-          class="partition__full"
-        >
-          <div
-            class="partition__header"
-          >
-            contractor_id
-          </div>
-          <div
-            class="partition__body"
-          >
-            <div>
-              <span
-                class="badge partition_value"
-              >
-                <span
-                  class="badge partition_value"
-                >
-                  1
-                </span>
-                to
-                <span
-                  class="badge partition_value"
-                >
-                  10
-                </span>
-              </span>
-            </div>
-          </div>
-        </div>
-      </td>
+      <td />
       <td>
         <div
           class="table__full"
@@ -356,35 +292,100 @@ exports[`<NodePage /> renders the NodeMaterialization tab with materializations
         </div>
       </td>
       <td>
-        <div
-          class="partition__full"
+        <a
+          class="partitionLink"
         >
           <div
-            class="partition__header"
+            class="partition__full"
           >
-            birth_date
-          </div>
-          <div
-            class="partition__body"
-          >
-            <div>
+            <div
+              class="partition__header"
+            />
+            <div
+              class="partition__body"
+            >
               <span
                 class="badge partition_value"
               >
-                <span
-                  class="badge partition_value"
-                >
-                  20010101
-                </span>
-                to
-                <span
-                  class="badge partition_value"
-                >
-                  20020101
-                </span>
+                20230101
+              </span>
+              to
+              <span
+                class="badge partition_value"
+              >
+                20230102
               </span>
             </div>
           </div>
+        </a>
+        <button
+          aria-label="AddBackfill"
+          class="edit_button"
+          tabindex="0"
+        >
+          <span
+            class="add_node"
+          >
+            + Add Backfill
+          </span>
+        </button>
+        <div
+          class="fade modal-backdrop in"
+          style="display: none;"
+        />
+        <div
+          aria-label="client-code"
+          class="centerPopover"
+          role="dialog"
+          style="display: none; width: 50%;"
+        >
+          <form
+            action="#"
+          >
+            <h2>
+              Run Backfill
+            </h2>
+            <span
+              data-testid="edit-partition"
+            >
+              <label
+                for="engine"
+                style="padding-bottom: 1rem;"
+              >
+                Engine
+              </label>
+              <select
+                disabled=""
+                id="engine"
+                name="engine"
+              >
+                <option
+                  value="spark"
+                >
+                  spark
+                   
+                  2.4.4
+                </option>
+              </select>
+            </span>
+            <br />
+            <br />
+            <label
+              for="partition"
+              style="padding-bottom: 1rem;"
+            >
+              Partition Range
+            </label>
+            <br />
+            <button
+              aria-hidden="false"
+              aria-label="SaveEditColumn"
+              class="add_node"
+              type="submit"
+            >
+              Save
+            </button>
+          </form>
         </div>
       </td>
       <td>

package/src/app/pages/RegisterTablePage/__tests__/__snapshots__/RegisterTablePage.test.jsx.snap

@@ -4,6 +4,7 @@ exports[`<RegisterTablePage /> registers a table correctly 1`] = `
 HTMLCollection [
   <div
     class="message success"
+    data-testid="success"
   >
     <svg
       class="bi bi-check-circle-fill"

package/src/app/pages/Root/index.tsx

@@ -59,7 +59,7 @@ export function Root() {
         ) : (
           <span className="menu-link">
             <span className="menu-title">
-              <button onClick={handleLogout}>Logout</button>
+              <a onClick={handleLogout}>Logout</a>
             </span>
           </span>
         )}

package/src/app/pages/TagPage/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 TagPage = () => {
+  return lazyLoad(
+    () => import('./index'),
+    module => module.TagPage,
+    {
+      fallback: <div></div>,
+    },
+  )();
+};

package/src/app/pages/TagPage/__tests__/TagPage.test.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import fetchMock from 'jest-fetch-mock';
+import { render } from '../../../../setupTests';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import DJClientContext from '../../../providers/djclient';
+import { TagPage } from '../index';
+
+describe('<TagPage />', () => {
+  const initializeMockDJClient = () => {
+    return {
+      DataJunctionAPI: {
+        getTag: jest.fn(),
+        listNodesForTag: jest.fn(),
+      },
+    };
+  };
+
+  const mockDjClient = initializeMockDJClient();
+
+  beforeEach(() => {
+    fetchMock.resetMocks();
+    jest.clearAllMocks();
+    window.scrollTo = jest.fn();
+
+    mockDjClient.DataJunctionAPI.getTag.mockReturnValue({
+      name: 'domains.com',
+      tag_type: 'domains',
+      description: 'Top-level domain .com',
+    });
+    mockDjClient.DataJunctionAPI.listNodesForTag.mockReturnValue([
+      {
+        name: 'random.node_a',
+        type: 'metric',
+        display_name: 'Node A',
+      },
+    ]);
+  });
+
+  const renderTagsPage = element => {
+    return render(
+      <MemoryRouter initialEntries={['/tags/:name']}>
+        <Routes>
+          <Route path="tags/:name" element={element} />
+        </Routes>
+      </MemoryRouter>,
+    );
+  };
+
+  const testElement = djClient => {
+    return (
+      <DJClientContext.Provider value={djClient}>
+        <TagPage />
+      </DJClientContext.Provider>
+    );
+  };
+
+  it('renders the tag page correctly', async () => {
+    const element = testElement(mockDjClient);
+    renderTagsPage(element);
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.getTag).toHaveBeenCalledTimes(1);
+      expect(
+        mockDjClient.DataJunctionAPI.listNodesForTag,
+      ).toHaveBeenCalledTimes(1);
+    });
+    expect(screen.getByText('Nodes')).toBeInTheDocument();
+    expect(screen.getByText('Node A')).toBeInTheDocument();
+  }, 60000);
+});

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

@@ -0,0 +1,79 @@
+/**
+ * For a given tag, displays nodes tagged with it
+ */
+import NamespaceHeader from '../../components/NamespaceHeader';
+import React, { useContext, useEffect, useState } from 'react';
+import 'styles/node-creation.scss';
+import DJClientContext from '../../providers/djclient';
+import { useParams } from 'react-router-dom';
+
+export function TagPage() {
+  const [nodes, setNodes] = useState([]);
+  const [tag, setTag] = useState([]);
+
+  const { name } = useParams();
+
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  useEffect(() => {
+    const fetchData = async () => {
+      const data = await djClient.listNodesForTag(name);
+      const tagData = await djClient.getTag(name);
+      setNodes(data);
+      setTag(tagData);
+    };
+    fetchData().catch(console.error);
+  }, [djClient, name]);
+
+  return (
+    <div className="mid">
+      <NamespaceHeader namespace="" />
+      <div className="card">
+        <div className="card-header">
+          <h3
+            className="card-title align-items-start flex-column"
+            style={{ display: 'inline-block' }}
+          >
+            Tag
+          </h3>
+          <div>
+            <div style={{ marginBottom: '1.5rem' }}>
+              <h6 className="mb-0 w-100">Display Name</h6>
+              <p className="mb-0 opacity-75">{tag.display_name}</p>
+            </div>
+            <div style={{ marginBottom: '1.5rem' }}>
+              <h6 className="mb-0 w-100">Name</h6>
+              <p className="mb-0 opacity-75">{name}</p>
+            </div>
+            <div style={{ marginBottom: '1.5rem' }}>
+              <h6 className="mb-0 w-100">Tag Type</h6>
+              <p className="mb-0 opacity-75">{tag.tag_type}</p>
+            </div>
+            <div style={{ marginBottom: '1.5rem' }}>
+              <h6 className="mb-0 w-100">Description</h6>
+              <p className="mb-0 opacity-75">{tag.description}</p>
+            </div>
+            <div style={{ marginBottom: '1.5rem' }}>
+              <h6 className="mb-0 w-100">Nodes</h6>
+              <div className={`list-group-item`}>
+                {nodes?.map(node => (
+                  <div
+                    className="button-3 cube-element"
+                    key={node.name}
+                    role="cell"
+                    aria-label="CubeElement"
+                    aria-hidden="false"
+                  >
+                    <a href={`/nodes/${node.name}`}>{node.display_name}</a>
+                    <span className={`badge node_type__${node.type}`}>
+                      {node.type}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/app/services/DJService.js

@@ -12,7 +12,7 @@ export const DataJunctionAPI = {
   },
 
   logout: async function () {
-    await await fetch(`${DJ_URL}/basic/logout/`, {
+    await await fetch(`${DJ_URL}/logout/`, {
       credentials: 'include',
       method: 'POST',
     });
@@ -26,6 +26,14 @@ export const DataJunctionAPI = {
     ).json();
   },
 
+  engines: async function () {
+    return await (
+      await fetch(`${DJ_URL}/engines`, {
+        credentials: 'include',
+      })
+    ).json();
+  },
+
   node: async function (name) {
     const data = await (
       await fetch(`${DJ_URL}/nodes/${name}/`, {
@@ -497,4 +505,161 @@ export const DataJunctionAPI = {
     });
     return { status: response.status, json: await response.json() };
   },
+  listTags: async function () {
+    const response = await fetch(`${DJ_URL}/tags`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include',
+    });
+    return await response.json();
+  },
+  getTag: async function (tagName) {
+    const response = await fetch(`${DJ_URL}/tags/${tagName}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include',
+    });
+    return await response.json();
+  },
+  listNodesForTag: async function (tagName) {
+    const response = await fetch(`${DJ_URL}/tags/${tagName}/nodes`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include',
+    });
+    return await response.json();
+  },
+  tagsNode: async function (nodeName, tagNames) {
+    const url = tagNames
+      .map(value => `tag_names=${encodeURIComponent(value)}`)
+      .join('&');
+    const response = await fetch(`${DJ_URL}/nodes/${nodeName}/tags?${url}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include',
+    });
+    return { status: response.status, json: await response.json() };
+  },
+  addTag: async function (name, displayName, tagType, description) {
+    const response = await fetch(`${DJ_URL}/tags`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        name: name,
+        display_name: displayName,
+        tag_type: tagType,
+        description: description,
+      }),
+      credentials: 'include',
+    });
+    return { status: response.status, json: await response.json() };
+  },
+  editTag: async function (name, description, displayName) {
+    const updates = {};
+    if (description) {
+      updates.description = description;
+    }
+    if (displayName) {
+      updates.display_name = displayName;
+    }
+
+    const response = await fetch(`${DJ_URL}/tags/${name}`, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(updates),
+      credentials: 'include',
+    });
+    return { status: response.status, json: await response.json() };
+  },
+  setPartition: async function (
+    nodeName,
+    columnName,
+    partitionType,
+    format,
+    granularity,
+  ) {
+    const body = {
+      type_: partitionType,
+    };
+    if (format) {
+      body.format = format;
+    }
+    if (granularity) {
+      body.granularity = granularity;
+    }
+    const response = await fetch(
+      `${DJ_URL}/nodes/${nodeName}/columns/${columnName}/partition`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(body),
+        credentials: 'include',
+      },
+    );
+    return { status: response.status, json: await response.json() };
+  },
+  materialize: async function (
+    nodeName,
+    engineName,
+    engineVersion,
+    schedule,
+    config,
+  ) {
+    const response = await fetch(
+      `${DJ_URL}/nodes/${nodeName}/materialization`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          engine: {
+            name: engineName,
+            version: engineVersion,
+          },
+          schedule: schedule,
+          config: JSON.parse(config),
+        }),
+        credentials: 'include',
+      },
+    );
+    return { status: response.status, json: await response.json() };
+  },
+  runBackfill: async function (
+    nodeName,
+    materializationName,
+    partitionColumn,
+    from,
+    to,
+  ) {
+    const response = await fetch(
+      `${DJ_URL}/nodes/${nodeName}/materializations/${materializationName}/backfill`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          column_name: partitionColumn,
+          range: [from, to],
+        }),
+        credentials: 'include',
+      },
+    );
+    return { status: response.status, json: await response.json() };
+  },
 };