'top' is working (#819)

ui100/src/ApiConsole.tsx

@@ -82,6 +82,20 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
             });
     }
 
+    useEffect(() => {
+        retrieveOverview();
+        let mounted = true;
+        let interval = setInterval(() => {
+            if(mounted) {
+                retrieveOverview();
+            }
+        }, 1000);
+        return () => {
+            mounted = false;
+            clearInterval(interval);
+        }
+    }, []);
+
     const retrieveSparklines = () => {
         let environments: string[] = [];
         let shares: string[] = [];
@@ -128,7 +142,6 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
     }
 
     useEffect(() => {
-        retrieveSparklines();
         let interval = setInterval(() => {
             retrieveSparklines();
         }, 5000);
@@ -137,20 +150,6 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
         }
     }, []);
 
-    useEffect(() => {
-        retrieveOverview();
-        let mounted = true;
-        let interval = setInterval(() => {
-            if(mounted) {
-                retrieveOverview();
-            }
-        }, 1000);
-        return () => {
-            mounted = false;
-            clearInterval(interval);
-        }
-    }, []);
-
     useEffect(() => {
         if(selectedNode) {
             switch(selectedNode.type) {

ui100/src/TabularView.tsx

@@ -48,17 +48,37 @@ const TabularView = () => {
     }, [rowSelection]);
 
     const sparkdataTip = (row) => {
-        if(row.data.activity) {
+        if(row.data && row.data.activity) {
-            let tip = row.data.activity[row.data.activity.length - 1];
+            return row.data.activity[row.data.activity.length - 1];
-            if(tip > 0) {
+        }
-                return bytesToSize(tip);
+        return 0;
-            }
+    }
-        } else {
+
-            console.log("no sparkdata", row);
+    const sparkdataTipFmt = (row) => {
+        let tip = sparkdataTip(row);
+        if(tip > 0) {
+            return bytesToSize(tip);
         }
         return "";
     };
 
+    const sparkdataAverage = (row) => {
+        if(row.data && row.data.activity) {
+            let average = row.data.activity.reduce((acc, curr) => { return acc + curr }, 0);
+            average /= row.data.activity.length;
+            return average;
+        }
+        return 0;
+    }
+
+    const sparkdataAverageFmt = (row) => {
+        let average = sparkdataAverage(row);
+        if(average > 0) {
+            return bytesToSize(average);
+        }
+        return "";
+    }
+
     const columns = useMemo<MRT_ColumnDef<Node>[]>(
         () => [
             {
@@ -70,8 +90,24 @@ const TabularView = () => {
                 header: 'Type',
             },
             {
-                accessorFn: sparkdataTip,
+                accessorFn: sparkdataTipFmt,
                 header: 'Activity',
+                sortingFn: (rowA, rowB) => {
+                    let tipA = sparkdataTip(rowA.original);
+                    let tipB = sparkdataTip(rowB.original);
+                    return tipA > tipB ? 1 : tipA < tipB ? -1 : 0;
+                },
+                sortDescFirst: true
+            },
+            {
+                accessorFn: sparkdataAverageFmt,
+                header: 'Activity 5m',
+                sortingFn: (rowA, rowB) => {
+                    let avgA = sparkdataAverage(rowA.original);
+                    let avgB = sparkdataAverage(rowB.original);
+                    return avgA > avgB ? 1 : avgA < avgB ? -1 : 0;
+                },
+                sortDescFirst: true
             }
         ],
         [],