From 80c732f34e8fdd98d9eb3afe5112b8fb81e7cd4f Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Fri, 12 Nov 2021 13:31:57 +0545
Subject: [PATCH] buckets chart

---
 app/views/console/storage/bucket.phtml | 21 +++++++--------------
 app/views/console/storage/index.phtml  | 16 ++++++++--------
 2 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/app/views/console/storage/bucket.phtml b/app/views/console/storage/bucket.phtml
index 9095ab9ce9..32ee7f38f2 100644
--- a/app/views/console/storage/bucket.phtml
+++ b/app/views/console/storage/bucket.phtml
@@ -330,6 +330,8 @@ $fileLimitHuman = $this->getParam('fileLimitHuman', 0);
 
                 <h2>Usage</h2>
 
+                <h3 class="margin-bottom-no">Objects</h3>
+                <p class="small">Count of files over time</p>
                 <div data-service="storage.getBucketUsage" data-event="load" data-name="usage" data-param-bucket-id="{{router.params.id}}">
                     <div class="box margin-bottom-small">
                         <div class="margin-start-negative-small margin-end-negative-small margin-top-negative-small margin-bottom-negative-small">
@@ -343,28 +345,19 @@ $fileLimitHuman = $this->getParam('fileLimitHuman', 0);
                         <li>Files <span data-ls-bind="({{usage.filesCount|statsGetLast|statsTotal}})"></span></li>
                     </ul>
 
+                    <h3 class="margin-bottom-no">Files</h3>
+                    <p class="small">Count of files create, read, update and delete operations over time</p>
                     <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=filesRead" data-colors="orange" data-height="140" />
+                                <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Create=filesCreate,Read=filesRead,Updated=filesUpdate,Deleted=filesDelete" data-colors="create,read,update,delete" data-height="140" />
                             </div>
                         </div>
                     </div>
 
-                    <ul class="chart-notes margin-bottom-large">
-                        <li class="orange">Read <span data-ls-bind="({{usage.filesRead|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="Create=filesCreate,Updated=filesUpdate,Deleted=filesDelete" data-colors="green" data-height="140" />
-                            </div>
-                        </div>
-                    </div>
-
-                    <ul class="chart-notes margin-bottom-large">
+                    <ul class="chart-notes crud margin-bottom-large">
                         <li class="green">Create <span data-ls-bind="({{usage.filesCreate|statsGetLast|statsTotal}})"></span></li>
+                        <li class="green">Read <span data-ls-bind="({{usage.filesRead|statsGetLast|statsTotal}})"></span></li>
                         <li class="green">Update <span data-ls-bind="({{usage.filesUpdate|statsGetLast|statsTotal}})"></span></li>
                         <li class="green">Delete <span data-ls-bind="({{usage.filesDelete|statsGetLast|statsTotal}})"></span></li>
                     </ul>
diff --git a/app/views/console/storage/index.phtml b/app/views/console/storage/index.phtml
index dae60aeaeb..05c6e81e26 100644
--- a/app/views/console/storage/index.phtml
+++ b/app/views/console/storage/index.phtml
@@ -199,10 +199,10 @@
                     </div>
 
                     <ul class="chart-notes crud margin-bottom-large">
-                        <li>Buckets create</li>
-                        <li>Buckets read</li>
-                        <li>Buckets update</li>
-                        <li>Buckets delete</li>
+                    <li class="green">Create <span data-ls-bind="({{usage.bucketsCreate|statsGetLast|statsTotal}})"></span></li>
+                        <li class="green">Read <span data-ls-bind="({{usage.bucketsRead|statsGetLast|statsTotal}})"></span></li>
+                        <li class="green">Update <span data-ls-bind="({{usage.bucketsUpdate|statsGetLast|statsTotal}})"></span></li>
+                        <li class="green">Delete <span data-ls-bind="({{usage.bucketsDelete|statsGetLast|statsTotal}})"></span></li>
                     </ul>
 
                     <h3 class="margin-bottom-no">Files</h3>
@@ -216,10 +216,10 @@
                     </div>
 
                     <ul class="chart-notes crud margin-bottom-large">
-                        <li>Files create</li>
-                        <li>Files read</li>
-                        <li>Files update</li>
-                        <li>Files delete</li>
+                    <li class="green">Create <span data-ls-bind="({{usage.filesCreate|statsGetLast|statsTotal}})"></span></li>
+                        <li class="green">Read <span data-ls-bind="({{usage.filesRead|statsGetLast|statsTotal}})"></span></li>
+                        <li class="green">Update <span data-ls-bind="({{usage.filesUpdate|statsGetLast|statsTotal}})"></span></li>
+                        <li class="green">Delete <span data-ls-bind="({{usage.filesDelete|statsGetLast|statsTotal}})"></span></li>
                     </ul>
                 </div>
             </li>