webpack

frontend/config/webpack.config.prod.js

@@ -60,9 +60,9 @@ const webpackConfig = merge(commonConfig, {
     plugins: [
         new webpack.EnvironmentPlugin(environment),
         new CleanWebpackPlugin(),
-        new webpack.optimize.LimitChunkCountPlugin({
+        // new webpack.optimize.LimitChunkCountPlugin({
-          maxChunks: 1
+        //   maxChunks: 1
-        }),
+        // }),
         new MiniCSSExtractPlugin({
             filename: 'css/[name].css',
             chunkFilename: 'css/[name].css'

frontend/public/base.gohtml

@@ -62,13 +62,13 @@
 
 {{if USE_CDN}}
 <script src="https://assets.statping.com/js/bundle.js"></script>
-<script src="https://assets.statping.com/js/polyfill.chunk.js"></script>
 <script src="https://assets.statping.com/js/style.chunk.js"></script>
+<script src="https://assets.statping.com/js/polyfill.chunk.js"></script>
 <script src="https://assets.statping.com/js/main.chunk.js"></script>
 {{else if USING_ASSETS }}
 <script src="js/bundle.js"></script>
-<script src="js/polyfill.chunk.js"></script>
 <script src="js/style.chunk.js"></script>
+<script src="js/polyfill.chunk.js"></script>
 <script src="js/main.chunk.js"></script>
 {{else}}
 <% _.each(htmlWebpackPlugin.tags.bodyTags, function(bodyTag) { %>

frontend/src/App.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-  import Footer from "./components/Index/Footer";
+  const Footer = () => import(/* webpackChunkName: "index" */ "./components/Index/Footer");
 
   export default {
     name: 'app',

frontend/src/components/Dashboard/DashboardIndex.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script>
-  const ServiceInfo = () => import('@/components/Dashboard/ServiceInfo')
+  const ServiceInfo = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/ServiceInfo')
 
   export default {
       name: 'DashboardIndex',

frontend/src/components/Dashboard/DashboardMessages.vue

@@ -47,7 +47,7 @@
 
 <script>
   import Api from "../../API"
-  import FormMessage from "../../forms/Message";
+  const FormMessage = () => import(/* webpackChunkName: "dashboard" */ "../../forms/Message");
 
   export default {
   name: 'DashboardMessages',

frontend/src/components/Dashboard/DashboardServices.vue

@@ -67,11 +67,11 @@
 </template>
 
 <script>
-  const FormGroup = () => import('@/forms/Group')
+  const FormGroup = () => import(/* webpackChunkName: "dashboard" */ '@/forms/Group')
-  const ToggleSwitch = () => import('@/forms/ToggleSwitch')
+  const ToggleSwitch = () => import(/* webpackChunkName: "dashboard" */ '@/forms/ToggleSwitch')
-  const ServicesList = () => import('@/components/Dashboard/ServicesList')
+  const ServicesList = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/ServicesList')
   import Api from "../../API";
-  import draggable from 'vuedraggable'
+  const draggable = () => import(/* webpackChunkName: "dashboard" */ 'vuedraggable')
 
   export default {
       name: 'DashboardServices',

frontend/src/components/Dashboard/DashboardUsers.vue

@@ -45,7 +45,7 @@
 
 <script>
   import Api from "../../API"
-  const FormUser = () => import('@/forms/User')
+  const FormUser = () => import(/* webpackChunkName: "dashboard" */ '@/forms/User')
 
   export default {
   name: 'DashboardUsers',

frontend/src/components/Dashboard/EditService.vue

@@ -13,11 +13,11 @@
 </template>
 
 <script>
-  import FormGroup from "../../forms/Group";
+  const FormGroup = () => import(/* webpackChunkName: "dashboard" */ "../../forms/Group");
   import Api from "../../API";
-  import ToggleSwitch from "../../forms/ToggleSwitch";
+  const ToggleSwitch = () => import(/* webpackChunkName: "dashboard" */ "../../forms/ToggleSwitch");
-  import draggable from 'vuedraggable'
+  const draggable = () => import(/* webpackChunkName: "dashboard" */ 'vuedraggable')
-  import FormService from "../../forms/Service";
+  const FormService = () => import(/* webpackChunkName: "dashboard" */ "../../forms/Service");
 
   export default {
     name: 'EditService',

frontend/src/components/Dashboard/Incidents.vue

@@ -51,7 +51,7 @@
 
 <script>
     import Api from "../../API";
-    const FormIncidentUpdates = () => import('@/forms/IncidentUpdates')
+    const FormIncidentUpdates = () => import(/* webpackChunkName: "dashboard" */ '@/forms/IncidentUpdates')
 
     export default {
         name: 'Incidents',

frontend/src/components/Dashboard/ServiceEvents.vue

@@ -28,7 +28,7 @@
 
 <script>
 import Api from "../../API";
-import Loading from "@/components/Elements/Loading";
+const Loading = () => import(/* webpackChunkName: "index" */ "@/components/Elements/Loading");
 
 export default {
 name: "ServiceEvents",

frontend/src/components/Dashboard/ServiceInfo.vue

@@ -70,13 +70,12 @@
 </template>
 
 <script>
-  import Checkin from '../../forms/Checkin';
+  const Checkin = () => import(/* webpackChunkName: "dashboard" */ '../../forms/Checkin');
-  import FormIncident from '../../forms/Incident';
+  const FormMessage = () => import(/* webpackChunkName: "dashboard" */ '../../forms/Message');
-  import FormMessage from '../../forms/Message';
+  const ServiceFailures = () => import(/* webpackChunkName: "dashboard" */ '../Service/ServiceFailures');
-  import ServiceFailures from '../Service/ServiceFailures';
+  const ServiceSparkLine = () => import(/* webpackChunkName: "dashboard" */ "./ServiceSparkLine");
-  import ServiceSparkLine from "./ServiceSparkLine";
   import Api from "../../API";
-  import ServiceEvents from "@/components/Dashboard/ServiceEvents";
+  const ServiceEvents = () => import(/* webpackChunkName: "dashboard" */ "@/components/Dashboard/ServiceEvents");
 
   export default {
       name: 'ServiceInfo',
@@ -84,7 +83,6 @@
         ServiceEvents,
           Checkin,
           ServiceFailures,
-          FormIncident,
           FormMessage,
           ServiceSparkLine
       },

frontend/src/components/Dashboard/ServiceSparkLine.vue

@@ -5,7 +5,6 @@
 <script>
   const timeoptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' };
 
-
   export default {
   name: 'ServiceSparkLine',
   props: {

frontend/src/components/Dashboard/ServicesList.vue

@@ -53,8 +53,8 @@
 
 <script>
 import Api from "../../API";
-import draggable from 'vuedraggable'
+const draggable = () => import(/* webpackChunkName: "dashboard" */ 'vuedraggable')
-import ToggleSwitch from '../../forms/ToggleSwitch';
+const ToggleSwitch = () => import(/* webpackChunkName: "dashboard" */ '../../forms/ToggleSwitch');
 
 export default {
       name: 'ServicesList',

frontend/src/components/Dashboard/TopNav.vue

@@ -37,7 +37,6 @@
 
 <script>
   import Api from "../../API"
-  import Vue from "vue";
 
   export default {
   name: 'TopNav',

frontend/src/components/Index/Group.vue

@@ -20,9 +20,8 @@
 </template>
 
 <script>
-    import Api from '../../API';
+    const GroupServiceFailures = () => import(/* webpackChunkName: "index" */ './GroupServiceFailures');
-    import GroupServiceFailures from './GroupServiceFailures';
+    const IncidentsBlock = () => import(/* webpackChunkName: "index" */ './IncidentsBlock');
-    import IncidentsBlock from './IncidentsBlock';
 
 export default {
   name: 'Group',

frontend/src/components/Service/Incidents.vue

@@ -1,21 +0,0 @@
-<template>
-    <div class="row stats_area mt-5 mb-4">
-        okok
-    </div>
-</template>
-
-<script>
-    export default {
-        name: 'Incidents',
-        props: {
-            service: {
-                type: Object,
-                required: true
-            },
-        }
-    }
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-</style>

frontend/src/components/Service/ServiceBlock.vue

@@ -58,11 +58,10 @@
 </template>
 
 <script>
-import Api from '../../API';
+const Analytics = () => import(/* webpackChunkName: "service" */ './Analytics');
-import Analytics from './Analytics';
+const ServiceChart  = () => import(/* webpackChunkName: "service" */ "./ServiceChart");
-import ServiceChart from "./ServiceChart";
+const ServiceTopStats = () => import(/* webpackChunkName: "service" */ "@/components/Service/ServiceTopStats");
-import ServiceTopStats from "@/components/Service/ServiceTopStats";
+const Graphing  = () => import(/* webpackChunkName: "service" */ '../../graphing');
-import Graphing from '../../graphing'
 
 export default {
     name: 'ServiceBlock',
@@ -228,7 +227,3 @@ export default {
     }
 }
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-</style>

frontend/src/components/Service/ServiceFailures.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script>
-import ServiceChart from "./ServiceChart";
+const ServiceChart = () => import(/* webpackChunkName: "service" */ "./ServiceChart");
 import Api from "../../API";
 
 export default {

frontend/src/forms/Incident.vue

@@ -1,44 +0,0 @@
-<template>
-<div>
-
-</div>
-</template>
-
-<script>
-  import Api from "../API";
-  import flatPickr from 'vue-flatpickr-component';
-  import 'flatpickr/dist/flatpickr.css';
-  import FormIncidentUpdates from './IncidentUpdates';
-
-  export default {
-  name: 'FormIncident',
-  components: {
-      FormIncidentUpdates
-  },
-  props: {
-    service: {
-      type: Object
-    }
-  },
-  data () {
-    return {
-      incident: {
-        title: "",
-        description: "",
-        service: this.service.id,
-      },
-        incidents: [],
-    }
-  },
-      async mounted () {
-          await this.loadIncidents()
-      },
-      methods: {
-
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-</style>

frontend/src/forms/IncidentUpdates.vue

@@ -36,7 +36,7 @@
 
 <script>
     import Api from "../API";
-    import IncidentUpdate from "@/components/Elements/IncidentUpdate";
+    const IncidentUpdate = () => import(/* webpackChunkName: "index" */ "@/components/Elements/IncidentUpdate");
 
     export default {
         name: 'FormIncidentUpdates',

frontend/src/forms/Login.vue

@@ -46,7 +46,6 @@
 
 <script>
   import Api from "../API";
-  import store from "@/store";
 
   export default {
       name: 'FormLogin',

frontend/src/forms/Notifier.vue

@@ -177,12 +177,11 @@
 
   const beautify = require('js-beautify').js
 
-  // require component
+  /* webpackChunkName: "codemirror" */ import { codemirror } from 'vue-codemirror'
-  import { codemirror } from 'vue-codemirror'
+  /* webpackChunkName: "codemirror" */ import 'codemirror/mode/javascript/javascript.js'
-  import 'codemirror/mode/javascript/javascript.js'
+  /* webpackChunkName: "codemirror" */ import 'codemirror/lib/codemirror.css'
-  import 'codemirror/lib/codemirror.css'
+  /* webpackChunkName: "codemirror" */ import 'codemirror/theme/neat.css'
-  import 'codemirror/theme/neat.css'
+  /* webpackChunkName: "codemirror" */ import '../codemirror_json'
-  import '../codemirror_json'
 
 export default {
     name: 'Notifier',

frontend/src/forms/OAuth.vue

@@ -50,12 +50,6 @@
                         <small>Optional comma delimited list of Github Organizations</small>
                     </div>
                 </div>
-                <div class="form-group row">
-                    <label class="col-sm-4 col-form-label">Enable Github Login</label>
-                    <div class="col-md-8 col-xs-12 mt-1">
-
-                    </div>
-                </div>
                 <div class="form-group row">
                     <label for="gh_callback" class="col-sm-4 col-form-label">Callback URL</label>
                     <div class="col-sm-8">

frontend/src/forms/Setup.vue

@@ -138,7 +138,6 @@
 
 <script>
   import Api from "../API";
-  import Index from "../pages/Index";
 
   export default {
   name: 'Setup',

frontend/src/forms/User.vue

@@ -66,7 +66,7 @@
 
 <script>
   import Api from "../API";
-  import LoadButton from "@/components/Elements/LoadButton";
+  const LoadButton = () => import(/* webpackChunkName: "index" */ "@/components/Elements/LoadButton");
 
   export default {
   name: 'FormUser',

frontend/src/pages/Dashboard.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-  const TopNav = () => import('@/components/Dashboard/TopNav')
+  const TopNav = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/TopNav')
 
   export default {
   name: 'Dashboard',
@@ -35,6 +35,3 @@
   }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-</style>

frontend/src/pages/Index.vue

@@ -33,14 +33,12 @@
 
 <script>
 import Api from "@/API";
-import store from "@/store";
+const Group = () => import(/* webpackChunkName: "index" */ '@/components/Index/Group')
-
+const Header = () => import(/* webpackChunkName: "index" */ '@/components/Index/Header')
-const Group = () => import('@/components/Index/Group')
+const MessageBlock = () => import(/* webpackChunkName: "index" */ '@/components/Index/MessageBlock')
-const Header = () => import('@/components/Index/Header')
+const ServiceBlock = () => import(/* webpackChunkName: "index" */ '@/components/Service/ServiceBlock')
-const MessageBlock = () => import('@/components/Index/MessageBlock')
+const GroupServiceFailures = () => import(/* webpackChunkName: "index" */ '@/components/Index/GroupServiceFailures')
-const ServiceBlock = () => import('@/components/Service/ServiceBlock')
+const IncidentsBlock = () => import(/* webpackChunkName: "index" */ '@/components/Index/IncidentsBlock')
-const GroupServiceFailures = () => import('@/components/Index/GroupServiceFailures')
-const IncidentsBlock = () => import('@/components/Index/IncidentsBlock')
 
 export default {
     name: 'Index',
@@ -94,13 +92,3 @@ export default {
     }
 }
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-    .fade-enter-active, .fade-leave-active {
-        transition: opacity .5s;
-    }
-    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-        opacity: 0;
-    }
-</style>

frontend/src/pages/Login.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-  const FormLogin = () => import('@/forms/Login')
+  const FormLogin = () => import(/* webpackChunkName: "index" */ '@/forms/Login')
 
   export default {
   name: 'Login',

frontend/src/pages/Service.vue

@@ -82,12 +82,12 @@
 
 <script>
   import Api from "../API"
-  const MessageBlock = () => import('@/components/Index/MessageBlock')
+  const MessageBlock = () => import(/* webpackChunkName: "index" */ '@/components/Index/MessageBlock')
-  const ServiceFailures = () => import('@/components/Service/ServiceFailures')
+  const ServiceFailures = () => import(/* webpackChunkName: "service" */ '@/components/Service/ServiceFailures')
-  const Checkin = () => import('@/forms/Checkin')
+  const Checkin = () => import(/* webpackChunkName: "dashboard" */ '@/forms/Checkin')
-  const ServiceHeatmap = () => import('@/components/Service/ServiceHeatmap')
+  const ServiceHeatmap = () => import(/* webpackChunkName: "service" */ '@/components/Service/ServiceHeatmap')
-  const ServiceTopStats = () => import('@/components/Service/ServiceTopStats')
+  const ServiceTopStats = () => import(/* webpackChunkName: "service" */ '@/components/Service/ServiceTopStats')
-  const AdvancedChart = () => import('@/components/Service/AdvancedChart')
+  const AdvancedChart = () => import(/* webpackChunkName: "service" */ '@/components/Service/AdvancedChart')
 
   import flatPickr from 'vue-flatpickr-component';
   import 'flatpickr/dist/flatpickr.css';

frontend/src/pages/Settings.vue

@@ -119,12 +119,12 @@
   import GithubButton from 'vue-github-button'
   import Variables from "@/components/Dashboard/Variables";
 
-  const CoreSettings = () => import('@/forms/CoreSettings')
+  const CoreSettings = () => import(/* webpackChunkName: "dashboard" */ '@/forms/CoreSettings')
-  const FormIntegration = () => import('@/forms/Integration')
+  const FormIntegration = () => import(/* webpackChunkName: "dashboard" */ '@/forms/Integration')
-  const Notifier = () => import('@/forms/Notifier')
+  const Notifier = () => import(/* webpackChunkName: "dashboard" */ '@/forms/Notifier')
-  const OAuth = () => import('@/forms/OAuth')
+  const OAuth = () => import(/* webpackChunkName: "dashboard" */ '@/forms/OAuth')
-  const ThemeEditor = () => import('@/components/Dashboard/ThemeEditor')
+  const ThemeEditor = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/ThemeEditor')
-  const Cache = () => import('@/components/Dashboard/Cache')
+  const Cache = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/Cache')
 
   export default {
       name: 'Settings',

frontend/src/routes.js

@@ -1,19 +1,19 @@
-const Index = () => import('@/pages/Index')
+const Index = () => import(/* webpackChunkName: "index" */ '@/pages/Index')
-const Dashboard = () => import('@/pages/Dashboard')
+const Dashboard = () => import(/* webpackChunkName: "dashboard" */ '@/pages/Dashboard')
-const DashboardIndex = () => import('@/components/Dashboard/DashboardIndex')
+const DashboardIndex = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/DashboardIndex')
-const DashboardUsers = () => import('@/components/Dashboard/DashboardUsers')
+const DashboardUsers = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/DashboardUsers')
-const DashboardServices = () => import('@/components/Dashboard/DashboardServices')
+const DashboardServices = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/DashboardServices')
-const DashboardMessages = () => import('@/components/Dashboard/DashboardMessages')
+const DashboardMessages = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/DashboardMessages')
-const EditService = () => import('@/components/Dashboard/EditService')
+const EditService = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/EditService')
-const Logs = () => import('@/pages/Logs')
+const Logs = () => import(/* webpackChunkName: "dashboard" */ '@/pages/Logs')
-const Settings = () => import('@/pages/Settings')
+const Settings = () => import(/* webpackChunkName: "dashboard" */ '@/pages/Settings')
-const Login = () => import('@/pages/Login')
+const Login = () => import(/* webpackChunkName: "index" */ '@/pages/Login')
-const Service = () => import('@/pages/Service')
+const Service = () => import(/* webpackChunkName: "index" */ '@/pages/Service')
-const Setup = () => import('@/forms/Setup')
+const Setup = () => import(/* webpackChunkName: "index" */ '@/forms/Setup')
-const Incidents = () => import('@/components/Dashboard/Incidents')
+const Incidents = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/Incidents')
-const Checkins = () => import('@/components/Dashboard/Checkins')
+const Checkins = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/Checkins')
-const Failures = () => import('@/components/Dashboard/Failures')
+const Failures = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/Failures')
-const NotFound = () => import('@/pages/NotFound')
+const NotFound = () => import(/* webpackChunkName: "index" */ '@/pages/NotFound')
 
 import VueRouter from "vue-router";
 import Api from "./API";

types/services/services_test.go

@@ -365,7 +365,7 @@ func TestServices(t *testing.T) {
 	t.Run("Test Checkins", func(t *testing.T) {
 		item, err := Find(1)
 		require.Nil(t, err)
-		assert.Len(t, item.Checkins(), 1)
+		assert.Len(t, item.Checkins, 1)
 	})
 
 	t.Run("Test All Hits", func(t *testing.T) {
@@ -521,7 +521,7 @@ func TestServices(t *testing.T) {
 		err = item.Delete()
 		require.Nil(t, err)
 
-		checkin := item.Checkins()
+		checkin := item.Checkins
 		assert.Len(t, checkin, 0)
 		for _, c := range checkin {
 			assert.Len(t, c.Failures().List(), 0)
@@ -532,10 +532,10 @@ func TestServices(t *testing.T) {
 		assert.Len(t, item.AllFailures().List(), 0)
 		assert.Len(t, item.AllHits().List(), 0)
 
-		inc := item.Incidents()
+		inc := item.Incidents
 		assert.Len(t, inc, 0)
 		for _, i := range inc {
-			assert.Len(t, i.Updates(), 0)
+			assert.Len(t, i.Updates, 0)
 		}
 
 		all = All()