COMPASS-584 hide system.* collections from table + refactoring (#714)

* COMPASS-584 add a clickable prop to enable or disable links in sortable table * COMPASS-584 make table more generic, pass links as cells * removed unused clickable * removing system collections from collections table * move system collection filtering to store + cleanup * remove unnecessary null check for collection name.
mongodb-js · Dec 28, 2016 · b9595dc · b9595dc
1 parent af234ae
commit b9595dc
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 54 deletions.
diff --git a/src/internal-packages/app/lib/components/sortable-table.jsx b/src/internal-packages/app/lib/components/sortable-table.jsx
@@ -3,6 +3,7 @@ const FontAwesome = require('react-fontawesome');
 const Button = require('react-bootstrap').Button;
 const _ = require('lodash');
 
+// const debug = require('debug')('mongodb-compass:app:sortable-table');
 /**
  * The base for the classes.
  */
@@ -28,13 +29,6 @@ class SortableTable extends React.Component {
     }
   }
 
-  onNameClicked(idx, name, evt) {
-    evt.preventDefault();
-    if (this.props.onNameClicked) {
-      this.props.onNameClicked(idx, name);
-    }
-  }
-
   /**
    * compares either a column index (number) or a column name (string) with
    * another column name and returns whether they are a match. This abstraction
@@ -93,30 +87,30 @@ class SortableTable extends React.Component {
         row = row.slice(0, this.props.columns.length);
       }
       const cells = _.map(row, (cell, c) => {
+        const title = _.isString(cell) ? cell : _.get(cell, 'props.children', '');
         return (
           <td
             className={`${BASE}-td`}
             data-test-id={`${BASE}-column-${c}`}
-            title={cell}
+            title={title}
             key={`td-${c}`}>
-            {c === 0 ?
-              <a className={`${BASE}-row-name`} onClick={this.onNameClicked.bind(this, r, cell)}>{cell}</a> : cell
-            }
+            {cell}
           </td>
         );
       });
       if (this.props.removable) {
         // add a column with a delete button if the `removable` prop was set
-        const name = _.get(row, this.props.valueIndex, 0);
+        const valueCell = row[this.props.valueIndex];
+        const valueStr = _.isString(valueCell) ? valueCell : _.get(valueCell, 'props.children', '');
         cells.push(
           <td
             className={`${BASE}-td`}
             key="td-delete"
             data-test-id={`${BASE}-delete`}
-            title={`Delete ${name}`}>
+            title={`Delete ${valueStr}`}>
             <Button
               className={`${BASE}-trash-button`}
-              onClick={this.onRowDeleteButtonClicked.bind(this, r, name)} >
+              onClick={this.onRowDeleteButtonClicked.bind(this, r, valueStr)} >
               <FontAwesome className={`${BASE}-trash-icon`} name="trash-o" />
             </Button>
           </td>
@@ -198,11 +192,6 @@ SortableTable.propTypes = {
    * @type {Function}
    */
   onRowDeleteButtonClicked: React.PropTypes.func,
