GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-13 21:26:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: custom render is added int he query table (#3195)

Browse Source
This commit is contained in:
Palash Gupta 2023-07-25 15:45:51 +05:30 committed by GitHub
parent 55f49c38c7
commit 59deac01bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/container/QueryTable/QueryTable.intefaces.ts
View File

@ -13,4 +13,5 @@ export type QueryTableProps = Omit<
query: Query; query: Query;
renderActionCell?: (record: RowData) => ReactNode; renderActionCell?: (record: RowData) => ReactNode;
modifyColumns?: (columns: ColumnsType<RowData>) => ColumnsType<RowData>; modifyColumns?: (columns: ColumnsType<RowData>) => ColumnsType<RowData>;
renderColumnCell?: Record<string, (record: RowData) => ReactNode>;
}; };

4
frontend/src/container/QueryTable/QueryTable.tsx
View File

@ -9,6 +9,7 @@ export function QueryTable({
query, query,
renderActionCell, renderActionCell,
modifyColumns, modifyColumns,
renderColumnCell,
...props ...props
}: QueryTableProps): JSX.Element { }: QueryTableProps): JSX.Element {
const { columns, dataSource } = useMemo( const { columns, dataSource } = useMemo(
@ -17,8 +18,9 @@ export function QueryTable({
query, query,
queryTableData, queryTableData,
renderActionCell, renderActionCell,
renderColumnCell,
}), }),
[query, queryTableData, renderActionCell], [query, queryTableData, renderColumnCell, renderActionCell],
); );
const filteredColumns = columns.filter((item) => item.key !== 'timestamp'); const filteredColumns = columns.filter((item) => item.key !== 'timestamp');

7
frontend/src/lib/query/createTableColumnsFromQuery.ts
View File

@ -15,7 +15,7 @@ import { v4 as uuid } from 'uuid';
type CreateTableDataFromQueryParams = Pick< type CreateTableDataFromQueryParams = Pick<
QueryTableProps, QueryTableProps,
'queryTableData' | 'query' | 'renderActionCell' 'queryTableData' | 'query' | 'renderActionCell' | 'renderColumnCell'
>; >;
export type RowData = { export type RowData = {
@ -347,6 +347,7 @@ const generateData = (
const generateTableColumns = ( const generateTableColumns = (
dynamicColumns: DynamicColumns, dynamicColumns: DynamicColumns,
renderColumnCell?: QueryTableProps['renderColumnCell'],
): ColumnsType<RowData> => { ): ColumnsType<RowData> => {
const columns: ColumnsType<RowData> = dynamicColumns.reduce< const columns: ColumnsType<RowData> = dynamicColumns.reduce<
ColumnsType<RowData> ColumnsType<RowData>
@ -355,6 +356,7 @@ const generateTableColumns = (
dataIndex: item.key, dataIndex: item.key,
key: item.key, key: item.key,
title: item.title, title: item.title,
render: renderColumnCell && renderColumnCell[item.key],
// sorter: item.sortable // sorter: item.sortable
// ? (a: RowData, b: RowData): number => // ? (a: RowData, b: RowData): number =>
// (a[item.key] as number) - (b[item.key] as number) // (a[item.key] as number) - (b[item.key] as number)
@ -371,6 +373,7 @@ export const createTableColumnsFromQuery: CreateTableDataFromQuery = ({
query, query,
queryTableData, queryTableData,
renderActionCell, renderActionCell,
renderColumnCell,
}) => { }) => {
const dynamicColumns = getDynamicColumns(queryTableData, query); const dynamicColumns = getDynamicColumns(queryTableData, query);
@ -381,7 +384,7 @@ export const createTableColumnsFromQuery: CreateTableDataFromQuery = ({
const dataSource = generateData(filledDynamicColumns, rowsLength); const dataSource = generateData(filledDynamicColumns, rowsLength);
const columns = generateTableColumns(filledDynamicColumns); const columns = generateTableColumns(filledDynamicColumns, renderColumnCell);
const actionsCell: ColumnType<RowData> | null = renderActionCell const actionsCell: ColumnType<RowData> | null = renderActionCell
? { ? {