datajunction-ui 0.0.1-a60 → 0.0.1-a62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1a60",
+  "version": "0.0.1a62",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {
@@ -165,7 +165,7 @@
     "coverageThreshold": {
       "global": {
         "statements": 87,
-        "branches": 75,
+        "branches": 74,
         "lines": 80,
         "functions": 85
       }

package/src/app/components/AddNodeDropdown.jsx

@@ -0,0 +1,41 @@
+export default function AddNodeDropdown({ namespace }) {
+  return (
+    <span className="menu-link" style={{ margin: '0.5em 0 0 1em' }}>
+      <span className="menu-title">
+        <div className="dropdown">
+          <span className="add_node">+ Add Node</span>
+          <div className="dropdown-content">
+            <a href={`/create/source`}>
+              <div className="node_type__source node_type_creation_heading">
+                Register Table
+              </div>
+            </a>
+            <a href={`/create/transform/${namespace}`}>
+              <div className="node_type__transform node_type_creation_heading">
+                Transform
+              </div>
+            </a>
+            <a href={`/create/metric/${namespace}`}>
+              <div className="node_type__metric node_type_creation_heading">
+                Metric
+              </div>
+            </a>
+            <a href={`/create/dimension/${namespace}`}>
+              <div className="node_type__dimension node_type_creation_heading">
+                Dimension
+              </div>
+            </a>
+            <a href={`/create/tag`}>
+              <div className="entity__tag node_type_creation_heading">Tag</div>
+            </a>
+            <a href={`/create/cube/${namespace}`}>
+              <div className="node_type__cube node_type_creation_heading">
+                Cube
+              </div>
+            </a>
+          </div>
+        </div>
+      </span>
+    </span>
+  );
+}

package/src/app/icons/FilterIcon.jsx

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,27 @@
+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="Node 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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,43 @@
+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>
+  );
+}

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

