Merge pull request #4359 from cachethq/frontend-fixes

Frontend fixes

composer.json

@@ -55,7 +55,7 @@
         "nexmo/client": "^1.5",
         "pragmarx/google2fa": "^5.0",
         "predis/predis": "^1.1",
-        "twig/twig": "^3.0"
+        "twig/twig": "^2.13"
     },
     "require-dev": {
         "ext-sqlite3": "*",
@@ -113,7 +113,10 @@
         },
         "preferred-install": "dist",
         "sort-packages": true,
-        "optimize-autoloader": true
+        "optimize-autoloader": true,
+        "allow-plugins": {
+            "kylekatarnls/update-helper": true
+        }
     },
     "extra": {
         "branch-alias": {

package.json

@@ -7,14 +7,13 @@
     "watch-poll": "npm run watch -- --watch-poll",
     "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
     "prod": "npm run production",
-    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "postinstall": "opencollective-postinstall || true"
+    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
   },
   "devDependencies": {
     "animate-sass": "^0.8.2",
     "axios": "^0.19",
-    "bootstrap-sass": "^3.4.1",
-    "chart.js": "^2.9.3",
+    "bootstrap-sass": "^3.4.3",
+    "chart.js": "^2.9.4",
     "cross-env": "^5.1",
     "es5-shim": "^4.5.14",
     "flatpickr": "^4.5.7",
@@ -24,24 +23,19 @@
     "jquery-minicolors": "^2.1.10",
     "jquery-serializeobject": "^1.0.0",
     "jquery-sparkline": "^2.4.0",
-    "laravel-mix": "^2.1",
-    "laravel-mix-purgecss": "^3.0.0",
+    "laravel-mix": "^5.0.9",
+    "laravel-mix-purgecss": "^4.2.0",
     "livestamp": "git+https://github.com/mattbradley/livestampjs.git#develop",
     "lodash": "^4.17.13",
     "messenger": "git+https://github.com/HubSpot/messenger.git",
     "moment": "^2.24.0",
     "promise": "^7.3.1",
+    "sass": "^1.69.5",
+    "sass-loader": "^8.0.2",
     "sortablejs": "^1.8.4",
     "sweetalert2": "^6.8.0",
-    "vue": "^2.6.10",
-    "vue-template-compiler": "^2.6.10"
+    "vue": "^2.7.15",
+    "vue-template-compiler": "^2.7.15"
   },
-  "private": true,
-  "dependencies": {
-    "opencollective-postinstall": "^2.0.2"
-  },
-  "collective": {
-    "type": "opencollective",
-    "url": "https://opencollective.com/Cachet"
-  }
+  "private": true
 }

public/mix-manifest.json

@@ -1,8 +1,8 @@
 {
-    "/dist/js/vendor.js": "/dist/js/vendor.js?id=e330d11061bb920e9441",
-    "/dist/js/app.js": "/dist/js/app.js?id=85f4e87f2c37c96e623d",
-    "/dist/css/dashboard/dashboard.css": "/dist/css/dashboard/dashboard.css?id=b6a9327dd3b9b7c7ed2d",
-    "/dist/css/app.css": "/dist/css/app.css?id=c7bf7628a7a22dfec2ed",
-    "/dist/js/manifest.js": "/dist/js/manifest.js?id=40dcfff9d09d402daf38",
-    "/dist/js/all.js": "/dist/js/all.js?id=bbc128edf91b2898cdf0"
+    "/dist/js/app.js": "/dist/js/app.js?id=077e70541c0df5adf687",
+    "/dist/css/dashboard/dashboard.css": "/dist/css/dashboard/dashboard.css?id=7e9267fcdd1150802d64",
+    "/dist/css/app.css": "/dist/css/app.css?id=1de6dbcedf7e30bc18d0",
+    "/dist/js/manifest.js": "/dist/js/manifest.js?id=3c768977c2574a34506e",
+    "/dist/js/vendor.js": "/dist/js/vendor.js?id=669b7556d754809958ea",
+    "/dist/js/all.js": "/dist/js/all.js?id=8ccdfb9fa27b19a16205"
 }

resources/assets/js/app.js

