fix: Resolve errors in e2e tests for cypress in Katib UI (#2384)

Signed-off-by: tariq-hasan <[email protected]>
This commit is contained in:
Tariq Hasan
2024-12-03 14:02:59 +00:00
committed by GitHub
parent 22ecfaae79
commit 27027d0a33
10 changed files with 23511 additions and 8513 deletions
+4 -4
View File
@@ -21,7 +21,7 @@ jobs:
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: 12.18.1
node-version: 16.20.2
- name: Format katib code
run: |
@@ -44,7 +44,7 @@ jobs:
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: 12.18.1
node-version: 16.20.2
- name: Fetch Kubeflow and install common code dependencies
run: |
@@ -74,10 +74,10 @@ jobs:
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup node version to 12
- name: Setup node version to 16
uses: actions/setup-node@v4
with:
node-version: 12
node-version: 16
- name: Fetch Kubeflow and install common code dependencies
run: |
+16 -4
View File
@@ -11,23 +11,35 @@ RUN git clone https://github.com/kubeflow/kubeflow.git && \
git checkout $COMMIT
# --- Build the frontend kubeflow library ---
FROM node:12 AS frontend-kubeflow-lib
FROM node:16 AS frontend-kubeflow-lib
WORKDIR /src
ARG LIB=/kf/kubeflow/components/crud-web-apps/common/frontend/kubeflow-common-lib
COPY --from=fetch-kubeflow-kubeflow $LIB/package*.json ./
RUN npm ci
RUN npm config set fetch-retry-mintimeout 200000 && \
npm config set fetch-retry-maxtimeout 1200000 && \
npm config get registry && \
npm config set registry https://registry.npmjs.org/ && \
npm config get https-proxy && \
npm config rm https-proxy && \
npm ci
COPY --from=fetch-kubeflow-kubeflow $LIB/ ./
RUN npm run build
# --- Build the frontend ---
FROM node:12 AS frontend
FROM node:16 AS frontend
WORKDIR /src
COPY ./pkg/ui/v1beta1/frontend/package*.json ./
RUN npm ci
RUN npm config set fetch-retry-mintimeout 20000 && \
npm config set fetch-retry-maxtimeout 120000 && \
npm config get registry && \
npm config set registry https://registry.npmjs.org/ && \
npm config get https-proxy && \
npm config rm https-proxy && \
npm ci
COPY ./pkg/ui/v1beta1/frontend/ .
COPY --from=frontend-kubeflow-lib /src/dist/kubeflow/ ./node_modules/kubeflow/
+1 -1
View File
@@ -19,7 +19,7 @@ To make changes to the UI you need to install:
- Tools, defined [here](https://github.com/kubeflow/katib/blob/master/docs/developer-guide.md#requirements).
- `node` (v12.18.1) and `npm` (v6.13). Recommended to install `node` and `npm` using [`nvm`](https://github.com/nvm-sh/nvm). After installing `nvm`, you can run `nvm install 12.18.1` to install `node` version 12.18.1 and run `nvm use 12.18.1` to use that version.
- `node` (v16.20.2) and `npm` (v8.19.4). Recommended to install `node` and `npm` using [`nvm`](https://github.com/nvm-sh/nvm). After installing `nvm`, you can run `nvm install 16.20.2` to install `node` version 16.20.2 and run `nvm use 16.20.2` to use that version.
## Development
+1 -1
View File
@@ -1 +1 @@
046c6d3c8
78969ee82
+1 -1
View File
@@ -12,7 +12,7 @@ Run `ng generate component component-name` to generate a new component. You can
## Build
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--configuration "production"` flag for a production build.
## Running unit tests
+4
View File
@@ -17,6 +17,10 @@
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"allowedCommonJsDependencies": [
"date-fns",
"lodash"
],
"preserveSymlinks": true,
"outputPath": "dist/frontend",
"index": "src/index.html",
@@ -52,19 +52,19 @@ describe('Index page', () => {
const status = parseStatus(experiments[i]);
if (status.phase === STATUS_TYPE.READY) {
cy.wrap(element)
.find('lib-status>mat-icon')
.find('lib-status-icon>mat-icon')
.should('contain', 'check_circle');
} else if (status.phase === STATUS_TYPE.STOPPED) {
cy.wrap(element)
.find('lib-status>lib-icon')
.find('lib-status-icon>lib-icon')
.should('have.attr', 'icon', 'custom:stoppedResource');
} else if (status.phase === STATUS_TYPE.UNAVAILABLE) {
cy.wrap(element)
.find('lib-status>mat-icon')
.find('lib-status-icon>mat-icon')
.should('contain', 'timelapse');
} else if (status.phase === STATUS_TYPE.WARNING) {
cy.wrap(element)
.find('lib-status>mat-icon')
.find('lib-status-icon>mat-icon')
.should('contain', 'warning');
} else if (
status.phase === STATUS_TYPE.WAITING ||
+23443 -8464
View File
File diff suppressed because it is too large Load Diff
+36 -33
View File
@@ -4,8 +4,8 @@
"scripts": {
"ng": "ng",
"start": "npm run copyLibAssets && ng serve --proxy-config proxy.conf.json",
"build:watch": "npm run copyLibAssets && ng build --base-href /katib/ --deploy-url /katib/static/ --outputPath dist/static --watch",
"build:prod": "npm run copyLibAssets && ng build --base-href /katib/ --deploy-url /katib/static/ --outputPath dist/static --configuration production",
"build:watch": "npm run copyLibAssets && ng build --base-href /katib/ --deploy-url /katib/static/ --output-path dist/static --watch",
"build:prod": "npm run copyLibAssets && ng build --base-href /katib/ --deploy-url /katib/static/ --output-path dist/static --configuration production",
"copyLibAssets": "cp -r ./node_modules/kubeflow/assets/* ./src/assets/",
"test": "ng test",
"test:prod": "ng test --browsers=ChromeHeadless --watch=false",
@@ -19,66 +19,69 @@
},
"private": true,
"dependencies": {
"@angular/animations": "~12.2.7",
"@angular/cdk": "^12.2.7",
"@angular/cdk-experimental": "^12.2.7",
"@angular/common": "~12.2.7",
"@angular/compiler": "~12.2.7",
"@angular/core": "~12.2.7",
"@angular/forms": "~12.2.7",
"@angular/localize": "^12.2.7",
"@angular/material": "^12.2.7",
"@angular/platform-browser": "~12.2.7",
"@angular/platform-browser-dynamic": "~12.2.7",
"@angular/router": "~12.2.7",
"@fortawesome/angular-fontawesome": "^0.9.0",
"@angular/animations": "~14.3.0",
"@angular/cdk": "~14.2.7",
"@angular/cdk-experimental": "~14.2.7",
"@angular/common": "~14.3.0",
"@angular/compiler": "~14.3.0",
"@angular/core": "~14.3.0",
"@angular/forms": "~14.3.0",
"@angular/localize": "~14.3.0",
"@angular/material": "~14.2.7",
"@angular/platform-browser": "~14.3.0",
"@angular/platform-browser-dynamic": "~14.3.0",
"@angular/router": "~14.3.0",
"@fortawesome/angular-fontawesome": "~0.11.1",
"@fortawesome/fontawesome-svg-core": "^1.2.26",
"@fortawesome/free-brands-svg-icons": "^5.12.0",
"@fortawesome/free-solid-svg-icons": "^5.12.0",
"@swimlane/ngx-charts": "^20.4.1",
"@types/lodash-es": "~4.17.7",
"date-fns": "1.29.0",
"echarts": "^5.3.2",
"echarts-stat": "^1.2.0",
"js-yaml": "^4.0.0",
"lodash-es": "4.17.21",
"lodash-es": "~4.17.21",
"material-icons": "^0.7.7",
"monaco-editor": "^0.33.0",
"ngx-echarts": "^8.0.1",
"ngx-json-viewer": "^2.4.0",
"rxjs": "~6.6.7",
"rxjs": "~7.4.0",
"tough-cookie": "~4.1.3",
"tslib": "^2.0.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.2.7",
"@angular-eslint/builder": "12.7.0",
"@angular-eslint/eslint-plugin": "12.7.0",
"@angular-eslint/eslint-plugin-template": "12.7.0",
"@angular-eslint/schematics": "12.7.0",
"@angular-eslint/template-parser": "12.7.0",
"@angular/cli": "~12.2.7",
"@angular/compiler-cli": "~12.2.7",
"@angular/language-service": "~12.2.7",
"@angular-devkit/build-angular": "^14.2.13",
"@angular-eslint/builder": "~14.4.0",
"@angular-eslint/eslint-plugin": "~14.4.0",
"@angular-eslint/eslint-plugin-template": "~14.4.0",
"@angular-eslint/schematics": "~14.4.0",
"@angular-eslint/template-parser": "~14.4.0",
"@angular/cli": "~14.2.13",
"@angular/compiler-cli": "~14.3.0",
"@angular/language-service": "~14.3.0",
"@cypress/schematic": "^2.3.0",
"@kubernetes/client-node": "^0.12.2",
"@kubernetes/client-node": "^0.16.3",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/jasminewd2": "^2.0.9",
"@types/node": "^12.11.1",
"@typescript-eslint/eslint-plugin": "4.28.2",
"@typescript-eslint/parser": "4.28.2",
"codelyzer": "^6.0.0",
"cypress": "^10.10.0",
"cypress": "~13.13.1",
"eslint": "^7.26.0",
"jasmine-core": "~3.6.0",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.16",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"karma-jasmine-html-reporter": "^1.6.0",
"prettier": "2.3.2",
"ts-node": "~7.0.0",
"typescript": "~4.3.5",
"process": "^0.11.10",
"ts-node": "^10.4.0",
"typescript": "~4.7.0",
"wait-on": "^7.2.0"
}
}
+1 -1
View File
@@ -1,5 +1,5 @@
/* You can add global styles to this file, and also import other style files */
@import '~kubeflow/styles.scss';
@import '../node_modules/kubeflow/styles/styles.scss';
body {
background-color: white;