[FLINK-23113][runtime-web] Migrate from tslint to eslint and add styl…

…elint for less

.gitignore

@@ -1,3 +1,4 @@
+.eslintcache
 .cache
 scalastyle-output.xml
 .classpath

flink-runtime-web/src/main/resources/META-INF/NOTICE

@@ -1632,4 +1632,3 @@ CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 For more information, please refer to http:https://unlicense.org/
-

flink-runtime-web/web-dashboard/.eslintignore

@@ -0,0 +1,28 @@
+.idea
+gen
+web
+tsc-out
+dist
+
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependency directories
+node_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# dotenv environment variables file
+.env
+.env.test
+
+.cache

flink-runtime-web/web-dashboard/.eslintrc.js

@@ -0,0 +1,145 @@
+module.exports = {
+ root: true,
+ overrides: [
+ {
+ files: ['*.ts'],
+ parser: '@typescript-eslint/parser',
+ parserOptions: {
+ ecmaVersion: 2021,
+ sourceType: 'module',
+ tsconfigRootDir: __dirname,
+ project: ['tsconfig.json'],
+ createDefaultProgram: true
+ },
+ plugins: ['@typescript-eslint', 'jsdoc', 'import', 'unused-imports'],
+ extends: [
+ 'plugin:@angular-eslint/recommended',
+ 'plugin:@angular-eslint/template/process-inline-templates',
+ 'plugin:prettier/recommended'
+ ],
+ rules: {
+ 'jsdoc/newline-after-description': 1,
+ '@angular-eslint/no-host-metadata-property': 'off',
+ '@typescript-eslint/no-explicit-any': 'error',
+ '@typescript-eslint/no-non-null-assertion': 'off',
+ '@typescript-eslint/array-type': [
+ 'error',
+ {
+ default: 'array-simple'
+ }
+ ],
+ '@typescript-eslint/ban-types': [
+ 'error',
+ {
+ types: {
+ Object: {
+ message: 'Use {} instead.'
+ },
+ String: {
+ message: 'Use string instead.'
+ },
+ Number: {
+ message: 'Use number instead.'
+ },
+ Boolean: {
+ message: 'Use boolean instead.'
+ },
+ Function: {
+ message: 'Use specific callable interface instead.'
+ }
+ }
+ }
+ ],
+ '@typescript-eslint/consistent-type-definitions': 'error',
+ '@typescript-eslint/explicit-member-accessibility': [
+ 'off',
+ {
+ accessibility: 'explicit'
+ }
+ ],
+ '@typescript-eslint/no-floating-promises': 'off',
+ '@typescript-eslint/no-for-in-array': 'error',
+ '@typescript-eslint/no-inferrable-types': [
+ 'error',
+ {
+ ignoreParameters: true,
+ ignoreProperties: true
+ }
+ ],
+ '@typescript-eslint/no-this-alias': 'error',
+ '@typescript-eslint/naming-convention': 'off',
+ '@typescript-eslint/no-unused-expressions': 'off',
+ '@typescript-eslint/explicit-function-return-type': [
+ 'error',
+ {
+ allowExpressions: true,
+ allowConciseArrowFunctionExpressionsStartingWithVoid: true
+ }
+ ],
+ 'prefer-arrow/prefer-arrow-functions': 'off',
+ 'unused-imports/no-unused-imports': 'error',
+ 'import/no-duplicates': 'error',
+ 'import/no-unused-modules': 'error',
+ 'import/no-unassigned-import': ['error', { allow: ['@angular/localize/init', 'zone.js', 'zone.js/**'] }],
+ 'import/order': [
+ 'error',
+ {
+ alphabetize: {
+ order: 'asc',
+ caseInsensitive: false
+ },
+ 'newlines-between': 'always',
+ groups: ['external', 'builtin', 'internal', ['parent', 'sibling', 'index']],
+ pathGroups: [
+ {
+ pattern: '{@angular/**,rxjs,rxjs/operators}',
+ group: 'external',
+ position: 'before'
+ },
+ {
+ pattern: '{services,interfaces,utils,config}',
+ group: 'internal',
+ position: 'before'
+ }
+ ],
+ pathGroupsExcludedImportTypes: []
+ }
+ ],
+ 'no-empty-function': 'off',
+ 'no-unused-expressions': 'error',
+ 'no-use-before-define': 'off',
+ 'no-bitwise': 'off',
+ 'no-duplicate-imports': 'error',
+ 'no-invalid-this': 'off',
+ 'no-irregular-whitespace': 'error',
+ 'no-magic-numbers': 'off',
+ 'no-multiple-empty-lines': 'error',
+ 'no-redeclare': 'off',
+ 'no-underscore-dangle': 'off',
+ 'no-sparse-arrays': 'error',
+ 'no-template-curly-in-string': 'off',
+ 'prefer-object-spread': 'error',
+ 'prefer-template': 'error',
+ yoda: 'error'
+ }
+ },
+ {
+ files: ['*.html'],
+ extends: ['plugin:@angular-eslint/template/recommended'],
+ rules: {}
+ },
+ {
+ files: ['*.html'],
+ excludedFiles: ['*inline-template-*.component.html'],
+ extends: ['plugin:prettier/recommended'],
+ rules: {
+ 'prettier/prettier': [
+ 'error',
+ {
+ parser: 'angular'
+ }
+ ]
+ }
+ }
+ ]
+};

