AWS Integration skeleton UI

frontend/src/container/AppLayout/index.tsx

@@ -22,6 +22,7 @@ import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
 import { isNull } from 'lodash-es';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+import { INTEGRATION_TYPES } from 'pages/Integrations/utils';
 import { useAppContext } from 'providers/App/App';
 import { ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
@@ -289,6 +290,11 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	const isMessagingQueues = (): boolean =>
 		routeKey === 'MESSAGING_QUEUES' || routeKey === 'MESSAGING_QUEUES_DETAIL';
 
+	const isCloudIntegrationPage = (): boolean =>
+		routeKey === 'INTEGRATIONS' &&
+		new URLSearchParams(window.location.search).get('integration') ===
+			INTEGRATION_TYPES.AWS_INTEGRATION;
+
 	const isDashboardListView = (): boolean => routeKey === 'ALL_DASHBOARD';
 	const isAlertHistory = (): boolean => routeKey === 'ALERT_HISTORY';
 	const isAlertOverview = (): boolean => routeKey === 'ALERT_OVERVIEW';
@@ -422,6 +428,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 											isAlertHistory() ||
 											isAlertOverview() ||
 											isMessagingQueues() ||
+											isCloudIntegrationPage() ||
 											isInfraMonitoringHosts()
 												? 0
 												: '0 1rem',

frontend/src/hooks/useDarkMode/index.tsx

@@ -106,6 +106,9 @@ export const useThemeConfig = (): ThemeConfig => {
 			Input: {
 				colorBorder: isDarkMode ? '#1D212D' : '#E9E9E9',
 			},
+			Breadcrumb: {
+				separatorMargin: 4,
+			},
 		},
 	};
 };

frontend/src/pages/Integrations/CloudIntegrationPage/CloudIntegrationPage.style.scss

@@ -0,0 +1,43 @@
+.cloud-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 8px 18px;
+	border-bottom: 1px solid var(--bg-slate-400);
+	&__navigation {
+		display: flex;
+		align-items: center;
+		padding: 6px 0px 6px;
+	}
+
+	&__breadcrumb-link {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	&__breadcrumb-title {
+		color: var(--bg-vanilla-400);
+		font-size: 14px;
+		line-height: 20px; /* 142.857% */
+		letter-spacing: -0.07px;
+	}
+
+	&__help {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 6px;
+		gap: 6px;
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
+		border-radius: 2px;
+		color: var(--bg-vanilla-400);
+		font-size: 12px;
+		line-height: 10px; /* 83.333% */
+		letter-spacing: 0.12px;
+		width: 113px;
+		height: 32px;
+		cursor: pointer;
+	}
+}

frontend/src/pages/Integrations/CloudIntegrationPage/CloudIntegrationPage.tsx

@@ -0,0 +1,17 @@
+import './CloudIntegrationPage.style.scss';
+
+import Header from './Header/Header';
+import HeroSection from './HeroSection/HeroSection';
+import ServicesTabs from './ServicesSection/ServicesTabs';
+
+function CloudIntegrationPage(): JSX.Element {
+	return (
+		<div>
+			<Header />
+			<HeroSection />
+			<ServicesTabs />
+		</div>
+	);
+}
+
+export default CloudIntegrationPage;

frontend/src/pages/Integrations/CloudIntegrationPage/Header/Header.tsx

@@ -0,0 +1,41 @@
+import Breadcrumb from 'antd/es/breadcrumb';
+import ROUTES from 'constants/routes';
+import { Blocks, LifeBuoy } from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+function Header(): JSX.Element {
+	return (
+		<div className="cloud-header">
+			<div className="cloud-header__navigation">
+				<Breadcrumb
+					className="cloud-header__breadcrumb"
+					items={[
+						{
+							title: (
+								<Link to={ROUTES.INTEGRATIONS}>
+									<span className="cloud-header__breadcrumb-link">
+										<Blocks size={16} color="var(--bg-vanilla-400)" />
+										<span className="cloud-header__breadcrumb-title">Integrations</span>
+									</span>
+								</Link>
+							),
+						},
+						{
+							title: (
+								<div className="cloud-header__breadcrumb-title">AWS web services</div>
+							),
+						},
+					]}
+				/>
+			</div>
+			<div className="cloud-header__actions">
+				<button className="cloud-header__help" type="button">
+					<LifeBuoy size={12} />
+					Get Help
+				</button>
+			</div>
+		</div>
+	);
+}
+
+export default Header;

