From 35dffe9d8ebc3dd7efebb49eae36645b52b5e12c Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Fri, 12 Nov 2021 11:23:46 +0545
Subject: [PATCH] chart title and description

---
 app/views/console/storage/index.phtml | 85 ++++++++++++++-------------
 1 file changed, 45 insertions(+), 40 deletions(-)

diff --git a/app/views/console/storage/index.phtml b/app/views/console/storage/index.phtml
index 52c02499a4..dae60aeaeb 100644
--- a/app/views/console/storage/index.phtml
+++ b/app/views/console/storage/index.phtml
@@ -155,67 +155,72 @@
                     data-service="storage.getUsage"
                     data-event="load"
                     data-name="usage">
-
-                    <div class="box dashboard">
-                        <div class="row responsive">
-                            <div class="col span-12">
-                                <div class="margin-top-negative-small margin-end-negative-large">
-                                    <div class="chart pull-end">
-                                        <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Total Files=filesCount,Total Buckets=bucketsCount"/>
-                                    </div>
-                                    <div class="chart-metric">
-                                        <div class="value margin-bottom-small margin-top-small">
-                                            <span class="sum" data-ls-bind="{{usage.filesStorage|statsGetLast|humanFileSize}}">0</span>
-                                            <span class="sum" data-ls-bind="{{usage.filesStorage|statsGetLast|statsTotal|humanFileUnit}}"></span>
-                                        </div>
-                                        <div class="unit margin-start-no margin-bottom-small">Storage</div>
-                                    </div>
-                                </div>
-                                <ul class="chart-notes margin-top-small">
-                                    <li>Total Files <span data-ls-bind="({{usage.filesCount|statsGetLast|statsTotal}})"></span></li>
-                                    <li>Total Buckets <span data-ls-bind="({{usage.bucketsCount|statsGetLast|statsTotal}})"></span></li>
-                                </ul>
+                    <h3 class="margin-bottom-no">Objects</h3>
+                    <p class="small">Count of buckets, files and total storage used over time</p>
+                    <div class="box">
+                        <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=filesCount,Total Buckets=bucketsCount, Total storage=filesStorage"/>
                             </div>
                         </div>
                     </div>
-                    <div class="box dashboard">
+                    <ul class="chart-notes margin-top-small margin-bottom-large">
+                        <li>Total Files <span data-ls-bind="({{usage.filesCount|statsGetLast|statsTotal}})"></span></li>
+                        <li>Total Buckets <span data-ls-bind="({{usage.bucketsCount|statsGetLast|statsTotal}})"></span></li>
+                        <li>Total Storage <span data-ls-bind="({{usage.filesStorage|statsGetLast|statsTotal}})"></span></li>
+                    </ul>
+                    <!-- <div class="box dashboard">
                         <div class="row responsive">
-                            <div class="col span-6">
+                            <div class="col span-4">
+                                <div class="value"><span class="sum" data-ls-bind="{{usage.filesStorage|statsGetLast|humanFileSize}}">0</span>
+                                        <span class="sum" data-ls-bind="{{usage.filesStorage|statsGetLast|statsTotal|humanFileUnit}}"></span></div>
+                                <div class="margin-top-small"><b class="text-size-small unit">Storage</b></div>
+                            </div>
+                            <div class="col span-4">
                                 <div class="value"><span class="sum" data-ls-bind="{{usage.bucketsCount|statsGetLast|statsTotal}}" data-default="0">0</span></div>
                                 <div class="margin-top-small"><b class="text-size-small unit">Buckets</b></div>
                             </div>
-                            <div class="col span-6">
+                            <div class="col span-4">
                                 <div class="value"><span class="sum" data-ls-bind="{{usage.filesCount|statsGetLast}}" data-default="0">0</span></div>
                                 <div class="margin-top-small"><b class="text-size-small unit">Files</b></div>
                             </div>
                         </div>
-                    </div>
-
-                    <div class="box margin-bottom-small margin-top-large">
-                        <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="Buckets read=bucketsRead" data-height="140" />
-                            </div>
-                        </div>
-                    </div>
-
-                    <ul class="chart-notes margin-bottom-large">
-                        <li>Buckets read</li>
-                    </ul>
-
+                    </div> -->
+                    
+                    <!-- CRUDS class for graph fixed colors, use color codes from Docs for CRUD operations -->
+                    <h3 class="margin-bottom-no">Buckets</h3>
+                    <p>Count of bucket 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="Buckets create=bucketsCreate,Buckets update=bucketsUpdate,Buckets delete=bucketsDelete" data-height="140" />
+                            <div class="chart crud margin-bottom-no">
+                                <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Buckets create=bucketsCreate,Buckets read=bucketsRead,Buckets update=bucketsUpdate,Buckets delete=bucketsDelete" data-colors="create,read,update,delete" data-height="140" />
                             </div>
                         </div>
                     </div>
 
-                    <ul class="chart-notes margin-bottom-large">
+                    <ul class="chart-notes crud margin-bottom-large">
                         <li>Buckets create</li>
+                        <li>Buckets read</li>
                         <li>Buckets update</li>
                         <li>Buckets delete</li>
                     </ul>
+
+                    <h3 class="margin-bottom-no">Files</h3>
+                    <p>Count of file 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 crud margin-bottom-no">
+                                <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Files create=filesCreate,Files read=filesRead,Files update=filesUpdate,Files delete=filesDelete" data-colors="create,read,update,delete" data-height="140" />
+                            </div>
+                        </div>
+                    </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>
+                    </ul>
                 </div>
             </li>
         </ul>