KNOX-3197: Upgrade homepage UI to node 22, angular 20+ ang bootstrap …

knox-homepage-ui/angular.json

@@ -36,12 +36,16 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular/build:application",
           "options": {
-            "outputPath": "target/classes/home/app",
+            "outputPath": {
+              "base": "target/classes/home/app",
+              "browser": ""
+            },
             "index": "home/index.html",
-            "main": "home/main.ts",
-            "polyfills": "home/polyfills.ts",
+            "polyfills": [
+              "home/polyfills.ts"
+            ],
             "tsConfig": "home/tsconfig.json",
             "assets": [
               "home/favicon.ico",
@@ -52,13 +56,12 @@
               "home/styles.css"
             ],
             "scripts": [
-              "node_modules/jquery/dist/jquery.min.js",
-              "node_modules/bootstrap/dist/js/bootstrap.js"
-            ]
+              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
+            ],
+            "browser": "home/main.ts"
           },
           "configurations": {
             "production": {
-              "buildOptimizer": false,
               "aot": false,
               "fileReplacements": [
                 {
@@ -69,10 +72,8 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "aot": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
@@ -81,21 +82,21 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "home:build:production"
+              "buildTarget": "home:build:production"
             },
             "development": {
-              "browserTarget": "home:build:development"
+              "buildTarget": "home:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
-            "browserTarget": "home:build"
+            "buildTarget": "home:build"
           }
         },
         "lint": {
@@ -110,11 +111,42 @@
       }
     }
   },
-  "defaultProject": "home",
   "cli": {
     "schematicCollections": [
       "@angular-eslint/schematics",
       "@angular-eslint/schematics"
     ]
+  },
+  "schematics": {
+    "@angular-eslint/schematics:application": {
+      "setParserOptionsProject": true
+    },
+    "@angular-eslint/schematics:library": {
+      "setParserOptionsProject": true
+    },
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
   }
 }

knox-homepage-ui/eslint.config.js

@@ -0,0 +1,74 @@
+import js from "@eslint/js";
+import tseslint from "typescript-eslint";
+import angular from "@angular-eslint/eslint-plugin";
+import angularTemplate from "@angular-eslint/eslint-plugin-template";
+import tsParser from "@typescript-eslint/parser";
+
+export default [
+    {
+        ignores: ["**/dist/**", "**/node_modules/**"],
+    },
+
+    js.configs.recommended,
+
+    {
+        files: ["**/*.ts"],
+        languageOptions: {
+            parser: tsParser,
+            parserOptions: {
+                project: ["./tsconfig.json"],
+                tsconfigRootDir: import.meta.dirname,
+            },
+            globals: {
+                console: "readonly",
+                window: "readonly",
+                document: "readonly",
+                setTimeout: "readonly",
+            },
+        },
+        plugins: {
+            "@typescript-eslint": tseslint.plugin,
+            "@angular-eslint": angular,
+        },
+        rules: {
+            "@typescript-eslint/naming-convention": [
+                "error",
+                {selector: "class", format: ["PascalCase"]},
+            ],
+
+            curly: "error",
+            eqeqeq: ["error", "always", {null: "ignore"}],
+            "guard-for-in": "error",
+            "max-len": ["error", {code: 140}],
+            "no-bitwise": "error",
+            "no-caller": "error",
+            "no-console": "off",
+            "no-debugger": "error",
+            "no-empty": "error",
+            "no-eval": "error",
+            "no-fallthrough": "error",
+            "no-trailing-spaces": "error",
+            "no-unused-expressions": "error",
+            "no-unused-labels": "error",
+            "no-var": "error",
+            quotes: ["error", "single"],
+            radix: "error",
+            semi: ["error", "always"],
+            "spaced-comment": "error",
+            "brace-style": ["error", "1tbs", {allowSingleLine: true}],
+
+            "@angular-eslint/directive-selector": [
+                "error",
+                {type: "attribute", prefix: "app", style: "camelCase"},
+            ],
+            "@angular-eslint/component-selector": [
+                "error",
+                {type: "element", prefix: "app", style: "kebab-case"},
+            ],
+            "@angular-eslint/no-output-rename": "error",
+            "@angular-eslint/use-pipe-transform-interface": "error",
+            "@angular-eslint/component-class-suffix": "error",
+            "@angular-eslint/directive-class-suffix": "error",
+        },
+    },
+];

knox-homepage-ui/home/app/apiservice-dialog/apiservice-dialog.component.css

@@ -0,0 +1,68 @@
+.info-section {
+  padding: 16px 0;
+}
+
+.info-row {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  gap: 16px;
+  margin-bottom: 16px;
+  align-items: start;
+}
+
+.info-label {
+  padding: 8px 0;
+  color: #666;
+}
+
+.info-value {
+  padding: 8px 0;
+  word-break: break-word;
+}
+
+.small {
+  font-size: 0.875em;
+  color: #666;
+  margin-left: 4px;
+}
+
+.samples-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.sample-item {
+  background-color: #f5f5f5;
+  padding: 12px;
+  border-radius: 4px;
+  border-left: 4px solid #007bff;
+}
+
+.sample-desc {
+  margin-bottom: 8px;
+  color: #007bff;
+}
+
+.sample-value {
+  font-family: 'Courier New', monospace;
+  font-size: 0.9em;
+  background-color: white;
+  padding: 8px;
+  border-radius: 4px;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.no-samples {
+  color: #666;
+}
+
+.no-samples a {
+  color: #007bff;
+  text-decoration: none;
+}
+
+.no-samples a:hover {
+  text-decoration: underline;
+}