+
}>
void;
+ loadingUserPreferences: boolean;
+}): JSX.Element {
+ const { user } = useAppContext();
+ const [rulesExist, setRulesExist] = useState(false);
+
+ const [sortedAlertRules, setSortedAlertRules] = useState([]);
+
+ const location = useLocation();
+ const params = new URLSearchParams(location.search);
+
+ // Fetch Alerts
+ const { data: alerts, isError, isLoading } = useQuery('allAlerts', {
+ queryFn: getAll,
+ cacheTime: 0,
+ });
+
+ useEffect(() => {
+ const rules = alerts?.payload || [];
+ setRulesExist(rules.length > 0);
+
+ const sortedRules = rules.sort((a, b) => {
+ // First, prioritize firing alerts
+ if (a.state === 'firing' && b.state !== 'firing') return -1;
+ if (a.state !== 'firing' && b.state === 'firing') return 1;
+
+ // Then sort by updateAt timestamp
+ const aUpdateAt = new Date(a.updateAt).getTime();
+ const bUpdateAt = new Date(b.updateAt).getTime();
+ return bUpdateAt - aUpdateAt;
+ });
+
+ if (sortedRules.length > 0 && !loadingUserPreferences) {
+ onUpdateChecklistDoneItem('SETUP_ALERTS');
+ }
+
+ setSortedAlertRules(sortedRules.slice(0, 5));
+ }, [alerts, onUpdateChecklistDoneItem, loadingUserPreferences]);
+
+ const emptyStateCard = (): JSX.Element => (
+
+
+
+
+
+
No Alert rules yet.
+
+ {user?.role !== USER_ROLES.VIEWER && (
+
+ Create an Alert Rule to get started
+
+ )}
+
+
+ {user?.role !== USER_ROLES.VIEWER && (
+
+
+
}
+ onClick={(): void => {
+ logEvent('Homepage: Create alert rule clicked', {});
+ }}
+ >
+ Create Alert Rule
+
+
+
+
{
+ logEvent('Homepage: Learn more clicked', {
+ source: 'Alert Rules',
+ });
+
+ window.open(
+ 'https://signoz.io/docs/alerts/',
+ '_blank',
+ 'noreferrer noopener',
+ );
+ }}
+ >
+ Learn more
+
+ )}
+
+
+
+ {sortedAlertRules.map((rule) => (
+
{
+ if (e.key === 'Enter') {
+ onEditHandler(rule);
+ }
+ }}
+ >
+
+
+
+
+ {rule.alert}
+
+
+
+
+ {rule?.labels?.severity}
+
+ {rule?.state === 'firing' && (
+
+ {rule?.state}
+
+ )}
+
+
+ ))}
+
+
+
+
+
+ );
+ }
+
+ if (isError) {
+ return (
+
+
+
+
+ );
+ }
+
+ return (
+
+ {rulesExist && (
+
+ Alerts
+
+ )}
+
+ {rulesExist ? renderAlertRules() : emptyStateCard()}
+
+
+ {rulesExist && (
+
+
+
+
{
+ logEvent('Homepage: All alert rules clicked', {});
+ }}
+ >
+ All Alert Rules
+
+
+ )}
+
+ );
+}
diff --git a/frontend/src/container/Home/Dashboards/Dashboards.tsx b/frontend/src/container/Home/Dashboards/Dashboards.tsx
new file mode 100644
index 0000000000..4e10a42df4
--- /dev/null
+++ b/frontend/src/container/Home/Dashboards/Dashboards.tsx
@@ -0,0 +1,216 @@
+import { Button, Skeleton, Tag } from 'antd';
+import logEvent from 'api/common/logEvent';
+import ROUTES from 'constants/routes';
+import { useGetAllDashboard } from 'hooks/dashboard/useGetAllDashboard';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { ArrowRight, ArrowUpRight, Plus } from 'lucide-react';
+import Card from 'periscope/components/Card/Card';
+import { useAppContext } from 'providers/App/App';
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { Dashboard } from 'types/api/dashboard/getAll';
+import { USER_ROLES } from 'types/roles';
+
+export default function Dashboards({
+ onUpdateChecklistDoneItem,
+ loadingUserPreferences,
+}: {
+ onUpdateChecklistDoneItem: (itemKey: string) => void;
+ loadingUserPreferences: boolean;
+}): JSX.Element {
+ const { safeNavigate } = useSafeNavigate();
+ const { user } = useAppContext();
+
+ const [sortedDashboards, setSortedDashboards] = useState([]);
+
+ // Fetch Dashboards
+ const {
+ data: dashboardsList,
+ isLoading: isDashboardListLoading,
+ isError: isDashboardListError,
+ } = useGetAllDashboard();
+
+ useEffect(() => {
+ if (!dashboardsList) return;
+
+ const sortedDashboards = dashboardsList.sort((a, b) => {
+ const aUpdateAt = new Date(a.updatedAt).getTime();
+ const bUpdateAt = new Date(b.updatedAt).getTime();
+ return bUpdateAt - aUpdateAt;
+ });
+
+ if (sortedDashboards.length > 0 && !loadingUserPreferences) {
+ onUpdateChecklistDoneItem('SETUP_DASHBOARDS');
+ }
+
+ setSortedDashboards(sortedDashboards.slice(0, 5));
+ }, [dashboardsList, onUpdateChecklistDoneItem, loadingUserPreferences]);
+
+ const emptyStateCard = (): JSX.Element => (
+
+
+
+
+
+
You don’t have any dashboards yet.
+
+ {user?.role !== USER_ROLES.VIEWER && (
+
Create a dashboard to get started
+ )}
+
+
+ {user?.role !== USER_ROLES.VIEWER && (
+
+
+
}
+ onClick={(): void => {
+ logEvent('Homepage: Create dashboard clicked', {});
+ }}
+ >
+ New Dashboard
+
+
+
+
{
+ logEvent('Homepage: Learn more clicked', {
+ source: 'Dashboards',
+ });
+ window.open(
+ 'https://signoz.io/docs/userguide/manage-dashboards/',
+ '_blank',
+ );
+ }}
+ >
+ Learn more
+
+ )}
+
+
+
+ {sortedDashboards.slice(0, 5).map((dashboard) => {
+ const getLink = (): string => `${ROUTES.ALL_DASHBOARD}/${dashboard.uuid}`;
+
+ const onClickHandler = (event: React.MouseEvent
): void => {
+ event.stopPropagation();
+ logEvent('Homepage: Dashboard clicked', {
+ dashboardId: dashboard.id,
+ dashboardName: dashboard.data.title,
+ });
+ if (event.metaKey || event.ctrlKey) {
+ window.open(getLink(), '_blank');
+ } else {
+ safeNavigate(getLink());
+ }
+ };
+
+ return (
+ {
+ if (e.key === 'Enter') {
+ onClickHandler((e as unknown) as React.MouseEvent
);
+ }
+ }}
+ >
+
+
+
+
+ {dashboard.data.title}
+
+
+ {dashboard.data.tags?.map((tag) => (
+
+ {tag}
+
+ ))}
+
+
+
+
+
+
+ );
+ }
+
+ if (isDashboardListError) {
+ return (
+
+
+
+
+ );
+ }
+
+ const dashboardsExist = sortedDashboards.length > 0;
+
+ return (
+
+ {dashboardsExist && (
+
+ Dashboards
+
+ )}
+
+ {dashboardsExist ? renderDashboardsList() : emptyStateCard()}
+
+
+ {dashboardsExist && (
+
+
+
+
{
+ logEvent('Homepage: All dashboards clicked', {});
+ }}
+ >
+ All Dashboards
+
+
+ )}
+
+ );
+}
diff --git a/frontend/src/container/Home/DataSourceInfo/DataSourceInfo.tsx b/frontend/src/container/Home/DataSourceInfo/DataSourceInfo.tsx
new file mode 100644
index 0000000000..f368a858cc
--- /dev/null
+++ b/frontend/src/container/Home/DataSourceInfo/DataSourceInfo.tsx
@@ -0,0 +1,184 @@
+/* eslint-disable sonarjs/no-identical-functions */
+import { Button, Skeleton, Tag, Typography } from 'antd';
+import logEvent from 'api/common/logEvent';
+import ROUTES from 'constants/routes';
+import { useGetDeploymentsData } from 'hooks/CustomDomain/useGetDeploymentsData';
+import history from 'lib/history';
+import { Globe, Link2 } from 'lucide-react';
+import Card from 'periscope/components/Card/Card';
+import { useEffect, useState } from 'react';
+
+function DataSourceInfo({
+ dataSentToSigNoz,
+ isLoading,
+}: {
+ dataSentToSigNoz: boolean;
+ isLoading: boolean;
+}): JSX.Element {
+ const notSendingData = !dataSentToSigNoz;
+
+ const {
+ data: deploymentsData,
+ isError: isErrorDeploymentsData,
+ } = useGetDeploymentsData();
+
+ const [region, setRegion] = useState('');
+ const [url, setUrl] = useState('');
+
+ useEffect(() => {
+ if (deploymentsData) {
+ switch (deploymentsData?.data.data.cluster.region.name) {
+ case 'in':
+ setRegion('India');
+ break;
+ case 'us':
+ setRegion('United States');
+ break;
+ case 'eu':
+ setRegion('Europe');
+ break;
+ default:
+ setRegion(deploymentsData?.data.data.cluster.region.name);
+ break;
+ }
+
+ setUrl(
+ `${deploymentsData?.data.data.name}.${deploymentsData?.data.data.cluster.region.dns}`,
+ );
+ }
+ }, [deploymentsData]);
+
+ const renderNotSendingData = (): JSX.Element => (
+ <>
+
+ Hello there, Welcome to your SigNoz workspace
+
+
+
+ You’re not sending any data yet.
+
+
+
+
+
+
+
+
+
}
+ role="button"
+ tabIndex={0}
+ onClick={(): void => {
+ logEvent('Homepage: Connect dataSource clicked', {});
+ history.push(ROUTES.GET_STARTED);
+ }}
+ onKeyDown={(e): void => {
+ if (e.key === 'Enter') {
+ logEvent('Homepage: Connect dataSource clicked', {});
+ history.push(ROUTES.GET_STARTED);
+ }
+ }}
+ >
+ Connect Data Source
+
+
+
+ {!isErrorDeploymentsData && deploymentsData && (
+
+
+ {region}
+
+
+
+
+ {url}
+
+
+ default
+
+
+
+
+ )}
+
+
+
+ );
+
+ const renderDataReceived = (): JSX.Element => (
+ <>
+
+ Hello there, Welcome to your SigNoz workspace
+
+
+ {!isErrorDeploymentsData && deploymentsData && (
+
+
+
+
+
+ {region}
+
+
+
+
+ {url}
+
+
+ default
+
+
+
+
+
+
+ )}
+
+ );
+
+ return (
+
+
+
+
+
+
+
+ {isLoading && (
+ <>
+
+
+
+ )}
+
+ {!isLoading && dataSentToSigNoz && renderDataReceived()}
+
+ {!isLoading && notSendingData && renderNotSendingData()}
+
(null);
+ const [endTime, setEndTime] = useState(null);
+ const [updatingUserPreferences, setUpdatingUserPreferences] = useState(false);
+ const [loadingUserPreferences, setLoadingUserPreferences] = useState(true);
+
+ const [checklistItems, setChecklistItems] = useState(
+ defaultChecklistItemsState,
+ );
+
+ const [isWelcomeChecklistSkipped, setIsWelcomeChecklistSkipped] = useState(
+ false,
+ );
+
+ useEffect(() => {
+ const now = new Date();
+ const startTime = new Date(now.getTime() - homeInterval);
+ const endTime = now;
+
+ setStartTime(startTime.getTime());
+ setEndTime(endTime.getTime());
+ }, []);
+
+ // Detect Logs
+ const { data: logsData, isLoading: isLogsLoading } = useGetQueryRange(
+ {
+ query: initialQueriesMap[DataSource.LOGS],
+ graphType: PANEL_TYPES.TABLE,
+ selectedTime: 'GLOBAL_TIME',
+ globalSelectedInterval: '30m',
+ params: {
+ dataSource: DataSource.LOGS,
+ },
+ },
+ DEFAULT_ENTITY_VERSION,
+ {
+ queryKey: [
+ REACT_QUERY_KEY.GET_QUERY_RANGE,
+ '30m',
+ endTime || Date.now(),
+ startTime || Date.now(),
+ initialQueriesMap[DataSource.LOGS],
+ ],
+ enabled: !!startTime && !!endTime,
+ },
+ );
+
+ // Detect Traces
+ const { data: tracesData, isLoading: isTracesLoading } = useGetQueryRange(
+ {
+ query: initialQueriesMap[DataSource.TRACES],
+ graphType: PANEL_TYPES.TABLE,
+ selectedTime: 'GLOBAL_TIME',
+ globalSelectedInterval: '30m',
+ params: {
+ dataSource: DataSource.TRACES,
+ },
+ },
+ DEFAULT_ENTITY_VERSION,
+ {
+ queryKey: [
+ REACT_QUERY_KEY.GET_QUERY_RANGE,
+ '30m',
+ endTime || Date.now(),
+ startTime || Date.now(),
+ initialQueriesMap[DataSource.TRACES],
+ ],
+ enabled: !!startTime && !!endTime,
+ },
+ );
+
+ // Detect Infra Metrics - Hosts
+ const query = useMemo(() => {
+ const baseQuery = getHostListsQuery();
+
+ let queryStartTime = startTime;
+ let queryEndTime = endTime;
+
+ if (!startTime || !endTime) {
+ const now = new Date();
+ const startTime = new Date(now.getTime() - homeInterval);
+ const endTime = now;
+
+ queryStartTime = startTime.getTime();
+ queryEndTime = endTime.getTime();
+ }
+
+ return {
+ ...baseQuery,
+ limit: 10,
+ offset: 0,
+ filters: {
+ items: [],
+ op: 'AND',
+ },
+ start: queryStartTime,
+ end: queryEndTime,
+ };
+ }, [startTime, endTime]);
+
+ const { data: hostData } = useGetHostList(query as HostListPayload, {
+ queryKey: ['hostList', query],
+ enabled: !!query,
+ });
+
+ const { data: k8sPodsData } = useGetK8sPodsList(query as K8sPodsListPayload, {
+ queryKey: ['K8sPodsList', query],
+ enabled: !!query,
+ });
+
+ const [isLogsIngestionActive, setIsLogsIngestionActive] = useState(false);
+ const [isTracesIngestionActive, setIsTracesIngestionActive] = useState(false);
+ const [isMetricsIngestionActive, setIsMetricsIngestionActive] = useState(
+ false,
+ );
+
+ const processUserPreferences = (userPreferences: UserPreference[]): void => {
+ const checklistSkipped = userPreferences?.find(
+ (preference) => preference.key === 'WELCOME_CHECKLIST_DO_LATER',
+ )?.value;
+
+ const updatedChecklistItems = cloneDeep(checklistItems);
+
+ const newChecklistItems = updatedChecklistItems.map((item) => {
+ const newItem = { ...item };
+ newItem.isSkipped =
+ userPreferences?.find(
+ (preference) => preference.key === item.skippedPreferenceKey,
+ )?.value || false;
+ return newItem;
+ });
+
+ setChecklistItems(newChecklistItems);
+
+ setIsWelcomeChecklistSkipped(checklistSkipped || false);
+ };
+
+ // Fetch User Preferences
+ const { refetch: refetchUserPreferences } = useQuery({
+ queryFn: () => getAllUserPreferences(),
+ queryKey: ['getUserPreferences'],
+ enabled: true,
+ refetchOnWindowFocus: false,
+ onSuccess: (response) => {
+ if (response.payload && response.payload.data) {
+ processUserPreferences(response.payload.data);
+ }
+
+ setLoadingUserPreferences(false);
+ setUpdatingUserPreferences(false);
+ },
+ onError: () => {
+ setUpdatingUserPreferences(false);
+ setLoadingUserPreferences(false);
+ },
+ });
+
+ const { mutate: updateUserPreference } = useMutation(updateUserPreferenceAPI, {
+ onSuccess: () => {
+ setUpdatingUserPreferences(false);
+ refetchUserPreferences();
+ },
+ onError: () => {
+ setUpdatingUserPreferences(false);
+ },
+ });
+
+ const handleWillDoThisLater = (): void => {
+ logEvent('Welcome Checklist: Will do this later clicked', {});
+ setUpdatingUserPreferences(true);
+
+ updateUserPreference({
+ preferenceID: 'WELCOME_CHECKLIST_DO_LATER',
+ value: true,
+ });
+ };
+
+ const handleSkipChecklistItem = (item: ChecklistItem): void => {
+ if (item.skippedPreferenceKey) {
+ setUpdatingUserPreferences(true);
+
+ updateUserPreference({
+ preferenceID: item.skippedPreferenceKey,
+ value: true,
+ });
+ }
+ };
+
+ const renderWelcomeChecklistModal = (): JSX.Element => (
+
+
+ );
+
+ const handleUpdateChecklistDoneItem = useCallback((itemKey: string): void => {
+ setChecklistItems((prevItems) =>
+ prevItems.map((item) =>
+ item.id === itemKey ? { ...item, completed: true } : item,
+ ),
+ );
+ }, []);
+
+ useEffect(() => {
+ const logsDataTotal = parseInt(
+ logsData?.payload?.data?.newResult?.data?.result?.[0]?.series?.[0]
+ ?.values?.[0]?.value || '0',
+ 10,
+ );
+
+ if (logsDataTotal > 0) {
+ setIsLogsIngestionActive(true);
+ handleUpdateChecklistDoneItem('SEND_LOGS');
+ handleUpdateChecklistDoneItem('ADD_DATA_SOURCE');
+ }
+ }, [logsData, handleUpdateChecklistDoneItem]);
+
+ useEffect(() => {
+ const tracesDataTotal = parseInt(
+ tracesData?.payload?.data?.newResult?.data?.result?.[0]?.series?.[0]
+ ?.values?.[0]?.value || '0',
+ 10,
+ );
+
+ if (tracesDataTotal > 0) {
+ setIsTracesIngestionActive(true);
+ handleUpdateChecklistDoneItem('SEND_TRACES');
+ handleUpdateChecklistDoneItem('ADD_DATA_SOURCE');
+ }
+ }, [tracesData, handleUpdateChecklistDoneItem]);
+
+ useEffect(() => {
+ const hostDataTotal = hostData?.payload?.data?.total ?? 0;
+ const k8sPodsDataTotal = k8sPodsData?.payload?.data?.total ?? 0;
+
+ if (hostDataTotal > 0 || k8sPodsDataTotal > 0) {
+ setIsMetricsIngestionActive(true);
+ handleUpdateChecklistDoneItem('ADD_DATA_SOURCE');
+ handleUpdateChecklistDoneItem('SEND_INFRA_METRICS');
+ }
+ }, [hostData, k8sPodsData, handleUpdateChecklistDoneItem]);
+
+ useEffect(() => {
+ logEvent('Homepage: Visited', {});
+ }, []);
+
+ return (
+
+
+ }
+ rightComponent={
+
+ {isWelcomeChecklistSkipped && (
+
{
+ if (visible) {
+ logEvent('Welcome Checklist: Expanded', {});
+ } else {
+ logEvent('Welcome Checklist: Minimized', {});
+ }
+ }}
+ content={renderWelcomeChecklistModal()}
+ getPopupContainer={popupContainer}
+ rootClassName="welcome-checklist-popover"
+ >
+
+
+
+ )}
+
+ }
+ />
+
+
+
+
+
+
+
+
+
+ {isLogsIngestionActive && (
+
+
+
+
+
+
+
+
+ Logs ingestion is active
+
+
+
+
{
+ // eslint-disable-next-line sonarjs/no-duplicate-string
+ logEvent('Homepage: Ingestion Active Explore clicked', {
+ source: 'Logs',
+ });
+ history.push(ROUTES.LOGS_EXPLORER);
+ }}
+ onKeyDown={(e): void => {
+ if (e.key === 'Enter') {
+ logEvent('Homepage: Ingestion Active Explore clicked', {
+ source: 'Logs',
+ });
+ history.push(ROUTES.LOGS_EXPLORER);
+ }
+ }}
+ >
+
+
+
+ )}
+
+ {isTracesIngestionActive && (
+
+
+
+
+
+
+
+
+ Traces ingestion is active
+
+
+
+
{
+ logEvent('Homepage: Ingestion Active Explore clicked', {
+ source: 'Traces',
+ });
+ history.push(ROUTES.TRACES_EXPLORER);
+ }}
+ onKeyDown={(e): void => {
+ if (e.key === 'Enter') {
+ logEvent('Homepage: Ingestion Active Explore clicked', {
+ source: 'Traces',
+ });
+ history.push(ROUTES.TRACES_EXPLORER);
+ }
+ }}
+ >
+
+
+
+ )}
+
+ {isMetricsIngestionActive && (
+
+
+
+
+
+
+
+
+ Metrics ingestion is active
+
+
+
+
{
+ logEvent('Homepage: Ingestion Active Explore clicked', {
+ source: 'Metrics',
+ });
+ history.push(ROUTES.INFRASTRUCTURE_MONITORING_HOSTS);
+ }}
+ onKeyDown={(e): void => {
+ if (e.key === 'Enter') {
+ logEvent('Homepage: Ingestion Active Explore clicked', {
+ source: 'Metrics',
+ });
+ history.push(ROUTES.INFRASTRUCTURE_MONITORING_HOSTS);
+ }
+ }}
+ >
+
+
+
+ )}
+
+
+ {user?.role !== USER_ROLES.VIEWER && (
+
+
+
+
+
+
+
+
+
+
+
Filter and save views with the Explorer
+
+
+ Explore your data, and save useful views for everyone in the team.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Create a dashboard
+
+
+ Create a dashboard to visualize your data.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Add an alert
+
+
+ Create bespoke alerting rules to suit your needs.
+
+
+
+
+
+
+
+
+
+ )}
+
+ {(isLogsIngestionActive ||
+ isTracesIngestionActive ||
+ isMetricsIngestionActive) && (
+ <>
+
+
+
+ )}
+
+
+
+ {!isWelcomeChecklistSkipped && !loadingUserPreferences && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ I'll do this later
+
+
+
+
+
+ )}
+
+ {(isLogsIngestionActive ||
+ isTracesIngestionActive ||
+ isMetricsIngestionActive) && (
+ <>
+
+
+
+ )}
+
+
+ );
+}
diff --git a/frontend/src/container/Home/HomeChecklist/HomeChecklist.styles.scss b/frontend/src/container/Home/HomeChecklist/HomeChecklist.styles.scss
new file mode 100644
index 0000000000..c0508abbe9
--- /dev/null
+++ b/frontend/src/container/Home/HomeChecklist/HomeChecklist.styles.scss
@@ -0,0 +1,381 @@
+.home-checklist-container {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+
+ .completed-checklist-container {
+ flex: 1;
+
+ .completed-checklist-title {
+ color: var(--Vanilla-400, #c0c1c3);
+ font-family: Inter;
+ font-size: 11px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 18px; /* 163.636% */
+ letter-spacing: 0.88px;
+ text-transform: uppercase;
+ margin-left: -1rem;
+
+ margin-bottom: 16px;
+ }
+
+ .completed-checklist-item {
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+
+ padding-left: 16px;
+ margin-bottom: 8px;
+
+ position: relative;
+
+ &:before {
+ position: absolute;
+ left: -18px;
+ top: 2px;
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ background-color: var(--bg-ink-400);
+ border: 1px solid var(--bg-slate-400);
+ color: var(--bg-ink-400);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: bold;
+
+ background-color: var(--bg-forest-400);
+ content: '✓';
+ font-size: 16px;
+ font-weight: 300;
+ }
+
+ &:not(:last-child):after {
+ content: '';
+ position: absolute;
+ left: -9px;
+ top: 24px;
+ bottom: 0px;
+ width: 1px;
+ height: 100%;
+ background: linear-gradient(
+ to bottom,
+ var(--bg-forest-400) 0%,
+ var(--bg-forest-400) 50%,
+ transparent 50%,
+ transparent 100%
+ );
+ background-size: 2px 10px;
+ }
+
+ .completed-checklist-item-title {
+ color: var(--Vanilla-400, #c0c1c3);
+ font-family: Inter;
+ font-size: 13px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 24px; /* 171.429% */
+ letter-spacing: -0.07px;
+ }
+
+ .completed-checklist-item-description {
+ color: var(--Vanilla-400, #c0c1c3);
+ font-family: Inter;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 20px; /* 142.857% */
+ }
+ }
+ }
+
+ .whats-next-checklist-container {
+ flex: 1;
+
+ .whats-next-checklist-title {
+ color: var(--Vanilla-400, #c0c1c3);
+ font-family: Inter;
+ font-size: 11px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 18px; /* 163.636% */
+ letter-spacing: 0.88px;
+ text-transform: uppercase;
+ margin-left: -1rem;
+
+ margin-bottom: 16px;
+ }
+
+ .whats-next-checklist-items-container {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ }
+
+ .whats-next-checklist-item {
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+ padding-left: 16px;
+
+ position: relative;
+
+ &:before {
+ content: '';
+ position: absolute;
+ left: -18px;
+ top: 2px;
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ background-color: var(--bg-ink-400);
+ border: 1px dashed var(--bg-slate-100);
+ color: var(--bg-ink-400);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: bold;
+ }
+
+ &.active {
+ &:before {
+ background-color: #4568dc;
+ content: '';
+ display: inline-block;
+ background: url('/public/Icons/status-inprogress-pill.svg') no-repeat
+ center;
+ background-size: contain;
+ border: none !important;
+
+ color: #fff;
+ font-size: 16px;
+ border: 1px dashed white;
+ border-radius: 50%;
+ }
+ }
+
+ &.skipped {
+ &:before {
+ background-color: var(--bg-amber-400);
+ content: '';
+ display: inline-block;
+ background: url('/public/Icons/status-skipped-pill.svg') no-repeat center;
+ background-size: contain;
+ border: none;
+
+ color: var(--bg-ink-400);
+ font-size: 16px;
+ border-radius: 50%;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+
+ &:not(:last-child):after {
+ content: '';
+ position: absolute;
+ left: -9px;
+ top: 24px;
+ bottom: 0px;
+ width: 1px;
+ height: 100%;
+ background: linear-gradient(
+ to bottom,
+ var(--bg-slate-100) 0%,
+ var(--bg-slate-100) 50%,
+ transparent 50%,
+ transparent 100%
+ );
+ background-size: 2px 10px;
+ }
+
+ &.active {
+ &:not(:last-child):after {
+ content: '';
+ position: absolute;
+ left: -9px;
+ top: 24px;
+ bottom: 0px;
+ width: 1px;
+ height: 100%;
+ background: linear-gradient(
+ to bottom,
+ #4568dc 0%,
+ #4568dc 50%,
+ transparent 50%,
+ transparent 100%
+ );
+ background-size: 2px 10px;
+ }
+ }
+
+ &.skipped {
+ &:not(:last-child):after {
+ content: '';
+ position: absolute;
+ left: -9px;
+ top: 24px;
+ bottom: 0px;
+ width: 1px;
+ height: 100%;
+ background: linear-gradient(
+ to bottom,
+ var(--bg-amber-400) 0%,
+ var(--bg-amber-400) 50%,
+ transparent 50%,
+ transparent 100%
+ );
+ background-size: 2px 10px;
+ }
+ }
+
+ .whats-next-checklist-item-title {
+ color: var(--Vanilla-400, #c0c1c3);
+ font-family: Inter;
+ font-size: 13px;
+ font-style: normal;
+ line-height: 24px; /* 171.429% */
+ letter-spacing: -0.07px;
+
+ cursor: pointer;
+ }
+
+ .whats-next-checklist-item-description {
+ color: var(--Vanilla-400, #c0c1c3);
+ font-family: Inter;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 20px; /* 142.857% */
+ }
+
+ .whats-next-checklist-item-content {
+ display: none;
+ flex-direction: column;
+ gap: 0.5rem;
+ }
+
+ &:hover {
+ .whats-next-checklist-item-content {
+ display: flex;
+ }
+ }
+
+ &:hover {
+ .whats-next-checklist-item-title {
+ color: var(--Vanilla-100, #fff) !important;
+ }
+ }
+
+ .active {
+ .whats-next-checklist-item-content {
+ display: flex;
+ }
+ }
+
+ &.active {
+ .whats-next-checklist-item-title {
+ color: var(--Vanilla-100, #fff) !important;
+ }
+ }
+
+ .whats-next-checklist-item-action-buttons {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ gap: 0.5rem;
+
+ .whats-next-checklist-item-action-buttons-container {
+ display: flex;
+ flex-direction: row;
+ gap: 0.5rem;
+ }
+
+ .periscope-btn.secondary {
+ border-radius: 2px;
+ border: 1px solid var(--Slate-200, #2c3140);
+ background: var(--Ink-200, #23262e);
+ box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+ }
+
+ .skip-btn {
+ &:hover {
+ color: var(--bg-amber-400);
+ }
+ }
+ }
+ }
+ }
+}
+
+.lightMode {
+ .home-checklist-container {
+ .completed-checklist-container {
+ .completed-checklist-title {
+ color: var(--bg-ink-300);
+ }
+
+ .completed-checklist-item {
+ &:before {
+ border: 1px solid var(--bg-vanilla-300);
+ color: var(--bg-ink-300);
+ background-color: var(--bg-forest-400);
+ }
+
+ .completed-checklist-item-title {
+ color: var(--bg-ink-300);
+ }
+
+ .completed-checklist-item-description {
+ color: var(--bg-ink-300);
+ }
+ }
+ }
+
+ .whats-next-checklist-container {
+ .whats-next-checklist-title {
+ color: var(--bg-ink-300);
+ }
+
+ .whats-next-checklist-item {
+ &:before {
+ background-color: var(--bg-vanilla-100);
+ border: 1px dashed var(--bg-vanilla-300);
+ color: var(--bg-ink-300);
+ }
+
+ .whats-next-checklist-item-title {
+ color: var(--bg-ink-300);
+ }
+
+ .whats-next-checklist-item-description {
+ color: var(--bg-ink-300);
+ }
+
+ &:hover {
+ .whats-next-checklist-item-title {
+ color: var(--bg-ink-300) !important;
+ }
+ }
+
+ &.active {
+ .whats-next-checklist-item-title {
+ color: var(--bg-ink-300) !important;
+ }
+ }
+
+ .whats-next-checklist-item-action-buttons {
+ .periscope-btn.secondary {
+ border-radius: 2px;
+ border: 1px solid var(--bg-vanilla-300);
+ background: var(--bg-vanilla-100);
+ box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.1);
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/frontend/src/container/Home/HomeChecklist/HomeChecklist.tsx b/frontend/src/container/Home/HomeChecklist/HomeChecklist.tsx
new file mode 100644
index 0000000000..84148b0d0f
--- /dev/null
+++ b/frontend/src/container/Home/HomeChecklist/HomeChecklist.tsx
@@ -0,0 +1,144 @@
+import './HomeChecklist.styles.scss';
+
+import { Button } from 'antd';
+import logEvent from 'api/common/logEvent';
+import { ArrowRight, ArrowRightToLine, BookOpenText } from 'lucide-react';
+import { useAppContext } from 'providers/App/App';
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { USER_ROLES } from 'types/roles';
+
+export type ChecklistItem = {
+ id: string;
+ title: string;
+ description: string;
+ completed: boolean;
+ isSkipped: boolean;
+ skippedPreferenceKey?: string;
+ toRoute?: string;
+ docsLink?: string;
+};
+
+function HomeChecklist({
+ checklistItems,
+ onSkip,
+ isLoading,
+}: {
+ checklistItems: ChecklistItem[];
+ onSkip: (item: ChecklistItem) => void;
+ isLoading: boolean;
+}): JSX.Element {
+ const { user } = useAppContext();
+
+ const [completedChecklistItems, setCompletedChecklistItems] = useState<
+ ChecklistItem[]
+ >([]);
+
+ const [whatsNextChecklistItems, setWhatsNextChecklistItems] = useState<
+ ChecklistItem[]
+ >([]);
+
+ useEffect(() => {
+ setCompletedChecklistItems(checklistItems.filter((item) => item.completed));
+ setWhatsNextChecklistItems(checklistItems.filter((item) => !item.completed));
+ }, [checklistItems]);
+
+ return (
+
+
+
Completed
+
+ {completedChecklistItems.map((item) => (
+
+ ))}
+
+
+ {whatsNextChecklistItems.length > 0 && (
+
+
What's Next
+
+
+ {whatsNextChecklistItems.map((item, index) => (
+
+
{item.title}
+
+
+
+ {item.description}
+
+
+ {user?.role !== USER_ROLES.VIEWER && (
+
+
+
+
{
+ logEvent('Welcome Checklist: Get started clicked', {
+ step: item.id,
+ });
+ }}
+ >
+ Get Started
+
+
+ {item.docsLink && (
+
{
+ logEvent('Welcome Checklist: Docs clicked', {
+ step: item.id,
+ });
+
+ window?.open(item.docsLink, '_blank');
+ }}
+ >
+
+ )}
+
+
+ {!item.isSkipped && (
+
+
{
+ logEvent('Welcome Checklist: Skip clicked', {
+ step: item.id,
+ });
+ onSkip(item);
+ }}
+ disabled={isLoading}
+ loading={isLoading}
+ icon={
+
+ )}
+
+ )}
+
+
+ ))}
+
+
+ )}
+
+ );
+}
+
+export default HomeChecklist;
diff --git a/frontend/src/container/Home/SavedViews/SavedViews.tsx b/frontend/src/container/Home/SavedViews/SavedViews.tsx
new file mode 100644
index 0000000000..f2dd154419
--- /dev/null
+++ b/frontend/src/container/Home/SavedViews/SavedViews.tsx
@@ -0,0 +1,339 @@
+import { Button, Skeleton, Tag } from 'antd';
+import logEvent from 'api/common/logEvent';
+import { getViewDetailsUsingViewKey } from 'components/ExplorerCard/utils';
+import ROUTES from 'constants/routes';
+import { useGetAllViews } from 'hooks/saveViews/useGetAllViews';
+import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
+import {
+ ArrowRight,
+ ArrowUpRight,
+ CompassIcon,
+ DraftingCompass,
+} from 'lucide-react';
+import { SOURCEPAGE_VS_ROUTES } from 'pages/SaveView/constants';
+import Card from 'periscope/components/Card/Card';
+import { useAppContext } from 'providers/App/App';
+import { useEffect, useMemo, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { ViewProps } from 'types/api/saveViews/types';
+import { DataSource } from 'types/common/queryBuilder';
+import { USER_ROLES } from 'types/roles';
+
+export default function SavedViews({
+ onUpdateChecklistDoneItem,
+ loadingUserPreferences,
+}: {
+ onUpdateChecklistDoneItem: (itemKey: string) => void;
+ loadingUserPreferences: boolean;
+}): JSX.Element {
+ const { user } = useAppContext();
+ const [selectedEntity, setSelectedEntity] = useState
('logs');
+ const [selectedEntityViews, setSelectedEntityViews] = useState([]);
+
+ const {
+ data: logsViewsData,
+ isLoading: logsViewsLoading,
+ isError: logsViewsError,
+ } = useGetAllViews(DataSource.LOGS);
+
+ const {
+ data: tracesViewsData,
+ isLoading: tracesViewsLoading,
+ isError: tracesViewsError,
+ } = useGetAllViews(DataSource.TRACES);
+
+ const logsViews = useMemo(() => [...(logsViewsData?.data.data || [])], [
+ logsViewsData,
+ ]);
+
+ const tracesViews = useMemo(() => [...(tracesViewsData?.data.data || [])], [
+ tracesViewsData,
+ ]);
+
+ useEffect(() => {
+ setSelectedEntityViews(selectedEntity === 'logs' ? logsViews : tracesViews);
+ }, [selectedEntity, logsViews, tracesViews]);
+
+ const hasTracesViews = tracesViews.length > 0;
+ const hasLogsViews = logsViews.length > 0;
+
+ const hasSavedViews = hasTracesViews || hasLogsViews;
+
+ const { handleExplorerTabChange } = useHandleExplorerTabChange();
+
+ const handleRedirectQuery = (view: ViewProps): void => {
+ logEvent('Homepage: Saved view clicked', {
+ viewId: view.uuid,
+ viewName: view.name,
+ entity: selectedEntity,
+ });
+
+ const currentViewDetails = getViewDetailsUsingViewKey(
+ view.uuid,
+ selectedEntity === 'logs' ? logsViews : tracesViews,
+ );
+ if (!currentViewDetails) return;
+ const { query, name, uuid, panelType: currentPanelType } = currentViewDetails;
+
+ if (selectedEntity) {
+ handleExplorerTabChange(
+ currentPanelType,
+ {
+ query,
+ name,
+ uuid,
+ },
+ SOURCEPAGE_VS_ROUTES[selectedEntity],
+ );
+ }
+ };
+
+ useEffect(() => {
+ if (hasSavedViews && !loadingUserPreferences) {
+ onUpdateChecklistDoneItem('SETUP_SAVED_VIEWS');
+ }
+ }, [hasSavedViews, onUpdateChecklistDoneItem, loadingUserPreferences]);
+
+ const emptyStateCard = (): JSX.Element => (
+
+
+
+
+
+
You have not saved any views yet.
+
+ {user?.role !== USER_ROLES.VIEWER && (
+
+ Explore your data and save them as views.
+
+ )}
+
+
+ {user?.role !== USER_ROLES.VIEWER && (
+
+
+
{
+ logEvent('Homepage: Get Started clicked', {
+ source: 'Saved Views',
+ entity: selectedEntity,
+ });
+ }}
+ >
+ Get Started
+
+
+
{
+ logEvent('Homepage: Learn more clicked', {
+ source: 'Saved Views',
+ entity: selectedEntity,
+ });
+
+ window.open(
+ 'https://signoz.io/docs/product-features/saved-view/',
+ '_blank',
+ 'noopener noreferrer',
+ );
+ }}
+ >
+ Learn more
+
+ )}
+
+
+
+ {selectedEntityViews.slice(0, 5).map((view) => (
+
handleRedirectQuery(view)}
+ onKeyDown={(e): void => {
+ if (e.key === 'Enter') {
+ handleRedirectQuery(view);
+ }
+ }}
+ >
+
+
+
+
+ {view.name}
+
+
+
+
+ {view.tags?.map((tag: string) => {
+ if (tag === '') {
+ return null;
+ }
+
+ return (
+
+ {tag}
+
+ );
+ })}
+
+
+
handleRedirectQuery(view)}
+ >
+
+
+ ))}
+
+ {selectedEntityViews.length === 0 && (
+
+
+ No saved views found.
+
+
+ )}
+
+ {selectedEntity === 'logs' && logsViewsError && (
+
+
+ Oops, something went wrong while loading your saved views.
+
+
+ )}
+
+ {selectedEntity === 'traces' && tracesViewsError && (
+
+
+ Oops, something went wrong while loading your saved views.
+
+
+ )}
+
+
+
+
+
+ );
+ }
+
+ if (logsViewsError || tracesViewsError) {
+ return (
+
+
+
+
+ );
+ }
+
+ return (
+
+ {hasSavedViews && (
+
+
+ Saved Views
+
+
+ handleTabChange('logs')}
+ >
+
+ handleTabChange('traces')}
+ >
+
+
+
+
+ )}
+
+
+ {selectedEntityViews.length > 0 ? renderSavedViews() : emptyStateCard()}
+
+
+ {selectedEntityViews.length > 0 && (
+
+
+
+
{
+ logEvent('Homepage: All saved views clicked', {
+ entity: selectedEntity,
+ });
+ }}
+ >
+ All Views
+
+
+ )}
+
+ );
+}
diff --git a/frontend/src/container/Home/Services/ServiceMetrics.tsx b/frontend/src/container/Home/Services/ServiceMetrics.tsx
new file mode 100644
index 0000000000..15318244ad
--- /dev/null
+++ b/frontend/src/container/Home/Services/ServiceMetrics.tsx
@@ -0,0 +1,339 @@
+import { Button, Select, Skeleton, Table } from 'antd';
+import logEvent from 'api/common/logEvent';
+import { ENTITY_VERSION_V4 } from 'constants/app';
+import ROUTES from 'constants/routes';
+import {
+ getQueryRangeRequestData,
+ getServiceListFromQuery,
+} from 'container/ServiceApplication/utils';
+import { useGetQueriesRange } from 'hooks/queryBuilder/useGetQueriesRange';
+import useGetTopLevelOperations from 'hooks/useGetTopLevelOperations';
+import useResourceAttribute from 'hooks/useResourceAttribute';
+import { convertRawQueriesToTraceSelectedTags } from 'hooks/useResourceAttribute/utils';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { ArrowRight, ArrowUpRight } from 'lucide-react';
+import Card from 'periscope/components/Card/Card';
+import { useAppContext } from 'providers/App/App';
+import { IUser } from 'providers/App/types';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { QueryKey } from 'react-query';
+import { useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
+import { AppState } from 'store/reducers';
+import { ServicesList } from 'types/api/metrics/getService';
+import { GlobalReducer } from 'types/reducer/globalTime';
+import { Tags } from 'types/reducer/trace';
+import { USER_ROLES } from 'types/roles';
+
+import { columns, TIME_PICKER_OPTIONS } from './constants';
+
+const homeInterval = 30 * 60 * 1000;
+
+// Extracted EmptyState component
+const EmptyState = memo(
+ ({ user }: { user: IUser }): JSX.Element => (
+
+
+
+
+
You are not sending traces yet.
+
+ Start sending traces to see your services.
+
+
+
+ {user?.role !== USER_ROLES.VIEWER && (
+
+
+
{
+ logEvent('Homepage: Get Started clicked', {
+ source: 'Service Metrics',
+ });
+ }}
+ >
+ Get Started
+
+
{
+ logEvent('Homepage: Learn more clicked', {
+ source: 'Service Metrics',
+ });
+ window.open(
+ 'https://signoz.io/docs/instrumentation/overview/',
+ '_blank',
+ );
+ }}
+ >
+ Learn more
+
+ )}
+
+
+
+
+ columns={columns}
+ dataSource={services}
+ pagination={false}
+ className="services-table"
+ onRow={(record): { onClick: () => void } => ({
+ onClick: (): void => onRowClick(record),
+ })}
+ />
+
+
+
+
+
+ );
+ }
+
+ if (isErrorTopLevelOperations || isError) {
+ return (
+
+
+
+
+ );
+ }
+
+ return (
+
+ {servicesExist && (
+
+
+ {' '}
+ Services
+
+
+
+ )}
+
+ {servicesExist ? (
+
+
+ {servicesExist && (
+
+
+
+
{
+ logEvent('Homepage: All Services clicked', {});
+ }}
+ >
+ All Services
+
+
+ )}
+
+ );
+}
+
+export default memo(ServiceMetrics);
diff --git a/frontend/src/container/Home/Services/ServiceTraces.tsx b/frontend/src/container/Home/Services/ServiceTraces.tsx
new file mode 100644
index 0000000000..5cd7724ec5
--- /dev/null
+++ b/frontend/src/container/Home/Services/ServiceTraces.tsx
@@ -0,0 +1,237 @@
+import { Button, Select, Skeleton, Table } from 'antd';
+import logEvent from 'api/common/logEvent';
+import ROUTES from 'constants/routes';
+import { useQueryService } from 'hooks/useQueryService';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { ArrowRight, ArrowUpRight } from 'lucide-react';
+import Card from 'periscope/components/Card/Card';
+import { useAppContext } from 'providers/App/App';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
+import { AppState } from 'store/reducers';
+import { ServicesList } from 'types/api/metrics/getService';
+import { GlobalReducer } from 'types/reducer/globalTime';
+import { USER_ROLES } from 'types/roles';
+
+import { columns, TIME_PICKER_OPTIONS } from './constants';
+
+const homeInterval = 30 * 60 * 1000;
+
+export default function ServiceTraces({
+ onUpdateChecklistDoneItem,
+ loadingUserPreferences,
+}: {
+ onUpdateChecklistDoneItem: (itemKey: string) => void;
+ loadingUserPreferences: boolean;
+}): JSX.Element {
+ const { selectedTime } = useSelector(
+ (state) => state.globalTime,
+ );
+
+ const { user } = useAppContext();
+
+ const now = new Date().getTime();
+ const [timeRange, setTimeRange] = useState({
+ startTime: now - homeInterval,
+ endTime: now,
+ selectedInterval: homeInterval,
+ });
+
+ const { safeNavigate } = useSafeNavigate();
+
+ // Fetch Services
+ const {
+ data: services,
+ isLoading: isServicesLoading,
+ isFetching: isServicesFetching,
+ isError: isServicesError,
+ } = useQueryService({
+ minTime: timeRange.startTime * 1e6,
+ maxTime: timeRange.endTime * 1e6,
+ selectedTime,
+ selectedTags: [],
+ options: {
+ enabled: true,
+ },
+ });
+
+ const sortedServices = useMemo(
+ () => services?.sort((a, b) => b.p99 - a.p99) || [],
+ [services],
+ );
+
+ const servicesExist = useMemo(() => sortedServices.length > 0, [
+ sortedServices,
+ ]);
+ const top5Services = useMemo(() => sortedServices.slice(0, 5), [
+ sortedServices,
+ ]);
+
+ useEffect(() => {
+ if (servicesExist && !loadingUserPreferences) {
+ onUpdateChecklistDoneItem('SETUP_SERVICES');
+ }
+ }, [servicesExist, onUpdateChecklistDoneItem, loadingUserPreferences]);
+
+ const handleTimeIntervalChange = useCallback((value: number): void => {
+ const now = new Date();
+
+ const timeInterval = TIME_PICKER_OPTIONS.find(
+ (option) => option.value === value,
+ );
+
+ logEvent('Homepage: Services time interval updated', {
+ updatedTimeInterval: timeInterval?.label,
+ });
+
+ setTimeRange({
+ startTime: now.getTime() - value,
+ endTime: now.getTime(),
+ selectedInterval: value,
+ });
+ }, []);
+
+ const emptyStateCard = useMemo(
+ () => (
+
+
+
+
+
+
You are not sending traces yet.
+
+
+ Start sending traces to see your services.
+
+
+
+ {user?.role !== USER_ROLES.VIEWER && (
+
+
+
{
+ logEvent('Homepage: Get Started clicked', {
+ source: 'Service Traces',
+ });
+ }}
+ >
+ Get Started
+
+
+
{
+ logEvent('Homepage: Learn more clicked', {
+ source: 'Service Traces',
+ });
+ window.open(
+ 'https://signoz.io/docs/instrumentation/overview/',
+ '_blank',
+ );
+ }}
+ >
+ Learn more
+
+ )}
+
+
+
+
+ columns={columns}
+ dataSource={top5Services}
+ pagination={false}
+ className="services-table"
+ onRow={(record): { onClick: () => void } => ({
+ onClick: (): void => {
+ logEvent('Homepage: Service clicked', {
+ serviceName: record.serviceName,
+ });
+
+ safeNavigate(`${ROUTES.APPLICATION}/${record.serviceName}`);
+ },
+ })}
+ />
+
+
+
+
+
+ );
+ }
+
+ if (isServicesError) {
+ return (
+
+
+
+
+ );
+ }
+
+ return (
+
+ {servicesExist && (
+
+
+
+ )}
+
+ {servicesExist ? renderDashboardsList() : emptyStateCard}
+
+
+ {servicesExist && (
+
+
+
+
{
+ logEvent('Homepage: All Services clicked', {});
+ }}
+ >
+ All Services
+
+
+ )}
+
+ );
+}
diff --git a/frontend/src/container/Home/Services/Services.tsx b/frontend/src/container/Home/Services/Services.tsx
new file mode 100644
index 0000000000..f3e0490586
--- /dev/null
+++ b/frontend/src/container/Home/Services/Services.tsx
@@ -0,0 +1,40 @@
+import * as Sentry from '@sentry/react';
+import { FeatureKeys } from 'constants/features';
+import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+import { useAppContext } from 'providers/App/App';
+
+import ServiceMetrics from './ServiceMetrics';
+import ServiceTraces from './ServiceTraces';
+
+function Services({
+ onUpdateChecklistDoneItem,
+ loadingUserPreferences,
+}: {
+ onUpdateChecklistDoneItem: (itemKey: string) => void;
+ loadingUserPreferences: boolean;
+}): JSX.Element {
+ const { featureFlags } = useAppContext();
+ const isSpanMetricEnabled =
+ featureFlags?.find((flag) => flag.name === FeatureKeys.USE_SPAN_METRICS)
+ ?.active || false;
+
+ return (
+
+ {isSpanMetricEnabled ? (
+
+
+ );
+}
+
+export default Services;
diff --git a/frontend/src/container/Home/Services/constants.ts b/frontend/src/container/Home/Services/constants.ts
new file mode 100644
index 0000000000..8eec85696e
--- /dev/null
+++ b/frontend/src/container/Home/Services/constants.ts
@@ -0,0 +1,80 @@
+import { TableProps } from 'antd';
+import { ServicesList } from 'types/api/metrics/getService';
+
+export const columns: TableProps['columns'] = [
+ {
+ title: 'APPLICATION',
+ dataIndex: 'serviceName',
+ key: 'serviceName',
+ },
+ {
+ title: 'P99 LATENCY (in ms)',
+ dataIndex: 'p99',
+ key: 'p99',
+ render: (value: number): string => (value / 1000000).toFixed(2),
+ },
+ {
+ title: 'ERROR RATE (% of total)',
+ dataIndex: 'errorRate',
+ key: 'errorRate',
+
+ render: (value: number): string => value.toFixed(2),
+ },
+ {
+ title: 'OPS / SEC',
+ dataIndex: 'callRate',
+ key: 'callRate',
+ render: (value: number): string => value.toFixed(2),
+ },
+];
+
+export enum TimeIntervalsEnum {
+ LAST_5_MINUTES = 60 * 5 * 1000, // 300000
+ LAST_15_MINUTES = 60 * 15 * 1000, // 900000
+ LAST_30_MINUTES = 60 * 30 * 1000, // 1800000
+ LAST_1_HOUR = 60 * 60 * 1000, // 3600000
+ LAST_6_HOURS = 60 * 60 * 6 * 1000, // 21600000
+ LAST_1_DAY = 60 * 60 * 24 * 1000, // 86400000
+ LAST_3_DAYS = 60 * 60 * 24 * 3 * 1000, // 259200000
+ LAST_7_DAYS = 60 * 60 * 24 * 7 * 1000, // 604800000
+ LAST_30_DAYS = 60 * 60 * 24 * 30 * 1000, // 2592000000
+}
+
+export const TIME_PICKER_OPTIONS = [
+ {
+ value: TimeIntervalsEnum.LAST_5_MINUTES,
+ label: 'Last 5 minutes',
+ },
+ {
+ value: TimeIntervalsEnum.LAST_15_MINUTES,
+ label: 'Last 15 minutes',
+ },
+ {
+ value: TimeIntervalsEnum.LAST_30_MINUTES,
+ label: 'Last 30 minutes',
+ },
+ {
+ value: TimeIntervalsEnum.LAST_1_HOUR,
+ label: 'Last 1 hour',
+ },
+ {
+ value: TimeIntervalsEnum.LAST_6_HOURS,
+ label: 'Last 6 hours',
+ },
+ {
+ value: TimeIntervalsEnum.LAST_1_DAY,
+ label: 'Last 1 day',
+ },
+ {
+ value: TimeIntervalsEnum.LAST_3_DAYS,
+ label: 'Last 3 days',
+ },
+ {
+ value: TimeIntervalsEnum.LAST_7_DAYS,
+ label: 'Last 1 week',
+ },
+ {
+ value: TimeIntervalsEnum.LAST_30_DAYS,
+ label: 'Last 1 month',
+ },
+];
diff --git a/frontend/src/container/Home/StepsProgress/StepsProgress.styles.scss b/frontend/src/container/Home/StepsProgress/StepsProgress.styles.scss
new file mode 100644
index 0000000000..dc14c278fe
--- /dev/null
+++ b/frontend/src/container/Home/StepsProgress/StepsProgress.styles.scss
@@ -0,0 +1,55 @@
+.steps-progress-container {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.steps-progress-title {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.steps-progress-title-text {
+ color: var(--Vanilla-400, #c0c1c3);
+ font-family: Inter;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 20px; /* 142.857% */
+ letter-spacing: -0.07px;
+}
+
+.steps-progress-count {
+ color: var(--Vanilla-400, #c0c1c3);
+ font-family: Inter;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 20px; /* 142.857% */
+ letter-spacing: -0.07px;
+}
+
+.steps-progress-progress {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+
+ width: 100% !important;
+
+ .ant-progress-steps-outer {
+ width: 100% !important;
+ }
+}
+
+.lightMode {
+ .steps-progress-title-text {
+ color: var(--bg-ink-300);
+ }
+
+ .steps-progress-count {
+ color: var(--bg-ink-300);
+ }
+}
diff --git a/frontend/src/container/Home/StepsProgress/StepsProgress.tsx b/frontend/src/container/Home/StepsProgress/StepsProgress.tsx
new file mode 100644
index 0000000000..f341943c34
--- /dev/null
+++ b/frontend/src/container/Home/StepsProgress/StepsProgress.tsx
@@ -0,0 +1,45 @@
+import './StepsProgress.styles.scss';
+
+import { Progress } from 'antd';
+
+import { ChecklistItem } from '../HomeChecklist/HomeChecklist';
+
+function StepsProgress({
+ checklistItems,
+}: {
+ checklistItems: ChecklistItem[];
+}): JSX.Element {
+ const completedChecklistItems = checklistItems.filter(
+ (item) => item.completed,
+ );
+
+ const totalChecklistItems = checklistItems.length;
+
+ const progress = Math.round(
+ (completedChecklistItems.length / totalChecklistItems) * 100,
+ );
+
+ return (
+
+
+
+ Build your observability base
+
+
+ Step {completedChecklistItems.length} / {totalChecklistItems}
+
+
+
+
+
Get Started (2/4)
diff --git a/frontend/src/container/ServiceApplication/ServiceMetrics/ServiceMetricTable.tsx b/frontend/src/container/ServiceApplication/ServiceMetrics/ServiceMetricTable.tsx
index 9541ee0936..85049ea692 100644
--- a/frontend/src/container/ServiceApplication/ServiceMetrics/ServiceMetricTable.tsx
+++ b/frontend/src/container/ServiceApplication/ServiceMetrics/ServiceMetricTable.tsx
@@ -114,6 +114,7 @@ function ServiceMetricTable({
loading={isLoading}
dataSource={services}
rowKey="serviceName"
+ className="service-metrics-table"
/>
);
diff --git a/frontend/src/container/ServiceApplication/ServiceTraces/ServiceTracesTable.tsx b/frontend/src/container/ServiceApplication/ServiceTraces/ServiceTracesTable.tsx
index fcc4c78933..32cb805651 100644
--- a/frontend/src/container/ServiceApplication/ServiceTraces/ServiceTracesTable.tsx
+++ b/frontend/src/container/ServiceApplication/ServiceTraces/ServiceTracesTable.tsx
@@ -71,6 +71,7 @@ function ServiceTraceTable({
loading={loading}
dataSource={services}
rowKey="serviceName"
+ className="service-traces-table"
/>
);
diff --git a/frontend/src/container/SideNav/SideNav.tsx b/frontend/src/container/SideNav/SideNav.tsx
index 8c1305c970..9f71c2f810 100644
--- a/frontend/src/container/SideNav/SideNav.tsx
+++ b/frontend/src/container/SideNav/SideNav.tsx
@@ -352,7 +352,7 @@ function SideNav(): JSX.Element {
// eslint-disable-next-line react/no-unknown-property
onClick={(event: MouseEvent): void => {
// Current home page
- onClickHandler(ROUTES.APPLICATION, event);
+ onClickHandler(ROUTES.HOME, event);
}}
>