-  /**
-   * callback when user clicks on the name (first row element)
-   * @type {Function}
-   */
-  onNameClicked: React.PropTypes.func,
   /**
    * The index in the columns to pass as a second value to the delete function.
    * @type {Number}
@@ -216,7 +205,8 @@ SortableTable.defaultProps = {
   sortable: true,
   sortColumn: 0,
   sortOrder: 'asc',
-  removable: false
+  removable: false,
+  valueIndex: 0
 };
 
 SortableTable.displayName = 'SortableTable';

diff --git a/src/internal-packages/app/styles/sortable-table.less b/src/internal-packages/app/styles/sortable-table.less
@@ -48,10 +48,6 @@
     background-color: transparent;
   }
 
-  .sortable-table-row-name {
-    text-decoration: none;
-  }
-
   &-td {
     border-bottom: 3px solid @gray8;
     padding: 13px 0 13px 24px;

diff --git a/src/internal-packages/database/lib/components/collections-table.jsx b/src/internal-packages/database/lib/components/collections-table.jsx
@@ -7,6 +7,8 @@ const { TextButton } = require('hadron-react-buttons');
 const numeral = require('numeral');
 const ipc = require('hadron-ipc');
 
+// const debug = require('debug')('mongodb-compass:database:collections-table');
+
 const _ = require('lodash');
 
 class CollectionsTable extends React.Component {
@@ -29,16 +31,27 @@ class CollectionsTable extends React.Component {
     CollectionsActions.openCreateCollectionDialog();
   }
 
-  onNameClicked(index, name) {
+  onNameClicked(name) {
     // retrieve collection based on name
     const collection = _.first(_.filter(this.props.collections, '_id', `${this.props.database}.${name}`));
     this.CollectionStore.setCollection(collection);
     ipc.call('window:show-collection-submenu');
   }
 
+  renderLink(coll) {
+    const collName = coll['Collection Name'];
+    return (
+      <a className="collections-table-link" href="#" onClick={this.onNameClicked.bind(this, collName)}>{collName}</a>
+    );
+  }
+
   render() {
     const rows = _.map(this.props.renderedCollections, (coll) => {
+      const linkName = this.renderLink(coll);
+
+      // return formatted table row
       return _.assign({}, coll, {
+        'Collection Name': linkName,
         'Documents': numeral(coll.Documents).format('0,0'),
         'Avg. Document Size': _.isNaN(coll['Avg. Document Size']) ?
           '-' : numeral(coll['Avg. Document Size']).format('0.0 b'),
@@ -69,7 +82,6 @@ class CollectionsTable extends React.Component {
           valueIndex={0}
           removable={writable}
           onColumnHeaderClicked={this.onColumnHeaderClicked.bind(this)}
-          onNameClicked={this.onNameClicked.bind(this)}
           onRowDeleteButtonClicked={this.onRowDeleteButtonClicked.bind(this)}
         />
         <CreateCollectionDialog />

diff --git a/src/internal-packages/database/lib/stores/collections-store.js b/src/internal-packages/database/lib/stores/collections-store.js
@@ -1,6 +1,7 @@
 const Reflux = require('reflux');
 const StateMixin = require('reflux-state-mixin');
 const CollectionsActions = require('../actions/collections-actions');
+const toNS = require('mongodb-ns');
 const app = require('ampersand-app');
 const _ = require('lodash');
 
@@ -78,17 +79,24 @@ const CollectionsStore = Reflux.createStore({
         });
         return;
       }
-      const unsorted = _.map(res.collections, (coll) => {
-        return _.zipObject(COLL_COLUMNS, [
-          coll.name, // Collection Name
-          coll.document_count, // Num. Documents
-          coll.size / coll.document_count, // Avg. Document Size
-          coll.size, // Total Document Size
-          coll.index_count,  // Num Indexes
-          coll.index_size // Total Index Size
-        ]);
-      });
-
+      const unsorted = _(res.collections)
+        .filter((coll) => {
+          // skip system collections
+          const ns = toNS(coll.ns);
+          return !ns.system;
+        })
+        .map((coll) => {
+          // re-format for table view
+          return _.zipObject(COLL_COLUMNS, [
+            coll.name, // Collection Name
+            coll.document_count, // Num. Documents
+            coll.size / coll.document_count, // Avg. Document Size
+            coll.size, // Total Document Size
+            coll.index_count,  // Num Indexes
+            coll.index_size // Total Index Size
+          ]);
+        })
+        .value();
       this.setState({
         collections: database.collections,
         renderedCollections: this._sort(unsorted),

diff --git a/src/internal-packages/database/styles/collections-table.less b/src/internal-packages/database/styles/collections-table.less
@@ -0,0 +1,17 @@
+.collections-table {
+  background-color: @gray8;
+  overflow-y: scroll;
+  padding: 0 20px 100px 20px;
+  position: absolute;
+  top: 78px;
+  right: 0;
+  bottom: 0;
+  left: 250px;
+
+  &-link, &-link:hover, &-link:active {
+    text-decoration: none;
+  }
+
+  &-create-button {
+  }
+}
diff --git a/src/internal-packages/database/styles/index.less b/src/internal-packages/database/styles/index.less
@@ -1,23 +1,9 @@
 @import './drop-collection-dialog.less';
+@import './collections-table.less';
 
 .collections {
 
   .tab-nav-bar-header {
     top: 0;
   }
 }
-
-.collections-table {
-  background-color: @gray8;
-  overflow-y: scroll;
-  padding: 0 20px 100px 20px;
-  position: absolute;
-  top: 78px;
-  right: 0;
-  bottom: 0;
-  left: 250px;
-
-  &-create-button {
-
-  }
-}
diff --git a/src/internal-packages/server-stats/lib/component/databases-table.jsx b/src/internal-packages/server-stats/lib/component/databases-table.jsx
@@ -44,7 +44,7 @@ class DatabasesTable extends React.Component {
     shell.openExternal(AUTH_HELP_URL);
   }
 
-  onNameClicked(index, name) {
+  onNameClicked(name) {
     if (NamespaceStore.ns !== name) {
       this.CollectionStore.setCollection({});
       NamespaceStore.ns = name;
@@ -78,7 +78,9 @@ class DatabasesTable extends React.Component {
     // convert storage size to human-readable units (MB, GB, ...)
     // we do this here so that sorting is not affected in the store
     const rows = _.map(this.props.databases, (db) => {
+      const dbName = db['Database Name'];
       return _.assign({}, db, {
+        'Database Name': <a className="rtss-databases-link" href="#" onClick={this.onNameClicked.bind(this, dbName)}>{dbName}</a>,
         'Storage Size': numeral(db['Storage Size']).format('0.0b')
       });
     });
@@ -105,7 +107,6 @@ class DatabasesTable extends React.Component {
           valueIndex={0}
           removable={writable}
           onColumnHeaderClicked={this.onColumnHeaderClicked.bind(this)}
-          onNameClicked={this.onNameClicked.bind(this)}
           onRowDeleteButtonClicked={this.onRowDeleteButtonClicked.bind(this)}
         />
         {this.props.databases.length === 0 ?

diff --git a/src/internal-packages/server-stats/styles/rtss-databases.less b/src/internal-packages/server-stats/styles/rtss-databases.less
@@ -8,6 +8,10 @@
   bottom: 0;
   left: 250px;
 
+  &-link, &-link:hover, &-link:active {
+    text-decoration: none;
+  }
+
   &-create-button {
     height: 32px;
     background: @gray8;