datajunction-ui 0.0.1-a45.dev5 → 0.0.1-a46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/Makefile +5 -0
  2. package/package.json +2 -2
  3. package/src/app/components/NodeMaterializationDelete.jsx +80 -0
  4. package/src/app/pages/CubeBuilderPage/index.jsx +19 -4
  5. package/src/app/pages/NamespacePage/index.jsx +2 -1
  6. package/src/app/pages/NodePage/AddBackfillPopover.jsx +46 -51
  7. package/src/app/pages/NodePage/AddMaterializationPopover.jsx +33 -24
  8. package/src/app/pages/NodePage/MaterializationConfigField.jsx +38 -31
  9. package/src/app/pages/NodePage/NodeHistory.jsx +1 -1
  10. package/src/app/pages/NodePage/NodeInfoTab.jsx +33 -0
  11. package/src/app/pages/NodePage/NodeMaterializationTab.jsx +179 -110
  12. package/src/app/pages/NodePage/NodeStatus.jsx +94 -21
  13. package/src/app/pages/NodePage/PartitionValueForm.jsx +60 -0
  14. package/src/app/pages/NodePage/RevisionDiff.jsx +1 -1
  15. package/src/app/pages/NodePage/__tests__/AddBackfillPopover.test.jsx +13 -3
  16. package/src/app/pages/NodePage/__tests__/NodePage.test.jsx +13 -5
  17. package/src/app/pages/NodePage/__tests__/RevisionDiff.test.jsx +32 -47
  18. package/src/app/pages/NodePage/__tests__/__snapshots__/NodePage.test.jsx.snap +276 -191
  19. package/src/app/pages/NodePage/index.jsx +1 -0
  20. package/src/app/services/DJService.js +37 -25
  21. package/src/app/services/__tests__/DJService.test.jsx +53 -21
  22. package/src/mocks/mockNodes.jsx +62 -7
  23. package/src/styles/index.css +128 -11
  24. package/src/styles/node-creation.scss +9 -0
  25. package/src/styles/node-list.css +4 -0
  26. package/src/app/components/forms/NodeTagsInput.jsx +0 -61
