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

feat: add ordering and sorting table column (#3281)

Browse Source
This commit is contained in:
Yevhen Shevchenko 2023-08-09 14:02:25 +03:00 committed by GitHub
parent 7ad489ebb4
commit f47c23032c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,7 +20,7 @@ export function QueryTable({
renderActionCell, renderActionCell,
renderColumnCell, renderColumnCell,
}), }),
[query, queryTableData, renderColumnCell, renderActionCell], [query, queryTableData, renderActionCell, renderColumnCell],
); );
const tableColumns = modifyColumns ? modifyColumns(columns) : columns; const tableColumns = modifyColumns ? modifyColumns(columns) : columns;

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

@ -28,14 +28,13 @@ export type RowData = {
[key: string]: string | number; [key: string]: string | number;
}; };
type DynamicColumn = { export type DynamicColumn = {
query: IBuilderQuery | IBuilderFormula; query: IBuilderQuery | IBuilderFormula;
field: string; field: string;
dataIndex: string; dataIndex: string;
title: string; title: string;
data: (string | number)[]; data: (string | number)[];
type: 'field' | 'operator' | 'formula'; type: 'field' | 'operator' | 'formula';
// sortable: boolean;
}; };
type DynamicColumns = DynamicColumn[]; type DynamicColumns = DynamicColumn[];
@ -91,37 +90,13 @@ const getQueryByName = <T extends keyof QueryBuilderData>(
return currentQuery as T extends 'queryData' ? IBuilderQuery : IBuilderFormula; return currentQuery as T extends 'queryData' ? IBuilderQuery : IBuilderFormula;
}; };
const addListLabels = ( const addLabels = (
query: IBuilderQuery | IBuilderFormula, query: IBuilderQuery | IBuilderFormula,
label: ListItemKey,
dynamicColumns: DynamicColumns,
): void => {
if (isValueExist('dataIndex', label, dynamicColumns)) return;
const fieldObj: DynamicColumn = {
query,
field: 'label',
dataIndex: label as string,
title: label as string,
data: [],
type: 'field',
// sortable: isNumber,
};
dynamicColumns.push(fieldObj);
};
const addSeriaLabels = (
label: string, label: string,
dynamicColumns: DynamicColumns, dynamicColumns: DynamicColumns,
query: IBuilderQuery | IBuilderFormula,
): void => { ): void => {
if (isValueExist('dataIndex', label, dynamicColumns)) return; if (isValueExist('dataIndex', label, dynamicColumns)) return;
// const labelValue = labels[label];
// const isNumber = !Number.isNaN(parseFloat(String(labelValue)));
const fieldObj: DynamicColumn = { const fieldObj: DynamicColumn = {
query, query,
field: label as string, field: label as string,
@ -129,7 +104,6 @@ const addSeriaLabels = (
title: label, title: label,
data: [], data: [],
type: 'field', type: 'field',
// sortable: isNumber,
}; };
dynamicColumns.push(fieldObj); dynamicColumns.push(fieldObj);
@ -155,7 +129,6 @@ const addOperatorFormulaColumns = (
title: customLabel || formulaLabel, title: customLabel || formulaLabel,
data: [], data: [],
type: 'formula', type: 'formula',
// sortable: isNumber,
}; };
dynamicColumns.push(formulaColumn); dynamicColumns.push(formulaColumn);
@ -181,7 +154,6 @@ const addOperatorFormulaColumns = (
title: customLabel || operatorLabel, title: customLabel || operatorLabel,
data: [], data: [],
type: 'operator', type: 'operator',
// sortable: isNumber,
}; };
dynamicColumns.push(operatorColumn); dynamicColumns.push(operatorColumn);
@ -224,7 +196,7 @@ const getDynamicColumns: GetDynamicColumns = (queryTableData, query) => {
if (list) { if (list) {
list.forEach((listItem) => { list.forEach((listItem) => {
Object.keys(listItem.data).forEach((label) => { Object.keys(listItem.data).forEach((label) => {
addListLabels(currentStagedQuery, label as ListItemKey, dynamicColumns); addLabels(currentStagedQuery, label, dynamicColumns);
}); });
}); });
} }
@ -245,7 +217,7 @@ const getDynamicColumns: GetDynamicColumns = (queryTableData, query) => {
Object.keys(seria.labels).forEach((label) => { Object.keys(seria.labels).forEach((label) => {
if (label === currentQuery?.queryName) return; if (label === currentQuery?.queryName) return;
addSeriaLabels(label as string, dynamicColumns, currentStagedQuery); addLabels(currentStagedQuery, label, dynamicColumns);
}); });
}); });
} }
@ -486,10 +458,6 @@ const generateTableColumns = (
title: item.title, title: item.title,
width: QUERY_TABLE_CONFIG.width, width: QUERY_TABLE_CONFIG.width,
render: renderColumnCell && renderColumnCell[item.dataIndex], render: renderColumnCell && renderColumnCell[item.dataIndex],
// sorter: item.sortable
// ? (a: RowData, b: RowData): number =>
// (a[item.key] as number) - (b[item.key] as number)
// : false,
}; };
return [...acc, column]; return [...acc, column];
@ -504,10 +472,14 @@ export const createTableColumnsFromQuery: CreateTableDataFromQuery = ({
renderActionCell, renderActionCell,
renderColumnCell, renderColumnCell,
}) => { }) => {
const dynamicColumns = getDynamicColumns(queryTableData, query); const sortedQueryTableData = queryTableData.sort((a, b) =>
a.queryName < b.queryName ? -1 : 1,
);
const dynamicColumns = getDynamicColumns(sortedQueryTableData, query);
const { filledDynamicColumns, rowsLength } = fillColumnsData( const { filledDynamicColumns, rowsLength } = fillColumnsData(
queryTableData, sortedQueryTableData,
dynamicColumns, dynamicColumns,
); );