Add user task table

web/packages/teleport/src/Integrations/status/AwsOidc/AwsOidcDashboard.story.tsx

@@ -45,6 +45,16 @@ export function DashboardMissingData() {
   state.statsAttempt.data.awseks = undefined;
   state.statsAttempt.data.awsrds = undefined;
   state.statsAttempt.data.awsec2 = undefined;
+  state.tasksAttempt.data.items = [
+    {
+      name: '',
+      taskType: 'ec2',
+      state: '',
+      issueType: 'lost-connection',
+      integration: '',
+      lastStateChange: '',
+    },
+  ];
   return (
     <MockAwsOidcStatusProvider value={state}>
       <AwsOidcDashboard />
@@ -174,6 +184,11 @@ function makeAwsOidcStatusContextState(
           awseks: makeResourceTypeSummary(),
         },
       },
+      tasksAttempt: {
+        status: 'success',
+        statusText: '',
+        data: {},
+      },
     },
     overrides
   );

web/packages/teleport/src/Integrations/status/AwsOidc/AwsOidcDashboard.test.tsx

@@ -77,6 +77,14 @@ test('renders header and stats cards', () => {
             },
           },
         },
+        tasksAttempt: {
+          status: 'success',
+          statusText: '',
+          data: {
+            items: [],
+            nextKey: '',
+          },
+        },
       }}
     >
       <AwsOidcDashboard />

web/packages/teleport/src/Integrations/status/AwsOidc/AwsOidcDashboard.tsx

@@ -28,9 +28,10 @@ import {
   StatCard,
 } from 'teleport/Integrations/status/AwsOidc/StatCard';
 import { AwsOidcTitle } from 'teleport/Integrations/status/AwsOidc/AwsOidcTitle';
