fix all usage ui

app/controllers/api/database.php

@@ -323,7 +323,7 @@ App::get('/v1/database/usage')
                         new Query('period', Query::TYPE_EQUAL, [$period[$range]['period']]),
                         new Query('metric', Query::TYPE_EQUAL, [$metric]),
                     ], $period[$range]['limit'], 0, ['time'], [Database::ORDER_DESC]);
-    
+
                     $stats[$metric] = [];
                     foreach ($requestDocs as $requestDoc) {
                         $stats[$metric][] = [
@@ -332,21 +332,21 @@ App::get('/v1/database/usage')
                         ];
                     }
                     $stats[$metric] = array_reverse($stats[$metric]);
-                }    
+                }
             });
 
             $usage = new Document([
                 'range' => $range,
-                'documents.count' => $stats["database.documents.count"],
-                'collections.count' => $stats["database.collections.count"],
-                'documents.create' =>  $stats["database.documents.create"],
-                'documents.read' =>  $stats["database.documents.read"],
-                'documents.update' => $stats["database.documents.update"],
-                'documents.delete' => $stats["database.documents.delete"],
-                'collections.create' => $stats["database.collections.create"],
-                'collections.read' =>  $stats["database.collections.read"],
-                'collections.update' => $stats["database.collections.update"],
-                'collections.delete' => $stats["database.collections.delete"],
+                'documentsCount' => $stats["database.documents.count"],
+                'collectionsCount' => $stats["database.collections.count"],
+                'documentsCreate' =>  $stats["database.documents.create"],
+                'documentsRead' =>  $stats["database.documents.read"],
+                'documentsUpdate' => $stats["database.documents.update"],
+                'documentsDelete' => $stats["database.documents.delete"],
+                'collectionsCreate' => $stats["database.collections.create"],
+                'collectionsRead' =>  $stats["database.collections.read"],
+                'collectionsUpdate' => $stats["database.collections.update"],
+                'collectionsDelete' => $stats["database.collections.delete"],
             ]);
         }
 
@@ -417,7 +417,7 @@ App::get('/v1/database/:collectionId/usage')
                         new Query('period', Query::TYPE_EQUAL, [$period[$range]['period']]),
                         new Query('metric', Query::TYPE_EQUAL, [$metric]),
                     ], $period[$range]['limit'], 0, ['time'], [Database::ORDER_DESC]);
-    
+
                     $stats[$metric] = [];
                     foreach ($requestDocs as $requestDoc) {
                         $stats[$metric][] = [
@@ -431,11 +431,11 @@ App::get('/v1/database/:collectionId/usage')
 
             $usage = new Document([
                 'range' => $range,
-                'documents.count' => $stats["database.collections.$collectionId.documents.count"],
-                'documents.create' => $stats["database.collections.$collectionId.documents.create"],
-                'documents.read' => $stats["database.collections.$collectionId.documents.read"],
-                'documents.update' =>  $stats["database.collections.$collectionId.documents.update"],
-                'documents.delete' =>  $stats["database.collections.$collectionId.documents.delete"]
+                'documentsCount' => $stats["database.collections.$collectionId.documents.count"],
+                'documentsCreate' => $stats["database.collections.$collectionId.documents.create"],
+                'documentsRead' => $stats["database.collections.$collectionId.documents.read"],
+                'documentsUpdate' =>  $stats["database.collections.$collectionId.documents.update"],
+                'documentsDelete' =>  $stats["database.collections.$collectionId.documents.delete"]
             ]);
         }
 

app/controllers/api/functions.php

@@ -223,9 +223,9 @@ App::get('/v1/functions/:functionId/usage')
 
             $usage = new Document([
                 'range' => $range,
-                'functions.executions' => $stats["functions.$functionId.executions"],
-                'functions.failures' => $stats["functions.$functionId.failures"],
-                'functions.compute' => $stats["functions.$functionId.compute"]
+                'functionsExecutions' => $stats["functions.$functionId.executions"],
+                'functionsFailures' => $stats["functions.$functionId.failures"],
+                'functionsCompute' => $stats["functions.$functionId.compute"]
             ]);
         }
 

