datajunction-ui 0.0.23-rc.0 → 0.0.26

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

@@ -64,6 +64,11 @@ export function Root() {
                   <a href="/sql">SQL</a>
                 </span>
               </span>
+              <span className="menu-link">
+                <span className="menu-title">
+                  <a href="/materialization-planner">Planner</a>
+                </span>
+              </span>
               <span className="menu-link">
                 <span className="menu-title">
                   <div className="dropdown">

package/src/app/services/DJService.js

@@ -19,9 +19,16 @@ export const DataJunctionAPI = {
     limit,
     sortConfig,
     mode,
+    {
+      ownedBy = null,
+      statuses = null,
+      missingDescription = false,
+      hasMaterialization = false,
+      orphanedDimension = false,
+    } = {},
   ) {
     const query = `
-      query ListNodes($namespace: String, $nodeTypes: [NodeType!], $tags: [String!], $editedBy: String, $mode: NodeMode, $before: String, $after: String, $limit: Int, $orderBy: NodeSortField, $ascending: Boolean) {
+      query ListNodes($namespace: String, $nodeTypes: [NodeType!], $tags: [String!], $editedBy: String, $mode: NodeMode, $before: String, $after: String, $limit: Int, $orderBy: NodeSortField, $ascending: Boolean, $ownedBy: String, $statuses: [NodeStatus!], $missingDescription: Boolean, $hasMaterialization: Boolean, $orphanedDimension: Boolean) {
         findNodesPaginated(
           namespace: $namespace
           nodeTypes: $nodeTypes
@@ -31,8 +38,13 @@ export const DataJunctionAPI = {
           limit: $limit
           before: $before
           after: $after
-          orderBy: $orderBy,
+          orderBy: $orderBy
           ascending: $ascending
+          ownedBy: $ownedBy
+          statuses: $statuses
+          missingDescription: $missingDescription
+          hasMaterialization: $hasMaterialization
+          orphanedDimension: $orphanedDimension
         ) {
           pageInfo {
             hasNextPage
@@ -92,6 +104,11 @@ export const DataJunctionAPI = {
             limit: limit,
             orderBy: sortOrderMapping[sortConfig.key],
             ascending: sortConfig.direction === 'ascending',
+            ownedBy: ownedBy,
+            statuses: statuses,
+            missingDescription: missingDescription,
+            hasMaterialization: hasMaterialization,
+            orphanedDimension: orphanedDimension,
           },
         }),
       })
@@ -897,6 +914,48 @@ export const DataJunctionAPI = {
     ).json();
   },
 
+  // V3 Measures SQL - returns pre-aggregations with components for materialization planning
+  measuresV3: async function (
+    metricSelection,
+    dimensionSelection,
+    filters = '',
+  ) {
+    const params = new URLSearchParams();
+    metricSelection.forEach(metric => params.append('metrics', metric));
+    dimensionSelection.forEach(dimension =>
+      params.append('dimensions', dimension),
+    );
+    if (filters) {
+      params.append('filters', filters);
+    }
+    return await (
+      await fetch(`${DJ_URL}/sql/measures/v3/?${params}`, {
+        credentials: 'include',
+      })
+    ).json();
+  },
+
+  // V3 Metrics SQL - returns final combined SQL query
+  metricsV3: async function (
+    metricSelection,
+    dimensionSelection,
+    filters = '',
+  ) {
+    const params = new URLSearchParams();
+    metricSelection.forEach(metric => params.append('metrics', metric));
+    dimensionSelection.forEach(dimension =>
+      params.append('dimensions', dimension),
+    );
+    if (filters) {
+      params.append('filters', filters);
+    }
+    return await (
+      await fetch(`${DJ_URL}/sql/metrics/v3/?${params}`, {
+        credentials: 'include',
+      })
+    ).json();
+  },
+
   data: async function (metricSelection, dimensionSelection) {
     const params = new URLSearchParams();
     metricSelection.map(metric => params.append('metrics', metric));

package/src/styles/index.css

@@ -775,9 +775,8 @@ pre {
 
 .card-header {
   align-items: center;
-  margin: 0.5rem;
   margin-left: 0;
-  padding: 0 2.25rem 0 2.25rem;
+  padding: 1.5rem 2.25rem 0 2.25rem;
 }
 
 .card-header h2 {
@@ -1000,6 +999,7 @@ pre {
   margin-top: 6px;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   min-width: 115px;
+  z-index: 1100;
 }
 
 .dropdown:hover .dropdown-content {

package/src/app/icons/FilterIcon.jsx

@@ -1,7 +0,0 @@
-const FilterIcon = props => (
-  <svg height="23px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-    <path d="M20 36h8v-4h-8v4zm-14-24v4h36v-4h-36zm6 14h24v-4h-24v4z" />
-    <path d="M0 0h48v48h-48z" fill="none" />
-  </svg>
-);
-export default FilterIcon;

package/src/app/pages/NamespacePage/FieldControl.jsx

@@ -1,21 +0,0 @@
-import { components } from 'react-select';
-
-const Control = ({ children, ...props }) => {
-  const { label, onLabelClick } = props.selectProps;
-  const style = {
-    cursor: 'pointer',
-    padding: '10px 5px 10px 12px',
-    color: 'rgb(112, 110, 115)',
-  };
-
-  return (
-    <components.Control {...props}>
-      <span onMouseDown={onLabelClick} style={style}>
-        {label}
-      </span>
-      {children}
-    </components.Control>
-  );
-};
-
-export default Control;

package/src/app/pages/NamespacePage/NodeTypeSelect.jsx

@@ -1,30 +0,0 @@
-import Select from 'react-select';
-import Control from './FieldControl';
-
-export default function NodeTypeSelect({ onChange }) {
-  return (
-    <span
-      className="menu-link"
-      style={{ marginLeft: '30px', width: '300px' }}
-      data-testid="select-node-type"
-    >
-      <Select
-        name="node_type"
-        isClearable
-        label="Type"
-        components={{ Control }}
-        onChange={e => onChange(e)}
-        styles={{
-          control: styles => ({ ...styles, backgroundColor: 'white' }),
-        }}
-        options={[
-          { value: 'source', label: 'Source' },
-          { value: 'transform', label: 'Transform' },
-          { value: 'dimension', label: 'Dimension' },
-          { value: 'metric', label: 'Metric' },
-          { value: 'cube', label: 'Cube' },
-        ]}
-      />
-    </span>
-  );
-}

package/src/app/pages/NamespacePage/TagSelect.jsx

@@ -1,44 +0,0 @@
-import { useContext, useEffect, useState } from 'react';
-import DJClientContext from '../../providers/djclient';
-import Control from './FieldControl';
-
-import Select from 'react-select';
-
-export default function TagSelect({ onChange }) {
-  const djClient = useContext(DJClientContext).DataJunctionAPI;
-
-  const [retrieved, setRetrieved] = useState(false);
-  const [tags, setTags] = useState([]);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      const tags = await djClient.listTags();
-      setTags(tags);
-      setRetrieved(true);
-    };
-    fetchData().catch(console.error);
-  }, [djClient]);
-
-  return (
-    <span
-      className="menu-link"
-      style={{ marginLeft: '30px', width: '350px' }}
-      data-testid="select-tag"
-    >
-      <Select
-        name="tags"
-        isClearable
-        isMulti
-        label="Tags"
-        components={{ Control }}
-        onChange={e => onChange(e)}
-        options={tags?.map(tag => {
-          return {
-            value: tag.name,
-            label: tag.display_name,
-          };
-        })}
-      />
-    </span>
-  );
-}

package/src/app/pages/NamespacePage/UserSelect.jsx

@@ -1,47 +0,0 @@
-import { useContext, useEffect, useState } from 'react';
-import DJClientContext from '../../providers/djclient';
-import Control from './FieldControl';
-
-import Select from 'react-select';
-
-export default function UserSelect({ onChange, currentUser }) {
-  const djClient = useContext(DJClientContext).DataJunctionAPI;
-  const [retrieved, setRetrieved] = useState(false);
-  const [users, setUsers] = useState([]);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      const users = await djClient.users();
-      setUsers(users);
-      setRetrieved(true);
-    };
-    fetchData().catch(console.error);
-  }, [djClient]);
-
-  return (
-    <span
-      className="menu-link"
-      style={{ marginLeft: '30px', width: '400px' }}
-      data-testid="select-user"
-    >
-      {retrieved ? (
-        <Select
-          name="edited_by"
-          isClearable
-          label="Edited By"
-          components={{ Control }}
-          onChange={e => onChange(e)}
-          defaultValue={{
-            value: currentUser,
-            label: currentUser,
-          }}
-          options={users?.map(user => {
-            return { value: user.username, label: user.username };
-          })}
-        />
-      ) : (
-        ''
-      )}
-    </span>
-  );
-}