Implement support for calculating disk usage per tenant (#5969)

Fixes #5961

browser/app/js/browser/StorageInfo.js

@@ -25,19 +25,18 @@ export class StorageInfo extends React.Component {
     fetchStorageInfo()
   }
   render() {
-    const { total, free } = this.props.storageInfo
-    const used = total - free
+    const { total, used } = this.props.storageInfo
     const usedPercent = used / total * 100 + "%"
-    const freePercent = free * 100 / total
+    const freePercent = (total - used) * 100 / total
     return (
-      <div className="feh-usage">
+      <div className="feh-used">
         <div className="fehu-chart">
           <div style={{ width: usedPercent }} />
         </div>
         <ul>
           <li>
             <span>Used: </span>
-            {humanize.filesize(total - free)}
+            {humanize.filesize(used)}
           </li>
           <li className="pull-right">
             <span>Free: </span>

browser/app/js/browser/__tests__/StorageInfo.test.js

@@ -22,7 +22,7 @@ describe("StorageInfo", () => {
   it("should render without crashing", () => {
     shallow(
       <StorageInfo
-        storageInfo={{ total: 100, free: 60 }}
+        storageInfo={{ total: 100, used: 60 }}
         fetchStorageInfo={jest.fn()}
       />
     )
@@ -32,7 +32,7 @@ describe("StorageInfo", () => {
     const fetchStorageInfo = jest.fn()
     shallow(
       <StorageInfo
-        storageInfo={{ total: 100, free: 60 }}
+        storageInfo={{ total: 100, used: 60 }}
         fetchStorageInfo={fetchStorageInfo}
       />
     )

browser/app/js/browser/__tests__/actions.test.js

@@ -20,7 +20,7 @@ import * as actionsCommon from "../actions"
 
 jest.mock("../../web", () => ({
   StorageInfo: jest.fn(() => {
-    return Promise.resolve({ storageInfo: { Total: 100, Free: 60 } })
+    return Promise.resolve({ storageInfo: { Total: 100, Used: 60 } })
   }),
   ServerInfo: jest.fn(() => {
     return Promise.resolve({
@@ -40,7 +40,7 @@ describe("Common actions", () => {
   it("creates common/SET_STORAGE_INFO after fetching the storage details ", () => {
     const store = mockStore()
     const expectedActions = [
-      { type: "common/SET_STORAGE_INFO", storageInfo: { total: 100, free: 60 } }
+      { type: "common/SET_STORAGE_INFO", storageInfo: { total: 100, used: 60 } }
     ]
     return store.dispatch(actionsCommon.fetchStorageInfo()).then(() => {
       const actions = store.getActions()

browser/app/js/browser/actions.js

@@ -34,7 +34,7 @@ export const fetchStorageInfo = () => {
     return web.StorageInfo().then(res => {
       const storageInfo = {
         total: res.storageInfo.Total,
-        free: res.storageInfo.Free
+        used:  res.storageInfo.Used
       }
       dispatch(setStorageInfo(storageInfo))
     })

browser/app/less/inc/header.less

@@ -44,9 +44,9 @@
 
 
 /*--------------------------
-    Disk usage
+    Disk used
 ----------------------------*/
-.feh-usage {
+.feh-used {
     margin-top: 12px;
     max-width: 285px;