app/controllers/api/projects.php

@@ -294,7 +294,7 @@ App::get('/v1/projects/:projectId/usage')
                         new Query('period', Query::TYPE_EQUAL, [$period[$range]['period']]),
                         new Query('metric', Query::TYPE_EQUAL, [$metric]),
                     ], $period[$range]['limit'], 0, ['time'], [Database::ORDER_DESC]);
-    
+
                     $stats[$metric] = [];
                     foreach ($requestDocs as $requestDoc) {
                         $stats[$metric][] = [
@@ -303,7 +303,7 @@ App::get('/v1/projects/:projectId/usage')
                         ];
                     }
                     $stats[$metric] = array_reverse($stats[$metric]);
-                }    
+                }
             });
 
             $usage = new Document([

app/controllers/api/storage.php

@@ -690,8 +690,8 @@ App::get('/v1/storage/usage')
             ];
 
             $metrics = [
-                "storage.total",
-                "storage.files.count"
+                'storage.total',
+                'storage.files.count'
             ];
 
             $stats = [];
@@ -702,7 +702,7 @@ App::get('/v1/storage/usage')
                         new Query('period', Query::TYPE_EQUAL, [$period[$range]['period']]),
                         new Query('metric', Query::TYPE_EQUAL, [$metric]),
                     ], $period[$range]['limit'], 0, ['time'], [Database::ORDER_DESC]);
-    
+
                     $stats[$metric] = [];
                     foreach ($requestDocs as $requestDoc) {
                         $stats[$metric][] = [
@@ -711,7 +711,7 @@ App::get('/v1/storage/usage')
                         ];
                     }
                     $stats[$metric] = array_reverse($stats[$metric]);
-                }    
+                }
             });
 
             $usage = new Document([
@@ -781,7 +781,7 @@ App::get('/v1/storage/:bucketId/usage')
                         new Query('period', Query::TYPE_EQUAL, [$period[$range]['period']]),
                         new Query('metric', Query::TYPE_EQUAL, [$metric]),
                     ], $period[$range]['limit'], 0, ['time'], [Database::ORDER_DESC]);
-    
+
                     $stats[$metric] = [];
                     foreach ($requestDocs as $requestDoc) {
                         $stats[$metric][] = [
@@ -790,16 +790,16 @@ App::get('/v1/storage/:bucketId/usage')
                         ];
                     }
                     $stats[$metric] = array_reverse($stats[$metric]);
-                }    
+                }
             });
 
             $usage = new Document([
                 'range' => $range,
-                'files.count' => $stats["storage.buckets.$bucketId.files.count"],
-                'files.create' => $stats["storage.buckets.$bucketId.files.create"],
-                'files.read' => $stats["storage.buckets.$bucketId.files.read"],
-                'files.update' => $stats["storage.buckets.$bucketId.files.update"],
-                'files.delete' => $stats["storage.buckets.$bucketId.files.delete"]
+                'filesCount' => $stats["storage.buckets.$bucketId.files.count"],
+                'filesCreate' => $stats["storage.buckets.$bucketId.files.create"],
+                'filesRead' => $stats["storage.buckets.$bucketId.files.read"],
+                'filesUpdate' => $stats["storage.buckets.$bucketId.files.update"],
+                'filesDelete' => $stats["storage.buckets.$bucketId.files.delete"]
             ]);
         }
 

app/controllers/api/users.php

