datajunction-ui 0.0.1-rc.9 → 0.0.2-0.dev1

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

@@ -1,83 +1,397 @@
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 import { useContext, useEffect, useState } from 'react';
-import NamespaceHeader from '../../components/NamespaceHeader';
 import NodeStatus from '../NodePage/NodeStatus';
 import DJClientContext from '../../providers/djclient';
+import Explorer from '../NamespacePage/Explorer';
+import AddNodeDropdown from '../../components/AddNodeDropdown';
+import NodeListActions from '../../components/NodeListActions';
+import AddNamespacePopover from './AddNamespacePopover';
+import FilterIcon from '../../icons/FilterIcon';
+import LoadingIcon from '../../icons/LoadingIcon';
+import UserSelect from './UserSelect';
+import NodeTypeSelect from './NodeTypeSelect';
+import NodeModeSelect from './NodeModeSelect';
+import TagSelect from './TagSelect';
+
+import 'styles/node-list.css';
+import 'styles/sorted-table.css';
 
 export function NamespacePage() {
+  const ASC = 'ascending';
+  const DESC = 'descending';
+
+  const fields = ['name', 'displayName', 'type', 'status', 'mode', 'updatedAt'];
+
   const djClient = useContext(DJClientContext).DataJunctionAPI;
-  const { namespace } = useParams();
+  var { namespace } = useParams();
 
   const [state, setState] = useState({
-    namespace: namespace,
+    namespace: namespace ? namespace : '',
     nodes: [],
   });
+  const [retrieved, setRetrieved] = useState(false);
+  const [currentUser, setCurrentUser] = useState(null);
+
+  const [filters, setFilters] = useState({
+    tags: [],
+    node_type: '',
+    edited_by: '',
+    mode: '',
+  });
+
+  const [namespaceHierarchy, setNamespaceHierarchy] = useState([]);
+
+  const [sortConfig, setSortConfig] = useState({
+    key: 'updatedAt',
+    direction: DESC,
+  });
+
+  const [before, setBefore] = useState(null);
+  const [after, setAfter] = useState(null);
+  const [prevCursor, setPrevCursor] = useState(true);
+  const [nextCursor, setNextCursor] = useState(true);
+
+  const [hasNextPage, setHasNextPage] = useState(true);
+  const [hasPrevPage, setHasPrevPage] = useState(true);
+
+  const requestSort = key => {
+    let direction = ASC;
+    if (sortConfig.key === key && sortConfig.direction === ASC) {
+      direction = DESC;
+    }
+    if (sortConfig.key !== key || sortConfig.direction !== direction) {
+      setSortConfig({ key, direction });
+    }
+  };
+
+  const getClassNamesFor = name => {
+    if (sortConfig.key === name) {
+      return sortConfig.direction;
+    }
+    return undefined;
+  };
+
+  const createNamespaceHierarchy = namespaceList => {
+    const hierarchy = [];
+
+    for (const item of namespaceList) {
+      const namespaces = item.namespace.split('.');
+      let currentLevel = hierarchy;
+
+      let path = '';
+      for (const ns of namespaces) {
+        path += ns;
+
+        let existingNamespace = currentLevel.find(el => el.namespace === ns);
+        if (!existingNamespace) {
+          existingNamespace = {
+            namespace: ns,
+            children: [],
+            path: path,
+          };
+          currentLevel.push(existingNamespace);
+        }
+
+        currentLevel = existingNamespace.children;
+        path += '.';
+      }
+    }
+    return hierarchy;
+  };
 
   useEffect(() => {
     const fetchData = async () => {
-      const djNodes = await djClient.namespace(namespace);
-      const nodes = djNodes.map(node => {
-        return djClient.node(node);
-      });
-      const foundNodes = await Promise.all(nodes);
+      const namespaces = await djClient.namespaces();
+      const hierarchy = createNamespaceHierarchy(namespaces);
+      setNamespaceHierarchy(hierarchy);
+      const currentUser = await djClient.whoami();
+      // setFilters({...filters, edited_by: currentUser?.username});
+      setCurrentUser(currentUser);
+    };
+    fetchData().catch(console.error);
+  }, [djClient, djClient.namespaces]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setRetrieved(false);
+      const nodes = await djClient.listNodesForLanding(
+        namespace,
+        filters.node_type ? [filters.node_type.toUpperCase()] : [],
+        filters.tags,
+        filters.edited_by,
+        before,
+        after,
+        50,
+        sortConfig,
+        filters.mode ? filters.mode.toUpperCase() : null,
+      );
+
       setState({
         namespace: namespace,
-        nodes: foundNodes,
+        nodes: nodes.data
+          ? nodes.data.findNodesPaginated.edges.map(n => n.node)
+          : [],
       });
+      if (nodes.data) {
+        setPrevCursor(
+          nodes.data ? nodes.data.findNodesPaginated.pageInfo.startCursor : '',
+        );
+        setNextCursor(
+          nodes.data ? nodes.data.findNodesPaginated.pageInfo.endCursor : '',
+        );
+        setHasPrevPage(
+          nodes.data
+            ? nodes.data.findNodesPaginated.pageInfo.hasPrevPage
+            : false,
+        );
+        setHasNextPage(
+          nodes.data
+            ? nodes.data.findNodesPaginated.pageInfo.hasNextPage
+            : false,
+        );
+      }
+      setRetrieved(true);
     };
     fetchData().catch(console.error);
-  }, [djClient, namespace]);
+  }, [djClient, filters, before, after, sortConfig.key, sortConfig.direction]);
 
