chore: remove TypeScript error, warnings and fix tests (#2470)

spring-boot-admin-server-ui/.eslintrc.js

@@ -17,6 +17,7 @@ module.exports = {
   plugins: ['prettier', '@typescript-eslint'],
   ignorePatterns: ['dist'],
   rules: {
+    'no-console': ['error', { allow: ['warn', 'error'] }],
     'vue/multi-word-component-names': 'off',
     'vue/no-v-html': 'off',
     'vue/no-reserved-component-names': 'off',

spring-boot-admin-server-ui/.prettierrc.json

@@ -2,5 +2,5 @@
   "singleQuote": true,
   "importOrder": ["(.*).css$","^[./]" ,"^@/components/(.*)$","^@/(.*)$"],
   "importOrderSeparation": true,
-  "importOrderSortSpecifiers": true
+  "importOrderSortSpecifiers": true,
 }

spring-boot-admin-server-ui/.storybook/preview.js

@@ -4,9 +4,9 @@ import { initialize, mswDecorator } from 'msw-storybook-addon';
 import './storybook.css';
 import '@/index.css';
 
-import components from '@/components/index.js';
+import components from '@/components';
 
-import i18n from '@/i18n/index.js';
+import i18n from '@/i18n';
 import applicationsEndpoint from '@/mocks/applications';
 import mappingsEndpoint from '@/mocks/instance/mappings';
 

spring-boot-admin-server-ui/package.json

@@ -7,7 +7,7 @@
     "build:dev": "NODE_ENV=development vite build --emptyOutDir --sourcemap --mode development",
     "build:watch": "NODE_ENV=development vite build --emptyOutDir --watch --sourcemap --mode development",
     "dev": "vite",
-    "test": "vitest run",
+    "test": "vitest run --silent",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "lint": "eslint --ext .js,.vue src/main/frontend",

spring-boot-admin-server-ui/src/main/frontend/components/font-awesome-icon.ts

@@ -83,6 +83,7 @@ library.add(
   faDownload,
   faExclamation,
   faExclamationTriangle,
+  faExclamationCircle,
   faFilter,
   faFrownOpen,
   faHeartbeat,

spring-boot-admin-server-ui/src/main/frontend/components/sba-alert.vue

@@ -33,8 +33,12 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { faCheckCircle } from '@fortawesome/free-solid-svg-icons/faCheckCircle';
+import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons/faExclamationCircle';
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons/faInfoCircle';
 import classNames from 'classnames';
+import { defineComponent } from 'vue';
 
 import FontAwesomeIcon from '@/components/font-awesome-icon';
 
@@ -45,7 +49,7 @@ export const Severity = {
   SUCCESS: 'SUCCESS',
 };
 
-export default {
+export default defineComponent({
   name: 'SbaAlert',
   components: { FontAwesomeIcon },
   props: {
@@ -60,6 +64,7 @@ export default {
     severity: {
       type: String,
       default: Severity.ERROR,
+      required: true,
     },
   },
   data() {
@@ -108,14 +113,14 @@ export default {
       switch (this.severity.toUpperCase()) {
         case Severity.ERROR:
         case Severity.WARN:
-          return ['fa', 'exclamation-circle'];
+          return faExclamationCircle;
         case Severity.SUCCESS:
-          return ['fa', 'check-circle'];
+          return faCheckCircle;
         case Severity.INFO:
         default:
-          return ['fa', 'info-circle'];
+          return faInfoCircle;
       }
     },
   },
-};
+});
 </script>

spring-boot-admin-server-ui/src/main/frontend/components/sba-navbar/sba-navbar-toggle.stories.ts

@@ -14,6 +14,7 @@ const Template = (args) => {
     },
     setup() {
       const showMenu = ref(false);
+      // eslint-disable-next-line no-console
       const handleClick = (e) => console.log(e);
       return { ...args, showMenu, onClick: handleClick };
     },

spring-boot-admin-server-ui/src/main/frontend/components/sba-pagination-nav.spec.ts

@@ -22,7 +22,7 @@ import { render } from '@/test-utils';
 
 describe('sba-pagination-nav.vue', () => {
   it('should show a button when page count is 0', async () => {
-    await render(SbaPaginationNav, {
+    render(SbaPaginationNav, {
       props: {
         pageCount: 0,
       },
@@ -38,7 +38,7 @@ describe('sba-pagination-nav.vue', () => {
   });
 
   it('should show a button when page count is 1', async () => {
-    await render(SbaPaginationNav, {
+    render(SbaPaginationNav, {
       props: {
         pageCount: 1,
       },
@@ -56,7 +56,7 @@ describe('sba-pagination-nav.vue', () => {
   });
 
   it('should show first and last page when page count is 12 including intermediate pages', async () => {
-    await render(SbaPaginationNav, {
+    render(SbaPaginationNav, {
       props: {
         pageCount: 11,
         modelValue: 6,

spring-boot-admin-server-ui/src/main/frontend/components/sba-status.spec.ts

@@ -30,9 +30,6 @@ describe('application-status', () => {
         status,
         date,
       },
-      stubs: {
-        'font-awesome-icon': true,
-      },
     });
   }
 

spring-boot-admin-server-ui/src/main/frontend/global.d.ts

@@ -5,6 +5,9 @@ import ViewRegistry from '@/viewRegistry';
 export {};
 
 declare global {
+  type ApplicationStream = {
+    data: any;
+  } & MessageEvent;
   interface Window {
     SBA: SBASettings;
   }

spring-boot-admin-server-ui/src/main/frontend/i18n/index.ts

@@ -7,7 +7,7 @@ const context = import.meta.globEager('../**/(*.)?i18n.*.json');
 const messages = Object.keys(context)
   .map((key) => {
     const localeFromFile = /\.*i18n\.?([^/]*)\.json$/.exec(key);
-    const messages = context[key].default;
+    const messages = (context[key] as { default: never }).default;
     if (localeFromFile[1]) {
       return {
         [localeFromFile[1]]: messages,
@@ -21,7 +21,7 @@ const messages = Object.keys(context)
 export const AVAILABLE_LANGUAGES = getAvailableLocales();
 
 function getAvailableLocales() {
-  let valueFromServer = sbaConfig.uiSettings.availableLanguages;
+  const valueFromServer = sbaConfig.uiSettings.availableLanguages;
 
   const strings = Object.keys(messages);
   return isEmpty(valueFromServer)

spring-boot-admin-server-ui/src/main/frontend/services/application.spec.ts

@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { describe, expect, it } from 'vitest';
+
 import { convertBody, hasMatchingContentType } from './application';
 
 describe('hasMatchingContentType', () => {

spring-boot-admin-server-ui/src/main/frontend/services/application.ts

@@ -15,10 +15,10 @@
  */
 import { AxiosInstance } from 'axios';
 import { sortBy } from 'lodash-es';
+import { Observable, concat, from, ignoreElements } from 'rxjs';
 
 import axios, { redirectOn401 } from '../utils/axios';
 import waitForPolyfill from '../utils/eventsource-polyfill';
-import { Observable, concat, from, ignoreElements } from '../utils/rxjs.js';
 import uri from '../utils/uri';
 import Instance from './instance';
 
@@ -92,7 +92,7 @@ class Application {
     });
   }
 
-  static getStream() {
+  static getStream(): Observable<ApplicationStream | unknown> {
     return concat(
       from(waitForPolyfill()).pipe(ignoreElements()),
       Observable.create((observer) => {
@@ -101,7 +101,7 @@ class Application {
           observer.next({
             ...message,
             data: Application._transformResponse(message.data),
-          });
+          } as ApplicationStream);
 
         eventSource.onerror = (err) => observer.error(err);
         return () => eventSource.close();
@@ -133,7 +133,7 @@ class Application {
   }
 
   findInstance(instanceId) {
-    return this.instances.find((instance) => instance.id === instanceId);
+    return this.instances.find((instance) => instance.getId() === instanceId);
   }
 
   async unregister() {

spring-boot-admin-server-ui/src/main/frontend/services/instance.ts

@@ -15,16 +15,16 @@
  */
 import { AxiosInstance } from 'axios';
 import saveAs from 'file-saver';
+import { Observable, concat, from, ignoreElements } from 'rxjs';
 
-
-
-import axios, { redirectOn401, registerErrorToastInterceptor } from '../utils/axios.js';
+import axios, {
+  redirectOn401,
+  registerErrorToastInterceptor,
+} from '../utils/axios.js';
 import waitForPolyfill from '../utils/eventsource-polyfill';
 import logtail from '../utils/logtail';
-import { Observable, concat, from, ignoreElements } from '../utils/rxjs';
 import uri from '../utils/uri';
 
-
 const actuatorMimeTypes = [
   'application/vnd.spring-boot.actuator.v2+json',
   'application/vnd.spring-boot.actuator.v1+json',
@@ -35,8 +35,10 @@ const isInstanceActuatorRequest = (url: string) =>
   url.match(/^instances[/][^/]+[/]actuator([/].*)?$/);
 
 class Instance {
-  private id: string;
-  private axios: AxiosInstance;
+  private readonly id: string;
+  private readonly axios: AxiosInstance;
+  private registration: any;
+  private endpoints: any[];
 
   constructor({ id, ...instance }) {
     Object.assign(this, instance);
@@ -111,6 +113,10 @@ class Instance {
     }));
   }
 
+  getId() {
+    return this.id;
+  }
+
   hasEndpoint(endpointId) {
     return this.endpoints.some((endpoint) => endpoint.id === endpointId);
   }
@@ -303,7 +309,7 @@ class Instance {
   }
 
   async fetchStartup() {
-    let optionsResponse = await this.axios.options(uri`actuator/startup`);
+    const optionsResponse = await this.axios.options(uri`actuator/startup`);
     if (
       optionsResponse.headers.allow &&
       optionsResponse.headers.allow.includes('GET')

spring-boot-admin-server-ui/src/main/frontend/services/startup-actuator.spec.ts

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import { cloneDeep } from 'lodash-es';
+import { beforeEach, describe, expect, it } from 'vitest';
 
 import { StartupActuatorService } from './startup-actuator';
 
@@ -27,7 +28,7 @@ describe('StartupActuatorService', () => {
   });
 
   it('should find element by id', () => {
-    let item8 = StartupActuatorService.getById(events, 8);
+    const item8 = StartupActuatorService.getById(events, 8);
 
     expect.assertions(1);
     expect(item8).toEqual({
@@ -50,32 +51,32 @@ describe('StartupActuatorService', () => {
   });
 
   it('should add parents as reference', () => {
-    let tree = StartupActuatorService.parseAsTree(data);
-    let child = tree.getById(8);
-    let parent = tree.getById(7);
+    const tree = StartupActuatorService.parseAsTree(data);
+    const child = tree.getById(8);
+    const parent = tree.getById(7);
 
     expect.assertions(2);
     expect(child.startupStep.parent).toBe(parent);
     expect(child.startupStep.depth).toBe(3);
   });
 
   it('should add children as reference', () => {
-    let tree = StartupActuatorService.parseAsTree(data);
-    let parent = tree.getById(7);
-    let child = tree.getById(8);
+    const tree = StartupActuatorService.parseAsTree(data);
+    const parent = tree.getById(7);
+    const child = tree.getById(8);
 
     expect.assertions(1);
     expect(parent.startupStep.children).toContain(child);
   });
 
   it('should extract map from event tags', () => {
-    let tag = {
+    const tag = {
       key: 'event',
       value:
         'ServletRequestHandledEvent: url=[/applications]; client=[0:0:0:0:0:0:0:1]; method=[GET, POST]; servlet=[dispatcherServlet]; session=[null]; user=[null]; time=[13ms]; status=[OK]',
     };
 
-    let parsedTag = StartupActuatorService.parseTag(tag);
+    const parsedTag = StartupActuatorService.parseTag(tag);
 
     expect.assertions(1);
     expect(parsedTag).toStrictEqual({
@@ -95,8 +96,8 @@ describe('StartupActuatorService', () => {
   });
 
   it('should parse tags when iterating startupSteps', () => {
-    let tree = StartupActuatorService.parseAsTree(data);
-    let children = tree.getByParentId(6);
+    const tree = StartupActuatorService.parseAsTree(data);
+    const children = tree.getByParentId(6);
 
     expect.assertions(2);
     expect(children.length).toBe(25);
@@ -107,35 +108,35 @@ describe('StartupActuatorService', () => {
   });
 
   it('should find start and end time', () => {
-    let tree = StartupActuatorService.parseAsTree(data);
-    let startTime = tree.getStartTime();
-    let endTime = tree.getEndTime();
+    const tree = StartupActuatorService.parseAsTree(data);
+    const startTime = tree.getStartTime();
+    const endTime = tree.getEndTime();
 
     expect.assertions(2);
     expect(startTime).toBe(Date.parse('2020-12-10T21:53:41.836728041Z'));
     expect(endTime).toBe(Date.parse('2020-12-10T22:13:47.495769441Z'));
   });
 
   it('should return progress of event in context of whole tree', () => {
-    let tree = StartupActuatorService.parseAsTree(data);
-    let period = tree.getPeriod(tree.getById(1));
+    const tree = StartupActuatorService.parseAsTree(data);
+    const period = tree.getPeriod(tree.getById(1));
 
     expect.assertions(2);
     expect(period.start).toBe(0);
     expect(period.end).toBe(0.000038153408219073554);
   });
 
   it('should return the path in tree for a given id (no pun intended)', () => {
-    let tree = StartupActuatorService.parseAsTree(data);
+    const tree = StartupActuatorService.parseAsTree(data);
 
-    let path = tree.getPath(10);
+    const path = tree.getPath(10);
     expect.assertions(1);
     expect(path).toEqual([10, 9, 6, 5]);
   });
 
   it('should parse duration to seconds', () => {
-    let tree = StartupActuatorService.parseAsTree(data);
-    let event = tree.getById(1);
+    const tree = StartupActuatorService.parseAsTree(data);
+    const event = tree.getById(1);
 
     expect.assertions(1);
     expect(event.duration).toBe(45.279861);