Add dash navigation to individual aws resource tables

web/packages/design/src/Tabs/Tabs.ts

@@ -0,0 +1,58 @@
+/**
+ * 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 styled from 'styled-components';
+
+import { NavLink } from 'react-router-dom';
+
+export const TabsContainer = styled.div`
+  position: relative;
+  display: flex;
+  gap: ${p => p.theme.space[5]}px;
+  align-items: center;
+  padding: 0 ${p => p.theme.space[5]}px;
+  border-bottom: 1px solid ${p => p.theme.colors.spotBackground[0]};
+`;
+
+export const TabContainer = styled(NavLink)<{ selected?: boolean }>`
+  padding: ${p => p.theme.space[1] + p.theme.space[2]}px
+    ${p => p.theme.space[2]}px;
+  position: relative;
+  cursor: pointer;
+  z-index: 2;
+  opacity: ${p => (p.selected ? 1 : 0.5)};
+  transition: opacity 0.3s linear;
+  color: ${p => p.theme.colors.text.main};
+  font-weight: 300;
+  font-size: 22px;
+  line-height: ${p => p.theme.space[5]}px;
+  white-space: nowrap;
+  text-decoration: none;
+
+  &:hover {
+    opacity: 1;
+  }
+`;
+
+export const TabBorder = styled.div`
+  position: absolute;
+  bottom: -1px;
+  background: ${p => p.theme.colors.brand};
+  height: 2px;
+  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
+`;

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

@@ -33,13 +33,18 @@ import {
 export function AwsOidcDashboard() {
   const { statsAttempt, integrationAttempt } = useAwsOidcStatus();
 
-  if (statsAttempt.status == 'processing') {
+  if (
+    statsAttempt.status == 'processing' ||
+    integrationAttempt.status == 'processing'
+  ) {
     return <Indicator />;
   }
-  if (statsAttempt.status == 'error') {
+
+  if (integrationAttempt.status == 'error') {
     return <Danger>{statsAttempt.statusText}</Danger>;
   }
-  if (!statsAttempt.data) {
+
+  if (!statsAttempt.data || !integrationAttempt.data) {
     return null;
   }
 
@@ -48,12 +53,24 @@ export function AwsOidcDashboard() {
   const { data: integration } = integrationAttempt;
   return (
     <FeatureBox css={{ maxWidth: '1400px', paddingTop: '16px' }}>
-      {integration && <AwsOidcHeader integration={integration} />}
+      <AwsOidcHeader integration={integration} />
       <H2 my={3}>Auto-Enrollment</H2>
       <Flex gap={3}>
-        <StatCard resource={AwsResource.ec2} summary={awsec2} />
-        <StatCard resource={AwsResource.rds} summary={awsrds} />
-        <StatCard resource={AwsResource.eks} summary={awseks} />
+        <StatCard
+          name={integration.name}
+          resource={AwsResource.ec2}
+          summary={awsec2}
+        />
+        <StatCard
+          name={integration.name}
+          resource={AwsResource.eks}
+          summary={awseks}
+        />
+        <StatCard
+          name={integration.name}
+          resource={AwsResource.rds}
+          summary={awsrds}
+        />
       </Flex>
     </FeatureBox>
   );

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

@@ -20,14 +20,23 @@ import React from 'react';
 import { Link as InternalLink } from 'react-router-dom';
 
 import { ButtonIcon, Flex, Label, Text } from 'design';
-import { ArrowLeft } from 'design/Icon';
+import { ArrowLeft, ChevronRight } from 'design/Icon';
 import { HoverTooltip } from 'design/Tooltip';
 
+import Link from 'design/Link';
+
 import cfg from 'teleport/config';
 import { getStatusAndLabel } from 'teleport/Integrations/helpers';
 import { Integration } from 'teleport/services/integrations';
+import { AwsResource } from 'teleport/Integrations/status/AwsOidc/StatCard';
 
-export function AwsOidcHeader({ integration }: { integration: Integration }) {
+export function AwsOidcHeader({
+  integration,
+  resource = undefined,
+}: {
+  integration: Integration;
+  resource?: AwsResource;
+}) {
   const { status, labelKind } = getStatusAndLabel(integration);
   return (
     <Flex alignItems="center">
@@ -40,10 +49,30 @@ export function AwsOidcHeader({ integration }: { integration: Integration }) {
           <ArrowLeft size="medium" />
         </ButtonIcon>
       </HoverTooltip>
-      <Text bold fontSize={6} mx={2}>
-        {integration.name}
-      </Text>
-      <Label kind={labelKind} aria-label="status" px={3}>
+      {!resource ? (
+        <Text bold fontSize={6} mx={2}>
+          {integration.name}
+        </Text>
+      ) : (
+        <>
+          <Link
+            color="text.main"
+            href={cfg.getIntegrationStatusRoute(
+              integration.kind,
+              integration.name
+            )}
+          >
+            <Text bold fontSize={6} mx={2}>
+              {integration.name}
+            </Text>
+          </Link>
+          <ChevronRight />
+          <Text bold fontSize={6}>
+            {resource.toUpperCase()}
+          </Text>
+        </>
+      )}
+      <Label kind={labelKind} aria-label="status" px={3} ml={3}>
         {status}
       </Label>
     </Flex>

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

@@ -23,14 +23,22 @@ import cfg from 'teleport/config';
 
 import { AwsOidcStatusProvider } from 'teleport/Integrations/status/AwsOidc/useAwsOidcStatus';
 
+import { Details } from 'teleport/Integrations/status/AwsOidc/Details/Details';
+
 import { AwsOidcDashboard } from './AwsOidcDashboard';
 
 export function AwsOidcRoutes() {
   return (
     <AwsOidcStatusProvider>
       <Switch>
         <Route
-          key="aws-oidc-resources-list"
+          key="aws-oidc-resource-table"
+          exact
+          path={cfg.routes.integrationStatusResources}
+          component={Details}
+        />
+        <Route
+          key="aws-oidc-dashboard"
           exact
           path={cfg.routes.integrationStatus}
           component={AwsOidcDashboard}

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

@@ -0,0 +1,62 @@
+/**
+ * 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 React from 'react';
+
+import Table, { LabelCell } from 'design/DataTable';
+
+export function Agents() {
+  return (
+    <Table
+      data={[]}
+      columns={[
+        {
+          key: 'name',
+          headerText: 'Service Name',
+          isSortable: true,
+        },
+        {
+          key: 'region',
+          headerText: 'Region',
+          isSortable: true,
+        },
+        {
+          key: 'tags',
+          headerText: 'Tags',
+          isSortable: true,
+          onSort: (a, b) => {
+            const aStr = a.tags.toString();
+            const bStr = b.tags.toString();
+
+            if (aStr < bStr) {
+              return -1;
+            }
+            if (aStr > bStr) {
+              return 1;
+            }
+
+            return 0;
+          },
+          render: ({ tags }) => <LabelCell data={tags} />,
+        },
+      ]}
+      emptyText="Agents details coming soon"
+      isSearchable
+    />
+  );
+}

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

@@ -0,0 +1,51 @@
+/**
+ * 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 React from 'react';
+
+import { useParams } from 'react-router';
+
+import { FeatureBox } from 'teleport/components/Layout';
+import { AwsOidcHeader } from 'teleport/Integrations/status/AwsOidc/AwsOidcHeader';
+import { useAwsOidcStatus } from 'teleport/Integrations/status/AwsOidc/useAwsOidcStatus';
+import { AwsResource } from 'teleport/Integrations/status/AwsOidc/StatCard';
+import { IntegrationKind } from 'teleport/services/integrations';
+import { Rds } from 'teleport/Integrations/status/AwsOidc/Details/Rds';
+import { Ec2 } from 'teleport/Integrations/status/AwsOidc/Details/Ec2';
+import { Eks } from 'teleport/Integrations/status/AwsOidc/Details/Eks';
+
+export function Details() {
+  const { resourceKind } = useParams<{
+    type: IntegrationKind;
+    name: string;
+    resourceKind: AwsResource;
+  }>();
+
+  const { integrationAttempt } = useAwsOidcStatus();
+  const { data: integration } = integrationAttempt;
+  return (
+    <FeatureBox css={{ maxWidth: '1400px', paddingTop: '16px', gap: '30px' }}>
+      {integration && (
+        <AwsOidcHeader integration={integration} resource={resourceKind} />
+      )}
+      {resourceKind == AwsResource.ec2 && <Ec2 />}
+      {resourceKind == AwsResource.eks && <Eks />}
+      {resourceKind == AwsResource.rds && <Rds />}
+    </FeatureBox>
+  );
+}

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

@@ -0,0 +1,57 @@
+/**
+ * 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 React from 'react';
+
+import Table, { LabelCell } from 'design/DataTable';
+
+export function Ec2() {
+  return (
+    <Table
+      data={[]}
+      columns={[
+        {
+          key: 'region',
+          headerText: 'Region',
+          isSortable: true,
+        },
+        {
+          key: 'labels',
+          headerText: 'Labels',
+          isSortable: true,
+          onSort: (a, b) => {
+            const aStr = a.labels.toString();
+            const bStr = b.labels.toString();
+
+            if (aStr < bStr) {
+              return -1;
+            }
+            if (aStr > bStr) {
+              return 1;
+            }
+
+            return 0;
+          },
+          render: ({ labels }) => <LabelCell data={labels} />,
+        },
+      ]}
+      emptyText="EC2 details coming soon"
+      isSearchable
+    />
+  );
+}