frontend/src/pages/Integrations/CloudIntegrationPage/HeroSection/HeroSection.style.scss

@@ -0,0 +1,65 @@
+.hero-section {
+	height: 308px;
+	padding: 26px 16px;
+	display: flex;
+	gap: 24px;
+	position: relative;
+	overflow: hidden;
+	background-position: right;
+	background-size: contain;
+	background-repeat: no-repeat;
+	border-bottom: 1px solid var(--bg-slate-500);
+
+	&__icon {
+		height: fit-content;
+		background-color: var(--bg-ink-400);
+		padding: 12px;
+		border: 1px solid var(--bg-ink-300);
+		border-radius: 6px;
+		width: 60px;
+		height: 60px;
+		display: flex;
+		align-items: center;
+		img {
+			width: 100%;
+		}
+	}
+
+	&__details {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+
+		.title {
+			color: var(--bg-vanilla-100);
+			font-size: 24px;
+			font-weight: 500;
+			line-height: 20px; /* 83.333% */
+			letter-spacing: -0.12px;
+		}
+
+		.description {
+			color: var(--bg-vanilla-400);
+			font-size: 12px;
+			font-weight: 400;
+			line-height: 18px; /* 150% */
+		}
+
+		.hero-section__buttons {
+			margin-top: 12px;
+		}
+
+		.hero-section__button {
+			font-family: 'Inter';
+			background: var(--bg-robin-500);
+			border: none;
+			padding: 8px 17px;
+			color: var(--bg-vanilla-100);
+			border-radius: 2px;
+			cursor: pointer;
+			font-size: 12px;
+			font-weight: 500;
+			line-height: 16px;
+		}
+	}
+}

frontend/src/pages/Integrations/CloudIntegrationPage/HeroSection/HeroSection.tsx

@@ -0,0 +1,35 @@
+import './HeroSection.style.scss';
+
+function HeroSection(): JSX.Element {
+	return (
+		<div
+			className="hero-section"
+			style={{
+				backgroundImage: `linear-gradient(
+					90deg,
+					rgba(18, 19, 23, 0.95) 0%,
+					rgba(18, 19, 23, 0.8) 50%,
+					rgba(18, 19, 23, 0.6) 100%
+				),
+				url('/Images/integrations-hero-bg.png')`,
+			}}
+		>
+			<div className="hero-section__icon">
+				<img src="/Logos/aws-dark.svg" alt="aws-logo" />
+			</div>
+			<div className="hero-section__details">
+				<div className="title">AWS Web Services</div>
+				<div className="description">
+					One-click setup for AWS monitoring with SigNoz
+				</div>
+				<div className="hero-section__buttons">
+					<button className="hero-section__button" type="button">
+						Integrate Now
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default HeroSection;

frontend/src/pages/Integrations/CloudIntegrationPage/ServicesSection/CloudServiceDashboards.tsx

@@ -0,0 +1,36 @@
+import { ServiceData } from './types';
+
+function DashboardItem({
+	dashboard,
+}: {
+	dashboard: ServiceData['assets']['dashboards'][number];
+}): JSX.Element {
+	return (
+		<div className="cloud-service-dashboard-item">
+			<div className="cloud-service-dashboard-item__title">{dashboard.title}</div>
+			<div className="cloud-service-dashboard-item__preview">
+				<img
+					src={dashboard.image}
+					alt={dashboard.title}
+					className="cloud-service-dashboard-item__preview-image"
+				/>
+			</div>
+		</div>
+	);
+}
+
+function CloudServiceDashboards({
+	service,
+}: {
+	service: ServiceData;
+}): JSX.Element {
+	return (
+		<>
+			{service.assets.dashboards.map((dashboard) => (
+				<DashboardItem key={dashboard.id} dashboard={dashboard} />
+			))}
+		</>
+	);
+}
+
+export default CloudServiceDashboards;