Workflow

.github/workflows/gradle-wrapper-validation.yml

@@ -0,0 +1,14 @@
+name: Validate Gradle Wrapper
+on:
+    push:
+        branches: [main, main-okta]
+    pull_request:
+        branches: [main, main-okta]
+
+jobs:
+    validation:
+        name: Validation
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+            - uses: gradle/wrapper-validation-action@v1

.github/workflows/integration-test.yml

@@ -0,0 +1,60 @@
+name: Integration Tests
+on:
+    push:
+        branches: [main, main-okta]
+    pull_request:
+        branches: [main, main-okta]
+
+jobs:
+    run-test:
+        name: Run tests and build frontend
+        timeout-minutes: 60
+        runs-on: ubuntu-latest
+        steps:
+            -   uses: actions/checkout@v3
+                with:
+                    persist-credentials: false
+                    fetch-depth: 0
+
+            - name: Get changed files in the frontend folder
+              id: was-any-frontend-files-changed
+              uses: tj-actions/changed-files@v34
+              with:
+                  files: frontend/**
+
+            -   name: Setup packages
+                if: steps.was-any-frontend-files-changed.outputs.any_changed == 'true'
+                uses: actions/setup-node@v3
+                with:
+                     node-version: 18
+                     cache: 'npm'
+                     cache-dependency-path: frontend/package-lock.json
+
+            -   name: Install packages
+                if: steps.was-any-frontend-files-changed.outputs.any_changed == 'true'
+                working-directory: ./frontend
+                run: npm ci
+
+            -   name: Run lint
+                if: steps.was-any-frontend-files-changed.outputs.any_changed == 'true'
+                working-directory: ./frontend
+                run: npm run lint
+
+            -   name: Run unit tests
+                if: steps.was-any-frontend-files-changed.outputs.any_changed == 'true'
+                working-directory: ./frontend
+                run: npm run test:unit:ci
+
+            -   name: Run build
+                if: steps.was-any-frontend-files-changed.outputs.any_changed == 'true'
+                working-directory: ./frontend
+                run: npm run build
+
+            -   name: Set up JDK 17
+                uses: actions/setup-java@v3
+                with:
+                    java-version: '17'
+                    distribution: 'temurin'
+                    cache: 'gradle'
+
+            -   run: ./gradlew build --no-daemon

frontend/.eslintrc.cjs

@@ -7,10 +7,10 @@ module.exports = {
         'plugin:vue/vue3-essential',
         'eslint:recommended',
         '@vue/eslint-config-typescript',
-        '@vue/eslint-config-prettier'
+        '@vue/eslint-config-prettier',
     ],
     parserOptions: {
-        ecmaVersion: 'latest'
+        ecmaVersion: 'latest',
     },
     rules: {
         'vue/multi-word-component-names': 0,
@@ -39,5 +39,5 @@ module.exports = {
                 ignoreHTMLTextContents: false,
             },
         ],
-    }
+    },
 }

frontend/package.json

@@ -12,7 +12,7 @@
         "test:e2e": "playwright test",
         "build-only": "vite build",
         "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
-        "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+        "lint": "eslint . --ext .vue,.js,.jsx,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
     },
     "dependencies": {
         "@codemirror/lang-json": "^6.0.0",

frontend/playwright.config.ts

@@ -11,102 +11,102 @@ import { devices } from '@playwright/test'
  * See https://playwright.dev/docs/test-configuration.
  */
 const config: PlaywrightTestConfig = {
-  testDir: './e2e',
-  /* Maximum time one test can run for. */
-  timeout: 30 * 1000,
-  expect: {
-    /**
-     * Maximum time expect() should wait for the condition to be met.
-     * For example in `await expect(locator).toHaveText();`
-     */
-    timeout: 5000
-  },
-  /* Fail the build on CI if you accidentally left test.only in the source code. */
-  forbidOnly: !!process.env.CI,
-  /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
-  /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
-  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
-  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
-  use: {
-    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
-    actionTimeout: 0,
-    /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: 'http://localhost:5173',
-
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+    testDir: './e2e',
+    /* Maximum time one test can run for. */
+    timeout: 30 * 1000,
+    expect: {
+        /**
+         * Maximum time expect() should wait for the condition to be met.
+         * For example in `await expect(locator).toHaveText();`
+         */
+        timeout: 5000,
+    },
+    /* Fail the build on CI if you accidentally left test.only in the source code. */
+    forbidOnly: !!process.env.CI,
+    /* Retry on CI only */
+    retries: process.env.CI ? 2 : 0,
+    /* Opt out of parallel tests on CI. */
+    workers: process.env.CI ? 1 : undefined,
+    /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+    reporter: 'html',
+    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+    use: {
+        /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+        actionTimeout: 0,
+        /* Base URL to use in actions like `await page.goto('/')`. */
+        baseURL: 'http://localhost:5173',
 
-    /* Only on CI systems run the tests headless */
-    headless: !!process.env.CI
-  },
+        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+        trace: 'on-first-retry',
 
-  /* Configure projects for major browsers */
-  projects: [
-    {
-      name: 'chromium',
-      use: {
-        ...devices['Desktop Chrome']
-      }
+        /* Only on CI systems run the tests headless */
+        headless: !!process.env.CI,
     },
-    {
-      name: 'firefox',
-      use: {
-        ...devices['Desktop Firefox']
-      }
-    },
-    {
-      name: 'webkit',
-      use: {
-        ...devices['Desktop Safari']
-      }
-    }
 
-    /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: {
-    //     ...devices['Pixel 5'],
-    //   },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: {
-    //     ...devices['iPhone 12'],
-    //   },
-    // },
+    /* Configure projects for major browsers */
+    projects: [
+        {
+            name: 'chromium',
+            use: {
+                ...devices['Desktop Chrome'],
+            },
+        },
+        {
+            name: 'firefox',
+            use: {
+                ...devices['Desktop Firefox'],
+            },
+        },
+        {
+            name: 'webkit',
+            use: {
+                ...devices['Desktop Safari'],
+            },
+        },
+
+        /* Test against mobile viewports. */
+        // {
+        //   name: 'Mobile Chrome',
+        //   use: {
+        //     ...devices['Pixel 5'],
+        //   },
+        // },
+        // {
+        //   name: 'Mobile Safari',
+        //   use: {
+        //     ...devices['iPhone 12'],
+        //   },
+        // },
 
-    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: {
-    //     channel: 'msedge',
-    //   },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: {
-    //     channel: 'chrome',
-    //   },
-    // },
-  ],
+        /* Test against branded browsers. */
+        // {
+        //   name: 'Microsoft Edge',
+        //   use: {
+        //     channel: 'msedge',
+        //   },
+        // },
+        // {
+        //   name: 'Google Chrome',
+        //   use: {
+        //     channel: 'chrome',
+        //   },
+        // },
+    ],
 
-  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
-  // outputDir: 'test-results/',
+    /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+    // outputDir: 'test-results/',
 
-  /* Run your local dev server before starting the tests */
-  webServer: {
-    /**
+    /* Run your local dev server before starting the tests */
+    webServer: {
+        /**
      * Use the dev server by default for faster feedback loop.
      * Use the preview server on CI for more realistic testing.
     Playwright will re-use the local server if there is already a dev-server running.
      */
-    command: process.env.CI ? 'vite preview --port 5173' : 'vite dev',
-    port: 5173,
-    reuseExistingServer: !process.env.CI
-  }
+        command: process.env.CI ? 'vite preview --port 5173' : 'vite dev',
+        port: 5173,
+        reuseExistingServer: !process.env.CI,
+    },
 }
 
 export default config

frontend/src/components/BaseButton.vue

@@ -11,14 +11,14 @@
         </div>
         <div
             v-else-if="!loading && disabled"
-            class="flex h-full w-full cursor-not-allowed select-none items-center justify-center rounded border border-transparent bg-gray-400 py-2 px-4 text-center text-white dark:border-gray-600 dark:bg-gray-600"
+            class="flex h-full w-full cursor-not-allowed select-none items-center justify-center rounded border border-transparent bg-gray-400 px-4 py-2 text-center text-white dark:border-gray-600 dark:bg-gray-600"
         >
             <div class="block text-center dark:text-gray-500">{{ label }}</div>
         </div>
         <button
             v-else
             @mousedown="$emit('click')"
-            class="relative flex h-full w-full items-center justify-center overflow-hidden rounded border border-green-600 bg-green-500 py-2 px-4 text-white transition duration-200 ease-linear hover:bg-green-600 hover:shadow-lg dark:hover:shadow-black"
+            class="relative flex h-full w-full items-center justify-center overflow-hidden rounded border border-green-600 bg-green-500 px-4 py-2 text-white transition duration-200 ease-linear hover:bg-green-600 hover:shadow-lg dark:hover:shadow-black"
             @click="$emit('click')"
             :type="type"
         >

frontend/src/components/BaseInputField.vue

@@ -27,7 +27,7 @@
             @input="handleInput"
             class="block rounded border bg-white text-black transition-shadow duration-200 ease-linear focus:shadow-lg dark:bg-transparent dark:text-gray-100"
             :class="[
-                { 'px-2 py-1': size === 'small', 'px-2 py-3': size === 'medium', 'py-4 px-2': size === 'large' },
+                { 'px-2 py-1': size === 'small', 'px-2 py-3': size === 'medium', 'px-2 py-4': size === 'large' },
                 [
                     hasError
                         ? 'border-red-400 hover:border-red-500 focus:border-red-500 focus:shadow-red-100 focus:ring-red-500 dark:focus:shadow-red-900'

frontend/src/components/BaseRadioField.vue

@@ -43,10 +43,10 @@
  * file that was distributed with this source code.
  */
 import { getId } from '@/util/Util'
-import { defineEmits, defineProps, type PropType, ref } from 'vue'
+import { defineEmits, defineProps, type PropType } from 'vue'
 import InformationIcon from '@/icons/InformationIcon.vue'
 
-const props = defineProps({
+defineProps({
     name: {
         type: String,
         default: () => getId(),

frontend/src/components/BaseSelectField.vue

@@ -27,7 +27,7 @@
                 {
                     'px-2 py-1': size === 'small',
                     'px-2 py-3': size === 'medium',
-                    'py-4 px-2': size === 'large',
+                    'px-2 py-4': size === 'large',
                     '': size === 'custom',
                 },
                 [

frontend/src/components/BrokerInformation.vue

@@ -20,23 +20,23 @@
         <div v-show="!collapsed" class="flex flex-1 flex-col rounded-b p-2 shadow dark:shadow-gray-700">
             <div class="flex flex-wrap space-x-2">
                 <div
-                    class="rounded border border-green-100 bg-green-50 py-1 px-3 uppercase shadow dark:border-gray-700 dark:bg-gray-700 dark:shadow-gray-700"
+                    class="rounded border border-green-100 bg-green-50 px-3 py-1 uppercase shadow dark:border-gray-700 dark:bg-gray-700 dark:shadow-gray-700"
                 >
                     Id <span class="text-green-400">{{ node?.id }}</span>
                 </div>
                 <div
-                    class="rounded border border-green-100 bg-green-50 py-1 px-3 uppercase shadow dark:border-gray-700 dark:bg-gray-700 dark:shadow-gray-700"
+                    class="rounded border border-green-100 bg-green-50 px-3 py-1 uppercase shadow dark:border-gray-700 dark:bg-gray-700 dark:shadow-gray-700"
                 >
                     Port <span class="text-green-400">{{ node?.port }}</span>
                 </div>
                 <div
-                    class="rounded border border-green-100 bg-green-50 py-1 px-3 uppercase shadow dark:border-gray-700 dark:bg-gray-700 dark:shadow-gray-700"
+                    class="rounded border border-green-100 bg-green-50 px-3 py-1 uppercase shadow dark:border-gray-700 dark:bg-gray-700 dark:shadow-gray-700"
                 >
                     Host <span class="text-green-400">{{ node?.host }}</span>
                 </div>
                 <div
                     v-if="node.rack !== null"
-                    class="rounded border border-green-100 bg-green-50 py-1 px-3 uppercase shadow dark:border-gray-700 dark:bg-gray-700 dark:shadow-gray-700"
+                    class="rounded border border-green-100 bg-green-50 px-3 py-1 uppercase shadow dark:border-gray-700 dark:bg-gray-700 dark:shadow-gray-700"
                 >
                     Rack: <span class="text-green-400">{{ node?.rack }}</span>
                 </div>

frontend/src/components/ClusterBlock.vue

@@ -2,7 +2,7 @@
     <ul>
         <li
             @click="collapsed = !collapsed"
-            class="mt-2 mb-2 flex cursor-pointer items-center justify-between uppercase dark:border-dotted dark:border-gray-400"
+            class="mb-2 mt-2 flex cursor-pointer items-center justify-between uppercase dark:border-dotted dark:border-gray-400"
             :title="collapsed ? 'Click to expand the panel.' : 'Click to collapse the panel.'"
         >
             <span class="block flex cursor-pointer items-center space-x-2 text-green-500 dark:text-gray-100">