@@ -9,6 +9,9 @@ const mockDjClient = {
   namespaces: jest.fn(),
   namespace: jest.fn(),
   addNamespace: jest.fn(),
+  whoami: jest.fn(),
+  users: jest.fn(),
+  listTags: jest.fn(),
 };
 
 describe('NamespacePage', () => {
@@ -34,6 +37,9 @@ describe('NamespacePage', () => {
 
   beforeEach(() => {
     fetch.resetMocks();
+    mockDjClient.whoami.mockResolvedValue({username: 'dj'});
+    mockDjClient.users.mockResolvedValue([{username: 'dj'}, {username: 'user1'}]);
+    mockDjClient.listTags.mockResolvedValue([{name: 'tag1'}, {name: 'tag2'}]);
     mockDjClient.namespaces.mockResolvedValue([
       {
         namespace: 'common.one',
@@ -75,6 +81,8 @@ describe('NamespacePage', () => {
         type: 'transform',
         mode: 'active',
         updated_at: new Date(),
+        tags: [{name: 'tag1'}],
+        edited_by: ['dj'],
       },
     ]);
   });
@@ -111,6 +119,30 @@ describe('NamespacePage', () => {
       // check that it renders nodes
       expect(screen.getByText('Test Node')).toBeInTheDocument();
 
+      // check that it sorts nodes
+      fireEvent.click(screen.getByText('name'));
+      fireEvent.click(screen.getByText('display name'));
+
+      // check that we can filter by node type
+      const selectNodeType = screen.getAllByTestId('select-node-type')[0];
+      expect(selectNodeType).toBeDefined();
+      expect(selectNodeType).not.toBeNull();
+      fireEvent.keyDown(selectNodeType.firstChild, { key: 'ArrowDown' });
+      fireEvent.click(screen.getByText('Source'));
+
+      // check that we can filter by tag
+      const selectTag = screen.getAllByTestId('select-tag')[0];
+      expect(selectTag).toBeDefined();
+      expect(selectTag).not.toBeNull();
+      fireEvent.keyDown(selectTag.firstChild, { key: 'ArrowDown' });
+
+      // check that we can filter by user
+      const selectUser = screen.getAllByTestId('select-user')[0];
+      expect(selectUser).toBeDefined();
+      expect(selectUser).not.toBeNull();
+      fireEvent.keyDown(selectUser.firstChild, { key: 'ArrowDown' });
+      // fireEvent.click(screen.getByText('dj'));
+
       // click to open and close tab
       fireEvent.click(screen.getByText('common'));
       fireEvent.click(screen.getByText('common'));

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

@@ -4,11 +4,24 @@ import { useContext, useEffect, useState } from 'react';
 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 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', 'display_name', 'type', 'status', 'updated_at'];
+
   const djClient = useContext(DJClientContext).DataJunctionAPI;
   var { namespace } = useParams();
 
@@ -16,9 +29,68 @@ export function NamespacePage() {
     namespace: namespace,
     nodes: [],
   });
+  const [retrieved, setRetrieved] = useState(false);
+  const [currentUser, setCurrentUser] = useState(null);
+
+  const [filters, setFilters] = useState({
+    tags: [],
+    node_type: '',
+    edited_by: currentUser?.username,
+  });
 
   const [namespaceHierarchy, setNamespaceHierarchy] = useState([]);
 
+  const [sortConfig, setSortConfig] = useState({
+    key: 'updated_at',
+    direction: DESC,
+  });
+  const sortedNodes = React.useMemo(() => {
+    let sortableData = [...Object.values(state.nodes)];
+    if (filters.node_type !== '' && filters.node_type !== null) {
+      sortableData = sortableData.filter(
+        node => node.type === filters.node_type,
+      );
+    }
+    if (filters.tags) {
+      sortableData = sortableData.filter(node => {
+        const nodeTags = node.tags.map(tag => tag.name);
+        return filters.tags.every(item => nodeTags.includes(item));
+      });
+    }
+    if (filters.edited_by) {
+      sortableData = sortableData.filter(node => {
+        return node.edited_by.includes(filters.edited_by);
+      });
+    }
+    if (sortConfig !== null) {
+      sortableData.sort((a, b) => {
+        if (a[sortConfig.key] < b[sortConfig.key]) {
+          return sortConfig.direction === ASC ? -1 : 1;
+        }
+        if (a[sortConfig.key] > b[sortConfig.key]) {
+          return sortConfig.direction === ASC ? 1 : -1;
+        }
+        return 0;
+      });
+    }
+    return sortableData;
+  }, [state.nodes, filters, sortConfig]);
+
+  const requestSort = key => {
+    let direction = ASC;
+    if (sortConfig.key === key && sortConfig.direction === ASC) {
+      direction = DESC;
+    }
+    setSortConfig({ key, direction });
+  };
+
+  const getClassNamesFor = name => {
+    if (sortConfig.key === name) {
+      return sortConfig.direction;
+    }
+    return undefined;
+  };
+
   const createNamespaceHierarchy = namespaceList => {
     const hierarchy = [];
 
@@ -52,6 +124,8 @@ export function NamespacePage() {
       const namespaces = await djClient.namespaces();
       const hierarchy = createNamespaceHierarchy(namespaces);
       setNamespaceHierarchy(hierarchy);
+      const currentUser = await djClient.whoami();
+      setCurrentUser(currentUser);
     };
     fetchData().catch(console.error);
   }, [djClient, djClient.namespaces]);
@@ -67,95 +141,106 @@ export function NamespacePage() {
         namespace: namespace,
         nodes: foundNodes,
       });
+      setRetrieved(true);
     };
     fetchData().catch(console.error);
   }, [djClient, namespace, namespaceHierarchy]);
 
-  const nodesList = state.nodes.map(node => (
-    <tr>
-      <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.version}
-        </span>
-      </td>
-      <td>
-        <a href={'/nodes/' + node.name} className="link-table">
-          {node.type !== 'source' ? node.display_name : ''}
-        </a>
-      </td>
-      <td>
-        <span className={'node_type__' + node.type + ' badge node_type'}>
-          {node.type}
-        </span>
-      </td>
-      <td>
-        <NodeStatus node={node} revalidate={false} />
-      </td>
-      <td>
-        <span className="status">{node.mode}</span>
-      </td>
-      <td>
-        <span className="status">
-          {new Date(node.updated_at).toLocaleString('en-us')}
-        </span>
-      </td>
-      <td>
-        <NodeListActions nodeName={node?.name} />
-      </td>
-    </tr>
-  ));
+  const nodesList = retrieved ? (
+    sortedNodes.map(node => (
+      <tr>
+        <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.version}
+          </span>
+        </td>
+        <td>
+          <a href={'/nodes/' + node.name} className="link-table">
+            {node.type !== 'source' ? node.display_name : ''}
+          </a>
+        </td>
+        <td>
+          <span className={'node_type__' + node.type + ' badge node_type'}>
+            {node.type}
+          </span>
+        </td>
+        <td>
+          <NodeStatus node={node} revalidate={false} />
+        </td>
+        <td>
+          <span className="status">
+            {new Date(node.updated_at).toLocaleString('en-us')}
+          </span>
+        </td>
+        <td>
+          <NodeListActions nodeName={node?.name} />
+        </td>
+      </tr>
+    ))
+  ) : (
+    <span style={{ display: 'block', marginTop: '2rem' }}>
+      <LoadingIcon />
+    </span>
+  );
 
   return (
     <div className="mid">
       <div className="card">
         <div className="card-header">
           <h2>Explore</h2>
-
-          <span className="menu-link">
-            <span className="menu-title">
-              <div className="dropdown">
-                <span className="add_node">+ Add Node</span>
-                <div className="dropdown-content">
-                  <a href={`/create/source`}>
-                    <div className="node_type__source node_type_creation_heading">
-                      Register Table
-                    </div>
-                  </a>
-                  <a href={`/create/transform/${namespace}`}>
-                    <div className="node_type__transform node_type_creation_heading">
-                      Transform
-                    </div>
-                  </a>
-                  <a href={`/create/metric/${namespace}`}>
-                    <div className="node_type__metric node_type_creation_heading">
-                      Metric
-                    </div>
-                  </a>
-                  <a href={`/create/dimension/${namespace}`}>
-                    <div className="node_type__dimension node_type_creation_heading">
-                      Dimension
-                    </div>
-                  </a>
-                  <a href={`/create/tag`}>
-                    <div className="entity__tag node_type_creation_heading">
-                      Tag
-                    </div>
-                  </a>
-                  <a href={`/create/cube/${namespace}`}>
-                    <div className="node_type__cube node_type_creation_heading">
-                      Cube
-                    </div>
-                  </a>
-                </div>
-              </div>
-            </span>
-          </span>
+          <div class="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 By
+            </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}
+            />
+            <AddNodeDropdown namespace={namespace} />
+          </div>
           <div className="table-responsive">
             <div className={`sidebar`}>
               <span
