Skip to content

Commit 466fbbb

Browse files
LogicalGuy77LogicalGuy77
committed
upgraded to Angular 13 and fixed dependencies
Signed-off-by: LogicalGuy77 <[email protected]>
1 parent ce31a55 commit 466fbbb

File tree

6 files changed

+132
-124
lines changed

6 files changed

+132
-124
lines changed

‎Dockerfile

+47-47
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,69 @@
1-
# --- Clone the kubeflow/kubeflow code ---
2-
FROM ubuntu AS fetch-kubeflow-kubeflow
1+
# --- Clone the kubeflow/kubeflow code ---
2+
FROM ubuntu AS fetch-kubeflow-kubeflow
33

4-
RUN apt-get update && apt-get install git -y
4+
RUN apt-get update && apt-get install git -y
55

6-
WORKDIR /kf
7-
COPY ./frontend/COMMIT ./
6+
WORKDIR /kf
7+
COPY ./frontend/COMMIT ./
88
RUN git clone https://github.com/kubeflow/kubeflow.git && \
99
COMMIT=$(cat ./COMMIT) && \
1010
cd kubeflow && \
11-
git checkout $COMMIT
11+
git checkout $COMMIT
1212

13-
# --- Build the backend kubeflow-wheel ---
14-
FROM python:3.12-slim AS backend-kubeflow-wheel
13+
# --- Build the backend kubeflow-wheel ---
14+
FROM python:3.12-slim AS backend-kubeflow-wheel
1515

16-
WORKDIR /src
16+
WORKDIR /src
17+
RUN pip install setuptools wheel
1718

18-
RUN pip install setuptools wheel
19+
ARG BACKEND_LIB=/kf/kubeflow/components/crud-web-apps/common/backend
20+
COPY --from=fetch-kubeflow-kubeflow $BACKEND_LIB .
21+
RUN python setup.py sdist bdist_wheel
1922

20-
ARG BACKEND_LIB=/kf/kubeflow/components/crud-web-apps/common/backend
21-
COPY --from=fetch-kubeflow-kubeflow $BACKEND_LIB .
22-
RUN python setup.py sdist bdist_wheel
23+
# --- Build the frontend kubeflow library ---
24+
FROM node:22-bookworm-slim AS frontend-kubeflow-lib
2325

24-
# --- Build the frontend kubeflow library ---
25-
FROM node:22-bookworm-slim AS frontend-kubeflow-lib
26+
WORKDIR /src
27+
ARG LIB=/kf/kubeflow/components/crud-web-apps/common/frontend/kubeflow-common-lib
28+
COPY --from=fetch-kubeflow-kubeflow $LIB/package*.json ./
29+
RUN npm install
2630

27-
WORKDIR /src
28-
ENV NODE_OPTIONS="--openssl-legacy-provider"
29-
ARG LIB=/kf/kubeflow/components/crud-web-apps/common/frontend/kubeflow-common-lib
30-
COPY --from=fetch-kubeflow-kubeflow $LIB/package*.json ./
31-
RUN npm ci # Use ci for stable dependency installs
31+
COPY --from=fetch-kubeflow-kubeflow $LIB/ ./
32+
# Patch all SCSS files with tilde imports
33+
RUN find . -name "*.scss" -exec sed -i "s|@use '~@angular/material' as mat;|@use '@angular/material' as mat;|" {} \;
34+
RUN npm run build
3235

33-
COPY --from=fetch-kubeflow-kubeflow $LIB/ ./
34-
RUN npm run build
35-
36-
# --- Build the frontend ---
37-
FROM node:22-bookworm-slim AS frontend
38-
39-
WORKDIR /src
40-
ENV NODE_OPTIONS="--openssl-legacy-provider"
41-
COPY ./frontend/package*.json ./
42-
RUN npm ci # Use ci for a clean install
43-
COPY --from=frontend-kubeflow-lib /src/dist/kubeflow/ ./node_modules/kubeflow/
44-
45-
COPY ./frontend/ .
36+
# --- Build the frontend ---
37+
FROM node:22-bookworm-slim AS frontend
4638

39+
WORKDIR /src
40+
COPY ./frontend/package*.json ./
4741
ENV NODE_OPTIONS=--openssl-legacy-provider
48-
RUN npm run build -- --output-path=./dist/default --configuration=production
42+
RUN npm install
43+
COPY --from=frontend-kubeflow-lib /src/dist/kubeflow/ ./node_modules/kubeflow/
4944

