From b7facebb00cb3f6d239efe427f287990d812276c Mon Sep 17 00:00:00 2001
From: Saurabh Kumar Singh <singh1203.ss@gmail.com>
Date: Mon, 29 Jul 2024 18:15:56 +0530
Subject: [PATCH] added sorting components

Signed-off-by: Saurabh Kumar Singh <singh1203.ss@gmail.com>
---
 .../resources/configuration/config.js         | 121 ++++++++++++++----
 .../resources/namespace/config.js             |  11 +-
 .../resources/network/config.js               |  55 ++++++--
 .../resources/nodes/config.js                 |  11 +-
 .../resources/security/config.js              |  55 ++++++--
 .../resources/storage/config.js               |  33 ++++-
 .../resources/workloads/config.js             |  88 ++++++++++---
 7 files changed, 306 insertions(+), 68 deletions(-)

diff --git a/ui/components/DashboardComponent/resources/configuration/config.js b/ui/components/DashboardComponent/resources/configuration/config.js
index cb3b57bceff..f1965e03f5a 100644
--- a/ui/components/DashboardComponent/resources/configuration/config.js
+++ b/ui/components/DashboardComponent/resources/configuration/config.js
@@ -41,8 +41,15 @@ export const ConfigurationTableConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
@@ -158,8 +165,15 @@ export const ConfigurationTableConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
@@ -293,8 +307,15 @@ export const ConfigurationTableConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
@@ -410,8 +431,15 @@ export const ConfigurationTableConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
@@ -529,8 +557,15 @@ export const ConfigurationTableConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
@@ -692,8 +727,15 @@ export const ConfigurationTableConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
@@ -811,8 +853,15 @@ export const ConfigurationTableConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
@@ -988,8 +1037,15 @@ export const ConfigurationTableConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
@@ -1105,8 +1161,15 @@ export const ConfigurationTableConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
@@ -1224,8 +1287,15 @@ export const ConfigurationTableConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
@@ -1356,8 +1426,15 @@ export const ConfigurationTableConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
diff --git a/ui/components/DashboardComponent/resources/namespace/config.js b/ui/components/DashboardComponent/resources/namespace/config.js
index a6234bb22e1..67c0578110b 100644
--- a/ui/components/DashboardComponent/resources/namespace/config.js
+++ b/ui/components/DashboardComponent/resources/namespace/config.js
@@ -41,8 +41,15 @@ export const NamespaceTableConfig = (
         label: 'Name',
         options: {
           sort: true,
-          customHeadRender: function CustomHead({ ...column }) {
-            return <DefaultTableCell columnData={column} />;
+          customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+            return (
+              <SortableTableCell
+                index={index}
+                columnData={column}
+                columnMeta={columnMeta}
+                onSort={() => sortColumn(index)}
+              />
+            );
           },
           customBodyRender: function CustomBody(value, tableMeta) {
             return (
diff --git a/ui/components/DashboardComponent/resources/network/config.js b/ui/components/DashboardComponent/resources/network/config.js
index bce46dbc384..9a8a0553847 100644
--- a/ui/components/DashboardComponent/resources/network/config.js
+++ b/ui/components/DashboardComponent/resources/network/config.js
@@ -47,8 +47,15 @@ export const NetWorkTableConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
@@ -269,8 +276,15 @@ export const NetWorkTableConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
@@ -387,8 +401,15 @@ export const NetWorkTableConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
@@ -534,8 +555,15 @@ export const NetWorkTableConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
@@ -670,8 +698,15 @@ export const NetWorkTableConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
diff --git a/ui/components/DashboardComponent/resources/nodes/config.js b/ui/components/DashboardComponent/resources/nodes/config.js
index 268d261400a..e642c9ec5ad 100644
--- a/ui/components/DashboardComponent/resources/nodes/config.js
+++ b/ui/components/DashboardComponent/resources/nodes/config.js
@@ -45,8 +45,15 @@ export const NodeTableConfig = (
         label: 'Name',
         options: {
           sort: true,
-          customHeadRender: function CustomHead({ ...column }) {
-            return <DefaultTableCell columnData={column} />;
+          customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+            return (
+              <SortableTableCell
+                index={index}
+                columnData={column}
+                columnMeta={columnMeta}
+                onSort={() => sortColumn(index)}
+              />
+            );
           },
           customBodyRender: function CustomBody(value, tableMeta) {
             return (
diff --git a/ui/components/DashboardComponent/resources/security/config.js b/ui/components/DashboardComponent/resources/security/config.js
index 16703d061c5..4f38fd7dd33 100644
--- a/ui/components/DashboardComponent/resources/security/config.js
+++ b/ui/components/DashboardComponent/resources/security/config.js
@@ -40,8 +40,15 @@ export const SecurityTypesConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
@@ -147,8 +154,15 @@ export const SecurityTypesConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
@@ -285,8 +299,15 @@ export const SecurityTypesConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
@@ -392,8 +413,15 @@ export const SecurityTypesConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
@@ -499,8 +527,15 @@ export const SecurityTypesConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
diff --git a/ui/components/DashboardComponent/resources/storage/config.js b/ui/components/DashboardComponent/resources/storage/config.js
index f2ce9de5f5a..d1f8eae8a5c 100644
--- a/ui/components/DashboardComponent/resources/storage/config.js
+++ b/ui/components/DashboardComponent/resources/storage/config.js
@@ -44,8 +44,15 @@ export const StorageTableConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
@@ -202,8 +209,15 @@ export const StorageTableConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
@@ -366,8 +380,15 @@ export const StorageTableConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
diff --git a/ui/components/DashboardComponent/resources/workloads/config.js b/ui/components/DashboardComponent/resources/workloads/config.js
index e482f8bca2f..61fb163a19d 100644
--- a/ui/components/DashboardComponent/resources/workloads/config.js
+++ b/ui/components/DashboardComponent/resources/workloads/config.js
@@ -47,8 +47,15 @@ export const WorkloadTableConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
@@ -231,8 +238,15 @@ export const WorkloadTableConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
@@ -387,8 +401,15 @@ export const WorkloadTableConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
@@ -523,8 +544,15 @@ export const WorkloadTableConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
@@ -659,8 +687,15 @@ export const WorkloadTableConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
@@ -825,8 +860,15 @@ export const WorkloadTableConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
@@ -973,8 +1015,15 @@ export const WorkloadTableConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (
@@ -1093,8 +1142,15 @@ export const WorkloadTableConfig = (
           label: 'Name',
           options: {
             sort: true,
-            customHeadRender: function CustomHead({ ...column }) {
-              return <DefaultTableCell columnData={column} />;
+            customHeadRender: function CustomHead({ index, ...column }, sortColumn, columnMeta) {
+              return (
+                <SortableTableCell
+                  index={index}
+                  columnData={column}
+                  columnMeta={columnMeta}
+                  onSort={() => sortColumn(index)}
+                />
+              );
             },
             customBodyRender: function CustomBody(value, tableMeta) {
               return (