Add sorting for clusters and query history page columns

Author: maswin

webapp/src/components/cluster.tsx

@@ -92,8 +92,16 @@ export function Cluster() {
     <>
       <Card bordered={false} className={styles.card} bodyStyle={{ padding: '10px' }}>
         <Table dataSource={backendData} pagination={false} rowKey={"name"}>
-          <Column title="Name" dataIndex="name" key="name" />
+          <Column title="Name" dataIndex="name" key="name"
+            sorter={(a, b) => {
+              if (!a || !b) return 0;
+              return a.name.localeCompare(b.name)
+            }} />
           <Column title="RoutingGroup" dataIndex="routingGroup" key="routingGroup"
+            sorter={(a, b) => {
+              if (!a || !b) return 0;
+              return a.routingGroup.localeCompare(b.routingGroup)
+            }}
             filters={
               [...new Set(backendData?.map(b => b.routingGroup))]
                 .map(routingGroup => {
@@ -108,8 +116,8 @@ export function Cluster() {
             }} />
           <Column title="ProxyToUrl" dataIndex="proxyTo" key="proxyTo" render={linkRender} />
           <Column title="ExternalUrl" dataIndex="externalUrl" key="externalUrl" render={linkRender} />
-          <Column title="Queued" dataIndex="queued" key="queued" />
-          <Column title="Running" dataIndex="running" key="running" />
+          <Column title="Queued" dataIndex="queued" key="queued" sorter={(a, b) => (!a || !b) ? 0 : a.queued - b.queued} />
+          <Column title="Running" dataIndex="running" key="running" sorter={(a, b) => (!a || !b) ? 0 : a.running - b.running} />
           <Column title="Active" dataIndex="active" key="active" render={switchRender} />
           <Column title="Status" dataIndex="status" key="status" render={statusRender}/>
           {access.hasRole(Role.ADMIN) && (

webapp/src/components/history.tsx

@@ -133,13 +133,33 @@ export function History() {
           onPageChange: list,
         }}>
           <Column title="QueryId" dataIndex="queryId" key="queryId" render={linkQueryRender} />
-          <Column title="RoutingGroup" dataIndex="routingGroup" key="routingGroup" render={routingGroupRender} />
+          <Column title="RoutingGroup" dataIndex="routingGroup" key="routingGroup"
+            sorter={(a, b) => {
+              if (!a || !b) return 0;
+              return a.routingGroup.localeCompare(b.routingGroup);
+            }}
+            filters={
+                [...new Set(backendData?.map(b => b.routingGroup))]
+                        .map(routingGroup => {
+                            return {
+                                text: routingGroup,
+                                value: routingGroup
+                            }
+                        })}
+            onFilter={(value, record) => {
+                if (!record) return false;
+                return value === record.routingGroup
+            }}
+            render={routingGroupRender} />
           <Column title="Name" dataIndex="backendUrl" key="backendUrlName" render={(text: string) => <Text>{backendMapping[text]}</Text>} />
           <Column title="RoutedTo" dataIndex="externalUrl" key="externalUrl" render={linkRender} />
           <Column title="User" dataIndex="user" key="user" />
           <Column title="Source" dataIndex="source" key="source" />
           <Column title="QueryText" dataIndex="queryText" key="queryText" width={300} render={queryTextRender} />
-          <Column title="SubmissionTime" dataIndex="captureTime" key="captureTime" render={timeRender} />
+          <Column title="SubmissionTime" dataIndex="captureTime" key="captureTime" render={timeRender} sorter={(a, b) => {
+            if (!a || !b) return 0;
+            return a.captureTime - b.captureTime;
+          }} />
         </Table>
       </Card>
       <Modal