This is an automated email from the ASF dual-hosted git repository. rshah pushed a commit to branch feature/tpv2-role-details in repository https://gitbox.apache.org/repos/asf/trafficcontrol.git
commit 37f8ff5fbf6bdab847850ceebed57358ed515fba Author: Rima Shah <[email protected]> AuthorDate: Wed May 3 11:42:59 2023 -0600 Added files for roles table and a route for roles --- .../traffic-portal/src/app/core/core.module.ts | 1 + .../users/roles/tables/roles-table.component.html | 28 ++++++ .../users/roles/tables/roles-table.component.scss | 13 +++ .../roles/tables/roles-table.component.spec.ts | 0 .../users/roles/tables/roles-table.component.ts | 112 +++++++++++++++++++++ 5 files changed, 154 insertions(+) diff --git a/experimental/traffic-portal/src/app/core/core.module.ts b/experimental/traffic-portal/src/app/core/core.module.ts index 93fa833903..7ea7c23260 100644 --- a/experimental/traffic-portal/src/app/core/core.module.ts +++ b/experimental/traffic-portal/src/app/core/core.module.ts @@ -67,6 +67,7 @@ import { TenantsComponent } from "./users/tenants/tenants.component"; import { UserDetailsComponent } from "./users/user-details/user-details.component"; import { UserRegistrationDialogComponent } from "./users/user-registration-dialog/user-registration-dialog.component"; import { UsersComponent } from "./users/users.component"; +import { RolesTableComponent } from "./users/roles/tables/roles-table.component"; export const ROUTES: Routes = [ { component: DashboardComponent, path: "" }, diff --git a/experimental/traffic-portal/src/app/core/users/roles/tables/roles-table.component.html b/experimental/traffic-portal/src/app/core/users/roles/tables/roles-table.component.html new file mode 100644 index 0000000000..550ed1bead --- /dev/null +++ b/experimental/traffic-portal/src/app/core/users/roles/tables/roles-table.component.html @@ -0,0 +1,28 @@ +<!-- +Licensed 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. +--> + +<mat-card class="table-page-content"> + <div class="search-container"> + <input type="search" name="fuzzControl" aria-label="Fuzzy Search Roles" autofocus inputmode="search" role="search" accesskey="/" placeholder="Fuzzy Search" [formControl]="fuzzControl" (input)="updateURL()" /> + </div> + <tp-generic-table + [data]="roles | async" + [cols]="columnDefs" + [fuzzySearch]="fuzzySubject" + context="roles" + [contextMenuItems]="contextMenuItems" + (contextMenuAction)="handleContextMenu($event)"> + </tp-generic-table> +</mat-card> + + +<a class="page-fab" mat-fab title="Create a new role" *ngIf="auth.hasPermission('ROLE:CREATE')" routerLink="new"><mat-icon>add</mat-icon></a> diff --git a/experimental/traffic-portal/src/app/core/users/roles/tables/roles-table.component.scss b/experimental/traffic-portal/src/app/core/users/roles/tables/roles-table.component.scss new file mode 100644 index 0000000000..ebe77042d3 --- /dev/null +++ b/experimental/traffic-portal/src/app/core/users/roles/tables/roles-table.component.scss @@ -0,0 +1,13 @@ +/* +* Licensed 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. +*/ diff --git a/experimental/traffic-portal/src/app/core/users/roles/tables/roles-table.component.spec.ts b/experimental/traffic-portal/src/app/core/users/roles/tables/roles-table.component.spec.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/experimental/traffic-portal/src/app/core/users/roles/tables/roles-table.component.ts b/experimental/traffic-portal/src/app/core/users/roles/tables/roles-table.component.ts new file mode 100644 index 0000000000..e8bbba1603 --- /dev/null +++ b/experimental/traffic-portal/src/app/core/users/roles/tables/roles-table.component.ts @@ -0,0 +1,112 @@ +/* +* Licensed 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, type OnInit } from "@angular/core"; +import { FormControl } from "@angular/forms"; +import { BehaviorSubject } from "rxjs"; +import type { ResponseRole } from "trafficops-types"; + +import { UserService } from "src/app/api"; +import { CurrentUserService } from "src/app/shared/current-user/current-user.service"; +import type { ContextMenuItem } from "src/app/shared/generic-table/generic-table.component"; +import { NavigationService } from "src/app/shared/navigation/navigation.service"; +import { ActivatedRoute } from "@angular/router"; +import {ContextMenuActionEvent} from "src/app/shared/generic-table/generic-table.component"; +/** + * AsnsTableComponent is the controller for the "Asns" table. + */ +@Component({ + selector: "tp-roles", + styleUrls: ["./roles-table.component.scss"], + templateUrl: "./roles-table.component.html" +}) +export class RolesTableComponent implements OnInit { + /** List of roles */ + public roles: Promise<Array<ResponseRole>>; + constructor(private readonly route: ActivatedRoute, private readonly headerSvc: NavigationService, + private readonly api: UserService, public readonly auth: CurrentUserService) { + this.fuzzySubject = new BehaviorSubject<string>(""); + this.roles = this.api.getRoles(); + this.headerSvc.headerTitle.next("Roles"); + } + + /** Initializes table data, loading it from Traffic Ops. */ + public ngOnInit(): void { + this.route.queryParamMap.subscribe( + m => { + const search = m.get("search"); + if (search) { + this.fuzzControl.setValue(decodeURIComponent(search)); + this.updateURL(); + } + }, + e => { + console.error("Failed to get query parameters:", e); + } + ); + } + + /** Definitions of the table's columns according to the ag-grid API */ + public columnDefs = [ + { + field: "name", + headerName: "Name" + }, + { + field: "description", + headerName: "Description", + }, + { + field: "lastUpdated", + headerName: "Last Updated" + } + ]; + + /** Definitions for the context menu items (which act on augmented asn data). */ + public contextMenuItems: Array<ContextMenuItem<ResponseRole>> = [ + { + href: (selectedRow: ResponseRole): string => `${selectedRow.name}`, + name: "View Role" + }, + { + href: (selectedRow: ResponseRole): string => `${selectedRow.name}`, + name: "Open in New Tab", + newTab: true + }, + { + href: (selectedRow: ResponseRole): string => `/core/users?role=${selectedRow.name}`, + name: "View Users" + }, + ]; + + /** A subject that child components can subscribe to for access to the fuzzy search query text */ + public fuzzySubject: BehaviorSubject<string>; + + /** Form controller for the user search input. */ + public fuzzControl = new FormControl<string>(""); + + /** Update the URL's 'search' query parameter for the user's search input. */ + public updateURL(): void { + this.fuzzySubject.next(this.fuzzControl.value ?? ""); + } + + /** + * Handles a context menu event. + * + * @param a The action selected from the context menu. + */ + public handleContextMenu(a: ContextMenuActionEvent<Readonly<ResponseRole>>): void { + console.log("action:", a); + } +}
