From 3ea1e959f966887cb30961ba932073cf51e5555f Mon Sep 17 00:00:00 2001
From: James Brooks <jbrooksuk@me.com>
Date: Sat, 30 Sep 2017 11:20:09 +0100
Subject: [PATCH] Fix metrics not displaying. Closes #2737

---
 app/Presenters/MetricPresenter.php            |  16 +-
 resources/assets/js/app.js                    |   9 +-
 .../js/components/{Setup.js => Setup.vue}     |   2 +
 .../dashboard/{Dashboard.js => Dashboard.vue} |   2 +
 .../{InviteTeam.js => InviteTeam.vue}         |   2 +
 .../{ReportIncident.js => ReportIncident.vue} |   2 +
 .../js/components/status-page/Metric.vue      | 179 ++++++++++++++++++
 .../views/partials/modules/metrics.blade.php  | 132 +------------
 webpack.mix.js                                |   3 +-
 9 files changed, 209 insertions(+), 138 deletions(-)
 rename resources/assets/js/components/{Setup.js => Setup.vue} (98%)
 rename resources/assets/js/components/dashboard/{Dashboard.js => Dashboard.vue} (94%)
 rename resources/assets/js/components/dashboard/{InviteTeam.js => InviteTeam.vue} (96%)
 rename resources/assets/js/components/dashboard/{ReportIncident.js => ReportIncident.vue} (98%)
 create mode 100644 resources/assets/js/components/status-page/Metric.vue

diff --git a/app/Presenters/MetricPresenter.php b/app/Presenters/MetricPresenter.php
index 3a76abdd..c701bcdf 100644
--- a/app/Presenters/MetricPresenter.php
+++ b/app/Presenters/MetricPresenter.php
@@ -13,9 +13,10 @@ namespace CachetHQ\Cachet\Presenters;
 
 use CachetHQ\Cachet\Presenters\Traits\TimestampsTrait;
 use Illuminate\Contracts\Support\Arrayable;
+use Illuminate\Contracts\Support\Jsonable;
 use McCool\LaravelAutoPresenter\BasePresenter;
 
-class MetricPresenter extends BasePresenter implements Arrayable
+class MetricPresenter extends BasePresenter implements Arrayable, Jsonable
 {
     use TimestampsTrait;
 
@@ -72,4 +73,17 @@ class MetricPresenter extends BasePresenter implements Arrayable
             'default_view_name' => $this->default_view_name(),
         ]);
     }
+
+    /**
+     * Convert the object to its JSON representation.
+     *
+     * @param  int  $options
+     * @return string
+     */
+    public function toJson($options = 0)
+    {
+        $json = json_encode($this->toArray(), $options);
+
+        return $json;
+    }
 }
diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
index 38bd72c0..e3926942 100644
--- a/resources/assets/js/app.js
+++ b/resources/assets/js/app.js
@@ -42,10 +42,11 @@ window.axios.defaults.headers.common = {
             }
         },
         components: {
-            'setup': require('./components/Setup.js'),
-            'dashboard': require('./components/dashboard/Dashboard.js'),
-            'report-incident': require('./components/dashboard/ReportIncident.js'),
-            'invite-team': require('./components/dashboard/InviteTeam.js'),
+            'setup': require('./components/Setup'),
+            'dashboard': require('./components/dashboard/Dashboard'),
+            'report-incident': require('./components/dashboard/ReportIncident'),
+            'invite-team': require('./components/dashboard/InviteTeam'),
+            'metric-chart': require('./components/status-page/Metric'),
         }
     })
 })()
diff --git a/resources/assets/js/components/Setup.js b/resources/assets/js/components/Setup.vue
similarity index 98%
rename from resources/assets/js/components/Setup.js
rename to resources/assets/js/components/Setup.vue
index 6bb0e73d..39eff5ea 100644
--- a/resources/assets/js/components/Setup.js
+++ b/resources/assets/js/components/Setup.vue
@@ -1,3 +1,4 @@
+<script>
 module.exports = {
     props: [],
     data () {
@@ -47,3 +48,4 @@ module.exports = {
         }
     }
 }
+</script>
diff --git a/resources/assets/js/components/dashboard/Dashboard.js b/resources/assets/js/components/dashboard/Dashboard.vue
similarity index 94%
rename from resources/assets/js/components/dashboard/Dashboard.js
rename to resources/assets/js/components/dashboard/Dashboard.vue
index 176907f7..e8a9736f 100644
--- a/resources/assets/js/components/dashboard/Dashboard.js
+++ b/resources/assets/js/components/dashboard/Dashboard.vue
@@ -1,3 +1,4 @@
+<script>
 module.exports = {
     props: ['welcome-user'],
     mounted () {
@@ -14,3 +15,4 @@ module.exports = {
         }
     }
 }
