From ada00948c5b61ac308d2b415e2621958b50afb8c Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Mon, 18 Jul 2022 06:30:51 +0000
Subject: [PATCH] functions usage

---
 app/views/console/functions/function.phtml |  9 +--
 app/views/console/functions/index.phtml    | 77 ++++++++++++++++++++++
 2 files changed, 82 insertions(+), 4 deletions(-)

diff --git a/app/views/console/functions/function.phtml b/app/views/console/functions/function.phtml
index 5d5cc20b9f..b1f96efaea 100644
--- a/app/views/console/functions/function.phtml
+++ b/app/views/console/functions/function.phtml
@@ -291,7 +291,7 @@ sort($patterns);
             <li data-state="/console/functions/function/monitors?id={{router.params.id}}&project={{router.params.project}}">
 
                 <form class="pull-end margin-start-small margin-top-small" data-ls-if="{{usage.range}} !== '90d'"
-                    data-service="functions.getUsage"
+                    data-service="functions.getFunctionUsage"
                     data-event="submit"
                     data-name="usage"
                     data-param-function-id="{{router.params.id}}"
@@ -302,9 +302,10 @@ sort($patterns);
                 <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="functions.getUsage"
+                    data-service="functions.getFunctionUsage"
                     data-event="submit"
                     data-name="usage"
+                    data-param-range="30d"
                     data-param-function-id="{{router.params.id}}">
                     <button class="tick">30d</button>
                 </form>
@@ -312,7 +313,7 @@ sort($patterns);
                 <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="functions.getUsage"
+                    data-service="functions.getFunctionUsage"
                     data-event="submit"
                     data-name="usage"
                     data-param-function-id="{{router.params.id}}"
@@ -325,7 +326,7 @@ sort($patterns);
                 <h2>Monitors</h2>
 
                 <div
-                    data-service="functions.getUsage"
+                    data-service="functions.getFunctionUsage"
                     data-event="load"
                     data-name="usage"
                     data-param-function-id="{{router.params.id}}">
diff --git a/app/views/console/functions/index.phtml b/app/views/console/functions/index.phtml
index fb254a5aa1..95d927c464 100644
--- a/app/views/console/functions/index.phtml
+++ b/app/views/console/functions/index.phtml
@@ -136,5 +136,82 @@ $runtimes = $this->getParam('runtimes', []);
                 </div>
             </div>
         </li>
+        <?php if ($usageStatsEnabled): ?>
+        <li data-state="/console/functions/usage?id={{router.params.id}}&project={{router.params.project}}">
+
+            <form class="pull-end margin-start-small margin-top-small" data-ls-if="{{usage.range}} !== '90d'"
+                data-service="functions.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="functions.getUsage"
+                data-event="submit"
+                data-name="usage"
+                data-param-range="30d">
+                <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="functions.getFunctionUsage"
+                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>Monitors</h2>
+
+            <div
+                data-service="functions.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 background-image-no border-no margin-bottom-no">
+                            <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Executions=functionsExecutions" data-height="140" data-show-y-axis="true" />
+                        </div>
+                    </div>
+                </div>
+
+                <ul class="chart-notes margin-bottom-large">
+                    <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 background-image-no border-no margin-bottom-no">
+                            <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="CPU Time (milliseconds)=functionsCompute" data-colors="orange" data-height="140" data-show-y-axis="true" />
+                        </div>
+                    </div>
+                </div>
+
+                <ul class="chart-notes margin-bottom-large">
+                    <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 background-image-no border-no margin-bottom-no">
+                            <input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Failures=functionsFailures" data-colors="red" data-height="140" data-show-y-axis="true" />
+                        </div>
+                    </div>
+                </div>
+
+                <ul class="chart-notes margin-bottom-large">
+                    <li class="red">Errors <span data-ls-bind="({{usage.functionsFailures|statsGetLast|statsTotal}})"></span></li>
+                </ul>
+            </div>
+        </li>
+        <?php endif;?>
     </ul>
 </div>
\ No newline at end of file