Add ascending descending to columns

src/Routes/SidebarRight/CpuBarChartMonitors.jsx

@@ -2,19 +2,14 @@ import React from 'react';
 import styled from 'styled-components';
 import BarChartMonitors from './BarChartMonitors.react';
 
-
-
 const ContainerCPU = styled.div`
- height: 100vh;
-
-
+  height: 100vh;
 `;
 
-const CpuBarChartMonitors = ({metric}) => (
- <ContainerCPU>
-  <BarChartMonitors metric={metric} />
-</ContainerCPU>
-
+const CpuBarChartMonitors = ({ metric }) => (
+  <ContainerCPU>
+    <BarChartMonitors metric={metric} />
+  </ContainerCPU>
 );
 
 export default CpuBarChartMonitors;

src/Routes/SidebarRight/MemoryAndStorage/Storage.jsx

@@ -72,51 +72,50 @@ const Storage = ({ storage }) => {
   const data = adaptedData({ free, used, freeH, usedH });
 
   return (
-     <Collapsible title="Storage">
-    <StorageStyle>
-
-      <Metrics>
-        <PieContainer>
-          <ResponsivePie
-            data={data}
-            margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
-            innerRadius={0.75}
-            padAngle={0.7}
-            cornerRadius={0}
-            valueFormat={prettyBytes}
-            borderWidth={0}
-            enableRadialLabels={false}
-            enableSlicesLabels={false}
-            animate
-            motionStiffness={90}
-            motionDamping={15}
-            colors={[COLOR_STORAGE.FREE, COLOR_STORAGE.USED]}
-            legends={[]}
-            enableArcLabels={false}
-          />
-        </PieContainer>
-        <BoxesContainer>
-          <MetricContainer>
-            <MetricHeader>Total Capacity</MetricHeader>
-            <MetricValue>{sizeH}</MetricValue>
-          </MetricContainer>
+    <Collapsible title="Storage">
+      <StorageStyle>
+        <Metrics>
+          <PieContainer>
+            <ResponsivePie
+              data={data}
+              margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
+              innerRadius={0.75}
+              padAngle={0.7}
+              cornerRadius={0}
+              valueFormat={prettyBytes}
+              borderWidth={0}
+              enableRadialLabels={false}
+              enableSlicesLabels={false}
+              animate
+              motionStiffness={90}
+              motionDamping={15}
+              colors={[COLOR_STORAGE.FREE, COLOR_STORAGE.USED]}
+              legends={[]}
+              enableArcLabels={false}
+            />
+          </PieContainer>
+          <BoxesContainer>
+            <MetricContainer>
+              <MetricHeader>Total Capacity</MetricHeader>
+              <MetricValue>{sizeH}</MetricValue>
+            </MetricContainer>
 
-          <MetricContainer style={{ borderColor: COLOR_STORAGE.FREE }}>
-            <MetricHeader>Free</MetricHeader>
-            <MetricValue>
-              {freeH} ({freeP}%)
-            </MetricValue>
-          </MetricContainer>
+            <MetricContainer style={{ borderColor: COLOR_STORAGE.FREE }}>
+              <MetricHeader>Free</MetricHeader>
+              <MetricValue>
+                {freeH} ({freeP}%)
+              </MetricValue>
+            </MetricContainer>
 
-          <MetricContainer style={{ borderColor: COLOR_STORAGE.USED }}>
-            <MetricHeader>Used</MetricHeader>
-            <MetricValue>
-              {usedH} ({(usedP * 100).toFixed(2)}%)
-            </MetricValue>
-          </MetricContainer>
-        </BoxesContainer>
-      </Metrics>
-    </StorageStyle>
+            <MetricContainer style={{ borderColor: COLOR_STORAGE.USED }}>
+              <MetricHeader>Used</MetricHeader>
+              <MetricValue>
+                {usedH} ({(usedP * 100).toFixed(2)}%)
+              </MetricValue>
+            </MetricContainer>
+          </BoxesContainer>
+        </Metrics>
+      </StorageStyle>
     </Collapsible>
   );
 };

src/Routes/SidebarRight/MemoryAndStorage/index.jsx

@@ -11,9 +11,7 @@ const Root = styled.div`
   height: 100%;
 `;
 
-const Memory = styled.div`
-
-`;
+const Memory = styled.div``;
 
 const MemoryAndStorage = () => {
   const { data, legend } = useMetric('mem');
@@ -33,7 +31,7 @@ const MemoryAndStorage = () => {
           image={Empty.PRESENTED_IMAGE_SIMPLE}
         />
       )}
-       
+
       {storage.size ? (
         <Storage storage={storage} />
       ) : (

src/Routes/SidebarRight/MemoryAndStorage/styles.js

@@ -9,7 +9,6 @@ export const Metrics = styled.div`
   display: flex;
   overflow: hidden;
   align-items: center;
-
 `;
 
 export const MetricContainer = styled.div`
@@ -27,8 +26,7 @@ export const Header = styled.h2`
   text-transform: capitalize;
   margin-bottom: 1em;
   border-bottom: 1px solid #ddd;
-  margin-block-start:auto;
-
+  margin-block-start: auto;
 `;
 
 export const MetricHeader = styled.div`

src/Routes/Tables/Algorithms/columns.jsx

@@ -14,6 +14,7 @@ import AlgorithmBuildStats from './AlgorithmBuildStats.react';
 import LastModified from './LastModified';
 
 const HotWorkers = ({ value }) => <Tag>{value}</Tag>;
+
 const Cpu = ({ value }) =>
   value ? (
     <Tag>{value}</Tag>
@@ -81,6 +82,67 @@ const Name = ({ value, data }) =>
     </div>
   );
 
+const numericComparator = (a, b) => {
+  if (!a && !b) return 0;
+  if (!a) return 1;
+  if (!b) return -1;
+  return Number(a) - Number(b);
+};
+
+/**
+ * Comparator for memory values with unit parsing (Mi, Gi, Ki, Ti)
+ * Converts all values to bytes for accurate comparison
+ * Null/undefined values are sorted to the end
+ */
+const memoryComparator = (a, b) => {
+  if (!a && !b) return 0;
+  if (!a) return 1;
+  if (!b) return -1;
+
+  const parseMemory = mem => {
+    if (!mem) return 0;
+    const str = String(mem).trim();
+    const num = parseFloat(str);
+
+    if (str.includes('Gi') || str.includes('G')) {
+      return num * 1024 * 1024 * 1024;
+    } else if (str.includes('Mi') || str.includes('M')) {
+      return num * 1024 * 1024;
+    } else if (str.includes('Ki') || str.includes('K')) {
+      return num * 1024;
+    } else if (str.includes('Ti') || str.includes('T')) {
+      return num * 1024 * 1024 * 1024 * 1024;
+    }
+    return num;
+  };
+
+  return parseMemory(a) - parseMemory(b);
+};
+/**
+ * Comparator for build stats sorting
+ * DESC: Prioritizes failed builds (highest count first)
+ * ASC: Prioritizes completed builds (highest count first)
+ */
+const buildStatsComparator = (a, b, isDescending) => {
+  // Handle null/undefined cases
+  if (!a && !b) return 0;
+  if (!a) return 1;
+  if (!b) return -1;
+
+  const aTotal = a.total || 0;
+  const bTotal = b.total || 0;
+
+  // Handle no builds cases
+  if (aTotal === 0 && bTotal === 0) return 0;
+  if (aTotal === 0) return 1;
+  if (bTotal === 0) return -1;
+
+  const aCount = isDescending ? a.failed || 0 : a.completed || 0;
+  const bCount = isDescending ? b.failed || 0 : b.completed || 0;
+
+  return bCount - aCount;
+};
+
 export default [
   {
     headerName: '',
@@ -98,7 +160,7 @@ export default [
     flex: 2,
     sortable: true,
     unSortIcon: true,
-    comparator: (a, b) => sorter(a, b),
+    comparator: sorter,
     cellRenderer: Name,
     isPinning: true,
   },
@@ -107,31 +169,43 @@ export default [
     field: 'algorithmImage',
     flex: 3,
     sortable: true,
-    comparator: (a, b) => sorter(a, b),
+    comparator: sorter,
     cellRenderer: Image,
   },
   {
     headerName: 'Builds Stats',
     flex: 0.7,
+    sortable: true,
+    unSortIcon: true,
     field: 'buildStats',
+    comparator: buildStatsComparator,
     cellRenderer: ({ value }) => <AlgorithmBuildStats builds={value} />,
   },
   {
     headerName: 'CPU',
-    flex: 0.5,
+    flex: 0.6,
     field: 'cpu',
+    sortable: true,
+    unSortIcon: true,
+    comparator: numericComparator,
     cellRenderer: Cpu,
   },
   {
     headerName: 'GPU',
-    flex: 0.5,
+    flex: 0.6,
     field: 'gpu',
+    sortable: true,
+    unSortIcon: true,
+    comparator: numericComparator,
     cellRenderer: Gpu,
   },
   {
     headerName: 'Mem',
     flex: 0.7,
     field: 'mem',
+    sortable: true,
+    unSortIcon: true,
+    comparator: memoryComparator,
     cellRenderer: Memory,
   },
   {
@@ -140,7 +214,7 @@ export default [
     field: 'minHotWorkers',
     sortable: true,
     unSortIcon: true,
-    comparator: (a, b) => sorter(a, b),
+    comparator: sorter,
     cellRenderer: HotWorkers,
   },
   {
@@ -149,7 +223,7 @@ export default [
     field: 'modified',
     sortable: true,
     unSortIcon: true,
-    comparator: (a, b) => sorter(a, b),
+    comparator: sorter,
     cellRenderer: ({ data }) => (
       <LastModified auditTrail={data.auditTrail} modified={data.modified} />
     ),

src/Routes/Tables/Jobs/JobProgress.jsx

@@ -40,4 +40,4 @@ JobProgress.propTypes = {
   /* eslint-enable  */
 };
 
-export default JobProgress
+export default JobProgress;

src/Routes/Tables/Jobs/useJobsFunctionsLimit.js

@@ -231,7 +231,7 @@ const useJobsFunctionsLimit = () => {
   useEffect(() => {
     if (queryAllJobs?.data) {
       const dsAllJobs = queryAllJobs.data.jobsAggregated.jobs;
- setDataSource(dsAllJobs);
+      setDataSource(dsAllJobs);
 
       // Update external ID visibility state
       const hasExtId = dsAllJobs.some(x => x.externalId != null);
@@ -244,17 +244,18 @@ const useJobsFunctionsLimit = () => {
     }
   }, [queryAllJobs.data, changeDs]);
 
+  const handleBodyScroll = useCallback(
+    params => {
+      const lastRow = params.api.getLastDisplayedRowIndex();
+      const totalRows = params.api.getDisplayedRowCount();
 
-
-const handleBodyScroll = useCallback((params) => {
-  const lastRow = params.api.getLastDisplayedRowIndex();
-  const totalRows = params.api.getDisplayedRowCount();
-
-  if (isGetMore && lastRow >= totalRows - 1 && !queryAllJobs.loading) {
-    setIsGetMore(false);
-    onFetchMore();
-  }
-}, [isGetMore, queryAllJobs.loading]);
+      if (isGetMore && lastRow >= totalRows - 1 && !queryAllJobs.loading) {
+        setIsGetMore(false);
+        onFetchMore();
+      }
+    },
+    [isGetMore, queryAllJobs.loading]
+  );
 
   useEffect(() => {
     if (firstUpdate.current) {
@@ -275,10 +276,10 @@ const handleBodyScroll = useCallback((params) => {
   }, []);
 
   useEffect(() => {
-  if (!firstUpdate.current) {
-   queryAllJobs.refetch().then(() => setIsGetMore(true));
-  }
-}, [limitGetJobs]);
+    if (!firstUpdate.current) {
+      queryAllJobs.refetch().then(() => setIsGetMore(true));
+    }
+  }, [limitGetJobs]);
 
   /**
    * Memoized column definitions with stable references
@@ -317,7 +318,7 @@ const handleBodyScroll = useCallback((params) => {
     columns: jobColumnsMemo,
     _dataSource,
     setLimitGetJobs,
-    handleBodyScroll
+    handleBodyScroll,
   };
 };