datajunction-ui 0.0.1-a46 → 0.0.1-a46.dev3

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

@@ -19,301 +19,216 @@ HTMLCollection [
 `;
 
 exports[`<NodePage /> renders the NodeMaterialization tab with materializations correctly 1`] = `
-<div
+<table
+  aria-hidden="false"
   aria-label="Materializations"
-  class="table-vertical"
-  role="table"
+  class="card-inner-table table"
 >
-  <div>
-    <h2>
-      Materializations
-    </h2>
-    <button
-      aria-label="AddMaterialization"
-      class="edit_button"
-      tabindex="0"
-    >
-      <span
-        class="add_node"
+  <thead
+    class="fs-7 fw-bold text-gray-400 border-bottom-0"
+  >
+    <tr>
+      <th
+        class="text-start"
       >
-        + Add Materialization
-      </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="#"
+        Schedule
+      </th>
+      <th>
+        Job Type
+      </th>
+      <th>
+        Strategy
+      </th>
+      <th>
+        Partitions
+      </th>
+      <th>
+        Intended Output Tables
+      </th>
+      <th>
+        URLs
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td
+        class="text-start node_name"
       >
-        <h2>
-          Configure Materialization
-        </h2>
-        <input
-          hidden=""
-          name="node"
-          readonly=""
-          value="default.repair_order_transform"
-        />
         <span
-          data-testid="edit-partition"
+          class="badge cron"
         >
-          <label
-            for="strategy"
-          >
-            Strategy
-          </label>
-          <select
-            name="strategy"
-          >
-            <option
-              value="full"
-            >
-              Full
-            </option>
-            <option
-              value="incremental_time"
-            >
-              Incremental Time
-            </option>
-          </select>
+          0 * * * *
         </span>
-        <br />
-        <br />
-        <label
-          for="schedule"
+        <div
+          class="cron-description"
         >
-          Schedule
-        </label>
-        <input
-          default=""
-          id="schedule"
-          name="schedule"
-          placeholder="Cron"
-          type="text"
-          value="@daily"
-        />
-        <br />
-        <br />
+          Every hour
+           
+        </div>
+      </td>
+      <td>
+        SPARKSQL
+      </td>
+      <td />
+      <td />
+      <td>
         <div
-          class="DescriptionInput"
+          class="table__full"
         >
-          <label
-            for="Config"
+          <div
+            class="table__header"
           >
-            Lookback Window
-          </label>
-          <input
-            default=""
-            id="lookback_window"
-            name="lookback_window"
-            placeholder="1 DAY"
-            type="text"
-            value="1 DAY"
+            <svg
+              class="bi bi-table"
+              fill="currentColor"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"
+              />
+            </svg>
+             
+            <span
+              class="entity-info"
+            >
+              common.a
+            </span>
+          </div>
+          <div
+            class="table__body upstream_tables"
           />
         </div>
-        <br />
         <div
-          class="DescriptionInput"
+          class="table__full"
         >
-          <details>
-            <summary>
-              <label
-                for="SparkConfig"
-                style="display: inline-block;"
-              >
-                Spark Config
-              </label>
-            </summary>
-            <textarea
-              id="SparkConfig"
-              name="spark_config"
-              style="display: none;"
-              type="textarea"
+          <div
+            class="table__header"
+          >
+            <svg
+              class="bi bi-table"
+              fill="currentColor"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              [object Object]
-            </textarea>
-            <div
-              class="relative flex bg-[#282a36]"
-              role="button"
-              tabindex="0"
+              <path
+                d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"
+              />
+            </svg>
+             
+            <span
+              class="entity-info"
             >
-              <div
-                class="cm-theme-light"
-                id="spark_config"
-                name="spark_config"
-                options="[object Object]"
-                style="margin: 0px 0px 23px 0px; flex: 1; font-size: 150%; text-align: left;"
-              >
-                <div
-                  class="cm-editor ͼ1 ͼ2 ͼ4 ͼ1g ͼ15"
-                >
-                  <div
-                    aria-live="polite"
-                    style="position: absolute; top: -10000px;"
-                  />
-                  <div
-                    class="cm-scroller"
-                    tabindex="-1"
-                  >
-                    <div
-                      aria-hidden="true"
-                      class="cm-gutters"
-                      style="min-height: 56px; position: sticky;"
-                    >
-                      <div
-                        class="cm-gutter cm-lineNumbers"
-                      >
-                        <div
-                          class="cm-gutterElement"
-                          style="height: 0px; visibility: hidden; pointer-events: none;"
-                        >
-                          9
-                        </div>
-                        <div
-                          class="cm-gutterElement cm-activeLineGutter"
-                          style="height: 14px;"
-                        >
-                          1
-                        </div>
-                        <div
-                          class="cm-gutterElement"
-                          style="height: 14px;"
-                        >
-                          2
-                        </div>
-                        <div
-                          class="cm-gutterElement"
-                          style="height: 14px;"
-                        >
-                          3
-                        </div>
-                        <div
-                          class="cm-gutterElement"
-                          style="height: 14px;"
-                        >
-                          4
-                        </div>
-                      </div>
-                      <div
-                        class="cm-gutter cm-foldGutter"
-                      >
-                        <div
-                          class="cm-gutterElement"
-                          style="height: 0px; visibility: hidden; pointer-events: none;"
-                        >
-                          <span
-                            title="Unfold line"
-                          >
-                            ›
-                          </span>
-                        </div>
-                        <div
-                          class="cm-gutterElement cm-activeLineGutter"
-                          style="height: 14px;"
-                        >
-                          <span
-                            title="Fold line"
-                          >
-                            ⌄
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      aria-autocomplete="list"
-                      aria-multiline="true"
-                      autocapitalize="off"
-                      autocorrect="off"
-                      class="cm-content"
-                      contenteditable="true"
-                      data-language="json"
-                      role="textbox"
-                      spellcheck="false"
-                      style="tab-size: 4"
-                      translate="no"
-                    >
-                      <div
-                        class="cm-activeLine cm-line"
-                      >
-                        {
-                      </div>
-                      <div
-                        class="cm-line"
-                      >
-                            "spark.executor.memory": 
-                        <span
-                          class="ͼe"
-                        >
-                          "16g"
-                        </span>
-                        ,
-                      </div>
-                      <div
-                        class="cm-line"
-                      >
-                            "spark.memory.fraction": 
-                        <span
-                          class="ͼe"
-                        >
-                          "0.3"
-                        </span>
-                      </div>
-                      <div
-                        class="cm-line"
-                      >
-                        }
-                      </div>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="cm-selectionLayer"
-                    />
-                    <div
-                      aria-hidden="true"
-                      class="cm-cursorLayer"
-                      style="animation-duration: 1200ms;"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </details>
-           
+              common.b
+            </span>
+          </div>
+          <div
+            class="table__body upstream_tables"
+          />
         </div>
+      </td>
+      <td>
+        <a
+          href="http://fake.url/job"
+        >
+          [
+          1
+          ]
+        </a>
+      </td>
+      <td>
         <button
-          aria-hidden="false"
-          aria-label="SaveEditColumn"
-          class="add_node"
-          type="submit"
+          aria-label="code-button"
+          class="code-button"
+          height="45px"
+          tabindex="0"
         >
-          Save
+          <svg
+            fill="none"
+            height="45px"
+            viewBox="0 0 64 64"
+            width="45px"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g
+              id="SVGRepo_bgCarrier"
+              stroke-width="0"
+            />
+            <g
+              id="SVGRepo_tracerCarrier"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <g
+              id="SVGRepo_iconCarrier"
+            >
+              <path
+                d="M31.885 16c-8.124 0-7.617 3.523-7.617 3.523l.01 3.65h7.752v1.095H21.197S16 23.678 16 31.876c0 8.196 4.537 7.906 4.537 7.906h2.708v-3.804s-.146-4.537 4.465-4.537h7.688s4.32.07 4.32-4.175v-7.019S40.374 16 31.885 16zm-4.275 2.454c.771 0 1.395.624 1.395 1.395s-.624 1.395-1.395 1.395a1.393 1.393 0 0 1-1.395-1.395c0-.771.624-1.395 1.395-1.395z"
+                fill="url(#a)"
+              />
+              <path
+                d="M32.115 47.833c8.124 0 7.617-3.523 7.617-3.523l-.01-3.65H31.97v-1.095h10.832S48 40.155 48 31.958c0-8.197-4.537-7.906-4.537-7.906h-2.708v3.803s.146 4.537-4.465 4.537h-7.688s-4.32-.07-4.32 4.175v7.019s-.656 4.247 7.833 4.247zm4.275-2.454a1.393 1.393 0 0 1-1.395-1.395c0-.77.624-1.394 1.395-1.394s1.395.623 1.395 1.394c0 .772-.624 1.395-1.395 1.395z"
+                fill="url(#b)"
+              />
+              <defs>
+                <lineargradient
+                  gradientUnits="userSpaceOnUse"
+                  id="a"
+                  x1="19.075"
+                  x2="34.898"
+                  y1="18.782"
+                  y2="34.658"
+                >
+                  <stop
+                    stop-color="#387EB8"
+                  />
+                  <stop
+                    offset="1"
+                    stop-color="#366994"
+                  />
+                </lineargradient>
+                <lineargradient
+                  gradientUnits="userSpaceOnUse"
+                  id="b"
+                  x1="28.809"
+                  x2="45.803"
+                  y1="28.882"
+                  y2="45.163"
+                >
+                  <stop
+                    stop-color="#FFE052"
+                  />
+                  <stop
+                    offset="1"
+                    stop-color="#FFC331"
+                  />
+                </lineargradient>
+              </defs>
+            </g>
+          </svg>
         </button>
-      </form>
-    </div>
-    <div
-      class="message alert"
-      style="margin-top: 10px;"
-    >
-      No materialization workflows configured for this node.
-    </div>
-  </div>
-  <div>
-    <h2>
-      Materialized Datasets
-    </h2>
-    <div
-      class="message alert"
-      style="margin-top: 10px;"
-    >
-      No materialized datasets available for this node.
-    </div>
-  </div>
-</div>
+        <div
+          aria-label="client-code"
+          id="node-create-code"
+          role="dialog"
+          style="display: none;"
+        >
+          <pre
+            style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(1, 22, 39); color: rgb(214, 222, 235);"
+          >
+            <code
+              class="language-python"
+              style="white-space: pre;"
+            />
+          </pre>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
 `;

package/src/app/services/DJService.js

@@ -12,7 +12,7 @@ export const DataJunctionAPI = {
   },
 
   logout: async function () {
-    return await fetch(`${DJ_URL}/logout/`, {
+    await await fetch(`${DJ_URL}/logout/`, {
       credentials: 'include',
       method: 'POST',
     });
@@ -388,7 +388,19 @@ export const DataJunctionAPI = {
       })
     ).json();
 
-    return data;
+    return await Promise.all(
+      data.map(async materialization => {
+        materialization.clientCode = await (
+          await fetch(
+            `${DJ_URL}/datajunction-clients/python/add_materialization/${node}/${materialization.name}`,
+            {
+              credentials: 'include',
+            },
+          )
+        ).json();
+        return materialization;
+      }),
+    );
   },
 
   columns: async function (node) {
@@ -792,7 +804,13 @@ export const DataJunctionAPI = {
     );
     return { status: response.status, json: await response.json() };
   },
-  runBackfill: async function (nodeName, materializationName, partitionValues) {
+  runBackfill: async function (
+    nodeName,
+    materializationName,
+    partitionColumn,
+    from,
+    to,
+  ) {
     const response = await fetch(
       `${DJ_URL}/nodes/${nodeName}/materializations/${materializationName}/backfill`,
       {
@@ -800,29 +818,10 @@ export const DataJunctionAPI = {
         headers: {
           'Content-Type': 'application/json',
         },
-        body: JSON.stringify(
-          partitionValues.map(partitionValue => {
-            return {
-              column_name: partitionValue.columnName,
-              range: partitionValue.range,
-              values: partitionValue.values,
-            };
-          }),
-        ),
-        credentials: 'include',
-      },
-    );
-    return { status: response.status, json: await response.json() };
-  },
-  deleteMaterialization: async function (nodeName, materializationName) {
-    console.log('deleting materialization', nodeName, materializationName);
-    const response = await fetch(
-      `${DJ_URL}/nodes/${nodeName}/materializations?materialization_name=${materializationName}`,
-      {
-        method: 'DELETE',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        body: JSON.stringify({
+          column_name: partitionColumn,
+          range: [from, to],
+        }),
         credentials: 'include',
       },
     );

package/src/app/services/__tests__/DJService.test.jsx

@@ -457,8 +457,8 @@ describe('DataJunctionAPI', () => {
   it('calls materializations correctly', async () => {
     const nodeName = 'default.sample_node';
     const mockMaterializations = [
-      { name: 'materialization1' },
-      { name: 'materialization2' },
+      { name: 'materialization1', clientCode: 'from dj import DJClient' },
+      { name: 'materialization2', clientCode: 'from dj import DJClient' },
     ];
 
     // Mock the first fetch call to return the list of materializations
@@ -481,6 +481,14 @@ describe('DataJunctionAPI', () => {
       },
     );
 
+    // Check the subsequent fetch calls for clientCode
+    mockMaterializations.forEach(mat => {
+      expect(fetch).toHaveBeenCalledWith(
+        `${DJ_URL}/datajunction-clients/python/add_materialization/${nodeName}/${mat.name}`,
+        { credentials: 'include' },
+      );
+    });
+
     // Ensure the result contains the clientCode for each materialization
     expect(result).toEqual(mockMaterializations);
   });
@@ -973,12 +981,13 @@ describe('DataJunctionAPI', () => {
 
   it('calls runBackfill correctly', async () => {
     fetch.mockResponseOnce(JSON.stringify({}));
-    await DataJunctionAPI.runBackfill('default.hard_hat', 'spark', [
-      {
-        columnName: 'hire_date',
-        range: ['20230101', '20230202'],
-      },
-    ]);
+    await DataJunctionAPI.runBackfill(
+      'default.hard_hat',
+      'spark',
+      'hire_date',
+      '20230101',
+      '20230202',
+    );
     expect(fetch).toHaveBeenCalledWith(
       `${DJ_URL}/nodes/default.hard_hat/materializations/spark/backfill`,
       {
@@ -986,36 +995,11 @@ describe('DataJunctionAPI', () => {
         headers: {
           'Content-Type': 'application/json',
         },
-        body: JSON.stringify([
-          {
-            column_name: 'hire_date',
-            range: ['20230101', '20230202'],
-          },
-        ]),
-        method: 'POST',
-      },
-    );
-  });
-
-  it('calls materializationInfo correctly', async () => {
-    fetch.mockResponseOnce(JSON.stringify({}));
-    await DataJunctionAPI.materializationInfo();
-    expect(fetch).toHaveBeenCalledWith(`${DJ_URL}/materialization/info`, {
-      credentials: 'include',
-    });
-  });
-
-  it('calls revalidate correctly', async () => {
-    fetch.mockResponseOnce(JSON.stringify({}));
-    await DataJunctionAPI.revalidate('default.hard_hat');
-    expect(fetch).toHaveBeenCalledWith(
-      `${DJ_URL}/nodes/default.hard_hat/validate`,
-      {
-        credentials: 'include',
+        body: JSON.stringify({
+          column_name: 'hire_date',
+          range: ['20230101', '20230202'],
+        }),
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
       },
     );
   });