-  const nodesList = state.nodes.map(node => (
+  const loadNext = () => {
+    if (nextCursor) {
+      setAfter(nextCursor);
+      setBefore(null);
+    }
+  };
+  const loadPrev = () => {
+    if (prevCursor) {
+      setAfter(null);
+      setBefore(prevCursor);
+    }
+  };
+
+  const nodesList = retrieved ? (
+    state.nodes.length > 0 ? (
+      state.nodes.map(node => (
+        <tr key={node.name}>
+          <td>
+            <a href={'/nodes/' + node.name} className="link-table">
+              {node.name}
+            </a>
+            <span
+              className="rounded-pill badge bg-secondary-soft"
+              style={{ marginLeft: '0.5rem' }}
+            >
+              {node.currentVersion}
+            </span>
+          </td>
+          <td>
+            <a href={'/nodes/' + node.name} className="link-table">
+              {node.type !== 'source' ? node.current.displayName : ''}
+            </a>
+          </td>
+          <td>
+            <span
+              className={
+                'node_type__' + node.type.toLowerCase() + ' badge node_type'
+              }
+            >
+              {node.type}
+            </span>
+          </td>
+          <td>
+            <NodeStatus node={node} revalidate={false} />
+          </td>
+          <td>
+            <span
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: '24px',
+                height: '24px',
+                borderRadius: '50%',
+                border: `2px solid ${
+                  node.current.mode === 'PUBLISHED' ? '#28a745' : '#ffc107'
+                }`,
+                backgroundColor: 'transparent',
+                color:
+                  node.current.mode === 'PUBLISHED' ? '#28a745' : '#d39e00',
+                fontWeight: '600',
+                fontSize: '12px',
+              }}
+              title={node.current.mode === 'PUBLISHED' ? 'Published' : 'Draft'}
+            >
+              {node.current.mode === 'PUBLISHED' ? 'P' : 'D'}
+            </span>
+          </td>
+          <td>
+            <span className="status">
+              {new Date(node.current.updatedAt).toLocaleString('en-us')}
+            </span>
+          </td>
+          <td>
+            <NodeListActions nodeName={node?.name} />
+          </td>
+        </tr>
+      ))
+    ) : (
+      <tr>
+        <td>
+          <span
+            style={{
+              display: 'block',
+              marginTop: '2rem',
+              marginLeft: '2rem',
+              fontSize: '16px',
+            }}
+          >
+            There are no nodes in{' '}
+            <a href={`/namespaces/${namespace}`}>{namespace}</a> with the above
+            filters!
+          </span>
+        </td>
+      </tr>
+    )
+  ) : (
     <tr>
       <td>
-        <a href={'/namespaces/' + node.namespace}>{node.namespace}</a>
-      </td>
-      <td>
-        <a href={'/nodes/' + node.name} className="link-table">
-          {node.display_name}
-        </a>
-        <span
-          className="rounded-pill badge bg-secondary-soft"
-          style={{ marginLeft: '0.5rem' }}
-        >
-          {node.version}
+        <span style={{ display: 'block', marginTop: '2rem' }}>
+          <LoadingIcon />
         </span>
       </td>
-      <td>
-        <span className={'node_type__' + node.type + ' badge node_type'}>
-          {node.type}
-        </span>
-      </td>
-      <td>
-        <NodeStatus node={node} />
-      </td>
-      <td>
-        <span className="status">{node.mode}</span>
-      </td>
     </tr>
-  ));
+  );
 
