You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@nifi.apache.org by "sardell (via GitHub)" <gi...@apache.org> on 2024/06/18 06:03:06 UTC
[PR] NIFI-13248: Add Flow Analysis report menu to new ui [nifi]
sardell opened a new pull request, #8974:
URL: https://github.com/apache/nifi/pull/8974
<!-- 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. -->
# Summary
[NIFI-13248](https://issues.apache.org/jira/browse/NIFI-13248)
This PR is still a WIP. Items remaining include:
* Rebase and resolve merge conflict
* Add license headers to new files
* Add polling to get analysis results request
* Updating types from `any` based on backend response
* Add violation details modal
I'll be addressing these missing pieces tomorrow.
# Tracking
Please complete the following tracking steps prior to pull request creation.
### Issue Tracking
- [ ] [Apache NiFi Jira](https://issues.apache.org/jira/browse/NIFI) issue created
### Pull Request Tracking
- [ ] Pull Request title starts with Apache NiFi Jira issue number, such as `NIFI-00000`
- [ ] Pull Request commit message starts with Apache NiFi Jira issue number, as such `NIFI-00000`
### Pull Request Formatting
- [ ] Pull Request based on current revision of the `main` branch
- [ ] Pull Request refers to a feature branch with one commit containing changes
# Verification
Please indicate the verification steps performed prior to pull request creation.
### Build
- [ ] Build completed using `mvn clean install -P contrib-check`
- [ ] JDK 21
### Licensing
- [ ] New dependencies are compatible with the [Apache License 2.0](https://apache.org/licenses/LICENSE-2.0) according to the [License Policy](https://www.apache.org/legal/resolved.html)
- [ ] New dependencies are documented in applicable `LICENSE` and `NOTICE` files
### Documentation
- [ ] Documentation formatting appears as expected in rendered files
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] NIFI-13248: Add Flow Analysis report menu to new ui [nifi]
Posted by "scottyaslan (via GitHub)" <gi...@apache.org>.
scottyaslan commented on code in PR #8974:
URL: https://github.com/apache/nifi/pull/8974#discussion_r1710346976
##########
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/flow-analysis-drawer.component.scss:
##########
@@ -0,0 +1,169 @@
+/*
+ * 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.
+ */
+
+ @use 'sass:map';
+ @use '@angular/material' as mat;
+
+ @mixin generate-theme($material-theme, $nifi-theme) {
+ // Get the color config from the theme.
+ $material-theme-color-config: mat.m2-get-color-config($material-theme);
+ $nifi-theme-color-config: mat.m2-get-color-config($nifi-theme);
+
+ // Get the color palette from the color-config.
+ $material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
+ $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
+
+ // Get hues from palette
+ $is-dark: map-get($material-theme-color-config, is-dark);
+ $material-theme-primary-palette-default: mat.m2-get-color-from-palette($material-theme-primary-palette);
+ $material-theme-primary-palette-lighter: mat.m2-get-color-from-palette($material-theme-primary-palette, lighter);
+ $material-theme-primary-palette-darker: mat.m2-get-color-from-palette($material-theme-primary-palette, darker);
+ $nifi-theme-surface-palette-darker: mat.m2-get-color-from-palette($nifi-theme-surface-palette, darker);
+ $nifi-theme-surface-palette-lighter: mat.m2-get-color-from-palette($nifi-theme-surface-palette, lighter);
+
+ $hover: var(--mat-menu-item-hover-state-layer-color);
+
+ .flow-analysis-drawer {
Review Comment:
Thanks @sardell. I have a few more improvements we can make:
[flow_analysis_rules_update.patch](https://github.com/user-attachments/files/16553713/flow_analysis_rules_update.patch)
Please apply this patch and let's discuss any questions, findings, or if anything is missing or mistakenly removed.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] NIFI-13248: Add Flow Analysis report menu to new ui [nifi]
Posted by "scottyaslan (via GitHub)" <gi...@apache.org>.
scottyaslan commented on code in PR #8974:
URL: https://github.com/apache/nifi/pull/8974#discussion_r1711724055
##########
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.html:
##########
@@ -127,6 +127,16 @@
</div>
<div class="flex">
<search [currentProcessGroupId]="currentProcessGroupId"></search>
+ <button
+ class="flow-analysis-notification w-8 border-l flex justify-center items-center"
+ (click)="openFlowAnalysisMenu()">
+ <i
+ class="fa fa-lightbulb-o flow-analysis-notification-icon w-[24px] h-[24px] flex justify-center items-center"
Review Comment:
I am really not a fan of this icon. Like, what does it even represent? An idea? I think we can update this to something a little more intuitive to help the user grok what it is.
```suggestion
class="fa fa-medkit flow-analysis-notification-icon w-[24px] h-[24px] flex justify-center items-center"
```
<img width="1340" alt="Screenshot 2024-08-09 at 12 03 01 PM" src="https://github.com/user-attachments/assets/c2f99f92-b773-49e9-a6ec-e3d1e077d814">
This would likely need to be updated in the old UI as well.
If you don't like the medkit icon here are some other 'medical' icons from font awesome. I think any one of these would be more appropriate than a light bulb.
<img width="1225" alt="Screenshot 2024-08-09 at 12 00 26 PM" src="https://github.com/user-attachments/assets/d2cb021a-3d31-4bd0-8eaf-d1738597fae0">
Or maybe the bug icon:
<img width="1335" alt="Screenshot 2024-08-09 at 12 03 14 PM" src="https://github.com/user-attachments/assets/4fa7016a-f1c7-4a40-adc0-7b4823a8cb9e">
It is, after all, a way for the user to debug their flow based on a set of rules....
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] NIFI-13248: Add Flow Analysis report menu to new ui [nifi]
Posted by "scottyaslan (via GitHub)" <gi...@apache.org>.
scottyaslan commented on code in PR #8974:
URL: https://github.com/apache/nifi/pull/8974#discussion_r1711724055
##########
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.html:
##########
@@ -127,6 +127,16 @@
</div>
<div class="flex">
<search [currentProcessGroupId]="currentProcessGroupId"></search>
+ <button
+ class="flow-analysis-notification w-8 border-l flex justify-center items-center"
+ (click)="openFlowAnalysisMenu()">
+ <i
+ class="fa fa-lightbulb-o flow-analysis-notification-icon w-[24px] h-[24px] flex justify-center items-center"
Review Comment:
I am really not a fan of this icon. Like, what does it even represent? An idea? I think we can update this to something a little more intuitive to help the user grok what it is.
```suggestion
class="fa fa-medkit flow-analysis-notification-icon w-[24px] h-[24px] flex justify-center items-center"
```
This would likely need to be updated in the old UI as well.
If you don't like the medkit icon here are some other 'medical' icons from font awesome. I think any one of these would be more appropriate than a light bulb.
<img width="1225" alt="Screenshot 2024-08-09 at 12 00 26 PM" src="https://github.com/user-attachments/assets/d2cb021a-3d31-4bd0-8eaf-d1738597fae0">
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] NIFI-13248: Add Flow Analysis report menu to new ui [nifi]
Posted by "scottyaslan (via GitHub)" <gi...@apache.org>.
scottyaslan commented on code in PR #8974:
URL: https://github.com/apache/nifi/pull/8974#discussion_r1711703977
##########
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.html:
##########
@@ -127,6 +127,16 @@
</div>
<div class="flex">
<search [currentProcessGroupId]="currentProcessGroupId"></search>
+ <button
+ class="flow-analysis-notification w-8 border-l flex justify-center items-center"
+ (click)="openFlowAnalysisMenu()">
+ <i
+ class="fa fa-lightbulb-o flow-analysis-notification-icon w-[24px] h-[24px] flex justify-center items-center"
+ [ngClass]="flowAnalysisNotificationClass"
+ [class.rounded-xl]="
Review Comment:
This change is included in my latest [patch](https://github.com/apache/nifi/pull/8974#discussion_r1710346976).
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] NIFI-13248: Add Flow Analysis report menu to new ui [nifi]
Posted by "scottyaslan (via GitHub)" <gi...@apache.org>.
scottyaslan commented on code in PR #8974:
URL: https://github.com/apache/nifi/pull/8974#discussion_r1693778935
##########
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/flow-analysis-drawer.component.scss:
##########
@@ -0,0 +1,169 @@
+/*
+ * 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.
+ */
+
+ @use 'sass:map';
+ @use '@angular/material' as mat;
+
+ @mixin generate-theme($material-theme, $nifi-theme) {
+ // Get the color config from the theme.
+ $material-theme-color-config: mat.m2-get-color-config($material-theme);
+ $nifi-theme-color-config: mat.m2-get-color-config($nifi-theme);
+
+ // Get the color palette from the color-config.
+ $material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
+ $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
+
+ // Get hues from palette
+ $is-dark: map-get($material-theme-color-config, is-dark);
+ $material-theme-primary-palette-default: mat.m2-get-color-from-palette($material-theme-primary-palette);
+ $material-theme-primary-palette-lighter: mat.m2-get-color-from-palette($material-theme-primary-palette, lighter);
+ $material-theme-primary-palette-darker: mat.m2-get-color-from-palette($material-theme-primary-palette, darker);
+ $nifi-theme-surface-palette-darker: mat.m2-get-color-from-palette($nifi-theme-surface-palette, darker);
+ $nifi-theme-surface-palette-lighter: mat.m2-get-color-from-palette($nifi-theme-surface-palette, lighter);
+
+ $hover: var(--mat-menu-item-hover-state-layer-color);
+
+ .flow-analysis-drawer {
Review Comment:
@sardell Attached is a patch file that will help get this PR closer to something we can merge:
[flow-analysis.patch](https://github.com/user-attachments/files/16398101/flow-analysis.patch)
Let me know once you have this PR updated with those changes and then let's sync. I need some help seeing some violations.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] NIFI-13248: Add Flow Analysis report menu to new ui [nifi]
Posted by "scottyaslan (via GitHub)" <gi...@apache.org>.
scottyaslan commented on code in PR #8974:
URL: https://github.com/apache/nifi/pull/8974#discussion_r1710346976
##########
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/flow-analysis-drawer.component.scss:
##########
@@ -0,0 +1,169 @@
+/*
+ * 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.
+ */
+
+ @use 'sass:map';
+ @use '@angular/material' as mat;
+
+ @mixin generate-theme($material-theme, $nifi-theme) {
+ // Get the color config from the theme.
+ $material-theme-color-config: mat.m2-get-color-config($material-theme);
+ $nifi-theme-color-config: mat.m2-get-color-config($nifi-theme);
+
+ // Get the color palette from the color-config.
+ $material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
+ $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
+
+ // Get hues from palette
+ $is-dark: map-get($material-theme-color-config, is-dark);
+ $material-theme-primary-palette-default: mat.m2-get-color-from-palette($material-theme-primary-palette);
+ $material-theme-primary-palette-lighter: mat.m2-get-color-from-palette($material-theme-primary-palette, lighter);
+ $material-theme-primary-palette-darker: mat.m2-get-color-from-palette($material-theme-primary-palette, darker);
+ $nifi-theme-surface-palette-darker: mat.m2-get-color-from-palette($nifi-theme-surface-palette, darker);
+ $nifi-theme-surface-palette-lighter: mat.m2-get-color-from-palette($nifi-theme-surface-palette, lighter);
+
+ $hover: var(--mat-menu-item-hover-state-layer-color);
+
+ .flow-analysis-drawer {
Review Comment:
Thanks @sardell. I have a few more improvements we can make:
[flow_analysis_rules_update.patch](https://github.com/user-attachments/files/16563945/flow_analysis_rules_update.patch)
Please apply this patch and let's discuss any questions, findings, or if anything is missing or mistakenly removed.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] NIFI-13248: Add Flow Analysis report menu to new ui [nifi]
Posted by "sardell (via GitHub)" <gi...@apache.org>.
sardell commented on code in PR #8974:
URL: https://github.com/apache/nifi/pull/8974#discussion_r1693993879
##########
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/flow-analysis-drawer.component.scss:
##########
@@ -0,0 +1,169 @@
+/*
+ * 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.
+ */
+
+ @use 'sass:map';
+ @use '@angular/material' as mat;
+
+ @mixin generate-theme($material-theme, $nifi-theme) {
+ // Get the color config from the theme.
+ $material-theme-color-config: mat.m2-get-color-config($material-theme);
+ $nifi-theme-color-config: mat.m2-get-color-config($nifi-theme);
+
+ // Get the color palette from the color-config.
+ $material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
+ $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
+
+ // Get hues from palette
+ $is-dark: map-get($material-theme-color-config, is-dark);
+ $material-theme-primary-palette-default: mat.m2-get-color-from-palette($material-theme-primary-palette);
+ $material-theme-primary-palette-lighter: mat.m2-get-color-from-palette($material-theme-primary-palette, lighter);
+ $material-theme-primary-palette-darker: mat.m2-get-color-from-palette($material-theme-primary-palette, darker);
+ $nifi-theme-surface-palette-darker: mat.m2-get-color-from-palette($nifi-theme-surface-palette, darker);
+ $nifi-theme-surface-palette-lighter: mat.m2-get-color-from-palette($nifi-theme-surface-palette, lighter);
+
+ $hover: var(--mat-menu-item-hover-state-layer-color);
+
+ .flow-analysis-drawer {
Review Comment:
@scottyaslan Thanks for taking a look! I appreciate the patch, however, it appears to be empty.
<img width="972" alt="Screenshot 2024-07-27 at 1 32 21 PM" src="https://github.com/user-attachments/assets/8d2ff652-58ac-4d47-9be3-2f4884362b33">
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] NIFI-13248: Add Flow Analysis report menu to new ui [nifi]
Posted by "scottyaslan (via GitHub)" <gi...@apache.org>.
scottyaslan commented on code in PR #8974:
URL: https://github.com/apache/nifi/pull/8974#discussion_r1694015646
##########
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/flow-analysis-drawer.component.scss:
##########
@@ -0,0 +1,169 @@
+/*
+ * 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.
+ */
+
+ @use 'sass:map';
+ @use '@angular/material' as mat;
+
+ @mixin generate-theme($material-theme, $nifi-theme) {
+ // Get the color config from the theme.
+ $material-theme-color-config: mat.m2-get-color-config($material-theme);
+ $nifi-theme-color-config: mat.m2-get-color-config($nifi-theme);
+
+ // Get the color palette from the color-config.
+ $material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
+ $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
+
+ // Get hues from palette
+ $is-dark: map-get($material-theme-color-config, is-dark);
+ $material-theme-primary-palette-default: mat.m2-get-color-from-palette($material-theme-primary-palette);
+ $material-theme-primary-palette-lighter: mat.m2-get-color-from-palette($material-theme-primary-palette, lighter);
+ $material-theme-primary-palette-darker: mat.m2-get-color-from-palette($material-theme-primary-palette, darker);
+ $nifi-theme-surface-palette-darker: mat.m2-get-color-from-palette($nifi-theme-surface-palette, darker);
+ $nifi-theme-surface-palette-lighter: mat.m2-get-color-from-palette($nifi-theme-surface-palette, lighter);
+
+ $hover: var(--mat-menu-item-hover-state-layer-color);
+
+ .flow-analysis-drawer {
Review Comment:
Sorry, try this one:
[flow_analysis_style_and_theme_updates.patch](https://github.com/user-attachments/files/16401438/flow_analysis_style_and_theme_updates.patch)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] NIFI-13248: Add Flow Analysis report menu to new ui [nifi]
Posted by "scottyaslan (via GitHub)" <gi...@apache.org>.
scottyaslan commented on code in PR #8974:
URL: https://github.com/apache/nifi/pull/8974#discussion_r1720294792
##########
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/flow-analysis-drawer.component.html:
##########
@@ -0,0 +1,258 @@
+<!--
+ ~ 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.
+ -->
+<div class="flow-analysis-drawer h-full w-96 p-5">
+ <component-context type="ProcessGroup" [name]="processGroupName" [id]="currentProcessGroupId"></component-context>
+ <div class="flex items-center w-full">
+ <ng-container *ngIf="isAnalysisPending">
+ <span *nifiSpinner="isAnalysisPending"></span>
+ <div class="ml-1">Rules analysis pending...</div>
+ </ng-container>
+ </div>
+ <div class="mt-5">
+ <div class="flex items-center justify-between">
+ <div>
+ <div>
+ <mat-checkbox class="text-sm" color="primary" [(ngModel)]="showEnforcedViolations">
+ Show enforced violations
+ </mat-checkbox>
+ </div>
+ <div>
+ <mat-checkbox color="primary" [(ngModel)]="showWarningViolations">
+ Show warning violations
+ </mat-checkbox>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="mt-5 mb-2" [hidden]="showEnforcedViolations() || showWarningViolations()">
+ <div class="flex flex-col gap-y-2">
+ <mat-expansion-panel hideToggle>
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ <div class="flex flex-1 justify-start">
+ <div>Enforced Rules ({{ enforcedRules.length }})</div>
+ </div>
+ </mat-panel-title>
+ </mat-expansion-panel-header>
+
+ @if (rules) {
+ @for (rule of enforcedRules; track rule.id) {
+ <div class="mb-2">
+ <div class="flex justify-between">
+ <div class="flex items-center">{{ rule.name }}</div>
+ <button
+ mat-icon-button
+ type="button"
+ [matMenuTriggerFor]="menu"
+ class="h-16 w-16 flex items-center justify-center">
+ <i class="fa fa-ellipsis-v"></i>
+ </button>
+ <mat-menu #menu="matMenu">
+ <button mat-menu-item (click)="openDocumentation(rule)">
+ <i class="fa fa-book mr-2 primary-color"></i>
+ View Documentation
+ </button>
+ <button mat-menu-item (click)="openRule(rule)">
+ <i class="fa fa-cog mr-2 primary-color"></i>
+ Edit Rule
+ </button>
+ </mat-menu>
+ </div>
+ @if (violationsMap.size > 0 && violationsMap.get(rule.id)) {
+ <div class="warn-color-darker text-sm">
+ <ng-container [ngPlural]="violationsMap.get(rule.id).length">
+ <ng-template ngPluralCase="=1"
+ >{{ violationsMap.get(rule.id).length }} violation</ng-template
+ >
+ <ng-template ngPluralCase="other"
+ >{{ violationsMap.get(rule.id).length }} violations</ng-template
+ >
+ </ng-container>
+ </div>
+ @for (violation of violationsMap.get(rule.id); track violation.scope) {
+ <div class="flex align-center justify-between mt-2">
+ <div class="flex flex-col items-start ml-2">
+ <div *ngIf="violation?.subjectPermissionDto?.canRead; else unauthorized">
+ {{ violation.subjectDisplayName }}
+ </div>
+ <span class="text-sm">
+ {{ violation.subjectId }}
+ </span>
+ </div>
+
+ <ng-template
+ [ngTemplateOutlet]="violationMenuTemplate"
+ [ngTemplateOutletContext]="{ violation: violation }"></ng-template>
+ </div>
+ }
+ }
+ </div>
+ }
+ }
+ </mat-expansion-panel>
+ <mat-expansion-panel hideToggle>
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ <div class="flex flex-1 justify-start">
+ <div>Warning Rules ({{ warningRules.length }})</div>
+ </div>
+ </mat-panel-title>
+ </mat-expansion-panel-header>
+
+ @if (rules) {
+ @for (rule of warningRules; track rule.id) {
+ <div>
+ <div class="flex justify-between">
+ <div class="flex items-center">{{ rule.name }}</div>
+ <button
+ mat-icon-button
+ type="button"
+ [matMenuTriggerFor]="menu"
+ class="h-16 w-16 flex items-center justify-center">
+ <i class="fa fa-ellipsis-v"></i>
+ </button>
+ <mat-menu #menu="matMenu" class="rule-menu w-52 shadow-lg">
+ <button mat-menu-item (click)="openDocumentation(rule)">
+ <i class="fa fa-book mr-2 primary-color"></i>
+ View Documentation
+ </button>
+ <button mat-menu-item (click)="openRule(rule)">
+ <i class="fa fa-cog mr-2 primary-color"></i>
+ Edit Rule
+ </button>
+ </mat-menu>
+ </div>
+ @if (violationsMap.size > 0 && violationsMap.get(rule.id)) {
+ <div class="primary-color text-sm">
+ <ng-container [ngPlural]="violationsMap.get(rule.id).length">
+ <ng-template ngPluralCase="=1"
+ >{{ violationsMap.get(rule.id).length }} violation</ng-template
+ >
+ <ng-template ngPluralCase="other"
+ >{{ violationsMap.get(rule.id).length }} violations</ng-template
+ >
+ </ng-container>
+ </div>
+ <ul>
+ @for (violation of violationsMap.get(rule.id); track violation.scope) {
+ <li class="flex align-center justify-between mt-2">
+ <div class="flex flex-col items-start ml-2">
+ <div *ngIf="violation?.subjectPermissionDto?.canRead; else unauthorized">
+ {{ violation.subjectDisplayName }}
+ </div>
+ <span class="text-sm">
+ {{ violation.subjectId }}
+ </span>
+ </div>
+
+ <ng-template
+ [ngTemplateOutlet]="violationMenuTemplate"
+ [ngTemplateOutletContext]="{ violation: violation }"></ng-template>
+ </li>
+ }
+ </ul>
+ }
+ </div>
+ }
+ }
+ </mat-expansion-panel>
+ </div>
+ </div>
+
+ <div class="mt-5 mb-2" [hidden]="!showEnforcedViolations()" [class.mb-5]="!showWarningViolations()">
+ <div class="border-b pb-2">
+ <div>
+ Enforced Violations
+ <span>({{ enforcedViolations.length }})</span>
+ </div>
+ </div>
+
+ <ul>
+ @for (violation of enforcedViolations; track violation.scope) {
+ <li class="mt-2 pb-2 border-b border-white last-of-type:border-0">
+ <div class="warn-color-darker">{{ getRuleName(violation.ruleId) }}</div>
+ <div class="flex align-center justify-between ml-2">
+ <div class="flex flex-col items-start">
+ <div *ngIf="violation?.subjectPermissionDto?.canRead; else unauthorized">
+ {{ violation.subjectDisplayName }}
+ </div>
+ <span class="text-sm">{{ violation.subjectId }}</span>
+ </div>
+
+ <ng-template [ngTemplateOutlet]="violationMenuTemplate"
+ [ngTemplateOutletContext]="{ violation: violation }"></ng-template>
+ </div>
+ </li>
+ }
+ </ul>
+ </div>
+
+ <div class="mt-5 mb-2" [hidden]="!showWarningViolations()">
+ <div class="border-b pb-2">
Review Comment:
```suggestion
<div class="border-b mb-2">
```
##########
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/flow-analysis-drawer.component.html:
##########
@@ -0,0 +1,258 @@
+<!--
+ ~ 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.
+ -->
+<div class="flow-analysis-drawer h-full w-96 p-5">
+ <component-context type="ProcessGroup" [name]="processGroupName" [id]="currentProcessGroupId"></component-context>
+ <div class="flex items-center w-full">
+ <ng-container *ngIf="isAnalysisPending">
+ <span *nifiSpinner="isAnalysisPending"></span>
+ <div class="ml-1">Rules analysis pending...</div>
+ </ng-container>
+ </div>
+ <div class="mt-5">
+ <div class="flex items-center justify-between">
+ <div>
+ <div>
+ <mat-checkbox class="text-sm" color="primary" [(ngModel)]="showEnforcedViolations">
+ Show enforced violations
+ </mat-checkbox>
+ </div>
+ <div>
+ <mat-checkbox color="primary" [(ngModel)]="showWarningViolations">
+ Show warning violations
+ </mat-checkbox>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="mt-5 mb-2" [hidden]="showEnforcedViolations() || showWarningViolations()">
+ <div class="flex flex-col gap-y-2">
+ <mat-expansion-panel hideToggle>
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ <div class="flex flex-1 justify-start">
+ <div>Enforced Rules ({{ enforcedRules.length }})</div>
+ </div>
+ </mat-panel-title>
+ </mat-expansion-panel-header>
+
+ @if (rules) {
+ @for (rule of enforcedRules; track rule.id) {
+ <div class="mb-2">
+ <div class="flex justify-between">
+ <div class="flex items-center">{{ rule.name }}</div>
+ <button
+ mat-icon-button
+ type="button"
+ [matMenuTriggerFor]="menu"
+ class="h-16 w-16 flex items-center justify-center">
+ <i class="fa fa-ellipsis-v"></i>
+ </button>
+ <mat-menu #menu="matMenu">
+ <button mat-menu-item (click)="openDocumentation(rule)">
+ <i class="fa fa-book mr-2 primary-color"></i>
+ View Documentation
+ </button>
+ <button mat-menu-item (click)="openRule(rule)">
+ <i class="fa fa-cog mr-2 primary-color"></i>
+ Edit Rule
+ </button>
+ </mat-menu>
+ </div>
+ @if (violationsMap.size > 0 && violationsMap.get(rule.id)) {
+ <div class="warn-color-darker text-sm">
+ <ng-container [ngPlural]="violationsMap.get(rule.id).length">
+ <ng-template ngPluralCase="=1"
+ >{{ violationsMap.get(rule.id).length }} violation</ng-template
+ >
+ <ng-template ngPluralCase="other"
+ >{{ violationsMap.get(rule.id).length }} violations</ng-template
+ >
+ </ng-container>
+ </div>
+ @for (violation of violationsMap.get(rule.id); track violation.scope) {
+ <div class="flex align-center justify-between mt-2">
+ <div class="flex flex-col items-start ml-2">
+ <div *ngIf="violation?.subjectPermissionDto?.canRead; else unauthorized">
+ {{ violation.subjectDisplayName }}
+ </div>
+ <span class="text-sm">
+ {{ violation.subjectId }}
+ </span>
+ </div>
+
+ <ng-template
+ [ngTemplateOutlet]="violationMenuTemplate"
+ [ngTemplateOutletContext]="{ violation: violation }"></ng-template>
+ </div>
+ }
+ }
+ </div>
+ }
+ }
+ </mat-expansion-panel>
+ <mat-expansion-panel hideToggle>
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ <div class="flex flex-1 justify-start">
+ <div>Warning Rules ({{ warningRules.length }})</div>
+ </div>
+ </mat-panel-title>
+ </mat-expansion-panel-header>
+
+ @if (rules) {
+ @for (rule of warningRules; track rule.id) {
+ <div>
+ <div class="flex justify-between">
+ <div class="flex items-center">{{ rule.name }}</div>
+ <button
+ mat-icon-button
+ type="button"
+ [matMenuTriggerFor]="menu"
+ class="h-16 w-16 flex items-center justify-center">
+ <i class="fa fa-ellipsis-v"></i>
+ </button>
+ <mat-menu #menu="matMenu" class="rule-menu w-52 shadow-lg">
+ <button mat-menu-item (click)="openDocumentation(rule)">
+ <i class="fa fa-book mr-2 primary-color"></i>
+ View Documentation
+ </button>
+ <button mat-menu-item (click)="openRule(rule)">
+ <i class="fa fa-cog mr-2 primary-color"></i>
+ Edit Rule
+ </button>
+ </mat-menu>
+ </div>
+ @if (violationsMap.size > 0 && violationsMap.get(rule.id)) {
+ <div class="primary-color text-sm">
+ <ng-container [ngPlural]="violationsMap.get(rule.id).length">
+ <ng-template ngPluralCase="=1"
+ >{{ violationsMap.get(rule.id).length }} violation</ng-template
+ >
+ <ng-template ngPluralCase="other"
+ >{{ violationsMap.get(rule.id).length }} violations</ng-template
+ >
+ </ng-container>
+ </div>
+ <ul>
+ @for (violation of violationsMap.get(rule.id); track violation.scope) {
+ <li class="flex align-center justify-between mt-2">
+ <div class="flex flex-col items-start ml-2">
+ <div *ngIf="violation?.subjectPermissionDto?.canRead; else unauthorized">
+ {{ violation.subjectDisplayName }}
+ </div>
+ <span class="text-sm">
+ {{ violation.subjectId }}
+ </span>
+ </div>
+
+ <ng-template
+ [ngTemplateOutlet]="violationMenuTemplate"
+ [ngTemplateOutletContext]="{ violation: violation }"></ng-template>
+ </li>
+ }
+ </ul>
+ }
+ </div>
+ }
+ }
+ </mat-expansion-panel>
+ </div>
+ </div>
+
+ <div class="mt-5 mb-2" [hidden]="!showEnforcedViolations()" [class.mb-5]="!showWarningViolations()">
+ <div class="border-b pb-2">
+ <div>
+ Enforced Violations
+ <span>({{ enforcedViolations.length }})</span>
+ </div>
+ </div>
+
+ <ul>
+ @for (violation of enforcedViolations; track violation.scope) {
+ <li class="mt-2 pb-2 border-b border-white last-of-type:border-0">
+ <div class="warn-color-darker">{{ getRuleName(violation.ruleId) }}</div>
+ <div class="flex align-center justify-between ml-2">
+ <div class="flex flex-col items-start">
+ <div *ngIf="violation?.subjectPermissionDto?.canRead; else unauthorized">
+ {{ violation.subjectDisplayName }}
+ </div>
+ <span class="text-sm">{{ violation.subjectId }}</span>
+ </div>
+
+ <ng-template [ngTemplateOutlet]="violationMenuTemplate"
+ [ngTemplateOutletContext]="{ violation: violation }"></ng-template>
+ </div>
+ </li>
+ }
+ </ul>
+ </div>
+
+ <div class="mt-5 mb-2" [hidden]="!showWarningViolations()">
+ <div class="border-b pb-2">
+ <div>
+ Warning Violations
+ <span>({{ warningViolations.length }})</span>
+ </div>
+ </div>
+
+ <ul>
+ @for (violation of warningViolations; track violation.scope) {
+ <li class="mt-2 pb-2 border-b border-white last-of-type:border-0">
Review Comment:
```suggestion
<li class="mt-2 mb-2 border-b border-white last-of-type:border-0">
```
##########
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/flow-analysis-drawer.component.html:
##########
@@ -0,0 +1,258 @@
+<!--
+ ~ 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.
+ -->
+<div class="flow-analysis-drawer h-full w-96 p-5">
+ <component-context type="ProcessGroup" [name]="processGroupName" [id]="currentProcessGroupId"></component-context>
+ <div class="flex items-center w-full">
+ <ng-container *ngIf="isAnalysisPending">
+ <span *nifiSpinner="isAnalysisPending"></span>
+ <div class="ml-1">Rules analysis pending...</div>
+ </ng-container>
+ </div>
+ <div class="mt-5">
+ <div class="flex items-center justify-between">
+ <div>
+ <div>
+ <mat-checkbox class="text-sm" color="primary" [(ngModel)]="showEnforcedViolations">
+ Show enforced violations
+ </mat-checkbox>
+ </div>
+ <div>
+ <mat-checkbox color="primary" [(ngModel)]="showWarningViolations">
+ Show warning violations
+ </mat-checkbox>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="mt-5 mb-2" [hidden]="showEnforcedViolations() || showWarningViolations()">
+ <div class="flex flex-col gap-y-2">
+ <mat-expansion-panel hideToggle>
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ <div class="flex flex-1 justify-start">
+ <div>Enforced Rules ({{ enforcedRules.length }})</div>
+ </div>
+ </mat-panel-title>
+ </mat-expansion-panel-header>
+
+ @if (rules) {
+ @for (rule of enforcedRules; track rule.id) {
+ <div class="mb-2">
+ <div class="flex justify-between">
+ <div class="flex items-center">{{ rule.name }}</div>
+ <button
+ mat-icon-button
+ type="button"
+ [matMenuTriggerFor]="menu"
+ class="h-16 w-16 flex items-center justify-center">
+ <i class="fa fa-ellipsis-v"></i>
+ </button>
+ <mat-menu #menu="matMenu">
+ <button mat-menu-item (click)="openDocumentation(rule)">
+ <i class="fa fa-book mr-2 primary-color"></i>
+ View Documentation
+ </button>
+ <button mat-menu-item (click)="openRule(rule)">
+ <i class="fa fa-cog mr-2 primary-color"></i>
+ Edit Rule
+ </button>
+ </mat-menu>
+ </div>
+ @if (violationsMap.size > 0 && violationsMap.get(rule.id)) {
+ <div class="warn-color-darker text-sm">
+ <ng-container [ngPlural]="violationsMap.get(rule.id).length">
+ <ng-template ngPluralCase="=1"
+ >{{ violationsMap.get(rule.id).length }} violation</ng-template
+ >
+ <ng-template ngPluralCase="other"
+ >{{ violationsMap.get(rule.id).length }} violations</ng-template
+ >
+ </ng-container>
+ </div>
+ @for (violation of violationsMap.get(rule.id); track violation.scope) {
+ <div class="flex align-center justify-between mt-2">
+ <div class="flex flex-col items-start ml-2">
+ <div *ngIf="violation?.subjectPermissionDto?.canRead; else unauthorized">
+ {{ violation.subjectDisplayName }}
+ </div>
+ <span class="text-sm">
+ {{ violation.subjectId }}
+ </span>
+ </div>
+
+ <ng-template
+ [ngTemplateOutlet]="violationMenuTemplate"
+ [ngTemplateOutletContext]="{ violation: violation }"></ng-template>
+ </div>
+ }
+ }
+ </div>
+ }
+ }
+ </mat-expansion-panel>
+ <mat-expansion-panel hideToggle>
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ <div class="flex flex-1 justify-start">
+ <div>Warning Rules ({{ warningRules.length }})</div>
+ </div>
+ </mat-panel-title>
+ </mat-expansion-panel-header>
+
+ @if (rules) {
+ @for (rule of warningRules; track rule.id) {
+ <div>
+ <div class="flex justify-between">
+ <div class="flex items-center">{{ rule.name }}</div>
+ <button
+ mat-icon-button
+ type="button"
+ [matMenuTriggerFor]="menu"
+ class="h-16 w-16 flex items-center justify-center">
+ <i class="fa fa-ellipsis-v"></i>
+ </button>
+ <mat-menu #menu="matMenu" class="rule-menu w-52 shadow-lg">
+ <button mat-menu-item (click)="openDocumentation(rule)">
+ <i class="fa fa-book mr-2 primary-color"></i>
+ View Documentation
+ </button>
+ <button mat-menu-item (click)="openRule(rule)">
+ <i class="fa fa-cog mr-2 primary-color"></i>
+ Edit Rule
+ </button>
+ </mat-menu>
+ </div>
+ @if (violationsMap.size > 0 && violationsMap.get(rule.id)) {
+ <div class="primary-color text-sm">
+ <ng-container [ngPlural]="violationsMap.get(rule.id).length">
+ <ng-template ngPluralCase="=1"
+ >{{ violationsMap.get(rule.id).length }} violation</ng-template
+ >
+ <ng-template ngPluralCase="other"
+ >{{ violationsMap.get(rule.id).length }} violations</ng-template
+ >
+ </ng-container>
+ </div>
+ <ul>
+ @for (violation of violationsMap.get(rule.id); track violation.scope) {
+ <li class="flex align-center justify-between mt-2">
+ <div class="flex flex-col items-start ml-2">
+ <div *ngIf="violation?.subjectPermissionDto?.canRead; else unauthorized">
+ {{ violation.subjectDisplayName }}
+ </div>
+ <span class="text-sm">
+ {{ violation.subjectId }}
+ </span>
+ </div>
+
+ <ng-template
+ [ngTemplateOutlet]="violationMenuTemplate"
+ [ngTemplateOutletContext]="{ violation: violation }"></ng-template>
+ </li>
+ }
+ </ul>
+ }
+ </div>
+ }
+ }
+ </mat-expansion-panel>
+ </div>
+ </div>
+
+ <div class="mt-5 mb-2" [hidden]="!showEnforcedViolations()" [class.mb-5]="!showWarningViolations()">
+ <div class="border-b pb-2">
+ <div>
+ Enforced Violations
+ <span>({{ enforcedViolations.length }})</span>
+ </div>
+ </div>
+
+ <ul>
+ @for (violation of enforcedViolations; track violation.scope) {
+ <li class="mt-2 pb-2 border-b border-white last-of-type:border-0">
Review Comment:
```suggestion
<li class="mt-2 mb-2 border-b border-white last-of-type:border-0">
```
##########
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/flow-analysis-drawer.component.html:
##########
@@ -0,0 +1,258 @@
+<!--
+ ~ 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.
+ -->
+<div class="flow-analysis-drawer h-full w-96 p-5">
+ <component-context type="ProcessGroup" [name]="processGroupName" [id]="currentProcessGroupId"></component-context>
+ <div class="flex items-center w-full">
+ <ng-container *ngIf="isAnalysisPending">
+ <span *nifiSpinner="isAnalysisPending"></span>
+ <div class="ml-1">Rules analysis pending...</div>
+ </ng-container>
+ </div>
+ <div class="mt-5">
+ <div class="flex items-center justify-between">
+ <div>
+ <div>
+ <mat-checkbox class="text-sm" color="primary" [(ngModel)]="showEnforcedViolations">
+ Show enforced violations
+ </mat-checkbox>
+ </div>
+ <div>
+ <mat-checkbox color="primary" [(ngModel)]="showWarningViolations">
+ Show warning violations
+ </mat-checkbox>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="mt-5 mb-2" [hidden]="showEnforcedViolations() || showWarningViolations()">
+ <div class="flex flex-col gap-y-2">
+ <mat-expansion-panel hideToggle>
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ <div class="flex flex-1 justify-start">
+ <div>Enforced Rules ({{ enforcedRules.length }})</div>
+ </div>
+ </mat-panel-title>
+ </mat-expansion-panel-header>
+
+ @if (rules) {
+ @for (rule of enforcedRules; track rule.id) {
+ <div class="mb-2">
+ <div class="flex justify-between">
+ <div class="flex items-center">{{ rule.name }}</div>
+ <button
+ mat-icon-button
+ type="button"
+ [matMenuTriggerFor]="menu"
+ class="h-16 w-16 flex items-center justify-center">
+ <i class="fa fa-ellipsis-v"></i>
+ </button>
+ <mat-menu #menu="matMenu">
+ <button mat-menu-item (click)="openDocumentation(rule)">
+ <i class="fa fa-book mr-2 primary-color"></i>
+ View Documentation
+ </button>
+ <button mat-menu-item (click)="openRule(rule)">
+ <i class="fa fa-cog mr-2 primary-color"></i>
+ Edit Rule
+ </button>
+ </mat-menu>
+ </div>
+ @if (violationsMap.size > 0 && violationsMap.get(rule.id)) {
+ <div class="warn-color-darker text-sm">
+ <ng-container [ngPlural]="violationsMap.get(rule.id).length">
+ <ng-template ngPluralCase="=1"
+ >{{ violationsMap.get(rule.id).length }} violation</ng-template
+ >
+ <ng-template ngPluralCase="other"
+ >{{ violationsMap.get(rule.id).length }} violations</ng-template
+ >
+ </ng-container>
+ </div>
+ @for (violation of violationsMap.get(rule.id); track violation.scope) {
+ <div class="flex align-center justify-between mt-2">
+ <div class="flex flex-col items-start ml-2">
+ <div *ngIf="violation?.subjectPermissionDto?.canRead; else unauthorized">
+ {{ violation.subjectDisplayName }}
+ </div>
+ <span class="text-sm">
+ {{ violation.subjectId }}
+ </span>
+ </div>
+
+ <ng-template
+ [ngTemplateOutlet]="violationMenuTemplate"
+ [ngTemplateOutletContext]="{ violation: violation }"></ng-template>
+ </div>
+ }
+ }
+ </div>
+ }
+ }
+ </mat-expansion-panel>
+ <mat-expansion-panel hideToggle>
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ <div class="flex flex-1 justify-start">
+ <div>Warning Rules ({{ warningRules.length }})</div>
+ </div>
+ </mat-panel-title>
+ </mat-expansion-panel-header>
+
+ @if (rules) {
+ @for (rule of warningRules; track rule.id) {
+ <div>
+ <div class="flex justify-between">
+ <div class="flex items-center">{{ rule.name }}</div>
+ <button
+ mat-icon-button
+ type="button"
+ [matMenuTriggerFor]="menu"
+ class="h-16 w-16 flex items-center justify-center">
+ <i class="fa fa-ellipsis-v"></i>
+ </button>
+ <mat-menu #menu="matMenu" class="rule-menu w-52 shadow-lg">
+ <button mat-menu-item (click)="openDocumentation(rule)">
+ <i class="fa fa-book mr-2 primary-color"></i>
+ View Documentation
+ </button>
+ <button mat-menu-item (click)="openRule(rule)">
+ <i class="fa fa-cog mr-2 primary-color"></i>
+ Edit Rule
+ </button>
+ </mat-menu>
+ </div>
+ @if (violationsMap.size > 0 && violationsMap.get(rule.id)) {
+ <div class="primary-color text-sm">
+ <ng-container [ngPlural]="violationsMap.get(rule.id).length">
+ <ng-template ngPluralCase="=1"
+ >{{ violationsMap.get(rule.id).length }} violation</ng-template
+ >
+ <ng-template ngPluralCase="other"
+ >{{ violationsMap.get(rule.id).length }} violations</ng-template
+ >
+ </ng-container>
+ </div>
+ <ul>
+ @for (violation of violationsMap.get(rule.id); track violation.scope) {
+ <li class="flex align-center justify-between mt-2">
+ <div class="flex flex-col items-start ml-2">
+ <div *ngIf="violation?.subjectPermissionDto?.canRead; else unauthorized">
+ {{ violation.subjectDisplayName }}
+ </div>
+ <span class="text-sm">
+ {{ violation.subjectId }}
+ </span>
+ </div>
+
+ <ng-template
+ [ngTemplateOutlet]="violationMenuTemplate"
+ [ngTemplateOutletContext]="{ violation: violation }"></ng-template>
+ </li>
+ }
+ </ul>
+ }
+ </div>
+ }
+ }
+ </mat-expansion-panel>
+ </div>
+ </div>
+
+ <div class="mt-5 mb-2" [hidden]="!showEnforcedViolations()" [class.mb-5]="!showWarningViolations()">
+ <div class="border-b pb-2">
Review Comment:
```suggestion
<div class="border-b mb-2">
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] NIFI-13248: Add Flow Analysis report menu to new ui [nifi]
Posted by "scottyaslan (via GitHub)" <gi...@apache.org>.
scottyaslan commented on code in PR #8974:
URL: https://github.com/apache/nifi/pull/8974#discussion_r1710346976
##########
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/flow-analysis-drawer.component.scss:
##########
@@ -0,0 +1,169 @@
+/*
+ * 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.
+ */
+
+ @use 'sass:map';
+ @use '@angular/material' as mat;
+
+ @mixin generate-theme($material-theme, $nifi-theme) {
+ // Get the color config from the theme.
+ $material-theme-color-config: mat.m2-get-color-config($material-theme);
+ $nifi-theme-color-config: mat.m2-get-color-config($nifi-theme);
+
+ // Get the color palette from the color-config.
+ $material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
+ $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
+
+ // Get hues from palette
+ $is-dark: map-get($material-theme-color-config, is-dark);
+ $material-theme-primary-palette-default: mat.m2-get-color-from-palette($material-theme-primary-palette);
+ $material-theme-primary-palette-lighter: mat.m2-get-color-from-palette($material-theme-primary-palette, lighter);
+ $material-theme-primary-palette-darker: mat.m2-get-color-from-palette($material-theme-primary-palette, darker);
+ $nifi-theme-surface-palette-darker: mat.m2-get-color-from-palette($nifi-theme-surface-palette, darker);
+ $nifi-theme-surface-palette-lighter: mat.m2-get-color-from-palette($nifi-theme-surface-palette, lighter);
+
+ $hover: var(--mat-menu-item-hover-state-layer-color);
+
+ .flow-analysis-drawer {
Review Comment:
Thanks @sardell. I have a few more improvements we can make:
[flow_analysis_rules_update.patch](https://github.com/user-attachments/files/16563833/flow_analysis_rules_update.patch)
Please apply this patch and let's discuss any questions, findings, or if anything is missing or mistakenly removed.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] NIFI-13248: Add Flow Analysis report menu to new ui [nifi]
Posted by "scottyaslan (via GitHub)" <gi...@apache.org>.
scottyaslan commented on code in PR #8974:
URL: https://github.com/apache/nifi/pull/8974#discussion_r1711626236
##########
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.html:
##########
@@ -18,6 +18,17 @@
<div class="flex flex-col h-full">
<fd-header></fd-header>
<div class="flex-1">
+ <mat-drawer-container #flowAnalysisDrawer class="flex-1" style="position: unset">
Review Comment:
I think we want to use a sidenav and not a drawer. Also, The background color is blending in with the expansion panels. I think we want to go with a darker color like:
```
mat-sidenav {
background-color: if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
);
}
```
##########
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/flow-analysis-drawer.component.html:
##########
@@ -0,0 +1,293 @@
+<!--
+ ~ 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.
+ -->
+<div class="flow-analysis-drawer p-5">
+ <div class="flex items-center w-full">
+ <ng-container *ngIf="isAnalysisPending">
+ <span *nifiSpinner="isAnalysisPending"></span>
+ <div class="ml-1">Rules analysis pending...</div>
+ </ng-container>
+ </div>
+ <div class="mt-6">
+ <div class="flex items-center justify-between">
+ <div class="primary-color text-lg">Flow Guide</div>
+ <div>
+ <div>
+ <mat-checkbox color="primary" [(ngModel)]="showEnforcedViolations"
+ >Show enforced violations</mat-checkbox
+ >
+ </div>
+ <div>
+ <mat-checkbox color="primary" [(ngModel)]="showWarningViolations"
+ >Show warning violations</mat-checkbox
+ >
+ </div>
+ </div>
+ </div>
+ <div class="flow-analysis-flow-guide-breadcrumb text-sm">NiFi Flow</div>
Review Comment:
The PG name is hard coded even after you apply my latest patch. I think we should update this in both the old and the new UI. The rules and the violations reported are (I think) scoped to the PG the user is currently in so we should give the user context. Also, considering information architecture and page layouts etc. this information should be above everything else:
<img width="1340" alt="Screenshot 2024-08-09 at 10 52 26 AM" src="https://github.com/user-attachments/assets/f5ec42fe-a2b6-4399-ac2b-33e3a8e01297">
In the new UI we should be able to get the PG id off of the URL. There is a selector for that already called selectProcessGroupIdFromRoute. Then you should be able to get the PG from the store via the selectProcessGroup selector. Then you should be able to display the UUID of the PG and the name of the PG and have it be displayed with the correct context no matter where you are in the flow.
##########
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/flow-analysis-drawer.component.html:
##########
@@ -0,0 +1,293 @@
+<!--
+ ~ 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.
+ -->
+<div class="flow-analysis-drawer p-5">
Review Comment:
The sidenav width is set by it's content. I think we need to give the users a little more room:
```suggestion
<div class="flow-analysis-drawer w-96 p-5">
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] NIFI-13248: Add Flow Analysis report menu to new ui [nifi]
Posted by "scottyaslan (via GitHub)" <gi...@apache.org>.
scottyaslan commented on code in PR #8974:
URL: https://github.com/apache/nifi/pull/8974#discussion_r1711679279
##########
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.html:
##########
@@ -127,6 +127,16 @@
</div>
<div class="flex">
<search [currentProcessGroupId]="currentProcessGroupId"></search>
+ <button
+ class="flow-analysis-notification w-8 border-l flex justify-center items-center"
+ (click)="openFlowAnalysisMenu()">
+ <i
+ class="fa fa-lightbulb-o flow-analysis-notification-icon w-[24px] h-[24px] flex justify-center items-center"
+ [ngClass]="flowAnalysisNotificationClass"
+ [class.rounded-xl]="
Review Comment:
Why rounded background colors? We have a very similar UX for the bulletins which is right next to the flow analysis. We should follow that pattern.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] NIFI-13248: Add Flow Analysis report menu to new ui [nifi]
Posted by "scottyaslan (via GitHub)" <gi...@apache.org>.
scottyaslan commented on code in PR #8974:
URL: https://github.com/apache/nifi/pull/8974#discussion_r1711692805
##########
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.html:
##########
@@ -18,6 +18,17 @@
<div class="flex flex-col h-full">
<fd-header></fd-header>
<div class="flex-1">
+ <mat-drawer-container #flowAnalysisDrawer class="flex-1" style="position: unset">
Review Comment:
This change is included in my latest [patch](https://github.com/apache/nifi/pull/8974#discussion_r1710346976).
##########
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/flow-analysis-drawer.component.html:
##########
@@ -0,0 +1,293 @@
+<!--
+ ~ 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.
+ -->
+<div class="flow-analysis-drawer p-5">
Review Comment:
This change is included in my latest [patch](https://github.com/apache/nifi/pull/8974#discussion_r1710346976).
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] NIFI-13248: Add Flow Analysis report menu to new ui [nifi]
Posted by "scottyaslan (via GitHub)" <gi...@apache.org>.
scottyaslan merged PR #8974:
URL: https://github.com/apache/nifi/pull/8974
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] NIFI-13248: Add Flow Analysis report menu to new ui [nifi]
Posted by "sardell (via GitHub)" <gi...@apache.org>.
sardell commented on PR #8974:
URL: https://github.com/apache/nifi/pull/8974#issuecomment-2260436862
@scottyaslan Thanks for providing that helpful patch! I applied it to this PR and made a follow-up commit adding back a few missing styles. Whenever you have a chance, could you please take another look?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] NIFI-13248: Add Flow Analysis report menu to new ui [nifi]
Posted by "scottyaslan (via GitHub)" <gi...@apache.org>.
scottyaslan commented on code in PR #8974:
URL: https://github.com/apache/nifi/pull/8974#discussion_r1711724055
##########
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.html:
##########
@@ -127,6 +127,16 @@
</div>
<div class="flex">
<search [currentProcessGroupId]="currentProcessGroupId"></search>
+ <button
+ class="flow-analysis-notification w-8 border-l flex justify-center items-center"
+ (click)="openFlowAnalysisMenu()">
+ <i
+ class="fa fa-lightbulb-o flow-analysis-notification-icon w-[24px] h-[24px] flex justify-center items-center"
Review Comment:
I am really not a fan of this icon. Like, what does it even represent? An idea? I think we can update this to something a little more intuitive to help the user grok what it is.
```suggestion
class="fa fa-medkit flow-analysis-notification-icon w-[24px] h-[24px] flex justify-center items-center"
```
This would likely need to be updated in the old UI as well.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] NIFI-13248: Add Flow Analysis report menu to new ui [nifi]
Posted by "scottyaslan (via GitHub)" <gi...@apache.org>.
scottyaslan commented on code in PR #8974:
URL: https://github.com/apache/nifi/pull/8974#discussion_r1711724055
##########
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.html:
##########
@@ -127,6 +127,16 @@
</div>
<div class="flex">
<search [currentProcessGroupId]="currentProcessGroupId"></search>
+ <button
+ class="flow-analysis-notification w-8 border-l flex justify-center items-center"
+ (click)="openFlowAnalysisMenu()">
+ <i
+ class="fa fa-lightbulb-o flow-analysis-notification-icon w-[24px] h-[24px] flex justify-center items-center"
Review Comment:
I am really not a fan of this icon. Like, what does it even represent? An idea? I think we can update this to something a little more intuitive to help the user grok what it is.
```suggestion
class="fa fa-medkit flow-analysis-notification-icon w-[24px] h-[24px] flex justify-center items-center"
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] NIFI-13248: Add Flow Analysis report menu to new ui [nifi]
Posted by "scottyaslan (via GitHub)" <gi...@apache.org>.
scottyaslan commented on code in PR #8974:
URL: https://github.com/apache/nifi/pull/8974#discussion_r1711724055
##########
nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.html:
##########
@@ -127,6 +127,16 @@
</div>
<div class="flex">
<search [currentProcessGroupId]="currentProcessGroupId"></search>
+ <button
+ class="flow-analysis-notification w-8 border-l flex justify-center items-center"
+ (click)="openFlowAnalysisMenu()">
+ <i
+ class="fa fa-lightbulb-o flow-analysis-notification-icon w-[24px] h-[24px] flex justify-center items-center"
Review Comment:
I am really not a fan of this icon. Like, what does it even represent? An idea? I think we can update this to something a little more intuitive to help the user grok what it is.
```suggestion
class="fa fa-medkit flow-analysis-notification-icon w-[24px] h-[24px] flex justify-center items-center"
```
<img width="1340" alt="Screenshot 2024-08-09 at 12 03 01 PM" src="https://github.com/user-attachments/assets/c2f99f92-b773-49e9-a6ec-e3d1e077d814">
This would likely need to be updated in the old UI as well.
If you don't like the medkit icon here are some other 'medical' icons from font awesome. I think any one of these would be more appropriate than a light bulb.
<img width="1225" alt="Screenshot 2024-08-09 at 12 00 26 PM" src="https://github.com/user-attachments/assets/d2cb021a-3d31-4bd0-8eaf-d1738597fae0">
Or maybe the bug icon:
<img width="1335" alt="Screenshot 2024-08-09 at 12 03 14 PM" src="https://github.com/user-attachments/assets/4fa7016a-f1c7-4a40-adc0-7b4823a8cb9e">
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@nifi.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org