50-
# Web App
51-
FROM python:3.12-slim
45+
COPY ./frontend/ .
46+
ENV NODE_OPTIONS=--openssl-legacy-provider
47+
RUN npm run build -- --output-path=./dist/default --configuration=production
5248

53-
WORKDIR /package
54-
COPY --from=backend-kubeflow-wheel /src/dist .
55-
RUN pip3 install *.whl
49+
# Web App
50+
FROM python:3.12-slim
5651

57-
WORKDIR /src
58-
COPY ./backend/requirements.txt .
59-
RUN pip3 install -r requirements.txt
52+
WORKDIR /package
53+
COPY --from=backend-kubeflow-wheel /src/dist .
54+
RUN pip3 install *.whl
6055

61-
COPY ./backend/apps/ ./apps
62-
COPY ./backend/entrypoint.py .
63-
COPY ./backend/Makefile .
56+
WORKDIR /src
57+
COPY ./backend/requirements.txt .
58+
RUN pip3 install -r requirements.txt
6459

65-
COPY --from=frontend /src/dist/default/ /src/apps/v1beta1/static/
60+
COPY ./backend/apps/ ./apps
61+
COPY ./backend/entrypoint.py .
62+
COPY ./backend/Makefile .
63+
64+
COPY --from=frontend /src/dist/default/ /src/apps/v1beta1/static/
6665

6766
ENV APP_PREFIX /models
6867
ENV APP_VERSION v1beta1
69-
ENTRYPOINT ["gunicorn", "-w", "3", "--bind", "0.0.0.0:5000", "--access-logfile", "-", "entrypoint:app"]
68+
69+
ENTRYPOINT ["gunicorn", "-w", "3", "--bind", "0.0.0.0:5000", "--access-logfile", "-", "entrypoint:app"]

‎frontend/angular.json

