Table sort

gravitational · Dec 24, 2024 · 32c924a · 32c924a
1 parent 70a61f4
commit 32c924a
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 9 deletions.
diff --git a/web/packages/teleport/src/Integrations/status/AwsOidc/AwsOidcDashboard.tsx b/web/packages/teleport/src/Integrations/status/AwsOidc/AwsOidcDashboard.tsx
@@ -27,7 +27,7 @@ import {
   AwsResource,
   StatCard,
 } from 'teleport/Integrations/status/AwsOidc/StatCard';
-import {AwsOidcTitle} from "teleport/Integrations/status/AwsOidc/AwsOidcTitle";
+import { AwsOidcTitle } from 'teleport/Integrations/status/AwsOidc/AwsOidcTitle';
 
 export function AwsOidcDashboard() {
   const { statsAttempt, integrationAttempt } = useAwsOidcStatus();
@@ -54,7 +54,7 @@ export function AwsOidcDashboard() {
     <>
       <AwsOidcHeader integration={integration} />
       <FeatureBox css={{ maxWidth: '1400px', paddingTop: '16px' }}>
-        {integration && <AwsOidcTitle integration={integration}/>}
+        {integration && <AwsOidcTitle integration={integration} />}
         <H2 my={3}>Auto-Enrollment</H2>
         <Flex gap={3}>
           <StatCard

diff --git a/web/packages/teleport/src/Integrations/status/AwsOidc/AwsOidcTitle.tsx b/web/packages/teleport/src/Integrations/status/AwsOidc/AwsOidcTitle.tsx
@@ -37,7 +37,9 @@ export function AwsOidcTitle({
   const { status, labelKind } = getStatusAndLabel(integration);
 
   const content = {
-    to: !resource ? cfg.routes.integrations : cfg.getIntegrationStatusRoute(integration.kind, integration.name),
+    to: !resource
+      ? cfg.routes.integrations
+      : cfg.getIntegrationStatusRoute(integration.kind, integration.name),
     helper: !resource ? 'Back to integrations' : 'Back to integration',
     content: !resource ? integration.name : resource.toUpperCase(),
   };

diff --git a/web/packages/teleport/src/Integrations/status/AwsOidc/Details/Details.tsx b/web/packages/teleport/src/Integrations/status/AwsOidc/Details/Details.tsx
@@ -25,7 +25,7 @@ import { AwsResource } from 'teleport/Integrations/status/AwsOidc/StatCard';
 import { IntegrationKind } from 'teleport/services/integrations';
 import { Rds } from 'teleport/Integrations/status/AwsOidc/Details/Rds';
 import { Rules } from 'teleport/Integrations/status/AwsOidc/Details/Rules';
-import {AwsOidcTitle} from "teleport/Integrations/status/AwsOidc/AwsOidcTitle";
+import { AwsOidcTitle } from 'teleport/Integrations/status/AwsOidc/AwsOidcTitle';
 
 export function Details() {
   const { resourceKind } = useParams<{
@@ -42,7 +42,9 @@ export function Details() {
         <AwsOidcHeader integration={integration} resource={resourceKind} />
       )}
       <FeatureBox css={{ maxWidth: '1400px', paddingTop: '16px', gap: '30px' }}>
-        {integration && <AwsOidcTitle integration={integration} resource={resourceKind}/>}
+        {integration && (
+          <AwsOidcTitle integration={integration} resource={resourceKind} />
+        )}
         {resourceKind == AwsResource.ec2 && <Rules />}
         {resourceKind == AwsResource.eks && <Rules />}
         {resourceKind == AwsResource.rds && <Rds />}

diff --git a/web/packages/teleport/src/Integrations/status/AwsOidc/Details/Rules.tsx b/web/packages/teleport/src/Integrations/status/AwsOidc/Details/Rules.tsx
@@ -30,6 +30,7 @@ import {
 import { AwsResource } from 'teleport/Integrations/status/AwsOidc/StatCard';
 import { SearchPanel } from 'shared/components/Search';
 import { useServerSidePagination } from 'teleport/components/hooks';
+import { SortType } from 'design/DataTable/types';
 
 export function Rules() {
   const { name, resourceKind } = useParams<{
@@ -39,6 +40,10 @@ export function Rules() {
   }>();
 
   const [search, setSearch] = useState('');
+  const [sort, setSort] = useState<SortType>({
+    fieldName: 'region',
+    dir: 'ASC',
+  });
   const serverSidePagination =
     useServerSidePagination<IntegrationDiscoveryRule>({
       pageSize: 20,
@@ -52,12 +57,12 @@ export function Rules() {
         return { agents: rules, nextKey };
       },
       clusterId: '',
-      params: { search },
+      params: { search, sort },
     });
 
   useEffect(() => {
     serverSidePagination.fetch();
-  }, [search]);
+  }, [search, sort]);
 
   return (
     <Table<IntegrationDiscoveryRule>
@@ -98,8 +103,8 @@ export function Rules() {
         onFetchPrev: serverSidePagination.fetchPrev,
       }}
       serversideProps={{
-        sort: undefined,
-        setSort: () => undefined,
+        sort: sort,
+        setSort: setSort,
         serversideSearchPanel: (
           <SearchPanel
             updateSearch={setSearch}