Provide front-end sorting of trees for based on the column

Right now the sorting is done using string sorting. If the data in the
columns are numbers, then number sorting should be used. Moreover,
some known string formatting can be reversed to extract the number and
do a number comparison. For example, some data providers provide columns
with duration, where the value is formatted to show 'ns' for nanosecond,
'us' micro-second and so on. Other example, are percentages shown.

The tree of the CPU usage view when using the Trace Compass trace server
is good example for different columns and formatting.

Note that this implementation is a temporary solution until the TSP and
server back-end is augmented to provide a different mechanism to
support sorting.

fixes eclipse-cdt-cloud#577

Signed-off-by: Bernd Hufmann <Bernd.Hufmann@ericsson.com>

packages/react-components/src/components/utils/filtrer-tree/sort.tsx

@@ -47,13 +47,26 @@ export const sortNodes = (nodes: TreeNode[], sortConfig: SortConfig[]): TreeNode
                 result = 0;
             } else {
                 if (typeof value1 === 'string' && typeof value2 === 'string') {
-                    const comp = (value1 as string).localeCompare(value2);
-                    result = (order === 'asc') ? -comp : comp;
+                    const number1 = parseValue(value1);
+                    const number2 = parseValue(value2);
+                    let comp = 0;
+                    if (number1 !== undefined && number2 !== undefined) {
+                        if (number1 < number2) {
+                            result = (order === 'asc') ? 1 : -1;
+                        } else if (number1 > number2) {
+                            result = (order === 'asc') ? -1 : 1;
+                        } else {
+                            result = 0;
+                        }
+                    } else {
+                        comp = (value1 as string).localeCompare(value2);
+                        result = (order === 'asc') ? -comp : comp;
+                    }
                 } else {
                     if (value1 < value2) {
-                        result = (order === 'asc') ? -1 : 1;
-                    } else if (value1 > value2) {
                         result = (order === 'asc') ? 1 : -1;
+                    } else if (value1 > value2) {
+                        result = (order === 'asc') ? -1 : 1;
                     } else {
                         result = 0;
                     }
@@ -69,3 +82,33 @@ export const sortNodes = (nodes: TreeNode[], sortConfig: SortConfig[]): TreeNode
     }
     return sortedNodes;
 };
+
+const parseValue = (valueString: string): number | undefined => {
+    let floatNumber = NaN;
+    let factor = -1;
+    const valueArray = valueString.split(' ');
+    if (valueArray.length === 1) {
+        floatNumber = Number.parseFloat(valueString);
+        factor = 1;
+    } else if (valueArray.length === 2) {
+        const value = valueArray[0];
+        const unit = valueArray[1];
+        if (unit === 'ns' || unit === '%') {
+            factor = 1;
+        } else if (unit === 'us' || unit === ('\u00B5' + 's')) {
+            factor = 1000;
+        } else if (unit === 'ms') {
+            factor = 1000 * 1000;
+        } else if (unit === 's') {
+            factor = 1000 * 1000 * 1000;
+        } else {
+            return undefined;
+        }
+        floatNumber = Number.parseFloat(value);
+    }
+    if (!Number.isNaN(floatNumber)) {
+        return floatNumber * factor;
+    }
+    return undefined;
+};
+