GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-07-25 01:34:28 +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,
renderColumnCell,
}),
[query, queryTableData, renderColumnCell, renderActionCell],
[query, queryTableData, renderActionCell, renderColumnCell],
);
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;
};
type DynamicColumn = {
export type DynamicColumn = {
query: IBuilderQuery | IBuilderFormula;
field: string;
dataIndex: string;
title: string;
data: (string | number)[];
type: 'field' | 'operator' | 'formula';
// sortable: boolean;
};
type DynamicColumns = DynamicColumn[];
@ -91,37 +90,13 @@ const getQueryByName = <T extends keyof QueryBuilderData>(
return currentQuery as T extends 'queryData' ? IBuilderQuery : IBuilderFormula;
};
const addListLabels = (
const addLabels = (
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,
dynamicColumns: DynamicColumns,
query: IBuilderQuery | IBuilderFormula,
): void => {
if (isValueExist('dataIndex', label, dynamicColumns)) return;
// const labelValue = labels[label];
// const isNumber = !Number.isNaN(parseFloat(String(labelValue)));
const fieldObj: DynamicColumn = {
query,
field: label as string,
@ -129,7 +104,6 @@ const addSeriaLabels = (
title: label,
data: [],
type: 'field',
// sortable: isNumber,
};
dynamicColumns.push(fieldObj);
@ -155,7 +129,6 @@ const addOperatorFormulaColumns = (
title: customLabel || formulaLabel,
data: [],
type: 'formula',
// sortable: isNumber,
};
dynamicColumns.push(formulaColumn);
@ -181,7 +154,6 @@ const addOperatorFormulaColumns = (
title: customLabel || operatorLabel,
data: [],
type: 'operator',
// sortable: isNumber,
};
dynamicColumns.push(operatorColumn);
@ -224,7 +196,7 @@ const getDynamicColumns: GetDynamicColumns = (queryTableData, query) => {
if (list) {
list.forEach((listItem) => {
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) => {
if (label === currentQuery?.queryName) return;
addSeriaLabels(label as string, dynamicColumns, currentStagedQuery);
addLabels(currentStagedQuery, label, dynamicColumns);
});
});
}
@ -486,10 +458,6 @@ const generateTableColumns = (
title: item.title,
width: QUERY_TABLE_CONFIG.width,
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];
@ -504,10 +472,14 @@ export const createTableColumnsFromQuery: CreateTableDataFromQuery = ({
renderActionCell,
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(
queryTableData,
sortedQueryTableData,
dynamicColumns,
);