@@ -832,14 +832,14 @@ App::get('/v1/users/usage')
 
             $usage = new Document([
                 'range' => $range,
-                'users.count' => $stats["users.count"],
-                'users.create' => $stats["users.create"],
-                'users.read' => $stats["users.read"],
-                'users.update' => $stats["users.update"],
-                'users.delete' => $stats["users.delete"],
-                'sessions.create' => $stats["users.sessions.create"],
-                'sessions.provider.create' => $stats["users.sessions.$provider.create"],
-                'sessions.delete' => $stats["users.sessions.delete"]
+                'usersCount' => $stats["users.count"],
+                'usersCreate' => $stats["users.create"],
+                'usersRead' => $stats["users.read"],
+                'usersUpdate' => $stats["users.update"],
+                'usersDelete' => $stats["users.delete"],
+                'sessionsCreate' => $stats["users.sessions.create"],
+                'sessionsProviderCreate' => $stats["users.sessions.$provider.create"],
+                'sessionsDelete' => $stats["users.sessions.delete"]
             ]);
 
         }

app/views/console/database/collection.phtml

@@ -74,10 +74,10 @@ $logs = $this->getParam('logs', null);
                                 </thead>
                                 <tbody data-ls-loop="project-documents.documents" data-ls-as="node">
                                     <tr data-ls-loop="project-collection.attributes" data-ls-as="attribute" data-ls-prefix="template-attribute-body-first" data-ls-limit="20">
-                                        <td data-ls-if="{{attribute.status}} === 'available'" data-ls-attrs="data-title={{attribute.key}}: ">
+                                        <td data-ls-if="{{attribute.status}} === 'available'" data-ls-attrs="data-title={{attribute.key}}">
                                             <!-- <a href="" target="_blank" rel="noopener" class="pull-end margin-start"><i class="icon-link-ext"></i></a> -->
                                             <a data-ls-attrs="href=/console/database/document?id={{node.$id}}&collection={{router.params.id}}&project={{router.params.project}}"><span data-ls-bind="{{node|documentAttribute}}"></span></a>
-                                            <span data-ls-if="!{{node|documentAttribute}}" class="text-fade">n/a</span>
+                                            <span data-ls-if="!{{node|documentAttribute}}" class="text-fade" data-debug="true">n/a</span>
                                         </td>
                                     </tr>
                                 </tbody>
@@ -371,65 +371,63 @@ $logs = $this->getParam('logs', null);
                     <div class="box margin-bottom-small">
                         <div class="margin-start-negative-small margin-end-negative-small margin-top-negative-small margin-bottom-negative-small">
                             <div class="chart margin-bottom-no">
-                                <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Documents=documents.count" data-height="140" />
+                                <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Documents=documentsCount" data-height="140" />
                             </div>
                         </div>
                     </div>
 
                     <ul class="chart-notes margin-bottom-large">
-                        <li>Documents <span data-ls-bind="({{usage.executions.total}})"></span></li> <!-- TODO: add total to endpoint's response -->
+                        <li>Documents <span data-ls-bind="({{usage.documentsCount|statsGetLast|statsTotal}})"></span></li>
                     </ul>
 
                     <div class="box margin-bottom-small">
                         <div class="margin-start-negative-small margin-end-negative-small margin-top-negative-small margin-bottom-negative-small">
                             <div class="chart margin-bottom-no">
-                                <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Created=documents.create" data-colors="orange" data-height="140" />
+                                <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Created=documentsCreate" data-colors="orange" data-height="140" />
                             </div>
                         </div>
                     </div>
 
                     <ul class="chart-notes margin-bottom-large">
-                        <li class="orange">Created <span data-ls-bind="({{usage.compute.total}})"></span></li> <!-- TODO: add total to endpoint's response -->
+                        <li class="orange">Created <span data-ls-bind="({{usage.documentsCreate|statsGetLast|statsTotal}})"></span></li>
                     </ul>
 
                     <div class="box margin-bottom-small">
                         <div class="margin-start-negative-small margin-end-negative-small margin-top-negative-small margin-bottom-negative-small">
                             <div class="chart margin-bottom-no">
-                                <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Read=documents.read" data-colors="green" data-height="140" />
+                                <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Read=documentsRead" data-colors="green" data-height="140" />
                             </div>
                         </div>
                     </div>
 
                     <ul class="chart-notes margin-bottom-large">
