- 
+
-
)}
-
+
)}
);
diff --git a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss
index c46d9975f4..34bdd0508e 100644
--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss
@@ -8,6 +8,7 @@
display: flex;
align-items: center;
justify-content: space-between;
+ cursor: pointer;
.left-action {
display: flex;
diff --git a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx
index dcf3cc8f3e..bd8b9b1d38 100644
--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx
@@ -396,23 +396,22 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
return (
+
+
);
diff --git a/frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx b/frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx
index 7a3ab8c0ab..ee61e687cb 100644
--- a/frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx
+++ b/frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx
@@ -11,6 +11,7 @@ import {
Typography,
} from 'antd';
import { RadioChangeEvent } from 'antd/lib';
+import logEvent from 'api/common/logEvent';
import { QueryParams } from 'constants/query';
import {
initialQueryBuilderFormValuesMap,
@@ -118,6 +119,13 @@ function HostMetricsDetails({
initialFilters,
);
+ useEffect(() => {
+ logEvent('Infra Monitoring: Hosts list details page visited', {
+ host: host?.hostName,
+ });
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
useEffect(() => {
setLogFilters(initialFilters);
setTracesFilters(initialFilters);
@@ -143,6 +151,7 @@ function HostMetricsDetails({
const handleTimeChange = useCallback(
(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
setSelectedInterval(interval as Time);
+
if (interval === 'custom' && dateTimeRange) {
setModalTimeRange({
startTime: Math.floor(dateTimeRange[0] / 1000),
@@ -156,7 +165,13 @@ function HostMetricsDetails({
endTime: Math.floor(maxTime / 1000000000),
});
}
+
+ logEvent('Infra Monitoring: Hosts list details time updated', {
+ host: host?.hostName,
+ interval,
+ });
},
+ // eslint-disable-next-line react-hooks/exhaustive-deps
[],
);
@@ -171,6 +186,10 @@ function HostMetricsDetails({
(item) => item.key?.key !== 'id' && item.key?.key !== 'host.name',
);
+ logEvent('Infra Monitoring: Hosts list details logs filters applied', {
+ host: host?.hostName,
+ });
+
return {
op: 'AND',
items: [
@@ -181,6 +200,7 @@ function HostMetricsDetails({
};
});
},
+ // eslint-disable-next-line react-hooks/exhaustive-deps
[],
);
@@ -190,6 +210,11 @@ function HostMetricsDetails({
const hostNameFilter = prevFilters.items.find(
(item) => item.key?.key === 'host.name',
);
+
+ logEvent('Infra Monitoring: Hosts list details traces filters applied', {
+ host: host?.hostName,
+ });
+
return {
op: 'AND',
items: [
@@ -199,6 +224,7 @@ function HostMetricsDetails({
};
});
},
+ // eslint-disable-next-line react-hooks/exhaustive-deps
[],
);
@@ -211,6 +237,11 @@ function HostMetricsDetails({
urlQuery.set(QueryParams.endTime, modalTimeRange.endTime.toString());
}
+ logEvent('Infra Monitoring: Hosts list details explore clicked', {
+ host: host?.hostName,
+ view: selectedView,
+ });
+
if (selectedView === VIEW_TYPES.LOGS) {
const filtersWithoutPagination = {
...logFilters,
diff --git a/frontend/src/components/HostMetricsDetail/Processes/Processes.styles.scss b/frontend/src/components/HostMetricsDetail/Processes/Processes.styles.scss
index e2f182d04d..b1e4fda451 100644
--- a/frontend/src/components/HostMetricsDetail/Processes/Processes.styles.scss
+++ b/frontend/src/components/HostMetricsDetail/Processes/Processes.styles.scss
@@ -1,7 +1,24 @@
.host-processes {
- max-width: 600px;
- margin: 150px auto;
- padding: 0 16px;
+ gap: 24px;
+ height: 60vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ margin: 0 auto;
+ box-sizing: border-box;
+
+ .infra-container-card-container {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ }
+
+ .dev-status-container {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ }
.infra-container-card {
display: flex;
@@ -17,6 +34,7 @@
width: 400px;
font-family: 'Inter';
margin-top: 12px;
+ font-weight: 300;
}
.infra-container-working-msg {
diff --git a/frontend/src/components/HostMetricsDetail/Processes/Processes.tsx b/frontend/src/components/HostMetricsDetail/Processes/Processes.tsx
index cd5baf14ca..19da46a0e2 100644
--- a/frontend/src/components/HostMetricsDetail/Processes/Processes.tsx
+++ b/frontend/src/components/HostMetricsDetail/Processes/Processes.tsx
@@ -3,6 +3,8 @@ import './Processes.styles.scss';
import { Space, Typography } from 'antd';
import { useTranslation } from 'react-i18next';
+import WaitlistFragment from '../WaitlistFragment/WaitlistFragment';
+
const { Text } = Typography;
function Processes(): JSX.Element {
@@ -10,23 +12,29 @@ function Processes(): JSX.Element {
return (
+
+ {t('containers_visualization_message')}
+
+
-
+
-
- {t('containers_visualization_message')}
-
-
+
-
-
- 
- {t('working_message')}
-
+
+
+
-
+
+
+ {t('working_message')}
+
+
+
+
-
-
- {t('processes_visualization_message')}
-
-
+
-
+ ((state) => state.app);
+ const { t } = useTranslation(['infraMonitoring']);
+ const { notifications } = useNotifications();
+
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const [isSuccess, setIsSuccess] = useState(false);
+
+ const handleJoinWaitlist = (): void => {
+ if (!user || !user.email) return;
+
+ setIsSubmitting(true);
+
+ logEvent('Infra Monitoring: Get Early Access Clicked', {
+ entity_type: entityType,
+ userEmail: user.email,
+ })
+ .then(() => {
+ notifications.success({
+ message: t('waitlist_success_message'),
+ });
+
+ setIsSubmitting(false);
+ setIsSuccess(true);
+
+ setTimeout(() => {
+ setIsSuccess(false);
+ }, 4000);
+ })
+ .catch((error) => {
+ console.error('Error logging event:', error);
+ });
+ };
+
+ return (
+ (null);
+ const listRef = useRef(null);
+ const initialMouseEnterRef = useRef(false);
const onChange = useCallback(
(key: LogViewMode) => {
@@ -49,7 +56,7 @@ export default function LogsFormatOptionsMenu({
const handleMenuItemClick = (key: LogViewMode): void => {
setSelectedItem(key);
onChange(key);
- setAddNewColumn(false);
+ setShowAddNewColumnContainer(false);
};
const incrementMaxLinesPerRow = (): void => {
@@ -75,7 +82,8 @@ export default function LogsFormatOptionsMenu({
}, 300);
const handleToggleAddNewColumn = (): void => {
- setAddNewColumn(!addNewColumn);
+ addColumn?.onSearch?.('');
+ setShowAddNewColumnContainer(!showAddNewColumnContainer);
};
const handleLinesPerRowChange = (maxLinesPerRow: number | null): void => {
@@ -100,9 +108,106 @@ export default function LogsFormatOptionsMenu({
}
}, [fontSizeValue]);
+ function handleColumnSelection(
+ currentIndex: number,
+ optionsData: DefaultOptionType[],
+ ): void {
+ const currentItem = optionsData[currentIndex];
+ const itemLength = optionsData.length;
+ if (addColumn && addColumn?.onSelect) {
+ addColumn?.onSelect(selectedValue, {
+ label: currentItem.label,
+ disabled: false,
+ });
+
+ // if the last element is selected then select the previous one
+ if (currentIndex === itemLength - 1) {
+ // there should be more than 1 element in the list
+ if (currentIndex - 1 >= 0) {
+ const prevValue = optionsData[currentIndex - 1]?.value || null;
+ setSelectedValue(prevValue as string | null);
+ } else {
+ // if there is only one element then just select and do nothing
+ setSelectedValue(null);
+ }
+ } else {
+ // selecting any random element from the list except the last one
+ const nextIndex = currentIndex + 1;
+
+ const nextValue = optionsData[nextIndex]?.value || null;
+
+ setSelectedValue(nextValue as string | null);
+ }
+ }
+ }
+
+ const handleKeyDown = (e: KeyboardEvent): void => {
+ if (!selectedValue) return;
+
+ const optionsData = addColumn?.options || [];
+
+ const currentIndex = optionsData.findIndex(
+ (item) => item?.value === selectedValue,
+ );
+
+ const itemLength = optionsData.length;
+
+ switch (e.key) {
+ case 'ArrowUp': {
+ const newValue = optionsData[Math.max(0, currentIndex - 1)]?.value;
+
+ setSelectedValue(newValue as string | null);
+ e.preventDefault();
+ break;
+ }
+ case 'ArrowDown': {
+ const newValue =
+ optionsData[Math.min(itemLength - 1, currentIndex + 1)]?.value;
+
+ setSelectedValue(newValue as string | null);
+ e.preventDefault();
+ break;
+ }
+ case 'Enter':
+ e.preventDefault();
+ handleColumnSelection(currentIndex, optionsData);
+ break;
+ default:
+ break;
+ }
+ };
+
+ useEffect(() => {
+ // Scroll the selected item into view
+ const listNode = listRef.current;
+ if (listNode && selectedValue) {
+ const optionsData = addColumn?.options || [];
+ const currentIndex = optionsData.findIndex(
+ (item) => item?.value === selectedValue,
+ );
+ const itemNode = listNode.children[currentIndex] as HTMLElement;
+ if (itemNode) {
+ itemNode.scrollIntoView({
+ behavior: 'smooth',
+ block: 'nearest',
+ });
+ }
+ }
+ }, [selectedValue]);
+
+ useEffect(() => {
+ window.addEventListener('keydown', handleKeyDown);
+ return (): void => {
+ window.removeEventListener('keydown', handleKeyDown);
+ };
+ }, [selectedValue]);
+
return (
- ) : (
- <>
+ ) : null}
+
+ {showAddNewColumnContainer && (
+
+
);
diff --git a/frontend/src/components/HostMetricsDetail/WaitlistFragment/WaitListFragment.styles.scss b/frontend/src/components/HostMetricsDetail/WaitlistFragment/WaitListFragment.styles.scss
new file mode 100644
index 0000000000..3cad900e6b
--- /dev/null
+++ b/frontend/src/components/HostMetricsDetail/WaitlistFragment/WaitListFragment.styles.scss
@@ -0,0 +1,15 @@
+.wait-list-container {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ .wait-list-text {
+ font-weight: 300;
+ }
+
+ .join-waitlist-btn {
+ width: 160px;
+ border-radius: 2px;
+ background: var(--slate-500);
+ }
+}
diff --git a/frontend/src/components/HostMetricsDetail/WaitlistFragment/WaitlistFragment.tsx b/frontend/src/components/HostMetricsDetail/WaitlistFragment/WaitlistFragment.tsx
new file mode 100644
index 0000000000..08c15db2b7
--- /dev/null
+++ b/frontend/src/components/HostMetricsDetail/WaitlistFragment/WaitlistFragment.tsx
@@ -0,0 +1,75 @@
+import './WaitListFragment.styles.scss';
+
+import { Color } from '@signozhq/design-tokens';
+import { Button, Typography } from 'antd';
+import logEvent from 'api/common/logEvent';
+import { useNotifications } from 'hooks/useNotifications';
+import { CheckCircle2, HandPlatter } from 'lucide-react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import AppReducer from 'types/reducer/app';
+
+export default function WaitlistFragment({
+ entityType,
+}: {
+ entityType: string;
+}): JSX.Element {
+ const { user } = useSelector
+
+
+ {t('processes_visualization_message')}
+
+
-
+
-
-
- {t('working_message')}
-
+
+
+
-
+
+
+ {t('working_message')}
+
+
+
+
+
+ {t('waitlist_message')}
+
+
+
+ ) : (
+
+ );
+}
diff --git a/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss b/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss
index 070d440781..72ceaef26a 100644
--- a/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss
+++ b/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss
@@ -3,7 +3,7 @@
position: absolute;
right: -2px;
margin: 6px 0;
- width: 160px;
+ width: 240px;
border-radius: 4px;
@@ -24,7 +24,7 @@
.back-btn {
display: flex;
align-items: center;
- gap: 6px;
+ gap: 4px;
padding: 12px;
border: none !important;
box-shadow: none !important;
@@ -32,14 +32,16 @@
.icon {
flex-shrink: 0;
}
+
.text {
- color: var(--bg-vanilla-400);
+ color: var(--bg-slate-50);
font-family: Inter;
- font-size: 13px;
+ font-size: 11px;
font-style: normal;
- font-weight: 400;
+ font-weight: 500;
line-height: 20px; /* 142.857% */
letter-spacing: 0.14px;
+ text-transform: uppercase;
}
}
@@ -252,6 +254,75 @@
}
}
+ .add-new-column-container {
+ display: flex;
+ flex-direction: column;
+
+ .add-new-column-header {
+ display: flex;
+ flex-direction: column;
+ padding: 8px;
+ gap: 8px;
+
+ .back-icon {
+ cursor: pointer;
+ }
+
+ .title {
+ display: flex;
+ gap: 4px;
+ align-items: center;
+ color: var(--bg-slate-50);
+ text-transform: uppercase;
+ font-size: 11px;
+ font-weight: 500;
+ line-height: 18px;
+ letter-spacing: 0.88px;
+ }
+ }
+
+ .add-new-column-content {
+ display: flex;
+ flex-direction: column;
+
+ padding-bottom: 16px;
+
+ min-height: 240px;
+ max-height: 400px;
+
+ .loading-container {
+ padding: 8px;
+ }
+
+ .column-format-new-options {
+ overflow-y: auto;
+ overflow-x: hidden;
+
+ .column-name {
+ padding: 4px 8px;
+ border-radius: 1px;
+ color: var(--bg-vanilla-400, #c0c1c3);
+ font-family: Inter;
+ font-size: 13px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 20px; /* 142.857% */
+ letter-spacing: -0.07px;
+
+ &.selected {
+ background-color: var(--bg-ink-200);
+ cursor: pointer;
+ }
+ }
+
+ &::-webkit-scrollbar {
+ height: 1rem;
+ width: 0.2rem;
+ }
+ }
+ }
+ }
+
.selected-item-content-container {
.add-new-column-header {
padding: 8px;
@@ -314,6 +385,22 @@
cursor: pointer;
+ &.default-column {
+ color: var(--bg-vanilla-400, #c0c1c3);
+ cursor: not-allowed;
+ }
+
+ &.no-columns-selected {
+ color: var(--bg-slate-100);
+ font-size: 12px;
+ cursor: not-allowed;
+ }
+
+ &.add-new-column-btn {
+ color: var(--bg-vanilla-400, #c0c1c3);
+ cursor: pointer;
+ }
+
.name {
flex: 1;
overflow: hidden;
@@ -428,6 +515,30 @@
}
}
+ .add-new-column-container {
+ .add-new-column-header {
+ .title {
+ color: var(--bg-ink-100);
+ }
+ }
+
+ .add-new-column-content {
+ .column-format-new-options {
+ .column-name {
+ color: var(--bg-ink-400);
+
+ &.selected {
+ background-color: var(--bg-vanilla-400);
+ }
+ }
+ }
+
+ .loading-container {
+ color: var(--bg-ink-400);
+ }
+ }
+ }
+
.font-size-container {
.title {
color: var(--bg-ink-100);
diff --git a/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx b/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx
index 527c77c6af..740ceaf5b7 100644
--- a/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx
+++ b/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx
@@ -3,13 +3,14 @@
/* eslint-disable jsx-a11y/click-events-have-key-events */
import './LogsFormatOptionsMenu.styles.scss';
-import { Button, Divider, Input, InputNumber, Tooltip, Typography } from 'antd';
+import { Button, Input, InputNumber, Tooltip, Typography } from 'antd';
+import { DefaultOptionType } from 'antd/es/select';
import cx from 'classnames';
import { LogViewMode } from 'container/LogsTable';
import { FontSize, OptionsMenuConfig } from 'container/OptionsMenu/types';
import useDebouncedFn from 'hooks/useDebouncedFunction';
import { Check, ChevronLeft, ChevronRight, Minus, Plus, X } from 'lucide-react';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
interface LogsFormatOptionsMenuProps {
title: string;
@@ -35,7 +36,13 @@ export default function LogsFormatOptionsMenu({
false,
);
- const [addNewColumn, setAddNewColumn] = useState(false);
+ const [showAddNewColumnContainer, setShowAddNewColumnContainer] = useState(
+ false,
+ );
+
+ const [selectedValue, setSelectedValue] = useState {
// this is to restrict click events to propogate to parent
event.stopPropagation();
@@ -158,8 +263,72 @@ export default function LogsFormatOptionsMenu({
+
+ )}
+
+ {!isFontSizeOptionsOpen && !showAddNewColumnContainer && (
+
+
+
+
+
+
+
+
+
+ Add New Column
+
+ {addColumn?.isFetching && (
+
+ Loading ...
+ )}
+
+
+ {addColumn?.options?.map(({ label, value }, index) => (
+
+ {
+ if (!initialMouseEnterRef.current) {
+ setSelectedValue(value as string | null);
+ }
+
+ initialMouseEnterRef.current = true;
+ }}
+ onMouseMove={(): void => {
+ // this is added to handle the mouse move explicit event and not the re-rendered on mouse enter event
+ setSelectedValue(value as string | null);
+ }}
+ onClick={(eve): void => {
+ eve.stopPropagation();
+ handleColumnSelection(index, addColumn?.options || []);
+ }}
+ >
+
+ ))}
+
+
+ {label}
+
+
+ Font Size
- {!addNewColumn && }
-
- {addNewColumn && (
-
-
- )}
+ {!showAddNewColumnContainer && }
- {' '}
- columns
-
-
-
-
- {!addNewColumn && (
+ {!showAddNewColumnContainer && (
-
- {addColumn?.isFetching && (
-
columns
))}
- Loading ...
- )}
-
- {addNewColumn &&
- addColumn &&
- addColumn.value.length > 0 &&
- addColumn.options &&
- addColumn?.options?.length > 0 && (
-
+ No columns selected
+
)}
-
- {addNewColumn && (
-
- {addColumn?.options?.map(({ label, value }) => (
-
- )}
+ {
- eve.stopPropagation();
-
- if (addColumn && addColumn?.onSelect) {
- addColumn?.onSelect(value, { label, disabled: false });
- }
- }}
- >
-
- ))}
-
-
- {label}
-
-
-
-
+ {
+ if (isOpen) {
+ setIsOpen(false);
+ setVisibleItemsCount(10);
+ } else {
+ setIsOpen(true);
+ }
+ }}
+ >
{isOpen ? (
- {
- setIsOpen(false);
- setVisibleItemsCount(10);
- }}
- />
+ setIsOpen(true)}
- cursor="pointer"
- />
+ {filter.title}
@@ -420,7 +419,11 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
{isOpen && (
{
+ e.stopPropagation();
+ e.preventDefault();
+ handleClearFilterAttribute();
+ }}
>
Clear All
diff --git a/frontend/src/constants/features.ts b/frontend/src/constants/features.ts
index 12de61c0d5..9a2550ec0b 100644
--- a/frontend/src/constants/features.ts
+++ b/frontend/src/constants/features.ts
@@ -23,5 +23,4 @@ export enum FeatureKeys {
PREMIUM_SUPPORT = 'PREMIUM_SUPPORT',
QUERY_BUILDER_SEARCH_V2 = 'QUERY_BUILDER_SEARCH_V2',
ANOMALY_DETECTION = 'ANOMALY_DETECTION',
- HOSTS_INFRA_MONITORING = 'HOSTS_INFRA_MONITORING',
}
diff --git a/frontend/src/constants/reactQueryKeys.ts b/frontend/src/constants/reactQueryKeys.ts
index d25c180eaa..36cf99157e 100644
--- a/frontend/src/constants/reactQueryKeys.ts
+++ b/frontend/src/constants/reactQueryKeys.ts
@@ -20,4 +20,5 @@ export const REACT_QUERY_KEY = {
DUPLICATE_ALERT_RULE: 'DUPLICATE_ALERT_RULE',
GET_HOST_LIST: 'GET_HOST_LIST',
UPDATE_ALERT_RULE: 'UPDATE_ALERT_RULE',
+ GET_ACTIVE_LICENSE_V3: 'GET_ACTIVE_LICENSE_V3',
};
diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts
index 0760c57074..7b2911dbd6 100644
--- a/frontend/src/constants/routes.ts
+++ b/frontend/src/constants/routes.ts
@@ -55,6 +55,7 @@ const ROUTES = {
LOGS_SAVE_VIEWS: '/logs/saved-views',
TRACES_SAVE_VIEWS: '/traces/saved-views',
WORKSPACE_LOCKED: '/workspace-locked',
+ WORKSPACE_SUSPENDED: '/workspace-suspended',
SHORTCUTS: '/shortcuts',
INTEGRATIONS: '/integrations',
MESSAGING_QUEUES: '/messaging-queues',
diff --git a/frontend/src/container/AppLayout/AppLayout.styles.scss b/frontend/src/container/AppLayout/AppLayout.styles.scss
index 98ca9084f2..6bd06caded 100644
--- a/frontend/src/container/AppLayout/AppLayout.styles.scss
+++ b/frontend/src/container/AppLayout/AppLayout.styles.scss
@@ -108,6 +108,13 @@
text-align: center;
}
+.payment-failed-banner {
+ padding: 8px;
+ background-color: var(--bg-sakura-500);
+ color: white;
+ text-align: center;
+}
+
.upgrade-link {
padding: 0px;
padding-right: 4px;
diff --git a/frontend/src/container/AppLayout/index.tsx b/frontend/src/container/AppLayout/index.tsx
index 4d9e68f98a..264213b180 100644
--- a/frontend/src/container/AppLayout/index.tsx
+++ b/frontend/src/container/AppLayout/index.tsx
@@ -5,25 +5,30 @@ import './AppLayout.styles.scss';
import * as Sentry from '@sentry/react';
import { Flex } from 'antd';
+import manageCreditCardApi from 'api/billing/manage';
import getUserLatestVersion from 'api/user/getLatestVersion';
import getUserVersion from 'api/user/getVersion';
import cx from 'classnames';
import ChatSupportGateway from 'components/ChatSupportGateway/ChatSupportGateway';
import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
import { FeatureKeys } from 'constants/features';
import ROUTES from 'constants/routes';
import SideNav from 'container/SideNav';
import TopNav from 'container/TopNav';
+import dayjs from 'dayjs';
import { useIsDarkMode } from 'hooks/useDarkMode';
import useFeatureFlags from 'hooks/useFeatureFlag';
import useLicense from 'hooks/useLicense';
import { useNotifications } from 'hooks/useNotifications';
import history from 'lib/history';
+import { isNull } from 'lodash-es';
import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+import { useAppContext } from 'providers/App/App';
import { ReactNode, useEffect, useMemo, useRef, useState } from 'react';
import { Helmet } from 'react-helmet-async';
import { useTranslation } from 'react-i18next';
-import { useQueries } from 'react-query';
+import { useMutation, useQueries } from 'react-query';
import { useDispatch, useSelector } from 'react-redux';
import { useLocation } from 'react-router-dom';
import { Dispatch } from 'redux';
@@ -35,9 +40,16 @@ import {
UPDATE_LATEST_VERSION,
UPDATE_LATEST_VERSION_ERROR,
} from 'types/actions/app';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
+import { LicenseEvent } from 'types/api/licensesV3/getActive';
import AppReducer from 'types/reducer/app';
import { isCloudUser } from 'utils/app';
-import { getFormattedDate, getRemainingDays } from 'utils/timeUtils';
+import {
+ getFormattedDate,
+ getFormattedDateWithMinutes,
+ getRemainingDays,
+} from 'utils/timeUtils';
import { ChildrenContainer, Layout, LayoutContent } from './styles';
import { getRouteKey } from './utils';
@@ -48,8 +60,42 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
(state) => state.app,
);
+ const { activeLicenseV3, isFetchingActiveLicenseV3 } = useAppContext();
const { notifications } = useNotifications();
+ const [
+ showPaymentFailedWarning,
+ setShowPaymentFailedWarning,
+ ] = useState(false);
+
+ const handleBillingOnSuccess = (
+ data: ErrorResponse | SuccessResponse,
+ ): void => {
+ if (data?.payload?.redirectURL) {
+ const newTab = document.createElement('a');
+ newTab.href = data.payload.redirectURL;
+ newTab.target = '_blank';
+ newTab.rel = 'noopener noreferrer';
+ newTab.click();
+ }
+ };
+
+ const handleBillingOnError = (): void => {
+ notifications.error({
+ message: SOMETHING_WENT_WRONG,
+ });
+ };
+
+ const {
+ mutate: manageCreditCard,
+ isLoading: isLoadingManageBilling,
+ } = useMutation(manageCreditCardApi, {
+ onSuccess: (data) => {
+ handleBillingOnSuccess(data);
+ },
+ onError: handleBillingOnError,
+ });
+
const isDarkMode = useIsDarkMode();
const { data: licenseData, isFetching } = useLicense();
@@ -212,6 +258,16 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
}
}, [licenseData, isFetching]);
+ useEffect(() => {
+ if (
+ !isFetchingActiveLicenseV3 &&
+ !isNull(activeLicenseV3) &&
+ activeLicenseV3?.event_queue?.event === LicenseEvent.FAILED_PAYMENT
+ ) {
+ setShowPaymentFailedWarning(true);
+ }
+ }, [activeLicenseV3, isFetchingActiveLicenseV3]);
+
useEffect(() => {
// after logging out hide the trial expiry banner
if (!isLoggedIn) {
@@ -225,6 +281,14 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
}
};
+ const handleFailedPayment = (): void => {
+ manageCreditCard({
+ licenseKey: activeLicenseV3?.key || '',
+ successURL: window.location.href,
+ cancelURL: window.location.href,
+ });
+ };
+
const isLogsView = (): boolean =>
routeKey === 'LOGS' ||
routeKey === 'LOGS_EXPLORER' ||
@@ -269,7 +333,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
{pageTitle}
- {showTrialExpiryBanner && (
+ {showTrialExpiryBanner && !showPaymentFailedWarning && (
{isToDisplayLayout && !renderFullScreen && (
diff --git a/frontend/src/container/InfraMonitoringHosts/HostsEmptyOrIncorrectMetrics.tsx b/frontend/src/container/InfraMonitoringHosts/HostsEmptyOrIncorrectMetrics.tsx
new file mode 100644
index 0000000000..64a0550126
--- /dev/null
+++ b/frontend/src/container/InfraMonitoringHosts/HostsEmptyOrIncorrectMetrics.tsx
@@ -0,0 +1,52 @@
+import { Typography } from 'antd';
+
+export default function HostsEmptyOrIncorrectMetrics({
+ noData,
+ incorrectData,
+}: {
+ noData: boolean;
+ incorrectData: boolean;
+}): JSX.Element {
+ return (
+ (
(state) => state.globalTime,
@@ -69,6 +71,16 @@ function HostsList(): JSX.Element {
},
);
+ const sentAnyHostMetricsData = useMemo(
+ () => data?.payload?.data?.sentAnyHostMetricsData || false,
+ [data],
+ );
+
+ const isSendingIncorrectK8SAgentMetrics = useMemo(
+ () => data?.payload?.data?.isSendingK8SAgentMetrics || false,
+ [data],
+ );
+
const hostMetricsData = useMemo(() => data?.payload?.data?.records || [], [
data,
]);
@@ -81,9 +93,6 @@ function HostsList(): JSX.Element {
const columns = useMemo(() => getHostsListColumns(), []);
- const isDataPresent =
- !isLoading && !isFetching && !isError && hostMetricsData.length === 0;
-
const handleTableChange: TableProps['onChange'] = useCallback(
(
pagination: TablePaginationConfig,
@@ -112,11 +121,19 @@ function HostsList(): JSX.Element {
if (isNewFilterAdded) {
setFilters(value);
setCurrentPage(1);
+
+ logEvent('Infra Monitoring: Hosts list filters applied', {
+ filters: value,
+ });
}
},
[filters],
);
+ useEffect(() => {
+ logEvent('Infra Monitoring: Hosts list page visited', {});
+ }, []);
+
const selectedHostData = useMemo(() => {
if (!selectedHostName) return null;
return (
@@ -126,29 +143,85 @@ function HostsList(): JSX.Element {
const handleRowClick = (record: HostRowData): void => {
setSelectedHostName(record.hostName);
+
+ logEvent('Infra Monitoring: Hosts list item clicked', {
+ host: record.hostName,
+ });
};
const handleCloseHostDetail = (): void => {
setSelectedHostName(null);
};
+ const showHostsTable =
+ !isError &&
+ sentAnyHostMetricsData &&
+ !isSendingIncorrectK8SAgentMetrics &&
+ !(formattedHostMetricsData.length === 0 && filters.items.length > 0);
+
+ const showNoFilteredHostsMessage =
+ !isFetching &&
+ !isLoading &&
+ formattedHostMetricsData.length === 0 &&
+ filters.items.length > 0;
+
+ const showHostsEmptyState =
+ !isFetching &&
+ !isLoading &&
+ (!sentAnyHostMetricsData || isSendingIncorrectK8SAgentMetrics);
+
return (
{data?.error || 'Something went wrong'} }
- {isDataPresent && filters.items.length === 0 && (
- tr > th {
diff --git a/frontend/src/container/SideNav/NavItem/NavItem.tsx b/frontend/src/container/SideNav/NavItem/NavItem.tsx
index 97a8cdb0ed..012708cc30 100644
--- a/frontend/src/container/SideNav/NavItem/NavItem.tsx
+++ b/frontend/src/container/SideNav/NavItem/NavItem.tsx
@@ -16,7 +16,7 @@ export default function NavItem({
isActive: boolean;
onClick: (event: React.MouseEvent
You are in free trial period. Your free trial will end on{' '}
@@ -289,6 +353,36 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
)}
)}
+ {!showTrialExpiryBanner && showPaymentFailedWarning && (
+
+ Your bill payment has failed. Your workspace will get suspended on{' '}
+
+ {getFormattedDateWithMinutes(
+ dayjs(activeLicenseV3?.event_queue?.scheduled_at).unix() || Date.now(),
+ )}
+ .
+
+ {role === 'ADMIN' ? (
+
+ {' '}
+ Please{' '}
+ {
+ if (!isLoadingManageBilling) {
+ handleFailedPayment();
+ }
+ }}
+ >
+ pay the bill
+
+ to continue using SigNoz features.
+
+ ) : (
+ ' Please contact your administrator to pay the bill.'
+ )}
+
+ )}
+
+ );
+}
diff --git a/frontend/src/container/InfraMonitoringHosts/HostsList.tsx b/frontend/src/container/InfraMonitoringHosts/HostsList.tsx
index e7ae5912b2..2dc9b26662 100644
--- a/frontend/src/container/InfraMonitoringHosts/HostsList.tsx
+++ b/frontend/src/container/InfraMonitoringHosts/HostsList.tsx
@@ -2,6 +2,7 @@ import './InfraMonitoring.styles.scss';
import { LoadingOutlined } from '@ant-design/icons';
import {
+ Skeleton,
Spin,
Table,
TablePaginationConfig,
@@ -9,17 +10,17 @@ import {
Typography,
} from 'antd';
import { SorterResult } from 'antd/es/table/interface';
+import logEvent from 'api/common/logEvent';
import { HostListPayload } from 'api/infraMonitoring/getHostLists';
import HostMetricDetail from 'components/HostMetricsDetail';
-import NoLogs from 'container/NoLogs/NoLogs';
import { useGetHostList } from 'hooks/infraMonitoring/useGetHostList';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers';
import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
import { GlobalReducer } from 'types/reducer/globalTime';
+import HostsEmptyOrIncorrectMetrics from './HostsEmptyOrIncorrectMetrics';
import HostsListControls from './HostsListControls';
import {
formatDataForTable,
@@ -28,6 +29,7 @@ import {
HostRowData,
} from './utils';
+// eslint-disable-next-line sonarjs/cognitive-complexity
function HostsList(): JSX.Element {
const { maxTime, minTime } = useSelector
+ 
+
+ {noData && (
+
+ To see host metrics, upgrade to the latest version of SigNoz k8s-infra
+ chart. Please contact support if you need help.
+
+ )}
+
+
+
+ {noData && (
+
+
+ No host metrics data received yet.
+
+
+
+ Infrastructure monitoring requires the{' '}
+
+ OpenTelemetry system metrics
+
+ . Please refer to{' '}
+
+ this
+ {' '}
+ to learn how to send host metrics to SigNoz.
+
+
+ )}
+
+ {incorrectData && (
+ No hosts match the applied filters.
- )}
+ {showNoFilteredHostsMessage && (
+
+
+ )}
+
+ {(isFetching || isLoading) && (
+
+ 
- {!isError && (
+
+ This query had no results. Edit your query and try again!
+
+
+
- {!isError && (
+
+
+ )}
+
+ {showHostsTable && (
+