User task design updates

gravitational · Feb 28, 2025 · 8e463d9 · 8e463d9
1 parent 807e024
commit 8e463d9
Show file tree

Hide file tree

Showing 11 changed files with 192 additions and 150 deletions.
diff --git a/web/packages/teleport/src/Integrations/status/AwsOidc/AwsOidcDashboard.test.tsx b/web/packages/teleport/src/Integrations/status/AwsOidc/AwsOidcDashboard.test.tsx
@@ -49,6 +49,7 @@ test('renders header and stats cards', () => {
           awsoidc: {
             roleArn: 'arn:aws:iam::111456789011:role/bar',
           },
+          unresolvedUserTasks: 1,
           awsec2: {
             rulesCount: 24,
             resourcesFound: 12,
@@ -167,6 +168,7 @@ test('renders enroll cards', () => {
         statsAttempt: makeSuccessAttempt({
           name: 'integration-one',
           subKind: IntegrationKind.AwsOidc,
+          unresolvedUserTasks: 0,
           awsoidc: {
             roleArn: 'arn:aws:iam::111456789011:role/bar',
           },

diff --git a/web/packages/teleport/src/Integrations/status/AwsOidc/AwsOidcDashboard.tsx b/web/packages/teleport/src/Integrations/status/AwsOidc/AwsOidcDashboard.tsx
@@ -55,7 +55,7 @@ export function AwsOidcDashboard() {
     return null;
   }
 
-  const { awsec2, awseks, awsrds } = statsAttempt.data;
+  const { awsec2, awseks, awsrds, unresolvedUserTasks } = statsAttempt.data;
   const { data: integration } = integrationAttempt;
   return (
     <>
@@ -64,7 +64,10 @@ export function AwsOidcDashboard() {
         {integration && (
           <>
             <AwsOidcTitle integration={integration} />
-            <TaskAlert name={integration.name} />
+            <TaskAlert
+              name={integration.name}
+              pendingTasksCount={unresolvedUserTasks}
+            />
           </>
         )}
 

diff --git a/web/packages/teleport/src/Integrations/status/AwsOidc/Details/Agents.tsx b/web/packages/teleport/src/Integrations/status/AwsOidc/Details/Agents.tsx
@@ -16,22 +16,19 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useParams } from 'react-router';
 
-import { Box, Flex, Indicator } from 'design';
+import { Box, Indicator } from 'design';
 import { Danger } from 'design/Alert';
 import Table, { LabelCell } from 'design/DataTable';
-import { MultiselectMenu } from 'shared/components/Controls/MultiselectMenu';
 import { useAsync } from 'shared/hooks/useAsync';
 
 import { AwsResource } from 'teleport/Integrations/status/AwsOidc/StatCard';
 import {
   AWSOIDCDeployedDatabaseService,
-  awsRegionMap,
   IntegrationKind,
   integrationService,
-  Regions,
 } from 'teleport/services/integrations';
 
 export function Agents() {
@@ -41,18 +38,13 @@ export function Agents() {
     resourceKind: AwsResource;
   }>();
 
-  const [regionFilter, setRegionFilter] = useState<string[]>([]);
   const [servicesAttempt, fetchServices] = useAsync(() => {
-    return integrationService.fetchAwsOidcDatabaseServices(
-      name,
-      resourceKind,
-      regionFilter
-    );
+    return integrationService.fetchAwsOidcDatabaseServices(name, resourceKind);
   });
 
   useEffect(() => {
     fetchServices();
-  }, [regionFilter]);
+  }, []);
 
   if (servicesAttempt.status === 'processing') {
     return (
@@ -67,21 +59,6 @@ export function Agents() {
       {servicesAttempt.status === 'error' && (
         <Danger>{servicesAttempt.statusText}</Danger>
       )}
-      <MultiselectMenu
-        options={Object.keys(awsRegionMap).map(r => ({
-          value: r as Regions,
-          label: (
-            <Flex justifyContent="space-between">
-              <div>{awsRegionMap[r]}&nbsp;&nbsp;</div>
-              <div>{r}</div>
-            </Flex>
-          ),
-        }))}
-        onChange={regions => setRegionFilter(regions)}
-        selected={regionFilter}
-        label="Region"
-        tooltip="Filter by region"
-      />
       <Table<AWSOIDCDeployedDatabaseService>
         data={servicesAttempt.data?.services}
         columns={[

diff --git a/web/packages/teleport/src/Integrations/status/AwsOidc/Details/Details.tsx b/web/packages/teleport/src/Integrations/status/AwsOidc/Details/Details.tsx
@@ -18,6 +18,8 @@
 
 import { useParams } from 'react-router';
 
+import { Danger } from 'design/Alert';
+
 import { FeatureBox } from 'teleport/components/Layout';
 import { AwsOidcHeader } from 'teleport/Integrations/status/AwsOidc/AwsOidcHeader';
 import { AwsOidcTitle } from 'teleport/Integrations/status/AwsOidc/AwsOidcTitle';
@@ -35,8 +37,22 @@ export function Details() {
     resourceKind: AwsResource;
   }>();
 
-  const { integrationAttempt } = useAwsOidcStatus();
+  const { integrationAttempt, statsAttempt } = useAwsOidcStatus();
+
+  if (integrationAttempt.status === 'error') {
+    return <Danger>{integrationAttempt.statusText}</Danger>;
+  }
+
+  if (statsAttempt.status === 'error') {
+    return <Danger>{statsAttempt.statusText}</Danger>;
+  }
+
+  if (!statsAttempt.data || !integrationAttempt.data) {
+    return null;
+  }
+
   const { data: integration } = integrationAttempt;
+  const { unresolvedUserTasks } = statsAttempt.data;
   return (
     <>
       {integration && (
@@ -47,7 +63,10 @@ export function Details() {
           {integration && (
             <>
               <AwsOidcTitle integration={integration} resource={resourceKind} />
-              <TaskAlert name={integration.name} />
+              <TaskAlert
+                name={integration.name}
+                pendingTasksCount={unresolvedUserTasks}
+              />
             </>
           )}
         </>

diff --git a/web/packages/teleport/src/Integrations/status/AwsOidc/Details/Rules.tsx b/web/packages/teleport/src/Integrations/status/AwsOidc/Details/Rules.tsx
@@ -16,21 +16,17 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useParams } from 'react-router';
 
-import { Flex } from 'design';
 import Table, { LabelCell } from 'design/DataTable';
-import { MultiselectMenu } from 'shared/components/Controls/MultiselectMenu';
 
 import { useServerSidePagination } from 'teleport/components/hooks';
 import { AwsResource } from 'teleport/Integrations/status/AwsOidc/StatCard';
 import {
-  awsRegionMap,
   IntegrationDiscoveryRule,
   IntegrationKind,
   integrationService,
-  Regions,
 } from 'teleport/services/integrations';
 
 export function Rules() {
@@ -40,17 +36,12 @@ export function Rules() {
     resourceKind: AwsResource;
   }>();
 
-  const [regionFilter, setRegionFilter] = useState<string[]>([]);
   const serverSidePagination =
     useServerSidePagination<IntegrationDiscoveryRule>({
       pageSize: 20,
       fetchFunc: async () => {
         const { rules, nextKey } =
-          await integrationService.fetchIntegrationRules(
-            name,
-            resourceKind,
-            regionFilter
-          );
+          await integrationService.fetchIntegrationRules(name, resourceKind);
         return { agents: rules, nextKey };
       },
       clusterId: '',
@@ -59,49 +50,32 @@ export function Rules() {
 
   useEffect(() => {
     serverSidePagination.fetch();
-  }, [regionFilter]);
+  }, []);
 
   return (
-    <>
-      <MultiselectMenu
-        options={Object.keys(awsRegionMap).map(r => ({
-          value: r as Regions,
-          label: (
-            <Flex justifyContent="space-between">
-              <div>{awsRegionMap[r]}&nbsp;&nbsp;</div>
-              <div>{r}</div>
-            </Flex>
+    <Table<IntegrationDiscoveryRule>
+      data={serverSidePagination?.fetchedData?.agents}
+      columns={[
+        {
+          key: 'region',
+          headerText: 'Region',
+        },
+        {
+          key: 'labelMatcher',
+          headerText: getResourceTerm(resourceKind),
+          render: ({ labelMatcher }) => (
+            <LabelCell data={labelMatcher.map(l => `${l.name}:${l.value}`)} />
           ),
-        }))}
-        onChange={regions => setRegionFilter(regions)}
-        selected={regionFilter}
-        label="Region"
-        tooltip="Filter by region"
-      />
-      <Table<IntegrationDiscoveryRule>
-        data={serverSidePagination?.fetchedData?.agents}
-        columns={[
-          {
-            key: 'region',
-            headerText: 'Region',
-          },
-          {
-            key: 'labelMatcher',
-            headerText: getResourceTerm(resourceKind),
-            render: ({ labelMatcher }) => (
-              <LabelCell data={labelMatcher.map(l => `${l.name}:${l.value}`)} />
-            ),
-          },
-        ]}
-        emptyText={`No ${resourceKind.toUpperCase()} rules`}
-        pagination={{ pageSize: serverSidePagination.pageSize }}
-        fetching={{
-          fetchStatus: serverSidePagination.fetchStatus,
-          onFetchNext: serverSidePagination.fetchNext,
-          onFetchPrev: serverSidePagination.fetchPrev,
-        }}
-      />
-    </>
+        },
+      ]}
+      emptyText={`No ${resourceKind.toUpperCase()} rules`}
+      pagination={{ pageSize: serverSidePagination.pageSize }}
+      fetching={{
+        fetchStatus: serverSidePagination.fetchStatus,
+        onFetchNext: serverSidePagination.fetchNext,
+        onFetchPrev: serverSidePagination.fetchPrev,
+      }}
+    />
   );
 }
 

diff --git a/web/packages/teleport/src/Integrations/status/AwsOidc/Tasks/Task.test.tsx b/web/packages/teleport/src/Integrations/status/AwsOidc/Tasks/Task.test.tsx
@@ -46,6 +46,7 @@ test('renders ec2 impacts', async () => {
       instances: {
         'i-016e32a5882f5ee81': {
           instance_id: 'i-016e32a5882f5ee81',
+          resourceUrl: '',
           name: undefined,
           invocationUrl: undefined,
           discoveryConfig: undefined,
@@ -54,6 +55,7 @@ test('renders ec2 impacts', async () => {
         },
         'i-065818031835365cc': {
           instance_id: 'i-065818031835365cc',
+          resourceUrl: '',
           name: 'aws-test',
           invocationUrl: undefined,
           discoveryConfig: undefined,
@@ -103,12 +105,14 @@ test('renders eks impacts', async () => {
       clusters: {
         'i-016e32a5882f5ee81': {
           name: 'i-016e32a5882f5ee81',
+          resourceUrl: '',
           discoveryConfig: undefined,
           discoveryGroup: undefined,
           syncTime: undefined,
         },
         'i-065818031835365cc': {
           name: 'i-065818031835365cc',
+          resourceUrl: '',
           discoveryConfig: undefined,
           discoveryGroup: undefined,
           syncTime: undefined,
@@ -151,6 +155,7 @@ test('renders rds impacts', async () => {
       databases: {
         'i-016e32a5882f5ee81': {
           name: 'i-016e32a5882f5ee81',
+          resourceUrl: '',
           isCluster: undefined,
           engine: undefined,
           discoveryConfig: undefined,
@@ -159,6 +164,7 @@ test('renders rds impacts', async () => {
         },
         'i-065818031835365cc': {
           name: 'i-065818031835365cc',
+          resourceUrl: '',
           isCluster: undefined,
           engine: undefined,
           discoveryConfig: undefined,