Reformat with prettier and more eslint rules included

src/ServicePulse.Host/vue/.eslintrc.cjs

@@ -10,7 +10,7 @@ module.exports = {
   ignorePatterns: ["node_modules/**/*", "dist/**/*", "*.ts"],
   extends: ["plugin:vue/vue3-essential", "eslint:recommended", "plugin:@typescript-eslint/recommended", "@vue/eslint-config-prettier/skip-formatting"],
   parser: "vue-eslint-parser",
-  plugins: ["@typescript-eslint", "github"],
+  plugins: ["@typescript-eslint", "github", "import", "unused-imports", "prefer-arrow"],
   parserOptions: {
     ecmaVersion: "latest",
     parser: "@typescript-eslint/parser",
@@ -21,10 +21,12 @@ module.exports = {
     "require-await": "error",
     "no-await-in-loop": "error",
     "github/no-then": "error",
-    "prefer-rest-params": "warn",
-    "prefer-spread": "warn",
-    "no-var": "warn",
-    "prefer-const": "warn",
-    eqeqeq: ["warn", "smart"],
+    "prefer-rest-params": "error",
+    "prefer-spread": "error",
+    "no-var": "error",
+    "prefer-const": "error",
+    eqeqeq: ["error", "smart"],
+    "unused-imports/no-unused-imports": "error",
+    "import/no-duplicates": "error",
   },
 };

src/ServicePulse.Host/vue/.prettierignore

@@ -0,0 +1 @@
+**/*.svg

src/ServicePulse.Host/vue/package.json

@@ -37,6 +37,9 @@
     "@vue/tsconfig": "^0.5.0",
     "eslint": "^8.56.0",
     "eslint-plugin-github": "^4.10.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prefer-arrow": "^1.2.3",
+    "eslint-plugin-unused-imports": "^3.0.0",
     "eslint-plugin-vue": "^9.20.1",
     "jsdom": "^20.0.1",
     "prettier": "^3.2.3",

src/ServicePulse.Host/vue/src/App.vue

@@ -3,7 +3,7 @@ import { RouterView } from "vue-router";
 import PageFooter from "./components/PageFooter.vue";
 import PageHeader from "./components/PageHeader.vue";
 import { useServiceControlUrls } from "./composables/serviceServiceControlUrls";
-import { useServiceControlVersion, useServiceControl } from "./composables/serviceServiceControl";
+import { useServiceControl, useServiceControlVersion } from "./composables/serviceServiceControl";
 import { useLicense } from "./composables/serviceLicense";
 import "bootstrap";
 

src/ServicePulse.Host/vue/src/assets/font-awesome/css/font-awesome.css

@@ -7,8 +7,12 @@
 @font-face {
   font-family: "FontAwesome";
   src: url("../fonts/fontawesome-webfont.eot?v=4.4.0");
-  src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff2?v=4.4.0") format("woff2"), url("../fonts/fontawesome-webfont.woff?v=4.4.0") format("woff"),
-    url("../fonts/fontawesome-webfont.ttf?v=4.4.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular") format("svg");
+  src:
+    url("../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0") format("embedded-opentype"),
+    url("../fonts/fontawesome-webfont.woff2?v=4.4.0") format("woff2"),
+    url("../fonts/fontawesome-webfont.woff?v=4.4.0") format("woff"),
+    url("../fonts/fontawesome-webfont.ttf?v=4.4.0") format("truetype"),
+    url("../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular") format("svg");
   font-weight: normal;
   font-style: normal;
 }

src/ServicePulse.Host/vue/src/assets/font-awesome/css/font-awesome.min.css

@@ -5,8 +5,12 @@
 @font-face {
   font-family: "FontAwesome";
   src: url("../fonts/fontawesome-webfont.eot?v=4.4.0");
-  src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff2?v=4.4.0") format("woff2"), url("../fonts/fontawesome-webfont.woff?v=4.4.0") format("woff"),
-    url("../fonts/fontawesome-webfont.ttf?v=4.4.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular") format("svg");
+  src:
+    url("../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0") format("embedded-opentype"),
+    url("../fonts/fontawesome-webfont.woff2?v=4.4.0") format("woff2"),
+    url("../fonts/fontawesome-webfont.woff?v=4.4.0") format("woff"),
+    url("../fonts/fontawesome-webfont.ttf?v=4.4.0") format("truetype"),
+    url("../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular") format("svg");
   font-weight: normal;
   font-style: normal;
 }

src/ServicePulse.Host/vue/src/components/EventItemShort.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
 import { getEventLogItems } from "../composables/eventLogItems";
 import TimeSince from "./TimeSince.vue";
@@ -48,13 +48,14 @@ function navigateToEvent(eventLogItem) {
     case "EndpointControl":
       window.location = "/a/#/endpoints";
       break;
-    case "MessageFailures":
-      var newlocation = "/failed-messages";
+    case "MessageFailures": {
+      let newLocation = "/failed-messages";
       if (eventLogItem.related_to && eventLogItem.related_to.length > 0 && eventLogItem.related_to[0].search("message") > 0) {
-        newlocation = "/failed-messages" + eventLogItem.related_to[0];
+        newLocation = "/failed-messages" + eventLogItem.related_to[0];
       }
-      router.push(newlocation);
+      router.push(newLocation);
       break;
+    }
     case "Recoverability":
       router.push("/failed-messages");
       break;

src/ServicePulse.Host/vue/src/components/PageFooter.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed } from "vue";
-import { environment, newVersions, connectionState, monitoringConnectionState } from "../composables/serviceServiceControl";
-import { serviceControlUrl, monitoringUrl } from "../composables/serviceServiceControlUrls";
+import { connectionState, environment, monitoringConnectionState, newVersions } from "../composables/serviceServiceControl";
+import { monitoringUrl, serviceControlUrl } from "../composables/serviceServiceControlUrls";
 
 const isMonitoringEnabled = computed(() => {
   return monitoringUrl.value !== "!" && monitoringUrl.value !== "" && monitoringUrl.value !== null && monitoringUrl.value !== undefined;

src/ServicePulse.Host/vue/src/components/PageHeader.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { RouterLink, useRoute } from "vue-router";
 import { computed } from "vue";
-import { stats, connectionState, monitoringConnectionState } from "../composables/serviceServiceControl";
+import { connectionState, monitoringConnectionState, stats } from "../composables/serviceServiceControl";
 import { useIsMonitoringEnabled } from "../composables/serviceServiceControlUrls";
 import { licenseStatus } from "./../composables/serviceLicense";
 import ExclamationMark from "./ExclamationMark.vue";

src/ServicePulse.Host/vue/src/components/TimeSince.vue

@@ -9,13 +9,13 @@ const props = defineProps({
   },
 });
 
-var interval = null;
+let interval = null;
 
 const title = ref(),
   text = ref();
 
 function updateText() {
-  if (props.dateUtc !== "0001-01-01T00:00:00" && props.dateUtc != undefined) {
+  if (props.dateUtc !== "0001-01-01T00:00:00" && props.dateUtc !== undefined) {
     const m = moment.utc(props.dateUtc);
     text.value = m.fromNow();
     title.value = m.local().format("LLLL") + " (local)\n" + m.utc().format("LLLL") + " (UTC)";

src/ServicePulse.Host/vue/src/components/__tests__/HelloWorld.spec.js

@@ -1,4 +1,4 @@
-import { describe, it, expect } from "vitest";
+import { describe, expect, it } from "vitest";
 
 import { mount } from "@vue/test-utils";
 import HelloWorld from "../HelloWorld.vue";

src/ServicePulse.Host/vue/src/components/configuration/EndpointConnection.vue

@@ -1,9 +1,9 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { onMounted, ref } from "vue";
 import LicenseExpired from "../LicenseExpired.vue";
 import ServiceControlNotAvailable from "../ServiceControlNotAvailable.vue";
 import { licenseStatus } from "../../composables/serviceLicense";
-import { useServiceControlConnections, connectionState } from "../../composables/serviceServiceControl";
+import { connectionState, useServiceControlConnections } from "../../composables/serviceServiceControl";
 import BusyIndicator from "../BusyIndicator.vue";
 import { HighCode } from "vue-highlight-code";
 import "vue-highlight-code/dist/style.css";

src/ServicePulse.Host/vue/src/components/configuration/HealthCheckNotifications.vue

@@ -1,11 +1,11 @@
 <script setup>
-import { ref, onMounted } from "vue";
+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 HealthCheckNotifications_EmailConfiguration from "./HealthCheckNotifications_ConfigureEmail.vue";
-import { useEmailNotifications, useUpdateEmailNotifications, useTestEmailNotifications, useToggleEmailNotifications } from "../../composables/serviceNotifications";
+import { useEmailNotifications, useTestEmailNotifications, useToggleEmailNotifications, useUpdateEmailNotifications } from "../../composables/serviceNotifications";
 import { useShowToast } from "../../composables/toast";
 
 // This is needed because the ConfigurationView.vue routerView expects this event.

src/ServicePulse.Host/vue/src/components/configuration/HealthCheckNotifications_ConfigureEmail.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from "vue";
+import { computed, ref } from "vue";
 
 const emit = defineEmits(["save", "cancel"]);
 const settings = defineProps({
@@ -39,12 +39,12 @@ const formIsValid = computed(() => {
 });
 
 function validateMultipleEmailsCommaSeparated(value) {
-  var result = value.split(",");
+  const result = value.split(",");
   return result.every((address) => emailRe.test(address));
 }
 
 function save() {
-  var updatedSettings = {
+  const updatedSettings = {
     smtp_server: smtp_server.value,
     smtp_port: smtp_port.value,
     authorization_account: authentication_account.value,

src/ServicePulse.Host/vue/src/components/configuration/PlatformConnections.vue

@@ -2,7 +2,7 @@
 import { ref } from "vue";
 import LicenseExpired from "../LicenseExpired.vue";
 import { licenseStatus } from "../../composables/serviceLicense";
-import { updateServiceControlUrls, serviceControlUrl as configuredServiceControlUrl, monitoringUrl as configuredMonitoringUrl, useIsMonitoringDisabled } from "./../../composables/serviceServiceControlUrls";
+import { monitoringUrl as configuredMonitoringUrl, serviceControlUrl as configuredServiceControlUrl, updateServiceControlUrls, useIsMonitoringDisabled } from "./../../composables/serviceServiceControlUrls";
 import { connectionState, monitoringConnectionState } from "../../composables/serviceServiceControl";
 
 // This is needed because the ConfigurationView.vue routerView expects this event.

src/ServicePulse.Host/vue/src/components/configuration/RetryRedirectEdit.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from "vue";
+import { computed, ref } from "vue";
 
 const emit = defineEmits(["create", "edit", "cancel"]);
 
@@ -19,7 +19,7 @@ const sourceQueueIsValid = computed(() => {
   return sourceQueue.value ? true : false;
 });
 const targetQueueIsValid = computed(() => {
-  return targetQueue.value && targetQueue.value != sourceQueue.value;
+  return targetQueue.value && targetQueue.value !== sourceQueue.value;
 });
 
 const formIsValid = computed(() => {
@@ -31,7 +31,7 @@ const notKnownQueue = computed(() => {
 });
 
 const noKnownQueues = computed(() => {
-  return model.queues.length == 0;
+  return model.queues.length === 0;
 });
 
 const sourceQueueTooltip = "Choose a queue that is known to Service Control";
@@ -42,7 +42,7 @@ function selectToAddress(item) {
 }
 
 function create() {
-  var redirect = {
+  const redirect = {
     sourceQueue: sourceQueue.value,
     targetQueue: targetQueue.value,
     immediatelyRetry: immediatelyRetry.value,
@@ -51,7 +51,7 @@ function create() {
 }
 
 function edit() {
-  var redirect = {
+  const redirect = {
     redirectId: model.message_redirect_id,
     sourceQueue: sourceQueue.value,
     targetQueue: targetQueue.value,

src/ServicePulse.Host/vue/src/components/configuration/RetryRedirects.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, reactive, onMounted } from "vue";
+import { onMounted, reactive, ref } from "vue";
 import LicenseExpired from "../LicenseExpired.vue";
 import { licenseStatus } from "../../composables/serviceLicense";
 import ServiceControlNotAvailable from "../ServiceControlNotAvailable.vue";
@@ -9,7 +9,7 @@ import NoData from "../NoData.vue";
 import BusyIndicator from "../BusyIndicator.vue";
 import { useShowToast } from "../../composables/toast";
 import TimeSince from "../TimeSince.vue";
-import { useRedirects, useUpdateRedirects, useCreateRedirects, useDeleteRedirects, useRetryPendingMessagesForQueue } from "../../composables/serviceRedirects";
+import { useCreateRedirects, useDeleteRedirects, useRedirects, useRetryPendingMessagesForQueue, useUpdateRedirects } from "../../composables/serviceRedirects";
 import ConfirmDialog from "../ConfirmDialog.vue";
 
 const isExpired = licenseStatus.isExpired;

src/ServicePulse.Host/vue/src/components/failedmessages/AllDeletedMessages.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { ref, onBeforeMount, onMounted, onUnmounted } from "vue";
+import { onBeforeMount, onMounted, onUnmounted, ref } from "vue";
 import { licenseStatus } from "../../composables/serviceLicense";
 import { connectionState } from "../../composables/serviceServiceControl";
 import { useFetchFromServiceControl, usePatchToServiceControl } from "../../composables/serviceServiceControlUrls";
 import { useShowToast } from "../../composables/toast";
-import { useRoute, onBeforeRouteLeave } from "vue-router";
+import { onBeforeRouteLeave, useRoute } from "vue-router";
 import { useCookies } from "vue3-cookies";
 import LicenseExpired from "../../components/LicenseExpired.vue";
 import ServiceControlNotAvailable from "../ServiceControlNotAvailable.vue";
@@ -85,7 +85,7 @@ function loadPagedMessages(groupId, page, sortBy, direction, startDate, endDate)
         messages.value.forEach((previousMessage) => {
           const receivedMessage = data.find((m) => m.id === previousMessage.id);
           if (receivedMessage) {
-            if (previousMessage.last_modified == receivedMessage.last_modified) {
+            if (previousMessage.last_modified === receivedMessage.last_modified) {
               receivedMessage.retryInProgress = previousMessage.retryInProgress;
               receivedMessage.deleteInProgress = previousMessage.deleteInProgress;
             }
@@ -150,7 +150,7 @@ function nextPage() {
 
 function previousPage() {
   pageNumber.value = pageNumber.value - 1;
-  if (pageNumber.value == 0) {
+  if (pageNumber.value === 0) {
     pageNumber.value = 1;
   }
   loadMessages();