@@ -25,6 +25,10 @@ window.axios.defaults.headers.common = {
  */
 const Flatpickr = require('flatpickr');
 
+import Metric from './components/status-page/Metric.vue';
+import Dashboard from './components/dashboard/Dashboard.vue';
+import Setup from './components/Setup.vue';
+
 ((win, doc) => {
     /**
      * Next, we will create a fresh Vue application instance and attach it to
@@ -56,9 +60,9 @@ const Flatpickr = require('flatpickr');
             });
         },
         components: {
-            'setup': require('./components/Setup'),
-            'dashboard': require('./components/dashboard/Dashboard'),
-            'metric-chart': require('./components/status-page/Metric'),
+            'setup': Setup,
+            'dashboard': Dashboard,
+            'metric-chart': Metric,
         }
     });
 })()

resources/assets/js/cachet.js

@@ -1,4 +1,4 @@
-$(function () {
+(function () {
     // Ajax Setup
     $.ajaxPrefilter(function(options, originalOptions, jqXHR) {
         var token;
@@ -310,22 +310,6 @@ $(function () {
         sparkLine();
     }
 
-    function goToStep(current, next) {
-        // validation was ok. We can go on next step.
-        $('.block-' + current)
-          .removeClass('show')
-          .addClass('hidden');
-
-        $('.block-' + next)
-          .removeClass('hidden')
-          .addClass('show');
-
-        $('.steps .step')
-            .removeClass("active")
-            .filter(":lt(" + (next) + ")")
-            .addClass("active");
-    }
-
     // Check for updates.
     if ($('#update-alert').length > 0) {
         $.ajax({
@@ -357,4 +341,4 @@ $(function () {
             if (_.isFunction(cancelCallback)) cancelCallback();
         });
     }
-});
+}());

resources/assets/js/components/Setup.vue

@@ -1,6 +1,5 @@
 <script>
-module.exports = {
-    props: [],
+export default {
     data () {
         return {
             env: {

resources/assets/js/components/status-page/Metric.vue

@@ -24,28 +24,22 @@
         </div>
         <div class="row">
             <div class="col-xs-12">
-                <canvas :id="metricId" height="160" width="600"></canvas>
+                <canvas :id="metricId" height="200" width="900"></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',
-        'theme',
-        'theme-light',
-        'theme-dark'
-    ],
+
+export default {
+    props: {
+        metric: Object,
+        theme: String,
+        themeLight: String,
+        themeDark: String,
+    },
     data () {
         return {
             canvas: null,
@@ -77,15 +71,15 @@ module.exports = {
             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"'
+            this.context.font = '20px -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
+            const textString = "Loading metrics..."
+            const 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)
+            this.context.fillText(textString, (this.canvas.width / 2) - (textWidth / 2), 100)
         }
     },
     methods: {
@@ -134,6 +128,7 @@ module.exports = {
                     data_keys[i] = data_keys[i].substr(11);
                 }
             }
+
             this.chart = new Chart(this.context, {
                 type: 'line',
                 data: {
@@ -149,6 +144,14 @@ module.exports = {
                     }]
                 },
                 options: {
+                    elements: {
+                        point: {
+                            hitRadius: 5
+                        }
+                    },
+                    legend: {
+                        display: false
+                    },
                     scales: {
                         yAxes: [{
                             ticks: {

resources/assets/sass/status-page/_status-page.scss

@@ -36,6 +36,7 @@ body.status-page {
     }
 
     .tooltip {
+        background-color: black;
         .tooltip-inner {
             padding: 8px 12px;
             font-size: 14px;
@@ -226,6 +227,8 @@ body.status-page {
                 }
 
                 .panel-heading {
+                    padding-top: 1em;
+                    padding-bottom: 1.4em;
                     strong {
                         font-size: 1.1em;
                     }

resources/views/partials/incidents.blade.php

@@ -34,7 +34,7 @@
                         <div class="list-group">
                             @foreach($incident->updates as $update)
                             <li class="list-group-item incident-update-item">
-                                
+
                                 <i class="{{ $update->icon }}" title="{{ $update->human_status }}" data-toggle="tooltip"></i>
                                 {!! $update->formatted_message !!}
                                 <small>

resources/views/partials/modules/metrics.blade.php

@@ -4,7 +4,7 @@
     <ul class="list-group">
         @foreach($metrics as $metric)
         <li class="list-group-item metric" data-metric-id="{{ $metric->id }}">
-            <metric-chart :metric="{{ $metric->toJson() }}" :theme-light="{{ json_encode($themeMetrics) }}" :theme="{{ json_encode(color_darken($themeMetrics, -0.1)) }}" :theme-dark="{{ json_encode(color_darken($themeMetrics, -0.2)) }}"></metric-chart>
+            <metric-chart :metric="{{ $metric->toJson() }}" theme-light="{{ $themeMetrics }}" theme="{{ color_darken($themeMetrics, -0.1) }}" theme-dark="{{ color_darken($themeMetrics, -0.2) }}"></metric-chart>
         </li>
         @endforeach
     </ul>

webpack.mix.js

@@ -13,14 +13,10 @@ require('laravel-mix-purgecss')
  |
  */
 
-const sassOptions = {
-    includePaths: ['node_modules'],
-};
-
 mix
     .copyDirectory('node_modules/ionicons/fonts', 'public/fonts')
-    .sass('resources/assets/sass/dashboard.scss', 'public/dist/css/dashboard', sassOptions)
-    .sass('resources/assets/sass/app.scss', 'public/dist/css', sassOptions)
+    .sass('resources/assets/sass/dashboard.scss', 'public/dist/css/dashboard')
+    .sass('resources/assets/sass/app.scss', 'public/dist/css')
     .purgeCss()
     .options({
         processCssUrls: false