feat(gui): server-side pagination

roadlib/roadtools/roadlib/metadef/database.py

@@ -157,7 +157,10 @@ def __repr__(self):
     Column('Device', Text, ForeignKey('Devices.objectId'))
 )
 
-class AppRoleAssignment(Base, SerializeMixin):
+class ModelBase(Base, SerializeMixin):
+    __abstract__ = True
+
+class AppRoleAssignment(ModelBase):
     __tablename__ = "AppRoleAssignments"
     objectType = Column(Text)
     objectId = Column(Text, primary_key=True)
@@ -171,7 +174,7 @@ class AppRoleAssignment(Base, SerializeMixin):
     resourceId = Column(Text)
 
 
-class OAuth2PermissionGrant(Base, SerializeMixin):
+class OAuth2PermissionGrant(ModelBase):
     __tablename__ = "OAuth2PermissionGrants"
     clientId = Column(Text)
     consentType = Column(Text)
@@ -183,7 +186,7 @@ class OAuth2PermissionGrant(Base, SerializeMixin):
     startTime = Column(DateTime)
 
 
-class User(Base, SerializeMixin):
+class User(ModelBase):
     __tablename__ = "Users"
     objectType = Column(Text)
     objectId = Column(Text, primary_key=True)
@@ -335,7 +338,7 @@ class User(Base, SerializeMixin):
         back_populates="memberUsers")
 
 
-class ServicePrincipal(Base, SerializeMixin):
+class ServicePrincipal(ModelBase):
     __tablename__ = "ServicePrincipals"
     objectType = Column(Text)
     objectId = Column(Text, primary_key=True)
@@ -422,7 +425,7 @@ class ServicePrincipal(Base, SerializeMixin):
         primaryjoin=objectId == foreign(AppRoleAssignment.principalId))
 
 
-class Group(Base, SerializeMixin):
+class Group(ModelBase):
     __tablename__ = "Groups"
     objectType = Column(Text)
     objectId = Column(Text, primary_key=True)
@@ -514,7 +517,7 @@ class Group(Base, SerializeMixin):
         back_populates="memberGroups")
 
 
-class Application(Base, SerializeMixin):
+class Application(ModelBase):
     __tablename__ = "Applications"
     objectType = Column(Text)
     objectId = Column(Text, primary_key=True)
@@ -573,7 +576,7 @@ class Application(Base, SerializeMixin):
         back_populates="ownedApplications")
 
 
-class Device(Base, SerializeMixin):
+class Device(ModelBase):
     __tablename__ = "Devices"
     objectType = Column(Text)
     objectId = Column(Text, primary_key=True)
@@ -634,7 +637,7 @@ class Device(Base, SerializeMixin):
         back_populates="memberDevices")
 
 
-class DirectoryRole(Base, SerializeMixin):
+class DirectoryRole(ModelBase):
     __tablename__ = "DirectoryRoles"
     objectType = Column(Text)
     objectId = Column(Text, primary_key=True)
@@ -658,7 +661,7 @@ class DirectoryRole(Base, SerializeMixin):
         back_populates="memberOfRole")
 
 
-class TenantDetail(Base, SerializeMixin):
+class TenantDetail(ModelBase):
     __tablename__ = "TenantDetails"
     objectType = Column(Text)
     objectId = Column(Text, primary_key=True)
@@ -696,7 +699,7 @@ class TenantDetail(Base, SerializeMixin):
     windowsCredentialsEncryptionCertificate = Column(Text)
 
 
-class ApplicationRef(Base, SerializeMixin):
+class ApplicationRef(ModelBase):
     __tablename__ = "ApplicationRefs"
     appCategory = Column(Text)
     appContextId = Column(Text)
@@ -724,7 +727,7 @@ class ApplicationRef(Base, SerializeMixin):
     verifiedPublisher = Column(JSON)
 
 
-class ExtensionProperty(Base, SerializeMixin):
+class ExtensionProperty(ModelBase):
     __tablename__ = "ExtensionPropertys"
     objectType = Column(Text)
     objectId = Column(Text, primary_key=True)
@@ -736,7 +739,7 @@ class ExtensionProperty(Base, SerializeMixin):
     targetObjects = Column(JSON)
 
 
-class Contact(Base, SerializeMixin):
+class Contact(ModelBase):
     __tablename__ = "Contacts"
     objectType = Column(Text)
     objectId = Column(Text, primary_key=True)
@@ -778,7 +781,7 @@ class Contact(Base, SerializeMixin):
         back_populates="memberContacts")
 
 
-class Policy(Base, SerializeMixin):
+class Policy(ModelBase):
     __tablename__ = "Policys"
     objectType = Column(Text)
     objectId = Column(Text, primary_key=True)
@@ -791,7 +794,7 @@ class Policy(Base, SerializeMixin):
     tenantDefaultPolicy = Column(Integer)
 
 
-class RoleDefinition(Base, SerializeMixin):
+class RoleDefinition(ModelBase):
     __tablename__ = "RoleDefinitions"
     objectType = Column(Text)
     objectId = Column(Text, primary_key=True)
@@ -811,7 +814,7 @@ class RoleDefinition(Base, SerializeMixin):
         back_populates="roleDefinition")
 
 
-class RoleAssignment(Base, SerializeMixin):
+class RoleAssignment(ModelBase):
     __tablename__ = "RoleAssignments"
     id = Column(Text, primary_key=True)
     principalId = Column(Text)
@@ -821,7 +824,7 @@ class RoleAssignment(Base, SerializeMixin):
         back_populates="assignments")
 
 
