Fix segment status sorting in table UI

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<string, TableSortFunction> = 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'));
                       }

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);
+}