From ddc2d4995470ec5277f67ada3821eba2e2f1dcf7 Mon Sep 17 00:00:00 2001 From: Matt Gilman Date: Thu, 14 Mar 2024 15:18:22 -0400 Subject: [PATCH 1/2] NIFI-12902: - Migrating to @angular-devkit/build-angular:application to avoid and avoid sporadic webpack build issues. - Updating roboto dependencies. --- .../src/main/nifi/angular.json | 7 +- .../src/main/nifi/package-lock.json | 18 ++-- .../src/main/nifi/package.json | 3 +- .../src/main/nifi/proxy.config.mjs | 18 +++- .../provenance-event-listing.effects.ts | 3 +- .../queue-listing/queue-listing.effects.ts | 2 +- .../parameter-tip.component.scss | 2 +- .../src/main/nifi/src/styles.scss | 87 +------------------ 8 files changed, 40 insertions(+), 100 deletions(-) diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/angular.json b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/angular.json index 84c1979e8237..b45bff79b4ed 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/angular.json +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/angular.json @@ -15,11 +15,11 @@ "prefix": "app", "architect": { "build": { - "builder": "@angular-devkit/build-angular:browser", + "builder": "@angular-devkit/build-angular:application", "options": { "outputPath": "dist/nifi", "index": "src/index.html", - "main": "src/main.ts", + "browser": "src/main.ts", "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", @@ -38,13 +38,10 @@ } ], "outputHashing": "all", - "buildOptimizer": false, "optimization": true }, "development": { - "buildOptimizer": false, "optimization": false, - "vendorChunk": true, "extractLicenses": false, "sourceMap": true, "namedChunks": true, diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package-lock.json b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package-lock.json index 178f33516b13..969f25b8e9cc 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package-lock.json +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package-lock.json @@ -19,6 +19,8 @@ "@angular/platform-browser-dynamic": "^17.1.3", "@angular/router": "^17.1.3", "@ctrl/ngx-codemirror": "^7.0.0", + "@fontsource/roboto": "^5.0.12", + "@fontsource/roboto-slab": "^5.0.19", "@ngrx/effects": "^17.1.0", "@ngrx/router-store": "^17.1.0", "@ngrx/store": "^17.1.0", @@ -29,7 +31,6 @@ "humanize-duration": "^3.31.0", "ngrx-immer": "^2.1.1", "ngx-skeleton-loader": "^8.1.0", - "roboto-fontface": "0.10.0", "rxjs": "~7.8.1", "tslib": "^2.6.2", "webfontloader": "^1.6.28", @@ -3288,6 +3289,16 @@ "node": ">=14" } }, + "node_modules/@fontsource/roboto": { + "version": "5.0.12", + "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.0.12.tgz", + "integrity": "sha512-x0o17jvgoSSbS9OZnUX2+xJmVRvVCfeaYJjkS7w62iN7CuJWtMf5vJj8LqgC7ibqIkitOHVW+XssRjgrcHn62g==" + }, + "node_modules/@fontsource/roboto-slab": { + "version": "5.0.19", + "resolved": "https://registry.npmjs.org/@fontsource/roboto-slab/-/roboto-slab-5.0.19.tgz", + "integrity": "sha512-rqZ+XbhNhLj8L0OnOFioQmd9ElpolZlOGqJSRCZHdjJPk4C6kmbQKO4rGvLrs18eIFCyoqc3dV8i4l2BGZswUQ==" + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.13", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz", @@ -14762,11 +14773,6 @@ "url": "https://github.com/sponsors/isaacs" } }, - "node_modules/roboto-fontface": { - "version": "0.10.0", - "resolved": "https://registry.npmjs.org/roboto-fontface/-/roboto-fontface-0.10.0.tgz", - "integrity": "sha512-OlwfYEgA2RdboZohpldlvJ1xngOins5d7ejqnIBWr9KaMxsnBqotpptRXTyfNRLnFpqzX6sTDt+X+a+6udnU8g==" - }, "node_modules/robust-predicates": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz", diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package.json b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package.json index 30cfe4971a09..fdfe6a72cf4e 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package.json +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package.json @@ -27,6 +27,8 @@ "@angular/platform-browser-dynamic": "^17.1.3", "@angular/router": "^17.1.3", "@ctrl/ngx-codemirror": "^7.0.0", + "@fontsource/roboto": "^5.0.12", + "@fontsource/roboto-slab": "^5.0.19", "@ngrx/effects": "^17.1.0", "@ngrx/router-store": "^17.1.0", "@ngrx/store": "^17.1.0", @@ -37,7 +39,6 @@ "humanize-duration": "^3.31.0", "ngrx-immer": "^2.1.1", "ngx-skeleton-loader": "^8.1.0", - "roboto-fontface": "0.10.0", "rxjs": "~7.8.1", "tslib": "^2.6.2", "webfontloader": "^1.6.28", diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/proxy.config.mjs b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/proxy.config.mjs index 36c612c22b14..a2377fe6fd4e 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/proxy.config.mjs +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/proxy.config.mjs @@ -5,9 +5,25 @@ const target = { changeOrigin: true, headers: { 'X-ProxyPort': 4200 + }, + configure: (proxy, _options) => { + proxy.on('error', (err, _req, _res) => { + console.log('proxy error', err); + }); + proxy.on('proxyReq', (proxyReq, req, _res) => { + console.log('Sending Request to the Target:', req.method, req.url); + }); + proxy.on('proxyRes', (proxyRes, req, _res) => { + console.log('Received Response from the Target:', proxyRes.statusCode, req.url); + }); + }, + bypass: function(req, res, proxyOptions) { + if (req.url.startsWith('/nifi/')) { + return req.url; + } } }; export default { - '/': target + '/**': target }; diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/state/provenance-event-listing/provenance-event-listing.effects.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/state/provenance-event-listing/provenance-event-listing.effects.ts index 6693677d048e..557846b02c85 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/state/provenance-event-listing/provenance-event-listing.effects.ts +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/state/provenance-event-listing/provenance-event-listing.effects.ts @@ -328,8 +328,7 @@ export class ProvenanceEventListingEffects { panelClass: 'large-dialog' }); - dialogReference.componentInstance.contentViewerAvailable = - about?.contentViewerUrl != null ?? false; + dialogReference.componentInstance.contentViewerAvailable = about?.contentViewerUrl != null; dialogReference.componentInstance.downloadContent .pipe(takeUntil(dialogReference.afterClosed())) diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/state/queue-listing/queue-listing.effects.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/state/queue-listing/queue-listing.effects.ts index cb5598b0d019..830b0ae31a1d 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/state/queue-listing/queue-listing.effects.ts +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/state/queue-listing/queue-listing.effects.ts @@ -268,7 +268,7 @@ export class QueueListingEffects { panelClass: 'large-dialog' }); - dialogReference.componentInstance.contentViewerAvailable = about?.contentViewerUrl != null ?? false; + dialogReference.componentInstance.contentViewerAvailable = about?.contentViewerUrl != null; dialogReference.componentInstance.downloadContent .pipe(takeUntil(dialogReference.afterClosed())) diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/parameter-tip/parameter-tip.component.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/parameter-tip/parameter-tip.component.scss index 0e1912a1af28..61df9f13bb92 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/parameter-tip/parameter-tip.component.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/parameter-tip/parameter-tip.component.scss @@ -16,7 +16,7 @@ */ .parameter-name { - font-weight: bold; + font-weight: 700; font-family: monospace; font-size: 16px; margin-bottom: 10px; diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss index 188168ac550d..2fcdea5d1c7f 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss @@ -67,7 +67,10 @@ @use 'app/ui/common/component-context/component-context.component-theme' as component-context; // Plus imports for other components in your app. -@use 'roboto-fontface/css/roboto/roboto-fontface.css'; +@use '@fontsource/roboto/latin.css' as roboto-normal; +@use '@fontsource/roboto/latin-300-italic.css' as roboto-light-italic; +@use '@fontsource/roboto/latin-400-italic.css' as roboto-normal-italic; +@use '@fontsource/roboto-slab/latin.css' as roboto-slab-normal; @use 'assets/fonts/flowfont/flowfont.css'; @use 'font-awesome/css/font-awesome.min.css'; @use 'codemirror/lib/codemirror.css'; @@ -83,88 +86,6 @@ $fontSecondary: 'Robot Slab', sans-serif; $fontMedium: 'Roboto Medium', sans-serif; $fontLight: 'Roboto Light', sans-serif; -$appFontPath: '~roboto-fontface/fonts'; - -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 300; - src: - local('Roboto Light'), - local('Roboto-Light'), - url('#{$appFontPath}/roboto/Roboto-Light.woff2') format('woff2'); -} - -@font-face { - font-family: 'Roboto'; - font-style: italic; - font-weight: 300; - src: - local('Roboto LightItalic'), - local('Roboto-LightItalic'), - url('#{$appFontPath}/roboto/Roboto-LightItalic.woff2') format('woff2'); -} - -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: normal; - src: - local('Roboto Regular'), - local('Roboto-Regular'), - url('#{$appFontPath}/roboto/Roboto-Regular.woff2') format('woff2'); -} - -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 500; - src: - local('Roboto Medium'), - local('Roboto-Medium'), - url('#{$appFontPath}/roboto/Roboto-Medium.woff2') format('woff2'); -} - -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: bold; - src: - local('Roboto Bold'), - local('Roboto-Bold'), - url('#{$appFontPath}/roboto/Roboto-Bold.woff2') format('woff2'); -} - -@font-face { - font-family: 'Roboto'; - font-style: italic; - font-weight: normal; - src: - local('Roboto Italic'), - local('Roboto-Italic'), - url('#{$appFontPath}/roboto/Roboto-RegularItalic.woff2') format('woff2'); -} - -@font-face { - font-family: 'Roboto Slab'; - font-style: normal; - font-weight: normal; - src: - local('RobotoSlab Regular'), - local('RobotoSlab-Regular'), - url('#{$appFontPath}/roboto-slab/Roboto-Slab-Regular.woff2') format('woff2'); -} - -@font-face { - font-family: 'Roboto Slab'; - font-style: normal; - font-weight: bold; - src: - local('RobotoSlab Bold'), - local('RobotoSlab-Bold'), - url('#{$appFontPath}/roboto-slab/Roboto-Slab-Bold.woff2') format('woff2'); -} - // Include the common styles for Angular Material. We include this here so that you only // have to load a single css file for Angular Material in your app. // Be sure that you only ever include this mixin once! From 536dde0469a0a97724c84bf68219cadf791bccde Mon Sep 17 00:00:00 2001 From: Matt Gilman Date: Fri, 15 Mar 2024 10:00:21 -0400 Subject: [PATCH 2/2] NIFI-12902: - Clean up. --- .../nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss index 2fcdea5d1c7f..f596ec68991f 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss @@ -81,11 +81,6 @@ // To override the NiFi theme, you need to set the variables $material-theme-light and $material-theme-dark @import 'assets/themes/nifi'; -$fontPrimary: 'Roboto', sans-serif; -$fontSecondary: 'Robot Slab', sans-serif; -$fontMedium: 'Roboto Medium', sans-serif; -$fontLight: 'Roboto Light', sans-serif; - // Include the common styles for Angular Material. We include this here so that you only // have to load a single css file for Angular Material in your app. // Be sure that you only ever include this mixin once!