-class EligibleRoleAssignment(Base, SerializeMixin):
+class EligibleRoleAssignment(ModelBase):
     __tablename__ = "EligibleRoleAssignments"
     id = Column(Text, primary_key=True)
     principalId = Column(Text)
@@ -831,7 +834,7 @@ class EligibleRoleAssignment(Base, SerializeMixin):
         back_populates="eligibleAssignments")
 
 
-class AuthorizationPolicy(Base, SerializeMixin):
+class AuthorizationPolicy(ModelBase):
     __tablename__ = "AuthorizationPolicys"
     id = Column(Text, primary_key=True)
     allowInvitesFrom = Column(Text)
@@ -847,15 +850,15 @@ class AuthorizationPolicy(Base, SerializeMixin):
     permissionGrantPolicyIdsAssignedToDefaultUserRole = Column(JSON)
 
 
-class DirectorySetting(Base, SerializeMixin):
+class DirectorySetting(ModelBase):
     __tablename__ = "DirectorySettings"
     id = Column(Text, primary_key=True)
     displayName = Column(Text)
     templateId = Column(Text)
     values = Column(JSON)
 
 
-class AdministrativeUnit(Base, SerializeMixin):
+class AdministrativeUnit(ModelBase):
     __tablename__ = "AdministrativeUnits"
     objectType = Column(Text)
     objectId = Column(Text, primary_key=True)

roadrecon/frontend/angular.json

@@ -118,5 +118,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

roadrecon/frontend/src/app/appmain/aadobjects.service.ts

@@ -1,13 +1,14 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { environment } from '../../environments/environment'
+import { environment } from '../../environments/environment';
 import {
   Router, Resolve,
   RouterStateSnapshot,
   ActivatedRouteSnapshot
 }                                 from '@angular/router';
 import { Observable, of, EMPTY }  from 'rxjs';
 import { mergeMap, take }         from 'rxjs/operators';
+import {SortDirection} from '@angular/material/sort';
 
 export interface GroupsItem {
   displayName: string;
@@ -241,15 +242,31 @@ export interface AuthorizationPolicy {
     permissionGrantPolicyIdsAssignedToDefaultUserRole: string[];
 }
 
+export interface PaginationParams {
+  page: number;
+  pageSize: number;
+  sortField: string;
+  sortDirection: SortDirection;
+}
+
 @Injectable({
   providedIn: 'root'
 })
 export class DatabaseService {
+  defaultPage = 1;
+  defaultPageSize = 50;
 
   constructor(private http: HttpClient) { }
 
-  public getUsers():  Observable<UsersItem[]> {
-      return this.http.get<UsersItem[]>(environment.apibase + 'users');
+  public getUsers(pagination?: PaginationParams): Observable<UsersItem[]> {
+      return this.http.get<UsersItem[]>(environment.apibase + 'users', {
+        params: {
+          page: pagination.page || this.defaultPage,
+          per_page: pagination.pageSize || this.defaultPageSize,
+          sort: pagination.sortField,
+          direction: pagination.sortDirection
+        }
+      });
   }
 
   public getUser(id):  Observable<UsersItem> {

roadrecon/frontend/src/app/appmain/users/users-datasource.ts

@@ -4,7 +4,7 @@ import { MatSort } from '@angular/material/sort';
 import { map } from 'rxjs/operators';
 import { Observable, of as observableOf, merge } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
-import { UsersItem, UsersService } from '../aadobjects.service'
+import { UsersItem, UsersService } from '../aadobjects.service';
 
 /**
  * Data source for the Users view. This class should
@@ -28,7 +28,7 @@ export class UsersDataSource extends DataSource<UsersItem> {
   connect(): Observable<UsersItem[]> {
     // Combine everything that affects the rendered data into one update
     // stream for the data-table to consume.
-    this.service.getUsers().subscribe((data: UsersItem[]) => this.data = data);
+    this.service.getUsers(this.paginator.page, this.paginator.pageSize).subscribe((data: UsersItem[]) => this.data = data);
     const dataMutations = [
       observableOf(this.data),
       this.paginator.page,

roadrecon/frontend/src/app/appmain/users/users.component.ts

@@ -25,7 +25,7 @@ export class UsersComponent implements AfterViewInit, OnInit {
 
   ngOnInit() {
     this.dataSource = new MatTableDataSource();
-    this.service.getUsers().subscribe((data: UsersItem[]) => this.dataSource.data = data);
+    this.loadData();
     this.localSt.observe('mfa')
       .subscribe((value) => {
         this.updateMfaColumn(value);
@@ -49,11 +49,25 @@ export class UsersComponent implements AfterViewInit, OnInit {
     this.dataSource.sort = this.sort;
     this.dataSource.paginator = this.paginator;
     this.table.dataSource = this.dataSource;
+
+    this.sort.sortChange.subscribe(() => {
+      this.paginator.pageIndex = 0; // Reset to first page on sort change
+      this.loadData();
+    });
+
+    this.paginator.page.subscribe(() => {
+      this.loadData();
+    });
   }
 
   applyFilter(filterValue: string) {
     filterValue = filterValue.trim(); // Remove whitespace
     filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
     this.dataSource.filter = filterValue;
   }
+
+  loadData() {
+    this.service.getUsers(this.paginator?.pageIndex, this.paginator?.pageSize, this.sort?.active, this.sort?.direction)
+      .subscribe((data: UsersItem[]) => this.dataSource.data = data);
+  }
 }