flink-runtime-web/web-dashboard/.prettierignore

@@ -1,6 +1,5 @@
-**/*.md
 **/*.svg
-**/*.html
 **/test.ts
-**/*.less
 package.json
+web/
+node_modules/

flink-runtime-web/web-dashboard/.prettierrc

@@ -1,14 +1,26 @@
 {
  "singleQuote": true,
+ "useTabs": false,
  "printWidth": 120,
  "tabWidth": 2,
- "useTabs": false,
+ "semi": true,
+ "htmlWhitespaceSensitivity": "ignore",
+ "arrowParens": "avoid",
+ "bracketSpacing": true,
+ "proseWrap": "preserve",
+ "trailingComma": "none",
  "overrides": [
  {
  "files": ".prettierrc",
  "options": {
  "parser": "json"
  }
+ },
+ {
+ "files": "*.html",
+ "options": {
+ "printWidth": 100
+ }
  }
  ]
 }

flink-runtime-web/web-dashboard/.stylelintignore

@@ -0,0 +1,5 @@
+**/*.svg
+**/test.ts
+package.json
+web/
+node_modules/

flink-runtime-web/web-dashboard/.stylelintrc.js

@@ -0,0 +1,23 @@
+module.exports = {
+ plugins: ['stylelint-order'],
+ extends: ['stylelint-config-standard', 'stylelint-config-hudochenkov/order', 'stylelint-prettier/recommended'],
+ rules: {
+ 'prettier/prettier': [
+ true,
+ {
+ singleQuote: false
+ }
+ ],
+ 'no-empty-source': null,
+ 'no-descending-specificity': null,
+ 'no-invalid-position-at-import-rule': null,
+ 'function-calc-no-invalid': null,
+ 'font-family-no-missing-generic-family-keyword': null,
+ 'selector-pseudo-element-no-unknown': [
+ true,
+ {
+ ignorePseudoElements: ['ng-deep']
+ }
+ ]
+ }
+};

flink-runtime-web/web-dashboard/angular.json

@@ -35,7 +35,9 @@
  "build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
- "allowedCommonJsDependencies": ["dagre"],
+ "allowedCommonJsDependencies": [
+ "dagre"
+ ],
  "outputPath": "web",
  "index": "src/index.html",
  "main": "src/main.ts",
@@ -49,9 +51,13 @@
  "output": "libs/vs"
  }
  ],
- "styles": ["src/styles/index.less"],
+ "styles": [
+ "src/styles/index.less"
+ ],
  "stylePreprocessorOptions": {
- "includePaths": ["src/styles"]
+ "includePaths": [
+ "src/styles"
+ ]
  },
  "scripts": [],
  "vendorChunk": true,
@@ -115,20 +121,31 @@
  "polyfills": "src/polyfills.ts",
  "tsConfig": "src/tsconfig.spec.json",
  "karmaConfig": "src/karma.conf.js",
- "styles": ["src/styles/index.less"],
+ "styles": [
+ "src/styles/index.less"
+ ],
  "scripts": [],
- "assets": ["src/favicon.ico", "src/assets"]
+ "assets": [
+ "src/favicon.ico",
+ "src/assets"
+ ]
  }
  },
  "lint": {
- "builder": "@angular-devkit/build-angular:tslint",
+ "builder": "@angular-eslint/builder:lint",
  "options": {
- "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
- "exclude": ["**/node_modules/**"]
+ "fix": true,
+ "lintFilePatterns": [
+ "src/**/*.ts",
+ "src/**/*.html"
+ ]
  }
  }
  }
  }
  },
- "defaultProject": "flink"
+ "defaultProject": "flink",
+ "cli": {
+ "defaultCollection": "@angular-eslint/schematics"
+ }
 }