fix(compass-collection-stats): hide collection stats on time-series collections COMPASS-4906

packages/compass-collection-stats/package.json

@@ -53,7 +53,6 @@
     "bootstrap": "https://github.com/twbs/bootstrap/archive/v3.3.5.tar.gz",
     "chai": "^4.1.2",
     "chai-enzyme": "1.0.0-beta.1",
-    "classnames": "^2.2.5",
     "core-js": "^3.12.1",
     "cross-env": "^7.0.0",
     "css-loader": "^4.3.0",

packages/compass-collection-stats/src/components/collection-stats-item/collection-stats-item.jsx

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 
 import styles from './collection-stats-item.less';
 
@@ -48,11 +47,11 @@ class CollectionStatsItem extends Component {
    */
   render() {
     return (
-      <div className={classnames(styles[BASE_CLASS])}>
-        <div className={classnames(styles[this.props.primary ? PRIMARY_LABEL : LABEL])}>
+      <div className={styles[BASE_CLASS]}>
+        <div className={styles[this.props.primary ? PRIMARY_LABEL : LABEL]}>
           {this.props.label}
         </div>
-        <div className={classnames(styles[this.props.primary ? PRIMARY_VALUE : VALUE])}>
+        <div className={styles[this.props.primary ? PRIMARY_VALUE : VALUE]}>
           {this.props.value}
         </div>
       </div>

packages/compass-collection-stats/src/components/collection-stats/collection-stats.jsx

@@ -1,25 +1,25 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
+import DocumentStatsItem from '../document-stats-item';
+import IndexStatsItem from '../index-stats-item';
+
 import styles from './collection-stats.less';
 
 class CollectionStats extends Component {
   static displayName = 'CollectionStatsComponent';
 
   static propTypes = {
-    isReadonly: PropTypes.bool
+    documentCount: PropTypes.string.isRequired,
+    totalDocumentSize: PropTypes.string.isRequired,
+    avgDocumentSize: PropTypes.string.isRequired,
+    indexCount: PropTypes.string.isRequired,
+    totalIndexSize: PropTypes.string.isRequired,
+    avgIndexSize: PropTypes.string.isRequired,
+    isReadonly: PropTypes.bool.isRequired,
+    isTimeSeries: PropTypes.bool.isRequired
   };
 
-  /**
-   * Instantiate the component.
-   *
-   * @param {Object} props - The properties.
-   */
-  constructor(props) {
-    super(props);
-    this.roles = global.hadronApp.appRegistry.getRole('CollectionHUD.Item');
-  }
-
   /**
    * Render CollectionStats component.
    *
@@ -30,10 +30,23 @@ class CollectionStats extends Component {
       return <div className={styles['collection-stats-empty']} />;
     }
 
-    const children = (this.roles || []).map((role, i) => {
-      return <role.component key={i} {...this.props} />;
-    });
-    return <div className={styles['collection-stats']}>{children}</div>;
+    return (
+      <div className={styles['collection-stats']}>
+        <DocumentStatsItem
+          isTimeSeries={this.props.isTimeSeries}
+          documentCount={this.props.documentCount}
+          totalDocumentSize={this.props.totalDocumentSize}
+          avgDocumentSize={this.props.avgDocumentSize}
+        />
+        {!this.props.isTimeSeries && (
+          <IndexStatsItem
+            indexCount={this.props.indexCount}
+            totalIndexSize={this.props.totalIndexSize}
+            avgIndexSize={this.props.avgIndexSize}
+          />
+        )}
+      </div>
+    );
   }
 }
 

packages/compass-collection-stats/src/components/collection-stats/collection-stats.spec.js

@@ -3,40 +3,86 @@ import { mount } from 'enzyme';
 import AppRegistry from 'hadron-app-registry';
 
 import CollectionStats from '../collection-stats';
+import DocumentStatsItem from '../document-stats-item';
+import IndexStatsItem from '../index-stats-item';
 import styles from './collection-stats.less';
 
 describe('CollectionStats [Component]', () => {
-  let component;
+  describe('when rendered', () => {
+    let component;
 
-  beforeEach(() => {
-    global.hadronApp = {
-      appRegistry: new AppRegistry()
-    };
-    component = mount(<CollectionStats />);
-  });
+    beforeEach(() => {
+      global.hadronApp = {
+        appRegistry: new AppRegistry()
+      };
+      component = mount(<CollectionStats
+        isReadonly={false}
+        isTimeSeries={false}
+      />);
+    });
 
-  afterEach(() => {
-    component = null;
-  });
+    afterEach(() => {
+      component = null;
+    });
+
+    it('renders the correct root classname', () => {
+      expect(component.find(`.${styles['collection-stats']}`)).to.be.present();
+    });
 
-  it('renders the correct root classname', () => {
-    expect(component.find(`.${styles['collection-stats']}`)).to.be.present();
+    it('renders the document and index stats', () => {
+      expect(component.find(DocumentStatsItem)).to.be.present();
+      expect(component.find(IndexStatsItem)).to.be.present();
+    });
   });
 
   describe('When the collection is a view', () => {
-    let _component;
+    let component;
     before(() => {
-      _component = mount(<CollectionStats isReadonly />);
+      component = mount(<CollectionStats
+        isReadonly
+        isTimeSeries={false}
+      />);
     });
 
-    it('should hide the stats', () => {
+    it('renders an empty state', () => {
       expect(
-        _component.find(`.${styles['collection-stats-empty']}`)
+        component.find(`.${styles['collection-stats-empty']}`)
       ).to.be.present();
     });
 
+    it('does not render the document and index stats', () => {
+      expect(component.find(DocumentStatsItem)).to.not.be.present();
+      expect(component.find(IndexStatsItem)).to.not.be.present();
+    });
+
     after(() => {
-      _component = null;
+      component = null;
+    });
+  });
+
+  describe('when the collection is a time-series collection', () => {
+    let component;
+
+    beforeEach(() => {
+      global.hadronApp = {
+        appRegistry: new AppRegistry()
+      };
+      component = mount(<CollectionStats
+        isReadonly={false}
+        isTimeSeries
+      />);
+    });
+
+    afterEach(() => {
+      component = null;
+    });
+
+    it('renders the document stats', () => {
+      expect(component.find(DocumentStatsItem)).to.be.present();
+    });
+
+    it('does not render the index stats', () => {
+      expect(component.find(IndexStatsItem)).to.not.be.present();
     });
   });
 });

packages/compass-collection-stats/src/components/document-stats-item/document-stats-item.jsx

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 import CollectionStatsItem from '../collection-stats-item';
 
 import styles from './document-stats-item.less';
@@ -33,6 +32,7 @@ class DocumentStatsItem extends Component {
 
   static propTypes = {
     documentCount: PropTypes.string.isRequired,
+    isTimeSeries: PropTypes.bool.isRequired,
     totalDocumentSize: PropTypes.string.isRequired,
     avgDocumentSize: PropTypes.string.isRequired
   };
@@ -44,11 +44,20 @@ class DocumentStatsItem extends Component {
    *
    */
   render() {
+    const { isTimeSeries } = this.props;
+
     return (
-      <div className={classnames(styles[LIST_CLASS])}>
-        <CollectionStatsItem label={DOCUMENTS} value={this.props.documentCount} primary />
+      <div className={styles[LIST_CLASS]}>
+        {!isTimeSeries && <CollectionStatsItem
+          label={DOCUMENTS}
+          value={this.props.documentCount}
+          primary
+        />}
         <CollectionStatsItem label={TOTAL_SIZE} value={this.props.totalDocumentSize} />
-        <CollectionStatsItem label={AVG_SIZE} value={this.props.avgDocumentSize} />
+        {!isTimeSeries && <CollectionStatsItem
+          label={AVG_SIZE}
+          value={this.props.avgDocumentSize}
+        />}
       </div>
     );
   }

packages/compass-collection-stats/src/components/document-stats-item/document-stats-item.spec.js

@@ -6,50 +6,94 @@ import styles from './document-stats-item.less';
 import statsStyles from '../collection-stats-item/collection-stats-item.less';
 
 describe('DocumentStatsItem [Component]', () => {
-  let component;
+  describe('when rendered', () => {
+    let component;
 
-  beforeEach(() => {
-    component = mount(
-      <DocumentStatsItem documentCount="10" totalDocumentSize="5kb" avgDocumentSize="1k" />
-    );
-  });
+    beforeEach(() => {
+      component = mount(
+        <DocumentStatsItem
+          documentCount="10"
+          totalDocumentSize="5kb"
+          avgDocumentSize="1k"
+          isTimeSeries={false}
+        />
+      );
+    });
 
-  afterEach(() => {
-    component = null;
-  });
+    afterEach(() => {
+      component = null;
+    });
 
-  it('renders the correct root classname', () => {
-    expect(component.find(`.${styles['document-stats-item']}`)).
-      to.be.present();
-  });
+    it('renders the correct root classname', () => {
+      expect(component.find(`.${styles['document-stats-item']}`)).
+        to.be.present();
+    });
 
-  it('renders the count as primary', () => {
-    expect(component.find(`.${statsStyles['collection-stats-item-primary-label']}`)).
-      to.have.text('Documents');
-  });
+    it('renders the count as primary', () => {
+      expect(component.find(`.${statsStyles['collection-stats-item-primary-label']}`)).
+        to.have.text('Documents');
+    });
 
-  it('renders the count as primary value', () => {
-    expect(component.find(`.${statsStyles['collection-stats-item-primary-value']}`)).
-      to.have.text('10');
-  });
+    it('renders the count as primary value', () => {
+      expect(component.find(`.${statsStyles['collection-stats-item-primary-value']}`)).
+        to.have.text('10');
+    });
 
-  it('renders total document size as non primary label', () => {
-    expect(component.find(`.${statsStyles['collection-stats-item-label']}`).at(0)).
-      to.have.text('total size');
-  });
+    it('renders total document size as non primary label', () => {
+      expect(component.find(`.${statsStyles['collection-stats-item-label']}`).at(0)).
+        to.have.text('total size');
+    });
 
-  it('renders avg document size as a non primary value', () => {
-    expect(component.find(`.${statsStyles['collection-stats-item-value']}`).at(0)).
-      to.have.text('5kb');
-  });
+    it('renders avg document size as a non primary value', () => {
+      expect(component.find(`.${statsStyles['collection-stats-item-value']}`).at(0)).
+        to.have.text('5kb');
+    });
 
-  it('renders avg document size as non primary label', () => {
-    expect(component.find(`.${statsStyles['collection-stats-item-label']}`).at(1)).
-      to.have.text('avg. size');
+    it('renders avg document size as non primary label', () => {
+      expect(component.find(`.${statsStyles['collection-stats-item-label']}`).at(1)).
+        to.have.text('avg. size');
+    });
+
+    it('renders avg document size as a non primary value', () => {
+      expect(component.find(`.${statsStyles['collection-stats-item-value']}`).at(1)).
+        to.have.text('1k');
+    });
   });
 
-  it('renders avg document size as a non primary value', () => {
-    expect(component.find(`.${statsStyles['collection-stats-item-value']}`).at(1)).
-      to.have.text('1k');
+  describe('when time-series is true', () => {
+    let component;
+
+    beforeEach(() => {
+      component = mount(
+        <DocumentStatsItem
+          documentCount="10"
+          totalDocumentSize="5kb"
+          avgDocumentSize="1k"
+          isTimeSeries
+        />
+      );
+    });
+
+    afterEach(() => {
+      component = null;
+    });
+
+    it('does not render the count', () => {
+      expect(
+        component.find(`.${statsStyles['collection-stats-item-primary-value']}`)
+      ).to.not.be.present();
+    });
+
+    it('renders total document size', () => {
+      expect(
+        component.find(`.${statsStyles['collection-stats-item-label']}`).at(0)
+      ).to.be.present();
+    });
+
+    it('renders avg document size', () => {
+      expect(
+        component.find(`.${statsStyles['collection-stats-item-value']}`).length
+      ).to.equal(1);
+    });
   });
 });

packages/compass-collection-stats/src/components/index-stats-item/index-stats-item.jsx

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 import CollectionStatsItem from '../collection-stats-item';
 
 import styles from './index-stats-item.less';
@@ -45,7 +44,7 @@ class IndexStatsItem extends Component {
    */
   render() {
     return (
-      <div className={classnames(styles[LIST_CLASS])}>
+      <div className={styles[LIST_CLASS]}>
         <CollectionStatsItem label={INDEXES} value={this.props.indexCount} primary />
         <CollectionStatsItem label={TOTAL_SIZE} value={this.props.totalIndexSize} />
         <CollectionStatsItem label={AVG_SIZE} value={this.props.avgIndexSize} />