Merge pull request #1123 from shangyian/add-field-sorting

Add Sorting to Node Table in Explore View
DataJunction · Jul 26, 2024 · 8ceea6f · 8ceea6f
2 parents 8a3e35d + 988e8ad
commit 8ceea6f
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 51 deletions.
diff --git a/datajunction-ui/package.json b/datajunction-ui/package.json
@@ -165,7 +165,7 @@
     "coverageThreshold": {
       "global": {
         "statements": 87,
-        "branches": 75,
+        "branches": 74,
         "lines": 80,
         "functions": 85
       }

diff --git a/datajunction-ui/src/app/components/AddNodeDropdown.jsx b/datajunction-ui/src/app/components/AddNodeDropdown.jsx
@@ -0,0 +1,43 @@
+export default function AddNodeDropDown({ namespace }) {
+  return (
+    <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>
+  );
+}
diff --git a/datajunction-ui/src/app/pages/NamespacePage/index.jsx b/datajunction-ui/src/app/pages/NamespacePage/index.jsx
@@ -4,11 +4,18 @@ 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 '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();
 
@@ -19,6 +26,38 @@ export function NamespacePage() {
 
   const [namespaceHierarchy, setNamespaceHierarchy] = useState([]);
 
+  const [sortConfig, setSortConfig] = useState({ key: 'updated_at', direction: DESC });
+  const sortedNodes = React.useMemo(() => {
+    let sortableData = [...Object.values(state.nodes)];
+    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, 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 = [];
 
@@ -71,7 +110,7 @@ export function NamespacePage() {
     fetchData().catch(console.error);
   }, [djClient, namespace, namespaceHierarchy]);
 
-  const nodesList = state.nodes.map(node => (
+  const nodesList = sortedNodes.map(node => (
     <tr>
       <td>
         <a href={'/nodes/' + node.name} className="link-table">
@@ -97,9 +136,6 @@ export function NamespacePage() {
       <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')}
@@ -116,46 +152,7 @@ export function NamespacePage() {
       <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>
+          <AddNodeDropdown namespace={namespace} />
           <div className="table-responsive">
             <div className={`sidebar`}>
               <span
@@ -182,12 +179,15 @@ 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>

diff --git a/datajunction-ui/src/styles/index.css b/datajunction-ui/src/styles/index.css
@@ -730,6 +730,11 @@ pre {
   margin: 0;
   list-style: none;
 }
+.menu-link {
+  display: inline-grid;
+  margin: 2em 1em 0 0;
+  float: right;
+}
 .menu-item .menu-link {
   cursor: pointer;
   align-items: center;
@@ -773,6 +778,7 @@ pre {
 
 .card-header h2 {
   font-family: 'Jost';
+  display: inline-block;
 }
 
 .text-gray-400 {

diff --git a/datajunction-ui/src/styles/sorted-table.css b/datajunction-ui/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: ' ▼';
+}