+import { TaskAlert } from 'teleport/Integrations/status/AwsOidc/Tasks/TaskAlert';
 
 export function AwsOidcDashboard() {
-  const { statsAttempt, integrationAttempt } = useAwsOidcStatus();
+  const { statsAttempt, integrationAttempt, tasksAttempt } = useAwsOidcStatus();
 
   if (
     statsAttempt.status == 'processing' ||
@@ -50,11 +51,15 @@ export function AwsOidcDashboard() {
   // todo (michellescripts) after routing, ensure this view can be sticky
   const { awsec2, awseks, awsrds } = statsAttempt.data;
   const { data: integration } = integrationAttempt;
+  const { data: tasks } = tasksAttempt;
   return (
     <>
       <AwsOidcHeader integration={integration} />
-      <FeatureBox css={{ maxWidth: '1400px', paddingTop: '16px' }}>
+      <FeatureBox css={{ maxWidth: '1400px', paddingTop: '16px', gap: '16px' }}>
         {integration && <AwsOidcTitle integration={integration} />}
+        {tasks && tasks.items.length > 0 && (
+          <TaskAlert name={integration.name} total={tasks.items.length} />
+        )}
         <H2 my={3}>Auto-Enrollment</H2>
         <Flex gap={3}>
           <StatCard

web/packages/teleport/src/Integrations/status/AwsOidc/AwsOidcHeader.tsx

@@ -30,9 +30,11 @@ import { useHistory } from 'react-router';
 export function AwsOidcHeader({
   integration,
   resource = undefined,
+  tasks = false,
 }: {
   integration: Integration;
   resource?: AwsResource;
+  tasks?: boolean;
 }) {
   const history = useHistory();
   const divider = (
@@ -62,7 +64,7 @@ export function AwsOidcHeader({
           <Plugs size="small" />
         </ButtonIcon>
       </HoverTooltip>
-      {!resource ? (
+      {!resource && !tasks ? (
         <>
           {divider}
           <Text typography="body3" color="text.slightlyMuted" ml={2}>
@@ -85,12 +87,24 @@ export function AwsOidcHeader({
           >
             {integration.name}
           </ButtonText>
+        </>
+      )}
+      {resource && (
+        <>
           {divider}
           <Text typography="body3" color="text.slightlyMuted" ml={2}>
             {resource.toUpperCase()}
           </Text>
         </>
       )}
+      {tasks && (
+        <>
+          {divider}
+          <Text typography="body3" color="text.slightlyMuted" ml={2}>
+            Pending Tasks
+          </Text>
+        </>
+      )}
     </Flex>
   );
 }

web/packages/teleport/src/Integrations/status/AwsOidc/AwsOidcRoutes.tsx

@@ -22,6 +22,7 @@ import cfg from 'teleport/config';
 import { AwsOidcStatusProvider } from 'teleport/Integrations/status/AwsOidc/useAwsOidcStatus';
 
 import { Details } from 'teleport/Integrations/status/AwsOidc/Details/Details';
+import { Tasks } from 'teleport/Integrations/status/AwsOidc/Tasks/Tasks';
 
 import { AwsOidcDashboard } from './AwsOidcDashboard';
 
@@ -35,6 +36,12 @@ export function AwsOidcRoutes() {
           path={cfg.routes.integrationStatusResources}
           component={Details}
         />
+        <Route
+          key="aws-oidc-task-table"
+          exact
+          path={cfg.routes.integrationTasks}
+          component={Tasks}
+        />
         <Route
           key="aws-oidc-dashboard"
           exact

web/packages/teleport/src/Integrations/status/AwsOidc/AwsOidcTitle.tsx

@@ -30,19 +30,14 @@ import { AwsResource } from 'teleport/Integrations/status/AwsOidc/StatCard';
 export function AwsOidcTitle({
   integration,
   resource = undefined,
+  tasks = undefined,
 }: {
   integration: Integration;
   resource?: AwsResource;
+  tasks?: boolean;
 }) {
   const { status, labelKind } = getStatusAndLabel(integration);
-
-  const content = {
-    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(),
-  };
+  const content = getContent(integration, resource, tasks);
 
   return (
     <Flex alignItems="center" data-testid="aws-oidc-title">
@@ -60,3 +55,31 @@ export function AwsOidcTitle({
     </Flex>
   );
 }
+
+function getContent(
+  integration: Integration,
+  resource?: AwsResource,
+  tasks?: boolean
+): { to: string; helper: string; content: string } {
+  if (resource) {
+    return {
+      to: cfg.getIntegrationStatusRoute(integration.kind, integration.name),
+      helper: 'Back to integration',
+      content: resource.toUpperCase(),
+    };
+  }
+
+  if (tasks) {
+    return {
+      to: cfg.getIntegrationStatusRoute(integration.kind, integration.name),
+      helper: 'Back to integration',
+      content: 'Pending Tasks',
+    };
+  }
+
+  return {
+    to: cfg.routes.integrations,
+    helper: 'Back to integrations',
+    content: integration.name,
+  };
+}

web/packages/teleport/src/Integrations/status/AwsOidc/Details/Details.tsx

@@ -26,6 +26,7 @@ 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 { TaskAlert } from 'teleport/Integrations/status/AwsOidc/Tasks/TaskAlert';
 
 export function Details() {
   const { resourceKind } = useParams<{
@@ -34,17 +35,23 @@ export function Details() {
     resourceKind: AwsResource;
   }>();
 
-  const { integrationAttempt } = useAwsOidcStatus();
+  const { integrationAttempt, tasksAttempt } = useAwsOidcStatus();
   const { data: integration } = integrationAttempt;
+  const { data: tasks } = tasksAttempt;
   return (
     <>
       {integration && (
         <AwsOidcHeader integration={integration} resource={resourceKind} />
       )}
-      <FeatureBox css={{ maxWidth: '1400px', paddingTop: '16px', gap: '30px' }}>
-        {integration && (
-          <AwsOidcTitle integration={integration} resource={resourceKind} />
-        )}
+      <FeatureBox css={{ maxWidth: '1400px', paddingTop: '16px', gap: '16px' }}>
+        <>
+          {integration && (
+            <AwsOidcTitle integration={integration} resource={resourceKind} />
+          )}
+          {tasks && tasks.items.length > 0 && (
+            <TaskAlert name={integration.name} total={tasks.items.length} />
+          )}
+        </>
         {resourceKind == AwsResource.ec2 && <Rules />}
         {resourceKind == AwsResource.eks && <Rules />}
         {resourceKind == AwsResource.rds && <Rds />}

web/packages/teleport/src/Integrations/status/AwsOidc/Tasks/TaskAlert.tsx

@@ -0,0 +1,37 @@
+import { Alert } from 'design';
+import { ArrowForward, BellRinging } from 'design/Icon';
+import cfg from 'teleport/config';
+import { IntegrationKind } from 'teleport/services/integrations';
+import { useHistory } from 'react-router';
+
+type TaskAlertProps = {
+  name: string;
+  total: number;
+  kind?: IntegrationKind;
+};
+
+export function TaskAlert({
+  name,
+  total,
+  kind = IntegrationKind.AwsOidc,
+}: TaskAlertProps) {
+  const history = useHistory();
+
+  return (
+    <Alert
+      kind="warning"
+      icon={BellRinging}
+      primaryAction={{
+        content: (
+          <>
+            Resolve Now
+            <ArrowForward size={18} ml={2} />
+          </>
+        ),
+        onClick: () => history.push(cfg.getIntegrationTasksRoute(kind, name)),
+      }}
+    >
+      {total} Pending Tasks
+    </Alert>
+  );
+}

web/packages/teleport/src/Integrations/status/AwsOidc/Tasks/Tasks.tsx

@@ -0,0 +1,90 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import Table, { Cell } from 'design/DataTable';
+
+import { Indicator } from 'design';
+
+import { Danger } from 'design/Alert';
+
+import { FeatureBox } from 'teleport/components/Layout';
+import { AwsOidcHeader } from 'teleport/Integrations/status/AwsOidc/AwsOidcHeader';
+import { useAwsOidcStatus } from 'teleport/Integrations/status/AwsOidc/useAwsOidcStatus';
+import { UserTask } from 'teleport/services/integrations';
+import { AwsOidcTitle } from 'teleport/Integrations/status/AwsOidc/AwsOidcTitle';
+
+export function Tasks() {
+  const { integrationAttempt, tasksAttempt } = useAwsOidcStatus();
+  const { data: integration } = integrationAttempt;
+  const { data: tasks } = tasksAttempt;
+
+  if (
+    integrationAttempt.status == 'processing' ||
+    tasksAttempt.status == 'processing'
+  ) {
+    return <Indicator />;
+  }
+
+  if (integrationAttempt.status == 'error' || tasksAttempt.status == 'error') {
+    return (
+      <Danger>
+        {integrationAttempt.status == 'error'
+          ? integrationAttempt.statusText
+          : tasksAttempt.statusText}
+      </Danger>
+    );
+  }
+
+  if (!tasks) {
+    return null;
+  }
+
+  return (
+    <>
+      {integration && <AwsOidcHeader integration={integration} tasks={true} />}
+      <FeatureBox css={{ maxWidth: '1400px', paddingTop: '16px', gap: '30px' }}>
+        {integration && <AwsOidcTitle integration={integration} tasks={true} />}
+        <Table<UserTask>
+          data={tasks.items}
+          columns={[
+            {
+              key: 'taskType',
+              headerText: 'Type',
+              isSortable: true,
+            },
+            {
+              key: 'issueType',
+              headerText: 'Issue Details',
+              isSortable: true,
+            },
+            {
+              key: 'lastStateChange',
+              headerText: 'Timestamp (UTC)',
+              isSortable: true,
+              render: (item: UserTask) => (
+                <Cell>{new Date(item.lastStateChange).toISOString()}</Cell>
+              ),
+            },
+          ]}
+          emptyText={`No pending tasks`}
+          isSearchable
+        />
+      </FeatureBox>
+    </>
+  );
+}

web/packages/teleport/src/Integrations/status/AwsOidc/useAwsOidcStatus.tsx

@@ -25,13 +25,15 @@ import {
   IntegrationKind,
   integrationService,
   IntegrationWithSummary,
+  UserTasksListResponse,
 } from 'teleport/services/integrations';
 
 import useTeleport from 'teleport/useTeleport';
 
 export interface AwsOidcStatusContextState {
   statsAttempt: Attempt<IntegrationWithSummary>;
   integrationAttempt: Attempt<Integration>;
+  tasksAttempt: Attempt<UserTasksListResponse>;
 }
 
 export const awsOidcStatusContext =
@@ -54,16 +56,22 @@ export function AwsOidcStatusProvider({ children }: React.PropsWithChildren) {
     integrationService.fetchIntegration(name)
   );
 
+  const [tasks, fetchTasks] = useAsync(() =>
+    integrationService.fetchIntegrationUserTasksList(name)
+  );
+
   useEffect(() => {
     if (hasIntegrationReadAccess) {
       fetchIntegrationStats();
       fetchIntegration();
+      fetchTasks();
     }
   }, []);
 
   const value: AwsOidcStatusContextState = {
     statsAttempt: stats,
     integrationAttempt: integration,
+    tasksAttempt: tasks,
   };
 
   return (