datajunction-ui 0.0.1-a46.dev1 → 0.0.1-a47

package/src/mocks/mockNodes.jsx

@@ -41,7 +41,9 @@ export const mocks = {
         type: 'string',
         attributes: [],
         dimension: null,
-        partition: null,
+        partition: {
+          type_: 'categorical',
+        },
       },
     ],
     updated_at: '2024-01-24T16:39:14.029366+00:00',
@@ -461,12 +463,14 @@ export const mocks = {
     {
       backfills: [
         {
-          spec: {
-            column_name: 'default_DOT_hard_hat_DOT_hire_date',
-            values: null,
-            range: ['20230101', '20230102'],
-          },
-          urls: [],
+          spec: [
+            {
+              column_name: 'default_DOT_hard_hat_DOT_hire_date',
+              values: null,
+              range: ['20230101', '20230102'],
+            },
+          ],
+          urls: ['a', 'b'],
         },
       ],
       name: 'country_birth_date_contractor_id_379232101',
@@ -477,6 +481,7 @@ export const mocks = {
           "SELECT  default_DOT_hard_hats.address,\n\tdefault_DOT_hard_hats.birth_date,\n\tdefault_DOT_hard_hats.city,\n\tdefault_DOT_hard_hats.contractor_id,\n\tdefault_DOT_hard_hats.country,\n\tdefault_DOT_hard_hats.first_name,\n\tdefault_DOT_hard_hats.hard_hat_id,\n\tdefault_DOT_hard_hats.hire_date,\n\tdefault_DOT_hard_hats.last_name,\n\tdefault_DOT_hard_hats.manager,\n\tdefault_DOT_hard_hats.postal_code,\n\tdefault_DOT_hard_hats.state,\n\tdefault_DOT_hard_hats.title \n FROM roads.hard_hats AS default_DOT_hard_hats \n WHERE  default_DOT_hard_hats.country IN ('DE', 'MY') AND default_DOT_hard_hats.contractor_id BETWEEN 1 AND 10\n\n",
         upstream_tables: ['default.roads.hard_hats'],
       },
+      strategy: 'incremental_time',
       schedule: '0 * * * *',
       job: 'SparkSqlMaterializationJob',
       output_tables: ['common.a', 'common.b'],
@@ -1553,4 +1558,53 @@ export const mocks = {
       tag_type: 'reports',
     },
   ],
+  materializationInfo: {
+    job_types: [
+      {
+        name: 'spark_sql',
+        label: 'Spark SQL',
+        description: 'Spark SQL materialization job',
+        allowed_node_types: ['transform', 'dimension', 'cube'],
+        job_class: 'SparkSqlMaterializationJob',
+      },
+      {
+        name: 'druid_measures_cube',
+        label: 'Druid Measures Cube (Pre-Agg Cube)',
+        description:
+          "Used to materialize a cube's measures to Druid for low-latency access to a set of metrics and dimensions. While the logical cube definition is at the level of metrics and dimensions, this materialized Druid cube will contain measures and dimensions, with rollup configured on the measures where appropriate.",
+        allowed_node_types: ['cube'],
+        job_class: 'DruidMeasuresCubeMaterializationJob',
+      },
+      {
+        name: 'druid_metrics_cube',
+        label: 'Druid Metrics Cube (Post-Agg Cube)',
+        description:
+          "Used to materialize a cube of metrics and dimensions to Druid for low-latency access. The materialized cube is at the metric level, meaning that all metrics will be aggregated to the level of the cube's dimensions.",
+        allowed_node_types: ['cube'],
+        job_class: 'DruidMetricsCubeMaterializationJob',
+      },
+    ],
+    strategies: [
+      {
+        name: 'full',
+        label: 'Full',
+      },
+      {
+        name: 'snapshot',
+        label: 'Snapshot',
+      },
+      {
+        name: 'snapshot_partition',
+        label: 'Snapshot Partition',
+      },
+      {
+        name: 'incremental_time',
+        label: 'Incremental Time',
+      },
+      {
+        name: 'view',
+        label: 'View',
+      },
+    ],
+  },
 };

package/src/styles/index.css

@@ -593,6 +593,12 @@ tbody th {
   color: #777777;
 }
 
