[FLINK-23113][runtime-web] Migrate to ESLint, add Stylint and address dependency vulnerabilities

.gitignore

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

flink-runtime-web/pom.xml

@@ -17,7 +17,7 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-<project xmlns="http://maven.apache.org/POM/4.0.0" 
+<project xmlns="http://maven.apache.org/POM/4.0.0"
 	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
 
 	<modelVersion>4.0.0</modelVersion>
@@ -260,7 +260,7 @@ under the License.
 			<plugin>
 				<groupId>com.github.eirslett</groupId>
 				<artifactId>frontend-maven-plugin</artifactId>
-				<version>1.6</version>
+				<version>1.9.1</version>
 				<executions>
 					<execution>
 						<id>install node and npm</id>
@@ -269,6 +269,7 @@ under the License.
 						</goals>
 						<configuration>
 							<nodeVersion>v12.14.1</nodeVersion>
+							<npmVersion>6.13.4</npmVersion>
 						</configuration>
 					</execution>
 					<execution>
@@ -284,12 +285,12 @@ under the License.
 						</configuration>
 					</execution>
 					<execution>
-						<id>npm run build</id>
+						<id>npm run ci-check</id>
 						<goals>
 							<goal>npm</goal>
 						</goals>
 						<configuration>
-							<arguments>run build</arguments>
+							<arguments>run ci-check</arguments>
 						</configuration>
 					</execution>
 				</executions>

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://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"
+  }
 }