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: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
