fix: derive the calculated storage size in the model, display and sort that field COMPASS-9423 (#7005)

derive the calculated storage size in the model, display and sort that field

Author: lerouxb

packages/collection-model/index.d.ts

@@ -74,6 +74,7 @@ interface CollectionProps {
   avg_document_size: number | undefined;
   storage_size: number | undefined;
   free_storage_size: number | undefined;
+  calculated_storage_size: number | undefined;
   index_count: number | undefined;
   index_size: number | undefined;
   isTimeSeries: boolean;

packages/collection-model/lib/model.js

@@ -239,6 +239,18 @@ const CollectionModel = AmpersandModel.extend(debounceActions(['fetch']), {
         return getProperties(this);
       },
     },
+    calculated_storage_size: {
+      deps: ['storage_size', 'free_storage_size'],
+      fn() {
+        if (
+          this.storage_size === undefined ||
+          this.free_storage_size === undefined
+        ) {
+          return undefined;
+        }
+        return this.storage_size - this.free_storage_size;
+      },
+    },
   },
 
   /**

packages/databases-collections-list/src/collections.tsx

@@ -106,7 +106,7 @@ const CollectionsList: React.FunctionComponent<{
           { name: 'name', label: 'Collection Name' },
           { name: 'document_count', label: 'Documents' },
           { name: 'avg_document_size', label: 'Avg. document size' },
-          { name: 'storage_size', label: 'Storage size' },
+          { name: 'calculated_storage_size', label: 'Storage size' },
           { name: 'index_count', label: 'Indexes' },
           { name: 'index_size', label: 'Total index size' },
         ]}
@@ -128,11 +128,8 @@ const CollectionsList: React.FunctionComponent<{
                   {
                     label: 'Storage size',
                     value:
-                      coll.storage_size !== undefined &&
-                      coll.free_storage_size !== undefined
-                        ? compactBytes(
-                            coll.storage_size - coll.free_storage_size
-                          )
+                      coll.calculated_storage_size !== undefined
+                        ? compactBytes(coll.calculated_storage_size)
                         : 'N/A',
                     hint:
                       coll.document_size !== undefined &&
@@ -145,11 +142,8 @@ const CollectionsList: React.FunctionComponent<{
                   {
                     label: 'Storage size',
                     value:
-                      coll.storage_size !== undefined &&
-                      coll.free_storage_size !== undefined
-                        ? compactBytes(
-                            coll.storage_size - coll.free_storage_size
-                          )
+                      coll.calculated_storage_size !== undefined
+                        ? compactBytes(coll.calculated_storage_size)
                         : 'N/A',
                     hint:
                       coll.document_size !== undefined &&

packages/databases-collections-list/src/index.spec.tsx

@@ -35,8 +35,8 @@ function createDatabase(name) {
   };
 }
 
-function createCollection(name) {
-  return {
+function createCollection(name, props: any = {}) {
+  const col = {
     _id: name,
     name: name,
     type: 'collection' as const,
@@ -71,12 +71,19 @@ function createCollection(name) {
     free_storage_size: 1000,
     index_count: 15,
     index_size: 16,
+    ...props,
   };
+
+  if (col.storage_size !== undefined && col.free_storage_size !== undefined) {
+    col.calculated_storage_size = col.storage_size - col.free_storage_size;
+  }
+
+  return col;
 }
 
-function createTimeSeries(name) {
+function createTimeSeries(name, props: any = {}) {
   return {
-    ...createCollection(name),
+    ...createCollection(name, props),
     type: 'timeseries' as const,
   };
 }
@@ -89,10 +96,10 @@ const dbs = [
 ];
 
 const colls = [
-  createCollection('foo.foo'),
-  createCollection('bar.bar'),
-  createCollection('buz.buz'),
-  createTimeSeries('bat.bat'),
+  createCollection('foo.foo', { storage_size: 1000, free_storage_size: 1000 }), // 1000
+  createCollection('bar.bar', { storage_size: 2000, free_storage_size: 500 }), // 1500
+  createCollection('buz.buz', { storage_size: 3000, free_storage_size: 2000 }), // 1000
+  createTimeSeries('bat.bat', { storage_size: 4000, free_storage_size: 0 }), // 4000
 ];
 
 describe('databases and collections list', function () {
@@ -213,6 +220,35 @@ describe('databases and collections list', function () {
       expect(clickSpy).to.be.calledWith('bar.bar');
     });
 
+    it('should sort collections', function () {
+      renderCollectionsList({
+        namespace: 'db',
+        collections: colls,
+      });
+
+      screen
+        .getByRole('button', {
+          name: 'Sort by',
+        })
+        .click();
+
+      screen
+        .getByRole('option', {
+          name: 'Storage size',
+        })
+        .click();
+
+      const sorted = screen
+        .getAllByRole('gridcell')
+        .map((el: HTMLElement) => el.getAttribute('data-id'));
+      expect(sorted).to.deep.equal([
+        'foo.foo',
+        'buz.buz',
+        'bar.bar',
+        'bat.bat',
+      ]);
+    });
+
     it('should not display statistics (except storage size) on timeseries collection card', function () {
       renderCollectionsList({
         namespace: 'db',