package/src/app/pages/NodePage/__tests__/RevisionDiff.test.jsx CHANGED
@@ -14,11 +14,11 @@ describe('<RevisionDiff />', () => {
14
14
 
15
15
  const mockNodesWithDimension = [
16
16
  {
17
- node_revision_id: 2,
18
- node_id: 2,
19
- type: 'source',
20
- name: 'default.repair_order_details',
21
- display_name: 'Default: Repair Order Details',
17
+ node_revision_id: 1,
18
+ node_id: 1,
19
+ type: 'dimension',
20
+ name: 'default.repair_order',
21
+ display_name: 'Repair Orders',
22
22
  version: 'v1.0',
23
23
  status: 'valid',
24
24
  mode: 'published',
@@ -30,10 +30,10 @@ describe('<RevisionDiff />', () => {
30
30
  extra_params: {},
31
31
  name: 'warehouse',
32
32
  },
33
- schema_: 'roads',
34
- table: 'repair_order_details',
35
- description: 'Details on repair orders',
36
- query: null,
33
+ description: 'Repair order dimension',
34
+ query:
35
+ 'SELECT repair_order_id, municipality_id, hard_hat_id, order_date, ' +
36
+ 'dispatcher_id FROM default.repair_orders',
37
37
  availability: null,
38
38
  columns: [
39
39
  {
@@ -45,26 +45,26 @@ describe('<RevisionDiff />', () => {
45
45
  },
46
46
  },
47
47
  {
48
- name: 'repair_type_id',
48
+ name: 'municipality_id',
49
49
  type: 'int',
50
50
  attributes: [],
51
51
  dimension: null,
52
52
  },
53
53
  {
54
- name: 'price',
55
- type: 'float',
54
+ name: 'hard_hat_id',
55
+ type: 'int',
56
56
  attributes: [],
57
57
  dimension: null,
58
58
  },
59
59
  {
60
- name: 'quantity',
61
- type: 'int',
60
+ name: 'order_date',
61
+ type: 'date',
62
62
  attributes: [],
63
63
  dimension: null,
64
64
  },
65
65
  {
66
- name: 'discount',
67
- type: 'float',
66
+ name: 'dispatcher_id',
67
+ type: 'int',
68
68
  attributes: [],
69
69
  dimension: null,
70
70
  },
@@ -74,12 +74,12 @@ describe('<RevisionDiff />', () => {
74
74
  parents: [],
75
75
  },
76
76
  {
77
- node_revision_id: 1,
78
- node_id: 1,
79
- type: 'source',
80
- name: 'default.repair_orders',
81
- display_name: 'Default: Repair Orders',
82
- version: 'v1.0',
77
+ node_revision_id: 2,
78
+ node_id: 2,
79
+ type: 'dimension',
80
+ name: 'default.repair_order',
81
+ display_name: 'Repair Orders',
82
+ version: 'v2.0',
83
83
  status: 'valid',
84
84
  mode: 'published',
85
85
  catalog: {
@@ -90,10 +90,10 @@ describe('<RevisionDiff />', () => {
90
90
  extra_params: {},
91
91
  name: 'warehouse',
92
92
  },
93
- schema_: 'roads',
94
- table: 'repair_orders',
95
- description: 'Repair orders',
96
- query: null,
93
+ description: 'Repair order dimension',
94
+ query:
95
+ 'SELECT repair_order_id, municipality_id, hard_hat_id, ' +
96
+ 'dispatcher_id FROM default.repair_orders',
97
97
  availability: null,
98
98
  columns: [
99
99
  {
@@ -106,7 +106,7 @@ describe('<RevisionDiff />', () => {
106
106
  },
107
107
  {
108
108
  name: 'municipality_id',
109
- type: 'string',
109
+ type: 'int',
110
110
  attributes: [],
111
111
  dimension: null,
112
112
  },
@@ -116,24 +116,6 @@ describe('<RevisionDiff />', () => {
116
116
  attributes: [],
117
117
  dimension: null,
118
118
  },
119
- {
120
- name: 'order_date',
121
- type: 'date',
122
- attributes: [],
123
- dimension: null,
124
- },
125
- {
126
- name: 'required_date',
127
- type: 'date',
128
- attributes: [],
129
- dimension: null,
130
- },
131
- {
132
- name: 'dispatched_date',
133
- type: 'date',
134
- attributes: [],
135
- dimension: null,
136
- },
137
119
  {
138
120
  name: 'dispatcher_id',
139
121
  type: 'int',
@@ -141,7 +123,7 @@ describe('<RevisionDiff />', () => {
141
123
  dimension: null,
142
124
  },
143
125
  ],
144
- updated_at: '2023-08-21T16:48:52.880498+00:00',
126
+ updated_at: '2023-08-21T16:48:52.981201+00:00',
145
127
  materializations: [],
146
128
  parents: [],
147
129
  },
@@ -163,7 +145,7 @@ describe('<RevisionDiff />', () => {
163
145
  );
164
146
  const { container } = render(
165
147
  <MemoryRouter
166
- initialEntries={['/nodes/default.repair_orders_cube/revisions/v1.0']}
148
+ initialEntries={['/nodes/default.repair_orders_cube/revisions/v2.0']}
167
149
  >
168
150
  <Routes>
169
151
  <Route path="nodes/:name/revisions/:revision" element={element} />
@@ -174,6 +156,9 @@ describe('<RevisionDiff />', () => {
174
156
  expect(mockDjClient.DataJunctionAPI.revisions).toHaveBeenCalledWith(
175
157
  'default.repair_orders_cube',
176
158
  );
159
+
160
+ const diffViews = screen.getAllByRole('gridcell', 'DiffView');
161
+ diffViews.map(diffView => expect(diffView).toBeInTheDocument());
177
162
  });
178
163
  });
179
164
  });
package/src/app/pages/NodePage/__tests__/__snapshots__/NodePage.test.jsx.snap CHANGED
@@ -19,216 +19,301 @@ HTMLCollection [
19
19
  `;
20
20
 
21
21
  exports[`<NodePage /> renders the NodeMaterialization tab with materializations correctly 1`] = `
22
- <table
23
- aria-hidden="false"
22
+ <div
24
23
  aria-label="Materializations"
25
- class="card-inner-table table"
24
+ class="table-vertical"
25
+ role="table"
26
26
  >
27
- <thead
28
- class="fs-7 fw-bold text-gray-400 border-bottom-0"
29
- >
30
- <tr>
31
- <th
32
- class="text-start"
27
+ <div>
28
+ <h2>
29
+ Materializations
30
+ </h2>
31
+ <button
32
+ aria-label="AddMaterialization"
33
+ class="edit_button"
34
+ tabindex="0"
35
+ >
36
+ <span
37
+ class="add_node"
33
38
  >
34
- Schedule
35
- </th>
36
- <th>
37
- Job Type
38
- </th>
39
- <th>
40
- Strategy
41
- </th>
42
- <th>
43
- Partitions
44
- </th>
45
- <th>
46
- Intended Output Tables
47
- </th>
48
- <th>
49
- URLs
50
- </th>
51
- </tr>
52
- </thead>
53
- <tbody>
54
- <tr>
55
- <td
56
- class="text-start node_name"
39
+ + Add Materialization
40
+ </span>
41
+ </button>
42
+ <div
43
+ class="fade modal-backdrop in"
44
+ style="display: none;"
45
+ />
46
+ <div
47
+ aria-label="client-code"
48
+ class="centerPopover"
49
+ role="dialog"
50
+ style="display: none; width: 50%;"
51
+ >
52
+ <form
53
+ action="#"
57
54
  >
55
+ <h2>
56
+ Configure Materialization
57
+ </h2>
58
+ <input
59
+ hidden=""
60
+ name="node"
61
+ readonly=""
62
+ value="default.repair_order_transform"
63
+ />
58
64
  <span
59
- class="badge cron"
65
+ data-testid="edit-partition"
60
66
  >
61
- 0 * * * *
67
+ <label
68
+ for="strategy"
69
+ >
70
+ Strategy
71
+ </label>
72
+ <select
73
+ name="strategy"
74
+ >
75
+ <option
76
+ value="full"
77
+ >
78
+ Full
79
+ </option>
80
+ <option
81
+ value="incremental_time"
82
+ >
83
+ Incremental Time
84
+ </option>
85
+ </select>
62
86
  </span>
63
- <div
64
- class="cron-description"
87
+ <br />
88
+ <br />
89
+ <label
90
+ for="schedule"
65
91
  >
66
- Every hour
67
-
68
- </div>
69
- </td>
70
- <td>
71
- SPARKSQL
72
- </td>
73
- <td />
74
- <td />
75
- <td>
92
+ Schedule
93
+ </label>
94
+ <input
95
+ default=""
96
+ id="schedule"
97
+ name="schedule"
98
+ placeholder="Cron"
99
+ type="text"
100
+ value="@daily"
101
+ />
102
+ <br />
103
+ <br />
76
104
  <div
77
- class="table__full"
105
+ class="DescriptionInput"
78
106
  >
79
- <div
80
- class="table__header"
107
+ <label
108
+ for="Config"
81
109
  >
82
- <svg
83
- class="bi bi-table"
84
- fill="currentColor"
85
- height="16"
86
- viewBox="0 0 16 16"
87
- width="16"
88
- xmlns="http://www.w3.org/2000/svg"
89
- >
90
- <path
91
- 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"
92
- />
93
- </svg>
94
-
95
- <span
96
- class="entity-info"
97
- >
98
- common.a
99
- </span>
100
- </div>
101
- <div
102
- class="table__body upstream_tables"
110
+ Lookback Window
111
+ </label>
112
+ <input
113
+ default=""
114
+ id="lookback_window"
115
+ name="lookback_window"
116
+ placeholder="1 DAY"
117
+ type="text"
118
+ value="1 DAY"
103
119
  />
104
120
  </div>
121
+ <br />
105
122
  <div
106
- class="table__full"
123
+ class="DescriptionInput"
107
124
  >
108
- <div
109
- class="table__header"
110
- >
111
- <svg
112
- class="bi bi-table"
113
- fill="currentColor"
114
- height="16"
115
- viewBox="0 0 16 16"
116
- width="16"
117
- xmlns="http://www.w3.org/2000/svg"
125
+ <details>
126
+ <summary>
127
+ <label
128
+ for="SparkConfig"
129
+ style="display: inline-block;"
130
+ >
131
+ Spark Config
132
+ </label>
133
+ </summary>
134
+ <textarea
135
+ id="SparkConfig"
136
+ name="spark_config"
137
+ style="display: none;"
138
+ type="textarea"
118
139
  >
119
- <path
120
- 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"
121
- />
122
- </svg>
123
-
124
- <span
125
- class="entity-info"
140
+ [object Object]
141
+ </textarea>
142
+ <div
143
+ class="relative flex bg-[#282a36]"
144
+ role="button"
145
+ tabindex="0"
126
146
  >
127
- common.b
128
- </span>
129
- </div>
130
- <div
131
- class="table__body upstream_tables"
132
- />
147
+ <div
148
+ class="cm-theme-light"
149
+ id="spark_config"
150
+ name="spark_config"
151
+ options="[object Object]"
152
+ style="margin: 0px 0px 23px 0px; flex: 1; font-size: 150%; text-align: left;"
153
+ >
154
+ <div
155
+ class="cm-editor ͼ1 ͼ2 ͼ4 ͼ1g ͼ15"
156
+ >
157
+ <div
158
+ aria-live="polite"
159
+ style="position: absolute; top: -10000px;"
160
+ />
161
+ <div
162
+ class="cm-scroller"
163
+ tabindex="-1"
164
+ >
165
+ <div
166
+ aria-hidden="true"
167
+ class="cm-gutters"
168
+ style="min-height: 56px; position: sticky;"
169
+ >
170
+ <div
171
+ class="cm-gutter cm-lineNumbers"
172
+ >
173
+ <div
174
+ class="cm-gutterElement"
175
+ style="height: 0px; visibility: hidden; pointer-events: none;"
176
+ >
177
+ 9
178
+ </div>
179
+ <div
180
+ class="cm-gutterElement cm-activeLineGutter"
181
+ style="height: 14px;"
182
+ >
183
+ 1
184
+ </div>
185
+ <div
186
+ class="cm-gutterElement"
187
+ style="height: 14px;"
188
+ >
189
+ 2
190
+ </div>
191
+ <div
192
+ class="cm-gutterElement"
193
+ style="height: 14px;"
194
+ >
195
+ 3
196
+ </div>
197
+ <div
198
+ class="cm-gutterElement"
199
+ style="height: 14px;"
200
+ >
201
+ 4
202
+ </div>
203
+ </div>
204
+ <div
205
+ class="cm-gutter cm-foldGutter"
206
+ >
207
+ <div
208
+ class="cm-gutterElement"
209
+ style="height: 0px; visibility: hidden; pointer-events: none;"
210
+ >
211
+ <span
212
+ title="Unfold line"
213
+ >
214
+ ›
215
+ </span>
216
+ </div>
217
+ <div
218
+ class="cm-gutterElement cm-activeLineGutter"
219
+ style="height: 14px;"
220
+ >
221
+ <span
222
+ title="Fold line"
223
+ >
224
+ ⌄
225
+ </span>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ <div
230
+ aria-autocomplete="list"
231
+ aria-multiline="true"
232
+ autocapitalize="off"
233
+ autocorrect="off"
234
+ class="cm-content"
235
+ contenteditable="true"
236
+ data-language="json"
237
+ role="textbox"
238
+ spellcheck="false"
239
+ style="tab-size: 4"
240
+ translate="no"
241
+ >
242
+ <div
243
+ class="cm-activeLine cm-line"
244
+ >
245
+ {
246
+ </div>
247
+ <div
248
+ class="cm-line"
249
+ >
250
+ "spark.executor.memory":
251
+ <span
252
+ class="ͼe"
253
+ >
254
+ "16g"
255
+ </span>
256
+ ,
257
+ </div>
258
+ <div
259
+ class="cm-line"
260
+ >
261
+ "spark.memory.fraction":
262
+ <span
263
+ class="ͼe"
264
+ >
265
+ "0.3"
266
+ </span>
267
+ </div>
268
+ <div
269
+ class="cm-line"
270
+ >
271
+ }
272
+ </div>
273
+ </div>
274
+ <div
275
+ aria-hidden="true"
276
+ class="cm-selectionLayer"
277
+ />
278
+ <div
279
+ aria-hidden="true"
280
+ class="cm-cursorLayer"
281
+ style="animation-duration: 1200ms;"
282
+ />
283
+ </div>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </details>
288
+
133
289
  </div>
134
- </td>
135
- <td>
136
- <a
137
- href="http://fake.url/job"
138
- >
139
- [
140
- 1
141
- ]
142
- </a>
143
- </td>
144
- <td>
145
290
  <button
146
- aria-label="code-button"
147
- class="code-button"
148
- height="45px"
149
- tabindex="0"
291
+ aria-hidden="false"
292
+ aria-label="SaveEditColumn"
293
+ class="add_node"
294
+ type="submit"
150
295
  >
151
- <svg
152
- fill="none"
153
- height="45px"
154
- viewBox="0 0 64 64"
155
- width="45px"
156
- xmlns="http://www.w3.org/2000/svg"
157
- >
158
- <g
159
- id="SVGRepo_bgCarrier"
160
- stroke-width="0"
161
- />
162
- <g
163
- id="SVGRepo_tracerCarrier"
164
- stroke-linecap="round"
165
- stroke-linejoin="round"
166
- />
167
- <g
168
- id="SVGRepo_iconCarrier"
169
- >
170
- <path
171
- 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"
172
- fill="url(#a)"
173
- />
174
- <path
175
- 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"
176
- fill="url(#b)"
177
- />
178
- <defs>
179
- <lineargradient
180
- gradientUnits="userSpaceOnUse"
181
- id="a"
182
- x1="19.075"
183
- x2="34.898"
184
- y1="18.782"
185
- y2="34.658"
186
- >
187
- <stop
188
- stop-color="#387EB8"
189
- />
190
- <stop
191
- offset="1"
192
- stop-color="#366994"
193
- />
194
- </lineargradient>
195
- <lineargradient
196
- gradientUnits="userSpaceOnUse"
197
- id="b"
198
- x1="28.809"
199
- x2="45.803"
200
- y1="28.882"
201
- y2="45.163"
202
- >
203
- <stop
204
- stop-color="#FFE052"
205
- />
206
- <stop
207
- offset="1"
208
- stop-color="#FFC331"
209
- />
210
- </lineargradient>
211
- </defs>
212
- </g>
213
- </svg>
296
+ Save
214
297
  </button>
215
- <div
216
- aria-label="client-code"
217
- id="node-create-code"
218
- role="dialog"
219
- style="display: none;"
220
- >
221
- <pre
222
- style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(1, 22, 39); color: rgb(214, 222, 235);"
223
- >
224
- <code
225
- class="language-python"
226
- style="white-space: pre;"
227
- />
228
- </pre>
229
- </div>
230
- </td>
231
- </tr>
232
- </tbody>
233
- </table>
298
+ </form>
299
+ </div>
300
+ <div
301
+ class="message alert"
302
+ style="margin-top: 10px;"
303
+ >
304
+ No materialization workflows configured for this node.
305
+ </div>
306
+ </div>
307
+ <div>
308
+ <h2>
309
+ Materialized Datasets
310
+ </h2>
311
+ <div
312
+ class="message alert"
313
+ style="margin-top: 10px;"
314
+ >
315
+ No materialized datasets available for this node.
316
+ </div>
317
+ </div>
318
+ </div>
234
319
  `;
package/src/app/pages/NodePage/index.jsx CHANGED
@@ -58,6 +58,7 @@ export function NodePage() {
58
58
  data.required_dimensions = metric.required_dimensions;
59
59
  data.upstream_node = metric.upstream_node;
60
60
  data.expression = metric.expression;
61
+ data.incompatible_druid_functions = metric.incompatible_druid_functions;
61
62
  }
62
63
  if (data.type === 'cube') {
63
64
  const cube = await djClient.cube(name);