scottyaslan commented on code in PR #9855: URL: https://github.com/apache/nifi/pull/9855#discussion_r2308612580
########## nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/pages/expolorer/feature/explorer.component.ts: ########## @@ -0,0 +1,237 @@ +/* + * 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. + */ + +import { Component, OnInit } from '@angular/core'; +import { + selectDropletIdFromRoute, + selectDroplets, + selectDropletState +} from '../../../state/droplets/droplets.selectors'; +import { + loadDroplets, + openDeleteDropletDialog, + openExportFlowVersionDialog, + openFlowVersionsDialog, + openImportNewFlowDialog, + openImportNewFlowVersionDialog, + selectDroplet +} from '../../../state/droplets/droplets.actions'; +import { Droplet } from '../../../state/droplets'; +import { Store } from '@ngrx/store'; +import { MatTableDataSource } from '@angular/material/table'; +import { Observable } from 'rxjs'; +import { Sort } from '@angular/material/sort'; +import { NiFiCommon, selectQueryParams } from '@nifi/shared'; +import { loadBuckets } from '../../../state/buckets/buckets.actions'; +import { Bucket } from '../../../state/buckets'; +import { selectBuckets } from '../../../state/buckets/buckets.selectors'; +import { DropletTableFilterContext } from './ui/droplet-table-filter/droplet-table-filter.component'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; +import { ActivatedRoute, Router } from '@angular/router'; + +import { CommonModule } from '@angular/common'; +import { MatTableModule } from '@angular/material/table'; +import { MatSortModule } from '@angular/material/sort'; +import { MatMenuModule } from '@angular/material/menu'; +import { DropletTableFilterComponent } from './ui/droplet-table-filter/droplet-table-filter.component'; +import { MatButtonModule } from '@angular/material/button'; +import { DropletTableComponent } from './ui/droplet-table/droplet-table.component'; + +@Component({ + selector: 'explorer', + imports: [ + CommonModule, + MatTableModule, + MatSortModule, + MatMenuModule, + DropletTableFilterComponent, + MatButtonModule, + MatButtonModule, + DropletTableComponent + ], + templateUrl: './explorer.component.html', + styleUrl: './explorer.component.scss', + standalone: true +}) +export class ExplorerComponent implements OnInit { + droplets$: Observable<Droplet[]>; + buckets$: Observable<Bucket[]>; + buckets: Bucket[] = []; + dataSource: MatTableDataSource<Droplet> = new MatTableDataSource<Droplet>(); + displayedColumns: string[] = [ + 'name', + 'type', + 'bucketName', + 'bucketIdentifier', + 'identifier', + 'versions', + 'actions' + ]; + sort: Sort = { + active: 'name', + direction: 'asc' + }; + filterTerm = ''; + filterBucket = 'All'; + filterColumn = ''; + dropletsState$ = this.store.select(selectDropletState); + selectedDropletId$ = this.store.select(selectDropletIdFromRoute); + + constructor( + private store: Store, + private nifiCommon: NiFiCommon, + private router: Router, + private activatedRoute: ActivatedRoute + ) { + this.droplets$ = this.store.select(selectDroplets).pipe(takeUntilDestroyed()); + this.buckets$ = this.store.select(selectBuckets).pipe(takeUntilDestroyed()); + this.store + .select(selectQueryParams) + .pipe(takeUntilDestroyed()) + .subscribe((queryParams) => { + if (queryParams) { + this.filterTerm = queryParams['filterTerm'] || ''; + this.filterBucket = queryParams['filterBucket'] || 'All'; + this.filterColumn = queryParams['filterColumn'] || ''; + this.dataSource.filter = JSON.stringify(queryParams); + } + }); + } Review Comment: Yea good call. Looking back at what we did for the nifi 2.0 release we def 'broke' the deep linking api so I think we ware actually fine to restructure these routes to what makes the most sense. That said, I would not introduce any redirects to handle those legacy routes. As for the query params and this listing of versioned flows. I am having a hard time deciding what is the best way forward. I was trying to point out that in the previous UI users could easily view all the flows in the registry, all the flows in a single bucket, or view a single flow each with different deep links. It wasn't so much that they were linking to view a resource as much as it was really a way to reuse the same component to display three different use cases. I think in practice most registry users do not have that many versioned flows uploaded so this use case may not really be all that realistic or helpful. My biggest issues with the query params is that we do not use them anywheres else in the codebase to date so they are not familiar. They are can be error prone with forward/back navigation. The user can edit the URL to enter invalid values so then the frontend needs to be able to catch that and display invalid or errors. Also, we have very little to no testing in or around any of that. If you agree, I think we should simply remove these query params and any functionality around them for now and just update this route to be `explorer` instead of `resources`. -- 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]
