fixed service page

CHANGELOG.md

@@ -1,5 +1,6 @@
 # 0.90.47 (06-10-2020)
 - Modified HTTP server, now in it's own go routine/channel
+- Fixed Service form for editing
 - Added pprof golang debugging http server if `GO_ENV` == "test"
 - Added `HOST` env variable (hostname for http server)
 - Added `DISABLE_HTTP` env variable (defaults to false, disables the http server)

frontend/src/components/Dashboard/DashboardIndex.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script>
-  import ServiceInfo from "../Service/ServiceInfo";
+  const ServiceInfo = () => import('@/components/Service/ServiceInfo')
 
   export default {
       name: 'DashboardIndex',

frontend/src/components/Dashboard/DashboardServices.vue

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

frontend/src/components/Dashboard/DashboardUsers.vue

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

frontend/src/components/Dashboard/EditService.vue

@@ -1,150 +1,55 @@
 <template>
-
-    <div v-if='ready'>
-
-        <div v-if='errorCode==404' class="col-12">
-           <div class="alert alert-warning" role="alert">
-                Service {{ this.$route.params.id }} not found!
-                <router-link v-if="$store.state.admin" to="/dashboard/create_service" class="btn btn-sm btn-outline-success float-right">
-                    <font-awesome-icon icon="plus"/>  Create One?
-                </router-link>
+    <div class="col-12">
+        <div v-if="!ready" class="row mt-5">
+            <div class="col-12 text-center">
+                <font-awesome-icon icon="circle-notch" size="3x" spin/>
+            </div>
+            <div class="col-12 text-center mt-3 mb-3">
+                <span class="text-muted">Loading Service</span>
             </div>
         </div>
-
-        <div v-else-if='errorCode==401' class="col-12">
-           <div class="alert alert-danger" role="alert">
-                Unauthorized! Perhaps your session has expired?
-            </div>
-        </div>
-
-        <div v-else class="col-12">
-            <FormService :in_service="service"/>
-        </div>
-
+        <FormService v-if="ready" :in_service="service"/>
     </div>
-    <div v-else>
-
-      <div class="text-center">
-        <div class="spinner-border text-primary" role="status">
-          <span class="sr-only">Loading...</span>
-        </div>
-      </div>
-
-    </div>
-
 </template>
 
 <script>
-  import Api from "@/API";
-  import FormService from "@/forms/Service";
+  import FormGroup from "../../forms/Group";
+  import Api from "../../API";
+  import ToggleSwitch from "../../forms/ToggleSwitch";
+  import draggable from 'vuedraggable'
+  import FormService from "../../forms/Service";
 
   export default {
-  name: 'EditService',
-  components: {
-    FormService,
-  },
-  props: {
-
-  },
-  data () {
-    return {
-      ready: false,
-      errorCode: 'none',
-      service: {
-          name: "",
-          type: "http",
-          domain: "",
-          group_id: 0,
-          method: "GET",
-          post_data: "",
-          headers: "",
-          expected: "",
-          expected_status: 200,
-          port: 80,
-          check_interval: 60,
-          timeout: 15,
-          permalink: "",
-          order: 1,
-          verify_ssl: true,
-          redirect: true,
-          allow_notifications: true,
-          notify_all_changes: true,
-          notify_after: 2,
-          public: true,
-          tls_cert: "",
-          tls_cert_key: "",
-          tls_cert_root: "",
-      },
+    name: 'EditService',
+    components: {
+      FormService,
+      ToggleSwitch,
+      FormGroup,
+      draggable
+    },
+    created() {
+        this.fetchData()
+    },
+    watch: {
+      '$route': 'fetchData'
+    },
+    data () {
+      return {
+        service: null,
+        ready: false
+      }
+    },
+    methods: {
+      async fetchData () {
+        if (!this.$route.params.id) {
+          this.ready = true
+          return
+        }
+        this.service = await Api.service(this.$route.params.id)
+        this.ready = true
+      }
     }
-  },
-
-
-  // because route changes within the same component are re-used
-
-  watch: {
-    $route(to, from) {
-      this.errorCode = 'none';
-      this.ready = true;
-    }
-  },
-
-  // beforeCreated() causes sync issues with mounted() as they are executed
-  // one after the other regardless of async/await methods inside.
-
-  mounted() {
-
-    const id = this.$route.params.id
-
-    if (id) {
-      
-      this.loadService(id);
-
-    } else {
-
-      this.errorCode = 'none';
-      this.ready = true;
-
-    };
-
-  },
-
-  methods: {
-
-    async loadService(id){
-
-	this.ready = false;
-
-        // api still responds if session is invalid
-        // specifically, if statping is restarted and an existing session exists
-        // theres a further check to not display the data in the form component it seems ??
-
-        await Api.service(id).then(
-          response => {
-              this.service = response;
-              this.errorCode = 'none';
-              this.ready = true;
-          },
-          error => {
-
-              const respStatus = error.response.status;
-
-              if ( respStatus == '404' ) {
-                  this.errorCode = 404;
-              } else if ( respStatus == '401' ) {
-                   this.errorCode = 401 ;
-              } else {
-                  this.errorCode = 'none';
-              };
-
-              this.ready = true;
-
-          }
-      );
-
-    }
-
   }
-}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

frontend/src/components/Dashboard/Incidents.vue

@@ -45,13 +45,13 @@
                 </form>
             </div>
         </div>
-        
+
     </div>
 </template>
 
 <script>
     import Api from "../../API";
-    import FormIncidentUpdates from "@/forms/IncidentUpdates";
+    const FormIncidentUpdates = () => import('@/forms/IncidentUpdates')
 
     export default {
         name: 'Incidents',

frontend/src/forms/CoreSettings.vue

@@ -56,7 +56,9 @@
             </div>
         </div>
 
-        <button @click.prevent="saveSettings" id="save_core" type="submit" class="btn btn-primary btn-block mt-3">Save Settings</button>
+        <button @click.prevent="saveSettings" id="save_core" type="submit" class="btn btn-primary btn-block mt-3" v-bind:disabled="loading">
+            <font-awesome-icon v-if="loading" icon="circle-notch" class="mr-2" spin/>Save Settings
+        </button>
 
     </form>
 </template>
@@ -66,6 +68,11 @@
 
   export default {
       name: 'CoreSettings',
+    data () {
+      return {
+        loading: false
+      }
+    },
       computed: {
           core() {
               return this.$store.getters.core
@@ -73,10 +80,12 @@
       },
       methods: {
           async saveSettings() {
+            this.loading = true
               const c = this.core
               await Api.core_save(c)
               const core = await Api.core()
               this.$store.commit('setCore', core)
+            setInterval(() => { this.loading = false }, 1500)
           },
           selectAll() {
               this.$refs.input.select();

frontend/src/forms/Service.vue

@@ -292,7 +292,7 @@
           }
       },
       watch: {
-          in_service: function(svr) {
+          in_service(svr, old) {
             this.service = svr
             this.use_tls = svr.tls_cert
           }
@@ -312,7 +312,7 @@
           if (this.in_service) {
             this.service = this.in_service
           }
-          this.use_tls = this.service.tls_cert
+          this.use_tls = this.service.tls_cert !== ""
         },
           updatePermalink() {
               const a = 'àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïíīįìłḿñńǹňôöòóœøōõőṕŕřßśšşșťțûüùúūǘůűųẃẍÿýžźż·/_,:;'

frontend/src/main.js

@@ -8,7 +8,7 @@ import VueI18n from 'vue-i18n'
 import router from './routes'
 import "./mixin"
 import "./icons"
-import App from '@/App.vue'
+const App = () => import('@/App.vue')
 import store from './store'
 import language from './languages'
 

frontend/src/pages/Dashboard.vue

@@ -6,8 +6,7 @@
 </template>
 
 <script>
-  import Api from "../API"
-  import TopNav from "../components/Dashboard/TopNav";
+  const TopNav = () => import('@/components/Dashboard/TopNav')
 
   export default {
   name: 'Dashboard',

frontend/src/pages/Index.vue

@@ -34,14 +34,12 @@
 </template>
 
 <script>
-import Api from '../API';
-import Group from '../components/Index/Group';
-import Header from '../components/Index/Header';
-import MessageBlock from '../components/Index/MessageBlock';
-import ServiceBlock from '../components/Service/ServiceBlock';
-import GroupServiceFailures from "../components/Index/GroupServiceFailures";
-import IncidentsBlock from "../components/Index/IncidentsBlock";
-
+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')
 
 export default {
     name: 'Index',

frontend/src/pages/Login.vue

@@ -10,8 +10,7 @@
 </template>
 
 <script>
-  import Api from "../API";
-  import FormLogin from '../forms/Login';
+  const FormLogin = () => import('@/forms/Login')
 
   export default {
   name: 'Login',

frontend/src/pages/Service.vue

@@ -64,15 +64,15 @@
 
 <script>
   import Api from "../API"
-  import MessageBlock from '../components/Index/MessageBlock';
-  import ServiceFailures from '../components/Service/ServiceFailures';
-  import Checkin from "../forms/Checkin";
-  import ServiceHeatmap from "@/components/Service/ServiceHeatmap";
-  import ServiceTopStats from "@/components/Service/ServiceTopStats";
-  import store from '../store'
+  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')
+
   import flatPickr from 'vue-flatpickr-component';
   import 'flatpickr/dist/flatpickr.css';
-  import AdvancedChart from "@/components/Service/AdvancedChart";
   const timeoptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' };
 
   const axisOptions = {

frontend/src/pages/Settings.vue

@@ -261,14 +261,15 @@
 
 <script>
   import Api from '../API';
-  import CoreSettings from '../forms/CoreSettings';
-  import FormIntegration from '../forms/Integration';
-  import Notifier from "../forms/Notifier";
-  import ThemeEditor from "../components/Dashboard/ThemeEditor";
-  import Cache from "@/components/Dashboard/Cache";
-  import OAuth from "../forms/OAuth";
   import GithubButton from 'vue-github-button'
 
+  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')
+
   export default {
       name: 'Settings',
       components: {

frontend/src/routes.js

@@ -1,21 +1,21 @@
-import Index from "./pages/Index";
-import Dashboard from "./pages/Dashboard";
-import DashboardIndex from "./components/Dashboard/DashboardIndex";
-import DashboardUsers from "./components/Dashboard/DashboardUsers";
-import DashboardServices from "./components/Dashboard/DashboardServices";
-import EditService from "./components/Dashboard/EditService";
-import DashboardMessages from "./components/Dashboard/DashboardMessages";
-import Logs from './pages/Logs';
-import Settings from "./pages/Settings";
-import Login from "./pages/Login";
-import Service from "./pages/Service";
-import VueRouter from "vue-router";
-import Setup from "./forms/Setup";
+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')
 
+import VueRouter from "vue-router";
 import Api from "./API";
-import Incidents from "@/components/Dashboard/Incidents";
-import Checkins from "@/components/Dashboard/Checkins";
-import Failures from "@/components/Dashboard/Failures";
 
 const routes = [
   {