+</script>
diff --git a/resources/assets/js/components/dashboard/InviteTeam.js b/resources/assets/js/components/dashboard/InviteTeam.vue
similarity index 96%
rename from resources/assets/js/components/dashboard/InviteTeam.js
rename to resources/assets/js/components/dashboard/InviteTeam.vue
index 20812706..fcfb203d 100644
--- a/resources/assets/js/components/dashboard/InviteTeam.js
+++ b/resources/assets/js/components/dashboard/InviteTeam.vue
@@ -1,3 +1,4 @@
+<script>
 module.exports = {
     data () {
         return {
@@ -27,3 +28,4 @@ module.exports = {
         }
     }
 }
+</script>
diff --git a/resources/assets/js/components/dashboard/ReportIncident.js b/resources/assets/js/components/dashboard/ReportIncident.vue
similarity index 98%
rename from resources/assets/js/components/dashboard/ReportIncident.js
rename to resources/assets/js/components/dashboard/ReportIncident.vue
index 8d6ade64..4813d7eb 100644
--- a/resources/assets/js/components/dashboard/ReportIncident.js
+++ b/resources/assets/js/components/dashboard/ReportIncident.vue
@@ -1,3 +1,4 @@
+<script>
 module.exports = {
     data () {
         return {
@@ -41,3 +42,4 @@ module.exports = {
         }
     }
 }
+</script>
diff --git a/resources/assets/js/components/status-page/Metric.vue b/resources/assets/js/components/status-page/Metric.vue
new file mode 100644
index 00000000..749aeae4
--- /dev/null
+++ b/resources/assets/js/components/status-page/Metric.vue
@@ -0,0 +1,179 @@
+<template>
+    <div>
+        <div class="row">
+            <div class="col-xs-10">
+                <strong>
+                    {{metric.name}}
+
+                    <i class="ion ion-ios-help-outline" data-toggle="tooltip" :data-title="metric.description" v-if="metric.description"></i>
+                </strong>
+            </div>
+            <div class="col-xs-2">
+                <div class="dropdown pull-right">
+                    <a href='javascript: void(0)' class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class='filter'>{{view.title || metric.default_view_name}}</span> <span class="caret"></span></a>
+
+                    <ul class="dropdown-menu dropdown-menu-right">
+                        <!-- TODO: Make these dynamic translations -->
+                        <li><a @click="changeView('last_hour', 'Last Hour')">Last Hour</a></li>
+                        <li><a @click="changeView('today', 'Last 12 Hours')">Last 12 Hours</a></li>
+                        <li><a @click="changeView('week', 'Week')">Week</a></li>
+                        <li><a @click="changeView('month', 'Month')">Month</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-xs-12">
+                <canvas :id="metricId" height="160" width="600"></canvas>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+const Chart = require('chart.js')
+const _ = require('lodash')
+
+// Configure Chart.js
+Chart.defaults.global.elements.point.hitRadius = 10
+Chart.defaults.global.responsiveAnimationDuration = 1000
+Chart.defaults.global.legend.display = false
+
+module.exports = {
+    props: [
+        'metric',
+    ],
+    data () {
+        return {
+            canvas: null,
+            context: null,
+            chart: null,
+            data: null,
+            view: {
+                param: null,
+                title: null,
+            },
+            loading: false,
+        }
+    },
+    mounted () {
+        this.canvas = document.getElementById(this.metricId)
+        this.context = this.canvas.getContext('2d')
+
+        this.getData()
+
+        $('.dropdown-toggle').dropdown()
+    },
+    computed: {
+        metricId () {
+            return `metric-${this.metric.id}`
+        }
+    },
+    watch: {
+        loading (val) {
+            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
+
+            this.context.fillStyle = "#666"
+            this.context.font = '44px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+
+            const textString = "Loading data",
+                textWidth = this.context.measureText(textString).width
+
+            this.canvas.textBaseline = 'middle'
+            this.canvas.textAlign = "center"
+
+            this.context.fillText(textString , (this.canvas.width / 2) - (textWidth / 2), 100)
+        }
+    },
+    methods: {
+        getData () {
+            this.loading = true
+
+            return axios.get('/metrics/'+this.metric.id, {
+                params: {
+                    filter: this.view.param
+                }
+            }).then(response => {
+                this.data = response.data.data.items
+
+                this.loading = false
+
+                this.updateChart()
+            })
+        },
+        changeView (param, title) {
+            // Don't reload the same view.
+            if (this.view.param === param) return
+
+            this.view = {
+                param: param,
+                title: title
+            }
+
+            this.getData().then(this.updateChart)
+        },
+        updateChart () {
+            if (this.chart !== null) {
+                this.chart.destroy()
+            }
+
+            this.chart = new Chart(this.context, {
+                type: 'line',
+                data: {
+                    labels: _.keys(this.data),
+                    datasets: [{
+                        data: _.values(this.data),
+                        // backgroundColor: "{{ $theme_metrics }}",
+                        // borderColor: "{{ color_darken($theme_metrics, -0.1) }}",
+                        // pointBackgroundColor: "{{ color_darken($theme_metrics, -0.1) }}",
+                        // pointBorderColor: "{{ color_darken($theme_metrics, -0.1) }}",
+                        // pointHoverBackgroundColor: "{{ color_darken($theme_metrics, -0.2) }}",
+                        // pointHoverBorderColor: "{{ color_darken($theme_metrics, -0.2) }}"
+                    }]
+                },
+                options: {
+                    scales: {
+                        yAxes: [{
+                            ticks: {
+                                beginAtZero: true,
+                                suggestedMax: 0.1,
+                                // fixedStepSize: result.data.metric.places,
+                                callback: function(tickValue, index, ticks) {
+                                    let delta = ticks[1] - ticks[0]
+
+                                    // If we have a number like 2.5 as the delta, figure out how many decimal places we need
+                                    if (Math.abs(delta) > 1) {
+                                        if (tickValue !== Math.floor(tickValue)) {
+                                            delta = tickValue - Math.floor(tickValue)
+                                        }
+                                    }
+
+                                    const logDelta = Chart.helpers.log10(Math.abs(delta))
+                                    let tickString = ''
+
+                                    if (tickValue !== 0) {
+                                        let numDecimal = -1 * Math.floor(logDelta)
+                                        numDecimal = Math.max(Math.min(numDecimal, 2), 0) // Use as many places as the metric defines
+                                        tickString = tickValue.toFixed(numDecimal)
+                                    } else {
+                                        tickString = '0' // Never show decimal places for 0
+                                    }
+
+                                    return tickString
+                                }
+                            }
+                        }]
+                    },
+                },
+                tooltips: {
+                    callbacks: {
+                        label: function(tooltipItem, data) {
+                            return tooltipItem.yLabel + ' ' + result.data.metric.suffix
+                        }
+                    }
+                }
+            })
+        }
+    }
+}
+</script>
diff --git a/resources/views/partials/modules/metrics.blade.php b/resources/views/partials/modules/metrics.blade.php
index 85279ce2..77bdbeb9 100644
--- a/resources/views/partials/modules/metrics.blade.php
+++ b/resources/views/partials/modules/metrics.blade.php
@@ -4,140 +4,10 @@
     <ul class="list-group">
         @foreach($metrics as $metric)
         <li class="list-group-item metric" data-metric-id="{{ $metric->id }}">
-            <div class="row">
-                <div class="col-xs-10">
-                    <strong>
-                        {{ $metric->name }}
-                        @if($metric->description)
-                        <i class="ion ion-ios-help-outline" data-toggle="tooltip" data-title="{{ $metric->description }}"></i>
-                        @endif
-                    </strong>
-                </div>
-                <div class="col-xs-2">
-                    <div class="dropdown pull-right">
-                        <a href="javascript: void(0);" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class='filter'>{{ trans('cachet.metrics.filter.'.$metric->trans_string_name) }}</span> <span class="caret"></span></a>
-                        <ul class="dropdown-menu dropdown-menu-right">
-                            <li><a href="#" data-filter-type="last_hour">{{ trans('cachet.metrics.filter.last_hour') }}</a></li>
-                            <li><a href="#" data-filter-type="today">{{ trans('cachet.metrics.filter.hourly') }}</a></li>
-                            <li><a href="#" data-filter-type="week">{{ trans('cachet.metrics.filter.weekly') }}</a></li>
-                            <li><a href="#" data-filter-type="month">{{ trans('cachet.metrics.filter.monthly') }}</a></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-            <div class="row">
-                <div class="col-xs-12">
-                    <canvas id="metric-{{ $metric->id }}" data-metric-name="{{ $metric->name }}" data-metric-suffix="{{ $metric->suffix }}" data-metric-id="{{ $metric->id }}" data-metric-group="{{ $metric->view_name }}" data-metric-precision="{{ $metric->places }}" height="160" width="600"></canvas>
-                </div>
-            </div>
+            <metric-chart :metric="{{ $metric->toJson() }}"></metric-chart>
         </li>
         @endforeach
     </ul>
-    <script>
-    (function () {
-        Chart.defaults.global.elements.point.hitRadius = 10;
-        Chart.defaults.global.responsiveAnimationDuration = 1000;
-        Chart.defaults.global.legend.display = false;
-
-        var charts = {};
-
-        $('a[data-filter-type]').on('click', function(e) {
-            e.preventDefault();
-
-            var $this = $(this), $li, $canvas;
-
-            $li = $this.parents('li');
-            $li.find('a[data-toggle=dropdown] span.filter').text($this.text());
-            $canvas = $li.find('canvas');
-
-            $canvas.data('metric-group', $this.data('filter-type'));
-            drawChart($canvas);
-        });
-
-        $('canvas[data-metric-id]').each(function() {
-            drawChart($(this));
-        });
-
-        function drawChart($el) {
-            var metricId = $el.data('metric-id');
-            var metricGroup = $el.data('metric-group');
-
-            if (typeof charts[metricId] === 'undefined') {
-                charts[metricId] = {
-                    context: document.getElementById("metric-"+metricId).getContext("2d"),
-                    chart: null,
-                };
-            }
-
-            var chart = charts[metricId];
-
-            $.getJSON('/metrics/'+metricId, { filter: metricGroup }).done(function (result) {
-                var data = result.data.items;
-
-                if (chart.chart !== null) {
-                    chart.chart.destroy();
-                }
-
-                chart.chart = new Chart(chart.context, {
-                    type: 'line',
-                    data: {
-                        labels: _.keys(data),
-                        datasets: [{
-                            data: _.values(data),
-                            backgroundColor: "{{ $theme_metrics }}",
-                            borderColor: "{{ color_darken($theme_metrics, -0.1) }}",
-                            pointBackgroundColor: "{{ color_darken($theme_metrics, -0.1) }}",
-                            pointBorderColor: "{{ color_darken($theme_metrics, -0.1) }}",
-                            pointHoverBackgroundColor: "{{ color_darken($theme_metrics, -0.2) }}",
-                            pointHoverBorderColor: "{{ color_darken($theme_metrics, -0.2) }}"
-                        }]
-                    },
-                    options: {
-                        scales: {
-                            yAxes: [{
-                                ticks: {
-                                    beginAtZero: true,
-                                    suggestedMax: 0.1,
-                                    // fixedStepSize: result.data.metric.places,
-                                    callback: function(tickValue, index, ticks) {
-                                        var delta = ticks[1] - ticks[0];
-
-                                        // If we have a number like 2.5 as the delta, figure out how many decimal places we need
-                                        if (Math.abs(delta) > 1) {
-                                            if (tickValue !== Math.floor(tickValue)) {
-                                                delta = tickValue - Math.floor(tickValue);
-                                            }
-                                        }
-
-                                        var logDelta = Chart.helpers.log10(Math.abs(delta));
-                                        var tickString = '';
-
-                                        if (tickValue !== 0) {
-                                            var numDecimal = -1 * Math.floor(logDelta);
-                                            numDecimal = Math.max(Math.min(numDecimal, {{ $metric->places }}), 0); // Use as many places as the metric defines
-                                            tickString = tickValue.toFixed(numDecimal);
-                                        } else {
-                                            tickString = '0'; // Never show decimal places for 0
-                                        }
-
-                                        return tickString;
-                                    }
-                                }
-                            }]
-                        },
-                        tooltips: {
-                            callbacks: {
-                                label: function(tooltipItem, data) {
-                                    return tooltipItem.yLabel + ' ' + result.data.metric.suffix;
-                                }
-                            }
-                        }
-                    }
-                });
-            });
-        }
-    }());
-    </script>
     @endif
 </div>
 @endif
diff --git a/webpack.mix.js b/webpack.mix.js
index 61780fb8..c3fb7226 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -26,7 +26,7 @@ mix
     .options({
         processCssUrls: false
     })
-    .js('resources/assets/js/app.js', 'public/dist/js').extract(['vue'])
+    .js('resources/assets/js/app.js', 'public/dist/js').extract(['vue', 'chart.js'])
     .scripts([
         'public/dist/js/app.js',
         'node_modules/es5-shim/es5-shim.js',
@@ -40,7 +40,6 @@ mix
         'node_modules/messenger/build/js/messenger.min.js',
         'node_modules/sortablejs/Sortable.min.js',
         'node_modules/jquery-minicolors/jquery.minicolors.min.js',
-        'node_modules/chart.js/dist/Chart.min.js',
         'node_modules/jquery-sparkline/jquery.sparkline.min.js',
         'node_modules/sweetalert2/dist/sweetalert2.min.js',
         'node_modules/livestamp/livestamp.js',