-                        <li class="red">Read <span data-ls-bind="({{usage.failures.total}})"></span></li> <!-- TODO: add total to endpoint's response -->
+                        <li class="green">Read <span data-ls-bind="({{usage.documentsRead|statsGetLast|statsTotal}})"></span></li>
                     </ul>
 
                     <div class="box margin-bottom-small">
                         <div class="margin-start-negative-small margin-end-negative-small margin-top-negative-small margin-bottom-negative-small">
                             <div class="chart margin-bottom-no">
-                                <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Updated=documents.update" data-colors="blue" data-height="140" />
+                                <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Updated=documentsUpdate" data-colors="blue" data-height="140" />
                             </div>
                         </div>
                     </div>
 
                     <ul class="chart-notes margin-bottom-large">
-                        <li class="red">Updated <span data-ls-bind="({{usage.failures.total}})"></span></li> <!-- TODO: add total to endpoint's response -->
+                        <li class="blue">Updated <span data-ls-bind="({{usage.documentsUpdate|statsGetLast|statsTotal}})"></span></li>
                     </ul>
 
                     <div class="box margin-bottom-small">
                         <div class="margin-start-negative-small margin-end-negative-small margin-top-negative-small margin-bottom-negative-small">
                             <div class="chart margin-bottom-no">
-                                <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Deleted=documents.delete" data-colors="red" data-height="140" />
+                                <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Deleted=documentsDelete" data-colors="red" data-height="140" />
                             </div>
                         </div>
                     </div>
 
                     <ul class="chart-notes margin-bottom-large">
-                        <li class="red">Deleted <span data-ls-bind="({{usage.failures.total}})"></span></li> <!-- TODO: add total to endpoint's response -->
+                        <li class="red">Deleted <span data-ls-bind="({{usage.documentsDelete|statsGetLast|statsTotal}})"></span></li>
                     </ul>
                 </div>
-
-
             </li>
             <li data-state="/console/database/collection/settings?id={{router.params.id}}&project={{router.params.project}}">
                 <h2>Settings</h2>

app/views/console/database/index.phtml

@@ -118,9 +118,108 @@
                 </div>
 
             </li>
-            <!-- <li data-state="/console/database/usage?project={{router.params.project}}">
+            <li data-state="/console/database/usage?project={{router.params.project}}">
+                <form class="pull-end margin-start-small margin-top-small" data-ls-if="{{usage.range}} !== '90d'"
+                    data-service="database.getUsage"
+                    data-event="submit"
+                    data-name="usage"
+                    data-param-range="90d">
+                    <button class="tick">90d</button>
+                </form>
+
+                <button class="tick pull-end margin-start-small margin-top-small" data-ls-if="{{usage.range}} === '90d'" disabled>90d</button>
+
+                <form class="pull-end margin-start-small margin-top-small" data-ls-if="{{usage.range}} !== '30d'"
+                    data-service="database.getUsage"
+                    data-event="submit"
+                    data-name="usage">
+                    <button class="tick">30d</button>
+                </form>
+
+                <button class="tick pull-end margin-start-small margin-top-small" data-ls-if="{{usage.range}} === '30d'" disabled>30d</button>
+
+                <form class="pull-end margin-start-small margin-top-small" data-ls-if="{{usage.range}} !== '24h'"
+                    data-service="database.getUsage"
+                    data-event="submit"
+                    data-name="usage"
+                    data-param-range="24h">
+                    <button class="tick">24h</button>
+                </form>
+
+                <button class="tick pull-end margin-start-small margin-top-small" data-ls-if="{{usage.range}} === '24h'" disabled>24h</button>
+
                 <h2>Usage</h2>