@@ -167,7 +252,7 @@ export function NamespacePage() {
                   padding: '1rem 1rem 1rem 0',
                 }}
               >
-                Namespaces <AddNamespacePopover namespace={namespace}/>
+                Namespaces <AddNamespacePopover namespace={namespace} />
               </span>
               {namespaceHierarchy
                 ? namespaceHierarchy.map(child => (
@@ -182,12 +267,19 @@ export function NamespacePage() {
             <table className="card-table table">
               <thead>
                 <tr>
-                  <th>Name</th>
-                  <th>Display Name</th>
-                  <th>Type</th>
-                  <th>Status</th>
-                  <th>Mode</th>
-                  <th>Last Updated</th>
+                  {fields.map(field => {
+                    return (
+                      <th>
+                        <button
+                          type="button"
+                          onClick={() => requestSort(field)}
+                          className={'sortable ' + getClassNamesFor(field)}
+                        >
+                          {field.replace('_', ' ')}
+                        </button>
+                      </th>
+                    );
+                  })}
                   <th>Actions</th>
                 </tr>
               </thead>

package/src/app/services/DJService.js

@@ -348,7 +348,7 @@ export const DataJunctionAPI = {
 
   namespace: async function (nmspce) {
     return await (
-      await fetch(`${DJ_URL}/namespaces/${nmspce}/`, {
+      await fetch(`${DJ_URL}/namespaces/${nmspce}/?with_edited_by=true`, {
         credentials: 'include',
       })
     ).json();
@@ -453,16 +453,22 @@ export const DataJunctionAPI = {
   },
 
   notebookExportCube: async function (cube) {
-    return await fetch(`${DJ_URL}/datajunction-clients/python/notebook/?cube=${cube}`, {
-      credentials: 'include',
-    });
+    return await fetch(
+      `${DJ_URL}/datajunction-clients/python/notebook/?cube=${cube}`,
+      {
+        credentials: 'include',
+      },
+    );
   },
 
   notebookExportNamespace: async function (namespace) {
     return await (
-      await fetch(`${DJ_URL}/datajunction-clients/python/notebook/?namespace=${namespace}`, {
-        credentials: 'include',
-      })
+      await fetch(
+        `${DJ_URL}/datajunction-clients/python/notebook/?namespace=${namespace}`,
+        {
+          credentials: 'include',
+        },
+      )
     ).json();
   },
 
@@ -732,6 +738,13 @@ export const DataJunctionAPI = {
     });
     return await response.json();
   },
+  users: async function () {
+    return await (
+      await fetch(`${DJ_URL}/users?with_activity=true`, {
+        credentials: 'include',
+      })
+    ).json();
+  },
   getTag: async function (tagName) {
     const response = await fetch(`${DJ_URL}/tags/${tagName}`, {
       method: 'GET',

package/src/app/services/__tests__/DJService.test.jsx

@@ -426,7 +426,7 @@ describe('DataJunctionAPI', () => {
     const nmspce = 'sampleNamespace';
     fetch.mockResponseOnce(JSON.stringify({}));
     await DataJunctionAPI.namespace(nmspce);
-    expect(fetch).toHaveBeenCalledWith(`${DJ_URL}/namespaces/${nmspce}/`, {
+    expect(fetch).toHaveBeenCalledWith(`${DJ_URL}/namespaces/${nmspce}/?with_edited_by=true`, {
       credentials: 'include',
     });
   });

package/src/styles/index.css

@@ -289,6 +289,10 @@ tr {
   grid-gap: 8px;
   padding: 8px;
 }
+.table-responsive {
+  width: auto;
+  grid-template-columns: 200px auto;
+}
 .table-vertical {
   display: contents;
 }
@@ -730,6 +734,11 @@ pre {
   margin: 0;
   list-style: none;
 }
+.menu-link {
+  display: inline-grid;
+  margin: 0;
+  float: right;
+}
 .menu-item .menu-link {
   cursor: pointer;
   align-items: center;
@@ -773,6 +782,7 @@ pre {
 
 .card-header h2 {
   font-family: 'Jost';
+  display: inline-block;
 }
 
 .text-gray-400 {

package/src/styles/sorted-table.css

@@ -0,0 +1,15 @@
+.sortable {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-weight: bold;
+  font-family: inherit;
+  color: inherit;
+  text-transform: uppercase;
+}
+.sortable.ascending::after {
+  content: ' ▲';
+}
+.sortable.descending::after {
+  content: ' ▼';
+}