Add rules tables for aws resources

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

@@ -27,32 +27,53 @@ import {
   AwsResource,
   StatCard,
 } from 'teleport/Integrations/status/AwsOidc/StatCard';
+import { AwsOidcTitle } from 'teleport/Integrations/status/AwsOidc/AwsOidcTitle';
 
 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;
   }
 
   // todo (michellescripts) after routing, ensure this view can be sticky
   const { awsec2, awseks, awsrds } = statsAttempt.data;
   const { data: integration } = integrationAttempt;
   return (
-    <FeatureBox css={{ maxWidth: '1400px', paddingTop: '16px' }}>
-      {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} />
-      </Flex>
-    </FeatureBox>
+    <>
+      <AwsOidcHeader integration={integration} />
+      <FeatureBox css={{ maxWidth: '1400px', paddingTop: '16px' }}>
+        {integration && <AwsOidcTitle integration={integration} />}
+        <H2 my={3}>Auto-Enrollment</H2>
+        <Flex gap={3}>
+          <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

@@ -18,33 +18,78 @@
 
 import { Link as InternalLink } from 'react-router-dom';
 
-import { ButtonIcon, Flex, Label, Text } from 'design';
-import { ArrowLeft } from 'design/Icon';
+import { ButtonIcon, ButtonText, Flex, Text } from 'design';
+import { Plugs } from 'design/Icon';
 import { HoverTooltip } from 'design/Tooltip';
 
 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';
+import { useHistory } from 'react-router';
+
+export function AwsOidcHeader({
+  integration,
+  resource = undefined,
+}: {
+  integration: Integration;
+  resource?: AwsResource;
+}) {
+  const history = useHistory();
+  const divider = (
+    <Text typography="body3" color="text.slightlyMuted">
+      /
+    </Text>
+  );
 
-export function AwsOidcHeader({ integration }: { integration: Integration }) {
-  const { status, labelKind } = getStatusAndLabel(integration);
   return (
-    <Flex alignItems="center">
+    <Flex
+      alignItems="center"
+      borderBottom={1}
+      borderColor="levels.surface"
+      width={'100%'}
+      pl={5}
+      py={1}
+    >
       <HoverTooltip position="bottom" tipContent="Back to Integrations">
         <ButtonIcon
+          size="small"
           as={InternalLink}
           to={cfg.routes.integrations}
-          aria-label="back"
+          aria-label="integrations-table"
+          color="text.slightlyMuted"
         >
-          <ArrowLeft size="medium" />
+          <Plugs size="small" />
         </ButtonIcon>
       </HoverTooltip>
-      <Text bold fontSize={6} mx={2}>
-        {integration.name}
-      </Text>
-      <Label kind={labelKind} aria-label="status" px={3}>
-        {status}
-      </Label>
+      {!resource ? (
+        <>
+          {divider}
+          <Text typography="body3" color="text.slightlyMuted" ml={2}>
+            {integration.name}
+          </Text>
+        </>
+      ) : (
+        <>
+          {divider}
+          <ButtonText
+            size="small"
+            onClick={() =>
+              history.push(
+                cfg.getIntegrationStatusRoute(
+                  integration.kind,
+                  integration.name
+                )
+              )
+            }
+          >
+            {integration.name}
+          </ButtonText>
+          {divider}
+          <Text typography="body3" color="text.slightlyMuted" ml={2}>
+            {resource.toUpperCase()}
+          </Text>
+        </>
+      )}
     </Flex>
   );
 }

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

@@ -21,14 +21,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/AwsOidcTitle.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 { Link as InternalLink } from 'react-router-dom';
+
+import { ButtonIcon, Flex, Label, Text } from 'design';
+import { ArrowLeft } from 'design/Icon';
+import { HoverTooltip } from 'design/Tooltip';
+
+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 AwsOidcTitle({
+  integration,
+  resource = undefined,
+}: {
+  integration: Integration;
+  resource?: AwsResource;
+}) {
+  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(),
+  };
+
+  return (
+    <Flex alignItems="center">
+      <HoverTooltip position="bottom" tipContent={content.helper}>
+        <ButtonIcon as={InternalLink} to={content.to} aria-label="back">
+          <ArrowLeft size="medium" />
+        </ButtonIcon>
+      </HoverTooltip>
+      <Text bold fontSize={6} mx={2}>
+        {content.content}
+      </Text>
+      <Label kind={labelKind} aria-label="status" px={3} ml={3}>
+        {status}
+      </Label>
+    </Flex>
+  );
+}

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
+    />
+  );
+}