This is an automated email from the ASF dual-hosted git repository. smolnar82 pushed a commit to branch knox_idf in repository https://gitbox.apache.org/repos/asf/knox.git
commit a67af63fafb1d28574be0392a31f8155b5c91908 Author: hanicz <[email protected]> AuthorDate: Tue Jun 23 14:13:52 2026 +0200 KNOX-3357: Upgrade Webshell UI frameworks/libraries (#1276) (cherry picked from commit d9978443c041add98d386655d5069f6e99bbf4b5) --- knox-webshell-ui/angular.json | 44 ++++++------- knox-webshell-ui/eslint.config.js | 77 ++++++++++++++++++++++ knox-webshell-ui/package.json | 42 +++++++----- knox-webshell-ui/pom.xml | 17 ++++- knox-webshell-ui/tsconfig.app.json | 11 ---- knox-webshell-ui/tsconfig.json | 18 ----- knox-webshell-ui/webshell-ui/app/app.component.ts | 37 +++++------ knox-webshell-ui/webshell-ui/app/app.module.ts | 32 --------- .../webshell-ui/environments/environment.ts | 13 ---- knox-webshell-ui/webshell-ui/main.ts | 22 +++++-- knox-webshell-ui/webshell-ui/polyfills.ts | 67 +------------------ knox-webshell-ui/webshell-ui/styles.css | 6 ++ knox-webshell-ui/webshell-ui/tsconfig.json | 16 +++++ 13 files changed, 192 insertions(+), 210 deletions(-) diff --git a/knox-webshell-ui/angular.json b/knox-webshell-ui/angular.json index 6fc8b11a7..baaf6af92 100644 --- a/knox-webshell-ui/angular.json +++ b/knox-webshell-ui/angular.json @@ -36,26 +36,30 @@ "prefix": "app", "architect": { "build": { - "builder": "@angular-devkit/build-angular:browser", + "builder": "@angular/build:application", "options": { - "outputPath": "target/classes/webshell-ui/app", + "outputPath": { + "base": "target/classes/webshell-ui/app", + "browser": "" + }, "index": "webshell-ui/index.html", - "main": "webshell-ui/main.ts", - "polyfills": "webshell-ui/polyfills.ts", - "tsConfig": "tsconfig.app.json", + "polyfills": ["webshell-ui/polyfills.ts"], + "tsConfig": "webshell-ui/tsconfig.json", "assets": [ - "webshell-ui/favicon.ico", - "webshell-ui/assets" + "webshell-ui/favicon.ico" ], "styles": [ "webshell-ui/styles.css" ], - "scripts": [] + "scripts": [], + "browser": "webshell-ui/main.ts", + "allowedCommonJsDependencies": [ + "@xterm/xterm", + "@xterm/addon-fit" + ] }, "configurations": { "production": { - "buildOptimizer": false, - "aot": false, "fileReplacements": [ { "replace": "webshell-ui/environments/environment.ts", @@ -65,9 +69,8 @@ "outputHashing": "all" }, "development": { - "buildOptimizer": false, + "aot": false, "optimization": false, - "vendorChunk": true, "extractLicenses": false, "sourceMap": true, "namedChunks": true @@ -76,21 +79,21 @@ "defaultConfiguration": "production" }, "serve": { - "builder": "@angular-devkit/build-angular:dev-server", + "builder": "@angular/build:dev-server", "configurations": { "production": { - "browserTarget": "webshell-ui:build:production" + "buildTarget": "webshell-ui:build:production" }, "development": { - "browserTarget": "webshell-ui:build:development" + "buildTarget": "webshell-ui:build:development" } }, "defaultConfiguration": "development" }, "extract-i18n": { - "builder": "@angular-devkit/build-angular:extract-i18n", + "builder": "@angular/build:extract-i18n", "options": { - "browserTarget": "webshell-ui:build" + "buildTarget": "webshell-ui:build" } }, "lint": { @@ -104,12 +107,5 @@ } } } - }, - "defaultProject": "webshell-ui", - "cli": { - "schematicCollections": [ - "@angular-eslint/schematics", - "@angular-eslint/schematics" - ] } } diff --git a/knox-webshell-ui/eslint.config.js b/knox-webshell-ui/eslint.config.js new file mode 100644 index 000000000..b2372b914 --- /dev/null +++ b/knox-webshell-ui/eslint.config.js @@ -0,0 +1,77 @@ +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: ["./webshell-ui/tsconfig.json"], + tsconfigRootDir: import.meta.dirname, + }, + globals: { + console: "readonly", + window: "readonly", + document: "readonly", + setTimeout: "readonly", + atob: "readonly", + location: "readonly", + WebSocket: "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", + }, + }, +]; diff --git a/knox-webshell-ui/package.json b/knox-webshell-ui/package.json index a33ed3b75..fd7483f66 100644 --- a/knox-webshell-ui/package.json +++ b/knox-webshell-ui/package.json @@ -2,6 +2,7 @@ "name": "ng-knox-webshell-ui", "version": "1.0.0", "license": "Apache-2.0", + "type": "module", "scripts": { "start": "ng serve --verbose=true", "build": "ng build", @@ -10,25 +11,30 @@ }, "private": true, "dependencies": { - "@angular-eslint/schematics": "^15.1.0", - "@angular/common": "~13.0.1", - "@angular/compiler": "~13.0.1", - "@angular/core": "~13.0.1", - "@angular/platform-browser": "~13.0.1", - "@angular/platform-browser-dynamic": "~13.0.1", - "@angular/router": "~13.0.1", - "ajv": "^6.12.6", - "ng-terminal": "^3.1.1", - "zone.js": "~0.11.4" + "@angular/common": "^21.0.5", + "@angular/compiler": "^21.0.5", + "@angular/core": "^21.0.5", + "@angular/platform-browser": "^21.0.5", + "@angular/platform-browser-dynamic": "^21.0.5", + "@angular/router": "^21.0.5", + "ng-terminal": "^6.6.0", + "zone.js": "~0.15.1" }, "devDependencies": { - "@angular-devkit/build-angular": "^13.3.11", - "@angular-eslint/builder": "^12.6.1 ", - "@angular/cli": "~14.2.9", - "@angular/compiler-cli": "~13.0.1", - "@types/jasmine": "~3.6.0", - "@types/node": "16.18.11", - "typescript": "~4.4.4", - "codelyzer": "^4.1.0" + "@angular-eslint/builder": "21.1.0", + "@angular-eslint/eslint-plugin": "21.1.0", + "@angular-eslint/eslint-plugin-template": "21.1.0", + "@angular-eslint/schematics": "21.1.0", + "@angular-eslint/template-parser": "21.1.0", + "@angular/build": "^21.0.3", + "@angular/cli": "^21.0.3", + "@angular/compiler-cli": "^21.0.5", + "@angular/language-service": "^21.0.5", + "@eslint/js": "^9.39.0", + "@types/node": "^24.5.2", + "eslint": "^9.39.0", + "ts-node": "~10.9.0", + "typescript": "~5.9.3", + "typescript-eslint": "^8.46.2" } } diff --git a/knox-webshell-ui/pom.xml b/knox-webshell-ui/pom.xml index e4ab76927..02e722e49 100644 --- a/knox-webshell-ui/pom.xml +++ b/knox-webshell-ui/pom.xml @@ -37,7 +37,11 @@ <configuration> <filesets> <fileset> - <directory>node_modules</directory> + <directory>${project.basedir}</directory> + <includes> + <include>package-lock.json</include> + <include>node_modules/**</include> + </includes> </fileset> </filesets> </configuration> @@ -65,7 +69,16 @@ <goal>npm</goal> </goals> <configuration> - <arguments>install --legacy-peer-deps</arguments> + <arguments>install</arguments> + </configuration> + </execution> + <execution> + <id>knox-webshell-npm-run-lint</id> + <goals> + <goal>npm</goal> + </goals> + <configuration> + <arguments>run lint</arguments> </configuration> </execution> <execution> diff --git a/knox-webshell-ui/tsconfig.app.json b/knox-webshell-ui/tsconfig.app.json deleted file mode 100644 index 5d90aaafb..000000000 --- a/knox-webshell-ui/tsconfig.app.json +++ /dev/null @@ -1,11 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.json", - "files": [ - "webshell-ui/main.ts", - "webshell-ui/polyfills.ts" - ], - "include": [ - "webshell-ui/**/*.d.ts" - ] -} diff --git a/knox-webshell-ui/tsconfig.json b/knox-webshell-ui/tsconfig.json deleted file mode 100644 index e73a7e37b..000000000 --- a/knox-webshell-ui/tsconfig.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": "./", - "declaration": false, - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "lib": [ - "es2017", - "dom" - ], - "mapRoot": "./", - "module": "es6", - "moduleResolution": "node", - "outDir": "./dist/out-tsc", - "sourceMap": true, - "target": "es5" - } -} diff --git a/knox-webshell-ui/webshell-ui/app/app.component.ts b/knox-webshell-ui/webshell-ui/app/app.component.ts index 85dc07ef2..81187a903 100644 --- a/knox-webshell-ui/webshell-ui/app/app.component.ts +++ b/knox-webshell-ui/webshell-ui/app/app.component.ts @@ -14,48 +14,43 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import {Component, OnInit, ViewChild, AfterViewInit, HostListener} from '@angular/core'; -import { NgTerminal } from 'ng-terminal'; +import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; +import { NgTerminal, NgTerminalModule } from 'ng-terminal'; @Component({ selector: 'app-root', + standalone: true, + imports: [NgTerminalModule], templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit, AfterViewInit { - @ViewChild('term', {static: false}) child: NgTerminal; - private websocket: WebSocket; + @ViewChild('term', {static: false}) child!: NgTerminal; + private websocket!: WebSocket; constructor() { } ngOnInit() {} ngAfterViewInit() { - const terminal = this.child.underlying; - // todo: can add other options to customize xterm + const terminal = this.child.underlying!; terminal.options.convertEol = true; terminal.options.letterSpacing = 0; terminal.options.fontFamily = 'Courier New'; - /* check font - const fontFamily = terminal.getOption("fontFamily"); - console.log(fontFamily); - */ - - let endpoint = 'wss://'+ location.hostname + ':' + location.port + '/'+ + const endpoint = 'wss://' + location.hostname + ':' + location.port + '/' + location.pathname.split('/')[1] + '/webshell'; console.log(endpoint); this.websocket = new WebSocket(endpoint); - this.websocket.onmessage = function(event){ + this.websocket.onmessage = (event) => { terminal.write(event.data); - } - this.websocket.onclose = function(event){ - terminal.write("\r\nConnection closed"); - } + }; + this.websocket.onclose = () => { + terminal.write('\r\nConnection closed'); + }; - terminal.onData((userInput) => { - // send userInput to backend server - this.websocket.send(JSON.stringify({userInput:userInput})); - }) + terminal.onData((userInput: string) => { + this.websocket.send(JSON.stringify({userInput: userInput})); + }); } } diff --git a/knox-webshell-ui/webshell-ui/app/app.module.ts b/knox-webshell-ui/webshell-ui/app/app.module.ts deleted file mode 100644 index 110931de9..000000000 --- a/knox-webshell-ui/webshell-ui/app/app.module.ts +++ /dev/null @@ -1,32 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; -import { NgTerminalModule } from 'ng-terminal'; -import { AppComponent } from './app.component'; -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - NgTerminalModule - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/knox-webshell-ui/webshell-ui/environments/environment.ts b/knox-webshell-ui/webshell-ui/environments/environment.ts index 283f02808..74510be22 100644 --- a/knox-webshell-ui/webshell-ui/environments/environment.ts +++ b/knox-webshell-ui/webshell-ui/environments/environment.ts @@ -14,19 +14,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -// This file can be replaced during build by using the `fileReplacements` array. -// `ng build` replaces `environment.ts` with `environment.prod.ts`. -// The list of file replacements can be found in `angular.json`. - export const environment = { production: false }; - -/* - * For easier debugging in development mode, you can import the following file - * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. - * - * This import should be commented out in production mode because it will have a negative impact - * on performance if an error is thrown. - */ -// import 'zone.js/plugins/zone-error'; // Included with Angular CLI. diff --git a/knox-webshell-ui/webshell-ui/main.ts b/knox-webshell-ui/webshell-ui/main.ts index 022708550..735d492fb 100644 --- a/knox-webshell-ui/webshell-ui/main.ts +++ b/knox-webshell-ui/webshell-ui/main.ts @@ -14,15 +14,27 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import './polyfills.ts'; + +import { enableProdMode, provideZoneChangeDetection } from '@angular/core'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { provideRouter } from '@angular/router'; +import { APP_BASE_HREF } from '@angular/common'; -import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; +import { AppComponent } from './app/app.component'; if (environment.production) { enableProdMode(); } -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +bootstrapApplication(AppComponent, { + providers: [ + provideZoneChangeDetection(), + provideRouter([]), + { + provide: APP_BASE_HREF, + useValue: (window as unknown as {'base-href'?: string})['base-href'] || '/' + } + ] +}).catch(err => console.error(err)); diff --git a/knox-webshell-ui/webshell-ui/polyfills.ts b/knox-webshell-ui/webshell-ui/polyfills.ts index 5881c3011..aebd58c4e 100644 --- a/knox-webshell-ui/webshell-ui/polyfills.ts +++ b/knox-webshell-ui/webshell-ui/polyfills.ts @@ -14,69 +14,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -/** - * This file includes polyfills needed by Angular and is loaded before the app. - * You can add your own extra polyfills to this file. - * - * This file is divided into 2 sections: - * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. - * 2. Application imports. Files imported after ZoneJS that should be loaded before your main - * file. - * - * The current setup is for so-called "evergreen" browsers; the last versions of browsers that - * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), - * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. - * - * Learn more in https://angular.io/guide/browser-support - */ - -/*************************************************************************************************** - * BROWSER POLYFILLS - */ - -/** - * IE11 requires the following for NgClass support on SVG elements - */ -// import 'classlist.js'; // Run `npm install --save classlist.js`. - -/** - * Web Animations `@angular/platform-browser/animations` - * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. - * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). - */ -// import 'web-animations-js'; // Run `npm install --save web-animations-js`. - -/** - * By default, zone.js will patch all possible macroTask and DomEvents - * user can disable parts of macroTask/DomEvents patch by setting following flags - * because those flags need to be set before `zone.js` being loaded, and webpack - * will put import in the top of bundle, so user need to create a separate file - * in this directory (for example: zone-flags.ts), and put the following flags - * into that file, and then add the following code before importing zone.js. - * import './zone-flags'; - - * - * The flags allowed in zone-flags.ts are listed here. - * - * The following flags will work for all browsers. - * - * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame - * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick - * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames - * - * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js - * with the following flag, it will bypass `zone.js` patch for IE/Edge - * - * (window as any).__Zone_enable_cross_context_check = true; - * - */ - -/*************************************************************************************************** - * Zone JS is required by default for Angular itself. - */ -import 'zone.js'; // Included with Angular CLI. - - -/*************************************************************************************************** - * APPLICATION IMPORTS - */ +import 'zone.js'; diff --git a/knox-webshell-ui/webshell-ui/styles.css b/knox-webshell-ui/webshell-ui/styles.css index 606962ea3..d5e1589d3 100644 --- a/knox-webshell-ui/webshell-ui/styles.css +++ b/knox-webshell-ui/webshell-ui/styles.css @@ -17,3 +17,9 @@ */ /* You can add global styles to this file, and also import other style files */ +html, body { + margin: 0; + padding: 0; + height: 100%; + overflow: hidden; +} diff --git a/knox-webshell-ui/webshell-ui/tsconfig.json b/knox-webshell-ui/webshell-ui/tsconfig.json new file mode 100644 index 000000000..38d744c40 --- /dev/null +++ b/knox-webshell-ui/webshell-ui/tsconfig.json @@ -0,0 +1,16 @@ +{ + "compilerOptions": { + "baseUrl": "webshell-ui", + "declaration": false, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "module": "ES2022", + "moduleResolution": "bundler", + "outDir": "../dist/out-tsc", + "sourceMap": true, + "target": "ES2022", + "typeRoots": [ + "../node_modules/@types" + ] + } +}
