Merge pull request #1708 from Particular/john/cheese

Migrated last Components and Configuration area
Particular · Mar 5, 2024 · d7c4ae0 · d7c4ae0
2 parents cb86109 + db2deb8
commit d7c4ae0
Show file tree

Hide file tree

Showing 28 changed files with 480 additions and 356 deletions.
diff --git a/src/ServicePulse.Host/angular/app/layout/navbar.html b/src/ServicePulse.Host/angular/app/layout/navbar.html
@@ -42,7 +42,7 @@
                     </a>
                 </li>
                 <li ng-class="{ active: isActive('/events') }">
-                    <a href="#/events">
+                    <a href="../#/events">
                         <i class="fa fa-list-ul icon-white" title="Events"></i>
                         <span class="navbar-label">Events</span>                        
                     </a>

diff --git a/src/ServicePulse.Host/vue/src/App.vue b/src/ServicePulse.Host/vue/src/App.vue
@@ -2,15 +2,13 @@
 import { RouterView } from "vue-router";
 import PageFooter from "./components/PageFooter.vue";
 import PageHeader from "./components/PageHeader.vue";
-import { useServiceControlUrls } from "./composables/serviceServiceControlUrls";
-import { useServiceControl, useServiceControlVersion } from "./composables/serviceServiceControl";
-import { useLicense } from "./composables/serviceLicense";
 import "bootstrap";
+import { useLicense } from "@/composables/serviceLicense";
+import { useServiceControlUrls } from "@/composables/serviceServiceControlUrls";
+import { useServiceControl } from "@/composables/serviceServiceControl";
 
-useServiceControlUrls();
-useServiceControl();
-useServiceControlVersion();
-useLicense();
+// eslint-disable-next-line github/no-then
+useServiceControlUrls().then(() => Promise.all([useLicense(), useServiceControl()]));
 </script>
 
 <template>

diff --git a/src/ServicePulse.Host/vue/src/components/ConfirmDialog.vue b/src/ServicePulse.Host/vue/src/components/ConfirmDialog.vue
@@ -1,17 +1,20 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted } from "vue";
 
-const emit = defineEmits(["confirm", "cancel"]);
+const emit = defineEmits<{ confirm: []; cancel: [] }>();
 
