Graylog 前端 EntityDataTable 组件实战：自定义列渲染、权限控制与列宽布局

日志分析运维观测【免费下载链接】graylog2-serverFree and open log management项目地址https://gitcode.com/gh_mirrors/gr/graylog2-server点击查看免费下载EntityDataTable是 Graylog Web 界面位于graylog2-web-interface前端仓库中负责渲染实体数据表Entity Data Table的核心通用组件。本文以组件自带的开发文档 EntityDataTable.md 为主体结合其源码实现系统讲解如何为表格定义自定义列渲染器cell/header、按权限控制列显隐、渲染行操作按钮以及使用width、minWidth、staticWidth控制列宽布局。读完本文你将能在 Graylog 前端如集群节点列表、Data 节点、采集器实例等页面中定制出符合业务需求的实体数据表格。一、组件定位从数据到表格的通用桥梁在深入示例之前先明确EntityDataTable在 Graylog Web 界面中的位置。它位于通用组件目录 graylog2-web-interface/src/components/common/EntityDataTable/是上层封装组件PaginatedEntityTable见 PaginatedEntityTable.tsx的内部表格载体。此外集群配置页的 Data 节点、Graylog 节点、MongoDB 节点、OpenSearch 节点列表以及 Collectors 部署中的采集器实例列表如 collectors/instances/ColumnRenderers.tsx都直接使用该组件。从源码看组件签名定义在 EntityDataTable.tsx 的PropsEntity extends EntityBase, Meta中关键 props 包括Props作用默认值columnSchemas全部可用列的 schema列 id、标题、类型、是否可排序、权限等必填entities表格数据行每行必须含idEntityBase必填columnRenderers自定义 cell / header 渲染器可针对属性或类型无entityActions每行操作区的渲染函数无entityAttributesAreCamelCase列 id 是否为 snake_case、属性是否为 camelCase 的映射开关必填bulkSelection批量选择与批量操作actions、onChangeSelection、initialSelection、isEntitySelectable无expandedSectionRenderers/rowOverride行展开区域 / 整行覆盖渲染无layoutPreferences/onLayoutPreferencesChange/onResetLayoutPreferences用户列布局偏好列显隐、顺序、宽度的读写必填activeSort/onSortChange当前排序与排序回调无pageSize/onPageSizeChange/noPageSizeSelect每页条数选择无noColumnReordering禁用列拖拽重排false需要说明的是组件自带文档中的示例为了突出核心概念使用了简化的 prop 命名如data、columnDefinitions、columnPreferences它们与当前源码中的实际 prop 存在如下对应关系——data对应entitiescolumnDefinitions对应columnSchemascolumnPreferences对应layoutPreferences.attributes每个属性以{ status: show | hide }表示显隐ATTRIBUTE_STATUS定义见 Constants.ts。后续示例将按文档语义呈现并标注当前源码下的等价写法。二、自定义 Cell 与 Header 渲染器文档给出的第一个示例展示了如何为指定列注入自定义单元格渲染与表头渲染。原始示例保留如下import EntityDataTable from ./EntityDataTable; EntityDataTable columnPreferences{{ title: { status: show }, description: { status: show } }} data{[ { id: row-id, title: Row title, description: Row description, }, ]} columnDefinitions{[ { id: title, title: Title }, { id: description, title: Description }, ]} columnRenderers{{ title: { renderCell: (listItem) The title: ${listItem.title}, renderHeader: (title) Custom ${title}, }, }} /;对应到当前源码columnRenderers的实际结构定义在 types.ts它是一个包含attributes按属性 id与types按数据类型两级的对象。单个列渲染器ColumnRenderertypes.ts支持以下字段type ColumnRendererEntity extends EntityBase, Meta unknown { renderCell?: (value: unknown, entity: Entity, meta: Meta, additionalInfo?: unknown) React.ReactNode; renderHeader?: (title: string) React.ReactNode; textAlign?: string; minWidth?: number; // px width?: number; // 可分配宽度的分数类似 CSS 单位 fr staticWidth?: number | matchHeader; };因此在当前组件 API 下文档示例的等价写法是EntityDataTable layoutPreferences{{ attributes: { title: { status: show }, description: { status: show } } }} entities{[{ id: row-id, title: Row title, description: Row description }]} columnSchemas{[ { id: title, title: Title, type: STRING }, { id: description, title: Description, type: STRING }, ]} columnRenderers{{ attributes: { title: { renderCell: (title) The title: ${title}, renderHeader: (title) Custom ${title}, }, }, }} entityAttributesAreCamelCase /渲染器合并机制默认渲染器 自定义渲染器columnRenderers并不会完全替代默认渲染逻辑而是与内置默认渲染器深度合并。这一过程实现在 useColumnRenderers.ts 中const renderers merge({}, DefaultColumnRenderers, customColumnRenderers); return Object.fromEntries( columnSchemas.map(({ id, type }) { const typeRenderer renderers.types?.[type]; const attributeRenderer renderers.attributes?.[id]; const columnRenderer merge({}, typeRenderer, attributeRenderer); return [id, columnRenderer]; }), );即先合并DefaultColumnRenderers与自定义渲染器再为每个列取类型级渲染器与属性级渲染器并再次合并。因此即使你只为title列提供了renderCell该列仍会继承类型如STRING的默认渲染而属性级配置始终优先于类型级配置。组件主文件在渲染前通过useColumnRenderers与useAuthorizedColumnSchemas生成按列授权后的渲染器映射见 EntityDataTable.tsx。三、渲染行操作Row Actions文档的第二个示例展示了如何为每一行渲染操作按钮。原始示例保留如下import EntityDataTable from ./EntityDataTable; EntityDataTable columnPreferences{{ title: { status: show }, description: { status: show } }} data{[ { id: row-id, title: Row title, description: Row description, }, ]} columnDefinitions{[ { id: title, title: Title }, { id: description, title: Description }, ]} rowActions{() ( div button typebuttonActions/button /div )} /;在当前源码中行操作对应 props 是entityActions: (entity: Entity) React.ReactNode。EntityDataTable内部会固定生成一个操作列列 id 为ACTIONS_COL_ID actions见 Constants.ts其列定义由 useActionsColumnDefinition.tsx 创建。从 EntityDataTable.tsx 可以看到组件以typeof entityActions function判断是否存在行操作即便没有传entityActions操作列仍会保留并充当弹性尾列elastic tail用于吸收全部列均为静态宽度时剩余的空间见 useColumnWidths.ts 的注释与实现。等价写法的当前 API 形式EntityDataTable layoutPreferences{{ attributes: { title: { status: show }, description: { status: show } } }} entities{[{ id: row-id, title: Row title, description: Row description }]} columnSchemas{[ { id: title, title: Title, type: STRING }, { id: description, title: Description, type: STRING }, ]} entityActions{() ( div button typebuttonActions/button /div )} entityAttributesAreCamelCase /实际页面中行操作通常不止一个按钮MoreActions.tsx将多个操作收敛为More下拉菜单标题常量MORE_ACTIONS_TITLE见 Constants.ts典型参考如集群节点页的 GraylogNodeActions.tsx 与采集器实例的 InstanceActions.tsx。四、按权限控制列渲染文档的第三个示例演示了仅当用户具备所需权限时才渲染某一列。原始示例保留如下import EntityDataTable from ./EntityDataTable; EntityDataTable columnPreferences{{ title: { status: show }, description: { status: show } }} data{[ { id: row-id, title: Row title, description: Row description, }, ]} columnDefinitions{[ { id: title, title: Title }, { id: description, title: Description }, ]} attributePermissions{{ description: { permissions: [description:read], }, }} /;在当前源码中这一能力被抽象到ColumnSchema上schema 可选携带permissions、anyPermissions与hidden见 types.ts。组件通过 useAuthorizedColumnSchemas.ts 基于当前登录用户useCurrentUser过滤出可渲染的列columnSchemas.filter(({ permissions, anyPermissions, hidden }) { if (hidden) return false; if (permissions?.length) { return anyPermissions ? isAnyPermitted(currentUser.permissions, permissions) : isPermitted(currentUser.permissions, permissions); } return true; });hidden为true的列直接剔除声明了permissions的列默认要求用户同时具备全部权限isPermitted若设置anyPermissions: true则只要具备其中任一权限即可isAnyPermitted未声明权限的列默认对所有人可见。EntityDataTable.test.tsx中的测试数据正是这样构造的status列带有permissions: [status:read]见 EntityDataTable.test.tsx。因此当前 API 下实现按权限控制列渲染的推荐写法是在columnSchemas中声明权限而非在渲染器层做判断columnSchemas{[ { id: title, title: Title, type: STRING }, { id: description, title: Description, type: STRING, permissions: [description:read] }, ]}这样无权限用户看到的是该列根本不存在而不是列存在但内容为空——列过滤发生在列定义生成之前useColumnDefinitions只接收authorizedColumnSchemas见 EntityDataTable.tsx列显隐选择器中也不会出现无权列。五、列宽布局width、minWidth 与 staticWidth文档的核心篇幅集中于列宽控制并明确指出Column renderer 可以声明两种互斥的宽度模式列渲染器可以定义width为分数如2。若未定义宽度则使用默认值1。width定义该列应占可分配空间的比例行为类似 CSS 属性flex。可选地还可定义minWidth覆盖弹性列的默认最小宽度确保列无论表格多宽都能保有足够空间。或定义以 px 为单位的staticWidth适用于单元格内容宽度恒定不变如仅包含一个图标的列。请参考EntityDataTable中定义的默认列渲染器其中已为description等常见属性预置了宽度。文档第四个示例原始保留import EntityDataTable from ./EntityDataTable; EntityDataTable columnPreferences{{ title: { status: show }, description: { status: show }, status: { status: show } }} data{[ { id: row-id, title: Entity title, summary: Entity summary, status: status, }, ]} columnDefinitions{[ { id: title, title: Title }, { id: summary, title: Summary }, { id: status, title: Status }, ]} columnRenderers{{ summary: { width: 2, minWidth: 200, }, status: { staticWidth: 100, }, }} /;宽度语义与计算原理上面的语义在源码中得到了精确对应相关常量定义于 Constants.tsDEFAULT_COL_WIDTH 1未指定width时的默认分数DEFAULT_COL_MIN_WIDTH 150px弹性列默认最小宽度另有一系列单元格 padding、边框常量参与计算。实际布局算法位于 useColumnWidths.ts核心步骤为计算可分配宽度calculateAssignableWidth从滚动容器宽度中扣除表格边框宽、批量选择列宽、操作列最小宽度与所有静态列宽统计弹性列总分数totalFlexColumns将所有未设置静态宽度列的width缺省为1累加按分数均分flexColWidth assignableWidth / totalFlexColumns每列目标宽度为Math.floor(flexColWidth * width)应用最小宽度兜底resolvedMinWidth Math.max(minWidth ?? DEFAULT_COL_MIN_WIDTH, headerMinWidths[id] ?? 0)弹性列目标宽度低于该值时取最小值静态列与弹性尾列staticWidth直接作为固定像素若为matchHeader或小于表头最小宽度则取表头最小宽度见 useColumnWidths.ts当所有数据列都是静态宽度时操作列吸收剩余宽度充当弹性尾列。因此summary: { width: 2 }表示 summary 列在弹性列中的权重为 2其宽度是width: 1列的约两倍summary: { minWidth: 200 }确保即使容器很窄summary 列也至少占 200pxstatus: { staticWidth: 100 }表示 status 列恒定 100px不参与弹性分配适合图标等定宽内容。内置默认渲染器的宽度预置文档提醒请查看EntityDataTable中定义的默认列渲染器即 DefaultColumnRenderers.tsx。内置配置包含类型级与属性级两部分const DefaultColumnRenderers { types: { DATE: { renderCell: (dateTime) Timestamp dateTime{dateTime} /, staticWidth: 160 }, STRING: { renderCell: (text) TextOverflowEllipsis{text}/TextOverflowEllipsis }, DOUBLE: { textAlign: right }, INT: { textAlign: right }, LONG: { textAlign: right }, }, attributes: { description: { width: 2 }, summary: { width: 1.5 }, favorite: { renderHeader: () , staticWidth: 30 }, }, };从中可以看到几个可直接复用的约定description列默认弹性权重为2信息密度高需要更宽空间summary为1.5日期时间列使用Timestamp组件渲染并固定160px数字类型列默认右对齐favorite收藏星标这类纯图标列用staticWidth: 30固定宽度并隐藏表头文字字符串默认以TextOverflowEllipsis渲染超长文本自动省略这也是为何长文本列建议配置较大的minWidth。自定义columnRenderers会通过lodash/merge与上述默认值深度合并见上文渲染器合并机制所以你可以只覆盖单个字段例如仅给description换一个renderCell宽度仍保持默认的2其余行为沿用默认。六、在 PaginatedEntityTable 中的集成方式EntityDataTable通常不单独使用而是由PaginatedEntityTable提供数据获取、搜索、过滤与分页能力后将entities、columnSchemas、layoutPreferences等透传给它。可参考 PaginatedEntityTable.tsx 中useTableLayout、useUpdateUserLayoutPreferences、useTableEventHandlers的配合列布局偏好显隐、顺序、宽度、排序、每页条数、切片统一由 useTableLayout.ts 管理并通过useUpdateUserLayoutPreferences持久化。此外组件还内置了列拖拽重排TableDndProvideruseDndCollisionDetection支持以noColumnReordering关闭、列显隐下拉ColumnsVisibilitySelect支持一键重置布局、批量选择行bulkSelection勾选列 id 为bulk-select、行展开区域expandedSectionRenderers等能力均可按需在真实页面中组合使用。七、测试验证与质量保障组件行为有较完整的测试覆盖见 EntityDataTable.test.tsx约 500 行其中与本文档主题直接相关的用例包括渲染选中列与表头验证title、status等已 show 的列出现未选中的stream列不出现对应列显隐与columnPreferences/layoutPreferences.attributes渲染默认 cell 渲染器description列内容按默认渲染呈现渲染自定义 cell 与 header 渲染器传入columnRenderers{{ attributes: { title: {...} } }}断言单元格输出The title: ${title}、表头输出Custom ... Header见 EntityDataTable.test.tsx正是文档第一节示例的回归验证。这些测试表明文档中的用法自定义渲染器、权限过滤、布局偏好均已落实为组件实际行为可直接作为实现自定义表格时的参考基准。结语EntityDataTable用一层清晰的渲染器抽象把列如何显示与数据从哪来解耦权限过滤由ColumnSchema声明并交给useAuthorizedColumnSchemas统一处理显示样式由columnRenderers声明并与DefaultColumnRenderers深度合并列宽则由width弹性分数、minWidth弹性下限与staticWidth固定像素三种维度共同决定。在 Graylog Web 界面中开发新的实体列表页面时只需组合 EntityDataTable.tsx、types.ts 与默认渲染器 DefaultColumnRenderers.tsx即可获得与集群节点、采集器实例等页面一致的交互体验。赞分享日志分析运维观测【免费下载链接】graylog2-serverFree and open log management项目地址https://gitcode.com/gh_mirrors/gr/graylog2-server点击查看免费下载相关推荐Graylog 前端 ExpandableList 可折叠列表组件实战指南Graylog 前端 ExpandableList 可折叠列表组件实战指南 导读 ExpandableList 是 Graylog Web 前端 graylo日志分析运维观测react-admin 的 RecordsIterator 组件用自定义布局渲染记录列表的完整指南react admin 的 RecordsIterator 组件用自定义布局渲染记录列表的完整指南 RecordsIterator 是 react adm前端UI组件Element UI自定义列Table列自定义渲染技巧Element UI自定义列Table列自定义渲染技巧 在前端开发中表格Table是展示数据的核心组件但面对复杂的业务场景时默认的列渲染方式往往难以前端UI组件设计系统创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考