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

package/src/mocks/mockNodes.jsx

@@ -41,9 +41,7 @@ export const mocks = {
         type: 'string',
         attributes: [],
         dimension: null,
-        partition: {
-          type_: 'categorical',
-        },
+        partition: null,
       },
     ],
     updated_at: '2024-01-24T16:39:14.029366+00:00',
@@ -463,14 +461,12 @@ export const mocks = {
     {
       backfills: [
         {
-          spec: [
-            {
-              column_name: 'default_DOT_hard_hat_DOT_hire_date',
-              values: null,
-              range: ['20230101', '20230102'],
-            },
-          ],
-          urls: ['a', 'b'],
+          spec: {
+            column_name: 'default_DOT_hard_hat_DOT_hire_date',
+            values: null,
+            range: ['20230101', '20230102'],
+          },
+          urls: [],
         },
       ],
       name: 'country_birth_date_contractor_id_379232101',
@@ -481,7 +477,6 @@ 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'],
@@ -1558,53 +1553,4 @@ 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,12 +593,6 @@ tbody th {
   color: #777777;
 }
 
-.strategy {
-  background-color: rgb(255, 239, 215) !important;
-  color: #6c3b21;
-  font-size: 1rem;
-}
-
 .status__valid {
   color: #00b368;
 }
@@ -1024,19 +1018,17 @@ pre {
 }
 
 .add_button {
-  background-color: #2f7986 !important;
-  color: #fff;
-  text-transform: none;
+  background-color: #f0f8ff !important;
+  color: #24518f;
+  text-transform: uppercase;
   vertical-align: middle;
-  padding-right: 1rem;
-  padding-left: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  margin-bottom: 0.5rem !important;
-  font-size: 1rem;
+  padding: 0.2rem 0.5rem 0.1rem 0.5rem;
+  border: 1px solid #819bc0;
+  font-size: 1.2rem;
   border-radius: 0.5rem;
   word-wrap: break-word;
   white-space: break-spaces;
+  margin-left: 1rem;
 }
 
 .edit_button {
@@ -1098,6 +1090,10 @@ pre {
   transition: opacity 0.15s linear;
 }
 
+.partitionLink:hover {
+  text-decoration: none;
+}
+
 .dimensionsList {
   padding: 12px;
   opacity: 1;
@@ -1220,102 +1216,4 @@ 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/app/components/NodeMaterializationDelete.jsx

@@ -1,80 +0,0 @@
-import DJClientContext from '../providers/djclient';
-import * as React from 'react';
-import DeleteIcon from '../icons/DeleteIcon';
-import { Form, Formik } from 'formik';
-import { useContext } from 'react';
-import { displayMessageAfterSubmit } from '../../utils/form';
-
-export default function NodeMaterializationDelete({
-  nodeName,
-  materializationName,
-}) {
-  const [deleteButton, setDeleteButton] = React.useState(<DeleteIcon />);
-
-  const djClient = useContext(DJClientContext).DataJunctionAPI;
-  const deleteNode = async (values, { setStatus }) => {
-    if (
-      !window.confirm(
-        'Deleting materialization job ' +
-          values.materializationName +
-          '. Are you sure?',
-      )
-    ) {
-      return;
-    }
-    const { status, json } = await djClient.deleteMaterialization(
-      values.nodeName,
-      values.materializationName,
-    );
-    if (status === 200 || status === 201 || status === 204) {
-      window.location.reload();
-      setStatus({
-        success: (
-          <>
-            Successfully deleted materialization job:{' '}
-            {values.materializationName}
-          </>
-        ),
-      });
-      setDeleteButton(''); // hide the Delete button
-    } else {
-      setStatus({
-        failure: `${json.message}`,
-      });
-    }
-  };
-
-  const initialValues = {
-    nodeName: nodeName,
-    materializationName: materializationName,
-  };
-
-  return (
-    <div>
-      <Formik initialValues={initialValues} onSubmit={deleteNode}>
-        {function Render({ status, setFieldValue }) {
-          return (
-            <Form className="deleteNode">
-              {displayMessageAfterSubmit(status)}
-              {
-                <>
-                  <button
-                    type="submit"
-                    style={{
-                      marginLeft: 0,
-                      all: 'unset',
-                      color: '#005c72',
-                      cursor: 'pointer',
-                    }}
-                  >
-                    {deleteButton}
-                  </button>
-                </>
-              }
-            </Form>
-          );
-        }}
-      </Formik>
-    </div>
-  );
-}

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

@@ -1,60 +0,0 @@
-import * as React from 'react';
-import { Field } from 'formik';
-
-export default function PartitionValueForm({ col, materialization }) {
-  if (col.partition.type_ === 'temporal') {
-    return (
-      <>
-        <div
-          className="partition__full"
-          key={col.name}
-          style={{ width: '50%' }}
-        >
-          <div className="partition__header">{col.display_name}</div>
-          <div className="partition__body">
-            <span style={{ padding: '0.5rem' }}>From</span>{' '}
-            <Field
-              type="text"
-              name={`partitionValues.['${col.name}'].from`}
-              id={`${col.name}.from`}
-              placeholder="20230101"
-              default="20230101"
-              style={{ width: '7rem', paddingRight: '1rem' }}
-            />{' '}
-            <span style={{ padding: '0.5rem' }}>To</span>
-            <Field
-              type="text"
-              name={`partitionValues.['${col.name}'].to`}
-              id={`${col.name}.to`}
-              placeholder="20230102"
-              default="20230102"
-              style={{ width: '7rem' }}
-            />
-          </div>
-        </div>
-      </>
-    );
-  } else {
-    return (
-      <>
-        <div
-          className="partition__full"
-          key={col.name}
-          style={{ width: '50%' }}
-        >
-          <div className="partition__header">{col.display_name}</div>
-          <div className="partition__body">
-            <Field
-              type="text"
-              name={`partitionValues.['${col.name}']`}
-              id={col.name}
-              placeholder=""
-              default=""
-              style={{ width: '7rem', paddingRight: '1rem' }}
-            />
-          </div>
-        </div>
-      </>
-    );
-  }
-}