-            </li> -->
+
+                <div
+                    data-service="database.getUsage"
+                    data-event="load"
+                    data-name="usage">
+                    <div class="box margin-bottom-small">
+                        <div class="margin-start-negative-small margin-end-negative-small margin-top-negative-small margin-bottom-negative-small">
+                            <div class="chart margin-bottom-no">
+                                <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Total Documents=documentsCount,Total Collections=collectionsCount" data-height="140" />
+                            </div>
+                        </div>
+                    </div>
+
+                    <ul class="chart-notes margin-bottom-large">
+                        <li>Total Documents <span data-ls-bind="({{usage.documentsCount|statsGetLast|statsTotal}})"></span></li>
+                        <li>Total Collections <span data-ls-bind="({{usage.collectionsCount|statsGetLast|statsTotal}})"></span></li>
+                    </ul>
+
+                    <div class="box margin-bottom-small">
+                        <div class="margin-start-negative-small margin-end-negative-small margin-top-negative-small margin-bottom-negative-small">
+                            <div class="chart margin-bottom-no">
+                                <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Documents created=documentsCreate,Collections created=collectionsCreate" data-height="140" />
+                            </div>
+                        </div>
+                    </div>
+
+                    <ul class="chart-notes margin-bottom-large">
+                        <li>Documents created</li>
+                        <li>Collections created</li>
+                    </ul>
+
+                    <div class="box margin-bottom-small">
+                        <div class="margin-start-negative-small margin-end-negative-small margin-top-negative-small margin-bottom-negative-small">
+                            <div class="chart margin-bottom-no">
+                                <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Documents read=documentsRead,Collections read=collectionsRead" data-height="140" />
+                            </div>
+                        </div>
+                    </div>
+
+                    <ul class="chart-notes margin-bottom-large">
+                        <li>Documents read</li>
+                        <li>Collections read</li>
+                    </ul>
+
+                    <div class="box margin-bottom-small">
+                        <div class="margin-start-negative-small margin-end-negative-small margin-top-negative-small margin-bottom-negative-small">
+                            <div class="chart margin-bottom-no">
+                                <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Documents updated=documentsUpdate,Collections updated=collectionsUpdate" data-height="140" />
+                            </div>
+                        </div>
+                    </div>
+
+                    <ul class="chart-notes margin-bottom-large">
+                        <li>Documents updated</li>
+                        <li>Collections updated</li>
+                    </ul>
+
+                    <div class="box margin-bottom-small">
+                        <div class="margin-start-negative-small margin-end-negative-small margin-top-negative-small margin-bottom-negative-small">
+                            <div class="chart margin-bottom-no">
+                                <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Documents deleted=documentsDelete,Collections deleted=collectionsDelete" data-height="140" />
+                            </div>
+                        </div>
+                    </div>
+
+                    <ul class="chart-notes margin-bottom-large">
+                        <li>Documents deleted</li>
+                        <li>Collections deleted</li>
+                    </ul>
+                </div>
+            </li>
         </ul>
     </div>
 </div>

app/views/console/functions/function.phtml

@@ -247,37 +247,37 @@ $usageStatsEnabled = $this->getParam('usageStatsEnabled', true);
                     <div class="box margin-bottom-small">
                         <div class="margin-start-negative-small margin-end-negative-small margin-top-negative-small margin-bottom-negative-small">
                             <div class="chart margin-bottom-no">
-                                <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Executions=executions.data" data-height="140" />
+                                <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Executions=functionsExecutions" data-height="140" />
                             </div>
                         </div>
                     </div>
 
                     <ul class="chart-notes margin-bottom-large">
-                        <li>Executions <span data-ls-bind="({{usage.executions.total}})"></span></li>
+                        <li>Executions <span data-ls-bind="({{usage.functionsExecutions|statsGetLast|statsTotal}})"></span></li>
                     </ul>
 
                     <div class="box margin-bottom-small">
                         <div class="margin-start-negative-small margin-end-negative-small margin-top-negative-small margin-bottom-negative-small">
                             <div class="chart margin-bottom-no">
-                                <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="CPU Time (seconds)=compute.data" data-colors="orange" data-height="140" />
+                                <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="CPU Time (seconds)=functionsCompute" data-colors="orange" data-height="140" />
                             </div>
                         </div>
                     </div>
 
                     <ul class="chart-notes margin-bottom-large">