+3
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@
2424
"builder": "@angular-devkit/build-angular:browser",
2525
"options": {
2626
"preserveSymlinks": true,
27+
"stylePreprocessorOptions": {
28+
"includePaths": ["node_modules"]
29+
},
2730
"outputPath": "dist/frontend",
2831
"index": "src/index.html",
2932
"main": "src/main.ts",

‎frontend/package.json

+49-50
Original file line numberDiff line numberDiff line change
@@ -21,60 +21,59 @@
2121
},
2222
"private": true,
2323
"dependencies": {
24-
"@angular/animations": "~12.2.16",
25-
"@angular/cdk": "^12.2.13",
26-
"@angular/cdk-experimental": "^12.2.13",
27-
"@angular/common": "~12.2.16",
28-
"@angular/compiler": "~12.2.16",
29-
"@angular/core": "~12.2.16",
30-
"@angular/forms": "~12.2.16",
31-
"@angular/localize": "^12.2.16",
32-
"@angular/material": "^12.2.13",
33-
"@angular/platform-browser": "~12.2.16",
34-
"@angular/platform-browser-dynamic": "~12.2.16",
35-
"@angular/router": "~12.2.16",
36-
"@fortawesome/angular-fontawesome": "^0.9.0",
37-
"@fortawesome/fontawesome-svg-core": "^1.2.26",
38-
"@fortawesome/free-brands-svg-icons": "^5.12.0",
39-
"@fortawesome/free-solid-svg-icons": "^5.12.0",
40-
"@kubernetes/client-node": "^0.16.3",
24+
"@angular/animations": "~13.4.0",
25+
"@angular/cdk": "^13.3.9",
26+
"@angular/cdk-experimental": "^13.3.9",
27+
"@angular/common": "~13.4.0",
28+
"@angular/compiler": "~13.4.0",
29+
"@angular/core": "^13.4.0",
30+
"@angular/forms": "~13.4.0",
31+
"@angular/localize": "^13.3.11",
32+
"@angular/material": "^13.3.9",
33+
"@angular/platform-browser": "~13.4.0",
34+
"@angular/platform-browser-dynamic": "~13.4.0",
35+
"@angular/router": "~13.4.0",
36+
"@fortawesome/angular-fontawesome": "^0.10.2",
37+
"@fortawesome/fontawesome-svg-core": "^1.3.0",
38+
"@fortawesome/free-brands-svg-icons": "^5.15.4",
39+
"@fortawesome/free-solid-svg-icons": "^5.15.4",
40+
"@kubernetes/client-node": "^0.17.0",
4141
"date-fns": "^1.29.0",
42-
"js-yaml": "^4.0.0",
43-
"lodash": "^4.17.20",
44-
"lodash-es": "^4.17.11",
45-
"material-icons": "^0.7.7",
42+
"js-yaml": "^4.1.0",
43+
"lodash": "^4.17.21",
44+
"lodash-es": "^4.17.21",
45+
"material-icons": "^1.10.8",
4646
"monaco-editor": "^0.33.0",
47-
"rxjs": "~6.6.7",
48-
"tslib": "^2.0.0",
49-
"zone.js": "~0.11.4"
47+
"rxjs": "~7.5.6",
48+
"tslib": "^2.4.0",
49+
"zone.js": "~0.11.5"
5050
},
5151
"devDependencies": {
52-
"@angular-devkit/build-angular": "~12.2.17",
53-
"@angular-devkit/core": "^12.2.17",
54-
"@angular-eslint/builder": "12.7.0",
55-
"@angular-eslint/eslint-plugin": "12.7.0",
56-
"@angular-eslint/eslint-plugin-template": "12.7.0",
57-
"@angular-eslint/schematics": "12.7.0",
58-
"@angular-eslint/template-parser": "12.7.0",
59-
"@angular/cli": "~12.2.17",
60-
"@angular/compiler-cli": "~12.2.16",
61-
"@angular/language-service": "~12.2.16",
62-
"@types/jasmine": "~3.6.0",
63-
"@types/jasminewd2": "~2.0.3",
64-
"@types/node": "^12.11.1",
65-
"@typescript-eslint/eslint-plugin": "4.28.2",
66-
"@typescript-eslint/parser": "4.28.2",
67-
"codelyzer": "^6.0.0",
68-
"eslint": "^7.26.0",
69-
"jasmine-core": "~4.1.0",
70-
"jasmine-spec-reporter": "~5.0.0",
71-
"karma": "~6.3.18",
72-
"karma-chrome-launcher": "~3.1.0",
73-
"karma-coverage-istanbul-reporter": "~3.0.2",
74-
"karma-jasmine": "~4.0.0",
75-
"karma-jasmine-html-reporter": "^1.7.0",
52+
"@angular-devkit/build-angular": "~13.3.9",
53+
"@angular-devkit/core": "^13.3.9",
54+
"@angular-eslint/builder": "13.5.0",
55+
"@angular-eslint/eslint-plugin": "13.5.0",
56+
"@angular-eslint/eslint-plugin-template": "13.5.0",
57+
"@angular-eslint/schematics": "13.5.0",
58+
"@angular-eslint/template-parser": "13.5.0",
59+
"@angular/cli": "^13.3.11",
60+
"@angular/compiler-cli": "~13.4.0",
61+
"@angular/language-service": "~13.4.0",
62+
"@types/jasmine": "~4.0.3",
63+
"@types/jasminewd2": "~2.0.10",
64+
"@types/node": "14.18.63",
65+
"@typescript-eslint/eslint-plugin": "5.30.7",
66+
"@typescript-eslint/parser": "5.30.7",
67+
"eslint": "^8.20.0",
68+
"jasmine-core": "~4.2.0",
69+
"jasmine-spec-reporter": "~7.0.0",
70+
"karma": "~6.4.0",
71+
"karma-chrome-launcher": "~3.1.1",
72+
"karma-coverage-istanbul-reporter": "~3.0.3",
73+
"karma-jasmine": "~5.1.0",
74+
"karma-jasmine-html-reporter": "^2.0.0",
7675
"protractor": "~7.0.0",
77-
"ts-node": "~7.0.0",
78-
"typescript": "~4.3.5"
76+
"ts-node": "~10.9.1",
77+
"typescript": "~4.6.4"
7978
}
8079
}

‎frontend/src/app/services/grafana.service.ts

+21-22
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
1-
import { Injectable } from '@angular/core';
2-
import { environment } from 'src/environments/environment';
3-
import { HttpClient } from '@angular/common/http';
4-
import { catchError, map, tap, switchAll, concatAll } from 'rxjs/operators';
5-
import { BackendService, SnackBarService } from 'kubeflow';
6-
import { ReplaySubject, Observable, of, throwError } from 'rxjs';
7-
import { MappingsContext } from 'source-list-map';
8-
import { GrafanaDashboard } from '../types/grafana';
1+
import { Injectable } from "@angular/core";
2+
import { environment } from "src/environments/environment";
3+
import { HttpClient } from "@angular/common/http";
4+
import { catchError, map, tap, switchAll, concatAll } from "rxjs/operators";
5+
import { BackendService, SnackBarService } from "kubeflow";
6+
import { ReplaySubject, Observable, of, throwError } from "rxjs";
7+
import { GrafanaDashboard } from "../types/grafana";
98

