From 31c93751f7f87fb29124f36de7a749cbe903976c Mon Sep 17 00:00:00 2001
From: hunterlong <info@socialeck.com>
Date: Tue, 4 Aug 2020 20:45:26 -0700
Subject: [PATCH] webpack

---
 frontend/config/webpack.config.prod.js        |  6 +-
 frontend/public/base.gohtml                   |  4 +-
 frontend/src/App.vue                          | 68 +++++++++----------
 .../components/Dashboard/DashboardIndex.vue   |  2 +-
 .../Dashboard/DashboardMessages.vue           |  2 +-
 .../Dashboard/DashboardServices.vue           |  8 +--
 .../components/Dashboard/DashboardUsers.vue   |  2 +-
 .../src/components/Dashboard/EditService.vue  |  8 +--
 .../src/components/Dashboard/Incidents.vue    |  2 +-
 .../components/Dashboard/ServiceEvents.vue    |  2 +-
 .../src/components/Dashboard/ServiceInfo.vue  | 12 ++--
 .../components/Dashboard/ServiceSparkLine.vue |  1 -
 .../src/components/Dashboard/ServicesList.vue |  4 +-
 frontend/src/components/Dashboard/TopNav.vue  |  1 -
 frontend/src/components/Index/Group.vue       |  5 +-
 frontend/src/components/Service/Incidents.vue | 21 ------
 .../src/components/Service/ServiceBlock.vue   | 15 ++--
 .../components/Service/ServiceFailures.vue    |  2 +-
 frontend/src/forms/Incident.vue               | 44 ------------
 frontend/src/forms/IncidentUpdates.vue        |  2 +-
 frontend/src/forms/Login.vue                  |  1 -
 frontend/src/forms/Notifier.vue               | 11 ++-
 frontend/src/forms/OAuth.vue                  |  6 --
 frontend/src/forms/Setup.vue                  |  1 -
 frontend/src/forms/User.vue                   |  2 +-
 frontend/src/pages/Dashboard.vue              |  5 +-
 frontend/src/pages/Index.vue                  | 24 ++-----
 frontend/src/pages/Login.vue                  |  2 +-
 frontend/src/pages/Service.vue                | 12 ++--
 frontend/src/pages/Settings.vue               | 12 ++--
 frontend/src/routes.js                        | 32 ++++-----
 types/services/services_test.go               |  8 +--
 32 files changed, 114 insertions(+), 213 deletions(-)
 delete mode 100644 frontend/src/components/Service/Incidents.vue
 delete mode 100644 frontend/src/forms/Incident.vue