-                        <li class="orange">CPU Time <span data-ls-bind="({{usage.compute.total|seconds2hum}})"></span></li>
+                        <li class="orange">CPU Time <span data-ls-bind="({{usage.functionsCompute|statsGetLast|seconds2hum}})"></span></li>
                     </ul>
 
                     <div class="box margin-bottom-small">
                         <div class="margin-start-negative-small margin-end-negative-small margin-top-negative-small margin-bottom-negative-small">
                             <div class="chart margin-bottom-no">
-                                <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Failures=failures.data" data-colors="red" data-height="140" />
+                                <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Failures=functionsFailures" data-colors="red" data-height="140" />
                             </div>
                         </div>
                     </div>
 
                     <ul class="chart-notes margin-bottom-large">
-                        <li class="red">Errors <span data-ls-bind="({{usage.failures.total}})"></span></li>
+                        <li class="red">Errors <span data-ls-bind="({{usage.functionsFailures|statsGetLast|statsTotal}})"></span></li>
                     </ul>
                 </div>
             </li>

app/views/console/home/index.phtml

@@ -93,11 +93,11 @@ $usageStatsEnabled = $this->getParam('usageStatsEnabled', true);
                 <div class="row responsive">
                     <div class="col span-9">
                         <div class="chart pull-end">
-                            <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Requests=requests.data" />
+                            <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Requests=requests" />
                         </div>
 
                         <div class="chart-metric">
-                            <div class="value margin-bottom-small"><span class="sum" data-ls-bind="{{usage.requests.total|statsTotal}}">N/A</span></div>
+                            <div class="value margin-bottom-small"><span class="sum" data-ls-bind="{{usage.requests|statsGetLast|statsTotal}}">N/A</span></div>
                             <div class="unit margin-start-no margin-bottom-small">Requests</div>
                         </div>
                     </div>
@@ -115,22 +115,22 @@ $usageStatsEnabled = $this->getParam('usageStatsEnabled', true);
             <div class="box dashboard">
                 <div class="row responsive">
                     <div class="col span-3">
-                        <div class="value"><span class="sum" data-ls-bind="{{usage.documents.total|statsTotal}}" data-default="0">0</span></div>
+                        <div class="value"><span class="sum" data-ls-bind="{{usage.documents|statsGetLast|statsTotal}}" data-default="0">0</span></div>
                         <div class="margin-top-small"><b class="text-size-small unit">Documents</b></div>
                     </div>
                     <div class="col span-3">
                         <div class="value">
-                            <span class="sum" data-ls-bind="{{usage.storage.total|humanFileSize}}" data-default="0">0</span>
-                            <span data-ls-bind="{{usage.storage.total|humanFileUnit}}" class="text-size-small unit"></span>
+                            <span class="sum" data-ls-bind="{{usage.storage|statsGetLast|humanFileSize}}" data-default="0">0</span>
+                            <span data-ls-bind="{{usage.storage|statsGetLast|humanFileUnit}}" class="text-size-small unit"></span>
                         </div>
                         <div class="margin-top-small"><b class="text-size-small unit">Storage</b></div>
                     </div>
                     <div class="col span-3">
-                        <div class="value"><span class="sum" data-ls-bind="{{usage.users.total|statsTotal}}" data-default="0">0</span></div>
+                        <div class="value"><span class="sum" data-ls-bind="{{usage.users|statsGetLast|statsTotal}}" data-default="0">0</span></div>
                         <div class="margin-top-small"><b class="text-size-small unit">Users</b></div>
                     </div>
                     <div class="col span-3">
-                        <div class="value"><span class="sum" data-ls-bind="{{usage.functions.total|statsTotal}}" data-default="0">0</span></div>
+                        <div class="value"><span class="sum" data-ls-bind="{{usage.functions|statsGetLast|statsTotal}}" data-default="0">0</span></div>
                         <div class="margin-top-small"><b class="text-size-small unit">Executions</b></div>
                     </div>
                 </div>

app/views/console/index.phtml

