Skip to content

Commit

Permalink
Add navigation to individual aws resource tables
Browse files Browse the repository at this point in the history
  • Loading branch information
michellescripts committed Dec 6, 2024
1 parent 20d8d78 commit 7280141
Show file tree
Hide file tree
Showing 13 changed files with 633 additions and 20 deletions.
58 changes: 58 additions & 0 deletions lib/web/integrations.go
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,21 @@ func (h *Handler) integrationsDelete(w http.ResponseWriter, r *http.Request, p h

// integrationsGet returns an Integration based on its name
func (h *Handler) integrationsGet(w http.ResponseWriter, r *http.Request, p httprouter.Params, sctx *SessionContext, site reversetunnelclient.RemoteSite) (interface{}, error) {

// todo mberg remove
if true {
return ui.Integration{
Name: "fake-integration",
SubKind: "aws-oidc",
AWSOIDC: &ui.IntegrationAWSOIDCSpec{
RoleARN: "arn::",
IssuerS3Bucket: "bucket",
IssuerS3Prefix: "pref",
Audience: "aud",
},
}, nil
}

integrationName := p.ByName("name")
if integrationName == "" {
return nil, trace.BadParameter("an integration name is required")
Expand All @@ -204,6 +219,49 @@ func (h *Handler) integrationsGet(w http.ResponseWriter, r *http.Request, p http

// integrationStats returns the integration stats.
func (h *Handler) integrationStats(w http.ResponseWriter, r *http.Request, p httprouter.Params, sctx *SessionContext, site reversetunnelclient.RemoteSite) (interface{}, error) {
// todo mberg remove
now := time.Now().UTC().Add(-30 * time.Minute)
foo := ui.IntegrationWithSummary{
Integration: &ui.Integration{
Name: "foo-integration",
SubKind: "unsure",
AWSOIDC: &ui.IntegrationAWSOIDCSpec{
RoleARN: "arn::",
IssuerS3Bucket: "bucket",
IssuerS3Prefix: "pref",
Audience: "aud",
},
},
AWSEC2: ui.ResourceTypeSummary{
RulesCount: 33,
ResourcesFound: 44,
ResourcesEnrollmentFailed: 5,
ResourcesEnrollmentSuccess: 6,
DiscoverLastSync: &now,
ECSDatabaseServiceCount: 88,
},
AWSRDS: ui.ResourceTypeSummary{
RulesCount: 43,
ResourcesFound: 54,
ResourcesEnrollmentFailed: 6,
ResourcesEnrollmentSuccess: 7,
DiscoverLastSync: &now,
ECSDatabaseServiceCount: 87,
},
AWSEKS: ui.ResourceTypeSummary{
RulesCount: 9,
ResourcesFound: 9,
ResourcesEnrollmentFailed: 9,
ResourcesEnrollmentSuccess: 9,
DiscoverLastSync: &now,
ECSDatabaseServiceCount: 9,
},
}

if true {
return foo, nil
}

integrationName := p.ByName("name")
if integrationName == "" {
return nil, trace.BadParameter("an integration name is required")
Expand Down
58 changes: 58 additions & 0 deletions web/packages/design/src/Tabs/Tabs.ts
Original file line number Diff line number Diff line change
@@ -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);
`;
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,21 @@ 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') {
return <Danger>{statsAttempt.statusText}</Danger>;
}
if (!statsAttempt.data) {

if (integrationAttempt.status == 'error') {
return <Danger>{statsAttempt.statusText}</Danger>;
}

if (!statsAttempt.data || !integrationAttempt.data) {
return;
}

Expand All @@ -48,12 +56,30 @@ 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>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 'shared/components/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">
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
@@ -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
/>
);
}
Original file line number Diff line number Diff line change
@@ -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>
);
}
Loading

0 comments on commit 7280141

Please sign in to comment.