diff --git a/pinot-controller/src/main/resources/app/components/Table.tsx b/pinot-controller/src/main/resources/app/components/Table.tsx index f6320d2e542c..829933a8deaf 100644 --- a/pinot-controller/src/main/resources/app/components/Table.tsx +++ b/pinot-controller/src/main/resources/app/components/Table.tsx @@ -48,7 +48,7 @@ import { Link } from 'react-router-dom'; import Chip from '@material-ui/core/Chip'; import { get, has, orderBy } from 'lodash'; import app_state from '../app_state'; -import { sortBytes, sortNumberOfSegments } from '../utils/SortFunctions' +import { sortBytes, sortCellValue, sortNumberOfSegments } from '../utils/SortFunctions' import Utils from '../utils/Utils'; import TableToolbar from './TableToolbar'; import SimpleAccordion from './SimpleAccordion'; @@ -87,6 +87,7 @@ let staticSortFunctions: Map = new Map() staticSortFunctions.set("Number of Segments", sortNumberOfSegments); staticSortFunctions.set("Estimated Size", sortBytes); staticSortFunctions.set("Reported Size", sortBytes); +staticSortFunctions.set("Status", sortCellValue); const StyledTableRow = withStyles((theme) => createStyles({ @@ -561,8 +562,8 @@ export default function CustomizedTables({ key={index} onClick={() => { if (staticSortFunctions.has(column)) { - finalData.sort((a, b) => staticSortFunctions.get(column)(a, b, column, index, order)); - setFinalData(finalData); + const sortFunction = staticSortFunctions.get(column); + setFinalData([...finalData].sort((a, b) => sortFunction(a, b, column, index, order))); } else { setFinalData(orderBy(finalData, column+app_state.columnNameSeparator+index, order ? 'asc' : 'desc')); } diff --git a/pinot-controller/src/main/resources/app/utils/SortFunctions.tsx b/pinot-controller/src/main/resources/app/utils/SortFunctions.tsx index a9943533c1dc..40983e4f03b1 100644 --- a/pinot-controller/src/main/resources/app/utils/SortFunctions.tsx +++ b/pinot-controller/src/main/resources/app/utils/SortFunctions.tsx @@ -24,10 +24,31 @@ import app_state from "../app_state"; // table sorting requires a 1/-1 result. This helper function helps calculate this // from any two results. const valuesToResultNumber = (aRes: any, bRes: any, order: boolean): number => { + if (aRes === bRes) { + return 0; + } const result = order ? aRes > bRes : aRes < bRes; return result ? 1 : -1; } +const getCellValue = (row: any, column: string, index: number): any => { + const cellValue = row[column+app_state.columnNameSeparator+index]; + if (cellValue && typeof cellValue === "object" && "value" in cellValue) { + return cellValue.value; + } + return cellValue; +} + +const normalizeCellValue = (value: any): string | number => { + if (typeof value === "number") { + return value; + } + if (value === null || value === undefined) { + return ""; + } + return value.toString().toLowerCase(); +} + export const sortNumberOfSegments: TableSortFunction = (a: any, b: any, column: string, index: number, order: boolean) => { const aSegmentInt = parseInt(a[column+app_state.columnNameSeparator+index]); const bSegmentInt = parseInt(b[column+app_state.columnNameSeparator+index]); @@ -47,3 +68,9 @@ export const sortBytes: TableSortFunction = (a: any, b: any, column: string, ind return valuesToResultNumber(aUnitIndex, bUnitIndex, order); } } + +export const sortCellValue: TableSortFunction = (a: any, b: any, column: string, index: number, order: boolean) => { + const aValue = normalizeCellValue(getCellValue(a, column, index)); + const bValue = normalizeCellValue(getCellValue(b, column, index)); + return valuesToResultNumber(aValue, bValue, order); +}