-const settings = defineProps<{
-  heading: string;
-  body: string;
-  secondParagraph: string;
-  hideCancel: boolean;
-}>();
+withDefaults(
+  defineProps<{
+    heading: string;
+    body: string;
+    secondParagraph: string;
+    hideCancel: boolean;
+  }>(),
+  { hideCancel: false, secondParagraph: "" }
+);
 
 function confirm() {
-  emit("confirm", settings);
+  emit("confirm");
 }
 
 function close() {
@@ -70,7 +73,7 @@ onMounted(() => {
 
 .modal-container {
   width: 600px;
-  margin: 0px auto;
+  margin: 0 auto;
   padding: 20px 30px;
   background-color: #fff;
   border-radius: 2px;

diff --git a/src/ServicePulse.Host/vue/src/components/PageHeader.vue b/src/ServicePulse.Host/vue/src/components/PageHeader.vue
@@ -1,9 +1,9 @@
-<script setup>
+<script setup lang="ts">
 import { RouterLink } from "vue-router";
 import { computed } from "vue";
-import { connectionState, monitoringConnectionState, stats } from "../composables/serviceServiceControl";
-import { useIsMonitoringEnabled } from "../composables/serviceServiceControlUrls";
-import { licenseStatus } from "../composables/serviceLicense";
+import { connectionState, monitoringConnectionState, stats } from "@/composables/serviceServiceControl";
+import { useIsMonitoringEnabled } from "@/composables/serviceServiceControlUrls";
+import { licenseStatus } from "@/composables/serviceLicense";
 import ExclamationMark from "./ExclamationMark.vue";
 import { LicenseWarningLevel } from "@/composables/LicenseStatus";
 import { WarningLevel } from "@/components/WarningLevel";

diff --git a/src/ServicePulse.Host/vue/src/components/configuration/EmailSettings.ts b/src/ServicePulse.Host/vue/src/components/configuration/EmailSettings.ts
@@ -0,0 +1,10 @@
+export default interface EmailSettings {
+  enabled: boolean | null;
+  enable_tls: boolean | null;
+  smtp_server: string;
+  smtp_port: number | null;
+  authentication_account: string;
+  authentication_password: string;
+  from: string;
+  to: string;
+}
diff --git a/src/ServicePulse.Host/vue/src/components/configuration/EndpointConnection.vue b/src/ServicePulse.Host/vue/src/components/configuration/EndpointConnection.vue
@@ -1,27 +1,21 @@
-<script setup>
+<script setup lang="ts">
 import { onMounted, ref } from "vue";
 import LicenseExpired from "../LicenseExpired.vue";
 import ServiceControlNotAvailable from "../ServiceControlNotAvailable.vue";
-import { licenseStatus } from "../../composables/serviceLicense";
-import { connectionState, useServiceControlConnections } from "../../composables/serviceServiceControl";
+import { licenseStatus } from "@/composables/serviceLicense";
+import { connectionState, useServiceControlConnections } from "@/composables/serviceServiceControl";
 import BusyIndicator from "../BusyIndicator.vue";
 import { HighCode } from "vue-highlight-code";
 import "vue-highlight-code/dist/style.css";
 
-// This is needed because the ConfigurationView.vue routerView expects this event.
-// The event is only actually emitted on the RetryRedirects.vue component
-// but if we don't include it, the console will show warnings about not being able to
-// subscribe to this event
-defineEmits(["redirectCountUpdated"]);
-
 const isExpired = licenseStatus.isExpired;
 
 const loading = ref(true);
 const showCodeOnlyTab = ref(true);
 const jsonSnippet = ref("");
 const inlineSnippet = ref("");
 const jsonConfig = ref("");
-const queryErrors = ref([]);
+const queryErrors = ref<string[]>([]);
 
 async function getCode() {
   loading.value = true;
@@ -55,8 +49,8 @@ endpointConfiguration.ConnectToServicePlatform(servicePlatformConnection);
   loading.value = false;
 }
 
-onMounted(() => {
-  getCode();
+onMounted(async () => {
+  await getCode();
 });
 
 function switchCodeOnlyTab() {
@@ -147,7 +141,7 @@ function switchJsonTab() {
 }
 
 .box > .row {
-  margin-left: 0px;
+  margin-left: 0;
 }
 
 section[name="platformconnection"] ol {

diff --git a/src/ServicePulse.Host/vue/src/components/configuration/HealthCheckNotifications.vue b/src/ServicePulse.Host/vue/src/components/configuration/HealthCheckNotifications.vue
@@ -1,27 +1,24 @@
-<script setup>
+<script setup lang="ts">
 import { onMounted, ref } from "vue";
 import LicenseExpired from "../LicenseExpired.vue";
 import ServiceControlNotAvailable from "../ServiceControlNotAvailable.vue";
-import { licenseStatus } from "../../composables/serviceLicense";
-import { connectionState } from "../../composables/serviceServiceControl";
+import { licenseStatus } from "@/composables/serviceLicense";
+import { connectionState } from "@/composables/serviceServiceControl";
 import HealthCheckNotifications_EmailConfiguration from "./HealthCheckNotifications_ConfigureEmail.vue";
-import { useEmailNotifications, useTestEmailNotifications, useToggleEmailNotifications, useUpdateEmailNotifications } from "../../composables/serviceNotifications";
-import { useShowToast } from "../../composables/toast";
-
-// This is needed because the ConfigurationView.vue routerView expects this event.
-// The event is only actually emitted on the RetryRedirects.vue component
-// but if we don't include it, the console will show warnings about not being able to
-// subscribe to this event
-defineEmits(["redirectCountUpdated"]);
+import { useEmailNotifications, useTestEmailNotifications, useToggleEmailNotifications, useUpdateEmailNotifications } from "@/composables/serviceNotifications";
+import { useShowToast } from "@/composables/toast";
+import { TYPE } from "vue-toastification";
+import type UpdateEmailNotificationsSettingsRequest from "@/resources/UpdateEmailNotificationsSettingsRequest";
+import type EmailSettings from "@/components/configuration/EmailSettings";
 
 const isExpired = licenseStatus.isExpired;
-const emailTestSuccessful = ref(null);
-const emailTestInProgress = ref(null);
-const emailToggleSucessful = ref(null);
-const emailUpdateSuccessful = ref(null);
-const showEmailConfiguration = ref(false);
+const emailTestSuccessful = ref<boolean | null>(null);
+const emailTestInProgress = ref<boolean | null>(null);
+const emailToggleSuccessful = ref<boolean | null>(null);
+const emailUpdateSuccessful = ref<boolean | null>(null);
+const showEmailConfiguration = ref<boolean | null>(null);
 
-const emailNotifications = ref({
+const emailNotifications = ref<EmailSettings>({
   enabled: null,
   enable_tls: null,
   smtp_server: "",
@@ -37,28 +34,28 @@ async function toggleEmailNotifications() {
   emailUpdateSuccessful.value = null;
   const result = await useToggleEmailNotifications(emailNotifications.value.enabled === null ? true : !emailNotifications.value.enabled);
   if (result.message === "success") {
-    emailToggleSucessful.value = true;
+    emailToggleSuccessful.value = true;
   } else {
-    emailToggleSucessful.value = false;
+    emailToggleSuccessful.value = false;
     //set it back to what it was
     emailNotifications.value.enabled = !emailNotifications.value.enabled;
   }
 }
 
 function editEmailNotifications() {
-  emailToggleSucessful.value = null;
+  emailToggleSuccessful.value = null;
   emailTestSuccessful.value = null;
   emailUpdateSuccessful.value = null;
   showEmailConfiguration.value = true;
 }
 
-async function saveEditedEmailNotifications(newSettings) {
+async function saveEditedEmailNotifications(newSettings: UpdateEmailNotificationsSettingsRequest) {
   emailUpdateSuccessful.value = null;
   showEmailConfiguration.value = false;
   const result = await useUpdateEmailNotifications(newSettings);
   if (result.message === "success") {
     emailUpdateSuccessful.value = true;
-    useShowToast("info", "Info", "Email settings updated.");
+    useShowToast(TYPE.INFO, "Info", "Email settings updated.");
     emailNotifications.value.enable_tls = newSettings.enable_tls;
     emailNotifications.value.smtp_server = newSettings.smtp_server;
     emailNotifications.value.smtp_port = newSettings.smtp_port;
@@ -68,20 +65,16 @@ async function saveEditedEmailNotifications(newSettings) {
     emailNotifications.value.to = newSettings.to;
   } else {
     emailUpdateSuccessful.value = false;
-    useShowToast("Error", "Error", "Failed to update the email settings.");
+    useShowToast(TYPE.ERROR, "Error", "Failed to update the email settings.");
   }
 }
 
 async function testEmailNotifications() {
   emailTestInProgress.value = true;
-  emailToggleSucessful.value = null;
+  emailToggleSuccessful.value = null;
   emailUpdateSuccessful.value = null;
   const result = await useTestEmailNotifications();
-  if (result.message === "success") {
-    emailTestSuccessful.value = true;
-  } else {
-    emailTestSuccessful.value = false;
-  }
+  emailTestSuccessful.value = result.message === "success";
   emailTestInProgress.value = false;
 }
 
@@ -91,15 +84,15 @@ async function getEmailNotifications() {
   emailNotifications.value.enabled = result.enabled;
   emailNotifications.value.enable_tls = result.enable_tls;
   emailNotifications.value.smtp_server = result.smtp_server ? result.smtp_server : "";
-  emailNotifications.value.smtp_port = result.smtp_port ? result.smtp_port : undefined;
+  emailNotifications.value.smtp_port = result.smtp_port ? result.smtp_port : null;
   emailNotifications.value.authentication_account = result.authentication_account ? result.authentication_account : "";
   emailNotifications.value.authentication_password = result.authentication_password ? result.authentication_password : "";
   emailNotifications.value.from = result.from ? result.from : "";
   emailNotifications.value.to = result.to ? result.to : "";
 }
 
-onMounted(() => {
-  getEmailNotifications();
+onMounted(async () => {
+  await getEmailNotifications();
 });
 </script>
 
@@ -130,7 +123,7 @@ onMounted(() => {
                       </div>
                       <div>
                         <span class="connection-test connection-failed">
-                          <template v-if="emailToggleSucessful === false"> <i class="fa fa-exclamation-triangle"></i> Update failed </template>
+                          <template v-if="emailToggleSuccessful === false"> <i class="fa fa-exclamation-triangle"></i> Update failed </template>
                         </span>
                       </div>
                     </div>
@@ -142,7 +135,7 @@ onMounted(() => {
                             <button class="btn btn-link btn-sm" type="button" @click="editEmailNotifications"><i class="fa fa-edit"></i>Configure</button>
                           </p>
                           <p class="endpoint-metadata">
-                            <button class="btn btn-link btn-sm" type="button" @click="testEmailNotifications" :disabled="emailTestInProgress"><i class="fa fa-envelope"></i>Send test notification</button>
+                            <button class="btn btn-link btn-sm" type="button" @click="testEmailNotifications" :disabled="!!emailTestInProgress"><i class="fa fa-envelope"></i>Send test notification</button>
                             <span class="connection-test connection-testing">
                               <template v-if="emailTestInProgress">
                                 <i class="glyphicon glyphicon-refresh rotate"></i>
@@ -269,7 +262,7 @@ onMounted(() => {
 }
 
 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
-  right: 0px;
+  right: 0;
 }
 
 .box-header {
@@ -303,7 +296,7 @@ p.endpoint-metadata {
 }
 
 .notifications .btn-sm {
-  padding: 0px;
+  padding: 0;
 }
 
 .notifications .connection-test {

diff --git a/...cePulse.Host/vue/src/components/configuration/HealthCheckNotifications_ConfigureEmail.vue b/...cePulse.Host/vue/src/components/configuration/HealthCheckNotifications_ConfigureEmail.vue
@@ -1,16 +1,14 @@
-<script setup>
+<script setup lang="ts">
 import { computed, ref } from "vue";
+import type EmailSettings from "@/components/configuration/EmailSettings";
+import type UpdateEmailNotificationsSettingsRequest from "@/resources/UpdateEmailNotificationsSettingsRequest";
 
-const emit = defineEmits(["save", "cancel"]);
-const settings = defineProps({
-  smtp_server: String,
-  smtp_port: Number,
-  authentication_account: String,
-  authentication_password: String,
-  enable_tls: Boolean,
-  from: String,
-  to: String,
-});
+const emit = defineEmits<{
+  save: [settings: UpdateEmailNotificationsSettingsRequest];
+  cancel: [];
+}>();
+
+const settings = defineProps<EmailSettings>();
 
 const smtp_server = ref(settings.smtp_server);
 const smtp_port = ref(settings.smtp_port);
@@ -20,36 +18,36 @@ const enable_tls = ref(settings.enable_tls);
 const from = ref(settings.from);
 const to = ref(settings.to);
 
-const emailRe = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+const emailRe = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 
 const smtpServerIsValid = computed(() => {
-  return smtp_server.value ? true : false;
+  return !!smtp_server.value;
 });
 const smtpPortIsValid = computed(() => {
-  return smtp_port.value > 0 ? true : false;
+  return !!(smtp_port.value ?? 0 > 0);
 });
 const fromIsValid = computed(() => {
-  return from.value && emailRe.test(from.value) ? true : false;
+  return !!(from.value && emailRe.test(from.value));
 });
 const toIsValid = computed(() => {
-  return to.value && validateMultipleEmailsCommaSeparated(to.value) ? true : false;
+  return !!(to.value && validateMultipleEmailsCommaSeparated(to.value));
 });
 const formIsValid = computed(() => {
   return smtpServerIsValid.value && smtpPortIsValid.value && fromIsValid.value && toIsValid.value;
 });
 
-function validateMultipleEmailsCommaSeparated(value) {
+function validateMultipleEmailsCommaSeparated(value: string) {
   const result = value.split(",");
   return result.every((address) => emailRe.test(address));
 }
 
 function save() {
-  const updatedSettings = {
+  const updatedSettings: UpdateEmailNotificationsSettingsRequest = {
     smtp_server: smtp_server.value,
-    smtp_port: smtp_port.value,
+    smtp_port: smtp_port.value ?? 0,
     authorization_account: authentication_account.value,
     authorization_password: authentication_password.value,
-    enable_tls: enable_tls.value,
+    enable_tls: enable_tls.value ?? false,
     from: from.value,
     to: to.value,
   };
@@ -138,7 +136,7 @@ function close() {
 
 .modal-container {
   width: 800px;
-  margin: 0px auto;
+  margin: 0 auto;
   padding: 20px 30px;
   background-color: #fff;
   border-radius: 2px;