-  // @ts-ignore
   return (
     <div className="mid">
-      <NamespaceHeader namespace={namespace} />
       <div className="card">
         <div className="card-header">
-          <h2>Nodes</h2>
+          <h2>Explore</h2>
+          <div className="menu" style={{ margin: '0 0 20px 0' }}>
+            <div
+              className="menu-link"
+              style={{
+                marginTop: '0.7em',
+                color: '#777',
+                fontFamily: "'Jost'",
+                fontSize: '18px',
+                marginRight: '10px',
+                marginLeft: '15px',
+              }}
+            >
+              <FilterIcon />
+            </div>
+            <div
+              className="menu-link"
+              style={{
+                marginTop: '0.6em',
+                color: '#777',
+                fontFamily: "'Jost'",
+                fontSize: '18px',
+                marginRight: '10px',
+              }}
+            >
+              Filter
+            </div>
+            <NodeTypeSelect
+              onChange={entry =>
+                setFilters({ ...filters, node_type: entry ? entry.value : '' })
+              }
+            />
+            <TagSelect
+              onChange={entry =>
+                setFilters({
+                  ...filters,
+                  tags: entry ? entry.map(tag => tag.value) : [],
+                })
+              }
+            />
+            <UserSelect
+              onChange={entry =>
+                setFilters({ ...filters, edited_by: entry ? entry.value : '' })
+              }
+              currentUser={currentUser?.username}
+            />
+            <NodeModeSelect
+              onChange={entry =>
+                setFilters({ ...filters, mode: entry ? entry.value : '' })
+              }
+            />
+            <AddNodeDropdown namespace={namespace} />
+          </div>
           <div className="table-responsive">
+            <div className={`sidebar`}>
+              <div
+                style={{
+                  padding: '1rem 1rem 1rem 0',
+                }}
+              >
+                <span
+                  style={{
+                    textTransform: 'uppercase',
+                    fontSize: '0.8125rem',
+                    fontWeight: '600',
+                    color: '#95aac9',
+                  }}
+                >
+                  Namespaces
+                </span>
+              </div>
+              {namespaceHierarchy
+                ? namespaceHierarchy.map(child => (
+                    <Explorer
+                      item={child}
+                      current={state.namespace}
+                      defaultExpand={true}
+                      isTopLevel={true}
+                      key={child.namespace}
+                    />
+                  ))
+                : null}
+            </div>
             <table className="card-table table">
               <thead>
                 <tr>
-                  <th>Namespace</th>
-                  <th>Name</th>
-                  <th>Type</th>
-                  <th>Status</th>
-                  <th>Mode</th>
+                  {fields.map(field => {
+                    return (
+                      <th key={field}>
+                        <button
+                          type="button"
+                          onClick={() => requestSort(field)}
+                          className={'sortable ' + getClassNamesFor(field)}
+                        >
+                          {field.replace(/([a-z](?=[A-Z]))/g, '$1 ')}
+                        </button>
+                      </th>
+                    );
+                  })}
+                  <th>Actions</th>
                 </tr>
               </thead>
               <tbody>{nodesList}</tbody>
+              <tfoot>
+                <tr>
+                  <td>
+                    {retrieved && hasPrevPage ? (
+                      <a
+                        onClick={loadPrev}
+                        className="previous round pagination"
+                      >
+                        ← Previous
+                      </a>
+                    ) : (
+                      ''
+                    )}
+                    {retrieved && hasNextPage ? (
+                      <a onClick={loadNext} className="next round pagination">
+                        Next →
+                      </a>
+                    ) : (
+                      ''
+                    )}
+                  </td>
+                </tr>
+              </tfoot>
             </table>
           </div>
         </div>

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

@@ -0,0 +1,165 @@
+import { useContext, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
+import DJClientContext from '../../providers/djclient';
+import { Field, Form, Formik } from 'formik';
+import { displayMessageAfterSubmit } from '../../../utils/form';
+import PartitionValueForm from './PartitionValueForm';
+import LoadingIcon from '../../icons/LoadingIcon';
+
+export default function AddBackfillPopover({
+  node,
+  materialization,
+  onSubmit,
+}) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [popoverAnchor, setPopoverAnchor] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setPopoverAnchor(false);
+      }
+    };
+    document.addEventListener('click', handleClickOutside, true);
+    return () => {
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  }, [setPopoverAnchor]);
+
+  const partitionColumns = node.columns.filter(col => col.partition !== null);
+  const initialValues = {
+    node: node.name,
+    materializationName: materialization.name,
+    partitionValues: {},
+  };
+
+  for (const partitionCol of partitionColumns) {
+    if (partitionCol.partition.type_ === 'temporal') {
+      initialValues.partitionValues[partitionCol.name] = {
+        from: '',
+        to: '',
+      };
+    } else {
+      initialValues.partitionValues[partitionCol.name] = '';
+    }
+  }
+
+  const runBackfill = async (values, setStatus) => {
+    const response = await djClient.runBackfill(
+      values.node,
+      values.materializationName,
+      Object.entries(values.partitionValues).map(entry => {
+        if (typeof entry[1] === 'object' && entry[1] !== null) {
+          return {
+            columnName: entry[0],
+            range: [entry[1].from, entry[1].to],
+          };
+        }
+        return {
+          columnName: entry[0],
+          values: [entry[1]],
+        };
+      }),
+    );
+    if (response.status === 200 || response.status === 201) {
+      setStatus({ success: 'Saved!' });
+    } else {
+      setStatus({
+        failure: `${response.json.message}`,
+      });
+    }
+  };
+
+  const submitBackfill = async (values, { setSubmitting, setStatus }) => {
+    await runBackfill(values, setStatus).then(_ => {
+      window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+      setSubmitting(false);
+    });
+  };
+
+  return (
+    <>
+      <button
+        className="edit_button add_button"
+        aria-label="AddBackfill"
+        tabIndex="0"
+        onClick={() => {
+          setPopoverAnchor(!popoverAnchor);
+        }}
+      >
+        <span className="add_button">+ Run</span>
+      </button>
+      <div
+        className="fade modal-backdrop in"
+        style={{ display: popoverAnchor === false ? 'none' : 'block' }}
+      ></div>
+      <div
+        className="centerPopover"
+        role="dialog"
+        aria-label="client-code"
+        style={{
+          display: popoverAnchor === false ? 'none' : 'block',
+          width: '50%',
+          minWidth: '800px',
+        }}
+        ref={ref}
+      >
+        <Formik initialValues={initialValues} onSubmit={submitBackfill}>
+          {function Render({ isSubmitting, status, setFieldValue }) {
+            return (
+              <Form>
+                {displayMessageAfterSubmit(status)}
+                <h2>Run Backfill</h2>
+                <span data-testid="edit-partition">
+                  <label
+                    htmlFor="materializationName"
+                    style={{ paddingBottom: '1rem' }}
+                  >
+                    Materialization Name
+                  </label>
+                  <Field
+                    as="select"
+                    name="materializationName"
+                    id="materializationName"
+                    disabled={true}
+                  >
+                    <option value={materialization?.name}>
+                      {materialization?.name}{' '}
+                    </option>
+                  </Field>
+                </span>
+                <br />
+                <br />
+                <label htmlFor="partition" style={{ paddingBottom: '1rem' }}>
+                  Partition
+                </label>
+                {node.columns
+                  .filter(col => col.partition !== null)
+                  .map(col => {
+                    return (
+                      <PartitionValueForm
+                        col={col}
+                        materialization={materialization}
+                        key={col.name}
+                      />
+                    );
+                  })}
+                <br />
+                <button
+                  className="add_node"
+                  type="submit"
+                  aria-label="SaveEditColumn"
+                  aria-hidden="false"
+                  disabled={isSubmitting}
+                >
+                  {isSubmitting ? <LoadingIcon /> : 'Save'}
+                </button>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+}