From f96c43d98cc1c249071be2950c439a54c4d0a7f5 Mon Sep 17 00:00:00 2001 From: Fabio Rodrigues <fabiopbx@gmail.com> Date: Thu, 28 May 2020 18:35:33 +0100 Subject: [PATCH] fix create/edit services, fixes #581. fixes #608 --- .../src/components/Dashboard/EditService.vue | 136 +++++++++++++++--- 1 file changed, 118 insertions(+), 18 deletions(-) diff --git a/frontend/src/components/Dashboard/EditService.vue b/frontend/src/components/Dashboard/EditService.vue index 0c8e0a82..ef494526 100644 --- a/frontend/src/components/Dashboard/EditService.vue +++ b/frontend/src/components/Dashboard/EditService.vue @@ -1,23 +1,47 @@ <template> - <div class="col-12"> - <FormService :in_service="service"/> + + <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> + </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> + </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 FormGroup from "../../forms/Group"; - import Api from "../../API"; - import ToggleSwitch from "../../forms/ToggleSwitch"; - import draggable from 'vuedraggable' - import FormService from "../../forms/Service"; + import Api from "@/API"; + import FormService from "@/forms/Service"; export default { name: 'EditService', components: { FormService, - ToggleSwitch, - FormGroup, - draggable }, props: { @@ -25,24 +49,100 @@ data () { return { ready: false, - service: {} + 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: "", + }, } }, - computed: { + + // because route changes within the same component are re-used + + watch: { + $route(to, from) { + this.errorCode = 'none'; + this.ready = true; + } }, - async beforeCreate() { + + // 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.service = await Api.service(id) - } - this.ready = true - }, - beforeMount() { + + 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>