@@ -12,14 +23,9 @@ function HeroSection(): JSX.Element {
AWS Web Services
- Monitor your AWS infrastructure with SigNoz. Get metrics and logs from your
- AWS services.
-
-
-
+ One-click setup for AWS monitoring with SigNoz
+
+ {label}
+ {isSelected && (
+
+ );
+}
+
+function renderOption(
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ option: any,
+ activeAccountId: string | undefined,
+): JSX.Element {
+ return (
+
+
+ )}
+
+ {accounts?.length ? (
+ setIsIntegrationModalOpen(false)}
+ />
+
+ setIsAccountSettingsModalOpen(false)}
+ account={activeAccount as CloudAccount}
+ setActiveAccount={setActiveAccount}
+ />
+
+ );
+}
+
+export default AccountActions;
diff --git a/frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountSettingsModal.style.scss b/frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountSettingsModal.style.scss
new file mode 100644
index 00000000000..f2d1fd66fdf
--- /dev/null
+++ b/frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountSettingsModal.style.scss
@@ -0,0 +1,189 @@
+.account-settings-modal {
+ &__title-account-id {
+ color: var(--bg-vanilla-100);
+ font-family: 'Geist Mono';
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 20px;
+ }
+
+ &__body {
+ display: flex;
+ flex-direction: column;
+ gap: 17px;
+ border-radius: 3px;
+ border: 1px solid var(--bg-slate-500);
+ padding: 14px;
+ &-account-info {
+ &-connected-account-details {
+ &-title {
+ color: var(--bg-vanilla-100);
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 20px; /* 142.857% */
+ letter-spacing: -0.07px;
+ }
+ &-account-id {
+ color: var(--bg-vanilla-400);
+ font-size: 12px;
+ line-height: 18px;
+ letter-spacing: -0.06px;
+ &-account-id {
+ font-family: 'Geist Mono';
+ font-size: 12px;
+ font-weight: 700;
+ line-height: 18px;
+ letter-spacing: -0.06px;
+ }
+ }
+ }
+ }
+ &-regions-switch {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ &-title {
+ color: var(--bg-vanilla-100);
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 20px;
+ letter-spacing: -0.07px;
+ }
+ &-switch {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ &-label {
+ color: var(--bg-vanilla-400);
+ background-color: transparent;
+ border: none;
+ font-family: Inter;
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 18px;
+ letter-spacing: -0.005em;
+ cursor: pointer;
+ }
+ }
+ }
+ &-regions-select {
+ margin-top: 8px;
+ }
+ }
+
+ &__footer {
+ &-close-button,
+ &-save-button {
+ color: var(--bg-vanilla-100);
+ font-family: Inter;
+ font-size: 12px;
+ font-weight: 500;
+ padding-left: 16px;
+ padding-right: 16px;
+ }
+ &-close-button {
+ border-radius: 2px;
+ background: var(--bg-slate-400);
+ border: none;
+ }
+ &-save-button {
+ &:disabled {
+ background: var(--bg-robin-500);
+ color: var(--bg-vanilla-100);
+ opacity: 0.6;
+ border: none;
+ }
+ border-radius: 2px;
+ margin: 0 !important;
+ }
+ }
+ .ant-modal-body {
+ padding-bottom: 0 !important;
+ }
+ .ant-modal-footer {
+ margin: 0;
+ padding: 24px 24px 12px;
+ }
+
+ .integration-detail-content {
+ margin: 0;
+ }
+}
+
+.lightMode {
+ .account-settings-modal {
+ &__title-account-id {
+ color: var(--bg-ink-500);
+ }
+
+ &__body {
+ border-color: var(--bg-vanilla-300);
+
+ &-account-info {
+ &-connected-account-details {
+ &-title {
+ color: var(--bg-ink-500);
+ }
+
+ &-account-id {
+ color: var(--bg-ink-400);
+
+ &-account-id {
+ color: var(--bg-ink-500);
+ }
+ }
+ }
+ }
+
+ &-regions-switch {
+ &-title {
+ color: var(--bg-ink-500);
+ }
+
+ &-switch {
+ &-label {
+ color: var(--bg-ink-400);
+
+ &:hover {
+ color: var(--bg-ink-500);
+ }
+ }
+ }
+ }
+ }
+
+ &__footer {
+ &-close-button,
+ &-save-button {
+ color: var(--bg-vanilla-100);
+ }
+
+ &-close-button {
+ background: var(--bg-vanilla-100);
+ border: 1px solid var(--bg-vanilla-300);
+ color: var(--bg-ink-400);
+
+ &:hover {
+ border-color: var(--bg-vanilla-400);
+ color: var(--bg-ink-500);
+ }
+ }
+
+ &-save-button {
+ // Keep primary button same as dark mode
+ background: var(--bg-robin-500);
+ color: var(--bg-vanilla-100);
+
+ &:disabled {
+ background: var(--bg-robin-500);
+ color: var(--bg-vanilla-100);
+ opacity: 0.6;
+ }
+
+ &:not(:disabled):hover {
+ background: var(--bg-robin-400);
+ }
+ }
+ }
+ }
+}
diff --git a/frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountSettingsModal.tsx b/frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountSettingsModal.tsx
new file mode 100644
index 00000000000..209cb7f624d
--- /dev/null
+++ b/frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountSettingsModal.tsx
@@ -0,0 +1,182 @@
+import './AccountSettingsModal.style.scss';
+
+import { Form, Select, Switch } from 'antd';
+import SignozModal from 'components/SignozModal/SignozModal';
+import {
+ getRegionPreviewText,
+ useAccountSettingsModal,
+} from 'hooks/integrations/aws/useAccountSettingsModal';
+import IntergrationsUninstallBar from 'pages/Integrations/IntegrationDetailPage/IntegrationsUninstallBar';
+import { ConnectionStates } from 'pages/Integrations/IntegrationDetailPage/TestConnection';
+import { AWS_INTEGRATION } from 'pages/Integrations/IntegrationsList';
+import { Dispatch, SetStateAction, useCallback } from 'react';
+
+import { CloudAccount } from '../../ServicesSection/types';
+import { RegionSelector } from './RegionSelector';
+
+interface AccountSettingsModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ account: CloudAccount;
+ setActiveAccount: Dispatch
+ }
+ optionRender={(option): JSX.Element =>
+ renderOption(option, activeAccount?.cloud_account_id)
+ }
+ onChange={(value): void => {
+ setActiveAccount(getAccountById(accounts, value));
+ urlQuery.set('accountId', value);
+ navigate({ search: urlQuery.toString() });
+ }}
+ />
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
+ Go to Dashboards
+
+ ),
+ block: true,
+ onOk: handleGoToDashboards,
+ cancelButtonProps: { style: { display: 'none' } },
+ disabled: false,
+ };
+ }
+
+ // Handle other views
+ const viewConfigs = {
+ [ActiveViewEnum.FORM]: {
+ title: 'Add AWS Account',
+ okText: (
+
+ Launch Cloud Formation Template{' '}
+
+ ),
+ onOk: handleSubmit,
+ disabled:
+ isLoading || isGeneratingUrl || modalState === ModalStateEnum.WAITING,
+ cancelButtonProps: { style: { display: 'none' } },
+ },
+ [ActiveViewEnum.SELECT_REGIONS]: {
+ title: 'Which regions do you want to monitor?',
+ okText: `Confirm Selection (${getSelectedRegionsCount()})`,
+ onOk: (): void => setActiveView(ActiveViewEnum.FORM),
+ isLoading: isLoading || isGeneratingUrl,
+ cancelButtonProps: { style: { display: 'block' } },
+ disabled: false,
+ },
+ };
+
+ return viewConfigs[activeView];
+ }, [
+ modalState,
+ handleSubmit,
+ getSelectedRegionsCount,
+ isLoading,
+ isGeneratingUrl,
+ activeView,
+ handleGoToDashboards,
+ setActiveView,
+ ]);
+
+ const modalConfig = getModalConfig();
+
+ return (
+
+
+ }
+ style={{ height: '44px' }}
+ className="cloud-account-setup-form__select"
+ >
+ {regions.flatMap((region) =>
+ region.subRegions.map((subRegion) => (
+
+ {subRegion.displayName}
+
+ )),
+ )}
+
+
+
+ );
+}
+
+function MonitoringRegionsSection({
+ includeAllRegions,
+ selectedRegions,
+ onIncludeAllRegionsChange,
+ getRegionPreviewText,
+ onRegionSelect,
+}: {
+ includeAllRegions: boolean;
+ selectedRegions: string[];
+ onIncludeAllRegionsChange: (checked: boolean) => void;
+ getRegionPreviewText: (regions: string[]) => string[];
+ onRegionSelect: () => void;
+}): JSX.Element {
+ return (
+
+ Where should we deploy the SigNoz Cloud stack?
+
+
+ Choose the AWS region for CloudFormation stack deployment
+
+
+ => {
+ if (selectedRegions.length === 0) {
+ throw new Error('Please select at least one region to monitor');
+ }
+ },
+ message: 'Please select at least one region to monitor',
+ },
+ ]}
+ className="cloud-account-setup-form__form-item"
+ >
+
+
+ );
+}
+
+function ComplianceNote(): JSX.Element {
+ return (
+
+ Which regions do you want to monitor?
+
+
+ Choose only the regions you want SigNoz to monitor. You can enable all at
+ once, or pick specific ones:
+
+
+
+
+
+
+ );
+}
+
+export { ComplianceNote, MonitoringRegionsSection, RegionDeploymentSection };
diff --git a/frontend/src/container/CloudIntegrationPage/HeroSection/components/RegionForm.tsx b/frontend/src/container/CloudIntegrationPage/HeroSection/components/RegionForm.tsx
new file mode 100644
index 00000000000..9539278f81c
--- /dev/null
+++ b/frontend/src/container/CloudIntegrationPage/HeroSection/components/RegionForm.tsx
@@ -0,0 +1,168 @@
+import { Color } from '@signozhq/design-tokens';
+import { Form, Select, Switch } from 'antd';
+import cx from 'classnames';
+import { useAccountStatus } from 'hooks/integrations/aws/useAccountStatus';
+import { ChevronDown } from 'lucide-react';
+import { useRef } from 'react';
+import { AccountStatusResponse } from 'types/api/integrations/aws';
+
+import { regions } from '../../ServicesSection/data';
+import { ModalStateEnum, RegionFormProps } from '../types';
+import AlertMessage from './AlertMessage';
+
+const allRegions = (): string[] =>
+ regions.flatMap((r) => r.subRegions.map((sr) => sr.name));
+
+const getRegionPreviewText = (regions: string[]): string[] => {
+ if (regions.includes('all')) {
+ return allRegions();
+ }
+ return regions;
+};
+
+export function RegionForm({
+ form,
+ modalState,
+ setModalState,
+ selectedRegions,
+ includeAllRegions,
+ onIncludeAllRegionsChange,
+ onRegionSelect,
+ onSubmit,
+ accountId,
+ selectedDeploymentRegion,
+ handleRegionChange,
+}: RegionFormProps): JSX.Element {
+ const startTimeRef = useRef(Date.now());
+ const refetchInterval = 10 * 1000;
+ const errorTimeout = 5 * 60 * 1000;
+
+ const { isLoading: isAccountStatusLoading } = useAccountStatus(accountId, {
+ refetchInterval,
+ enabled: !!accountId && modalState === ModalStateEnum.WAITING,
+ onSuccess: (data: AccountStatusResponse) => {
+ if (data.data.status.integration.last_heartbeat_ts_ms !== null) {
+ setModalState(ModalStateEnum.SUCCESS);
+ } else if (Date.now() - startTimeRef.current >= errorTimeout) {
+ // 5 minutes in milliseconds
+ setModalState(ModalStateEnum.ERROR);
+ }
+ },
+ onError: () => {
+ setModalState(ModalStateEnum.ERROR);
+ },
+ });
+
+ const isFormDisabled =
+ modalState === ModalStateEnum.WAITING || isAccountStatusLoading;
+
+ return (
+
+ );
+}
diff --git a/frontend/src/container/CloudIntegrationPage/HeroSection/components/RegionSelector.style.scss b/frontend/src/container/CloudIntegrationPage/HeroSection/components/RegionSelector.style.scss
new file mode 100644
index 00000000000..50715c73a9d
--- /dev/null
+++ b/frontend/src/container/CloudIntegrationPage/HeroSection/components/RegionSelector.style.scss
@@ -0,0 +1,21 @@
+.select-all {
+ margin-bottom: 20px;
+}
+
+.regions-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
+ gap: 8px;
+}
+
+.region-group {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.region-group label {
+ display: flex;
+ gap: 10px;
+ align-items: center;
+}
diff --git a/frontend/src/container/CloudIntegrationPage/HeroSection/components/RegionSelector.tsx b/frontend/src/container/CloudIntegrationPage/HeroSection/components/RegionSelector.tsx
new file mode 100644
index 00000000000..e5f2a0949fb
--- /dev/null
+++ b/frontend/src/container/CloudIntegrationPage/HeroSection/components/RegionSelector.tsx
@@ -0,0 +1,64 @@
+import './RegionSelector.style.scss';
+
+import { Checkbox } from 'antd';
+import { useRegionSelection } from 'hooks/integrations/aws/useRegionSelection';
+import { Dispatch, SetStateAction } from 'react';
+
+import { regions } from '../../ServicesSection/data';
+
+export function RegionSelector({
+ selectedRegions,
+ setSelectedRegions,
+ setIncludeAllRegions,
+}: {
+ selectedRegions: string[];
+ setSelectedRegions: Dispatch
+ Note: Some organizations may require the CloudFormation stack to be deployed
+ in the same region as their primary infrastructure for compliance or latency
+ reasons.
+
+
+
+ );
+}
diff --git a/frontend/src/container/CloudIntegrationPage/HeroSection/components/SuccessView.style.scss b/frontend/src/container/CloudIntegrationPage/HeroSection/components/SuccessView.style.scss
new file mode 100644
index 00000000000..c57a831b14b
--- /dev/null
+++ b/frontend/src/container/CloudIntegrationPage/HeroSection/components/SuccessView.style.scss
@@ -0,0 +1,156 @@
+.cloud-account-setup-success-view {
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+ text-align: center;
+ padding-top: 34px;
+ p,
+ h3,
+ h4 {
+ margin: 0;
+ }
+ &__content {
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
+ .cloud-account-setup-success-view {
+ &__title {
+ h3 {
+ color: var(--bg-vanilla-100);
+ font-size: 20px;
+ font-weight: 500;
+ line-height: 32px;
+ }
+ }
+ &__description {
+ color: var(--bg-vanilla-400);
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: -0.07px;
+ }
+ }
+ }
+ &__what-next {
+ display: flex;
+ flex-direction: column;
+ gap: 18px;
+ text-align: left;
+ &-title {
+ color: var(--bg-slate-50);
+ font-size: 11px;
+ font-weight: 500;
+ line-height: 18px;
+ letter-spacing: 0.88px;
+ text-transform: uppercase;
+ }
+ .what-next-items-wrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ &__item {
+ display: flex;
+ gap: 10px;
+ align-items: baseline;
+ &.ant-alert {
+ padding: 14px;
+ border-radius: 8px;
+ font-size: 14px;
+ line-height: 20px; /* 142.857% */
+ letter-spacing: -0.21px;
+ }
+ &.ant-alert-info {
+ border: 1px solid rgba(63, 94, 204, 0.5);
+ background: rgba(78, 116, 248, 0.2);
+ color: var(--bg-robin-400);
+ }
+
+ .what-next-item {
+ color: var(--bg-robin-400);
+ &-bullet-icon {
+ font-size: 20px;
+ line-height: 20px;
+ }
+ &-text {
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 20px;
+ letter-spacing: -0.21px;
+ }
+ }
+ }
+ }
+ }
+ &__footer {
+ padding-top: 18px;
+ .ant-btn {
+ background: var(--bg-robin-500);
+ color: var(--bg-vanilla-100);
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 20px;
+ height: 36px;
+ }
+ }
+}
+.lottie-container {
+ position: absolute;
+ width: 743.5px;
+ height: 990.342px;
+ top: -100px;
+ left: -36px;
+ z-index: 1;
+}
+
+.lightMode {
+ .cloud-account-setup-success-view {
+ &__content {
+ .cloud-account-setup-success-view {
+ &__title {
+ h3 {
+ color: var(--bg-ink-500);
+ }
+ }
+
+ &__description {
+ color: var(--bg-ink-400);
+ }
+ }
+ }
+
+ &__what-next {
+ &-title {
+ color: var(--bg-ink-500);
+ }
+
+ .what-next-items-wrapper {
+ &__item {
+ &.ant-alert-info {
+ border: 1px solid rgba(63, 94, 204, 0.2);
+ background: rgba(78, 116, 248, 0.1);
+ color: var(--bg-robin-500);
+ }
+
+ .what-next-item {
+ color: var(--bg-robin-500);
+
+ &-text {
+ color: var(--bg-robin-500);
+ }
+ }
+ }
+ }
+ }
+
+ &__footer {
+ .ant-btn {
+ background: var(--bg-robin-500);
+ color: var(--bg-vanilla-100);
+
+ &:hover {
+ background: var(--bg-robin-400);
+ }
+ }
+ }
+ }
+}
diff --git a/frontend/src/container/CloudIntegrationPage/HeroSection/components/SuccessView.tsx b/frontend/src/container/CloudIntegrationPage/HeroSection/components/SuccessView.tsx
new file mode 100644
index 00000000000..7cd22870d5a
--- /dev/null
+++ b/frontend/src/container/CloudIntegrationPage/HeroSection/components/SuccessView.tsx
@@ -0,0 +1,78 @@
+import './SuccessView.style.scss';
+
+import { Alert } from 'antd';
+import integrationsSuccess from 'assets/Lotties/integrations-success.json';
+import { useState } from 'react';
+import Lottie from 'react-lottie';
+
+export function SuccessView(): JSX.Element {
+ const [isAnimationComplete, setIsAnimationComplete] = useState(false);
+
+ const defaultOptions = {
+ loop: false,
+ autoplay: true,
+ animationData: integrationsSuccess,
+ rendererSettings: {
+ preserveAspectRatio: 'xMidYMid slice',
+ },
+ };
+
+ return (
+ <>
+ {!isAnimationComplete && (
+
+ 20 &&
+ selectedRegions.length < allRegionIds.length
+ }
+ onChange={(e): void => handleSelectAll(e.target.checked)}
+ >
+ Select All Regions
+
+
+
+
+ {regions.map((region) => (
+
+
+ handleRegionSelect(subRegion.id)}
+ >
+ {subRegion.name}
+
+ ))}
+
+ ))}
+ {region.name}
+ {region.subRegions.map((subRegion) => ( +
+ setIsAnimationComplete(true),
+ },
+ ]}
+ />
+
+ )}
+
+
+
+
+ );
+}
diff --git a/frontend/src/container/CloudIntegrationPage/HeroSection/components/components/RegionForm.tsx b/frontend/src/container/CloudIntegrationPage/HeroSection/components/components/RegionForm.tsx
new file mode 100644
index 00000000000..e636ef4dae5
--- /dev/null
+++ b/frontend/src/container/CloudIntegrationPage/HeroSection/components/components/RegionForm.tsx
@@ -0,0 +1,183 @@
+import { Color } from '@signozhq/design-tokens';
+import { Button, Form, Select, Switch } from 'antd';
+import cx from 'classnames';
+import { useAccountStatus } from 'hooks/integrations/aws/useAccountStatus';
+import { ChevronDown, SquareArrowOutUpRight } from 'lucide-react';
+import { AccountStatusResponse } from 'types/api/integrations/aws';
+
+import { regions } from '../../ServicesSection/data';
+import AlertMessage from '../AlertMessage';
+import { ModalStateEnum, RegionFormProps } from '../types';
+
+const allRegions = (): string[] =>
+ regions.flatMap((r) => r.subRegions.map((sr) => sr.name));
+
+const getRegionPreviewText = (regions: string[]): string[] => {
+ if (regions.includes('all')) {
+ return allRegions();
+ }
+ return regions;
+};
+
+export function RegionForm({
+ form,
+ modalState,
+ setModalState,
+ selectedRegions,
+ includeAllRegions,
+ isLoading,
+ isGeneratingUrl,
+ onIncludeAllRegionsChange,
+ onRegionSelect,
+ onSubmit,
+ accountId,
+ selectedDeploymentRegion,
+ handleRegionChange,
+}: RegionFormProps): JSX.Element {
+ const { isLoading: isAccountStatusLoading } = useAccountStatus(
+ accountId ?? null,
+ {
+ refetchInterval: 5000,
+ enabled: !!accountId && modalState === ModalStateEnum.WAITING,
+ onSuccess: (data: AccountStatusResponse) => {
+ if (data.data.status.integration.last_heartbeat_ts_ms !== null) {
+ setModalState(ModalStateEnum.SUCCESS);
+ }
+ },
+ onError: () => {
+ setModalState(ModalStateEnum.ERROR);
+ },
+ },
+ );
+
+ const isFormDisabled =
+ modalState === ModalStateEnum.WAITING || isAccountStatusLoading;
+
+ return (
+
+ );
+}
diff --git a/frontend/src/container/CloudIntegrationPage/HeroSection/components/types.ts b/frontend/src/container/CloudIntegrationPage/HeroSection/components/types.ts
new file mode 100644
index 00000000000..79645117d6d
--- /dev/null
+++ b/frontend/src/container/CloudIntegrationPage/HeroSection/components/types.ts
@@ -0,0 +1,35 @@
+import { FormInstance } from 'antd';
+import { Dispatch, SetStateAction } from 'react';
+
+export enum ActiveViewEnum {
+ SELECT_REGIONS = 'select-regions',
+ FORM = 'form',
+}
+
+export enum ModalStateEnum {
+ FORM = 'form',
+ WAITING = 'waiting',
+ ERROR = 'error',
+ SUCCESS = 'success',
+}
+
+export interface RegionFormProps {
+ form: FormInstance;
+ modalState: ModalStateEnum;
+ setModalState: Dispatch
+ 
+
+
+
+
+
+
+ 🎉 Success!
+Your AWS Web Service integration is all set.
+
+
+ Your observability journey is off to a great start.
+Now that your data is flowing, here’s what you can do next:
+
+
+ + WHAT NEXT +
+
+ {[
+ 'Understand your AWS services with SigNoz’s out-of-the-box dashboards',
+ 'Set up alerts for real-time monitoring.',
+ 'Track logs and traces.',
+ ].map((item) => (
+
+
+ }
+ type="info"
+ className="what-next-items-wrapper__item"
+ />
+ ))}
+ •
+ {item}
+ {text}
;
+}
+
+function ServiceDetails(): JSX.Element | null {
+ const urlQuery = useUrlQuery();
+ const accountId = urlQuery.get('accountId');
+ const serviceId = urlQuery.get('service');
+ const [isConfigureServiceModalOpen, setIsConfigureServiceModalOpen] = useState(
+ false,
+ );
+
+ const { data: serviceDetailsData, isLoading } = useServiceDetails(
+ serviceId || '',
+ accountId || undefined,
+ );
+
+ if (isLoading) {
+ return Details
-
+ {serviceDetailsData?.status && (
+
{service.overview}
+
+
No services found
;
+
return (
- {services.map((service) => (
+ {filteredServices.map((service) => (
diff --git a/frontend/src/container/CloudIntegrationPage/ServicesSection/ServicesTabs.style.scss b/frontend/src/container/CloudIntegrationPage/ServicesSection/ServicesTabs.style.scss
index a73e1023b54..45e4f25931c 100644
--- a/frontend/src/container/CloudIntegrationPage/ServicesSection/ServicesTabs.style.scss
+++ b/frontend/src/container/CloudIntegrationPage/ServicesSection/ServicesTabs.style.scss
@@ -107,7 +107,34 @@
}
.service-details__right-actions {
display: flex;
+ align-items: center;
gap: 8px;
+ .service-status {
+ display: flex;
+ align-items: center;
+ padding: 2px 8px;
+ font-family: 'Geist Mono';
+ font-size: 12px;
+ font-weight: 500;
+ letter-spacing: 0.54px;
+ border-radius: 2px;
+ line-height: normal;
+ &--connected {
+ border: 1px solid rgba(37, 225, 146, 0.1);
+ background: rgba(37, 225, 146, 0.1);
+ color: var(--bg-forest-400);
+ }
+ &--stale-data {
+ background: rgba(255, 215, 120, 0.1);
+ border: 1px solid rgba(255, 215, 120, 0.1);
+ color: var(--bg-amber-400);
+ }
+ &--no-data {
+ border: 1px solid rgba(234, 109, 113, 0.1);
+ background: rgba(234, 109, 113, 0.1);
+ color: var(--bg-cherry-400);
+ }
+ }
.configure-button {
display: flex;
align-items: center;
@@ -252,3 +279,153 @@
}
}
}
+
+.lightMode {
+ .services-tabs {
+ .ant-tabs-tab {
+ &.ant-tabs-tab-active {
+ .ant-tabs-tab-btn {
+ color: var(--bg-ink-500);
+ }
+ }
+ }
+ }
+
+ .services-filter {
+ .ant-select-selector {
+ background-color: var(--bg-vanilla-100) !important;
+ border-color: var(--bg-vanilla-300) !important;
+ color: var(--bg-ink-400) !important;
+ }
+
+ .ant-select-arrow {
+ color: var(--bg-ink-400);
+ }
+ }
+
+ .service-item {
+ &:not(:last-child) {
+ border-bottom: 1px solid var(--bg-vanilla-300);
+ }
+
+ &.active {
+ background-color: var(--bg-vanilla-300);
+ }
+
+ &__icon-wrapper {
+ background-color: var(--bg-vanilla-100);
+ border-color: var(--bg-vanilla-300);
+ }
+
+ &__title {
+ color: var(--bg-ink-500);
+ }
+ }
+
+ .service-details {
+ &__title-bar {
+ border-bottom: 1px solid var(--bg-vanilla-300);
+
+ .service-details__details-title {
+ color: var(--bg-ink-400);
+ }
+
+ .configure-button {
+ color: var(--bg-ink-400);
+ background: var(--bg-vanilla-100);
+ border-color: var(--bg-vanilla-300);
+
+ &:hover {
+ border-color: var(--bg-vanilla-400);
+ color: var(--bg-ink-500);
+ }
+ }
+
+ .service-status {
+ &--connected {
+ border: 1px solid rgba(37, 225, 146, 0.2);
+ background: rgba(37, 225, 146, 0.1);
+ color: var(--bg-forest-500);
+ }
+
+ &--stale-data {
+ border: 1px solid rgba(255, 215, 120, 0.2);
+ background: rgba(255, 215, 120, 0.1);
+ color: var(--bg-amber-500);
+ }
+
+ &--no-data {
+ border: 1px solid rgba(234, 109, 113, 0.2);
+ background: rgba(234, 109, 113, 0.1);
+ color: var(--bg-cherry-500);
+ }
+ }
+ }
+
+ &__overview {
+ color: var(--bg-ink-400);
+ }
+
+ &__tabs {
+ .ant-tabs {
+ &-tab {
+ &-btn {
+ color: var(--bg-ink-400) !important;
+
+ &[aria-selected='true'] {
+ color: var(--bg-ink-500) !important;
+ }
+ }
+
+ &-active {
+ background: var(--bg-vanilla-300);
+ }
+ }
+
+ &-nav-list {
+ border-color: var(--bg-vanilla-300);
+ background: var(--bg-vanilla-100);
+ }
+ }
+ }
+
+ .cloud-service {
+ &-dashboard-item {
+ &__title {
+ color: var(--bg-ink-500);
+ }
+ }
+
+ &-data-collected {
+ &__table {
+ .ant-table {
+ border-color: var(--bg-vanilla-300);
+
+ .ant-table-thead {
+ > tr > th {
+ color: var(--bg-ink-400);
+ }
+ }
+
+ .ant-table-tbody {
+ > tr {
+ &:nth-child(odd),
+ &:hover > td {
+ background: var(--bg-vanilla-100) !important;
+ }
+
+ > td {
+ color: var(--bg-ink-400);
+ }
+ }
+ }
+ }
+ }
+
+ &__table-heading {
+ color: var(--bg-ink-500);
+ }
+ }
+ }
+ }
+}
diff --git a/frontend/src/container/CloudIntegrationPage/ServicesSection/ServicesTabs.tsx b/frontend/src/container/CloudIntegrationPage/ServicesSection/ServicesTabs.tsx
index 99d79cbec92..c9eead772bb 100644
--- a/frontend/src/container/CloudIntegrationPage/ServicesSection/ServicesTabs.tsx
+++ b/frontend/src/container/CloudIntegrationPage/ServicesSection/ServicesTabs.tsx
@@ -3,22 +3,57 @@ import './ServicesTabs.style.scss';
import { Color } from '@signozhq/design-tokens';
import type { SelectProps, TabsProps } from 'antd';
import { Select, Tabs } from 'antd';
-import useUrlQuery from 'hooks/useUrlQuery';
+import { getAwsServices } from 'api/integrations/aws';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
import { ChevronDown } from 'lucide-react';
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useMemo, useState } from 'react';
+import { useQuery } from 'react-query';
-import { serviceDetails, services } from './data';
import ServiceDetails from './ServiceDetails';
import ServicesList from './ServicesList';
-const selectOptions: SelectProps['options'] = [
- { value: 'all_services', label: 'All Services (24)' },
- { value: 'enabled', label: 'Enabled (12)' },
- { value: 'available', label: 'Available (12)' },
-];
+interface ServicesFilterProps {
+ accountId: string;
+ onFilterChange: (value: 'all_services' | 'enabled' | 'available') => void;
+}
+
+function ServicesFilter({
+ accountId,
+ onFilterChange,
+}: ServicesFilterProps): JSX.Element | null {
+ const { data: services, isLoading } = useQuery(
+ [REACT_QUERY_KEY.AWS_SERVICES, accountId],
+ () => getAwsServices(accountId),
+ );
+
+ const { enabledCount, availableCount } = useMemo(() => {
+ if (!services) return { enabledCount: 0, availableCount: 0 };
+
+ return services.reduce(
+ (acc, service) => {
+ const isEnabled =
+ service?.config?.logs?.enabled || service?.config?.metrics?.enabled;
+ return {
+ enabledCount: acc.enabledCount + (isEnabled ? 1 : 0),
+ availableCount: acc.availableCount + (isEnabled ? 0 : 1),
+ };
+ },
+ { enabledCount: 0, availableCount: 0 },
+ );
+ }, [services]);
+
+ const selectOptions: SelectProps['options'] = useMemo(
+ () => [
+ { value: 'all_services', label: `All Services (${services?.length || 0})` },
+ { value: 'enabled', label: `Enabled (${enabledCount})` },
+ { value: 'available', label: `Available (${availableCount})` },
+ ],
+ [services, enabledCount, availableCount],
+ );
+
+ if (isLoading) return null;
+ if (!services?.length) return null;
-function ServicesFilter(): JSX.Element {
return (
}
- onChange={(value): void => {
- console.log('selected region:', value);
- }}
+ onChange={onFilterChange}
/>
);
}
-function ServicesSection(): JSX.Element {
- const urlQuery = useUrlQuery();
- const navigate = useNavigate();
- const [activeService, setActiveService] = useState
-
- {activeServiceDetails &&