diff --git a/browserslist b/.browserslistrc similarity index 58% rename from browserslist rename to .browserslistrc index 80848532..4f9ac269 100644 --- a/browserslist +++ b/.browserslistrc @@ -2,11 +2,15 @@ # For additional information regarding the format and rule options, please see: # https://github.com/browserslist/browserslist#queries +# For the full list of supported browsers by the Angular framework, please see: +# https://angular.io/guide/browser-support + # You can see what browsers were selected by your queries by running: # npx browserslist -> 0.5% -last 2 versions +last 1 Chrome version +last 1 Firefox version +last 2 Edge major versions +last 2 Safari major versions +last 2 iOS major versions Firefox ESR -not dead -not IE 9-11 # For IE 9-11 support, remove 'not'. \ No newline at end of file diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml index b9c963ba..e35e8943 100644 --- a/.github/workflows/main.yaml +++ b/.github/workflows/main.yaml @@ -24,21 +24,16 @@ jobs: - name: Set Node.js Environment uses: actions/setup-node@v2 with: - node-version: 14.18 + node-version: 16.14.2 - run: | - npm install -g @angular/cli > /dev/null - npm install karma - npm install -g protractor - yarn install + npm install -g @angular/cli > /dev/null + npm install -g yarn > /dev/null - - name: Lint Test - run: yarn lint + - name: Install Dependencies + run: yarn install - - name: Unit Test - run: ng test --watch=false - - - name: Build - run: ng build --prod + - name: Build Prod + run: yarn build:prod - name: Test Coverage run: yarn test:coverage diff --git a/.gitignore b/.gitignore index 86d943a9..b2358a70 100644 --- a/.gitignore +++ b/.gitignore @@ -1,21 +1,18 @@ # See http://help.github.com/ignore-files/ for more about ignoring files. -# compiled output +# Compiled output /dist /tmp /out-tsc -# Only exists if Bazel was run /bazel-out -# dependencies +# Node /node_modules - -# profiling files -chrome-profiler-events*.json -speed-measure-plugin*.json +npm-debug.log +yarn-error.log # IDEs and editors -/.idea +.idea/ .project .classpath .c9/ @@ -23,24 +20,24 @@ speed-measure-plugin*.json .settings/ *.sublime-workspace -# IDE - VSCode +# Visual Studio Code .vscode/* +.vscode/ !.vscode/settings.json !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json .history/* -# misc -/.sass-cache +# Miscellaneous +/.angular/cache +.sass-cache/ /connect.lock /coverage /libpeerconnection.log -npm-debug.log -yarn-error.log testem.log /typings -# System Files +# System files .DS_Store Thumbs.db diff --git a/Dockerfile b/Dockerfile index 0b2f0a44..c4038a5a 100644 --- a/Dockerfile +++ b/Dockerfile @@ -16,7 +16,7 @@ # limitations under the License. # State 1 -FROM node:14.18-alpine3.14 as buildstage +FROM node:16.14.2-alpine3.15 as buildstage WORKDIR /usr/uiapp diff --git a/Makefile b/Makefile index 4b14d62d..b6744646 100644 --- a/Makefile +++ b/Makefile @@ -70,8 +70,7 @@ build: # Run the tests after building test: build - ng test - ng e2e + yarn test:singleRun # Build the web interface in a production ready version .PHONY: build-prod @@ -82,6 +81,7 @@ build-prod: .PHONY: clean clean: rm -rf ./dist + rm -rf ./coverage rm -rf ./node_modules rm -rf ./out rm -rf ./out-tsc diff --git a/README.md b/README.md index 794eb794..c1dda085 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ It depends on `yunikorn-core` which encapsulates all the actual scheduling logic For detailed information on the components and how to build the overall scheduler please see the [yunikorn-core](https://github.com/apache/yunikorn-core). -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.19. +This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.3.0. ## Development Environment setup ### Dependencies @@ -30,9 +30,8 @@ The project requires a number of external tools to be installed before the build - [Node.js](https://nodejs.org/en/) - [Angular CLI](https://github.com/angular/angular-cli) - [Karma](https://karma-runner.github.io) -- [Protractor](http://www.protractortest.org/) -- [json-server](https://www.npmjs.com/package/json-server) - [yarn](https://www.npmjs.com/package/yarn) +- [json-server](https://www.npmjs.com/package/json-server) ### Development server @@ -63,8 +62,6 @@ The project uses [multi-stage build](https://docs.docker.com/develop/develop-ima All tests can be executed via `make test`. It will first build the project and then execute the unit tests followed by the end to end tests. If you want to run the unit tests separately, run `yarn test` to execute them via [Karma](https://karma-runner.github.io). If you want to run the unit tests with code coverage, run `yarn test:coverage`. -The end to end tests run via [Protractor](http://www.protractortest.org/) and can be directly run by executing `yarn e2e`. - ## Local development Beside the simple all in way to start the development server via make you can also start a development environment manually. @@ -86,5 +83,4 @@ The port is also referenced in other scripts and configurations to this port als - Makefile ## How do I contribute code? - See how to contribute code from [this guide](docs/how-to-contribute.md). diff --git a/angular.json b/angular.json index 4641d997..4a237994 100644 --- a/angular.json +++ b/angular.json @@ -1,6 +1,9 @@ { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, + "cli": { + "packageManager": "yarn" + }, "newProjectRoot": "projects", "projects": { "yunikorn-web": { @@ -8,6 +11,9 @@ "schematics": { "@schematics/angular:component": { "style": "scss" + }, + "@schematics/angular:application": { + "strict": true } }, "root": "", @@ -22,58 +28,55 @@ "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", - "aot": false, - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "src/styles.scss" - ], + "inlineStyleLanguage": "scss", + "assets": ["src/favicon.ico", "src/assets"], + "styles": ["src/styles.scss"], "scripts": [] }, "configurations": { "production": { - "fileReplacements": [ - { - "replace": "src/environments/environment.ts", - "with": "src/environments/environment.prod.ts" - } - ], - "optimization": true, - "outputHashing": "all", - "sourceMap": false, - "extractCss": true, - "namedChunks": false, - "aot": true, - "extractLicenses": true, - "vendorChunk": false, - "buildOptimizer": true, "budgets": [ { "type": "initial", - "maximumWarning": "2mb", + "maximumWarning": "3mb", "maximumError": "5mb" }, { "type": "anyComponentStyle", - "maximumWarning": "6kb", - "maximumError": "10kb" + "maximumWarning": "4kb", + "maximumError": "5kb" + } + ], + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" } - ] + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true } - } + }, + "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", - "options": { - "browserTarget": "yunikorn-web:build" - }, "configurations": { "production": { "browserTarget": "yunikorn-web:build:production" + }, + "development": { + "browserTarget": "yunikorn-web:build:development" } - } + }, + "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", @@ -88,42 +91,14 @@ "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.spec.json", "karmaConfig": "karma.conf.js", - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "src/styles.scss" - ], + "inlineStyleLanguage": "scss", + "assets": ["src/favicon.ico", "src/assets"], + "styles": ["src/styles.scss"], "scripts": [] } - }, - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": [ - "tsconfig.app.json", - "tsconfig.spec.json", - "e2e/tsconfig.json" - ], - "exclude": [ - "**/node_modules/**" - ] - } - }, - "e2e": { - "builder": "@angular-devkit/build-angular:protractor", - "options": { - "protractorConfig": "e2e/protractor.conf.js", - "devServerTarget": "yunikorn-web:serve" - }, - "configurations": { - "production": { - "devServerTarget": "yunikorn-web:serve:production" - } - } } } - }}, + } + }, "defaultProject": "yunikorn-web" -} \ No newline at end of file +} diff --git a/e2e/protractor.conf.js b/e2e/protractor.conf.js deleted file mode 100644 index 4a9280e2..00000000 --- a/e2e/protractor.conf.js +++ /dev/null @@ -1,50 +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. - */ - -// @ts-check -// Protractor configuration file, see link for more information -// https://github.com/angular/protractor/blob/master/lib/config.ts - -const { SpecReporter } = require('jasmine-spec-reporter'); - -/** - * @type { import("protractor").Config } - */ -exports.config = { - allScriptsTimeout: 11000, - specs: [ - './src/**/*.e2e-spec.ts' - ], - capabilities: { - browserName: 'chrome' - }, - directConnect: true, - baseUrl: 'http://localhost:4200/', - framework: 'jasmine', - jasmineNodeOpts: { - showColors: true, - defaultTimeoutInterval: 30000, - print: function() {} - }, - onPrepare() { - require('ts-node').register({ - project: require('path').join(__dirname, './tsconfig.json') - }); - jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); - } -}; diff --git a/e2e/src/app.e2e-spec.ts b/e2e/src/app.e2e-spec.ts deleted file mode 100644 index 11ebca89..00000000 --- a/e2e/src/app.e2e-spec.ts +++ /dev/null @@ -1,46 +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 { AppPage } from './app.po'; -import { browser, logging } from 'protractor'; - -describe('workspace-project App', () => { - let page: AppPage; - - beforeEach(() => { - page = new AppPage(); - }); - - it('should display welcome message', () => { - page.navigateTo(); - expect(page.getTitleText()).toEqual('yunikorn-web app is running!'); - }); - - afterEach(async () => { - // Assert that there are no errors emitted from the browser - const logs = await browser - .manage() - .logs() - .get(logging.Type.BROWSER); - expect(logs).not.toContain( - jasmine.objectContaining({ - level: logging.Level.SEVERE - } as logging.Entry) - ); - }); -}); diff --git a/e2e/src/app.po.ts b/e2e/src/app.po.ts deleted file mode 100644 index daae8de6..00000000 --- a/e2e/src/app.po.ts +++ /dev/null @@ -1,29 +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 { browser, by, element } from 'protractor'; - -export class AppPage { - navigateTo() { - return browser.get(browser.baseUrl) as Promise; - } - - getTitleText() { - return element(by.css('app-root .content span')).getText() as Promise; - } -} diff --git a/e2e/tsconfig.json b/e2e/tsconfig.json deleted file mode 100644 index 39b800f7..00000000 --- a/e2e/tsconfig.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "outDir": "../out-tsc/e2e", - "module": "commonjs", - "target": "es5", - "types": [ - "jasmine", - "jasminewd2", - "node" - ] - } -} diff --git a/karma.conf.ci.js b/karma.conf.ci.js index 385f64fd..1e0455cf 100644 --- a/karma.conf.ci.js +++ b/karma.conf.ci.js @@ -21,7 +21,7 @@ process.env.CHROME_BIN = require('puppeteer').executablePath(); -module.exports = function(config) { +module.exports = function (config) { config.set({ basePath: '', frameworks: ['jasmine', '@angular-devkit/build-angular'], @@ -29,21 +29,22 @@ module.exports = function(config) { require('karma-jasmine'), require('karma-chrome-launcher'), require('karma-jasmine-html-reporter'), + require('karma-coverage'), require('karma-coverage-istanbul-reporter'), require('@angular-devkit/build-angular/plugins/karma'), - require('karma-super-dots-reporter') + require('karma-super-dots-reporter'), ], client: { - clearContext: false // leave Jasmine Spec Runner output visible in browser + clearContext: false, // leave Jasmine Spec Runner output visible in browser + }, + reporters: ['super-dots', 'coverage-istanbul'], + superDotsReporter: { + nbDotsPerLine: 180, }, coverageIstanbulReporter: { dir: require('path').join(__dirname, './coverage/yunikorn-web'), reports: ['text-summary'], - fixWebpackSourcePaths: true - }, - reporters: ['super-dots'], - superDotsReporter: { - nbDotsPerLine: 180 + fixWebpackSourcePaths: true, }, port: 9876, colors: true, @@ -55,6 +56,6 @@ module.exports = function(config) { browserDisconnectTimeout: 180000, browserNoActivityTimeout: 180000, singleRun: true, - restartOnFileChange: true + restartOnFileChange: true, }); }; diff --git a/karma.conf.js b/karma.conf.js index 407aaca3..75e175bd 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -21,7 +21,7 @@ process.env.CHROME_BIN = require('puppeteer').executablePath(); -module.exports = function(config) { +module.exports = function (config) { config.set({ basePath: '', frameworks: ['jasmine', '@angular-devkit/build-angular'], @@ -29,17 +29,26 @@ module.exports = function(config) { require('karma-jasmine'), require('karma-chrome-launcher'), require('karma-jasmine-html-reporter'), - require('karma-coverage-istanbul-reporter'), + require('karma-coverage'), require('@angular-devkit/build-angular/plugins/karma'), - require('karma-spec-reporter') + require('karma-spec-reporter'), ], client: { - clearContext: false // leave Jasmine Spec Runner output visible in browser + jasmine: { + // you can add configuration options for Jasmine here + // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html + // for example, you can disable the random execution with `random: false` + // or set a specific seed with `seed: 4321` + }, + clearContext: false, // leave Jasmine Spec Runner output visible in browser }, - coverageIstanbulReporter: { + jasmineHtmlReporter: { + suppressAll: true, // removes the duplicated traces + }, + coverageReporter: { dir: require('path').join(__dirname, './coverage/yunikorn-web'), - reports: ['html', 'lcovonly', 'text-summary'], - fixWebpackSourcePaths: true + subdir: '.', + reporters: [{ type: 'html' }, { type: 'text-summary' }], }, reporters: ['spec'], specReporter: { @@ -49,7 +58,7 @@ module.exports = function(config) { suppressPassed: false, // do not print information about passed tests suppressSkipped: true, // do not print information about skipped tests showSpecTiming: false, // print the time elapsed for each spec - failFast: true // test would finish with error when a first fail occurs. + failFast: true, // test would finish with error when a first fail occurs. }, port: 9876, colors: true, @@ -61,6 +70,6 @@ module.exports = function(config) { browserDisconnectTimeout: 180000, browserNoActivityTimeout: 180000, singleRun: false, - restartOnFileChange: true + restartOnFileChange: true, }); }; diff --git a/package.json b/package.json index 6f93dc75..4b20e081 100644 --- a/package.json +++ b/package.json @@ -1,14 +1,15 @@ { "name": "yunikorn-web", - "version": "0.1.0", + "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", - "lint": "ng lint", - "e2e": "ng e2e", - "build:prod": "ng build --prod", + "watch": "ng build --watch --configuration development", + "test:singleRun": "ng test --code-coverage --watch false", + "start:host": "ng serve --host 0.0.0.0", + "build:prod": "ng build --configuration production", "start:srv": "json-server --watch json-db.json", "test:coverage": "ng test --code-coverage --karma-config=./karma.conf.ci.js", "prettify": "prettier --config ./.prettierrc --write 'src/**/*.{js,ts,json,css,scss,md,html}'" @@ -26,56 +27,47 @@ ] }, "dependencies": { - "@angular/animations": "~8.2.14", - "@angular/cdk": "^8.2.3", - "@angular/common": "~8.2.14", - "@angular/compiler": "~8.2.14", - "@angular/core": "~8.2.14", - "@angular/forms": "~8.2.14", - "@angular/material": "^8.2.3", - "@angular/platform-browser": "~8.2.14", - "@angular/platform-browser-dynamic": "~8.2.14", - "@angular/router": "~8.2.14", - "chart.js": "^2.9.3", - "core-js": "^3.6.0", - "moment": "^2.24.0", - "ngx-spinner": "^8.1.0", - "rxjs": "~6.4.0", - "tslib": "^1.10.0", - "zone.js": "~0.9.1" + "@angular/animations": "~13.3.0", + "@angular/cdk": "^13.3.1", + "@angular/common": "~13.3.0", + "@angular/compiler": "~13.3.0", + "@angular/core": "~13.3.0", + "@angular/forms": "~13.3.0", + "@angular/material": "^13.3.1", + "@angular/platform-browser": "~13.3.0", + "@angular/platform-browser-dynamic": "~13.3.0", + "@angular/router": "~13.3.0", + "chart.js": "^3.7.1", + "chartjs-adapter-date-fns": "^2.0.0", + "date-fns": "^2.28.0", + "moment": "^2.29.1", + "ngx-spinner": "^13.1.1", + "rxjs": "~7.5.0", + "tslib": "^2.3.0", + "zone.js": "~0.11.4" }, "devDependencies": { - "@angular-devkit/build-angular": "~0.803.19", - "@angular/cli": "~8.3.19", - "@angular/compiler-cli": "~8.2.14", - "@angular/language-service": "~8.2.14", - "@testing-library/dom": "^6.11.0", - "@types/jasmine": "~3.3.8", - "@types/jasminewd2": "~2.0.3", - "@types/node": "~8.9.4", - "codelyzer": "^5.0.0", - "jasmine-core": "~3.4.0", - "jasmine-spec-reporter": "~4.2.1", - "json-server": "^0.15.1", - "karma": "~4.1.0", - "karma-chrome-launcher": "~2.2.0", - "karma-coverage-istanbul-reporter": "~2.0.1", - "karma-jasmine": "~2.0.1", - "karma-jasmine-html-reporter": "^1.4.0", - "karma-spec-reporter": "^0.0.32", + "@angular-devkit/build-angular": "~13.3.0", + "@angular/cli": "~13.3.0", + "@angular/compiler-cli": "~13.3.0", + "@types/jasmine": "~3.10.0", + "@types/node": "^12.11.1", + "husky": "^7.0.4", + "jasmine-core": "~4.0.0", + "json-server": "^0.17.0", + "karma": "~6.3.0", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage": "~2.1.0", + "karma-coverage-istanbul-reporter": "^3.0.3", + "karma-jasmine": "~4.0.0", + "karma-jasmine-html-reporter": "~1.7.0", + "karma-spec-reporter": "^0.0.33", "karma-super-dots-reporter": "^0.2.0", - "lint-staged": "^9.5.0", + "lint-staged": "^12.3.7", "ng-bullet": "^1.0.3", - "ng-mocks": "^8.1.0", - "prettier": "^1.19.1", - "protractor": "~5.4.0", - "puppeteer": "^2.0.0", - "ts-node": "~7.0.0", - "tslint": "~5.15.0", - "typescript": "~3.5.3" - }, - "resolutions": { - "**/**/serialize-javascript": "^2.1.1", - "**/**/tree-kill": "^1.2.2" + "ng-mocks": "^13.3.0", + "prettier": "^2.6.1", + "puppeteer": "^13.5.1", + "typescript": "~4.6.2" } } diff --git a/src/app/app.component.html b/src/app/app.component.html index 0e305604..dba84fda 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -16,37 +16,37 @@ * limitations under the License. --> -
+
  • - + Dashboard
  • - + Queues
  • - + Applications
  • - + Nodes @@ -64,7 +64,7 @@
    @@ -78,9 +78,7 @@ - +