+.strategy {
+  background-color: rgb(255, 239, 215) !important;
+  color: #6c3b21;
+  font-size: 1rem;
+}
+
 .status__valid {
   color: #00b368;
 }
@@ -1018,17 +1024,19 @@ pre {
 }
 
 .add_button {
-  background-color: #f0f8ff !important;
-  color: #24518f;
-  text-transform: uppercase;
+  background-color: #2f7986 !important;
+  color: #fff;
+  text-transform: none;
   vertical-align: middle;
-  padding: 0.2rem 0.5rem 0.1rem 0.5rem;
-  border: 1px solid #819bc0;
-  font-size: 1.2rem;
+  padding-right: 1rem;
+  padding-left: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  margin-bottom: 0.5rem !important;
+  font-size: 1rem;
   border-radius: 0.5rem;
   word-wrap: break-word;
   white-space: break-spaces;
-  margin-left: 1rem;
 }
 
 .edit_button {
@@ -1090,10 +1098,6 @@ pre {
   transition: opacity 0.15s linear;
 }
 
-.partitionLink:hover {
-  text-decoration: none;
-}
-
 .dimensionsList {
   padding: 12px;
   opacity: 1;
@@ -1216,4 +1220,102 @@ pre {
   background-color: #ffffff;
   margin-bottom: 3px;
   margin-left: -20px;
+}
+
+.partitionLink {
+  /*border: 1px solid #ccc4d5;*/
+  padding: 12px;
+  margin: 5px;
+  border-radius: 0.375rem;
+  background-color: #ccc4d525;
+}
+.partitionLink:hover {
+  background-color: rgba(157, 147, 168, 0.15);
+}
+.partitionLink a:hover {
+  text-decoration: none;
+}
+
+.backfills {
+  margin-left: -4rem;
+  --spacing : 1.5rem;
+  --radius  : 10px;
+}
+
+.backfills li{
+  display      : block;
+  position     : relative;
+  padding-left : calc(2 * var(--spacing) - var(--radius) - 2px);
+}
+
+.backfills ul{
+  margin-left  : calc(var(--radius) - var(--spacing));
+  padding-left : 2rem;
+}
+
+.backfills ul li{
+  border-left : 2px solid #ddd;
+}
+
+.backfills ul li:last-child{
+  border-color : transparent;
+}
+
+.backfills ul li::before{
+  content      : '';
+  display      : block;
+  position     : absolute;
+  top          : calc(var(--spacing) / -2);
+  left         : -2px;
+  width        : calc(var(--spacing) + 2px);
+  height       : calc(var(--spacing) + 1px);
+  border       : solid #ddd;
+  border-width : 0 0 2px 2px;
+}
+
+.backfills summary{
+  display : block;
+  cursor  : pointer;
+  margin-bottom: 10px;
+}
+
+.backfills summary::marker,
+.backfills summary::-webkit-details-marker{
+  display : none;
+}
+
+.backfills summary:focus{
+  outline : none;
+}
+
+.backfills summary:focus-visible{
+  outline : 1px dotted #000;
+}
+
+.backfills summary::before{
+  z-index    : 1;
+  /*background : #696 url('expand-collapse.svg') 0 0;*/
+}
+
+.backfills details[open] > summary::before{
+  background-position : calc(-2 * var(--radius)) 0;
+}
+
+.backfills_header {
+  font-size: 16px;
+  margin-left: 18px;
+  border-left: 2px solid #ddd;
+  padding-left: 40px;
+  margin-bottom: 10px;
+}
+
+.tr {
+  display: inline-flex;
+}
+.tr li {
+  padding-right: 10px;
+}
+.td {
+  display: table-cell;
+  padding: 8px;
 }

package/src/styles/node-list.css

@@ -0,0 +1,4 @@
+table {
+  width: 100%;
+  height: min-content;
+}

package/src/app/components/forms/NodeTagsInput.jsx

@@ -1,61 +0,0 @@
-import { ErrorMessage } from 'formik';
-import { FormikSelect } from '../../pages/AddEditNodePage/FormikSelect';
-import { Action } from './Action';
-import { useContext, useEffect, useState } from 'react';
-import DJClientContext from '../../providers/djclient';
-
-export default function NodeTagsInput({ action, node }) {
-  const djClient = useContext(DJClientContext).DataJunctionAPI;
-  const [tags, setTags] = useState([]);
-
-  // Get list of tags
-  useEffect(() => {
-    const fetchData = async () => {
-      const tags = await djClient.listTags();
-      setTags(
-        tags.map(tag => ({
-          value: tag.name,
-          label: tag.display_name,
-        })),
-      );
-    };
-    fetchData().catch(console.error);
-  }, [djClient, djClient.listTags]);
-
-  return (
-    <div
-      className="TagsInput"
-      style={{ width: '25%', margin: '1rem 0 1rem 1.2rem' }}
-    >
-      <ErrorMessage name="tags" component="span" />
-      <label htmlFor="react-select-3-input">Tags</label>
-      <span data-testid="select-tags">
-        {action === Action.Edit && node?.tags?.length >= 0 ? (
-          <FormikSelect
-            className=""
-            isMulti={true}
-            selectOptions={tags}
-            formikFieldName="tags"
-            placeholder="Choose Tags"
-            defaultValue={node?.tags?.map(t => {
-              return { value: t.name, label: t.display_name };
-            })}
-          />
-        ) : (
-          ''
-        )}
-        {action === Action.Add ? (
-          <FormikSelect
-            className=""
-            isMulti={true}
-            selectOptions={tags}
-            formikFieldName="tags"
-            placeholder="Choose Tags"
-          />
-        ) : (
-          ''
-        )}
-      </span>
-    </div>
-  );
-}

package/src/app/pages/AddEditNodePage/QueryTesterSection.jsx

@@ -1,62 +0,0 @@
-/**
- * Query tester component
- */
-import { ErrorMessage, useFormikContext } from 'formik';
-import React, { useContext, useEffect, useState } from 'react';
-import DJClientContext from '../../providers/djclient';
-import { FormikSelect } from './FormikSelect';
-import QueryBuilder from 'react-querybuilder';
-
-export const QueryTesterSection = ({}) => {
-  const djClient = useContext(DJClientContext).DataJunctionAPI;
-
-  const [fields, setFields] = useState([]);
-  const [filters, setFilters] = useState({
-    combinator: 'and',
-    rules: [],
-  });
-
-  // Used to pull out current form values for node validation
-  const { values } = useFormikContext();
-
-  // Select options, i.e., the available dimensions
-  const [selectOptions, setSelectOptions] = useState([]);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      if (values.query) {
-        const data = await djClient.node(values.upstream_node);
-        setSelectOptions(
-          data.columns.map(col => {
-            return {
-              value: col.name,
-              label: col.name,
-            };
-          }),
-        );
-      }
-    };
-    fetchData().catch(console.error);
-  }, [djClient, values.upstream_node]);
-
-  return (
-    <>
-      <h4>Test Query</h4>
-      <label>Add Filters</label>
-      <QueryBuilder
-        fields={fields}
-        query={filters}
-        onQueryChange={q => setFilters(q)}
-      />
-      <span
-        className="button-3 execute-button"
-        // onClick={getData}
-        role="button"
-        aria-label="RunQuery"
-        aria-hidden="false"
-      >
-        {'Run Query'}
-      </span>
-    </>
-  );
-};

package/src/app/pages/QueryRunner.jsx

@@ -1,31 +0,0 @@
-import QueryBuilder from 'react-querybuilder';
-import { useState } from 'react';
-
-export function QueryRunner() {
-  const [fields, setFields] = useState([]);
-  const [filters, setFilters] = useState({
-    combinator: 'and',
-    rules: [],
-  });
-
-  return (
-    <>
-      <h4>Test Query</h4>
-      <label>Add Filters</label>
-      <QueryBuilder
-        fields={fields}
-        query={filters}
-        onQueryChange={q => setFilters(q)}
-      />
-      <span
-        className="button-3 execute-button"
-        // onClick={getData}
-        role="button"
-        aria-label="RunQuery"
-        aria-hidden="false"
-      >
-        {'Run Query'}
-      </span>
-    </>
-  );
-}