diff --git a/frontend/config/webpack.config.prod.js b/frontend/config/webpack.config.prod.js
index 78107b08..d877196f 100644
--- a/frontend/config/webpack.config.prod.js
+++ b/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({
-          maxChunks: 1
-        }),
+        // new webpack.optimize.LimitChunkCountPlugin({
+        //   maxChunks: 1
+        // }),
         new MiniCSSExtractPlugin({
             filename: 'css/[name].css',
             chunkFilename: 'css/[name].css'
diff --git a/frontend/public/base.gohtml b/frontend/public/base.gohtml
index 51914057..1620c649 100644
--- a/frontend/public/base.gohtml
+++ b/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) { %>
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 21c1cf53..54f5bab4 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -6,51 +6,51 @@
 </template>
 
 <script>
-  import Footer from "./components/Index/Footer";
+  const Footer = () => import(/* webpackChunkName: "index" */ "./components/Index/Footer");
 
   export default {
-  name: 'app',
-  components: {
-    Footer
-  },
-  data () {
-    return {
-      loaded: false,
+    name: 'app',
+    components: {
+      Footer
+    },
+    data() {
+      return {
+        loaded: false,
         version: "",
-    }
-  },
-      computed: {
-          core() {
-            return this.$store.getters.core
-          }
-      },
-  async beforeMount() {
-    await this.$store.dispatch('loadCore')
+      }
+    },
+    computed: {
+      core() {
+        return this.$store.getters.core
+      }
+    },
+    async beforeMount() {
+      await this.$store.dispatch('loadCore')
 
-    this.$i18n.locale = this.core.language || "en";
-    // this.$i18n.locale = "ru";
+      this.$i18n.locale = this.core.language || "en";
+      // this.$i18n.locale = "ru";
 
       if (!this.core.setup) {
         this.$router.push('/setup')
       }
-    if (this.$route.path !== '/setup') {
-      if (this.$store.state.admin) {
-        await this.$store.dispatch('loadAdmin')
-      } else {
-        await this.$store.dispatch('loadRequired')
+      if (this.$route.path !== '/setup') {
+        if (this.$store.state.admin) {
+          await this.$store.dispatch('loadAdmin')
+        } else {
+          await this.$store.dispatch('loadRequired')
+        }
+        this.loaded = true
       }
-      this.loaded = true
-    }
-  },
+    },
     async mounted() {
-          if (this.$route.path !== '/setup') {
-            if (this.$store.state.admin) {
-                this.logged_in = true
-                  // await this.$store.dispatch('loadAdmin')
-              }
-          }
+      if (this.$route.path !== '/setup') {
+        if (this.$store.state.admin) {
+          this.logged_in = true
+          // await this.$store.dispatch('loadAdmin')
+        }
+      }
     }
-}
+  }
 </script>
 
 <style lang="scss">
diff --git a/frontend/src/components/Dashboard/DashboardIndex.vue b/frontend/src/components/Dashboard/DashboardIndex.vue
index a15d810e..6be16bf5 100644
--- a/frontend/src/components/Dashboard/DashboardIndex.vue
+++ b/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',
diff --git a/frontend/src/components/Dashboard/DashboardMessages.vue b/frontend/src/components/Dashboard/DashboardMessages.vue
index ebfa1832..c17bf54a 100644
--- a/frontend/src/components/Dashboard/DashboardMessages.vue
+++ b/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',
diff --git a/frontend/src/components/Dashboard/DashboardServices.vue b/frontend/src/components/Dashboard/DashboardServices.vue
index 097a6654..d8c40247 100644
--- a/frontend/src/components/Dashboard/DashboardServices.vue
+++ b/frontend/src/components/Dashboard/DashboardServices.vue
@@ -67,11 +67,11 @@
 </template>
 
 <script>
-  const FormGroup = () => import('@/forms/Group')
-  const ToggleSwitch = () => import('@/forms/ToggleSwitch')
-  const ServicesList = () => import('@/components/Dashboard/ServicesList')
+  const FormGroup = () => import(/* webpackChunkName: "dashboard" */ '@/forms/Group')
+  const ToggleSwitch = () => import(/* webpackChunkName: "dashboard" */ '@/forms/ToggleSwitch')
+  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',
diff --git a/frontend/src/components/Dashboard/DashboardUsers.vue b/frontend/src/components/Dashboard/DashboardUsers.vue
index 225c7496..8636bff9 100644
--- a/frontend/src/components/Dashboard/DashboardUsers.vue
+++ b/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',
diff --git a/frontend/src/components/Dashboard/EditService.vue b/frontend/src/components/Dashboard/EditService.vue
index 3b44e23b..003f0134 100644
--- a/frontend/src/components/Dashboard/EditService.vue
+++ b/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";
-  import draggable from 'vuedraggable'
-  import FormService from "../../forms/Service";
+  const ToggleSwitch = () => import(/* webpackChunkName: "dashboard" */ "../../forms/ToggleSwitch");
+  const draggable = () => import(/* webpackChunkName: "dashboard" */ 'vuedraggable')
+  const FormService = () => import(/* webpackChunkName: "dashboard" */ "../../forms/Service");
 
   export default {
     name: 'EditService',
diff --git a/frontend/src/components/Dashboard/Incidents.vue b/frontend/src/components/Dashboard/Incidents.vue
index c5ae06f9..cc379b0d 100644
--- a/frontend/src/components/Dashboard/Incidents.vue
+++ b/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',
diff --git a/frontend/src/components/Dashboard/ServiceEvents.vue b/frontend/src/components/Dashboard/ServiceEvents.vue
index 9758eb6b..bf120bc0 100644
--- a/frontend/src/components/Dashboard/ServiceEvents.vue
+++ b/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",
diff --git a/frontend/src/components/Dashboard/ServiceInfo.vue b/frontend/src/components/Dashboard/ServiceInfo.vue
index 448cce4d..9d670796 100644
--- a/frontend/src/components/Dashboard/ServiceInfo.vue
+++ b/frontend/src/components/Dashboard/ServiceInfo.vue
@@ -70,13 +70,12 @@
 </template>
 
 <script>
-  import Checkin from '../../forms/Checkin';
-  import FormIncident from '../../forms/Incident';
-  import FormMessage from '../../forms/Message';
-  import ServiceFailures from '../Service/ServiceFailures';
-  import ServiceSparkLine from "./ServiceSparkLine";
+  const Checkin = () => import(/* webpackChunkName: "dashboard" */ '../../forms/Checkin');
+  const FormMessage = () => import(/* webpackChunkName: "dashboard" */ '../../forms/Message');
+  const ServiceFailures = () => import(/* webpackChunkName: "dashboard" */ '../Service/ServiceFailures');
+  const ServiceSparkLine = () => import(/* webpackChunkName: "dashboard" */ "./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
       },
diff --git a/frontend/src/components/Dashboard/ServiceSparkLine.vue b/frontend/src/components/Dashboard/ServiceSparkLine.vue
index 8a6681af..b6d007b3 100644
--- a/frontend/src/components/Dashboard/ServiceSparkLine.vue
+++ b/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: {
diff --git a/frontend/src/components/Dashboard/ServicesList.vue b/frontend/src/components/Dashboard/ServicesList.vue
index a3e4a99f..f3ee7656 100644
--- a/frontend/src/components/Dashboard/ServicesList.vue
+++ b/frontend/src/components/Dashboard/ServicesList.vue
@@ -53,8 +53,8 @@
 
 <script>
 import Api from "../../API";
-import draggable from 'vuedraggable'
-import ToggleSwitch from '../../forms/ToggleSwitch';
+const draggable = () => import(/* webpackChunkName: "dashboard" */ 'vuedraggable')
+const ToggleSwitch = () => import(/* webpackChunkName: "dashboard" */ '../../forms/ToggleSwitch');
 
 export default {
       name: 'ServicesList',
diff --git a/frontend/src/components/Dashboard/TopNav.vue b/frontend/src/components/Dashboard/TopNav.vue
index 25d359f0..741d69cd 100644
--- a/frontend/src/components/Dashboard/TopNav.vue
+++ b/frontend/src/components/Dashboard/TopNav.vue
@@ -37,7 +37,6 @@
 
 <script>
   import Api from "../../API"
-  import Vue from "vue";
 
   export default {
   name: 'TopNav',
diff --git a/frontend/src/components/Index/Group.vue b/frontend/src/components/Index/Group.vue
index eddfea22..1224dd0e 100644
--- a/frontend/src/components/Index/Group.vue
+++ b/frontend/src/components/Index/Group.vue
@@ -20,9 +20,8 @@
 </template>
 
 <script>
-    import Api from '../../API';
-    import GroupServiceFailures from './GroupServiceFailures';
-    import IncidentsBlock from './IncidentsBlock';
+    const GroupServiceFailures = () => import(/* webpackChunkName: "index" */ './GroupServiceFailures');
+    const IncidentsBlock = () => import(/* webpackChunkName: "index" */ './IncidentsBlock');
 
 export default {
   name: 'Group',
diff --git a/frontend/src/components/Service/Incidents.vue b/frontend/src/components/Service/Incidents.vue
deleted file mode 100644
index 8b72066a..00000000
--- a/frontend/src/components/Service/Incidents.vue
+++ /dev/null
@@ -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>
diff --git a/frontend/src/components/Service/ServiceBlock.vue b/frontend/src/components/Service/ServiceBlock.vue
index 77d3e4b5..aed54039 100644
--- a/frontend/src/components/Service/ServiceBlock.vue
+++ b/frontend/src/components/Service/ServiceBlock.vue
@@ -58,11 +58,10 @@
 </template>
 
 <script>
-import Api from '../../API';
-import Analytics from './Analytics';
-import ServiceChart from "./ServiceChart";
-import ServiceTopStats from "@/components/Service/ServiceTopStats";
-import Graphing from '../../graphing'
+const Analytics = () => import(/* webpackChunkName: "service" */ './Analytics');
+const ServiceChart  = () => import(/* webpackChunkName: "service" */ "./ServiceChart");
+const ServiceTopStats = () => import(/* webpackChunkName: "service" */ "@/components/Service/ServiceTopStats");
+const Graphing  = () => import(/* webpackChunkName: "service" */ '../../graphing');
 
 export default {
     name: 'ServiceBlock',
@@ -227,8 +226,4 @@ export default {
         }
     }
 }
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-</style>
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/Service/ServiceFailures.vue b/frontend/src/components/Service/ServiceFailures.vue
index d9c5d54e..220f762e 100644
--- a/frontend/src/components/Service/ServiceFailures.vue
+++ b/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 {
diff --git a/frontend/src/forms/Incident.vue b/frontend/src/forms/Incident.vue
deleted file mode 100644
index b6f2b174..00000000
--- a/frontend/src/forms/Incident.vue
+++ /dev/null
@@ -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>
diff --git a/frontend/src/forms/IncidentUpdates.vue b/frontend/src/forms/IncidentUpdates.vue
index 6d456e59..4fa6f637 100644
--- a/frontend/src/forms/IncidentUpdates.vue
+++ b/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',
diff --git a/frontend/src/forms/Login.vue b/frontend/src/forms/Login.vue
index affc2aec..30736d1c 100644
--- a/frontend/src/forms/Login.vue
+++ b/frontend/src/forms/Login.vue
@@ -46,7 +46,6 @@
 
 <script>
   import Api from "../API";
-  import store from "@/store";
 
   export default {
       name: 'FormLogin',
diff --git a/frontend/src/forms/Notifier.vue b/frontend/src/forms/Notifier.vue
index d61c7732..e6c8541d 100644
--- a/frontend/src/forms/Notifier.vue
+++ b/frontend/src/forms/Notifier.vue
@@ -177,12 +177,11 @@
 
   const beautify = require('js-beautify').js
 
-  // require component
-  import { codemirror } from 'vue-codemirror'
-  import 'codemirror/mode/javascript/javascript.js'
-  import 'codemirror/lib/codemirror.css'
-  import 'codemirror/theme/neat.css'
-  import '../codemirror_json'
+  /* webpackChunkName: "codemirror" */ import { codemirror } from 'vue-codemirror'
+  /* webpackChunkName: "codemirror" */ import 'codemirror/mode/javascript/javascript.js'
+  /* webpackChunkName: "codemirror" */ import 'codemirror/lib/codemirror.css'
+  /* webpackChunkName: "codemirror" */ import 'codemirror/theme/neat.css'
+  /* webpackChunkName: "codemirror" */ import '../codemirror_json'
 
 export default {
     name: 'Notifier',
diff --git a/frontend/src/forms/OAuth.vue b/frontend/src/forms/OAuth.vue
index c24611a0..4bc385a6 100644
--- a/frontend/src/forms/OAuth.vue
+++ b/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">
diff --git a/frontend/src/forms/Setup.vue b/frontend/src/forms/Setup.vue
index ddc94133..b3e99685 100644
--- a/frontend/src/forms/Setup.vue
+++ b/frontend/src/forms/Setup.vue
@@ -138,7 +138,6 @@
 
 <script>
   import Api from "../API";
-  import Index from "../pages/Index";
 
   export default {
   name: 'Setup',
diff --git a/frontend/src/forms/User.vue b/frontend/src/forms/User.vue
index d79947bd..68fc73f7 100644
--- a/frontend/src/forms/User.vue
+++ b/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',
diff --git a/frontend/src/pages/Dashboard.vue b/frontend/src/pages/Dashboard.vue
index f589d248..17f20d2f 100644
--- a/frontend/src/pages/Dashboard.vue
+++ b/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>
diff --git a/frontend/src/pages/Index.vue b/frontend/src/pages/Index.vue
index d1da9c6b..8408f84b 100644
--- a/frontend/src/pages/Index.vue
+++ b/frontend/src/pages/Index.vue
@@ -33,14 +33,12 @@
 
 <script>
 import Api from "@/API";
-import store from "@/store";
-
-const Group = () => import('@/components/Index/Group')
-const Header = () => import('@/components/Index/Header')
-const MessageBlock = () => import('@/components/Index/MessageBlock')
-const ServiceBlock = () => import('@/components/Service/ServiceBlock')
-const GroupServiceFailures = () => import('@/components/Index/GroupServiceFailures')
-const IncidentsBlock = () => import('@/components/Index/IncidentsBlock')
+const Group = () => import(/* webpackChunkName: "index" */ '@/components/Index/Group')
+const Header = () => import(/* webpackChunkName: "index" */ '@/components/Index/Header')
+const MessageBlock = () => import(/* webpackChunkName: "index" */ '@/components/Index/MessageBlock')
+const ServiceBlock = () => import(/* webpackChunkName: "index" */ '@/components/Service/ServiceBlock')
+const GroupServiceFailures = () => import(/* webpackChunkName: "index" */ '@/components/Index/GroupServiceFailures')
+const IncidentsBlock = () => import(/* webpackChunkName: "index" */ '@/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>
diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue
index 70a6e326..859998a4 100644
--- a/frontend/src/pages/Login.vue
+++ b/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',
diff --git a/frontend/src/pages/Service.vue b/frontend/src/pages/Service.vue
index d6a89b15..38cfbdc5 100644
--- a/frontend/src/pages/Service.vue
+++ b/frontend/src/pages/Service.vue
@@ -82,12 +82,12 @@
 
 <script>
   import Api from "../API"
-  const MessageBlock = () => import('@/components/Index/MessageBlock')
-  const ServiceFailures = () => import('@/components/Service/ServiceFailures')
-  const Checkin = () => import('@/forms/Checkin')
-  const ServiceHeatmap = () => import('@/components/Service/ServiceHeatmap')
-  const ServiceTopStats = () => import('@/components/Service/ServiceTopStats')
-  const AdvancedChart = () => import('@/components/Service/AdvancedChart')
+  const MessageBlock = () => import(/* webpackChunkName: "index" */ '@/components/Index/MessageBlock')
+  const ServiceFailures = () => import(/* webpackChunkName: "service" */ '@/components/Service/ServiceFailures')
+  const Checkin = () => import(/* webpackChunkName: "dashboard" */ '@/forms/Checkin')
+  const ServiceHeatmap = () => import(/* webpackChunkName: "service" */ '@/components/Service/ServiceHeatmap')
+  const ServiceTopStats = () => import(/* webpackChunkName: "service" */ '@/components/Service/ServiceTopStats')
+  const AdvancedChart = () => import(/* webpackChunkName: "service" */ '@/components/Service/AdvancedChart')
 
   import flatPickr from 'vue-flatpickr-component';
   import 'flatpickr/dist/flatpickr.css';
diff --git a/frontend/src/pages/Settings.vue b/frontend/src/pages/Settings.vue
index 89cc46a4..a2523749 100644
--- a/frontend/src/pages/Settings.vue
+++ b/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 FormIntegration = () => import('@/forms/Integration')
-  const Notifier = () => import('@/forms/Notifier')
-  const OAuth = () => import('@/forms/OAuth')
-  const ThemeEditor = () => import('@/components/Dashboard/ThemeEditor')
-  const Cache = () => import('@/components/Dashboard/Cache')
+  const CoreSettings = () => import(/* webpackChunkName: "dashboard" */ '@/forms/CoreSettings')
+  const FormIntegration = () => import(/* webpackChunkName: "dashboard" */ '@/forms/Integration')
+  const Notifier = () => import(/* webpackChunkName: "dashboard" */ '@/forms/Notifier')
+  const OAuth = () => import(/* webpackChunkName: "dashboard" */ '@/forms/OAuth')
+  const ThemeEditor = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/ThemeEditor')
+  const Cache = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/Cache')
 
   export default {
       name: 'Settings',
diff --git a/frontend/src/routes.js b/frontend/src/routes.js
index 205ec14d..3e02417e 100644
--- a/frontend/src/routes.js
+++ b/frontend/src/routes.js
@@ -1,19 +1,19 @@
-const Index = () => import('@/pages/Index')
-const Dashboard = () => import('@/pages/Dashboard')
-const DashboardIndex = () => import('@/components/Dashboard/DashboardIndex')
-const DashboardUsers = () => import('@/components/Dashboard/DashboardUsers')
-const DashboardServices = () => import('@/components/Dashboard/DashboardServices')
-const DashboardMessages = () => import('@/components/Dashboard/DashboardMessages')
-const EditService = () => import('@/components/Dashboard/EditService')
-const Logs = () => import('@/pages/Logs')
-const Settings = () => import('@/pages/Settings')
-const Login = () => import('@/pages/Login')
-const Service = () => import('@/pages/Service')
-const Setup = () => import('@/forms/Setup')
-const Incidents = () => import('@/components/Dashboard/Incidents')
-const Checkins = () => import('@/components/Dashboard/Checkins')
-const Failures = () => import('@/components/Dashboard/Failures')
-const NotFound = () => import('@/pages/NotFound')
+const Index = () => import(/* webpackChunkName: "index" */ '@/pages/Index')
+const Dashboard = () => import(/* webpackChunkName: "dashboard" */ '@/pages/Dashboard')
+const DashboardIndex = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/DashboardIndex')
+const DashboardUsers = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/DashboardUsers')
+const DashboardServices = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/DashboardServices')
+const DashboardMessages = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/DashboardMessages')
+const EditService = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/EditService')
+const Logs = () => import(/* webpackChunkName: "dashboard" */ '@/pages/Logs')
+const Settings = () => import(/* webpackChunkName: "dashboard" */ '@/pages/Settings')
+const Login = () => import(/* webpackChunkName: "index" */ '@/pages/Login')
+const Service = () => import(/* webpackChunkName: "index" */ '@/pages/Service')
+const Setup = () => import(/* webpackChunkName: "index" */ '@/forms/Setup')
+const Incidents = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/Incidents')
+const Checkins = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/Checkins')
+const Failures = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/Failures')
+const NotFound = () => import(/* webpackChunkName: "index" */ '@/pages/NotFound')
 
 import VueRouter from "vue-router";
 import Api from "./API";
diff --git a/types/services/services_test.go b/types/services/services_test.go
index e1f853f4..0c22d4d7 100644
--- a/types/services/services_test.go
+++ b/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()