diff --git a/backend/src/ee/routes/v1/pam-account-routers/pam-account-router.ts b/backend/src/ee/routes/v1/pam-account-routers/pam-account-router.ts index c28770be4..0b7f89b6c 100644 --- a/backend/src/ee/routes/v1/pam-account-routers/pam-account-router.ts +++ b/backend/src/ee/routes/v1/pam-account-routers/pam-account-router.ts @@ -2,12 +2,15 @@ import { z } from "zod"; import { PamFoldersSchema } from "@app/db/schemas"; import { EventType } from "@app/ee/services/audit-log/audit-log-types"; +import { PamAccountOrderBy, PamAccountView } from "@app/ee/services/pam-account/pam-account-enums"; import { SanitizedMySQLAccountWithResourceSchema } from "@app/ee/services/pam-resource/mysql/mysql-resource-schemas"; import { PamResource } from "@app/ee/services/pam-resource/pam-resource-enums"; import { SanitizedPostgresAccountWithResourceSchema } from "@app/ee/services/pam-resource/postgres/postgres-resource-schemas"; import { SanitizedSSHAccountWithResourceSchema } from "@app/ee/services/pam-resource/ssh/ssh-resource-schemas"; import { BadRequestError } from "@app/lib/errors"; +import { removeTrailingSlash } from "@app/lib/fn"; import { ms } from "@app/lib/ms"; +import { OrderByDirection } from "@app/lib/types"; import { readLimit, writeLimit } from "@app/server/config/rateLimiter"; import { verifyAuth } from "@app/server/plugins/auth/verify-auth"; import { AuthMode } from "@app/services/auth/auth-type"; @@ -28,33 +31,69 @@ export const registerPamAccountRouter = async (server: FastifyZodProvider) => { schema: { description: "List PAM accounts", querystring: z.object({ - projectId: z.string().uuid() + projectId: z.string().uuid(), + accountPath: z.string().trim().default("/").transform(removeTrailingSlash), + accountView: z.nativeEnum(PamAccountView).default(PamAccountView.Flat), + offset: z.coerce.number().min(0).default(0), + limit: z.coerce.number().min(1).max(100).default(100), + orderBy: z.nativeEnum(PamAccountOrderBy).default(PamAccountOrderBy.Name), + orderDirection: z.nativeEnum(OrderByDirection).default(OrderByDirection.ASC), + search: z.string().trim().optional(), + filterResourceIds: z + .string() + .transform((val) => + val + .split(",") + .map((s) => s.trim()) + .filter(Boolean) + ) + .optional() }), response: { 200: z.object({ accounts: SanitizedAccountSchema.array(), - folders: PamFoldersSchema.array() + folders: PamFoldersSchema.array(), + totalCount: z.number().default(0), + folderId: z.string().optional(), + folderPaths: z.record(z.string(), z.string()) }) } }, onRequest: verifyAuth([AuthMode.JWT]), handler: async (req) => { - const response = await server.services.pamAccount.list(req.query.projectId, req.permission); + const { projectId, accountPath, accountView, limit, offset, search, orderBy, orderDirection, filterResourceIds } = + req.query; + + const { accounts, folders, totalCount, folderId, folderPaths } = await server.services.pamAccount.list({ + actorId: req.permission.id, + actor: req.permission.type, + actorAuthMethod: req.permission.authMethod, + actorOrgId: req.permission.orgId, + projectId, + accountPath, + accountView, + limit, + offset, + search, + orderBy, + orderDirection, + filterResourceIds + }); await server.services.auditLog.createAuditLog({ ...req.auditLogInfo, orgId: req.permission.orgId, - projectId: req.query.projectId, + projectId, event: { type: EventType.PAM_ACCOUNT_LIST, metadata: { - accountCount: response.accounts.length, - folderCount: response.folders.length + accountCount: accounts.length, + folderCount: folders.length } } }); - return response; + return { accounts, folders, totalCount, folderId, folderPaths }; } }); diff --git a/backend/src/ee/routes/v1/pam-resource-routers/pam-resource-router.ts b/backend/src/ee/routes/v1/pam-resource-routers/pam-resource-router.ts index 8cac0525b..3536e7a99 100644 --- a/backend/src/ee/routes/v1/pam-resource-routers/pam-resource-router.ts +++ b/backend/src/ee/routes/v1/pam-resource-routers/pam-resource-router.ts @@ -5,6 +5,7 @@ import { MySQLResourceListItemSchema, SanitizedMySQLResourceSchema } from "@app/ee/services/pam-resource/mysql/mysql-resource-schemas"; +import { PamResourceOrderBy } from "@app/ee/services/pam-resource/pam-resource-enums"; import { PostgresResourceListItemSchema, SanitizedPostgresResourceSchema @@ -13,6 +14,7 @@ import { SanitizedSSHResourceSchema, SSHResourceListItemSchema } from "@app/ee/services/pam-resource/ssh/ssh-resource-schemas"; +import { OrderByDirection } from "@app/lib/types"; import { readLimit } from "@app/server/config/rateLimiter"; import { verifyAuth } from "@app/server/plugins/auth/verify-auth"; import { AuthMode } from "@app/services/auth/auth-type"; @@ -61,17 +63,46 @@ export const registerPamResourceRouter = async (server: FastifyZodProvider) => { schema: { description: "List PAM resources", querystring: z.object({ - projectId: z.string().uuid() + projectId: z.string().uuid(), + offset: z.coerce.number().min(0).default(0), + limit: z.coerce.number().min(1).max(100).default(100), + orderBy: z.nativeEnum(PamResourceOrderBy).default(PamResourceOrderBy.Name), + orderDirection: z.nativeEnum(OrderByDirection).default(OrderByDirection.ASC), + search: z.string().trim().optional(), + filterResourceTypes: z + .string() + .transform((val) => + val + .split(",") + .map((s) => s.trim()) + .filter(Boolean) + ) + .optional() }), response: { 200: z.object({ - resources: SanitizedResourceSchema.array() + resources: SanitizedResourceSchema.array(), + totalCount: z.number().default(0) }) } }, onRequest: verifyAuth([AuthMode.JWT]), handler: async (req) => { - const response = await server.services.pamResource.list(req.query.projectId, req.permission); + const { projectId, limit, offset, search, orderBy, orderDirection, filterResourceTypes } = req.query; + + const { resources, totalCount } = await server.services.pamResource.list({ + actorId: req.permission.id, + actor: req.permission.type, + actorAuthMethod: req.permission.authMethod, + actorOrgId: req.permission.orgId, + projectId, + limit, + offset, + search, + orderBy, + orderDirection, + filterResourceTypes + }); await server.services.auditLog.createAuditLog({ ...req.auditLogInfo, @@ -80,12 +111,12 @@ export const registerPamResourceRouter = async (server: FastifyZodProvider) => { event: { type: EventType.PAM_RESOURCE_LIST, metadata: { - count: response.resources.length + count: resources.length } } }); - return response; + return { resources, totalCount }; } }); }; diff --git a/backend/src/ee/services/pam-account/pam-account-dal.ts b/backend/src/ee/services/pam-account/pam-account-dal.ts index 6ef7df76e..5fa242627 100644 --- a/backend/src/ee/services/pam-account/pam-account-dal.ts +++ b/backend/src/ee/services/pam-account/pam-account-dal.ts @@ -1,46 +1,109 @@ import { Knex } from "knex"; import { TDbClient } from "@app/db"; -import { TableName, TPamAccounts } from "@app/db/schemas"; -import { buildFindFilter, ormify, prependTableNameToFindFilter, selectAllTableCols } from "@app/lib/knex"; +import { TableName } from "@app/db/schemas"; +import { DatabaseError } from "@app/lib/errors"; +import { ormify, selectAllTableCols } from "@app/lib/knex"; +import { OrderByDirection } from "@app/lib/types"; + +import { PamAccountOrderBy, PamAccountView } from "./pam-account-enums"; export type TPamAccountDALFactory = ReturnType; -type PamAccountFindFilter = Parameters>[0]; - export const pamAccountDALFactory = (db: TDbClient) => { const orm = ormify(db, TableName.PamAccount); - const findWithResourceDetails = async (filter: PamAccountFindFilter, tx?: Knex) => { - const query = (tx || db.replicaNode())(TableName.PamAccount) - .leftJoin(TableName.PamResource, `${TableName.PamAccount}.resourceId`, `${TableName.PamResource}.id`) - .select(selectAllTableCols(TableName.PamAccount)) - .select( + const findByProjectIdWithResourceDetails = async ( + { + projectId, + folderId, + accountView = PamAccountView.Nested, + search, + limit, + offset = 0, + orderBy = PamAccountOrderBy.Name, + orderDirection = OrderByDirection.ASC, + filterResourceIds + }: { + projectId: string; + folderId?: string | null; + accountView?: PamAccountView; + search?: string; + limit?: number; + offset?: number; + orderBy?: PamAccountOrderBy; + orderDirection?: OrderByDirection; + filterResourceIds?: string[]; + }, + tx?: Knex + ) => { + try { + const dbInstance = tx || db.replicaNode(); + const query = dbInstance(TableName.PamAccount) + .leftJoin(TableName.PamResource, `${TableName.PamAccount}.resourceId`, `${TableName.PamResource}.id`) + .where(`${TableName.PamAccount}.projectId`, projectId); + + if (accountView === PamAccountView.Nested) { + if (folderId) { + void query.where(`${TableName.PamAccount}.folderId`, folderId); + } else { + void query.whereNull(`${TableName.PamAccount}.folderId`); + } + } + + if (search) { + // escape special characters (`%`, `_`) and the escape character itself (`\`) + const escapedSearch = search.replace(/\\/g, "\\\\").replace(/%/g, "\\%").replace(/_/g, "\\_"); + const pattern = `%${escapedSearch}%`; + void query.where((q) => { + void q + .whereRaw(`??.?? ILIKE ? ESCAPE '\\'`, [TableName.PamAccount, "name", pattern]) + .orWhereRaw(`??.?? ILIKE ? ESCAPE '\\'`, [TableName.PamResource, "name", pattern]) + .orWhereRaw(`??.?? ILIKE ? ESCAPE '\\'`, [TableName.PamAccount, "description", pattern]); + }); + } + + if (filterResourceIds && filterResourceIds.length) { + void query.whereIn(`${TableName.PamAccount}.resourceId`, filterResourceIds); + } + + const countQuery = query.clone().count("*", { as: "count" }).first(); + + void query.select(selectAllTableCols(TableName.PamAccount)).select( // resource db.ref("name").withSchema(TableName.PamResource).as("resourceName"), db.ref("resourceType").withSchema(TableName.PamResource), db.ref("encryptedRotationAccountCredentials").withSchema(TableName.PamResource) ); - if (filter) { - /* eslint-disable @typescript-eslint/no-misused-promises */ - void query.where(buildFindFilter(prependTableNameToFindFilter(TableName.PamAccount, filter))); + const direction = orderDirection === OrderByDirection.ASC ? "ASC" : "DESC"; + + void query.orderByRaw(`${TableName.PamAccount}.?? COLLATE "en-x-icu" ${direction}`, [orderBy]); + + if (typeof limit === "number") { + void query.limit(limit).offset(offset); + } + + const [results, countResult] = await Promise.all([query, countQuery]); + const totalCount = Number(countResult?.count || 0); + + const accounts = results.map( + // @ts-expect-error resourceName, resourceType, encryptedRotationAccountCredentials are from joined table + ({ resourceId, resourceName, resourceType, encryptedRotationAccountCredentials, ...account }) => ({ + ...account, + resourceId, + resource: { + id: resourceId, + name: resourceName as string, + resourceType, + encryptedRotationAccountCredentials + } + }) + ); + return { accounts, totalCount }; + } catch (error) { + throw new DatabaseError({ error, name: "Find PAM accounts with resource details" }); } - - const accounts = await query; - - return accounts.map( - ({ resourceId, resourceName, resourceType, encryptedRotationAccountCredentials, ...account }) => ({ - ...account, - resourceId, - resource: { - id: resourceId, - name: resourceName, - resourceType, - encryptedRotationAccountCredentials - } - }) - ); }; const findAccountsDueForRotation = async (tx?: Knex) => { @@ -59,5 +122,9 @@ export const pamAccountDALFactory = (db: TDbClient) => { return accounts; }; - return { ...orm, findWithResourceDetails, findAccountsDueForRotation }; + return { + ...orm, + findByProjectIdWithResourceDetails, + findAccountsDueForRotation + }; }; diff --git a/backend/src/ee/services/pam-account/pam-account-enums.ts b/backend/src/ee/services/pam-account/pam-account-enums.ts new file mode 100644 index 000000000..92b95df94 --- /dev/null +++ b/backend/src/ee/services/pam-account/pam-account-enums.ts @@ -0,0 +1,8 @@ +export enum PamAccountOrderBy { + Name = "name" +} + +export enum PamAccountView { + Flat = "flat", + Nested = "nested" +} diff --git a/backend/src/ee/services/pam-account/pam-account-service.ts b/backend/src/ee/services/pam-account/pam-account-service.ts index 6f1805300..8c93fbfaf 100644 --- a/backend/src/ee/services/pam-account/pam-account-service.ts +++ b/backend/src/ee/services/pam-account/pam-account-service.ts @@ -1,6 +1,6 @@ import { ForbiddenError, subject } from "@casl/ability"; -import { ActionProjectType, OrganizationActionScope, TPamAccounts, TPamResources } from "@app/db/schemas"; +import { ActionProjectType, OrganizationActionScope, TPamAccounts, TPamFolders, TPamResources } from "@app/db/schemas"; import { PAM_RESOURCE_FACTORY_MAP } from "@app/ee/services/pam-resource/pam-resource-factory"; import { decryptResource, decryptResourceConnectionDetails } from "@app/ee/services/pam-resource/pam-resource-fns"; import { TPermissionServiceFactory } from "@app/ee/services/permission/permission-service-types"; @@ -32,8 +32,9 @@ import { TPamSessionDALFactory } from "../pam-session/pam-session-dal"; import { PamSessionStatus } from "../pam-session/pam-session-enums"; import { OrgPermissionGatewayActions, OrgPermissionSubjects } from "../permission/org-permission"; import { TPamAccountDALFactory } from "./pam-account-dal"; +import { PamAccountView } from "./pam-account-enums"; import { decryptAccount, decryptAccountCredentials, encryptAccountCredentials } from "./pam-account-fns"; -import { TAccessAccountDTO, TCreateAccountDTO, TUpdateAccountDTO } from "./pam-account-types"; +import { TAccessAccountDTO, TCreateAccountDTO, TListAccountsDTO, TUpdateAccountDTO } from "./pam-account-types"; type TPamAccountServiceFactoryDep = { pamResourceDAL: TPamResourceDALFactory; @@ -335,21 +336,96 @@ export const pamAccountServiceFactory = ({ }; }; - const list = async (projectId: string, actor: OrgServiceActor) => { + const list = async ({ + projectId, + accountPath, + accountView, + actor, + actorId, + actorAuthMethod, + actorOrgId, + ...params + }: TListAccountsDTO) => { const { permission } = await permissionService.getProjectPermission({ - actor: actor.type, - actorAuthMethod: actor.authMethod, - actorId: actor.id, - actorOrgId: actor.orgId, + actor, + actorId, projectId, + actorAuthMethod, + actorOrgId, actionProjectType: ActionProjectType.PAM }); - const accountsWithResourceDetails = await pamAccountDAL.findWithResourceDetails({ projectId }); + const limit = params.limit || 20; + const offset = params.offset || 0; const canReadFolders = permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.PamFolders); - const folders = canReadFolders ? await pamFolderDAL.find({ projectId }) : []; + const folder = accountPath === "/" ? null : await pamFolderDAL.findByPath(projectId, accountPath); + if (accountPath !== "/" && !folder) { + return { accounts: [], folders: [], totalCount: 0, folderPaths: {} }; + } + const folderId = folder?.id; + + let totalFolderCount = 0; + if (canReadFolders && accountView === PamAccountView.Nested) { + const { totalCount } = await pamFolderDAL.findByProjectId({ + projectId, + parentId: folderId, + search: params.search + }); + totalFolderCount = totalCount; + } + + let folders: TPamFolders[] = []; + if (canReadFolders && accountView === PamAccountView.Nested && offset < totalFolderCount) { + const folderLimit = Math.min(limit, totalFolderCount - offset); + const { folders: foldersResp } = await pamFolderDAL.findByProjectId({ + projectId, + parentId: folderId, + limit: folderLimit, + offset, + search: params.search, + orderBy: params.orderBy, + orderDirection: params.orderDirection + }); + + folders = foldersResp; + } + + let accountsWithResourceDetails: Awaited< + ReturnType + >["accounts"] = []; + let totalAccountCount = 0; + + const accountsToFetch = limit - folders.length; + if (accountsToFetch > 0) { + const accountOffset = Math.max(0, offset - totalFolderCount); + const { accounts, totalCount } = await pamAccountDAL.findByProjectIdWithResourceDetails({ + projectId, + folderId, + accountView, + offset: accountOffset, + limit: accountsToFetch, + search: params.search, + orderBy: params.orderBy, + orderDirection: params.orderDirection, + filterResourceIds: params.filterResourceIds + }); + accountsWithResourceDetails = accounts; + totalAccountCount = totalCount; + } else { + // if no accounts are to be fetched for the current page, we still need the total count for pagination + const { totalCount } = await pamAccountDAL.findByProjectIdWithResourceDetails({ + projectId, + folderId, + accountView, + search: params.search, + filterResourceIds: params.filterResourceIds + }); + totalAccountCount = totalCount; + } + + const totalCount = totalFolderCount + totalAccountCount; const decryptedAndPermittedAccounts: Array< TPamAccounts & { @@ -360,12 +436,6 @@ export const pamAccountServiceFactory = ({ > = []; for await (const account of accountsWithResourceDetails) { - const accountPath = await getFullPamFolderPath({ - pamFolderDAL, - folderId: account.folderId, - projectId: account.projectId - }); - // Check permission for each individual account if ( permission.can( @@ -392,9 +462,27 @@ export const pamAccountServiceFactory = ({ } } + const folderPaths: Record = {}; + const accountFolderIds = [ + ...new Set(decryptedAndPermittedAccounts.flatMap((a) => (a.folderId ? [a.folderId] : []))) + ]; + + await Promise.all( + accountFolderIds.map(async (fId) => { + folderPaths[fId] = await getFullPamFolderPath({ + pamFolderDAL, + folderId: fId, + projectId + }); + }) + ); + return { accounts: decryptedAndPermittedAccounts, - folders + folders, + totalCount, + folderId, + folderPaths }; }; diff --git a/backend/src/ee/services/pam-account/pam-account-types.ts b/backend/src/ee/services/pam-account/pam-account-types.ts index 4bbccc6fa..b8498036e 100644 --- a/backend/src/ee/services/pam-account/pam-account-types.ts +++ b/backend/src/ee/services/pam-account/pam-account-types.ts @@ -1,4 +1,7 @@ +import { OrderByDirection, TProjectPermission } from "@app/lib/types"; + import { TPamAccount } from "../pam-resource/pam-resource-types"; +import { PamAccountOrderBy, PamAccountView } from "./pam-account-enums"; // DTOs export type TCreateAccountDTO = Pick< @@ -18,3 +21,14 @@ export type TAccessAccountDTO = { actorUserAgent: string; duration: number; }; + +export type TListAccountsDTO = { + accountPath: string; + accountView: PamAccountView; + search?: string; + orderBy?: PamAccountOrderBy; + orderDirection?: OrderByDirection; + limit?: number; + offset?: number; + filterResourceIds?: string[]; +} & TProjectPermission; diff --git a/backend/src/ee/services/pam-folder/pam-folder-dal.ts b/backend/src/ee/services/pam-folder/pam-folder-dal.ts index aa334618d..0b8aa8f60 100644 --- a/backend/src/ee/services/pam-folder/pam-folder-dal.ts +++ b/backend/src/ee/services/pam-folder/pam-folder-dal.ts @@ -1,9 +1,106 @@ +import { Knex } from "knex"; + import { TDbClient } from "@app/db"; import { TableName } from "@app/db/schemas"; -import { ormify } from "@app/lib/knex"; +import { DatabaseError } from "@app/lib/errors"; +import { ormify, selectAllTableCols } from "@app/lib/knex"; +import { OrderByDirection } from "@app/lib/types"; + +import { PamAccountOrderBy } from "../pam-account/pam-account-enums"; export type TPamFolderDALFactory = ReturnType; export const pamFolderDALFactory = (db: TDbClient) => { const orm = ormify(db, TableName.PamFolder); - return { ...orm }; + + const findByProjectId = async ( + { + projectId, + parentId, + search, + limit, + offset = 0, + orderBy = PamAccountOrderBy.Name, + orderDirection = OrderByDirection.ASC + }: { + projectId: string; + parentId?: string | null; + search?: string; + limit?: number; + offset?: number; + orderBy?: PamAccountOrderBy; + orderDirection?: OrderByDirection; + }, + tx?: Knex + ) => { + try { + const dbInstance = tx || db.replicaNode(); + const query = dbInstance(TableName.PamFolder).where(`${TableName.PamFolder}.projectId`, projectId); + + if (parentId) { + void query.where(`${TableName.PamFolder}.parentId`, parentId); + } else { + void query.whereNull(`${TableName.PamFolder}.parentId`); + } + + if (search) { + // escape special characters (`%`, `_`) and the escape character itself (`\`) + const escapedSearch = search.replace(/\\/g, "\\\\").replace(/%/g, "\\%").replace(/_/g, "\\_"); + void query.whereRaw(`??.?? ILIKE ? ESCAPE '\\'`, [TableName.PamFolder, "name", `%${escapedSearch}%`]); + } + + const countQuery = query.clone().count("*", { as: "count" }).first(); + + void query.select(selectAllTableCols(TableName.PamFolder)); + const direction = orderDirection === OrderByDirection.ASC ? "ASC" : "DESC"; + + void query.orderByRaw(`${TableName.PamFolder}.?? COLLATE "en-x-icu" ${direction}`, [orderBy]); + + if (typeof limit === "number") { + void query.limit(limit).offset(offset); + } + + const [folders, countResult] = await Promise.all([query, countQuery]); + const totalCount = Number(countResult?.count || 0); + + return { folders, totalCount }; + } catch (error) { + throw new DatabaseError({ error, name: "Find PAM folders" }); + } + }; + + const findByPath = async (projectId: string, path: string, tx?: Knex) => { + try { + const dbInstance = tx || db.replicaNode(); + const pathSegments = path.split("/").filter(Boolean); + + let parentId: string | null = null; + let currentFolder: Awaited> | undefined; + + for await (const segment of pathSegments) { + const query = dbInstance(TableName.PamFolder) + .where(`${TableName.PamFolder}.projectId`, projectId) + .where(`${TableName.PamFolder}.name`, segment); + + if (parentId) { + void query.where(`${TableName.PamFolder}.parentId`, parentId); + } else { + void query.whereNull(`${TableName.PamFolder}.parentId`); + } + + currentFolder = await query.first(); + + if (!currentFolder) { + return undefined; + } + + parentId = currentFolder.id; + } + + return currentFolder; + } catch (error) { + throw new DatabaseError({ error, name: "Find PAM folder by path" }); + } + }; + + return { ...orm, findByProjectId, findByPath }; }; diff --git a/backend/src/ee/services/pam-resource/pam-resource-dal.ts b/backend/src/ee/services/pam-resource/pam-resource-dal.ts index 1a408ca27..9e5cbc985 100644 --- a/backend/src/ee/services/pam-resource/pam-resource-dal.ts +++ b/backend/src/ee/services/pam-resource/pam-resource-dal.ts @@ -2,7 +2,11 @@ import { Knex } from "knex"; import { TDbClient } from "@app/db"; import { TableName } from "@app/db/schemas"; +import { DatabaseError } from "@app/lib/errors"; import { ormify, selectAllTableCols } from "@app/lib/knex"; +import { OrderByDirection } from "@app/lib/types"; + +import { PamResourceOrderBy } from "./pam-resource-enums"; export type TPamResourceDALFactory = ReturnType; export const pamResourceDALFactory = (db: TDbClient) => { @@ -20,5 +24,65 @@ export const pamResourceDALFactory = (db: TDbClient) => { return doc; }; - return { ...orm, findById }; + const findByProjectId = async ( + { + projectId, + search, + limit, + offset = 0, + orderBy = PamResourceOrderBy.Name, + orderDirection = OrderByDirection.ASC, + filterResourceTypes + }: { + projectId: string; + search?: string; + limit?: number; + offset?: number; + orderBy?: PamResourceOrderBy; + orderDirection?: OrderByDirection; + filterResourceTypes?: string[]; + }, + tx?: Knex + ) => { + try { + const dbInstance = tx || db.replicaNode(); + const query = dbInstance(TableName.PamResource).where(`${TableName.PamResource}.projectId`, projectId); + + if (search) { + // escape special characters (`%`, `_`) and the escape character itself (`\`) + const escapedSearch = search.replace(/\\/g, "\\\\").replace(/%/g, "\\%").replace(/_/g, "\\_"); + const pattern = `%${escapedSearch}%`; + void query.where((q) => { + void q + .whereRaw(`??.?? ILIKE ? ESCAPE '\\'`, [TableName.PamResource, "name", pattern]) + .orWhereRaw(`??.?? ILIKE ? ESCAPE '\\'`, [TableName.PamResource, "resourceType", pattern]); + }); + } + + if (filterResourceTypes && filterResourceTypes.length) { + void query.whereIn(`${TableName.PamResource}.resourceType`, filterResourceTypes); + } + + const countQuery = query.clone().count("*", { as: "count" }).first(); + + void query.select(selectAllTableCols(TableName.PamResource)); + + const direction = orderDirection === OrderByDirection.ASC ? "ASC" : "DESC"; + + void query.orderByRaw(`${TableName.PamResource}.?? COLLATE "en-x-icu" ${direction}`, [orderBy]); + + if (typeof limit === "number") { + void query.limit(limit).offset(offset); + } + + const [resources, countResult] = await Promise.all([query, countQuery]); + const totalCount = Number(countResult?.count || 0); + + return { resources, totalCount }; + } catch (error) { + throw new DatabaseError({ error, name: "Find PAM resources" }); + } + }; + + return { ...orm, findById, findByProjectId }; }; diff --git a/backend/src/ee/services/pam-resource/pam-resource-enums.ts b/backend/src/ee/services/pam-resource/pam-resource-enums.ts index e913a1a09..e4ec043e1 100644 --- a/backend/src/ee/services/pam-resource/pam-resource-enums.ts +++ b/backend/src/ee/services/pam-resource/pam-resource-enums.ts @@ -3,3 +3,7 @@ export enum PamResource { MySQL = "mysql", SSH = "ssh" } + +export enum PamResourceOrderBy { + Name = "name" +} diff --git a/backend/src/ee/services/pam-resource/pam-resource-service.ts b/backend/src/ee/services/pam-resource/pam-resource-service.ts index 8d3fd8cbe..0ebca02b5 100644 --- a/backend/src/ee/services/pam-resource/pam-resource-service.ts +++ b/backend/src/ee/services/pam-resource/pam-resource-service.ts @@ -20,7 +20,7 @@ import { encryptResourceConnectionDetails, listResourceOptions } from "./pam-resource-fns"; -import { TCreateResourceDTO, TUpdateResourceDTO } from "./pam-resource-types"; +import { TCreateResourceDTO, TListResourcesDTO, TUpdateResourceDTO } from "./pam-resource-types"; type TPamResourceServiceFactoryDep = { pamResourceDAL: TPamResourceDALFactory; @@ -267,22 +267,23 @@ export const pamResourceServiceFactory = ({ } }; - const list = async (projectId: string, actor: OrgServiceActor) => { + const list = async ({ projectId, actor, actorId, actorAuthMethod, actorOrgId, ...params }: TListResourcesDTO) => { const { permission } = await permissionService.getProjectPermission({ - actor: actor.type, - actorAuthMethod: actor.authMethod, - actorId: actor.id, - actorOrgId: actor.orgId, + actor, + actorId, + actorAuthMethod, + actorOrgId, projectId, actionProjectType: ActionProjectType.PAM }); ForbiddenError.from(permission).throwUnlessCan(ProjectPermissionActions.Read, ProjectPermissionSub.PamResources); - const resources = await pamResourceDAL.find({ projectId }); + const { resources, totalCount } = await pamResourceDAL.findByProjectId({ projectId, ...params }); return { - resources: await Promise.all(resources.map((resource) => decryptResource(resource, projectId, kmsService))) + resources: await Promise.all(resources.map((resource) => decryptResource(resource, projectId, kmsService))), + totalCount }; }; diff --git a/backend/src/ee/services/pam-resource/pam-resource-types.ts b/backend/src/ee/services/pam-resource/pam-resource-types.ts index 2a36f17bc..9da094801 100644 --- a/backend/src/ee/services/pam-resource/pam-resource-types.ts +++ b/backend/src/ee/services/pam-resource/pam-resource-types.ts @@ -1,3 +1,5 @@ +import { OrderByDirection, TProjectPermission } from "@app/lib/types"; + import { TGatewayV2ServiceFactory } from "../gateway-v2/gateway-v2-service"; import { TMySQLAccount, @@ -5,7 +7,7 @@ import { TMySQLResource, TMySQLResourceConnectionDetails } from "./mysql/mysql-resource-types"; -import { PamResource } from "./pam-resource-enums"; +import { PamResource, PamResourceOrderBy } from "./pam-resource-enums"; import { TPostgresAccount, TPostgresAccountCredentials, @@ -41,6 +43,15 @@ export type TUpdateResourceDTO = Partial = () => Promise; export type TPamResourceFactoryValidateAccountCredentials = ( diff --git a/frontend/src/hooks/api/pam/enums.ts b/frontend/src/hooks/api/pam/enums.ts index 78a4f4c13..2c86d9921 100644 --- a/frontend/src/hooks/api/pam/enums.ts +++ b/frontend/src/hooks/api/pam/enums.ts @@ -1,3 +1,4 @@ +// Resources export enum PamResourceType { Postgres = "postgres", MySQL = "mysql", @@ -18,9 +19,24 @@ export enum PamResourceType { DynamoDB = "dynamodb" } +export enum PamResourceOrderBy { + Name = "name" +} + +// Sessions export enum PamSessionStatus { Starting = "starting", Active = "active", Ended = "ended", Terminated = "terminated" } + +// Accounts +export enum PamAccountOrderBy { + Name = "name" +} + +export enum PamAccountView { + Flat = "flat", + Nested = "nested" +} diff --git a/frontend/src/hooks/api/pam/mutations.tsx b/frontend/src/hooks/api/pam/mutations.tsx index 99a89b425..c5d6ff05b 100644 --- a/frontend/src/hooks/api/pam/mutations.tsx +++ b/frontend/src/hooks/api/pam/mutations.tsx @@ -31,7 +31,7 @@ export const useCreatePamResource = () => { return data.resource; }, onSuccess: ({ projectId }) => { - queryClient.invalidateQueries({ queryKey: pamKeys.listResources(projectId) }); + queryClient.invalidateQueries({ queryKey: pamKeys.listResources({ projectId }) }); } }); }; @@ -48,7 +48,7 @@ export const useUpdatePamResource = () => { return data.resource; }, onSuccess: ({ projectId }) => { - queryClient.invalidateQueries({ queryKey: pamKeys.listResources(projectId) }); + queryClient.invalidateQueries({ queryKey: pamKeys.listResources({ projectId }) }); } }); }; @@ -64,7 +64,7 @@ export const useDeletePamResource = () => { return data.resource; }, onSuccess: ({ projectId }) => { - queryClient.invalidateQueries({ queryKey: pamKeys.listResources(projectId) }); + queryClient.invalidateQueries({ queryKey: pamKeys.listResources({ projectId }) }); } }); }; @@ -82,7 +82,7 @@ export const useCreatePamAccount = () => { return data.account; }, onSuccess: ({ projectId }) => { - queryClient.invalidateQueries({ queryKey: pamKeys.listAccounts(projectId) }); + queryClient.invalidateQueries({ queryKey: pamKeys.listAccounts({ projectId }) }); } }); }; @@ -99,7 +99,7 @@ export const useUpdatePamAccount = () => { return data.account; }, onSuccess: ({ projectId }) => { - queryClient.invalidateQueries({ queryKey: pamKeys.listAccounts(projectId) }); + queryClient.invalidateQueries({ queryKey: pamKeys.listAccounts({ projectId }) }); } }); }; @@ -115,7 +115,7 @@ export const useDeletePamAccount = () => { return data.account; }, onSuccess: ({ projectId }) => { - queryClient.invalidateQueries({ queryKey: pamKeys.listAccounts(projectId) }); + queryClient.invalidateQueries({ queryKey: pamKeys.listAccounts({ projectId }) }); } }); }; @@ -130,7 +130,7 @@ export const useCreatePamFolder = () => { return data.folder; }, onSuccess: ({ projectId }) => { - queryClient.invalidateQueries({ queryKey: pamKeys.listAccounts(projectId) }); + queryClient.invalidateQueries({ queryKey: pamKeys.listAccounts({ projectId }) }); } }); }; @@ -147,7 +147,7 @@ export const useUpdatePamFolder = () => { return data.folder; }, onSuccess: ({ projectId }) => { - queryClient.invalidateQueries({ queryKey: pamKeys.listAccounts(projectId) }); + queryClient.invalidateQueries({ queryKey: pamKeys.listAccounts({ projectId }) }); } }); }; @@ -163,7 +163,7 @@ export const useDeletePamFolder = () => { return data.folder; }, onSuccess: ({ projectId }) => { - queryClient.invalidateQueries({ queryKey: pamKeys.listAccounts(projectId) }); + queryClient.invalidateQueries({ queryKey: pamKeys.listAccounts({ projectId }) }); } }); }; diff --git a/frontend/src/hooks/api/pam/queries.tsx b/frontend/src/hooks/api/pam/queries.tsx index 6339b4761..8f8b681e6 100644 --- a/frontend/src/hooks/api/pam/queries.tsx +++ b/frontend/src/hooks/api/pam/queries.tsx @@ -4,7 +4,14 @@ import { apiRequest } from "@app/config/request"; import { TPamResourceOption } from "./types/resource-options"; import { PamResourceType } from "./enums"; -import { TPamAccount, TPamFolder, TPamResource, TPamSession } from "./types"; +import { + TListPamAccountsDTO, + TListPamResourcesDTO, + TPamAccount, + TPamFolder, + TPamResource, + TPamSession +} from "./types"; export const pamKeys = { all: ["pam"] as const, @@ -12,14 +19,24 @@ export const pamKeys = { account: () => [...pamKeys.all, "account"] as const, session: () => [...pamKeys.all, "session"] as const, listResourceOptions: () => [...pamKeys.resource(), "options"] as const, - listResources: (projectId: string) => [...pamKeys.resource(), "list", projectId], + listResources: ({ projectId, ...params }: TListPamResourcesDTO) => [ + ...pamKeys.resource(), + "list", + projectId, + params + ], getResource: (resourceType: string, resourceId: string) => [ ...pamKeys.resource(), "get", resourceType, resourceId ], - listAccounts: (projectId: string) => [...pamKeys.account(), "list", projectId], + listAccounts: ({ projectId, ...params }: TListPamAccountsDTO) => [ + ...pamKeys.account(), + "list", + projectId, + params + ], getSession: (sessionId: string) => [...pamKeys.session(), "get", sessionId], listSessions: (projectId: string) => [...pamKeys.session(), "list", projectId] }; @@ -49,28 +66,33 @@ export const useListPamResourceOptions = ( }); }; +type TListPamResourcesResponse = { + resources: TPamResource[]; + totalCount: number; +}; + export const useListPamResources = ( - projectId: string, + params: TListPamResourcesDTO, options?: Omit< UseQueryOptions< - TPamResource[], + TListPamResourcesResponse, unknown, - TPamResource[], + TListPamResourcesResponse, ReturnType >, "queryKey" | "queryFn" > ) => { return useQuery({ - queryKey: pamKeys.listResources(projectId), + queryKey: pamKeys.listResources(params), queryFn: async () => { - const { data } = await apiRequest.get<{ resources: TPamResource[] }>( - "/api/v1/pam/resources", - { params: { projectId } } - ); + const { data } = await apiRequest.get("/api/v1/pam/resources", { + params + }); - return data.resources; + return data; }, + placeholderData: (prev) => prev, ...options }); }; @@ -98,28 +120,36 @@ export const useGetPamResourceById = ( }; // Accounts +type TListPamAccountsResponse = { + accounts: TPamAccount[]; + folders: TPamFolder[]; + totalCount: number; + folderId?: string; + folderPaths: Record; +}; + export const useListPamAccounts = ( - projectId: string, + params: TListPamAccountsDTO, options?: Omit< UseQueryOptions< - { accounts: TPamAccount[]; folders: TPamFolder[] }, + TListPamAccountsResponse, unknown, - { accounts: TPamAccount[]; folders: TPamFolder[] }, + TListPamAccountsResponse, ReturnType >, "queryKey" | "queryFn" > ) => { return useQuery({ - queryKey: pamKeys.listAccounts(projectId), + queryKey: pamKeys.listAccounts(params), queryFn: async () => { - const { data } = await apiRequest.get<{ accounts: TPamAccount[]; folders: TPamFolder[] }>( - "/api/v1/pam/accounts", - { params: { projectId } } - ); + const { data } = await apiRequest.get("/api/v1/pam/accounts", { + params + }); return data; }, + placeholderData: (prev) => prev, ...options }); }; diff --git a/frontend/src/hooks/api/pam/types/index.ts b/frontend/src/hooks/api/pam/types/index.ts index 6f37c97c3..01b87c282 100644 --- a/frontend/src/hooks/api/pam/types/index.ts +++ b/frontend/src/hooks/api/pam/types/index.ts @@ -1,4 +1,11 @@ -import { PamResourceType, PamSessionStatus } from "../enums"; +import { OrderByDirection } from "../../generic/types"; +import { + PamAccountOrderBy, + PamAccountView, + PamResourceOrderBy, + PamResourceType, + PamSessionStatus +} from "../enums"; import { TMySQLAccount, TMySQLResource } from "./mysql-resource"; import { TPostgresAccount, TPostgresResource } from "./postgres-resource"; import { TSSHAccount, TSSHResource } from "./ssh-resource"; @@ -59,6 +66,16 @@ export type TPamSession = { }; // Resource DTOs +export type TListPamResourcesDTO = { + projectId: string; + offset?: number; + limit?: number; + orderBy?: PamResourceOrderBy; + orderDirection?: OrderByDirection; + search?: string; + filterResourceTypes?: string; +}; + export type TCreatePamResourceDTO = Pick< TPamResource, "name" | "connectionDetails" | "resourceType" | "gatewayId" | "projectId" @@ -77,6 +94,18 @@ export type TDeletePamResourceDTO = { }; // Account DTOs +export type TListPamAccountsDTO = { + projectId: string; + accountPath?: string | null; + accountView?: PamAccountView; + offset?: number; + limit?: number; + orderBy?: PamAccountOrderBy; + orderDirection?: OrderByDirection; + search?: string; + filterResourceIds?: string; +}; + export type TCreatePamAccountDTO = Pick< TPamAccount, "name" | "description" | "credentials" | "projectId" | "resourceId" | "folderId" diff --git a/frontend/src/pages/pam/PamAccountsPage/components/AccountViewToggle.tsx b/frontend/src/pages/pam/PamAccountsPage/components/AccountViewToggle.tsx index 92b2f7859..51e568551 100644 --- a/frontend/src/pages/pam/PamAccountsPage/components/AccountViewToggle.tsx +++ b/frontend/src/pages/pam/PamAccountsPage/components/AccountViewToggle.tsx @@ -1,13 +1,9 @@ import { Button } from "@app/components/v2"; - -export enum AccountView { - Flat = "flat", - Nested = "nested" -} +import { PamAccountView } from "@app/hooks/api/pam"; type Props = { - value: AccountView; - onChange: (value: AccountView) => void; + value: PamAccountView; + onChange: (value: PamAccountView) => void; }; export const AccountViewToggle = ({ value, onChange }: Props) => { @@ -16,11 +12,11 @@ export const AccountViewToggle = ({ value, onChange }: Props) => { - {accountView !== AccountView.Flat && ( + {accountView !== PamAccountView.Flat && ( handlePopUpToggle("misc", isOpen)} @@ -414,11 +386,11 @@ export const PamAccountsTable = ({ accounts, folders, projectId }: Props) => { Accounts handleSort(OrderBy.Name)} + onClick={() => handleSort(PamAccountOrderBy.Name)} > - + @@ -426,45 +398,48 @@ export const PamAccountsTable = ({ accounts, folders, projectId }: Props) => { - {accountView !== AccountView.Flat && - foldersToRender.map((folder) => ( - handleFolderClick(folder)} - onUpdate={(e) => handlePopUpOpen("updateFolder", e)} - onDelete={(e) => handlePopUpOpen("deleteFolder", e)} - /> - ))} - {currentPageData.map((account) => ( - { - handlePopUpOpen("accessAccount", e); - }} - onUpdate={(e) => handlePopUpOpen("updateAccount", e)} - onDelete={(e) => handlePopUpOpen("deleteAccount", e)} - /> - ))} + {isLoading && } + {!isLoading && ( + <> + {accountView !== PamAccountView.Flat && + foldersToRender.map((folder) => ( + handleFolderClick(folder)} + onUpdate={(e) => handlePopUpOpen("updateFolder", e)} + onDelete={(e) => handlePopUpOpen("deleteFolder", e)} + /> + ))} + {filteredAccounts.map((account) => ( + { + handlePopUpOpen("accessAccount", e); + }} + onUpdate={(e) => handlePopUpOpen("updateAccount", e)} + onDelete={(e) => handlePopUpOpen("deleteAccount", e)} + /> + ))} + + )} - {Boolean(filteredAccounts.length) && ( + {Boolean(totalCount) && !isLoading && ( setPage(newPage)} + onChangePerPage={handlePerPageChange} /> )} - {isContentEmpty && ( + {!isLoading && isContentEmpty && ( { isOpen={popUp.addFolder.isOpen} onOpenChange={(isOpen) => handlePopUpToggle("addFolder", isOpen)} projectId={projectId} - currentFolderId={effectiveFolderIdForFiltering} + currentFolderId={currentFolderId} /> { isOpen={popUp.addAccount.isOpen} onOpenChange={(isOpen) => handlePopUpToggle("addAccount", isOpen)} projectId={projectId} - currentFolderId={effectiveFolderIdForFiltering} + currentFolderId={currentFolderId} /> ); diff --git a/frontend/src/pages/pam/PamAccountsPage/components/PamAddFolderModal.tsx b/frontend/src/pages/pam/PamAccountsPage/components/PamAddFolderModal.tsx index 266a724cd..d81bd743c 100644 --- a/frontend/src/pages/pam/PamAccountsPage/components/PamAddFolderModal.tsx +++ b/frontend/src/pages/pam/PamAccountsPage/components/PamAddFolderModal.tsx @@ -14,8 +14,6 @@ type Props = { export const PamAddFolderModal = ({ isOpen, onOpenChange, projectId, currentFolderId }: Props) => { const createPamFolder = useCreatePamFolder(); - console.log({ currentFolderId }); - const onSubmit = async (formData: Pick) => { await createPamFolder.mutateAsync({ ...formData, diff --git a/frontend/src/pages/pam/PamAccountsPage/components/ResourceSelect.tsx b/frontend/src/pages/pam/PamAccountsPage/components/ResourceSelect.tsx index 6c6bcfba6..879167195 100644 --- a/frontend/src/pages/pam/PamAccountsPage/components/ResourceSelect.tsx +++ b/frontend/src/pages/pam/PamAccountsPage/components/ResourceSelect.tsx @@ -1,11 +1,12 @@ +import { useState } from "react"; import { Controller, FormProvider, useForm } from "react-hook-form"; import { SingleValue } from "react-select"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; -import { Button, FilterableSelect, FormControl, ModalClose, Spinner } from "@app/components/v2"; +import { Button, FilterableSelect, FormControl, ModalClose } from "@app/components/v2"; import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context"; -import { usePopUp } from "@app/hooks"; +import { useDebounce, usePopUp } from "@app/hooks"; import { PamResourceType, useListPamResources } from "@app/hooks/api/pam"; import { PamAddResourceModal } from "../../PamResourcesPage/components/PamAddResourceModal"; @@ -28,7 +29,17 @@ type FormData = z.infer; export const ResourceSelect = ({ onSubmit, projectId }: Props) => { const { permission } = useProjectPermission(); - const { isPending, data: resources } = useListPamResources(projectId); + + const [search, setSearch] = useState(""); + const [debouncedSearch] = useDebounce(search, 350); + + const { isPending, data } = useListPamResources({ + projectId, + limit: 100, + search: debouncedSearch + }); + + const resources = data?.resources || []; const { popUp, handlePopUpToggle, handlePopUpOpen } = usePopUp(["addResource"] as const); @@ -43,15 +54,6 @@ export const ResourceSelect = ({ onSubmit, projectId }: Props) => { ProjectPermissionSub.PamResources ); - if (isPending) { - return ( -
- -

Loading options...

-
- ); - } - return ( <> @@ -65,6 +67,12 @@ export const ResourceSelect = ({ onSubmit, projectId }: Props) => { { + if (actionMeta.action === "input-change") { + setSearch(val); + } + }} onChange={(newValue) => { if ((newValue as SingleValue<{ id: string }>)?.id === "_create") { handlePopUpOpen("addResource"); diff --git a/frontend/src/pages/pam/PamAccountsPage/route.tsx b/frontend/src/pages/pam/PamAccountsPage/route.tsx index 7fbf81b45..65a8c567e 100644 --- a/frontend/src/pages/pam/PamAccountsPage/route.tsx +++ b/frontend/src/pages/pam/PamAccountsPage/route.tsx @@ -2,12 +2,13 @@ import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react import { zodValidator } from "@tanstack/zod-adapter"; import { z } from "zod"; -import { AccountView } from "./components/AccountViewToggle"; +import { PamAccountView } from "@app/hooks/api/pam"; + import { PamAccountsPage } from "./PamAccountsPage"; const PamAccountsPageQueryParamsSchema = z.object({ search: z.string().optional(), - accountView: z.nativeEnum(AccountView).optional(), + accountView: z.nativeEnum(PamAccountView).optional(), accountPath: z.string().catch("/") }); diff --git a/frontend/src/pages/pam/PamResourcesPage/components/PamResourcesSection.tsx b/frontend/src/pages/pam/PamResourcesPage/components/PamResourcesSection.tsx index 41be0a652..dd29c1b21 100644 --- a/frontend/src/pages/pam/PamResourcesPage/components/PamResourcesSection.tsx +++ b/frontend/src/pages/pam/PamResourcesPage/components/PamResourcesSection.tsx @@ -1,17 +1,9 @@ -import { ContentLoader } from "@app/components/v2"; import { useProject } from "@app/context"; -import { useListPamResources } from "@app/hooks/api/pam"; import { PamResourcesTable } from "./PamResourcesTable"; export const PamResourcesSection = () => { const { currentProject } = useProject(); - const { data: resources = [], isPending } = useListPamResources(currentProject.id, { - refetchInterval: 30000 - }); - - if (isPending) return ; - - return ; + return ; }; diff --git a/frontend/src/pages/pam/PamResourcesPage/components/PamResourcesTable.tsx b/frontend/src/pages/pam/PamResourcesPage/components/PamResourcesTable.tsx index 2f46a8aca..14f08ccad 100644 --- a/frontend/src/pages/pam/PamResourcesPage/components/PamResourcesTable.tsx +++ b/frontend/src/pages/pam/PamResourcesPage/components/PamResourcesTable.tsx @@ -27,6 +27,7 @@ import { Pagination, Table, TableContainer, + TableSkeleton, TBody, Th, THead, @@ -39,29 +40,34 @@ import { OrgGatewayPermissionActions, OrgPermissionSubjects } from "@app/context/OrgPermissionContext/types"; +import { + getUserTablePreference, + PreferenceKey, + setUserTablePreference +} from "@app/helpers/userTablePreferences"; import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks"; import { OrderByDirection } from "@app/hooks/api/generic/types"; -import { PAM_RESOURCE_TYPE_MAP, PamResourceType, TPamResource } from "@app/hooks/api/pam"; +import { + PAM_RESOURCE_TYPE_MAP, + PamResourceOrderBy, + PamResourceType, + useListPamResources +} from "@app/hooks/api/pam"; import { PamAddResourceModal } from "./PamAddResourceModal"; import { PamDeleteResourceModal } from "./PamDeleteResourceModal"; import { PamResourceRow } from "./PamResourceRow"; import { PamUpdateResourceModal } from "./PamUpdateResourceModal"; -enum OrderBy { - Name = "name" -} - -type Filters = { - resourceType: PamResourceType[]; +type PamResourceFilter = { + resourceTypes: PamResourceType[]; }; type Props = { projectId: string; - resources: TPamResource[]; }; -export const PamResourcesTable = ({ projectId, resources }: Props) => { +export const PamResourcesTable = ({ projectId }: Props) => { const navigate = useNavigate({ from: ROUTE_PATHS.Pam.ResourcesPage.path }); const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([ @@ -74,12 +80,13 @@ export const PamResourcesTable = ({ projectId, resources }: Props) => { from: ROUTE_PATHS.Pam.ResourcesPage.id }); - const [filters, setFilters] = useState({ - resourceType: [] + const [filter, setFilter] = useState({ + resourceTypes: [] }); const { search, + debouncedSearch, setSearch, setPage, page, @@ -91,51 +98,55 @@ export const PamResourcesTable = ({ projectId, resources }: Props) => { orderBy, setOrderDirection, setOrderBy - } = usePagination(OrderBy.Name, { initPerPage: 20, initSearch }); + } = usePagination(PamResourceOrderBy.Name, { + initPerPage: getUserTablePreference("pamResourcesTable", PreferenceKey.PerPage, 20), + initSearch + }); - const filteredResources = useMemo( - () => - resources - .filter((resource) => { - const { name, resourceType } = resource; + const handlePerPageChange = (newPerPage: number) => { + setPerPage(newPerPage); + setUserTablePreference("pamResourcesTable", PreferenceKey.PerPage, newPerPage); + }; - if (filters.resourceType.length && !filters.resourceType.includes(resourceType)) { - return false; - } + const { data, isLoading } = useListPamResources({ + projectId, + offset, + limit: perPage, + search: debouncedSearch, + orderBy, + orderDirection, + filterResourceTypes: filter.resourceTypes.length ? filter.resourceTypes.join(",") : undefined + }); - const searchValue = search.trim().toLowerCase(); - - const { name: resourceTypeName } = PAM_RESOURCE_TYPE_MAP[resourceType]; - - return ( - name.toLowerCase().includes(searchValue) || - resourceTypeName.toLowerCase().includes(searchValue) - ); - }) - .sort((a, b) => { - const [one, two] = orderDirection === OrderByDirection.ASC ? [a, b] : [b, a]; - - switch (orderBy) { - case OrderBy.Name: - default: - return one.name.toLowerCase().localeCompare(two.name.toLowerCase()); - } - }), - [resources, orderDirection, search, orderBy, filters] - ); + const resources = data?.resources || []; + const totalCount = data?.totalCount || 0; useResetPageHelper({ - totalCount: filteredResources.length, + totalCount, offset, setPage }); - const currentPageData = useMemo( - () => filteredResources.slice(offset, perPage * page), - [filteredResources, offset, perPage, page] + const filteredResources = useMemo( + () => + resources.filter((resource) => { + const { name, resourceType } = resource; + + if (filter.resourceTypes.length && !filter.resourceTypes.includes(resourceType)) { + return false; + } + + const searchValue = search.trim().toLowerCase(); + + return ( + name.toLowerCase().includes(searchValue) || + resourceType.toLowerCase().includes(searchValue) + ); + }), + [resources, search, filter] ); - const handleSort = (column: OrderBy) => { + const handleSort = (column: PamResourceOrderBy) => { if (column === orderBy) { toggleOrderDirection(); return; @@ -145,12 +156,13 @@ export const PamResourcesTable = ({ projectId, resources }: Props) => { setOrderDirection(OrderByDirection.ASC); }; - const getClassName = (col: OrderBy) => twMerge("ml-2", orderBy === col ? "" : "opacity-30"); + const getClassName = (col: PamResourceOrderBy) => + twMerge("ml-2", orderBy === col ? "" : "opacity-30"); - const getColSortIcon = (col: OrderBy) => + const getColSortIcon = (col: PamResourceOrderBy) => orderDirection === OrderByDirection.DESC && orderBy === col ? faArrowUp : faArrowDown; - const isTableFiltered = Boolean(filters.resourceType.length); + const isTableFiltered = Boolean(filter.resourceTypes.length); const isContentEmpty = !filteredResources.length; const isSearchEmpty = isContentEmpty && (Boolean(search) || isTableFiltered); @@ -187,43 +199,38 @@ export const PamResourcesTable = ({ projectId, resources }: Props) => { Resource Type - {resources.length ? ( - [...new Set(resources.map(({ resourceType }) => resourceType))].map((type) => { - const { name, image } = PAM_RESOURCE_TYPE_MAP[type]; - - return ( - { - e.preventDefault(); - setFilters((prev) => ({ - ...prev, - resourceType: prev.resourceType.includes(type) - ? prev.resourceType.filter((a) => a !== type) - : [...prev.resourceType, type] - })); - }} - key={type} - icon={ - filters.resourceType.includes(type) && ( - - ) - } - iconPos="right" - > -
- {`${name} - {name} -
- - ); - }) - ) : ( - No Resources - )} + {Object.entries(PAM_RESOURCE_TYPE_MAP).map(([type, { name, image }]) => { + const resourceType = type as PamResourceType; + return ( + { + e.preventDefault(); + setFilter((prev) => ({ + ...prev, + resourceTypes: prev.resourceTypes.includes(resourceType) + ? prev.resourceTypes.filter((a) => a !== resourceType) + : [...prev.resourceTypes, resourceType] + })); + }} + key={resourceType} + icon={ + filter.resourceTypes.includes(resourceType) && ( + + ) + } + iconPos="right" + > +
+ {`${name} + {name} +
+ + ); + })} { Resource handleSort(OrderBy.Name)} + onClick={() => handleSort(PamResourceOrderBy.Name)} > - + @@ -275,27 +282,29 @@ export const PamResourcesTable = ({ projectId, resources }: Props) => { - {currentPageData.map((resource) => ( - handlePopUpOpen("updateResource", e)} - onDelete={(e) => handlePopUpOpen("deleteResource", e)} - search={search.trim().toLowerCase()} - /> - ))} + {isLoading && } + {!isLoading && + filteredResources.map((resource) => ( + handlePopUpOpen("updateResource", e)} + onDelete={(e) => handlePopUpOpen("deleteResource", e)} + search={search.trim().toLowerCase()} + /> + ))} - {Boolean(filteredResources.length) && ( + {Boolean(totalCount) && !isLoading && ( setPage(newPage)} + onChangePerPage={handlePerPageChange} /> )} - {isContentEmpty && ( + {!isLoading && isContentEmpty && (