@@ -39,7 +39,7 @@ $home = $this->getParam('home', '');
             <li class="margin-bottom">
                 <a data-ls-attrs="href=/console/home?project={{project.$id}}" class="box">
                     <div data-ls-bind="{{project.name}}" class="text-one-liner margin-bottom-tiny text-bold">&nbsp;</div>
-                    
+
                     <p data-ls-if="({{project.platforms.length}})" class="text-fade text-size-small" data-ls-bind="{{project.platforms.length}} apps"></p>
                     <p data-ls-if="(!{{project.platforms.length}})" class="text-fade text-size-small">&nbsp;</p>
 

app/views/console/storage/index.phtml

@@ -14,7 +14,7 @@ $fileLimitHuman = $this->getParam('fileLimitHuman', 0);
 
 <div class="zone xl">
     <ul class="phases clear" data-ui-phases data-selected="{{router.params.tab}}">
-        <li data-state="/console/database?project={{router.params.project}}">
+        <li data-state="/console/storage?project={{router.params.project}}">
             <h2 class="margin-bottom">Files</h2>
 
             <form class="box padding-small margin-bottom search"
@@ -268,5 +268,66 @@ $fileLimitHuman = $this->getParam('fileLimitHuman', 0);
                 </div>
             </div>
         </li>
+        <li data-state="/console/storage/usage?project={{router.params.project}}">
+            <form class="pull-end margin-start-small margin-top-small" data-ls-if="{{usage.range}} !== '90d'"
+                    data-service="storage.getUsage"
+                    data-event="submit"
+                    data-name="usage"
+                    data-param-range="90d">
+                <button class="tick">90d</button>
+            </form>
+
+            <button class="tick pull-end margin-start-small margin-top-small" data-ls-if="{{usage.range}} === '90d'" disabled>90d</button>
+
+            <form class="pull-end margin-start-small margin-top-small" data-ls-if="{{usage.range}} !== '30d'"
+                data-service="storage.getUsage"
+                data-event="submit"
+                data-name="usage">
+                <button class="tick">30d</button>
+            </form>
+
+            <button class="tick pull-end margin-start-small margin-top-small" data-ls-if="{{usage.range}} === '30d'" disabled>30d</button>
+
+            <form class="pull-end margin-start-small margin-top-small" data-ls-if="{{usage.range}} !== '24h'"
+                data-service="storage.getUsage"
+                data-event="submit"
+                data-name="usage"
+                data-param-range="24h">
+                <button class="tick">24h</button>
+            </form>
+
+            <button class="tick pull-end margin-start-small margin-top-small" data-ls-if="{{usage.range}} === '24h'" disabled>24h</button>
+
+            <h2>Usage</h2>
+
+            <div
+                data-service="storage.getUsage"
+                data-event="load"
+                data-name="usage">
+                <div class="box margin-bottom-small">
+                    <div class="margin-start-negative-small margin-end-negative-small margin-top-negative-small margin-bottom-negative-small">
+                        <div class="chart margin-bottom-no">
+                            <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Total Files=files" data-height="140" />
+                        </div>
+                    </div>
+                </div>
+
+                <ul class="chart-notes margin-bottom-large">
+                    <li>Total Files <span data-ls-bind="({{usage.files|statsGetLast|statsTotal}})"></span></li>
+                </ul>
+
+                <div class="box margin-bottom-small">
+                    <div class="margin-start-negative-small margin-end-negative-small margin-top-negative-small margin-bottom-negative-small">
+                        <div class="chart margin-bottom-no">
+                            <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Total Storage=storage" data-height="140" />
+                        </div>
+                    </div>
+                </div>
+
+                <ul class="chart-notes margin-bottom-large">
+                    <li>Total Storage (<span data-ls-bind="{{usage.storage|statsGetLast|humanFileSize}}"></span> <span data-ls-bind="{{usage.storage|statsGetLast|humanFileUnit}}"></span>)</li>
+                </ul>
+            </div>
+        </li>
     </ul>
 </div>