109
@Injectable({
11-
providedIn: 'root',
10+
providedIn: "root",
1211
})
1312
export class GrafanaService extends BackendService {
1413
public orgId = 1;
@@ -23,10 +22,10 @@ export class GrafanaService extends BackendService {
2322
constructor(http: HttpClient, snack: SnackBarService) {
2423
super(http, snack);
2524

26-
console.log('Fetching Grafana dashboards info');
25+
console.log("Fetching Grafana dashboards info");
2726
this.getDashboardsInfo().subscribe(
2827
(dashboards: GrafanaDashboard[]) => {
29-
console.log('Fetched dashboards');
28+
console.log("Fetched dashboards");
3029
this.dashboards.next(dashboards);
3130

3231
// create a dict with URIs as key for fast lookup
@@ -39,49 +38,49 @@ export class GrafanaService extends BackendService {
3938
this.dashboardsInitialized = true;
4039
this.serviceInitializedSuccessfully$.next(true);
4140
},
42-
error => {
41+
(error) => {
4342
console.warn(`Couldn't fetch the list of Grafana Dashboards: ${error}`);
4443
this.serviceInitializedSuccessfully$.next(false);
45-
},
44+
}
4645
);
4746
}
4847

4948
public getDasbhboardUrlFromUri(uri: string): Observable<string> {
5049
return this.withServiceInitialized().pipe(
51-
map(_ => this.dashboardUris),
50+
map((_) => this.dashboardUris),
5251
concatAll(),
53-
map(uris => {
52+
map((uris) => {
5453
if (!(uri in uris)) {
5554
const msg = `Grafana URI '${uri}' does not exist in list of known URIs`;
5655
throw msg;
5756
}
5857

5958
return uris[uri].url;
60-
}),
59+
})
6160
);
6261
}
6362

6463
public getDashboardsInfo() {
65-
const url = environment.grafanaPrefix + '/api/search';
64+
const url = environment.grafanaPrefix + "/api/search";
6665

6766
return this.http.get<GrafanaDashboard[]>(url).pipe(
68-
catchError(error => this.handleError(error, false)),
67+
catchError((error) => this.handleError(error, false)),
6968
map((resp: GrafanaDashboard[]) => {
7069
return resp;
71-
}),
70+
})
7271
);
7372
}
7473

7574
private withServiceInitialized(): Observable<boolean> {
7675
return this.serviceInitializedSuccessfully$.pipe(
77-
map(init => {
76+
map((init) => {
7877
if (!init) {
79-
const msg = 'Initialization process was not completed successfully.';
78+
const msg = "Initialization process was not completed successfully.";
8079
throw msg;
8180
}
8281

8382
return true;
84-
}),
83+
})
8584
);
8685
}
8786
}

‎frontend/src/styles.scss

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/* You can add global styles to this file, and also import other style files */
2-
@import '~kubeflow/styles.scss';
2+
@import '@angular/material/theming';
3+
@import 'kubeflow/styles.scss';
34

45
// Give some space after each input
56
mat-form-field {
@@ -25,4 +26,4 @@ body {
2526

2627
.check_circle {
2728
color: green;
28-
}
29+
}

‎frontend/tsconfig.json

+9-3
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,16 @@
1313
"target": "es2015",
1414
"typeRoots": ["node_modules/@types"],
1515
"lib": ["es2018", "dom"],
16-
"allowSyntheticDefaultImports": true
16+
"allowSyntheticDefaultImports": true,
17+
"skipLibCheck": true,
18+
"forceConsistentCasingInFileNames": true,
19+
"strict": false,
20+
"noImplicitReturns": false,
21+
"noFallthroughCasesInSwitch": false
1722
},
1823
"angularCompilerOptions": {
1924
"fullTemplateTypeCheck": true,
20-
"strictInjectionParameters": true
25+
"strictInjectionParameters": true,
26+
"enableIvy": true
2127
}
22-
}
28+
}

0 commit comments

Comments
 (0)